@import url("/noodl-tokens.css");

/* Two faces, one family. The later one wins wherever its unicode-range covers
   a character: a Latin subset as WOFF2 (49 KB against the 351 KB TTF), same
   variable outlines, every layout feature kept. Anything outside it falls back
   to the full TTF, which a browser only downloads when a page uses such a
   character. */
@font-face {
  font-family: "Rubik";
  src: url("/fonts/rubik.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  /* Only the glyphs this TTF has and the WOFF2 subset lacks, so a character
     neither has (U+2011 in "one‑time") never downloads it for nothing. */
  unicode-range: U+2C7, U+2D8-2D9, U+2DB, U+2DD, U+400-45F, U+462-463, U+46A-46B, U+472-475, U+490-49D,
    U+4A0-4A5, U+4AA-4AB, U+4AE-4B1, U+4B6-4BB, U+4C0-4C2, U+4CB-4CC, U+4CF-4D9, U+4DC-4DF,
    U+4E2-4E9, U+4EE-4F9, U+51A-51D, U+524-525, U+5B0-5BC, U+5BE, U+5C1-5C2, U+5C7, U+5D0-5EA,
    U+5F2-5F4, U+60C, U+61B, U+61F, U+621-63A, U+640-656, U+660-671, U+67E, U+686, U+698,
    U+6A1, U+6A4, U+6A9, U+6AF, U+6BA, U+6CC, U+6F0-6F9, U+2070, U+2074-2079, U+207D-207E,
    U+2080-2089, U+208D-208E, U+2153-2154, U+215B-215E, U+2202, U+2206, U+220F, U+2211,
    U+221A, U+221E, U+222B, U+2248, U+2260, U+2264-2265, U+25CA, U+FB01-FB02, U+FB2A-FB36,
    U+FB38-FB3C, U+FB3E, U+FB40-FB41, U+FB43-FB44, U+FB46-FB4B, U+FB57-FB59, U+FB7B-FB7D,
    U+FB8B, U+FB8F-FB91, U+FB93-FB95, U+FB9F, U+FBFD-FBFF, U+FC03-FC04, U+FC09-FC0A,
    U+FC0F-FC10, U+FC13-FC14, U+FC31-FC32, U+FC35-FC36, U+FC3D-FC3E, U+FC43-FC44, U+FC4F-FC50,
    U+FC64-FC65, U+FC67-FC6B, U+FC6D-FC71, U+FC74-FC77, U+FC79-FC7B, U+FC83-FC84, U+FC86-FC87,
    U+FC8A-FC8B, U+FC8D-FC8F, U+FC91-FC92, U+FC94-FC96, U+FCFB-FD08, U+FD0D-FD10, U+FD17-FD24,
    U+FD29-FD2C, U+FD3E-FD3F;
}
@font-face {
  font-family: "Rubik";
  src: url("/fonts/rubik.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-024F, U+0259, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0300-036F, U+1E00-1EFF, U+2000-206F, U+20A0-20CF, U+2100-2152, U+2190-2199, U+2212, U+2215, U+25CF, U+2713, U+FEFF, U+FFFD;
}

/* Shared Plain & playful appearance and press motion for the landing and 404 buttons.
   Each page sets its own dimensions and position. */
body.v6 .v6-music.v6-jelly,
:is(.home-button, .noodl-sound-toggle) {
  --button-face: var(--noodl-buttons-cream-face);
  --button-edge: var(--noodl-buttons-cream-edge);
  --button-base: var(--noodl-buttons-cream-base);
  --button-ink: var(--noodl-buttons-cream-ink);
}

body.v6 .v6-jelly {
  --button-face: var(--noodl-buttons-yellow-face);
  --button-edge: var(--noodl-buttons-yellow-edge);
  --button-base: var(--noodl-buttons-yellow-base);
  --button-ink: var(--noodl-buttons-yellow-ink);
}

body.v6 .v6-jelly,
:is(.home-button, .noodl-sound-toggle) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 10px 10px 8px;
  border: 2px solid var(--button-edge);
  border-radius: var(--noodl-button-radius);
  background: var(--button-face);
  color: var(--button-ink);
  font: 600 14px/1.2 "Rubik", "Helvetica Neue", Helvetica, Arial, sans-serif;
  letter-spacing: -.25px;
  text-decoration: none;
  isolation: isolate;
  transform: translateY(0);
  box-shadow: 0 4px 0 var(--button-base), 0 6px 0 var(--button-edge), 0 10px 0 #e8dbc750;
  transition: transform var(--noodl-button-duration-ms) ease-out, box-shadow var(--noodl-button-duration-ms) ease-out;
}

body.v6 .v6-jelly:hover,
:is(.home-button, .noodl-sound-toggle):hover {
  background: var(--button-face);
}

/* Lift the button above its base on hover; the deeper shadow reinforces the
   extra space underneath it. */
@media (hover: hover) and (pointer: fine) {
  body.v6 .v6-jelly:hover,
  :is(.home-button, .noodl-sound-toggle):hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 0 var(--button-base), 0 8px 0 var(--button-edge), 0 12px 0 #e8dbc750;
  }
}

body.v6 .v6-jelly:active,
:is(.home-button, .noodl-sound-toggle):active {
  transform: translateY(var(--noodl-button-press-offset));
  box-shadow: 0 0 0 var(--button-base), 0 1px 0 var(--button-edge), 0 3px 0 #e8dbc750;
}

body.v6 .v6-jelly:focus-visible,
:is(.home-button, .noodl-sound-toggle):focus-visible {
  outline: 3px solid var(--button-ink);
  outline-offset: 10px;
}

/* A small, steady pulse keeps the primary action feeling alive without moving
   the surrounding layout. The separate scale property composes with the
   translateY press and hover states above. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes noodl-cta-pulse {
    0%, 100% { scale: 1; }
    50% { scale: 1.04; }
  }

  body.v6 .v6-cta-pulse {
    animation: noodl-cta-pulse 2.4s ease-in-out infinite;
  }

  @keyframes noodl-sparkle-idle {
    0%, 100% {
      transform: rotate(0deg) scale(1);
      filter: brightness(1);
    }
    24% {
      transform: rotate(86deg) scale(.96);
      filter: brightness(1.02);
    }
    47% {
      transform: rotate(174deg) scale(1.08);
      filter: brightness(1.18) drop-shadow(0 0 2px currentColor);
    }
    53% {
      transform: rotate(190deg) scale(1.12);
      filter: brightness(1.35) drop-shadow(0 0 4px currentColor);
    }
    62% {
      transform: rotate(226deg) scale(1.02);
      filter: brightness(1.05);
    }
  }

  :is(.v6-cta-sparkle, .plain-cta-sparkle) {
    transform-box: fill-box;
    transform-origin: center;
    animation: noodl-sparkle-idle 6.8s linear infinite;
  }

  body.v6 .v6-cta-pulse:is(:hover, :focus-visible) .v6-cta-sparkle,
  .plain-button:is(:hover, :focus-visible) .plain-cta-sparkle {
    animation-play-state: paused;
  }
}

:is(.v6-cta-arrow, .plain-cta-arrow, .v6-cta-sparkle, .plain-cta-sparkle) {
  display: block;
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
}

:is(.v6-cta-sparkle, .plain-cta-sparkle) {
  color: #f6d36b;
  transition: transform 180ms ease-out;
}

body.v6 .v6-nav-cta,
body.v6 .v6-compact-cta {
  gap: 5px;
}

/* Store availability actions use the same raised button construction as the
   primary CTA, with a deep ink face so they stay secondary to Start stretching. */
body.v6 .v6-store-cta {
  --button-face: var(--noodl-buttons-store-face);
  --button-edge: var(--noodl-buttons-store-edge);
  --button-base: var(--noodl-buttons-store-base);
  --button-ink: var(--noodl-buttons-store-ink);
  height: 38px;
  padding: 6px 10px 4px;
  gap: 7px;
  border-radius: var(--noodl-button-radius);
  white-space: nowrap;
}

body.v6 .v6-mobile-cta :is(.v6-cta-arrow, .v6-cta-sparkle) {
  width: 20px;
  height: 20px;
}

@media (prefers-reduced-motion: reduce) {
  body.v6 .v6-jelly,
  body.v6 .v6-jelly:hover,
  body.v6 .v6-jelly:active,
  :is(.home-button, .noodl-sound-toggle),
  :is(.home-button, .noodl-sound-toggle):hover,
  :is(.home-button, .noodl-sound-toggle):active {
    transform: none;
    transition: none;
  }
}

/* Effects are separate from the song; the preference control is optional. */
.noodl-sound-toggle {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(20px, env(safe-area-inset-bottom));
  z-index: 60;
  min-height: 44px;
  cursor: pointer;
}
.noodl-sound-toggle-inline {
  position: static;
  margin-top: 16px;
}
.noodl-sound-toggle[hidden] { display: none; }