/* Site header shared by the hub (index.html) and the story (story.html):
   the sticker wordmark (-> hub) and the page links, over a dark stage.
   Also the story's "back to the box" exit in its finale. Font families come
   from --f-* (set from src/config.js at runtime). */

.site-top {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: max(14px, env(safe-area-inset-top)) clamp(16px, 3vw, 44px) 0;
  pointer-events: none;
  transition: opacity .7s ease, visibility 0s;
}

.site-top > * { pointer-events: auto; }

/* ---------------------------------------------------------------- the logo
   The lockup (src/core/logo.js: the head on its spring + the word) in a header
   link, shared by the hub, the story, the dock and the run page (their links
   carry .logo-link; filled by src/hub/header.js: brandLogoMarkup). The link holds
   two svgs: the whole lockup, and the mark alone for phones. On pointer or
   keyboard focus the head nods on its spring and the letters hop one after
   another. No motion under prefers-reduced-motion. The page's own rules set
   the link's tilt; the word needs the page to load Dela Gothic One. */
.logo-link {
  --logo-hop: 18px; /* the letters' hop, in svg units (the lockup is 776 wide: ~4px at header size) */
  display: block;
  flex: none;
  width: clamp(136px, 12.6vw, 176px);
  text-decoration: none;
  filter: drop-shadow(0 3px 0 rgb(0 0 0 / .3));
  transition: rotate .3s cubic-bezier(.16, 1, .3, 1);
}

.logo-link:hover,
.logo-link:focus-visible { rotate: -2deg; }
.logo__svg { display: block; width: 100%; height: auto; overflow: visible; }
.logo__svg--mark { display: none; }

@keyframes logo-nod { 0%, 100% { rotate: 0deg; } 20% { rotate: 13deg; } 45% { rotate: -9deg; } 70% { rotate: 5deg; } 88% { rotate: -2deg; } }
@keyframes logo-hop { 0%, 100% { translate: 0 0; } 30% { translate: 0 calc(var(--logo-hop, 7px) * -1); } 60% { translate: 0 calc(var(--logo-hop, 7px) * .3); } }

.logo-link:hover .logo__head,
.logo-link:focus-visible .logo__head { animation: logo-nod .9s ease-out; }

.logo-link:hover .logo__l,
.logo-link:focus-visible .logo__l { animation: logo-hop .5s ease-out calc(var(--i) * 55ms); }

@media (prefers-reduced-motion: reduce) {
  .logo-link { transition: none; }
  .logo-link:hover, .logo-link:focus-visible { rotate: 0deg; }
  .logo-link .logo__head, .logo-link .logo__l { animation: none !important; }
}

.site-nav { display: flex; align-items: center; gap: clamp(4px, .6vw, 8px); }

.site-nav__link {
  padding: .74em .95em .62em;
  border: 1.5px solid rgb(255 255 255 / .3);
  border-radius: 999px;
  background: rgb(0 0 0 / .46);
  font: 400 clamp(9.5px, 1.04vw, 15.6px)/1 var(--f-block, 'Bungee', 'Arial Black', sans-serif);
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: #fff;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, translate .25s cubic-bezier(.16, 1, .3, 1);
}

.site-nav__link:hover,
.site-nav__link:focus-visible { background: #fff; border-color: #fff; color: #050505; translate: 0 -1px; }

.site-nav__link[aria-current='page'] {
  border-color: #050505;
  background: var(--c-accent, #57b947);
  box-shadow: 0 0 0 1.5px rgb(255 255 255 / .85);
  color: #07150a;
}

@media (max-width: 640px) {
  .site-nav__long { display: none; }
  .logo-link { width: clamp(96px, 25vw, 136px); } /* the links need the room */
  .site-nav__link { padding: .8em .8em .68em; font-size: 9.5px; letter-spacing: .04em; }
}

/* The Ticket Booth's link (raffle.html): on roomy screens only, in every header (the hub and the story: .site-nav__link,
   the dock, the run and the booth: .nav__link); phones and narrow tablets keep their four links. */
@media (max-width: 900px) {
  .site-nav__link--raffle,
  .nav__link--raffle { display: none; }
}

/* Narrow phones: the mark alone when the word will not fit beside the links. */
@media (max-width: 379px) {
  .logo-link { width: 44px; }
  .logo__svg--full { display: none; }
  .logo__svg--mark { display: block; }
}

/* ------------------------------------------------------ the sound switch
   A round button at the end of the page links (the hub: index.html #sound,
   src/hub/sound.js). aria-pressed="true" = sound on (waves), "false" = muted
   (a cross). Pages without the button are not affected. */
.site-sound {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.5em;
  height: 2.5em;
  box-sizing: content-box;
  padding: 0;
  border: 1.5px solid rgb(255 255 255 / .3);
  border-radius: 50%;
  background: rgb(0 0 0 / .46);
  font: 400 clamp(9.5px, .8vw, 12px)/1 sans-serif;
  color: #fff;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, translate .25s cubic-bezier(.16, 1, .3, 1);
}

.site-sound:hover,
.site-sound:focus-visible { background: #fff; border-color: #fff; color: #050505; translate: 0 -1px; }
.site-sound__icon { display: block; width: 1.55em; height: 1.55em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.site-sound__horn { fill: currentColor; stroke-width: 1; }
.site-sound__cross { display: none; }
.site-sound[aria-pressed='false'] .site-sound__wave { display: none; }
.site-sound[aria-pressed='false'] .site-sound__cross { display: inline; }
.site-sound[aria-pressed='false']:not(:hover, :focus-visible) { color: rgb(255 255 255 / .62); }

@media (max-width: 640px) {
  .site-sound { font-size: 9.5px; width: 2.56em; height: 2.56em; }
}

/* ------------------------------------------------------- story page only */

/* The story is full-bleed cinema: its header waits for the loader to clear
   (the footer bar slides in at the same moment: root.has-bar, core/ui.js) and
   stays quiet until pointed at. */
.site-top--story { opacity: 0; visibility: hidden; transition: opacity .7s ease, visibility 0s .7s; }
.has-bar .site-top--story { opacity: 1; visibility: visible; transition: opacity .7s ease; }
.site-top--story .site-nav__link:not(:hover, :focus-visible) { background: rgb(0 0 0 / .34); border-color: rgb(255 255 255 / .2); color: rgb(255 255 255 / .82); }
.load-failed .site-top--story { opacity: 1; visibility: visible; }

/* Through the hub's dive (story.html?from=hub) the page starts on black, the
   frame the dive ended on: the loader's brand comes up at once out of it. */
.from-hub .loader__inner { transition-duration: .6s, .9s; }

/* Finale: the way back to the hub, a strip of packing tape under the buttons. */
.ov-cta__back {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .7em;
  margin-top: clamp(18px, 3.4vh, 30px);
  padding: .62em 1.15em .52em 1em;
  border: 2px solid #050505;
  background: var(--c-accent, #57b947);
  font: 400 clamp(12px, 1vw, 15px)/1 var(--f-block, 'Bungee', 'Arial Black', sans-serif);
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  color: #07150a;
  rotate: 1.2deg;
  /* torn zigzag ends, like the loader's seal strip */
  clip-path: polygon(0 0, 100% 0, calc(100% - .32em) 20%, 100% 40%, calc(100% - .32em) 60%, 100% 80%, calc(100% - .32em) 100%,
    0 100%, .32em 80%, 0 60%, .32em 40%, 0 20%);
  pointer-events: auto;
  opacity: 0;
  transition: opacity 1s cubic-bezier(.16, 1, .3, 1) .62s, rotate .35s cubic-bezier(.16, 1, .3, 1), translate .35s cubic-bezier(.16, 1, .3, 1);
}

.ov-cta__back-arrow { font: 700 1.2em/1 var(--f-mono, monospace); translate: 0 -.04em; }
.ov-cta__back-note { font: 700 .72em/1 var(--f-mono, monospace); letter-spacing: .1em; opacity: .72; }
.ov-cta.is-on .ov-cta__back { opacity: 1; }
.ov-cta:not(.is-on) .ov-cta__back { pointer-events: none; }
.ov-cta__back:hover,
.ov-cta__back:focus-visible { rotate: 0deg; translate: 0 -2px; }

@media (max-width: 640px) {
  .ov-cta__back-note { display: none; }
}

@media (max-height: 520px) and (orientation: landscape) {
  .ov-cta__back { margin-top: 12px; }
}

/* Curtain the story draws when it leaves for the hub (src/hub/storyHooks.js). */
.story-curtain {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: #000;
  opacity: 0;
  pointer-events: none;
  transition: opacity .45s ease;
}

.story-curtain.is-on { opacity: 1; pointer-events: auto; }