/* Scrub Club landing v3. Cartoonish, bold, Goodles-inspired: flat brand blue, huge
   display type with hard offset shadows, chunky sticker cards, wobble hovers.
   Every animation/transition duration goes through calc(var(--dur-*) * var(--speed))
   so ?fast=1 (JS sets --speed: 0.1) speeds up the whole flow. */

/* ------------------------------------------------------------------ tokens */

:root {
  --blue:      #0e59c3;
  --blue-deep: #0a3f8f;
  --white:     #ffffff;
  --yellow:    #ffd42e;
  --ink:       #111111;
  --pink:      #f4b8cf;
  --beak:      #f0993a;

  --font-display: 'Lazydog', 'Chewy', cursive;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --speed: 1;                 /* JS sets 0.1 when ?fast=1 */

  --dur-pop: 600ms;           /* intro logo squash and stretch */
  --dur-fade: 450ms;          /* intro out / wipe fade / phase crossfades */
  --dur-quick: 150ms;         /* skipped-intro fade */
  --dur-rise: 500ms;          /* gate entrance rise */
  --dur-stagger: 350ms;       /* duck leads, the rest follows */
  --dur-float: 3s;            /* duck bob loop */
  --dur-drift: 5.2s;          /* doodle float loop */
  --dur-shake: 400ms;         /* wrong password input shake */
  --dur-headshake: 500ms;     /* wrong password duck head shake */
  --dur-hop: 350ms;           /* granted happy hop */
  --dur-wipe: 500ms;          /* yellow circle wipe */
  --dur-wobble: 450ms;        /* hover wobble */
  --dur-blink: 120ms;         /* lid close (JS drives the actual blink) */
  --dur-press: 90ms;          /* button press */

}

/* Lazydog is a drop-in: the client supplies assets/fonts/Lazydog.woff2 later.
   Until then this fails quietly and Chewy takes over. */
@font-face {
  font-family: 'Lazydog';
  src: url('../assets/fonts/Lazydog.woff2') format('woff2');
  font-display: swap;
}

/* ------------------------------------------------------------------- base */

*, *::before, *::after { box-sizing: border-box; }

html {
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--blue);
  color: var(--white);
  font-family: var(--font-body);
  overflow-x: clip;
}

[hidden] { display: none !important; }

svg { display: block; }

::selection { background: var(--yellow); color: var(--ink); }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 3px;
}

/* the custom mitt cursor replaces the native one (class added from JS only) */
.mitt-cursor, .mitt-cursor * { cursor: none !important; }

/* --------------------------------------------------------------- big type */

.hero {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(44px, 9vw, 110px);
  line-height: 0.95;
  letter-spacing: 0.01em;
  color: var(--white);
  text-shadow: 5px 6px 0 var(--blue-deep);
  text-align: center;
}

.hero .w { display: inline-block; }
.hero .w:nth-child(odd)  { transform: rotate(-2deg); }
.hero .w:nth-child(even) { transform: rotate(2.2deg) translateY(3px); }


/* ---------------------------------------------------------------- buttons */

.btn {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1;
  color: var(--ink);
  background: var(--yellow);
  border: 3px solid var(--ink);
  border-radius: 18px;
  padding: 15px 26px 13px;
  box-shadow: 6px 7px 0 var(--blue-deep);
  text-decoration: none;
  text-align: center;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform calc(var(--dur-press) * var(--speed)) ease,
    box-shadow calc(var(--dur-press) * var(--speed)) ease;
}

.btn:hover { animation: wobble calc(var(--dur-wobble) * var(--speed)) ease-in-out; }

.btn:active {
  animation: none;
  transform: translate(6px, 7px);
  box-shadow: 0 0 0 var(--blue-deep);
}

/* on a white card the hard shadow is ink, not deep blue */
.btn-on-card {
  font-size: 20px;
  padding: 11px 20px 9px;
  border-radius: 14px;
  box-shadow: 4px 5px 0 var(--ink);
}
.btn-on-card:active { transform: translate(4px, 5px); box-shadow: 0 0 0 var(--ink); }

.btn-cta {
  font-size: clamp(24px, 3vw, 34px);
  padding: 19px 34px 16px;
  border-radius: 22px;
  box-shadow: 7px 8px 0 var(--blue-deep);
}

@keyframes wobble {
  0%, 100% { transform: rotate(0deg) scale(1); }
  25% { transform: rotate(-2.5deg) scale(1.04); }
  60% { transform: rotate(2deg) scale(1.03); }
}

/* ---------------------------------------------------------------- layout */

.page { display: grid; min-height: 100dvh; }

#gate, #splash {
  grid-area: 1 / 1;
  position: relative;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: clamp(12px, 2.2vh, 24px);
  padding: 28px 20px 118px;
}

/* content above the doodles */
#gate > :not(.doodle):not(.footer-logo), #splash > :not(.doodle):not(.duck-silhouette):not(.footer-logo) {
  position: relative;
  z-index: 1;
}

/* -------------------------------------------------------- phases and fades */

#intro {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--blue);
  opacity: 1;
  transition:
    opacity calc(var(--dur-fade) * var(--speed)) ease,
    transform calc(var(--dur-fade) * var(--speed)) ease;
}

body:not([data-phase="intro"]) #intro {
  opacity: 0;
  transform: scale(0.9);
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity calc(var(--dur-fade) * var(--speed)) ease,
    transform calc(var(--dur-fade) * var(--speed)) ease,
    visibility 0s calc(var(--dur-fade) * var(--speed));
}

/* click/tap/key skip: no lingering fade */
#intro.skip, body:not([data-phase="intro"]) #intro.skip {
  transition-duration:
    calc(var(--dur-quick) * var(--speed)),
    calc(var(--dur-quick) * var(--speed)),
    0s;
  transition-delay: 0s, 0s, calc(var(--dur-quick) * var(--speed));
}

#intro-logo {
  width: min(70vw, 560px);
  color: var(--white);
  transform: scale(0);
}
#intro-logo svg { width: 100%; height: auto; }

#intro-logo.pop {
  animation: intro-pop calc(var(--dur-pop) * var(--speed)) cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes intro-pop {
  0%   { transform: scale(0) rotate(-8deg); }
  55%  { transform: scale(1.15, 0.97) rotate(2.5deg); }
  75%  { transform: scale(0.95, 1.06) rotate(-1.5deg); }
  100% { transform: scale(1) rotate(0deg); }
}

#gate {
  opacity: 1;
  visibility: visible;
  transition: opacity calc(var(--dur-fade) * var(--speed)) ease;
}

body[data-phase="intro"] #gate,
body[data-phase="welcome"] #gate {
  opacity: 0;
  visibility: hidden;
  transition:
    opacity calc(var(--dur-fade) * var(--speed)) ease,
    visibility 0s calc(var(--dur-fade) * var(--speed));
}

/* by the time the phase flips to welcome the wipe has covered the screen,
   so the gate vanishes instantly instead of ghosting through the fade */
body[data-phase="welcome"] #gate { transition: none; }

#splash {
  opacity: 0;
  transition: opacity calc(var(--dur-fade) * var(--speed)) ease;
}
body[data-phase="welcome"] #splash { opacity: 1; }


/* --------------------------------------------------------- gate entrance */

/* the duck leads, headline and form follow (animation-fill both keeps them
   hidden until their turn; .gate-in is added once, so denied/granted phase
   changes never replay the entrance) */
body.gate-in #duck {
  animation: rise-in calc(var(--dur-rise) * var(--speed)) cubic-bezier(0.22, 1.2, 0.36, 1) both;
}
body.gate-in #password-panel,
body.gate-in .footer-logo {
  animation: rise-in calc(var(--dur-rise) * var(--speed)) cubic-bezier(0.22, 1.2, 0.36, 1)
             calc(var(--dur-stagger) * 1.3 * var(--speed)) both;
}

@keyframes rise-in {
  from { opacity: 0; transform: translateY(26px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ------------------------------------------------------------------- duck */

#duck svg {
  height: clamp(185px, 30vh, 285px);
  width: auto;
  animation: duck-bob calc(var(--dur-float) * var(--speed)) ease-in-out infinite;
}

@keyframes duck-bob {
  0%, 100% { transform: translateY(4px); }
  50%      { transform: translateY(-6px); }
}

/* lids: geometry, parked transform and origin live inside duck.svg;
   JS drives the blink with inline transforms + transition durations */

body[data-phase="denied"] .duck-anim {
  animation: duck-headshake calc(var(--dur-headshake) * var(--speed)) ease-in-out both;
  transform-origin: 50% 78%;
}

@keyframes duck-headshake {
  0%   { transform: rotate(0deg); }
  14%  { transform: rotate(4deg); }
  30%  { transform: rotate(-4deg); }
  46%  { transform: rotate(4deg); }
  62%  { transform: rotate(-4deg); }
  80%  { transform: rotate(2.5deg); }
  100% { transform: rotate(0deg); }
}

body[data-phase="granted"] .duck-anim,
body[data-phase="welcome"] .duck-anim {
  animation: duck-hop calc(var(--dur-hop) * var(--speed)) cubic-bezier(0.34, 1.3, 0.5, 1) both;
}

@keyframes duck-hop {
  0%   { transform: translateY(0); }
  22%  { transform: translateY(7px) scale(1.03, 0.94); }
  58%  { transform: translateY(-26px) scale(0.98, 1.05); }
  82%  { transform: translateY(3px) scale(1.02, 0.97); }
  100% { transform: translateY(0) scale(1); }
}

/* ------------------------------------------------------------------- form */

#password-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
}

#password-form {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  gap: 14px;
  width: 100%;
}

#password-input {
  font: 600 18px/1.2 var(--font-body);
  color: var(--ink);
  background: var(--white);
  border: 3px solid var(--white);
  border-radius: 18px;
  padding: 15px 20px;
  width: min(340px, 100%);
  box-shadow: 6px 7px 0 var(--blue-deep);
}

#password-input::placeholder { color: #8b8b8b; font-weight: 600; }

#password-input:focus {
  outline: 3px solid var(--yellow);
  outline-offset: 3px;
}

body[data-phase="denied"] #password-input {
  animation: input-shake calc(var(--dur-shake) * var(--speed)) ease-in-out both;
}

@keyframes input-shake {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(-11px) rotate(-1deg); }
  35% { transform: translateX(10px) rotate(1deg); }
  55% { transform: translateX(-8px); }
  75% { transform: translateX(6px); }
  90% { transform: translateX(-3px); }
}

#password-error {
  margin: 4px 0 0;
  min-height: 1.45em;
  font: 800 17px var(--font-body);
  color: var(--yellow);
  transform: rotate(-1deg);
}



/* ---------------------------------------------------------------- doodles */

.doodle {
  position: absolute;
  z-index: 0;
  color: var(--white);
  opacity: 0.85;
  pointer-events: none;
  animation: doodle-drift calc(var(--dur-drift) * var(--speed)) ease-in-out infinite;
}
.doodle svg { width: 100%; height: auto; }

.d-suds     { width: clamp(56px, 7vw, 96px); }
.d-sparkle  { width: clamp(40px, 5vw, 68px); }
.d-small    { width: clamp(26px, 3vw, 42px); }
.d-squiggle { width: clamp(74px, 9vw, 132px); }

@keyframes doodle-drift {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-9px) rotate(3deg); }
}

/* gate corners; nothing behind the form */
.g-d1 { top: 6%;  left: 5%; }
.g-d2 { top: 12%; right: 6%;  animation-delay: calc(-1.3s * var(--speed)); }
.g-d3 { bottom: 11%; left: 4%; animation-delay: calc(-2.4s * var(--speed)); }
.g-d4 { bottom: 18%; right: 7%; animation-delay: calc(-3.4s * var(--speed)); }

/* welcome corners */
.w-d1 { top: 9%;  left: 7%;  animation-delay: calc(-1.8s * var(--speed)); }
.w-d2 { top: 7%;  right: 6%; }
.w-d3 { bottom: 12%; right: 7%; animation-delay: calc(-2.9s * var(--speed)); }

.duck-silhouette {
  position: absolute;
  z-index: 0;
  left: 6%;
  bottom: 10%;
  width: clamp(64px, 8vw, 104px);
  color: var(--white);
  opacity: 0.9;
  transform: rotate(-8deg);
  pointer-events: none;
  animation: doodle-drift calc(var(--dur-drift) * var(--speed)) ease-in-out infinite;
  animation-delay: calc(-0.9s * var(--speed));
}
.duck-silhouette svg { width: 100%; height: auto; }

/* ---------------------------------------------------------------- welcome */

.splash-title { max-width: 11ch; }

.promo-card {
  position: relative;
  margin-top: clamp(10px, 3vh, 30px);
  background: var(--white);
  color: var(--ink);
  border: 3px solid var(--ink);
  border-radius: 22px;
  padding: 22px 34px 24px;
  box-shadow: 8px 9px 0 var(--blue-deep);
  transform: rotate(-1.2deg);
  width: min(430px, 100%);
}

.promo-label {
  margin: 0 0 4px;
  font: 600 15px var(--font-body);
  color: #454545;
}

#promo-code {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-size: clamp(36px, 6vw, 54px);
  line-height: 1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink);
}

/* the MEMBERS ONLY burst sticker, slapped on the card corner */
.burst {
  position: absolute;
  top: -66px;
  right: -58px;
  width: clamp(124px, 16vw, 168px);
  display: grid;
  place-items: center;
  color: var(--yellow);
  transform: rotate(-6deg);
  pointer-events: none;
  filter: drop-shadow(5px 6px 0 var(--blue-deep));
}
.burst-art { grid-area: 1 / 1; width: 100%; }
.burst-art svg { width: 100%; height: auto; }
.burst-text {
  grid-area: 1 / 1;
  font-family: var(--font-display);
  font-size: clamp(15px, 1.9vw, 20px);
  line-height: 1.02;
  color: var(--ink);
  text-align: center;
  transform: rotate(4deg);
}


/* ------------------------------------------------------------------- wipe */

#wipe {
  position: fixed;
  left: 50%;
  top: 50%;
  width: 164vmax;
  height: 164vmax;
  border-radius: 50%;
  background: var(--yellow);
  transform: translate(-50%, -50%) scale(0);
  z-index: 40;
  pointer-events: none;
  visibility: hidden;
}

#wipe.expand {
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
  transition: transform calc(var(--dur-wipe) * var(--speed)) cubic-bezier(0.5, 0, 0.75, 0.4);
}

#wipe.fade {
  visibility: visible;
  opacity: 0;
  transition: opacity calc(var(--dur-fade) * var(--speed)) ease;
}

/* ----------------------------------------------------------------- ticker */





/* ----------------------------------------------------------------- cursor */

#cursor {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 999;
  pointer-events: none;
  opacity: 0;
}
#cursor.on { opacity: 1; }
.cursor-rot { transform-origin: 0 0; will-change: transform; }
.cursor-art svg { display: block; }

/* ------------------------------------------------------------- responsive */

@media (max-width: 560px) {
  .footer-logo { width: 92px; }
  #password-form { flex-direction: column; align-items: center; }
  #password-input, #password-submit { width: min(340px, 100%); }
  .g-d4 { display: none; }
  .burst { top: -70px; right: -12px; }
  .promo-card { width: min(430px, calc(100% - 10px)); }
  .hero { text-shadow: 4px 4px 0 var(--blue-deep); }
}

@media (max-height: 720px) {
  #gate, #splash { gap: 10px; }
  #duck svg { height: clamp(150px, 26vh, 235px); }
}

/* --------------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
  #intro-logo { transform: none; }
  #intro-logo.pop { animation: plain-fade calc(var(--dur-pop) * var(--speed)) ease both; }
  body:not([data-phase="intro"]) #intro { transform: none; }

  body.gate-in #duck,
  body.gate-in #password-panel,
  body.gate-in .footer-logo {
    animation-name: plain-fade;
  }

  #duck svg,
  .doodle,
  .duck-silhouette { animation: none; }

  .btn:hover { animation: none; }

  body[data-phase="denied"] .duck-anim,
  body[data-phase="granted"] .duck-anim,
  body[data-phase="welcome"] .duck-anim,
  body[data-phase="denied"] #password-input { animation: none; }

  #wipe { display: none; }
}

@keyframes plain-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ------------------------------------------------------------ footer logo */
.footer-logo {
  position: absolute;
  left: 0;
  right: 0;
  bottom: max(22px, env(safe-area-inset-bottom, 0px));
  margin: 0 auto;
  width: clamp(88px, 9vw, 116px);
  color: var(--white);
  opacity: 0.95;
  pointer-events: none;
  z-index: 1;
}
.footer-logo svg { display: block; width: 100%; height: auto; }