:root{
  --bg:#07070b;
  --panel:rgba(255,255,255,.06);
  --panel2:rgba(255,255,255,.04);
  --text:rgba(255,255,255,.92);
  --muted:rgba(255,255,255,.70);
  --line:rgba(255,255,255,.12);
  --gold:#d7c08a;
  --shadow:0 22px 90px rgba(0,0,0,.55);
  --r:22px;
  --max:1120px;
  --font:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font);
  color:var(--text);
  background:
    radial-gradient(1200px 700px at 20% 10%, rgba(215,192,138,.12), transparent 60%),
    radial-gradient(1000px 700px at 90% 30%, rgba(255,255,255,.06), transparent 55%),
    var(--bg);
  overflow-x:hidden;
}

a{color:inherit;text-decoration:none}
.container{max-width:var(--max);margin:0 auto;padding:0 18px}
.page{min-height:60vh}
.muted{color:var(--muted)}
.small{font-size:.92rem}
.h1{font-size:clamp(2rem,4vw,2.8rem);margin:0;line-height:1.1}
.accent{
  background:linear-gradient(90deg, rgba(215,192,138,1), rgba(255,255,255,.95));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* Header */
.header{
  position:sticky;top:0;z-index:10;
  backdrop-filter: blur(10px);
  background: linear-gradient(to bottom, rgba(7,7,11,.78), rgba(7,7,11,.25));
  border-bottom:1px solid rgba(255,255,255,.06);
}
.header__row{display:flex;align-items:center;justify-content:space-between;padding:18px 0;gap:14px}
.brand{display:flex;gap:10px;align-items:baseline}
.brand__mark{letter-spacing:.16em;font-weight:900}
.brand__sub{color:var(--muted);font-size:.92rem}
.nav{display:flex;gap:8px;align-items:center}
.nav__link{padding:10px 12px;border-radius:14px;color:rgba(255,255,255,.78);transition:.2s}
.nav__link:hover{background:rgba(255,255,255,.05);transform:translateY(-1px);color:rgba(255,255,255,.92)}
.header__actions{display:flex;gap:8px;align-items:center}
.iconbtn{
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
  color:var(--text);
  padding:10px 12px;border-radius:14px;
  cursor:pointer;transition:.2s;
}
.iconbtn:hover{transform:translateY(-1px);background:rgba(255,255,255,.05)}

/* Buttons */
.btn{
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;
  padding:13px 16px;border-radius:16px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
  color:rgba(255,255,255,.92);
  cursor:pointer;transition:.2s;
  overflow:hidden;
}
.btn:hover{transform:translateY(-1px)}
.btn--primary{
  border-color:rgba(215,192,138,.40);
  background:linear-gradient(180deg, rgba(215,192,138,.22), rgba(215,192,138,.10));
  box-shadow:0 20px 60px rgba(215,192,138,.06);
}
.btn--ghost{background:rgba(255,255,255,.02)}
.btn--full{width:100%}

/* Hero */
.hero{padding:40px 0 18px}
.hero__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:22px;align-items:start}
@media (max-width:960px){.hero__grid{grid-template-columns:1fr}}
.pill{
  display:inline-flex;align-items:center;gap:10px;
  padding:10px 14px;border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
  color:rgba(255,255,255,.78);
  width:fit-content;
}
.pill__dot{width:8px;height:8px;border-radius:999px;background:var(--gold);box-shadow:0 0 18px rgba(215,192,138,.55);animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.35);opacity:1}}
.lead{margin-top:14px;color:var(--muted);font-size:1.08rem;line-height:1.7;max-width:62ch}
.actions{margin-top:18px;display:flex;gap:12px;flex-wrap:wrap}

.brand__logo{
  height: 42px;;
  width:auto;
  display:block;
  filter: drop-shadow(0 6px 18px rgba(215,192,138,.25));
}

/* Countdown */
.countdown{
  margin-top:18px;padding:16px;border-radius:var(--r);
  border:1px solid rgba(255,255,255,.10);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  box-shadow:var(--shadow);
}
.countdown__head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:10px}
.countdown__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.tile{
  border-radius:16px;border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.16);
  padding:12px 10px;text-align:center;
}
.tile__num{font-size:1.9rem;font-weight:900}
.tile__label{margin-top:2px;color:var(--muted);font-size:.82rem}
.tile.bump{animation:bump .26s ease-out}
@keyframes bump{0%{transform:scale(1)}60%{transform:scale(1.05)}100%{transform:scale(1)}}
.countdown__bar{margin-top:12px;height:10px;border-radius:999px;border:1px solid rgba(255,255,255,.10);background:rgba(0,0,0,.18);overflow:hidden}
.countdown__barFill{height:100%;width:0%;border-radius:999px;background:linear-gradient(90deg, rgba(215,192,138,.25), rgba(215,192,138,.85));transition:width .6s ease}

/* Sections + product grid */
.section{padding:44px 0}
.section__head{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-bottom:14px}
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
@media (max-width:1020px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.grid{grid-template-columns:1fr}}
.card{
  border-radius:var(--r);
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
  overflow:hidden;
  box-shadow:0 18px 70px rgba(0,0,0,.28);
  transition:transform .2s ease, background .2s ease;
}
.card:hover{transform:translateY(-2px);background:rgba(255,255,255,.04)}
.card__media{position:relative;aspect-ratio: 4/5;background:rgba(255,255,255,.02)}
.img{width:100%;height:100%;object-fit:cover;display:block}
.img--placeholder{width:100%;height:100%}
.chip{
  position:absolute;left:12px;top:12px;
  padding:8px 10px;border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.28);
  font-size:.86rem;
}
.card__body{padding:14px}
.card__title{font-weight:900}
.price{margin-top:8px;display:flex;gap:10px;align-items:baseline}
.price__now{font-weight:900}
.price__was{color:rgba(255,255,255,.55);text-decoration:line-through}

/* Collection layout */
.collection{display:grid;grid-template-columns:280px 1fr;gap:16px}
@media (max-width:960px){.collection{grid-template-columns:1fr}}
.filters__box{
  border-radius:var(--r);
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
  padding:14px;
  margin-bottom:12px;
}
.select{
  width:100%;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.18);
  color:var(--text);
  outline:none;
  margin-top:10px;
}

/* Product page */
.product{display:grid;grid-template-columns:1fr .9fr;gap:18px;align-items:start}
@media (max-width:960px){.product{grid-template-columns:1fr}}
.product__img{border-radius:var(--r);border:1px solid rgba(255,255,255,.10)}
.productForm{margin-top:14px;display:grid;gap:10px}
.qty{width:120px;padding:12px;border-radius:14px;border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.18);color:var(--text)}

/* Drawer */
.drawer{position:fixed;inset:0;display:none;z-index:50}
.drawer.is-open{display:block}
.drawer__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.55)}
.drawer__panel{
  position:absolute;right:0;top:0;height:100%;width:min(420px, 92vw);
  background:rgba(10,10,14,.98);
  border-left:1px solid rgba(255,255,255,.10);
  box-shadow:var(--shadow);
  display:flex;flex-direction:column;
  transform:translateX(100%);
  animation: slideIn .25s ease forwards;
}
@keyframes slideIn{to{transform:translateX(0)}}
.drawer__head{display:flex;justify-content:space-between;align-items:center;padding:16px;border-bottom:1px solid rgba(255,255,255,.10)}
.drawer__body{padding:16px;flex:1;overflow:auto}
.drawer__foot{padding:16px;border-top:1px solid rgba(255,255,255,.10)}
.drawer__title{font-weight:900}

/* Footer */
.footer{padding:32px 0 44px;border-top:1px solid rgba(255,255,255,.10)}
.footer__row{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap}
.footer__links{display:flex;gap:14px;align-items:center}
.footer__links a{color:rgba(255,255,255,.70)}
.footer__links a:hover{text-decoration:underline}

/* Reveal */
.reveal{opacity:0;transform:translateY(14px);filter:blur(6px);transition:.7s;will-change:transform,opacity}
.reveal.is-visible{opacity:1;transform:none;filter:none}

@media (prefers-reduced-motion: reduce){
  *{animation:none !important;transition:none !important}
  .reveal{opacity:1;transform:none;filter:none}
}

/* ================================
   Premium "No Active Drop" block
   (leave as-is — this is your frame)
================================ */
.dropEmpty{grid-column:1 / -1}
.dropEmpty__card{
  padding:0;
  background:
    radial-gradient(900px 420px at 10% 10%, rgba(215,192,138,.16), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.12);
}
.dropEmpty__grid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 16px;
  padding: 18px;
  align-items: stretch;
}
@media (max-width: 960px){
  .dropEmpty__grid{ grid-template-columns: 1fr; }
}
.dropEmpty__left{ padding: 6px 6px 10px 6px; }
.dropEmpty__right{ padding: 6px; display:flex; }
.dropEmpty__pill{
  display:inline-flex;align-items:center;gap:10px;
  padding:10px 14px;border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.22);
  color:rgba(255,255,255,.82);
  letter-spacing:.18em;
  font-weight:900;
  width:fit-content;
}
.dropEmpty__dot{
  width:8px;height:8px;border-radius:999px;
  background:var(--gold);
  box-shadow:0 0 18px rgba(215,192,138,.55);
  animation:pulse 2.4s ease-in-out infinite;
}
.dropEmpty__title{
  margin: 14px 0 0 0;
  font-size: clamp(1.5rem, 2.7vw, 2.1rem);
  line-height: 1.1;
  font-weight: 900;
}
.dropEmpty__lead{
  margin-top: 10px;
  color: var(--muted);
  line-height: 1.7;
  max-width: 70ch;
}
.dropEmpty__meta{
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.16);
}
.dropEmpty__actions{
  margin-top: 14px;
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items:center;
}
.dropEmpty__panel{
  width:100%;
  border-radius: var(--r);
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  padding: 14px;
  box-shadow: 0 18px 70px rgba(0,0,0,.28);
}
.dropEmpty__soon{
  margin-top: 6px;
  padding: 10px 2px;
}

/* ================================
   NEW: 3D model block under timer
   (matches your countdown style)
================================ */
.model3d{
  margin-top: 14px;
  padding: 16px;
  border-radius: var(--r);
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  box-shadow: var(--shadow);
}

.model3d__head{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap: 12px;
  margin-bottom: 10px;
}

.model3d__frame{
  position: relative;
  height: 320px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.16);
  overflow: hidden;
}

@media (max-width: 560px){
  .model3d__frame{ height: 280px; }
}

.model3d__shine{
  position:absolute;
  inset:-40% -20%;
  background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.14) 50%, transparent 65%);
  transform: translateX(-40%) rotate(8deg);
  animation: modelShineSweep 6.2s ease-in-out infinite;
  pointer-events:none;
  mix-blend-mode: screen;
}

@keyframes modelShineSweep{
  0%   { transform: translateX(-55%) rotate(8deg); opacity:.0; }
  18%  { opacity:.55; }
  60%  { opacity:.35; }
  100% { transform: translateX(55%) rotate(8deg); opacity:.0; }
}
/* ================================
   3D model inside the black frame
   under the countdown (right panel)
================================ */
.dropEmpty__model{
  margin-top: 14px;
}

.dropEmpty__modelFrame{
  position: relative;
  height: 220px;              /* fits nicely inside that empty black area */
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.16);
  overflow: hidden;
}

@media (max-width: 560px){
  .dropEmpty__modelFrame{ height: 200px; }
}

.dropEmpty__modelShine{
  position:absolute;
  inset:-40% -20%;
  background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.12) 50%, transparent 65%);
  transform: translateX(-40%) rotate(8deg);
  animation: dropModelShine 6.2s ease-in-out infinite;
  pointer-events:none;
  mix-blend-mode: screen;
}

@keyframes dropModelShine{
  0%   { transform: translateX(-55%) rotate(8deg); opacity:.0; }
  18%  { opacity:.5; }
  60%  { opacity:.28; }
  100% { transform: translateX(55%) rotate(8deg); opacity:.0; }
}
/* ================================
   ✅ Notify Modal (Waitlist GUI)
================================ */
.modal{
  position: fixed;
  inset: 0;
  z-index: 80;
  display: none;
}

.modal.is-open{ display:block; }

.modal__backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.62);
  backdrop-filter: blur(6px);
  animation: modalFade .22s ease both;
}

.modal__panel{
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%,-46%) scale(.98);
  width: min(560px, 92vw);
  border-radius: var(--r);
  border: 1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(800px 340px at 10% 10%, rgba(215,192,138,.16), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  box-shadow: var(--shadow);
  overflow: hidden;
  animation: modalPop .26s ease both;
}

@keyframes modalFade{
  from{ opacity:0; }
  to{ opacity:1; }
}
@keyframes modalPop{
  from{ opacity:0; transform: translate(-50%,-44%) scale(.96); filter: blur(8px); }
  to{ opacity:1; transform: translate(-50%,-46%) scale(1); filter:none; }
}

.modal__head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap: 14px;
  padding: 16px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}

.modal__body{ padding: 16px; }

.modal__foot{
  padding: 14px 16px;
  border-top: 1px solid rgba(255,255,255,.10);
  display:flex;
  justify-content:flex-end;
  gap: 10px;
}

.input{
  width: 100%;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
  color: var(--text);
  outline: none;
  margin-top: 8px;
}

.notifyForm{
  display:block;
}

@media (prefers-reduced-motion: reduce){
  .modal__backdrop,
  .modal__panel{
    animation: none !important;
  }
}

/* ================================
   Cinematic Launch FX (Release page)
   Triggered by: body.is-launching
================================ */
.launchFx{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 60; /* below confetti (9999), above page */
}

.launchFx__warm{
  position:absolute;
  inset:-20%;
  opacity: 0;
  background:
    radial-gradient(1200px 700px at 25% 20%, rgba(215,192,138,.20), transparent 60%),
    radial-gradient(900px 520px at 75% 30%, rgba(255,255,255,.10), transparent 65%);
  filter: blur(6px);
}

.launchFx__veil{
  position:absolute;
  inset:0;
  opacity: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.72), rgba(0,0,0,.18));
  backdrop-filter: blur(6px);
}

.launchFx__bloom{
  position:absolute;
  inset:-35%;
  opacity: 0;
  background: radial-gradient(circle at 50% 35%, rgba(215,192,138,.45), transparent 55%);
  filter: blur(10px);
  transform: scale(.98);
}

.launchFx__shimmer{
  position:absolute;
  inset:-40%;
  opacity: 0;
  background: linear-gradient(110deg,
    transparent 35%,
    rgba(255,255,255,.18) 48%,
    rgba(215,192,138,.18) 52%,
    transparent 65%
  );
  transform: translateX(-65%) rotate(8deg);
  mix-blend-mode: screen;
}

/* Launch moment */
body.is-launching .launchFx__warm{
  animation: warmUp 1.35s ease both;
}
body.is-launching .launchFx__veil{
  animation: veilOpen 1.1s ease both;
}
body.is-launching .launchFx__bloom{
  animation: bloomFlash 1.0s ease both;
}
body.is-launching .launchFx__shimmer{
  animation: shimmerSweep 1.2s ease both;
}

@keyframes warmUp{
  0%{ opacity:0; transform: translateY(8px); }
  30%{ opacity:.85; }
  100%{ opacity:0; transform:none; }
}

@keyframes veilOpen{
  0%{ opacity:0; transform: translateY(0); }
  15%{ opacity:.55; }
  100%{ opacity:0; transform: translateY(-18px); }
}

@keyframes bloomFlash{
  0%{ opacity:0; transform: scale(.98); }
  18%{ opacity:.9; transform: scale(1.02); }
  70%{ opacity:.25; }
  100%{ opacity:0; transform: scale(1.03); }
}

@keyframes shimmerSweep{
  0%{ opacity:0; transform: translateX(-65%) rotate(8deg); }
  18%{ opacity:.75; }
  60%{ opacity:.30; }
  100%{ opacity:0; transform: translateX(65%) rotate(8deg); }
}

@media (prefers-reduced-motion: reduce){
  .launchFx__warm,
  .launchFx__veil,
  .launchFx__bloom,
  .launchFx__shimmer{
    animation: none !important;
  }
}
/* ================================
   Velvet Curtain Launch FX (LONG)
   Trigger: body.is-launching
   Total: ~7–8s choreography
================================ */
.curtain{
  position: fixed;
  inset: 0;
  z-index: 70; /* above page, below confetti (9999) */
  pointer-events: none;
  opacity: 0;
}

body.is-launching .curtain{ opacity: 1; }

.curtain__grain{
  position:absolute;
  inset:0;
  background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 3px 3px;
  opacity: .06;
  mix-blend-mode: overlay;
}

/* velvet panels */
.curtain__panel{
  position:absolute;
  top:0;
  width: 52%;
  height: 100%;
  background:
    radial-gradient(1200px 700px at 30% 20%, rgba(215,192,138,.12), transparent 60%),
    linear-gradient(180deg, rgba(40,18,24,.96), rgba(10,10,14,.98));
  box-shadow: 0 30px 120px rgba(0,0,0,.75);
  transform: translateZ(0);
  overflow:hidden;
}

.curtain__panel--left{ left:0; border-right: 1px solid rgba(255,255,255,.06); }
.curtain__panel--right{ right:0; border-left: 1px solid rgba(255,255,255,.06); }

/* folds */
.curtain__folds{
  position:absolute;
  inset:-10% -20%;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,.06) 0px,
      rgba(255,255,255,.02) 14px,
      rgba(0,0,0,.06) 28px
    );
  opacity: .18;
  filter: blur(0.2px);
  transform: skewX(-6deg);
}

.curtain__edge{
  position:absolute;
  top:0; bottom:0;
  width: 26px;
  opacity:.85;
  background: linear-gradient(180deg, rgba(215,192,138,.18), rgba(215,192,138,.04), rgba(215,192,138,.12));
  filter: blur(8px);
}
.curtain__panel--left .curtain__edge{ right:-10px; }
.curtain__panel--right .curtain__edge{ left:-10px; }

/* bloom */
.curtain__bloom{
  position:absolute;
  inset:-40%;
  opacity: 0;
  background: radial-gradient(circle at 50% 35%, rgba(215,192,138,.52), transparent 55%);
  filter: blur(14px);
  transform: scale(.98);
}

/* center seal */
.curtain__seal{
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%,-50%) scale(1);
  width: 176px;
  height: 176px;
  border-radius: 999px;
  display:grid;
  place-items:center;
  opacity: 0;
}

.seal__ring{
  position:absolute;
  inset:0;
  border-radius:999px;
  border: 1px solid rgba(255,255,255,.22);
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.12), transparent 55%),
    radial-gradient(circle at 70% 70%, rgba(215,192,138,.16), transparent 60%),
    rgba(0,0,0,.30);
  box-shadow: 0 26px 90px rgba(0,0,0,.65);
}

.seal__shine{
  position:absolute;
  inset:-30%;
  border-radius:999px;
  opacity: 0;
  background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.18) 50%, transparent 65%);
  transform: translateX(-55%) rotate(8deg);
  mix-blend-mode: screen;
}

/* split logo halves */
.seal__logo{
  position:absolute;
  width: 90px;
  height: 90px;
  overflow:hidden;
  filter: drop-shadow(0 10px 28px rgba(215,192,138,.16));
}
.seal__logo img{
  width: 90px;
  height: 90px;
  object-fit: contain;
  display:block;
}
.seal__logo--left{
  left: 50%;
  top: 50%;
  transform: translate(-50%,-58%);
  clip-path: inset(0 50% 0 0);
}
.seal__logo--right{
  left: 50%;
  top: 50%;
  transform: translate(-50%,-58%);
  clip-path: inset(0 0 0 50%);
}

.seal__text{
  position:absolute;
  bottom: 34px;
  font-weight: 900;
  letter-spacing: .22em;
  font-size: .78rem;
  color: rgba(255,255,255,.82);
}

/* ================================
   LONG choreography
   0.0s–1.2s  Seal intro + bloom
   1.2s–2.6s  Seal splits (slow)
   2.6s–4.8s  Curtains open wide (slow)
   4.8s–5.4s  Hold (anticipation)
   5.4s–8.0s  Curtains drop DOWN fully
================================ */

/* bloom */
body.is-launching .curtain__bloom{
  animation: curtainBloomLong 1.6s ease both;
}

/* seal appears and gently breathes */
body.is-launching .curtain__seal{
  animation: sealInLong 1.2s ease both, sealOutLong .9s ease both;
  animation-delay: 0s, 2.9s;
}

/* shine sweep across seal */
body.is-launching .seal__shine{
  opacity:1;
  animation: sealShineLong 1.6s ease both;
  animation-delay: .45s;
}

/* seal split (slow) */
body.is-launching .seal__logo--left{
  animation: sealSplitLeftLong 1.4s cubic-bezier(.2,.9,.2,1) both;
  animation-delay: 1.2s;
}
body.is-launching .seal__logo--right{
  animation: sealSplitRightLong 1.4s cubic-bezier(.2,.9,.2,1) both;
  animation-delay: 1.2s;
}

/* curtains open (slow) then drop (slow) */
body.is-launching .curtain__panel--left{
  animation:
    curtainLeftOpenLong 2.2s cubic-bezier(.15,.92,.15,1) both,
    curtainDropLong 2.6s cubic-bezier(.15,.92,.15,1) both;
  animation-delay: 2.6s, 5.4s;
}
body.is-launching .curtain__panel--right{
  animation:
    curtainRightOpenLong 2.2s cubic-bezier(.15,.92,.15,1) both,
    curtainDropLong 2.6s cubic-bezier(.15,.92,.15,1) both;
  animation-delay: 2.6s, 5.4s;
}

@keyframes curtainBloomLong{
  0%{ opacity:0; transform: scale(.98); }
  18%{ opacity:.95; transform: scale(1.02); }
  60%{ opacity:.35; }
  100%{ opacity:0; transform: scale(1.03); }
}

@keyframes sealInLong{
  from{ opacity:0; transform: translate(-50%,-50%) scale(.90); filter: blur(12px); }
  to{ opacity:1; transform: translate(-50%,-50%) scale(1); filter:none; }
}

@keyframes sealOutLong{
  from{ opacity:1; }
  to{ opacity:0; transform: translate(-50%,-54%) scale(.98); filter: blur(12px); }
}

@keyframes sealShineLong{
  0%{ opacity:0; transform: translateX(-60%) rotate(8deg); }
  20%{ opacity:.75; }
  100%{ opacity:0; transform: translateX(60%) rotate(8deg); }
}

@keyframes sealSplitLeftLong{
  0%{ transform: translate(-50%,-58%) translateX(0); }
  100%{ transform: translate(-50%,-58%) translateX(-22px); }
}
@keyframes sealSplitRightLong{
  0%{ transform: translate(-50%,-58%) translateX(0); }
  100%{ transform: translate(-50%,-58%) translateX(22px); }
}

@keyframes curtainLeftOpenLong{
  from{ transform: translateX(0); }
  to{ transform: translateX(-56vw); }
}
@keyframes curtainRightOpenLong{
  from{ transform: translateX(0); }
  to{ transform: translateX(56vw); }
}

/* drop ALL THE WAY down */
@keyframes curtainDropLong{
  0%{ top:0; }
  100%{ top: 120vh; }
}

@media (prefers-reduced-motion: reduce){
  .curtain__panel,
  .curtain__seal,
  .curtain__bloom,
  .seal__shine,
  .seal__logo{
    animation: none !important;
  }
  body.is-launching .curtain{ opacity:0; }
}

/* =========================================================
   ✅ NEW: Minimal BIG timer release page (centered)
   (keeps your cinematic + confetti untouched)
========================================================= */

#confetti{
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
}

/* page wrap */
.releaseWrap{
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 28px 0;
}

/* minimal card */
.releaseCard{
  width: min(1100px, 94vw);
  border-radius: var(--r);
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  box-shadow: var(--shadow);
  padding: clamp(16px, 3vw, 26px);
  position: relative;
  overflow: hidden;
  transform: translateZ(0);
}

.releaseTop{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:12px;
  margin-bottom: 16px;
  opacity: .88;
}
.releaseTop img{
  height: 40px;
  width:auto;
  display:block;
  filter: drop-shadow(0 6px 18px rgba(215,192,138,.25));
}
.releaseMicro{
  font-size: 11px;
  letter-spacing: .28em;
  font-weight: 900;
  color: rgba(255,255,255,.62);
  text-transform: uppercase;
}

/* BIG timer */
.bigTimer{
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap: clamp(10px, 2vw, 18px);
  padding: clamp(16px, 3vw, 26px);
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  box-shadow:
    0 18px 70px rgba(0,0,0,.38),
    0 0 0 1px rgba(255,255,255,.03) inset;
  backdrop-filter: blur(12px);
}

.bigTimer__block{
  display:grid;
  justify-items:center;
  gap: 10px;
  min-width: clamp(68px, 11vw, 150px);
}

.bigTimer__num{
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1;
  font-size: clamp(56px, 10vw, 150px);
  text-shadow: 0 0 30px rgba(255,255,255,.06);
}

.bigTimer__lab{
  font-size: 11px;
  letter-spacing: .22em;
  color: rgba(255,255,255,.55);
  transform: translateY(-2px);
}

.bigTimer__sep{
  font-size: clamp(34px, 6vw, 96px);
  line-height: 1;
  margin: 0 clamp(2px, .5vw, 6px);
  opacity: .55;
  transform: translateY(-10%);
  text-shadow: 0 0 22px rgba(255,255,255,.05);
}

/* tiny tick pulse */
.bigTimer.tick{
  animation: tick .18s ease-out;
}
@keyframes tick{
  from{ transform: scale(1.012); filter: brightness(1.08); }
  to{ transform: scale(1); filter: brightness(1); }
}

/* actions */
.releaseActions{
  margin-top: 16px;
  display:flex;
  justify-content:center;
  gap: 12px;
  flex-wrap: wrap;
  align-items:center;
}
.btn[disabled]{ opacity:.55; cursor:not-allowed; transform:none !important; }

/* fade out card before redirect */
.fadeOut{ animation: fadeOut .55s ease forwards; }
@keyframes fadeOut{ to{ opacity:0; transform: translateY(10px); filter: blur(8px); } }

@media (max-width: 520px){
  .releaseTop{ margin-bottom: 12px; }
  .bigTimer{ border-radius: 18px; }
  .bigTimer__lab{ font-size: 10px; }
}

/* Contact nav as button (so it looks like links) */
.nav__btn{
  border: 0;
  background: transparent;
  font: inherit;
  cursor: pointer;
}

/* textarea uses .input already, but this makes it feel cleaner */
textarea.input{
  line-height: 1.6;
  padding-top: 12px;
}
/* Contact nav as button (so it looks like links) */
.nav__btn{
  border: 0;
  background: transparent;
  font: inherit;
  cursor: pointer;
}

/* textarea uses .input already, but this makes it feel cleaner */
textarea.input{
  line-height: 1.6;
  padding-top: 12px;
}
/* ================================
   Account dropdown (header)
================================ */
.header__actions{ position: relative; }

.accountMenu{
  position:absolute;
  right: 0;
  top: calc(100% + 10px);
  width: min(320px, 92vw);
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(700px 300px at 20% 10%, rgba(215,192,138,.16), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  box-shadow: var(--shadow);
  padding: 12px;
  display:none;
  z-index: 40;
}

.accountMenu.is-open{ display:block; }

.accountMenu__head{
  padding: 10px 10px 12px 10px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}

.accountMenu__actions{
  padding: 12px 10px 10px 10px;
  display:grid;
  gap: 10px;
}