/* ==========================================================================
   blusos.lt - coming soon · High-Fidelity Claymorphism
   Plain CSS implementation of the clay design system.
   Structure:
     1  Design tokens          8  Mascot & props
     2  Dark theme stub        9  Accordion
     3  Reset & base          10  Form states
     4  Typography            11  Motion layer (ALL animation lives here,
     5  Clay primitives            gated by html.motion-ok - see index.html
     6  Snap layout                head bootstrap; ?motion=1 / ?motion=0)
     7  Slab decor            12  Media queries
                              13  Utilities
   ========================================================================== */

/* ====== 1 · DESIGN TOKENS ====== */
:root {
  /* 1a · palette primitives - never referenced by components directly */
  --violet-300: #C4B5FD;
  --violet-400: #A78BFA;
  --violet-500: #8B5CF6;
  --violet-600: #7C3AED;
  --violet-700: #6D28D9;
  --violet-900: #4C1D95;
  --pink-300:   #F9A8D4;
  --pink-600:   #DB2777;
  --pink-700:   #BE185D;
  --sky-500:    #0EA5E9;
  --emerald-500:#10B981;
  --amber-500:  #F59E0B;
  --plum-950:   #332F3A;
  --plum-600:   #635F69;
  --lavender-50:  #F4F1FA;
  --lavender-100: #EFEBF5;

  /* 1b · semantic surfaces & ink - dark mode overrides live here */
  --bg-canvas:  var(--lavender-50);
  --bg-raised:  #FCFBFE;
  --bg-input:   var(--lavender-100);
  --ink:        var(--plum-950);
  --ink-muted:  var(--plum-600);
  --ink-on-accent: #fff;
  --accent:        var(--violet-600);
  --accent-strong: var(--violet-700);
  --accent-soft:   rgba(124, 58, 237, .08);
  --focus-ring:    var(--violet-600);
  --error:         var(--pink-700);
  /* gradient biased dark under the label - white on #A78BFA fails AA,
     so the light tone only survives as a top rim sheen */
  --grad-primary: linear-gradient(170deg, #A78BFA -10%, #7C3AED 55%);

  /* 1c · clay light model - the shadow *ingredients* (dark mode swaps these) */
  --clay-shade-soft:   rgba(160, 150, 180, .2);
  --clay-shade:        rgba(205, 198, 217, .55);
  --clay-shade-solid:  #cdc6d9;
  --clay-groove:       #d9d4e3;
  --clay-lite-soft:    rgba(255, 255, 255, .4);
  --clay-lite:         rgba(255, 255, 255, .9);
  --clay-lite-strong:  rgba(255, 255, 255, 1);
  --clay-tint-inset:   rgba(139, 92, 246, .03);
  --clay-accent-glow:  rgba(139, 92, 246, .3);

  /* 1d · composed 4-layer stacks - geometry is theme-independent */
  --shadow-card:
    16px 16px 32px var(--clay-shade-soft),
    -10px -10px 24px var(--clay-lite),
    inset 6px 6px 12px var(--clay-tint-inset),
    inset -6px -6px 12px var(--clay-lite-strong);
  --shadow-card-hover-outer:            /* lives on ::after, crossfaded via opacity */
    22px 22px 44px rgba(160, 150, 180, .3),
    -12px -12px 28px rgba(255, 255, 255, .95);
  --shadow-btn:
    12px 12px 24px var(--clay-accent-glow),
    -8px -8px 16px var(--clay-lite-soft),
    inset 4px 4px 8px rgba(255, 255, 255, .4),
    inset -4px -4px 8px rgba(0, 0, 0, .1);
  --shadow-btn-hover-outer:
    16px 16px 34px rgba(139, 92, 246, .42),
    -10px -10px 20px rgba(255, 255, 255, .5);
  --shadow-pressed:
    inset 10px 10px 20px var(--clay-groove),
    inset -10px -10px 20px #ffffff;
  --shadow-pressed-accent:              /* pressed state on violet surfaces */
    inset 8px 8px 16px rgba(76, 29, 149, .45),
    inset -8px -8px 16px rgba(196, 181, 253, .45);
  --shadow-deep:
    30px 30px 60px var(--clay-shade-solid),
    -30px -30px 60px #ffffff,
    inset 10px 10px 20px rgba(139, 92, 246, .05),
    inset -10px -10px 20px rgba(255, 255, 255, .8);
  --shadow-chip:
    8px 8px 16px var(--clay-shade-soft),
    -6px -6px 12px var(--clay-lite),
    inset 3px 3px 6px rgba(139, 92, 246, .04),
    inset -3px -3px 6px var(--clay-lite-strong);
  --shadow-pip:
    4px 4px 10px rgba(139, 92, 246, .35),
    inset 2px 2px 4px rgba(255, 255, 255, .5),
    inset -2px -2px 4px rgba(0, 0, 0, .12);

  /* 1e · radii - never below --r-min anywhere */
  --r-min:  20px;
  --r-card: 32px;
  --r-hero: 48px;
  --r-full: 999px;

  /* 1f · type */
  --font-heading: "Nunito", ui-rounded, "Segoe UI", system-ui, sans-serif;
  --font-body: "DM Sans", "Segoe UI", system-ui, Arial, sans-serif;
  --fs-display: clamp(3.2rem, 10vw, 6rem);
  --fs-h2:      clamp(2rem, 5vw, 3rem);
  --fs-lede:    clamp(1.05rem, 2.4vw, 1.3rem);
  --fs-body:    1rem;
  --fs-small:   .85rem;
  --fs-input:   1.06rem;   /* ≥16px - iOS refuses to zoom-on-focus */
  --lh-tight:   1.05;
  --lh-body:    1.6;

  /* 1g · space & layout */
  --panel-pad:   clamp(20px, 4vw, 48px);
  --content-max: 680px;
  --tap-min:     44px;

  /* 1h · motion */
  --dur-press:   90ms;
  --dur-ui:      250ms;
  --dur-reveal:  550ms;
  --ease-out:    cubic-bezier(.22, .61, .36, 1);
  --ease-inout:  cubic-bezier(.45, 0, .55, 1);
  --ease-squish: cubic-bezier(.34, 1.56, .64, 1);
}

/* ====== 2 · DARK THEME STUB ======
   Future dark mode overrides ONLY groups 1b + 1c (surfaces, ink, shadow
   ingredients). Neumorphic shadows don't survive naive lightness flips:
   the "white" light source must become a lighter-than-surface tint. */
[data-theme="dark"] {
  /* intentionally empty for v1 */
}

/* ====== 3 · RESET & BASE ====== */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-padding-block: 12px;
}
/* Scrolling model:
   - motion + mouse/trackpad: Lenis owns scrolling; script.js pages sections.
     CSS snap must stay OFF here - it fights JS-driven scrolling.
   - motion + touch: Lenis leaves touch native → proximity snap settles it.
   - no motion / no JS: mandatory snap = one scroll per section, instantly. */
html:not(.motion-ok) { scroll-snap-type: y mandatory; }
@media (pointer: coarse) {
  html.motion-ok { scroll-snap-type: y proximity; }
}

html, body { overflow-x: clip; }  /* decor bleeds off-edge on purpose;
                                     clip ≠ hidden: creates no scroll container,
                                     so root snap keeps working */
body {
  margin: 0;
  background: var(--bg-canvas);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-tap-highlight-color: transparent;
}

img, svg { display: block; max-width: 100%; }

a { color: var(--accent); }

::selection { background: rgba(124, 58, 237, .22); }

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

/* ====== 4 · TYPOGRAPHY ====== */
h1, h2, h3 {
  font-family: var(--font-heading);
  margin: 0;
  text-wrap: balance;
}

.wordmark {
  font-size: var(--fs-display);
  font-weight: 900;
  line-height: var(--lh-tight);
  letter-spacing: -.02em;
  white-space: nowrap;
}

/* the "." of blusos.lt is a clay ball - the real period stays in the
   text (selectable/readable), painted transparent under the ball */
.dot-wrap { position: relative; }
.dot-wrap { color: transparent; }
.dot {
  position: absolute;
  left: 50%;
  bottom: .34em;   /* nudged up to sit visually on the wordmark baseline */
  width: .19em;
  height: .19em;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #D8CCFE 0%, #8B5CF6 55%, #6B2FD0 100%);
  box-shadow:
    .045em .06em .1em rgba(107, 47, 208, .45),
    inset -.02em -.03em .05em rgba(76, 29, 149, .5),
    inset .02em .03em .05em rgba(255, 255, 255, .65);
}

.lede {
  margin: 0;
  font-size: var(--fs-lede);
  font-weight: 500;
  color: var(--ink-muted);
  max-width: 36ch;
  text-wrap: balance;
}

.faq h2 {
  font-size: var(--fs-h2);
  font-weight: 900;
  text-align: center;
  margin-bottom: clamp(20px, 4svh, 36px);
}

/* ====== 5 · CLAY PRIMITIVES ====== */

/* -- chip / badge -- */
.clay-chip {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  margin: 0;
  padding: .62em 1.35em;
  border-radius: var(--r-full);
  background: var(--bg-raised);
  color: var(--accent-strong);
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: .82rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  box-shadow: var(--shadow-chip);
  position: relative;
  isolation: isolate;
  text-decoration: none;
}

/* -- button -- */
.clay-btn {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 62px;
  padding: 0 30px;
  border: 0;
  border-radius: var(--r-min);
  background: var(--grad-primary);
  color: var(--ink-on-accent);
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: .02em;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: var(--shadow-btn);
}
/* hover shadow lives on a pseudo-element and is crossfaded via opacity -
   transitioning box-shadow itself repaints every frame */
.clay-btn::after,
.clay-chip::after,
.faq-item::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  box-shadow: var(--shadow-btn-hover-outer);
  opacity: 0;
}
.clay-chip::after,
.faq-item::after { box-shadow: var(--shadow-card-hover-outer); }

.clay-btn:hover { transform: translateY(-4px); }
.clay-btn:hover::after { opacity: 1; }
.clay-btn:active {
  transform: translateY(1px) scale(.94);       /* the squish */
  box-shadow: var(--shadow-pressed-accent);    /* instant swap - reads tactile */
}
.clay-btn:active::after { opacity: 0; }
.clay-btn:disabled {
  cursor: progress;
  opacity: .75;
  transform: none;
}

/* -- input -- */
.clay-input {
  flex: 1;
  min-width: 0;
  min-height: 62px;
  border: 0;
  border-radius: var(--r-min);
  background: var(--bg-input);
  padding: 0 24px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-input);
  color: var(--ink);
  box-shadow: var(--shadow-pressed);
}
.clay-input::placeholder { color: var(--ink-muted); opacity: .75; }
.clay-input:focus {
  background: var(--bg-raised);      /* recessed clay rises to the surface */
  box-shadow: var(--shadow-card);
}

/* ====== 6 · SNAP LAYOUT ====== */
main { display: block; }

.panel {
  position: relative;
  min-height: 100vh;                 /* fallback */
  min-height: 100svh;                /* stable against mobile URL bar */
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--panel-pad);
}

/* margin-block auto = safe centering: centers when there is room,
   top-aligns (still reachable) when content is taller than the viewport */
.hero-inner,
.faq-inner {
  margin-block: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
}
.hero-inner { max-width: 720px; gap: clamp(14px, 2.6svh, 26px); }
.faq-inner  { max-width: var(--content-max); }

.hero { padding-bottom: calc(var(--panel-pad) + 62px); } /* room for the cue */

.scroll-cue {
  position: absolute;
  bottom: clamp(14px, 3svh, 28px);
  left: 50%;
  transform: translateX(-50%);
  text-transform: none;
  letter-spacing: .02em;
  font-size: .95rem;
  color: var(--ink);
}
.scroll-cue .chev { width: 15px; color: var(--accent); }
.scroll-cue:hover::after { opacity: 1; }

/* ====== 7 · SLAB DECOR ======
   The background is not paint - it is a clay slab the world presses into. */
.slab {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.hero-inner, .faq-inner { position: relative; z-index: 1; }
.scroll-cue { z-index: 2; }

/* debossed landing ripples - squashed ground ellipses at the flea's feet,
   as if it just touched down on soft clay */
.ripple {
  position: absolute;
  left: 50%;
  top: 76%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  box-shadow:
    inset 8px 8px 16px var(--clay-shade),
    inset -8px -8px 16px var(--clay-lite);
}
.ripple::before {
  content: "";
  position: absolute;
  inset: 12px 22px;
  border-radius: 50%;
  background: var(--bg-canvas);
  box-shadow:
    7px 7px 14px rgba(205, 198, 217, .5),
    -7px -7px 14px rgba(255, 255, 255, .92);
}
.ripple-outer { width: min(470px, 94%); aspect-ratio: 2.3 / 1; }
.ripple-inner { width: min(320px, 66%); aspect-ratio: 2.3 / 1; }
.ripple-inner::before { inset: 10px 17px; }

/* fingertip dimples */
.dimple {
  position: absolute;
  border-radius: 50%;
  box-shadow:
    inset 6px 6px 12px var(--clay-shade),
    inset -6px -6px 12px var(--clay-lite);
}
.dimple-a { width: 58px; height: 58px; left: 11%; top: 17%; }
.dimple-b { width: 38px; height: 38px; right: 9%; top: 58%; }
.dimple-c { width: 64px; height: 64px; right: 13%; top: 20%; }
.dimple-d { width: 42px; height: 42px; left: 8%;  bottom: 16%; }

/* sculptural clay coil wrapping the hero's corner - the arc's ends exit
   exactly through the top and right screen edges at any window size */
.coil-wrap {
  position: absolute;
  top: 0;
  right: 0;
  width: clamp(150px, 17vw, 230px);
}
.coil {
  width: 100%;
  /* the page's single filter: static content, transform-only animation
     happens on the wrapper so the blur texture is never invalidated */
  filter: drop-shadow(16px 22px 22px rgba(139, 92, 246, .28));
}

/* ====== 8 · MASCOT & PROPS ====== */
.stage {
  position: relative;
  width: min(560px, 92vw);
  height: clamp(230px, 34svh, 330px);
  pointer-events: none;
}

/* scroll-story layer: JS transforms this wrapper (leap on scroll) so the
   float animation on .mascot-wrap below it never fights for `transform` */
.mascot-scroll {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.mascot-wrap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 9%;
  margin-inline: auto;
  width: clamp(170px, 26svh, 250px);
  z-index: 2;
  pointer-events: auto;   /* squish + eyes need events */
  touch-action: manipulation;
}
.mascot { transform-origin: 50% 100%; }

.contact-shadow {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 7%;
  margin-inline: auto;
  width: 52%;
  height: 9%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(91, 33, 182, .3), rgba(91, 33, 182, 0) 78%);
  z-index: 1;
}

.prop { position: absolute; z-index: 1; }
.prop svg { width: 100%; }
.prop-cup   { left: 1%;   top: 2%;  width: clamp(84px, 17%, 104px); }
.prop-cup   svg { transform: rotate(-9deg); }
.prop-key   { right: 0;   top: 15%; width: clamp(92px, 19%, 116px); }
.prop-key   svg { transform: rotate(13deg); }
.prop-cam   { left: 3%;   top: 56%; width: clamp(90px, 19%, 114px); }
.prop-cam   svg { transform: rotate(-10deg); }
.prop-vinyl { right: 4%;  top: 56%; width: clamp(78px, 17%, 98px); }
.prop-vinyl svg { transform: rotate(12deg); }
.prop-clock { left: 11%;  top: 29%; width: clamp(62px, 13%, 78px); }
.prop-clock svg { transform: rotate(-13deg); }
.prop-tv       { right: 11%; top: 74%; width: clamp(84px, 18%, 104px); }
.prop-tv       svg { transform: rotate(-5deg); }
.prop-painting { left: 15%;  top: 79%; width: clamp(78px, 16%, 98px); }
.prop-painting svg { transform: rotate(5deg); }

/* ====== 9 · ACCORDION ====== */
.accordion {
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 100%;
}

.faq-item {
  position: relative;
  isolation: isolate;
  background: var(--bg-raised);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
}
.faq-item:hover::after { opacity: 1; }
.faq-item.open::after { opacity: 0; }

/* open = pressed INTO the slab */
.faq-item.open {
  background: var(--bg-input);
  box-shadow: var(--shadow-pressed);
}

.faq-q { margin: 0; }
.faq-q button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  min-height: var(--tap-min);
  padding: 20px 22px 20px 26px;
  background: none;
  border: 0;
  border-radius: inherit;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.06rem;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.q-pip {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  position: relative;
  box-shadow: var(--shadow-pip);
}
.q-pip::before,
.q-pip::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  background: #fff;
  border-radius: 2px;
}
.q-pip::before { width: 14px; height: 3px; }
.q-pip::after  { width: 3px;  height: 14px; }
.faq-item.open .q-pip { transform: rotate(45deg); }  /* + becomes × */

/* candy variety per item */
.faq-item:nth-child(1) .q-pip { background: linear-gradient(135deg, #A78BFA, #7C3AED); }
.faq-item:nth-child(2) .q-pip { background: linear-gradient(135deg, #F9A8D4, #DB2777); }
.faq-item:nth-child(3) .q-pip { background: linear-gradient(135deg, #7DD3FC, #0EA5E9); }
.faq-item:nth-child(4) .q-pip { background: linear-gradient(135deg, #6EE7B7, #10B981); }
.faq-item:nth-child(5) .q-pip { background: linear-gradient(135deg, #FCD34D, #F59E0B); }

/* collapse via grid rows - animatable, content stays in flow.
   visibility (delayed under motion) removes closed panels from AT + tab order */
.faq-panel {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
}
.faq-panel > div { overflow: hidden; min-height: 0; }
.faq-panel p {
  margin: 0;
  padding: 0 26px 24px;
  color: var(--ink-muted);
  text-align: left;
}
.faq-item.open .faq-panel {
  grid-template-rows: 1fr;
  visibility: visible;
}
/* no JS → accordion can't work → everything readable */
html:not(.js) .faq-panel {
  grid-template-rows: 1fr;
  visibility: visible;
}

.colophon {
  margin-top: clamp(22px, 4svh, 34px);
  font-size: var(--fs-small);
  color: var(--ink-muted);
}
.colophon p { margin: 0; }

/* FAQ decor: price tag beside the heading, flea hanging from the seam */
.prop-tag {
  position: absolute;
  left: -38px;
  top: -12px;
  width: 98px;
  pointer-events: none;
}
.peeker {
  position: absolute;
  top: 2px;               /* legs grip the top fold; body hangs into view */
  left: 64%;
  width: clamp(120px, 13vw, 168px);
  z-index: 1;
  pointer-events: none;
}
.peeker .flea {
  pointer-events: auto;   /* clickable for the squish */
  transform-origin: 50% 6%;
}

/* the hero's treasures, drifted down into the FAQ side margins */
.faq-props { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.faq-prop { position: absolute; }
.faq-prop svg { display: block; width: 100%; }
.faq-prop-cup   { left: 5%;  top: 21%; width: clamp(72px, 8vw, 100px); }
.faq-prop-vinyl { right: 5%; top: 33%; width: clamp(66px, 7.5vw, 92px); }
.faq-prop-key   { left: 8%;  top: 68%; width: clamp(74px, 8vw, 104px); }
/* only show the gutter treasures where there's comfortable margin room */
@media (max-width: 1040px) { .faq-props { display: none; } }

/* ====== 10 · FORM STATES ====== */
.notify {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: clamp(6px, 1.8svh, 18px);   /* clear air between the stage and
                                             the raised focus state */
  position: relative;
  z-index: 2;
}

.form-title {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.04rem;
  color: var(--ink);
}
.notify-row {
  display: flex;
  gap: 14px;
  width: min(100%, 560px);
}
.notify.done .notify-row { display: none; }

.form-status {
  margin: 0;
  min-height: 1.5em;
  font-size: .95rem;
  font-weight: 500;
  color: var(--ink-muted);
}
.form-status.error { color: var(--error); font-weight: 700; }
.notify.done .form-status {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--accent-strong);
}

/* clay consent checkbox: recessed when off, raised violet tile when on */
.consent {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 46ch;
  text-align: left;
  cursor: pointer;
}
.consent-box {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 26px;
  height: 26px;
  margin: 0;
  border: 0;
  border-radius: 9px;
  background: var(--bg-input);
  box-shadow: inset 3px 3px 6px var(--clay-groove), inset -3px -3px 5px #fff;
  cursor: pointer;
  position: relative;
}
.consent-box:checked {
  background: var(--grad-primary);
  box-shadow: var(--shadow-pip);
}
.consent-box:checked::after {
  content: "";
  position: absolute;
  left: 9px;
  top: 4px;
  width: 6px;
  height: 11px;
  border: solid #fff;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}
.consent-box:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}
.consent-text {
  font-size: .82rem;
  line-height: 1.4;
  color: var(--ink-muted);
}
.notify.done .consent { display: none; }

/* ====== 11 · MOTION LAYER ======
   Every animation, transition and smooth-scroll on the page lives below
   this line, gated by html.motion-ok (set pre-paint by the head bootstrap:
   ?motion=1 forces on, ?motion=0 forces off, else prefers-reduced-motion
   decides). Without the class the page is calm but 100% complete. */

@keyframes clay-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-13px); }
}
@keyframes clay-float-soft {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-9px) rotate(2deg); }
}
@keyframes clay-shadow-sync {
  0%, 100% { transform: scaleX(1); opacity: .95; }
  50%      { transform: scaleX(.88); opacity: .62; }
}
@keyframes clay-breathe {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50%      { transform: scale(1.04) rotate(-2deg); }
}
@keyframes cue-bob {
  0%, 100% { transform: translate(-50%, 0); }
  50%      { transform: translate(-50%, -7px); }
}
@keyframes clay-squish {
  0%   { transform: scale(1, 1); }
  35%  { transform: scale(1.06, .82); }
  70%  { transform: scale(.96, 1.08); }
  100% { transform: scale(1, 1); }
}
@keyframes check-pop {
  0%   { transform: rotate(45deg) scale(0); }
  100% { transform: rotate(45deg) scale(1); }
}

/* no `scroll-behavior: smooth` here on purpose - anchor scrolling is a slow
   eased rAF animation in script.js; two smoothing systems would fight */

.motion-ok .mascot-scroll  { will-change: transform, opacity; transform-origin: 50% 88%; }
.motion-ok .mascot-wrap    { animation: clay-float 7s var(--ease-inout) infinite; will-change: transform; }
.motion-ok .contact-shadow { animation: clay-shadow-sync 7s var(--ease-inout) infinite; }
.motion-ok .prop-cup   { animation: clay-float-soft 9s  var(--ease-inout) -2s   infinite; will-change: transform; }
.motion-ok .prop-key   { animation: clay-float-soft 11s var(--ease-inout) -5s   infinite; will-change: transform; }
.motion-ok .prop-cam   { animation: clay-float-soft 9s  var(--ease-inout) -6.5s infinite; will-change: transform; }
.motion-ok .prop-vinyl { animation: clay-float-soft 10s var(--ease-inout) -3.5s infinite; will-change: transform; }
.motion-ok .prop-clock { animation: clay-float 8s       var(--ease-inout) -1.2s infinite; will-change: transform; }
.motion-ok .prop-tv       { animation: clay-float-soft 12s var(--ease-inout) -8s   infinite; will-change: transform; }
.motion-ok .prop-painting { animation: clay-float 11s      var(--ease-inout) -4.5s infinite; will-change: transform; }
.motion-ok .coil-wrap  { animation: clay-breathe 9s var(--ease-inout) infinite; transform-origin: 100% 0%; }

/* the peeker POPS in from the fold a beat after you land in the FAQ -
   scale-from-the-grip-point with an overshoot ease; leaving is instant
   (no transition on the base rule) so scrolling back up never lags */
.motion-ok .peeker {
  opacity: 0;
  transform: translateY(-14px) scale(.2);
  transform-origin: 50% 8%;
}
.motion-ok .peeker.in {
  opacity: 1;
  transform: none;
  transition: opacity .28s var(--ease-out) .55s, transform .62s var(--ease-squish) .55s;
}

/* FAQ treasures: JS slides each in from its gutter, scrubbed by scroll; svg idle-floats */
.motion-ok .faq-prop { opacity: 0; will-change: transform, opacity; }
.motion-ok .faq-prop-cup   svg { animation: clay-float-soft 11s var(--ease-inout) -2s infinite; will-change: transform; }
.motion-ok .faq-prop-vinyl svg { animation: clay-float-soft 13s var(--ease-inout) -6s infinite; will-change: transform; }
.motion-ok .faq-prop-key   svg { animation: clay-float 9s       var(--ease-inout) -4s infinite; will-change: transform; }
.motion-ok .scroll-cue { animation: cue-bob 2.6s var(--ease-inout) infinite; }
.motion-ok .flea.squish { animation: clay-squish .45s var(--ease-squish); }

.motion-ok .clay-btn,
.motion-ok .clay-chip,
.motion-ok .faq-item { transition: transform var(--dur-ui) var(--ease-out); }
.motion-ok .clay-btn::after,
.motion-ok .clay-chip::after,
.motion-ok .faq-item::after { transition: opacity var(--dur-ui) var(--ease-out); }
.motion-ok .clay-btn:active { transition-duration: var(--dur-press); }
.motion-ok .clay-input { transition: background-color var(--dur-ui) var(--ease-out); }
.motion-ok .q-pip { transition: transform var(--dur-ui) var(--ease-squish); }
.motion-ok .consent-box:checked::after { animation: check-pop .3s var(--ease-squish); }

.motion-ok .faq-panel {
  transition: grid-template-rows .32s var(--ease-out), visibility 0s .32s;
}
.motion-ok .faq-item.open .faq-panel {
  transition: grid-template-rows .32s var(--ease-out), visibility 0s 0s;
}

/* entrance reveals - hidden ONLY when motion is on, so content can never
   be lost if JS/IO fails (plus a JS failsafe re-shows everything) */
.motion-ok .reveal {
  opacity: 0;
  transform: translateY(26px) scale(.99);
}
.motion-ok .reveal.in {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--dur-reveal) var(--ease-out),
    transform var(--dur-reveal) var(--ease-out);
  transition-delay: calc(var(--i, 0) * 70ms);
}

/* ====== 12 · MEDIA QUERIES ====== */

/* short viewports: the hero must squeeze back under one screen */
@media (max-height: 760px) {
  .stage { height: clamp(175px, 26svh, 240px); }
  .hero-inner { gap: clamp(10px, 1.8svh, 18px); }
  .wordmark { font-size: clamp(3rem, 8vw, 4.6rem); }
  .clay-btn, .clay-input { min-height: 56px; }
}

/* phones */
@media (max-width: 640px) {
  .notify-row { flex-direction: column; gap: 12px; }
  .clay-btn { width: 100%; }
  .prop-cam, .prop-clock, .prop-tv, .prop-painting, .prop-tag { display: none; }
  .coil-wrap { width: 118px; }
  .dimple-b, .dimple-d { display: none; }
  .faq-q button { padding: 18px 18px 18px 22px; font-size: 1rem; }
  .faq-panel p { padding: 0 22px 20px; }
  /* tuck a smaller peeker into the top-right corner, beside the heading */
  .peeker { left: auto; right: 4px; width: 78px; top: 0; }
}

/* squat landscape phones: no room for a menagerie */
@media (orientation: landscape) and (max-height: 480px) {
  .prop { display: none; }
  .stage { height: 170px; }
  .mascot-wrap { width: 150px; }
  .hero { padding-bottom: calc(var(--panel-pad) + 48px); }
}

@media (max-width: 380px) {
  .lede { font-size: 1rem; }
  .clay-chip { font-size: .74rem; }
}

/* ====== 13 · UTILITIES ====== */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* honeypot - humans never see it, bots love it */
.hp {
  position: absolute !important;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}