/* ==========================================================================
   HOTS theme — sun/moon toggle + light theme
   Loaded AFTER each page's own styles and fx.css.
   data-theme="dark" (default look) | data-theme="light"
   ========================================================================== */

html[data-theme="dark"]{ color-scheme:dark; }

/* ---------- Toggle (sun | moon) ---------- */
.th-toggle{
  position:relative; display:inline-flex; align-items:center; flex-shrink:0;
  width:62px; height:34px; padding:0; border-radius:999px;
  border:1px solid var(--border-soft); background:var(--bg-elev);
  color:var(--fg-muted); cursor:pointer;
  transition:border-color .2s ease, background-color .3s ease;
}
.th-toggle:hover{ border-color:var(--accent); }
.th-toggle:focus-visible{ outline:2px solid var(--accent-bright); outline-offset:2px; }
.th-toggle svg{
  position:absolute; top:50%; width:16px; height:16px; margin-top:-8px;
  z-index:2; transition:color .25s ease; pointer-events:none;
}
.th-toggle .th-sun{ left:9px; }
.th-toggle .th-moon{ right:9px; }
.th-toggle .th-knob{
  position:absolute; top:3px; left:3px; width:26px; height:26px; border-radius:50%; z-index:1;
  background:linear-gradient(180deg, var(--accent-bright), var(--accent));
  box-shadow:0 2px 8px -2px rgba(0,0,0,.45);
  transition:transform .32s cubic-bezier(.4,.1,.2,1);
}
html[data-theme="dark"]  .th-toggle .th-knob{ transform:translateX(28px); }  /* knob sits on the moon */
html[data-theme="dark"]  .th-toggle .th-moon{ color:#221a0c; }
html[data-theme="light"] .th-toggle .th-sun{ color:#fff; }
.th-group{ display:flex; align-items:center; gap:10px; }

/* mobile copy of the toggle (the desktop one lives in .nav-actions, which is hidden on phones) */
.th-toggle--m{ display:none; }
@media (max-width:880px){
  .th-toggle--m{ display:inline-flex; position:absolute; right:80px; top:50%; margin-top:-17px; width:56px; }  /* 32px page padding + 38px menu button + 10px gap */
  html[data-theme="dark"] .th-toggle--m .th-knob{ transform:translateX(22px); }
}

/* short cross-fade while switching */
html.th-anim, html.th-anim *, html.th-anim *::before, html.th-anim *::after{
  transition:background-color .35s ease, color .35s ease, border-color .35s ease, box-shadow .35s ease, fill .35s ease, stroke .35s ease !important;
}

/* ==========================================================================
   LIGHT THEME — variables
   ========================================================================== */
html[data-theme="light"]{
  color-scheme:light;
  --bg:#f3eefb;
  --bg-elev:#fbf8ff;
  --bg-elev-2:#f1e9fb;
  --bg-row-alt:#ebe1f7;
  --border:#d8cbea;
  --border-soft:#e1d6f0;
  --fg:#150f2b;
  --fg-muted:#352d52;
  --fg-faint:#5a5278;
  --accent:#b9770e;
  --accent-bright:#9a5d00;
  --accent-dim:rgba(185,119,14,.13);
  --accent-dim2:rgba(185,119,14,.26);
  --red:#cf2f3a;
  --red-dim:rgba(207,47,58,.1);
  --green:#1c8f3a;
  --blue:#1668c8;
  background:var(--bg);
}
html[data-theme="light"] body{ background:transparent; }
html[data-theme="light"] body::before{ display:none; }          /* old dark gold glow */
html[data-theme="light"]::before{ display:none; }               /* static dark fallback grid */
html[data-theme="light"] .fx-canvas,
html[data-theme="light"] .hero-canvas{ display:none !important; } /* WebGPU dark scene */

/* nav */
html[data-theme="light"] body header.nav{
  background:rgba(255,255,255,.72);
  border-bottom-color:rgba(100,70,160,.16);
  backdrop-filter:blur(14px) saturate(160%); -webkit-backdrop-filter:blur(14px) saturate(160%);
}

/* glass cards */
html[data-theme="light"] body .module-card,
html[data-theme="light"] body .compare-card,
html[data-theme="light"] body .support-card,
html[data-theme="light"] body .faq-item,
html[data-theme="light"] body .family-card.live,
html[data-theme="light"] body .changelog-item,
html[data-theme="light"] body .card-bg,
html[data-theme="light"] body .trust-item{
  background:linear-gradient(135deg, rgba(255,255,255,.8), rgba(255,255,255,.44) 60%), rgba(255,255,255,.22);
  border-color:rgba(255,255,255,.78);
  box-shadow:0 12px 32px -18px rgba(80,48,150,.32), 0 1px 0 rgba(255,255,255,.75) inset;
  backdrop-filter:blur(12px) saturate(150%); -webkit-backdrop-filter:blur(12px) saturate(150%);
}
html[data-theme="light"] body .family-card:not(.live){ background:rgba(255,255,255,.4); }
html[data-theme="light"] body .compare-card.current{ border-color:rgba(185,119,14,.5); }

/* terminals & app mockups stay dark (they show the dark app) */
html[data-theme="light"] .terminal,
html[data-theme="light"] .mockup-shell{
  --bg:#0b0c10; --bg-elev:#14161c; --bg-elev-2:#191c23; --bg-row-alt:#1d2129;
  --border:#262a33; --border-soft:#2f333d;
  --fg:#e9e7e2; --fg-muted:#8b8d97; --fg-faint:#565962;
  --accent:#d8ad5f; --accent-bright:#f2c877;
  --accent-dim:rgba(216,173,95,.14); --accent-dim2:rgba(216,173,95,.28);
  --red:#e5484d; --green:#4ec94e; --blue:#60c8ff;
  color:var(--fg);
}
html[data-theme="light"] body .terminal,
html[data-theme="light"] body .mockup-shell{
  background:rgba(13,14,19,.92);
  border-color:rgba(255,255,255,.14);
  box-shadow:0 26px 60px -28px rgba(40,20,90,.55);
}

/* buttons / chips / headline */
html[data-theme="light"] .btn-accent{
  background:linear-gradient(180deg, #f6cf84, #e0a73f);
  color:#2a1a00; border-color:#d89a2a;
  box-shadow:0 1px 0 rgba(255,255,255,.5) inset, 0 8px 20px -8px rgba(200,130,20,.55);
}
html[data-theme="light"] .btn-outline{ border-color:rgba(154,93,0,.4); }
html[data-theme="light"] .eyebrow{
  background:rgba(255,255,255,.6); border-color:rgba(154,93,0,.35); color:var(--accent-bright);
}
html[data-theme="light"] .hero h1{ text-shadow:none; }
html[data-theme="light"] body[data-page="home"] .hero h1 em{
  background-image:linear-gradient(100deg, #8f4f00 0%, #b3225f 35%, #5a2bc4 55%, #b3225f 72%, #8f4f00 100%);
}
html[data-theme="light"] .pill{ background:rgba(255,255,255,.6); }

/* ==========================================================================
   LIGHT THEME — animated background
   Mesh · Aurora curtains · DotGrid · Particles · FilmGrain · Vignette
   ========================================================================== */
.th-bg{
  position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden; display:none;
  background:linear-gradient(165deg, #f7e8ff 0%, #ead7fb 40%, #d9e4fe 100%);
}
html[data-theme="light"] .th-bg{ display:block; }
.th-bg > *{ position:absolute; inset:0; }

/* Mesh — soft colour fields that slowly drift */
.th-mesh i{ position:absolute; display:block; border-radius:50%; will-change:transform; }
.th-mesh i:nth-child(1){ width:90vmax; height:90vmax; left:-30vmax; top:-38vmax;
  background:radial-gradient(circle, rgba(205,98,222,.9) 0%, rgba(205,98,222,.5) 34%, rgba(205,98,222,0) 66%);
  animation:thDriftA 22s ease-in-out infinite alternate; }
.th-mesh i:nth-child(2){ width:80vmax; height:80vmax; right:-30vmax; top:-32vmax;
  background:radial-gradient(circle, rgba(250,84,160,.85) 0%, rgba(250,84,160,.46) 36%, rgba(250,84,160,0) 66%);
  animation:thDriftB 26s ease-in-out infinite alternate; }
.th-mesh i:nth-child(3){ width:94vmax; height:94vmax; right:-32vmax; bottom:-48vmax;
  background:radial-gradient(circle, rgba(76,108,246,.88) 0%, rgba(96,152,250,.56) 38%, rgba(96,152,250,0) 68%);
  animation:thDriftC 24s ease-in-out infinite alternate; }
.th-mesh i:nth-child(4){ width:76vmax; height:76vmax; left:-26vmax; bottom:-38vmax;
  background:radial-gradient(circle, rgba(126,72,240,.8) 0%, rgba(126,72,240,.4) 36%, rgba(126,72,240,0) 66%);
  animation:thDriftD 28s ease-in-out infinite alternate; }
.th-mesh i:nth-child(5){ width:52vmax; height:52vmax; left:14vmax; top:36vh;
  background:radial-gradient(circle, rgba(50,214,150,.78) 0%, rgba(50,214,150,.4) 38%, rgba(70,214,160,0) 68%);
  animation:thDriftE 30s ease-in-out infinite alternate; }
.th-mesh i:nth-child(6){ width:46vmax; height:46vmax; right:6vmax; top:44vh;
  background:radial-gradient(circle, rgba(255,150,72,.56) 0%, rgba(255,150,72,.26) 38%, rgba(255,150,72,0) 68%);
  animation:thDriftF 27s ease-in-out infinite alternate; }
@keyframes thDriftA{ 0%{ transform:translate3d(0,0,0) scale(1); }   100%{ transform:translate3d(22vmax,16vmax,0) scale(1.2); } }
@keyframes thDriftB{ 0%{ transform:translate3d(0,0,0) scale(1.05); } 100%{ transform:translate3d(-20vmax,20vmax,0) scale(.9); } }
@keyframes thDriftC{ 0%{ transform:translate3d(0,0,0) scale(1); }   100%{ transform:translate3d(-24vmax,-14vmax,0) scale(1.16); } }
@keyframes thDriftD{ 0%{ transform:translate3d(0,0,0) scale(1.08); } 100%{ transform:translate3d(20vmax,-18vmax,0) scale(.92); } }
@keyframes thDriftE{ 0%{ transform:translate3d(-6vmax,6vmax,0) scale(.9); } 100%{ transform:translate3d(18vmax,-12vmax,0) scale(1.18); } }
@keyframes thDriftF{ 0%{ transform:translate3d(8vmax,-4vmax,0) scale(1.1); } 100%{ transform:translate3d(-16vmax,12vmax,0) scale(.88); } }

/* Aurora — tall curtains of light that sway, stretch and breathe */
.th-aurora{ opacity:.5; }
.th-aurora i{
  position:absolute; display:block; top:-14vh; height:128vh;
  transform-origin:50% 0;
  filter:blur(46px); will-change:transform, opacity;
}
.th-aurora i:nth-child(1){ /* pink, centre */
  left:36%; width:26vw;
  background:linear-gradient(180deg, rgba(255,90,170,0) 0%, rgba(255,90,170,.95) 26%, rgba(236,84,214,.75) 58%, rgba(236,84,214,0) 100%);
  animation:thCurtA 17s ease-in-out infinite alternate; }
.th-aurora i:nth-child(2){ /* green, left */
  left:6%; width:22vw;
  background:linear-gradient(180deg, rgba(60,220,160,0) 4%, rgba(40,222,150,.95) 34%, rgba(70,200,210,.6) 66%, rgba(70,200,210,0) 100%);
  animation:thCurtB 21s ease-in-out infinite alternate; }
.th-aurora i:nth-child(3){ /* blue, right */
  left:68%; width:28vw;
  background:linear-gradient(180deg, rgba(80,120,250,0) 0%, rgba(80,120,250,.85) 30%, rgba(130,90,245,.7) 64%, rgba(130,90,245,0) 100%);
  animation:thCurtC 19s ease-in-out infinite alternate; }
.th-aurora i:nth-child(4){ /* orange, between pink and blue */
  left:54%; width:15vw;
  background:linear-gradient(180deg, rgba(255,160,70,0) 8%, rgba(255,150,64,.8) 36%, rgba(255,110,120,.55) 68%, rgba(255,110,120,0) 100%);
  animation:thCurtD 24s ease-in-out infinite alternate; }
.th-aurora i:nth-child(5){ /* violet, left-centre */
  left:22%; width:18vw;
  background:linear-gradient(180deg, rgba(150,84,245,0) 0%, rgba(150,84,245,.7) 32%, rgba(90,130,250,.5) 66%, rgba(90,130,250,0) 100%);
  animation:thCurtE 26s ease-in-out infinite alternate; }
@keyframes thCurtA{ 0%{ transform:translate3d(-9vw,0,0) skewX(-14deg) scaleY(.88); opacity:.6; }  50%{ opacity:1; } 100%{ transform:translate3d(10vw,0,0) skewX(12deg) scaleY(1.08); opacity:.78; } }
@keyframes thCurtB{ 0%{ transform:translate3d(-4vw,0,0) skewX(10deg) scaleY(1.05); opacity:.9; }  100%{ transform:translate3d(14vw,0,0) skewX(-12deg) scaleY(.82); opacity:.5; } }
@keyframes thCurtC{ 0%{ transform:translate3d(6vw,0,0) skewX(-10deg) scaleY(.9); opacity:.55; }   50%{ opacity:.95; } 100%{ transform:translate3d(-14vw,0,0) skewX(14deg) scaleY(1.06); opacity:.8; } }
@keyframes thCurtD{ 0%{ transform:translate3d(-10vw,0,0) skewX(12deg) scaleY(.8); opacity:.35; }  50%{ opacity:.85; } 100%{ transform:translate3d(10vw,0,0) skewX(-16deg) scaleY(1); opacity:.5; } }
@keyframes thCurtE{ 0%{ transform:translate3d(8vw,0,0) skewX(-8deg) scaleY(1); opacity:.45; }    100%{ transform:translate3d(-10vw,0,0) skewX(12deg) scaleY(.86); opacity:.85; } }

/* Liquid aurora (WebGL shader, drawn by theme.js) */
.th-liquid{ width:100%; height:100%; display:block; opacity:0; transition:opacity 1.2s ease; }
.th-liquid.on{ opacity:1; }
.th-bg.th-gl .th-mesh, .th-bg.th-gl .th-aurora{ display:none; }

/* WebGPU scene (shaders library, drawn by theme.js); replaces the WebGL one when available */
.th-gpu{ width:100%; height:100%; display:block; opacity:0; transition:opacity 1.6s ease; }
.th-gpu.on{ opacity:1; }
.th-bg.th-has-gpu .th-liquid{ display:none; }

/* Dots — random scatter drawn by theme.js */
.th-dots{
  width:100%; height:100%; display:block;
  opacity:.95;
  -webkit-mask-image:radial-gradient(ellipse 95% 85% at 50% 38%, #000 15%, transparent 95%);
  mask-image:radial-gradient(ellipse 95% 85% at 50% 38%, #000 15%, transparent 95%);
  animation:thTwinkle 11s ease-in-out infinite alternate;
}
@keyframes thTwinkle{ 0%{ opacity:.65; } 100%{ opacity:1; } }

/* FloatingParticles (canvas, drawn by theme.js) */
.th-particles{ width:100%; height:100%; display:block; }

/* FilmGrain */
.th-grain{
  inset:-12%;
  opacity:.1; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3  0 0 0 0 .2  0 0 0 0 .5  0 0 0 1.1 -.45'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px 180px;
  animation:none;
}
@keyframes thGrain{
  0%{ transform:translate(0,0); } 20%{ transform:translate(-3%,2%); } 40%{ transform:translate(2%,-3%); }
  60%{ transform:translate(-2%,-1%); } 80%{ transform:translate(3%,3%); } 100%{ transform:translate(0,0); }
}

/* Vignette */
.th-vignette{
  background:radial-gradient(ellipse 120% 100% at 50% 38%, rgba(0,0,0,0) 55%, rgba(110,70,170,.12) 100%);
}

/* legibility on the stronger colours */
html[data-theme="light"] .hero h1,
html[data-theme="light"] .hero p,
html[data-theme="light"] .hero-grid p,
html[data-theme="light"] .section-head h2,
html[data-theme="light"] .section-head p{ text-shadow:0 0 22px rgba(255,255,255,.65); }
html[data-theme="light"] .hero h1 em{ text-shadow:none; }

/* reduced motion: very slow, gentle drift (no grain, no particles) */
@media (prefers-reduced-motion: reduce){
  .th-mesh i, .th-aurora i{ animation-duration:120s !important; }
  .th-grain, .th-dots{ animation:none !important; }
  .th-toggle .th-knob{ transition:none; }
}

/* main page: text colours that are hard-coded light in the page's own CSS */
html[data-theme="light"] .nav-links a,
html[data-theme="light"] .hero p,
html[data-theme="light"] .trust-item p,
html[data-theme="light"] .support-card p,
html[data-theme="light"] .foot-links a{ color:var(--fg-muted); }
html[data-theme="light"] .nav-links a:hover,
html[data-theme="light"] .foot-links a:hover{ color:var(--fg); }