/* ==========================================================================
   the goo collection — site navigation
   Loaded AFTER style.css and any page stylesheet, so the nav-clearance rules
   at the bottom win over a page's own top padding.
   ========================================================================== */

:root {
  --nav-h: 84px;
  /* Three characters share the width one lockup used to take, so the lineup
     softens as it shrinks — around 50px they stop being separable. 60px is a
     deliberate step below the 68px it read cleanest at. */
  --nav-lineup-h: 60px;
  /* Overshoot easing — the splotch lands like something soft, not something
     mechanical. Distinct from --ease-smooth, which never overshoots. */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
}

/* The surface is its own layer so it can fade in on scroll without touching
   the opacity of the logo, links or button sitting on top of it. */
.site-nav__surface {
  position: absolute;
  inset: 0;
  background: rgba(255, 254, 251, 0.88);
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  border-bottom: 1px solid rgba(80, 52, 30, 0.08);
  box-shadow:
    0 18px 34px -26px rgba(80, 52, 30, 0.42),
    0 2px 6px -4px rgba(80, 52, 30, 0.14);
  opacity: 0;
  transition: opacity 0.45s var(--ease-smooth);
  pointer-events: none;
}

.site-nav.is-stuck .site-nav__surface {
  opacity: 1;
}

/* Three tracks rather than space-between: the link cluster stays optically
   centred in the viewport even though the brand and the actions either side
   of it are different widths. */
.site-nav__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-2);
  max-width: 1240px;
  min-height: var(--nav-h);
  margin: 0 auto;
  padding: 0 var(--space-4);
}

@media (max-width: 600px) {
  .site-nav__inner {
    padding: 0 var(--space-3);
  }
}

/* The lineup holds its full size right down to here rather than shrinking —
   scaled down it just turns to mush. Below this the brand, the two buttons and
   the padding no longer fit across the bar, so the wordmark takes the row alone
   and the bar can come down with it. */
@media (max-width: 440px) {
  :root {
    --nav-h: 66px;
  }

  .site-nav__lineup {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Brand
   -------------------------------------------------------------------------- */

/* The brand is typeset rather than logo artwork: the three-character lineup on
   the left, then the name in Fredoka matching `.hero__title`'s face, weight and
   tracking. The stacked logo lockup was tried here and cut — at any bar-friendly
   size its three wordmark lines are unreadable. */
.site-nav__brand {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  text-decoration: none;
  /* Anchored to the left edge, not the centre. A centre origin makes the lockup
     drift both ways at once, which is what made the first attempt read as jitter;
     pinning the edge the eye is already tracking turns the same motion into a
     lean. Eased with a slow, symmetric curve rather than --ease-smooth, whose
     front-loaded expo makes even 1% land as a pop. */
  transform-origin: left center;
  transition: transform 0.5s cubic-bezier(0.33, 0, 0.2, 1);
}

/* Deliberately below the threshold of "did that move?" — ~5px of growth across
   the whole lockup. The first pass was translateY(-2px) scale(1.04). */
.site-nav__brand:hover,
.site-nav__brand:focus-visible {
  transform: translateY(-1px) scale(1.015);
}

.site-nav__brand:active {
  transform: translateY(0) scale(1);
  transition-duration: 0.18s;
}

.site-nav__lineup {
  height: var(--nav-lineup-h);
  width: auto;
  filter: drop-shadow(0 4px 12px rgba(80, 52, 30, 0.16));
}

/* Two lines, ranged left against the lineup — the same break the brand's own
   lockups use. Line-height under 1 keeps the pair tight enough to read as one
   mark rather than two stacked words. */
.site-nav__wordmark {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.2rem, 1.9vw, 1.62rem);
  line-height: 0.95;
  letter-spacing: -0.03em;
  text-transform: lowercase;
  text-align: left;
  color: #131313;
}

/* "goo" is set in the wordmark's own colour and stays there. It used to pick up
   the page's group colour on hover — cut, because the word recolouring on the
   way past read as a glitch rather than a greeting. The lockup's whole hover
   state is now the lean above. */
.site-nav__goo {
  color: inherit;
}


/* --------------------------------------------------------------------------
   Links — each page carries one of the three brand colour groups
   -------------------------------------------------------------------------- */

.site-nav__links {
  justify-self: center;
  display: flex;
  align-items: center;
  gap: var(--space-1);
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav__link {
  --goo: var(--green);
  position: relative;
  z-index: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.6em 0.95em;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
  text-transform: lowercase;
  text-decoration: none;
  color: var(--ink);
  white-space: nowrap;
  transition: transform 0.4s var(--ease-spring);
}

/* The signature: a blot of goo that lands behind the label. Irregular radii on
   both axes so no two corners match — it reads as a spill, not a pill. */
.site-nav__link::before {
  content: "";
  position: absolute;
  inset: -1px -3px;
  z-index: -1;
  background: var(--goo);
  border-radius: 62% 38% 47% 53% / 48% 60% 40% 52%;
  opacity: 0;
  transform: scale(0.55);
  transition:
    transform 0.5s var(--ease-spring),
    opacity 0.3s var(--ease-smooth);
}

/* Icons are inline Heroicons (see js/nav.js), so they size off the box rather
   than off a font-size the way the old icon font did. */
.site-nav__icon {
  display: block;
  flex: none;
  width: 1.05em;
  height: 1.05em;
}

.site-nav__link .site-nav__icon {
  opacity: 0.72;
  transition: opacity 0.3s var(--ease-smooth);
}

.site-nav__link:hover,
.site-nav__link:focus-visible {
  transform: translateY(-2px);
}

.site-nav__link:hover::before,
.site-nav__link:focus-visible::before {
  opacity: 1;
  transform: scale(1);
}

.site-nav__link:hover .site-nav__icon,
.site-nav__link:focus-visible .site-nav__icon {
  opacity: 1;
}

.site-nav__link:active {
  transform: translateY(0);
}

/* Current page keeps its goo on — the same device doing double duty as the
   "you are here" marker. */
.site-nav__link[aria-current="page"] {
  font-weight: 600;
}

.site-nav__link[aria-current="page"]::before {
  opacity: 1;
  transform: scale(1);
}

.site-nav__link[aria-current="page"] .site-nav__icon {
  opacity: 1;
}

.site-nav__link--pink { --goo: var(--pink); }
.site-nav__link--green { --goo: var(--green); }
.site-nav__link--yellow { --goo: var(--yellow); }

/* --------------------------------------------------------------------------
   Actions — sound toggle + the one filled call to action
   -------------------------------------------------------------------------- */

.site-nav__actions {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

/* Overrides the standalone fixed-corner treatment from style.css: inside the
   bar the toggle is a quiet sibling of the links, not a floating chip. */
.site-nav .sound-toggle {
  /* `relative` (not `static`) so the ring below can anchor to the button — which
     means style.css's fixed-corner `top`/`right` would otherwise start offsetting
     it inside the bar. Clear them. */
  position: relative;
  top: auto;
  right: auto;
  width: 46px;
  height: 46px;
  font-size: 1rem;
  color: var(--ink);
  background: rgba(80, 52, 30, 0.06);
  box-shadow: none;
  transition:
    transform 0.35s var(--ease-spring),
    background 0.35s var(--ease-smooth);
}

.site-nav .sound-toggle:hover,
.site-nav .sound-toggle:focus-visible {
  transform: scale(1.08);
  background: rgba(80, 52, 30, 0.12);
  box-shadow: none;
}

.site-nav .sound-toggle:active {
  transform: scale(1);
}

/* Pressed → lit. The button holds the yellow group's fill for exactly as long
   as the sound is playing, and the note pops once on each press. A ring thrown
   outward used to mark the press, but a circle radiating out of a round button
   is the shape every volume and notification control uses — the note itself
   carries the feedback instead. */
.site-nav .sound-toggle.is-playing {
  background: var(--yellow);
  box-shadow: 0 8px 22px -10px rgba(255, 206, 87, 0.95);
}

.site-nav .sound-toggle.is-playing .site-nav__icon {
  animation: note-pop 0.7s var(--ease-spring);
}

@keyframes note-pop {
  0% { transform: translateY(0) rotate(0deg); }
  35% { transform: translateY(-3px) rotate(-10deg); }
  70% { transform: translateY(-1px) rotate(6deg); }
  100% { transform: translateY(0) rotate(0deg); }
}

/* The bubble the note throws while it sounds. The chime is the only music the
   site has yet, so the one thing worth saying while it plays is that there is
   more coming — and it says it for exactly as long as the sound lasts, because
   it hangs off `is-playing` rather than off a timer of its own.

   The drop above it is the same one the pill, the pool and the trail are made
   of: the bubble reads as goo that came off the note, not as a tooltip. */
.sound {
  position: relative;
  display: inline-flex;
}

.sound__bubble {
  position: absolute;
  top: calc(100% + 0.7rem);
  left: 50%;
  z-index: 1;
  padding: 0.42em 0.9em;
  border-radius: var(--radius-pill);
  background: var(--yellow);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: -0.01em;
  line-height: 1.2;
  white-space: nowrap;
  box-shadow:
    0 14px 26px -16px rgba(255, 206, 87, 0.95),
    0 3px 8px -4px rgba(80, 52, 30, 0.18);
  opacity: 0;
  transform: translate(-50%, -0.45rem) scale(0.9);
  transform-origin: top center;
  pointer-events: none;
  transition:
    opacity 0.24s var(--ease-smooth),
    transform 0.5s var(--ease-spring);
}

.sound__bubble::before {
  content: "";
  position: absolute;
  bottom: calc(100% + 0.16rem);
  left: 50%;
  width: 0.42rem;
  height: 0.42rem;
  margin-left: -0.21rem;
  border-radius: 50%;
  background: var(--yellow);
}

.sound-toggle.is-playing + .sound__bubble {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}

.site-nav__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.7em 1.25em;
  border-radius: var(--radius-pill);
  background: var(--ink);
  color: var(--cream);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
  text-transform: lowercase;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 10px 24px -14px rgba(80, 52, 30, 0.6);
  transition:
    transform 0.35s var(--ease-spring),
    background 0.35s var(--ease-smooth),
    box-shadow 0.35s var(--ease-smooth);
}

.site-nav .sound-toggle .site-nav__icon,
.site-nav__burger .site-nav__icon {
  width: 20px;
  height: 20px;
}

.site-nav__cta:hover,
.site-nav__cta:focus-visible {
  background: var(--green-accent2);
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -14px rgba(89, 127, 47, 0.6);
}

.site-nav__cta:active {
  transform: translateY(0);
}

.site-nav__cta[aria-current="page"] {
  background: var(--green-accent2);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   Mobile — burger + drop panel
   -------------------------------------------------------------------------- */

.site-nav__burger {
  display: none;
  width: 46px;
  height: 46px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 1.05rem;
  color: var(--ink);
  background: rgba(80, 52, 30, 0.06);
  transition:
    transform 0.35s var(--ease-spring),
    background 0.35s var(--ease-smooth);
}

.site-nav__burger:hover,
.site-nav__burger:focus-visible {
  transform: scale(1.08);
  background: rgba(80, 52, 30, 0.12);
}

.site-nav__burger:active {
  transform: scale(1);
}

.site-nav__panel {
  position: absolute;
  top: 100%;
  left: var(--space-2);
  right: var(--space-2);
  display: none;
  padding: var(--space-2);
  border-radius: var(--radius-md);
  background: var(--cream);
  border: 1px solid rgba(80, 52, 30, 0.08);
  box-shadow:
    0 30px 50px -30px rgba(80, 52, 30, 0.5),
    0 6px 14px -8px rgba(80, 52, 30, 0.16);
  opacity: 0;
  transform: translateY(-10px) scale(0.98);
  transform-origin: top center;
  visibility: hidden;
  transition:
    transform 0.4s var(--ease-spring),
    opacity 0.28s var(--ease-smooth),
    visibility 0s linear 0.28s;
}

.site-nav.is-open .site-nav__panel {
  opacity: 1;
  transform: translateY(0) scale(1);
  visibility: visible;
  transition-delay: 0s;
}

.site-nav__panel-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.site-nav__panel .site-nav__link,
.site-nav__panel .site-nav__cta {
  display: flex;
  width: 100%;
  justify-content: flex-start;
  font-size: 1.05rem;
  padding: 0.75em 1em;
}

.site-nav__panel .site-nav__cta {
  margin-top: var(--space-1);
  justify-content: center;
}

/* On a tap target this wide the spill needs softer, wider radii or it reads as
   a lopsided rectangle rather than a blot. */
.site-nav__panel .site-nav__link::before {
  border-radius: 40% 60% 55% 45% / 62% 38% 62% 38%;
}

@media (max-width: 980px) {
  .site-nav__inner {
    grid-template-columns: auto 1fr;
  }

  .site-nav__links,
  .site-nav__actions .site-nav__cta {
    display: none;
  }

  .site-nav__burger {
    display: inline-flex;
  }

  .site-nav__panel {
    display: block;
  }
}

/* The panel is a real surface, so the bar underneath it always needs one too. */
.site-nav.is-open .site-nav__surface {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .site-nav__panel {
    transition: opacity 0.01ms, visibility 0.01ms;
  }

  /* The bubble still appears — it carries information. It just stops springing
     in, and the note stops hopping. */
  .sound__bubble {
    transform: translate(-50%, 0);
    transition: opacity 0.24s linear;
  }

  .sound-toggle.is-playing + .sound__bubble {
    transform: translate(-50%, 0);
  }

  .site-nav .sound-toggle.is-playing .site-nav__icon {
    animation: none;
  }
}

/* --------------------------------------------------------------------------
   Clearance — pages whose content starts near the top of the viewport
   -------------------------------------------------------------------------- */

.crewpage {
  padding-top: calc(var(--nav-h) + 3vh);
}

@media (max-width: 900px) {
  .crewpage {
    padding-top: calc(var(--nav-h) + 5vh);
  }
}