/* The Halloween ribbon (shared/_halloween_sash): a navy band edged in Nabry
   orange, crossing a top corner, reading "Happy Halloween" over "See Sam &
   Maya say hello", with an orange ghost wiggling at the end of the second
   line that hollows to an outline on hover. Its words keep clear of the
   borders and the clipped ends. The corner box clips the band's ends, and
   only the band takes clicks.
   --sash-reach is how far the band's center sits from the corner, down and
   across; the band is longest along its inner edge, about 2.8 times that
   plus its thickness. */
@layer components {
  .halloween-sash {
    --sash-reach: 3.4rem;
    --sash-length: 13.5rem;
    --sash-thickness: 3rem;

    position: absolute;
    z-index: 3;
    inset-block-start: 0;
    inset-inline-end: 0;
    inline-size: 9rem;
    block-size: 9rem;
    overflow: hidden;
    pointer-events: none;
  }

  .halloween-sash.is-start {
    inset-inline: 0 auto;
  }

  .halloween-sash-band {
    position: absolute;
    inset-block-start: calc(var(--sash-reach) - var(--sash-thickness) / 2);
    inset-inline-end: calc(var(--sash-reach) - var(--sash-length) / 2);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .15rem;
    inline-size: var(--sash-length);
    block-size: var(--sash-thickness);
    border-block: .125rem solid var(--color-orange);
    background: var(--color-navy);
    box-shadow: 0 .3rem .8rem rgb(16 38 83 / 28%);
    color: var(--color-white);
    text-decoration: none;
    white-space: nowrap;
    transform: rotate(45deg);
    pointer-events: auto;
  }

  .halloween-sash.is-start .halloween-sash-band {
    inset-inline: calc(var(--sash-reach) - var(--sash-length) / 2) auto;
    transform: rotate(-45deg);
  }

  .halloween-sash-title {
    font-family: var(--font-meta);
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .05em;
    line-height: 1.1;
    text-transform: uppercase;
  }

  .halloween-sash-subtitle {
    display: flex;
    align-items: center;
    gap: .25rem;
    color: rgb(244 238 227 / 90%);
    font-size: .64rem;
    font-weight: 600;
    line-height: 1.3;
  }

  /* Sits on the line like the words, tilted with the band, and wiggles a
     little from its base, staying in place. */
  .halloween-sash-ghost {
    flex: none;
    inline-size: .8rem;
    block-size: .96rem;
    overflow: visible;
    transform-origin: 50% 90%;
    animation: halloween-sash-wiggle 1.4s ease-in-out infinite;
  }

  .halloween-sash-ghost-body {
    fill: var(--color-orange);
    stroke: var(--color-orange);
    stroke-width: 8;
    stroke-linejoin: round;
    transition: fill 150ms ease;
  }

  .halloween-sash-ghost-face {
    fill: var(--color-navy);
    transition: fill 150ms ease;
  }

  /* Pointing at the sash, or focusing it, hollows the ghost to an outline. */
  .halloween-sash-band:is(:hover, :focus-visible) .halloween-sash-ghost-body {
    fill: transparent;
  }

  .halloween-sash-band:is(:hover, :focus-visible) .halloween-sash-ghost-face {
    fill: var(--color-orange);
  }

  .halloween-sash-band:focus-visible {
    outline: .18rem solid var(--color-orange);
    outline-offset: .15rem;
  }

  /* While the sash crosses the welcome dialog's corner, its title and lede
     keep clear of it. */
  .welcome-modal.has-sash .welcome-modal-title,
  .welcome-modal.has-sash #welcome-modal-lede {
    padding-inline-end: 6rem;
  }

  @keyframes halloween-sash-wiggle {
    0%, 100% { transform: rotate(-8deg); }
    50% { transform: rotate(8deg); }
  }

  @media (prefers-reduced-motion: reduce) {
    .halloween-sash-ghost {
      animation: none;
    }
  }

  @media (forced-colors: active) {
    .halloween-sash-band {
      border: .0625rem solid LinkText;
    }
  }
}