/* Coming soon page. Builds on css/styles.css tokens, .stamp, .chip, .ticket-btn, .input.
   Motion rules: transforms/opacity/filter only; parallax uses the `translate` property so it
   composes with keyframe `transform`; every keyframe animates FROM a state to the element's
   natural (final) state, so reduced-motion users simply see the finished page. */

:root {
  --vh: 1vh;                                         /* older iOS Safari: see @supports below */
  --ratio: 1.5470;                                   /* 1728 / 1117, the Figma frame */
  --sw: max(108vw, calc(104 * var(--vh) * var(--ratio))); /* artwork "stage" covers the screen; the overscan also covers --fx and parallax */
  --sh: calc(var(--sw) / var(--ratio));
  --fx: .4751;                                       /* where the characters' centre sits in the artwork, so they centre on screen */
  --st: calc((100 * var(--vh) - var(--sh)) / 2);     /* stage top */
  --lw: min(calc(var(--sw) * .9635), 100vw);         /* lettering width: never wider than the screen */
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-io: cubic-bezier(.76, 0, .24, 1);
  --pad: clamp(16px, 3.2vw, 56px);
  --card-w: clamp(360px, 26.4vw, 456px);
}

/* The real visible height: 100vh on iOS Safari includes the space under the toolbars. */
@supports (height: 1dvh) { :root { --vh: 1dvh; } }

html { height: 100%; overscroll-behavior: none; -webkit-tap-highlight-color: transparent; }
.cs-body { margin: 0; background: #8a7459; overflow: hidden; height: 100%; overscroll-behavior: none; }
.cs { position: relative; height: calc(100 * var(--vh)); overflow: hidden; isolation: isolate; }
.world { position: absolute; inset: 0; }

/* ---------- camera + depth stack ---------- */
.cam { position: absolute; inset: 0; transform-origin: 48% 58%; animation: push 3.2s cubic-bezier(.16, .84, .3, 1) .3s backwards; }
@keyframes push { from { transform: scale(1.16); } }

.sky { position: absolute; inset: 0; background: linear-gradient(#8a7459 0, #9a8265 calc(var(--st) + var(--sh) * .6), #b79b78 calc(var(--st) + var(--sh) * .7), #c6a985 100%); }

.layer { will-change: translate; pointer-events: none; }
.fit { position: absolute; width: var(--sw); height: var(--sh); left: calc(50% - var(--sw) * var(--fx)); top: var(--st); }
.fit img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }

.duo { filter: contrast(1.07) saturate(1.12) drop-shadow(10px 16px 16px rgba(40, 24, 10, .34)) drop-shadow(2px 3px 4px rgba(40, 24, 10, .28)); animation: duo-in 1.3s ease-out 1s backwards; }
@keyframes duo-in { from { opacity: 0; filter: contrast(1.07) saturate(1.12) drop-shadow(0 0 0 rgba(40, 24, 10, 0)) drop-shadow(0 0 0 rgba(40, 24, 10, 0)); } }

/* lettering: wipe in left-to-right, then float */
.l-letters .letters--wide { position: absolute; inset: auto; left: calc(var(--sw) * var(--fx) - var(--lw) / 2); top: calc(var(--sh) * .4231 - var(--lw) / 6); width: var(--lw); height: auto; }
.float { position: absolute; inset: 0; animation: float 7s ease-in-out 3.6s infinite alternate; }
@keyframes float { from { transform: translateY(0) rotate(0); } to { transform: translateY(-9px) rotate(-.35deg); } }
.letters { animation: wipe 1.5s cubic-bezier(.7, 0, .2, 1) 1.2s backwards; clip-path: inset(0 0 0 0); }
@keyframes wipe {
  from { clip-path: inset(0 100% 0 0); transform: scale(1.06) skewX(-4deg); filter: blur(6px); }
  to   { clip-path: inset(0 0 0 0); }
}
.letters--wide { max-width: none; }

.l-letters-m { display: none; position: absolute; left: 0; right: 0; top: max(calc(46px + env(safe-area-inset-top)), calc(var(--st) + var(--sh) * .2668 - var(--lw) * .5)); height: 0; }
.l-letters-m .letters--coming { position: absolute; width: var(--lw); left: calc(50vw - var(--lw) / 2); top: 0; height: auto; }
.l-letters-m .letters--soon { position: absolute; width: calc(var(--lw) * .744); left: calc(50vw - var(--lw) * .372); top: calc(var(--lw) * .33); height: auto; animation-delay: 1.65s; }

/* light: static corner shade, plus a one-off sweep on load */
.light { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: soft-light; overflow: hidden;
  background: radial-gradient(900px circle at 100% 100%, rgba(120, 70, 30, .35), transparent 70%); }
.light::after { content: ""; position: absolute; inset: -20%; background: linear-gradient(105deg, transparent 42%, rgba(255, 244, 210, .8) 50%, transparent 58%); animation: sweep 2.2s ease-in-out 1.3s backwards; translate: 0 0; }
@keyframes sweep { from { transform: translateX(-110%); } to { transform: translateX(110%); } }

.vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 100% at 50% 46%, transparent 52%, rgba(30, 18, 8, .42)); }
.grain { position: absolute; inset: -10%; pointer-events: none; opacity: .13; mix-blend-mode: multiply; animation: grain 1.2s steps(6) infinite;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
@keyframes grain { 0% { translate: 0 0; } 20% { translate: -3% 2%; } 40% { translate: 2% -3%; } 60% { translate: -2% -1%; } 80% { translate: 3% 3%; } 100% { translate: 0 0; } }

/* ---------- top bar: the name, centred, nothing else ---------- */
.top { position: absolute; z-index: 5; top: 0; left: 0; right: 0; display: flex; justify-content: center; padding: calc(clamp(18px, 2.4vw, 34px) + env(safe-area-inset-top)) var(--pad) 0; animation: drop-in .9s var(--ease) 2s backwards; }
@keyframes drop-in { from { opacity: 0; transform: translateY(-16px); } }
.top__name { font-family: var(--font-display); font-weight: 500; font-size: clamp(18px, 1.5vw, 24px); line-height: 1.3; letter-spacing: -.01em; color: var(--ink); }

/* ---------- signup card ---------- */
.dock { position: absolute; z-index: 6; right: max(var(--pad), env(safe-area-inset-right)); bottom: max(24px, 2.9vh, env(safe-area-inset-bottom)); width: var(--card-w); perspective: 900px; }
.tilt { transform-style: preserve-3d; will-change: transform; }
.signup { position: relative; padding: 32px; border-radius: 16px; background: var(--page);
  box-shadow: 0 16px 40px rgba(28, 26, 26, .24), 0 2px 0 rgba(255, 255, 255, .55) inset;
  animation: card-in 1.1s cubic-bezier(.2, .9, .25, 1.06) 1.9s backwards; }
@keyframes card-in { from { opacity: 0; transform: translateY(72px) scale(.96); filter: blur(10px); } }

.signup__stamp { position: absolute; z-index: 2; top: -22px; right: 12px; animation: slap .7s cubic-bezier(.3, 1.4, .5, 1) 2.95s backwards; }
@keyframes slap {
  0%   { opacity: 0; transform: rotate(-6deg) scale(2.6); }
  55%  { opacity: 1; transform: rotate(-6deg) scale(.92); }
  100% { transform: rotate(-6deg) scale(1); }
}
.signup__stamp.is-slap { animation: slap .7s cubic-bezier(.3, 1.4, .5, 1) backwards; }
.signup__stamp span { background: transparent; }

.panels { display: grid; transition: height .6s var(--ease); }
.panel { grid-area: 1 / 1; align-self: start; display: grid; gap: 12px; transition: opacity .45s ease, transform .6s var(--ease), filter .45s ease; }
.signup__eyebrow { color: var(--ink); }
.signup__title { font-size: clamp(30px, 2.55vw, 44px); line-height: 1.1; }
.signup__body { color: var(--ink); }
.signup__fine { color: var(--ink); opacity: .6; font-size: 12px; }
.ln { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.ln > span { display: block; animation: line-up .95s var(--ease) calc(2.05s + var(--i) * .1s) backwards; }
@keyframes line-up { from { transform: translateY(108%); } }
.rise { animation: rise .85s var(--ease) calc(2.05s + var(--i) * .09s) backwards; }
@keyframes rise { from { opacity: 0; transform: translateY(16px); filter: blur(4px); } }

/* form */
.cs .field { gap: 0; }
.cs .input { -webkit-appearance: none; appearance: none; border-color: transparent; padding: 11px 22px; font-size: 17px; line-height: 1.5; transition: border-color .2s, box-shadow .25s, background .2s; }
.cs .input:hover { background: #efe5d2; }
.cs .input:focus { outline: 3px solid var(--croc); outline-offset: 2px; background: #f6efe1; }
.cs .field .err { max-height: 0; overflow: hidden; opacity: 0; transform: translateY(-4px); transition: max-height .3s var(--ease), opacity .3s, transform .3s var(--ease), padding .3s; }
.cs .field.is-error .input { border-color: var(--cherry); }
.cs .field.is-error .input:focus { outline-color: var(--cherry); }
#done-title:focus { outline: none; }
.cs .field.is-error .err { max-height: 4.5em; opacity: 1; transform: none; padding-top: 8px; }
.cs .field.is-shake .input { animation: shake .45s cubic-bezier(.36, .07, .19, .97); }
@keyframes shake { 10%, 90% { transform: translateX(-2px); } 20%, 80% { transform: translateX(4px); } 30%, 50%, 70% { transform: translateX(-6px); } 40%, 60% { transform: translateX(6px); } }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.cs .ticket-btn { -webkit-appearance: none; appearance: none; width: 100%; cursor: pointer; transition: transform .2s var(--ease), filter .2s, box-shadow .2s; }
.cs .ticket-btn:hover { transform: translateY(-2px); filter: brightness(1.07); box-shadow: 0 8px 18px rgba(200, 38, 30, .32); }
.cs .ticket-btn:active { transform: translateY(0) scale(.985); }
.cs .ticket-btn.is-loading { pointer-events: none; animation: breathe 1s ease-in-out infinite; }
@keyframes breathe { 50% { filter: brightness(.88); } }

/* success hand-off */
.panel--done { opacity: 0; transform: translateY(18px); filter: blur(4px); visibility: hidden; }
.signup.is-done .panel--form { opacity: 0; transform: translateY(-14px) scale(.98); filter: blur(4px); pointer-events: none; visibility: hidden; transition: opacity .35s ease, transform .5s var(--ease), filter .35s ease, visibility 0s .5s; }
.signup.is-done .panel--done { opacity: 1; transform: none; filter: none; visibility: visible; transition-delay: .3s; }
.panel--done .chip { justify-self: start; }
.is-jolt .float { animation: jolt .7s var(--ease), float 7s ease-in-out .7s infinite alternate; }
@keyframes jolt { 30% { transform: translateY(-16px) rotate(-1.2deg) scale(1.02); } 60% { transform: translateY(4px) rotate(.6deg); } }

/* confetti */
.confetti { position: fixed; inset: 0; z-index: 20; pointer-events: none; overflow: hidden; }
.confetti i { position: absolute; left: 0; top: 0; width: 9px; height: 14px; border-radius: 2px; will-change: transform, opacity; }

/* intro curtain */
.veil { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: var(--ink); pointer-events: none; clip-path: inset(0); animation: veil 1.05s var(--ease-io) .55s forwards; }
.veil img { width: 112px; height: 112px; border-radius: 50%; background: #ffecd8; padding: 8px; object-fit: contain; animation: veil-mark .9s var(--ease) both; }
@keyframes veil { to { clip-path: inset(0 0 100% 0); visibility: hidden; } }
@keyframes veil-mark { 0% { opacity: 0; transform: scale(.6) rotate(-12deg); } 45% { opacity: 1; transform: scale(1) rotate(0); } 100% { opacity: 0; transform: scale(1.2) translateY(-24px); } }

/* ---------- responsive: the card always stays reachable, the lettering always stays centred ---------- */
@media (max-width: 1280px) {
  :root { --card-w: 360px; }
  .signup__stamp { top: -32px; }
}

/* Very wide: fit the artwork to the height (characters stay whole) and fade its sides into the backdrop. */
@media (min-aspect-ratio: 2/1) {
  :root { --sw: calc(118 * var(--vh) * var(--ratio)); }
  .l-scene .scene { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%); }
}

/* Portrait (phones, tablets): stacked lettering, characters standing on the card. */
@media (max-aspect-ratio: 1/1) {
  :root {
    --card-h: 288px;
    --free: calc(100 * var(--vh) - var(--card-h) - 24px);                  /* height above the card */
    --lw: min(88vw, 660px, calc(var(--free) * .85));                       /* lettering first, characters get what's left */
    --sw: max(108vw, min(175vw, calc((var(--free) - 46px - var(--lw) * .5) * 2.6)));
    --st: calc(100 * var(--vh) - var(--card-h) - var(--sh) * .89);         /* rug ends at the card's top edge */
  }
  .l-letters { display: none; }
  .l-letters-m { display: block; }
  .l-scene .scene { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14%, #000 86%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 14%, #000 86%, transparent 100%); }
  .top { padding-top: calc(16px + env(safe-area-inset-top)); }
  .dock { left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right)); width: auto; max-width: 460px; margin-inline: auto; bottom: max(12px, env(safe-area-inset-bottom)); }
  .signup { padding: 22px; }
  .signup__body { display: none; }
  .signup__title { font-size: 30px; }
  .signup__stamp { top: -20px; right: 10px; }
  .signup__stamp span { padding: 6px 12px; font-size: 13px; }
  .panel { gap: 10px; }
  .veil img { width: 88px; height: 88px; }
}
@media (max-aspect-ratio: 1/1) and (max-width: 360px) {
  .signup__stamp { top: -34px; }
}
@media (max-aspect-ratio: 1/1) and (min-width: 480px) {
  :root { --card-h: 388px; }
  .signup { padding: 32px; }
  .signup__body { display: block; }
  .signup__title { font-size: 40px; }
  .panel { gap: 12px; }
}

/* Short screens (phones on their side, tiny windows): a compact card that always fits. */
@media (max-height: 520px) {
  .signup { padding: 14px 16px; }
  .signup__eyebrow, .signup__body, .signup__fine { display: none; }
  .signup__title { font-size: 22px; line-height: 1.12; }
  .panel { gap: 8px; }
  .cs .input { padding: 7px 18px; }
  .cs .ticket-btn { padding: 9px 20px; }
  .signup__stamp { top: -24px; right: 6px; }
  .signup__stamp span { padding: 3px 9px; font-size: 11px; }
  .top { padding-top: calc(10px + env(safe-area-inset-top)); }
  .top__name { font-size: 15px; }
  .dock { bottom: max(8px, env(safe-area-inset-bottom)); }
}
@media (max-height: 520px) and (min-aspect-ratio: 1/1) {
  .dock { width: clamp(220px, 36vw, 300px); }
}
@media (max-height: 520px) and (max-aspect-ratio: 1/1) {
  :root { --card-h: 170px; }
}
/* Below any sensible height: let the page scroll rather than clip the form. */
@media (max-height: 250px) {
  .cs-body { overflow-y: auto; }
  .cs { height: 250px; }
}

/* Lighter on phones: the moving grain is the costliest layer to repaint on iOS Safari. */
@media (hover: none) { .grain { animation: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .veil { display: none; }
  .grain { animation: none !important; }
}