/* ============================================================
   THE FUSION — the homepage's own weather (f10, 2026-08-10).
   Front-page only (enqueued after terminal.css; the cascade
   below relies on being the last sheet).

   · wow concept → the ground: teal-tinted paper with a 145°
     sweep, fine drafting grid, pointer-following light; and the
     desk note as a glass jewel (tilt, corner bloom, live dot,
     swash, link-fill hovers, ruled stat dividers).
   · f02 Aurora Grande → the sky: counter-drifting mesh, halo +
     grain, melt mask, the 1px prismatic hairline on the header's
     top edge.
   · f06 Depth Field → the casino suits: two ghost-glyph planes +
     hairline ring behind the hero, parallax on fine pointers.

   The companion engines live in fusion.js (ground light, suit
   stage, desk-note tilt) — all gated on (hover:hover) and
   (pointer:fine) and prefers-reduced-motion, all inert DOM.
   With JS off the page keeps the tinted paper, the sky and the
   glass.

   Discipline: transform/opacity animation only, every literal
   colour has a dark twin, reduced-motion neutralises everything,
   fixed layers add no scrollable overflow, blur budget = header
   16px + desk note 14px (+ the tool lab's trays in home.css).

   The four f10 refinements are integrated at their sources:
   nav underline sweep → chrome.css · Top-categories row fill +
   split story tiles + the tool-lab band → home.css · verify-row
   slide hover + the tmIn fill fix → terminal.css.
   ============================================================ */

/* [0] Retire the stock ambient — the fusion ships its own weather.
   (Whatever mode the Customizer picked still runs on inner pages;
   this sheet only loads on the front page.) */
#fx{display:none!important}

/* ------------------------------------------------------------
   [1] THE GROUND — wow's paper. One token turn tints the whole
   page (everything derived from --bg follows); the sweep, grid
   and pointer light live on a JS-injected fixed layer
   (.f9-light-layer) so no-JS still gets the tinted paper and
   the full f02 sky.
   ------------------------------------------------------------ */
:root{
  --bg:#f4f8f8;
  --f9-paper:#f4f8f8;
  --f9-paper-deep:#eaf2f3;
  --f9-grid:rgba(33,88,103,.028);
  /* near-white blue so the wash BRIGHTENS the paper — a darker
     rgba(106,173,255,.13) wash dragged --text-dim in the lit
     core to 4.2:1, under the AA floor */
  --f9-light:rgba(210,232,255,.15);
  --f9-bloom:radial-gradient(circle at 68% 18%,
      rgba(69,214,186,.17), rgba(74,145,255,.10) 38%, transparent 69%);
  --f9-glass:color-mix(in srgb,var(--surface) 60%,transparent);
  --f9-sheen:linear-gradient(118deg, rgba(255,255,255,.5), rgba(255,255,255,0) 46%);
  --f9-topline:rgba(255,255,255,.72);
  --f9-pulse:rgba(21,160,106,.32);
  --f9-swash:linear-gradient(90deg, rgba(36,104,242,0),
      rgba(36,104,242,.22), rgba(69,214,186,.16), transparent);
}
html[data-theme="dark"]{
  --bg:#071116;
  --f9-paper:#071116;
  --f9-paper-deep:#0b171c;
  --f9-grid:rgba(190,226,234,.03);
  --f9-light:rgba(74,137,255,.10);
  --f9-bloom:radial-gradient(circle at 68% 18%,
      rgba(69,214,186,.11), rgba(74,145,255,.07) 38%, transparent 69%);
  --f9-glass:color-mix(in srgb,var(--surface) 55%,transparent);
  --f9-sheen:linear-gradient(118deg, rgba(255,255,255,.055), rgba(255,255,255,0) 46%);
  --f9-topline:rgba(255,255,255,.08);
  --f9-pulse:rgba(52,211,153,.30);
  --f9-swash:linear-gradient(90deg, rgba(96,165,250,0),
      rgba(96,165,250,.30), rgba(45,212,191,.22), transparent);
}

/* the injected ground layer: the sweep on the element, the pointer
   light as a transform-translated child (compositor-only — moving
   the radial via CSS vars would re-rasterise the whole viewport at
   pointer speed), drafting grid on ::before with its own fade mask */
.f9-light-layer{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  overflow:hidden;
  background:
    linear-gradient(145deg, var(--f9-paper) 0%, var(--f9-paper-deep) 52%, var(--f9-paper) 100%);
}
.f9-glow{
  position:absolute;left:-900px;top:-580px;width:1800px;height:1160px;
  background:radial-gradient(closest-side, var(--f9-light), transparent 66%);
  transform:translate3d(50vw,12vh,0);
}
.f9-motion .f9-glow{will-change:transform}
.f9-light-layer::before{
  content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(var(--f9-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--f9-grid) 1px, transparent 1px);
  background-size:42px 42px;
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.4) 58%,transparent 92%);
          mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.4) 58%,transparent 92%);
}

/* ------------------------------------------------------------
   [2] THE SKY — f02 verbatim (with its shipped compositor
   fixes). Two counter-drifting mesh sheets + halo/grain, one
   melt mask; the glass header sits in the brightest band and
   glows for free.
   ------------------------------------------------------------ */
:root{
  --f02-melt:linear-gradient(to bottom,
    #000 0,#000 190px,rgba(0,0,0,.72) 320px,rgba(0,0,0,.26) 460px,transparent 600px);
  --f02-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='.09'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  --f02-mesh-a:
    radial-gradient(720px 480px at 12% -70px, rgba(37,99,235,.30), transparent 70%),
    radial-gradient(640px 430px at 78% -60px, rgba(139,92,246,.24), transparent 72%),
    radial-gradient(820px 520px at 44% 90px,  rgba(59,130,246,.17), transparent 72%),
    linear-gradient(180deg, rgba(37,99,235,.085), transparent 460px);
  --f02-mesh-b:
    radial-gradient(660px 440px at 94% 40px,  rgba(20,184,166,.14), transparent 70%),
    radial-gradient(560px 400px at 28% -30px, rgba(139,92,246,.13), transparent 72%),
    radial-gradient(820px 470px at 64% 40px,  rgba(37,99,235,.11),  transparent 74%);
  --f02-halo:
    var(--f02-grain),
    radial-gradient(520px 260px at 50% 228px, rgba(59,130,246,.10), transparent 72%),
    radial-gradient(700px 330px at 50% 236px, rgba(255,255,255,.55), rgba(255,255,255,0) 70%);
  --f02-prism:linear-gradient(90deg,
    rgba(37,99,235,.55) 0, rgba(139,92,246,.50) 25%, rgba(20,184,166,.44) 50%,
    rgba(59,130,246,.55) 75%, rgba(37,99,235,.55) 100%);
  --f02-seam:linear-gradient(90deg,
    transparent 0, rgba(59,130,246,.40) 22%, rgba(139,92,246,.36) 50%,
    rgba(20,184,166,.30) 78%, transparent 100%);
}
html[data-theme="dark"]{
  --f02-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='.13'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  --f02-mesh-a:
    radial-gradient(720px 480px at 12% -70px, rgba(59,130,246,.30),  transparent 70%),
    radial-gradient(640px 430px at 78% -60px, rgba(167,139,250,.24), transparent 72%),
    radial-gradient(820px 520px at 44% 90px,  rgba(96,165,250,.17),  transparent 72%),
    linear-gradient(180deg, rgba(59,130,246,.10), transparent 460px);
  --f02-mesh-b:
    radial-gradient(660px 440px at 94% 40px,  rgba(45,212,191,.15),  transparent 70%),
    radial-gradient(560px 400px at 28% -30px, rgba(167,139,250,.14), transparent 72%),
    radial-gradient(820px 470px at 64% 40px,  rgba(59,130,246,.12),  transparent 74%);
  --f02-halo:
    var(--f02-grain),
    radial-gradient(520px 260px at 50% 228px, rgba(147,197,253,.08), transparent 72%),
    radial-gradient(700px 330px at 50% 236px, rgba(96,165,250,.16), rgba(96,165,250,0) 70%);
  --f02-prism:linear-gradient(90deg,
    rgba(96,165,250,.62) 0, rgba(167,139,250,.55) 25%, rgba(45,212,191,.48) 50%,
    rgba(59,130,246,.62) 75%, rgba(96,165,250,.62) 100%);
  --f02-seam:linear-gradient(90deg,
    transparent 0, rgba(96,165,250,.50) 22%, rgba(167,139,250,.44) 50%,
    rgba(45,212,191,.36) 78%, transparent 100%);
}

html::before,body::before,body::after{
  content:"";
  position:fixed;inset:0;z-index:0;
  pointer-events:none;
  background-repeat:no-repeat;
  -webkit-mask-image:var(--f02-melt);mask-image:var(--f02-melt);
}
html::before{
  background-image:var(--f02-mesh-a);
  transform-origin:50% 0;
  will-change:transform;
  animation:f9-drift-a 46s ease-in-out infinite alternate;
}
body::before{
  background-image:var(--f02-mesh-b);
  transform-origin:50% 0;
  will-change:transform;
  animation:f9-drift-b 58s ease-in-out infinite alternate;
}
@keyframes f9-drift-a{
  from{transform:translate3d(-2.2%,-1%,0) scale(1.02)}
  to{transform:translate3d(2.4%,1.5%,0) scale(1.10)}
}
@keyframes f9-drift-b{
  from{transform:translate3d(2.2%,.8%,0) scale(1.08)}
  to{transform:translate3d(-2.4%,-1.1%,0) scale(1.01)}
}
body::after{
  background-image:var(--f02-halo);
  background-repeat:repeat,no-repeat,no-repeat;
  background-size:220px 220px,auto,auto;
}

/* the prismatic hairline — the header's jewelled top edge. One tile
   wider than the viewport, sliding one 600px period on the
   compositor; fixed boxes add no scrollable overflow. */
html::after{
  content:"";
  position:fixed;top:0;left:0;width:calc(100% + 600px);height:1px;z-index:240;
  pointer-events:none;
  background-image:var(--f02-prism);
  background-size:600px 1px;background-repeat:repeat-x;
  will-change:transform;
  animation:f9-prism 18s linear infinite;
}
@keyframes f9-prism{to{transform:translateX(-600px)}}

/* hero chapter closes with the same voice over the market band */
.pmnews::before{
  content:"";
  position:absolute;top:0;left:0;right:0;height:1px;
  pointer-events:none;
  background:var(--f02-seam);
}

/* ------------------------------------------------------------
   [3] THE SUITS — f06's ghost glyphs behind the hero. Far +
   near planes and a hairline ring (f02's halo already lights
   the mid plane). Injected by fusion.js, clipped, inert;
   parallax on fine pointers only.
   ------------------------------------------------------------ */
.newsroom>.wrap{position:relative;z-index:1}
.df-stage{
  position:absolute;inset:0;z-index:0;
  overflow:hidden;overflow:clip;
  pointer-events:none;
  contain:layout style paint;
  opacity:0;transition:opacity .9s ease .12s;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 76%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 0%,#000 76%,transparent 100%);
}
.df-stage.df-on{opacity:1}
.df-layer{position:absolute;inset:0}
.df-motion .df-layer{will-change:transform}
.df-g{
  position:absolute;aspect-ratio:1;background:var(--text);
  -webkit-mask-image:var(--m);mask-image:var(--m);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain;
}
.df-red{background:var(--accent)}
.df-spade{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.6C8.7 6.9 3.8 9.8 3.8 13.9c0 2.6 2 4.7 4.6 4.7 1.1 0 2.1-.4 2.9-1-.3 1.8-1.1 3.2-2.5 4.2v.6h6.4v-.6c-1.4-1-2.2-2.4-2.5-4.2.8.6 1.8 1 2.9 1 2.6 0 4.6-2.1 4.6-4.7 0-4.1-4.9-7-8.2-12.3Z'/%3E%3C/svg%3E")}
.df-heart{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21.4C6.2 16.6 2.6 13 2.6 8.9 2.6 6 4.9 3.8 7.7 3.8c1.8 0 3.4 1 4.3 2.6.9-1.6 2.5-2.6 4.3-2.6 2.8 0 5.1 2.2 5.1 5.1 0 4.1-3.6 7.7-9.4 12.5Z'/%3E%3C/svg%3E")}
.df-diamond{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.2 19.8 12 12 22.8 4.2 12Z'/%3E%3C/svg%3E")}
.df-club{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.8c-2.4 0-4.3 1.9-4.3 4.3 0 .9.3 1.7.7 2.4-.5-.2-1-.3-1.6-.3-2.4 0-4.3 1.9-4.3 4.3s1.9 4.3 4.3 4.3c1.5 0 2.9-.8 3.6-2-.2 2.1-1 3.8-2.5 4.9v.6h8.2v-.6c-1.5-1.1-2.3-2.8-2.5-4.9.7 1.2 2.1 2 3.6 2 2.4 0 4.3-1.9 4.3-4.3s-1.9-4.3-4.3-4.3c-.6 0-1.1.1-1.6.3.4-.7.7-1.5.7-2.4 0-2.4-1.9-4.3-4.3-4.3Z'/%3E%3C/svg%3E")}
.df-far .df-g{opacity:.042}
.df-far .df-red{opacity:.052}
.g-spade-xl{width:clamp(280px,42vw,600px);top:-160px;right:-120px;transform:rotate(13deg)}
.g-diamond-xl{width:clamp(240px,36vw,500px);bottom:-130px;left:-110px;transform:rotate(-11deg)}
.df-near .df-g{opacity:.058}
.df-near .df-red{opacity:.068}
.g-club-md{width:clamp(150px,17vw,240px);top:-26px;left:5%;transform:rotate(-8deg)}
.g-heart-md{width:clamp(130px,15vw,200px);bottom:8%;right:-70px;transform:rotate(10deg)}
[data-theme="dark"] .df-far .df-g{opacity:.06}
[data-theme="dark"] .df-far .df-red{opacity:.07}
[data-theme="dark"] .df-near .df-g{opacity:.075}
[data-theme="dark"] .df-near .df-red{opacity:.085}
.newsroom{--f9-ring:.045}
[data-theme="dark"] .newsroom{--f9-ring:.07}
.df-ring{position:absolute;left:49%;top:4%;width:clamp(420px,52vw,760px);aspect-ratio:1;
  transform:translateX(-50%);border-radius:50%;
  border:1.5px solid var(--text);opacity:var(--f9-ring)}

/* ------------------------------------------------------------
   [4] THE JEWEL — wow's manifesto treatment on the real desk
   note. Glass over the halo, corner bloom, pointer tilt,
   pulsing live dot, blurred swash under the italic, link-fill
   hovers, ruled stat dividers. The accent spine stays exactly
   where it was.
   ------------------------------------------------------------ */

/* Backdrop-root defusal (the f08 lesson): base.css fades .nr-center
   in through opacity + will-change:opacity, which would make the
   column a backdrop root — the glass would blur transparency and
   pop flat when the fade completed. Transform-only entrance:
   the blur reads the sky from the first frame. */
.nr-center.reveal{will-change:transform}
html.anim-ready .nr-center.reveal{opacity:1;transform:translateY(18px)}
html.anim-ready .nr-center.reveal.in{transform:none}

.dnote{
  position:relative;isolation:isolate;overflow:hidden;
  background:var(--f9-sheen), var(--f9-glass);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
          backdrop-filter:blur(14px) saturate(160%);
  border-color:color-mix(in srgb,var(--border-strong) 55%,transparent);
  border-left-color:var(--accent);
  box-shadow:
    inset 0 1px 0 var(--f9-topline),
    0 1px 2px rgba(16,17,22,.04),
    0 24px 60px -24px color-mix(in srgb,var(--accent) 30%,transparent),
    0 10px 30px rgba(16,17,22,.06);
  transform:perspective(1200px) rotateX(var(--f9-rx,0deg)) rotateY(var(--f9-ry,0deg));
  transition:transform .45s cubic-bezier(.2,.75,.25,1),box-shadow .35s ease;
}
[data-theme="dark"] .dnote{
  box-shadow:
    inset 0 1px 0 var(--f9-topline),
    0 1px 2px rgba(0,0,0,.5),
    0 28px 70px -26px rgba(0,0,0,.6),
    0 0 44px -18px color-mix(in srgb,var(--accent) 35%,transparent);
}
.dnote:hover{
  box-shadow:
    inset 0 1px 0 var(--f9-topline),
    0 2px 6px rgba(16,17,22,.05),
    0 32px 80px -24px color-mix(in srgb,var(--accent) 38%,transparent),
    0 14px 38px rgba(16,17,22,.08);
}
/* (0,3,0): beats the light hover in dark regardless of order — the
   jewel's elevation deepens on lift instead of vanishing on #071116 */
[data-theme="dark"] .dnote:hover{
  box-shadow:
    inset 0 1px 0 var(--f9-topline),
    0 2px 6px rgba(0,0,0,.55),
    0 32px 84px -26px rgba(0,0,0,.65),
    0 0 54px -16px color-mix(in srgb,var(--accent) 42%,transparent);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .dnote,[data-theme="dark"] .dnote{background:var(--surface)}
}

/* the mint-to-blue bloom breaking over the top-right corner */
.dnote::before{
  content:"";position:absolute;z-index:-1;
  top:-42%;right:-24%;width:74%;aspect-ratio:1;border-radius:50%;
  background:var(--f9-bloom);
  pointer-events:none;
}

/* live dot on the kick — the stats below really are live counts */
.dnote-kick::after{
  content:"";flex:none;width:6px;height:6px;border-radius:50%;
  background:var(--up);margin-left:2px;
  box-shadow:0 0 0 0 var(--f9-pulse);
  animation:f9-pulse 2.8s ease-out infinite;
}
@keyframes f9-pulse{
  0%{box-shadow:0 0 0 0 var(--f9-pulse)}
  70%{box-shadow:0 0 0 7px rgba(21,160,106,0)}
  100%{box-shadow:0 0 0 0 rgba(21,160,106,0)}
}

/* the blurred colour swash under the italic "played" */
.dnote-head em{position:relative}
.dnote-head em::after{
  content:"";position:absolute;right:2%;bottom:-3px;left:1%;height:6px;
  border-radius:50%;
  background:var(--f9-swash);
  filter:blur(2px);
  pointer-events:none;
}

/* wow's link hover: hairline underline swells into a soft fill */
.dnote-link{
  text-decoration:none;
  box-shadow:inset 0 -1px 0 var(--accent-line);
  transition:box-shadow .2s ease;
}
.dnote-link:hover,.dnote-link:focus-visible{
  box-shadow:inset 0 -.55em 0 var(--accent-soft);
}

/* ruled stat dividers (wow's ledger rhythm): the theme's own gap
   spaces the cells, the rule rides each cell's left edge with just
   enough padding to breathe. Dropped below 561px so wrapped rows
   never carry a stray rule. */
@media(min-width:561px){
  /* the card interior is ~441px at 1366w and the stock 30px gap plus
     any left padding must stay under ~51px per seam or the fourth
     stat wraps — 22px gap + 16px pad leaves ~40px of headroom for
     the day the demo count gains a digit */
  .dnote-stats{gap:12px 22px}
  .dnote-stat{border-left:1px solid var(--border);padding-left:16px}
  .dnote-stat:first-child{border-left:0;padding-left:0}
}

/* ------------------------------------------------------------
   [6] REDUCED MOTION — everything holds its finished pose.
   (Tilt, parallax and the pointer light also gate off in
   fusion.js; the integrated hovers gate in their own sheets.)
   ------------------------------------------------------------ */
@media(prefers-reduced-motion:reduce){
  html::before,body::before,body::after,html::after{animation:none!important}
  html::before,body::before,html::after{will-change:auto}
  .df-stage{transition:none}
  .df-motion .df-layer{will-change:auto}
  .dnote{transition:none;transform:none}
  .dnote-kick::after{animation:none}
  /* our transform-only entrance outranks the theme's reduce
     neutraliser — repeat it at our specificity */
  html.anim-ready .nr-center.reveal{transform:none;transition:none}
  .nr-center.reveal{will-change:auto}
}

/* ------------------------------------------------------------
   [7] SMALL SCREENS — fewer, tighter ghosts; no parallax or
   tilt runs here (JS gates); clipped stage + fixed sky = no
   sideways scroll at 390px.
   ------------------------------------------------------------ */
@media(max-width:860px){
  .g-heart-md{display:none}
}
@media(max-width:700px){
  .g-spade-xl{top:-80px;right:-90px}
  .g-diamond-xl{bottom:-90px;left:-90px}
  .g-club-md{top:-16px;left:2%}
  .df-ring{width:min(78vw,420px)}
}