/* =========================================================
   Coming Soon — page-specific additions
   Built on top of the shared token system in css/style.css.
   Sections stay plain black canvas end-to-end (no divider
   borders between them) so hero → pillars → notify → footer
   read as one continuous surface, lit only by ambient glow.
   ========================================================= */

/* Page-scoped enhancement of the shared .reveal-up scroll reveal
   (defined in style.css): adds a blur-in so content feels like it
   is resolving into focus rather than just sliding/fading. Scoped
   to this stylesheet only, so index.html's reveal is untouched. */
.reveal-up{
  filter:blur(10px);
  transition:opacity .8s var(--ease-out), transform .8s var(--ease-out), filter .8s var(--ease-out);
}
.reveal-up.in-view{ filter:blur(0); }

/* ---------- Hero: full-viewport, vertically centered ---------- */
.hero-standalone{
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding-top:calc(100px + 40px);
  padding-bottom:0;
  isolation:isolate;
}
@media (max-width:767.98px){
  .hero-standalone{ min-height:auto; padding-top:calc(84px + 36px); }
}
.hero-standalone .hero-inner{ width:100%; position:relative; z-index:2; }

/* A single ambient glow instead of dual corner blobs + floating
   token badges + grid overlay — the top-center light-ray beam
   (js/light-rays.js) still carries the hero's main illumination,
   this just adds one soft wash behind the headline so the eye has
   one thing to settle on, not four competing effects. */
.hero-glow-single{
  position:absolute; z-index:-1; pointer-events:none;
  top:8%; left:50%; transform:translateX(-50%);
  width:min(900px, 90vw); height:600px;
  background:var(--grad-hero);
  filter:blur(60px); opacity:.7;
}

/* Fades the bottom of the hero to pure black so it dissolves
   into the (also pure-black) pillars section with no seam. */
.hero-fade-bottom{
  position:absolute; left:0; right:0; bottom:0; height:260px;
  background:linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 92%);
  z-index:1; pointer-events:none;
}

/* One bold, unmistakable "Coming Soon" moment — a continuously
   scrolling ribbon instead of a static pill, so the very first
   thing a visitor's eye catches is in motion and impossible to miss. */
.hero-announce{
  position:relative;
  width:100%;
  max-width:820px;
  margin:0 auto 32px;
  overflow:hidden;
}
/* Edge fade via gradient overlays, not mask-image — iOS Safari has a
   long-standing bug where a mask-image on the parent of a continuously
   CSS-animated element silently freezes that animation (the ribbon
   renders as a static single frame on iPhone instead of scrolling).
   Overlays give the same visual fade without touching the animated
   element's compositing at all. */
.hero-announce::before,
.hero-announce::after{
  content:''; position:absolute; top:0; bottom:0; width:56px; z-index:2; pointer-events:none;
}
.hero-announce::before{ left:0; background:linear-gradient(90deg, var(--canvas) 0%, transparent 100%); }
.hero-announce::after{ right:0; background:linear-gradient(270deg, var(--canvas) 0%, transparent 100%); }
.hero-announce-track{
  display:flex; align-items:center; gap:24px; width:max-content;
  animation:hero-announce-scroll 18s linear infinite;
  will-change:transform;
  transform:translateZ(0);
  -webkit-transform:translateZ(0);
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
.hero-announce-item{
  display:inline-flex; align-items:baseline;
  font-size:clamp(20px, 3vw, 30px);
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  white-space:nowrap;
  color:var(--text-soft);
}
.hero-announce-item.is-accent{
  background:var(--grad-primary-solid);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-announce-star{
  color:var(--teal); font-size:16px; opacity:.7; flex:0 0 auto;
}
@keyframes hero-announce-scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* The two horizontal tickers (this ribbon + the industries strip
   below the hero) are low-amplitude decorative scrolls, not the kind
   of large-scale motion Reduce Motion exists to prevent — and freezing
   an infinite-loop animation mid-frame (style.css's global rule forces
   iteration-count:1) reads as a broken/dead ribbon, not a calmer page.
   Every other animation on the site still fully respects Reduce Motion;
   this is a deliberate, narrow exemption for just these two elements. */
@media (prefers-reduced-motion: reduce){
  .hero-announce-track{
    animation-duration:18s !important;
    animation-iteration-count:infinite !important;
  }
  .hero-ticker .marquee-track{
    animation-duration:26s !important;
    animation-iteration-count:infinite !important;
  }
}

.hero-title{
  text-wrap:balance;
}

/* Words cascade in on load — pure CSS, no IntersectionObserver
   dependency, so the headline is never gated behind scroll/JS timing. */
.htw{
  display:inline-block;
  opacity:0;
  transform:translateY(28px);
  animation:word-in .8s var(--ease-out) forwards;
  animation-delay:calc(var(--i, 0) * .12s + .1s);
}
@keyframes word-in{ to{ opacity:1; transform:translateY(0); } }

.hero-sub{ text-wrap:pretty; }

.btn-icon{ width:18px; height:18px; }

/* Soft breathing glow on the primary launch CTA — restrained,
   never scales the button, respects reduced-motion globally. */
.btn-glow-pulse{ animation:btn-pulse 3.2s ease-in-out infinite; }
@keyframes btn-pulse{
  0%,100%{ box-shadow:0 8px 30px rgba(0,169,154,0.20); }
  50%{ box-shadow:0 10px 42px rgba(0,169,154,0.42); }
}

/* ---------- Secondary hero action — a plain link, not a second
   button, so there is exactly one visual "click me" in the hero. ---------- */
.hero-link-secondary{
  display:inline-flex; align-items:center; gap:6px;
  font-size:15px; font-weight:600; color:var(--text-muted);
  padding:16px 4px;
  transition:color .2s var(--ease-out);
}
.hero-link-secondary:hover{ color:var(--text-primary); }

/* ---------- Countdown ---------- */
.countdown{
  margin-top:var(--space-64);
  display:flex; align-items:stretch; justify-content:center;
  gap:var(--space-10);
  flex-wrap:wrap;
  position:relative; z-index:2;
}
.countdown-item{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  min-width:84px; padding:18px 16px;
  background:var(--surface-glass);
  border:1px solid var(--divider);
  border-radius:var(--radius-card);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
.countdown-value{
  font-size:34px; font-weight:700; color:var(--text-primary);
  font-variant-numeric:tabular-nums; line-height:1;
}
.countdown-value.tick{ animation:countdown-tick .5s var(--ease-out); }
@keyframes countdown-tick{
  0%{ transform:translateY(-8px); opacity:0; }
  100%{ transform:translateY(0); opacity:1; }
}
.countdown-label{
  font-size:12px; font-weight:500; letter-spacing:.06em; text-transform:uppercase;
  color:var(--text-muted);
}
.countdown-sep{
  display:flex; align-items:center; padding-bottom:20px;
  font-size:26px; font-weight:600; color:var(--text-muted); opacity:.4;
}
@media (max-width:600px){
  .countdown{ gap:10px; }
  .countdown-sep{ display:none; }
  .countdown-item{ min-width:68px; padding:14px 10px; }
  .countdown-value{ font-size:24px; }
}

/* Lives inside .countdown itself (not a separate paragraph below
   it) so the reward message reads as part of the same component
   instead of a fourth stacked line of hero copy. */
.countdown-caption{
  width:100%; margin:14px 0 0; text-align:center;
  font-size:13px;
}

/* ---------- Hero ticker — continuous ambient motion, reuses .marquee ---------- */
.hero-ticker{
  position:relative; z-index:2;
  margin-top:56px;
  padding-block:22px;
  border-top:1px solid rgba(255,255,255,.06);
}
.hero-ticker .marquee-track{ font-size:15px; opacity:.8; }
@media (max-width:767.98px){ .hero-ticker{ margin-top:36px; } }

/* ---------- Pillars: plain black canvas, no section divider ---------- */
.pillars{ background:#000; }

/* Cards carry the brand gradient directly instead of a neutral
   glass fill — each pillar fades from its own accent step to
   teal, so the grid reads as a spectrum rather than five clones. */
.pillar-card{
  /* Uniform dark scrim on top of a full accent→teal sweep — keeps
     white text at AA contrast even on the lighter teal accents
     (pillar-accent-4/5) while still reading as a real gradient fill. */
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(rgba(0,0,0,.46), rgba(0,0,0,.46)),
    linear-gradient(155deg, var(--c-accent, var(--blue)) 0%, var(--teal) 100%);
  border-color:rgba(255,255,255,.18);
}
.pillar-card:hover{
  background:
    linear-gradient(rgba(0,0,0,.34), rgba(0,0,0,.34)),
    linear-gradient(155deg, var(--c-accent, var(--blue)) 0%, var(--teal) 100%);
  transform:translateY(-6px);
}
/* Glossy inner highlight along the top edge — cheap way to make a
   saturated card read as "glass over light" instead of a flat fill. */
.pillar-card::before{
  content:''; position:absolute; inset:0; border-radius:inherit;
  background:linear-gradient(180deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 45%);
  pointer-events:none;
}
.pillar-card .pillar-icon{
  background:rgba(0,0,0,.36);
  border:1px solid rgba(255,255,255,.24);
  position:relative; z-index:1;
}
.pillar-card h3{
  font-weight:700;
  letter-spacing:-0.02em;
  text-shadow:0 2px 18px rgba(0,0,0,.4);
  position:relative; z-index:1;
}
.pillar-card p{
  color:rgba(255,255,255,.92);
  font-size:16px; line-height:1.65;
  position:relative; z-index:1;
}
.pillar-card .pillar-tag{
  background:rgba(0,0,0,.42);
  border-color:rgba(255,255,255,.34);
  color:#eafffa;
  font-weight:700;
  position:relative; z-index:1;
}

/* ---------- Notify: full-bleed section, matches the main site's CTA 1:1 ---------- */
.form-microcopy{ margin-top:14px; }

/* The main site hides .cta-visual below 1000px; this page keeps the
   spinning token visible at every width, just scaled down and
   centered above the form on narrow screens (cta-grid is already a
   single column below 1000px, so it stacks naturally). */
.cta-visual{
  display:flex; align-items:center; justify-content:center;
  margin-top:var(--space-32);
}
.cta-visual video{
  width:clamp(160px, 40vw, 280px); height:clamp(160px, 40vw, 280px);
  border-radius:50%; object-fit:cover;
  filter:drop-shadow(0 0 50px rgba(0,169,154,.4));
  animation:float 7s ease-in-out infinite;
}
@media (min-width:1000px){ .cta-visual{ margin-top:0; } }

/* ---------- Footer ---------- */
.footer-subscribe .form-microcopy{ margin-top:10px; }

/* Fix: 1fr grid tracks don't shrink below their item's min-content
   width by default. "Join Waitlist" (longer than the main site's
   "Subscribe") pushed the footer-form past its column on narrow
   phones, overflowing the page horizontally. min-width:0 lets the
   grid item — and the flex input inside it — actually shrink. */
.footer-grid > *{ min-width:0; }
.footer-form{ flex-wrap:wrap; }

/* The cropped giant wordmark had no breathing room below it, so it
   read as content getting cut off by the page ending rather than a
   deliberate decorative peek. */
.footer-wordmark{ margin-bottom:28px; }