:root{
  --ink:#04110F;
  --ink-2:#07201C;
  --teal:#19E3C6;
  --aqua:#3FBFB2;
  --deep:#0B4F45;
  --mist:#EAF6F2;
  --haze:#89AFA8;
  --soft:#C7E2DB;
  --line:rgba(234,246,242,.14);
  --pill:rgba(234,246,242,.06);
  --ease:cubic-bezier(.19,1,.22,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--ink);
  color:var(--mist);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow:hidden;
  position:fixed;
  inset:0;
}

/* ---- background layers ---- */
#vortex{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0}
.fallback-bg{
  position:fixed;inset:0;z-index:0;
  background:
    radial-gradient(120% 90% at 18% 12%, rgba(25,227,198,.30), transparent 55%),
    radial-gradient(120% 110% at 82% 30%, rgba(63,191,178,.34), transparent 55%),
    radial-gradient(140% 130% at 55% 118%, rgba(11,79,69,.62), transparent 60%),
    var(--ink);
}
.grain{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(130% 120% at 50% 42%, transparent 40%, rgba(4,17,15,.55) 82%, rgba(4,17,15,.92) 100%);
}
/* left-anchored scrim: guarantees AA contrast under the text column, keeps the right nebula vivid */
.scrim{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg, rgba(4,17,15,.76) 0%, rgba(4,17,15,.48) 32%, rgba(4,17,15,.08) 58%, transparent 74%);
}
.grain::after{
  content:"";position:absolute;inset:-50%;opacity:.05;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- shell ---- */
.shell{
  position:relative;z-index:2;height:100%;
  display:grid;grid-template-rows:auto 1fr auto;
  padding:clamp(20px,4.5vw,44px);
  max-width:1240px;margin:0 auto;
}

.top{
  display:flex;align-items:center;justify-content:space-between;
  opacity:0;transform:translateY(-8px);
  animation:rise .9s .1s var(--ease) forwards;
}
.wordmark{display:flex;align-items:center;gap:11px;font-weight:700;letter-spacing:-.02em;font-size:19px}
.dot{
  width:15px;height:15px;border-radius:50%;
  background:conic-gradient(from 210deg,var(--teal),var(--aqua),var(--deep),var(--teal));
  box-shadow:0 0 22px rgba(25,227,198,.55);
  animation:spin 7s linear infinite;
}
.status{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--haze);
  padding:8px 14px;border:1px solid var(--line);border-radius:999px;background:var(--pill);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.status i{
  width:7px;height:7px;border-radius:50%;background:var(--teal);
  box-shadow:0 0 0 0 rgba(25,227,198,.6);animation:ping 2.4s ease-out infinite;
}

/* ---- hero ---- */
.hero{align-self:center;display:flex;flex-direction:column;gap:clamp(16px,2.3vw,24px)}
.eyebrow{
  font-size:clamp(12px,1.4vw,14px);letter-spacing:.42em;text-transform:uppercase;color:var(--haze);
  opacity:0;transform:translateY(10px);animation:rise .9s .35s var(--ease) forwards;
}
h1{font-size:clamp(52px,12vw,150px);line-height:.9;letter-spacing:-.045em;font-weight:700;max-width:13ch}
h1 .l{display:block;opacity:0;transform:translateY(26px);animation:rise 1.05s var(--ease) forwards}
h1 .l1{animation-delay:.42s}
h1 .l2{animation-delay:.54s;color:var(--teal)}
.lede{
  font-size:clamp(16px,2.05vw,20px);line-height:1.5;color:var(--soft);max-width:32ch;
  opacity:0;transform:translateY(10px);animation:rise 1s .72s var(--ease) forwards;
}

/* ---- the cook timer (counts up, endlessly) ---- */
.timer{
  display:flex;align-items:flex-end;gap:clamp(8px,1.4vw,16px);
  margin-top:4px;
  opacity:0;transform:translateY(10px);animation:rise 1s .84s var(--ease) forwards;
}
.timer .seg{display:flex;flex-direction:column;align-items:center;gap:7px;min-width:clamp(52px,7vw,74px)}
.timer .num{
  font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;
  font-size:clamp(30px,5.2vw,56px);font-weight:700;line-height:1;letter-spacing:-.02em;
  color:var(--mist);
}
.timer .unit{
  font-size:clamp(9px,1vw,11px);letter-spacing:.24em;text-transform:uppercase;color:var(--haze);
}
.timer .colon{
  font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  font-size:clamp(26px,4.4vw,46px);font-weight:400;line-height:1;color:var(--aqua);
  padding-bottom:22px;opacity:.7;
}

.actions{
  display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:8px;
  opacity:0;transform:translateY(10px);animation:rise 1s .98s var(--ease) forwards;
}
.cta{
  display:inline-flex;align-items:center;gap:10px;
  font-size:15px;font-weight:600;text-decoration:none;letter-spacing:-.01em;color:#04110F;
  padding:15px 22px;border-radius:14px;min-height:52px;
  background:linear-gradient(96deg,var(--teal),var(--aqua) 88%);
  box-shadow:0 10px 30px -8px rgba(25,227,198,.42), inset 0 1px 0 rgba(255,255,255,.3);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
  will-change:transform;
}
.cta .arrow{transition:transform .3s var(--ease)}
.cta:hover{transform:translateY(-3px);box-shadow:0 18px 44px -10px rgba(25,227,198,.55), inset 0 1px 0 rgba(255,255,255,.35)}
.cta:hover .arrow{transform:translateX(5px)}
.cta:focus-visible{outline:2px solid var(--teal);outline-offset:3px}

/* ---- footer ---- */
.foot{
  display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;justify-content:space-between;
  font-size:13px;color:var(--haze);
  opacity:0;transform:translateY(8px);animation:rise 1s 1.12s var(--ease) forwards;
}
.foot a{color:var(--haze);text-decoration:none;border-bottom:1px solid transparent;transition:color .3s var(--ease),border-color .3s var(--ease)}
.foot a:hover{color:var(--mist);border-color:var(--line)}
.foot a:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
.foot .sep{opacity:.4}

@keyframes rise{to{opacity:1;transform:none}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(25,227,198,.55)}70%{box-shadow:0 0 0 9px rgba(25,227,198,0)}100%{box-shadow:0 0 0 0 rgba(25,227,198,0)}}

@media (max-width:560px){
  h1{max-width:none}
  .timer{gap:6px}
  .timer .seg{min-width:0;flex:1}
  .cta{width:100%;justify-content:center}
  .foot{justify-content:flex-start}
}

@media (prefers-reduced-motion: reduce){
  #vortex{display:none}
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  .eyebrow,.top,.hero,.lede,.timer,.actions,.foot,h1 .l{opacity:1 !important;transform:none !important}
}