/* 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 flames' canvas and the embers' layer sit over everything and lighten what is under them,
   so flames passing in front of the mark brighten it instead of covering it. The canvas covers
   only the flames' own box around the mark: fire.js sets its size and position (CSSOM, which
   the CSP allows). */
.fire{
  position:fixed; left:0; top:0; z-index:2; pointer-events:none;
  mix-blend-mode:screen; transform-origin:0 0;
}
/* The embers: fire.js fills this layer with one small sprite per ember and moves each by
   transform and opacity only. The layer, not each sprite, lightens the page. */
.embers{
  position:fixed; inset:0; z-index:2; pointer-events:none; overflow:hidden;
  mix-blend-mode:screen;
}
.embers img{
  position:absolute; left:0; top:0; width:16px; height:16px; opacity:0;
  transform-origin:0 0; will-change:transform,opacity;
}

.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}
/* fire.js moves the glow from this CSS filter into the mark's own SVG filter (index.html). */
[data-glow] .mark{filter:none}
/* 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}
  .embers{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)}
}