/* trend.fun holding page. Ember tokens straight off apps/web-next/src/styles/theme.css.
   Design: docs/specs/soon-landing-fire.md. */
:root{
  --void:#0B0B0F; --line:#2A2E3A;
  --text:#FFFFFF; --muted-2:#8B92A3; --muted-3:#6F7686;
  --fusion:#FF5A1F; --ignite:#FF8A00; --energy:#FFB930;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mark-h:clamp(150px,34vh,300px);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{
  background:var(--void); color:var(--text); font-family:var(--sans);
  min-height:100dvh; display:flex; flex-direction:column; overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---- the dark around the fire --------------------------------------------------------
   One warm pool centred on the mark, a deeper red one under it, and a vignette that eats the
   corners. Only `opacity` animates (a slow, uneven breath), never the gradient itself. */
.heat{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(34vmax 30vmax at 50% 44%, rgba(255,138,0,.17), transparent 64%),
    radial-gradient(52vmax 40vmax at 50% 62%, rgba(255,90,31,.10), transparent 66%),
    radial-gradient(120vmax 90vmax at 50% 46%, transparent 38%, rgba(0,0,0,.72) 100%);
  animation:breathe 5.3s ease-in-out infinite;
}
@keyframes breathe{
  0%,100%{opacity:.82} 23%{opacity:1} 41%{opacity:.88} 63%{opacity:.97} 81%{opacity:.86}
}

/* The fire canvas sits over everything and lightens what is under it, so flames passing in
   front of the mark brighten it instead of covering it. */
.fire{
  position:fixed; inset:0; width:100%; height:100%; z-index:2; pointer-events:none;
  mix-blend-mode:screen;
}

.stage{
  position:relative; z-index:1; flex:1 0 auto;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:max(56px,8vh) 16px 24px; gap:clamp(22px,3.6vh,36px); text-align:center;
}

/* The mark. Lit and still by default: this IS the reduced-motion and no-script state. */
.mark{
  height:var(--mark-h); width:auto; aspect-ratio:230.3/320.5; display:block; overflow:visible;
  filter:drop-shadow(0 0 22px rgba(255,138,0,.55)) drop-shadow(0 0 70px rgba(255,90,31,.32));
}
.flame{position:relative; display:block}
.halo{
  position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none;
  opacity:.8; transform-origin:50% 92%; will-change:transform,opacity;
  animation:sway 3.7s ease-in-out infinite, flicker 1.9s steps(1,end) infinite;
}
.mark{position:relative}
/* Heat moving under the mark: a slow lean and stretch, never far enough to read as motion of
   the logo itself. */
@keyframes sway{
  0%,100%{transform:scale(1.06,1.08) skewX(0deg)}
  27%{transform:scale(1.09,1.15) skewX(-2.2deg)}
  52%{transform:scale(1.05,1.06) skewX(1.4deg)}
  78%{transform:scale(1.08,1.13) skewX(-0.8deg)}
}
/* An uneven flicker, stepped like a real flame's brightness rather than a smooth pulse. */
@keyframes flicker{
  0%{opacity:.8} 9%{opacity:.68} 17%{opacity:.86} 31%{opacity:.74} 44%{opacity:.9}
  58%{opacity:.7} 71%{opacity:.84} 86%{opacity:.76}
}

.word{
  width:clamp(132px,17vw,212px); height:auto; display:block; color:#EAE2D7;
  opacity:.8; margin-top:clamp(4px,1vh,12px);
  filter:drop-shadow(0 0 14px rgba(255,138,0,.28));
}

.soon{
  margin:0; font-family:var(--mono); font-size:clamp(10.5px,1.1vw,12px);
  letter-spacing:.62em; text-indent:.62em; text-transform:uppercase; color:var(--muted-3);
}

.foot{
  position:relative; z-index:3; padding:20px 16px max(20px,env(safe-area-inset-bottom));
  display:flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted-3); opacity:.7;
}
.foot img{height:16px; width:auto; display:block; opacity:.85}

/* ---- the ignition, only when fire.js runs with motion allowed ------------------------
   fire.js sets `data-fire="on"` on <html>. Before that, nothing here applies, so a visitor
   whose script never runs sees the finished page, never a black one. */
[data-fire="on"] .flame{animation:light 2.4s cubic-bezier(.3,0,.2,1) both}
[data-fire="on"] .word{animation:rise 1.6s ease-out 1.5s both}
[data-fire="on"] .soon{animation:rise 1.8s ease-out 2.5s both}
[data-fire="on"] .foot{animation:fade 1.6s ease-out 3.2s both}
@keyframes light{0%{opacity:0} 30%{opacity:.25} 70%{opacity:.85} 100%{opacity:1}}
@keyframes rise{from{opacity:0; transform:translateY(6px)}to{opacity:.8; transform:none}}
@keyframes fade{from{opacity:0}to{opacity:.7}}
.soon{opacity:.9}

/* Hidden tab: fire.js sets `data-paused` (a separate attribute, so the ignition rules above keep
   matching and do not restart on return); every CSS animation holds where it is. */
[data-paused] *, [data-paused] *::before, [data-paused] *::after{
  animation-play-state:paused !important;
}

/* Reduced motion: a still, lit logo. No breath, no sway or flicker, no ignition, no canvas. */
@media (prefers-reduced-motion:reduce){
  .heat{animation:none; opacity:.95}
  .halo{animation:none; transform:scale(1.06,1.08)}
  .fire{display:none}
  [data-fire] .flame,[data-fire] .word,[data-fire] .soon,[data-fire] .foot{animation:none}
}

@media (max-width:480px){
  :root{--mark-h:clamp(140px,30vh,220px)}
  .stage{padding-top:max(72px,16vh)}
}