/* ==========================================================================
   MKV Academy — optional dark mode ("light rays").
   Applies only when <html data-theme="dark">, which js/theme.js sets when the
   visitor presses the toggle. Nothing here follows the device colour setting.
   Load this file AFTER the page's other stylesheets.
   ========================================================================== */

/* ---- Toggle button ------------------------------------------------------ */
.theme-toggle{
  width:38px;height:38px;border-radius:50%;flex-shrink:0;padding:0;
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--ink-soft);
  background:var(--glass-fill);
  border:1px solid var(--line);
  box-shadow:var(--glass-inset);
  transition:color .15s ease, border-color .15s ease, box-shadow .2s ease;
}
.theme-toggle svg{width:19px;height:19px}
.theme-toggle:hover{color:var(--blue);border-color:var(--blue)}
.theme-toggle--header{margin-left:auto;margin-right:6px}
.theme-toggle--float{position:fixed;top:14px;right:14px;z-index:60}
html.theme-anim *{transition:background-color .25s ease,color .25s ease,border-color .25s ease !important}

/* Desktop header: the toggle needs ~50px, so tighten the links a little
   between 1181px and 1400px wide (where the header was already snug). */
@media (min-width:1181px){
  .site-header .theme-toggle--header{margin-left:12px;margin-right:0}
  .site-header .wrap{gap:12px}
}
@media (min-width:1181px) and (max-width:1400px){
  .site-header .nav-links{gap:14px}
  .site-header .nav-links a{font-size:14px}
  .site-header .nav-cta .btn,.site-header .wrap > .btn{padding-left:14px;padding-right:14px}
}

/* ---- Light-ray backdrop (dark mode only) --------------------------------
   Fixed to the screen, so the page scrolls over a light that never moves.
   Pure CSS: no network requests (nothing touches Supabase), and only
   transform/opacity are animated so it stays on the GPU. */
.theme-rays{display:none}
html[data-theme="dark"]{--ray-x:84%;--ray-y:64%;--ray-yvh:64vh}
@media (max-width:900px){html[data-theme="dark"]{--ray-x:93%;--ray-y:56%;--ray-yvh:56vh}}
html[data-theme="dark"] .theme-rays{
  display:block;position:fixed;inset:0;
  z-index:-1;pointer-events:none;overflow:hidden;
  animation:rays-in 1.1s ease-out both;
}
.theme-rays i{position:absolute;display:block}

/* clouds: big blurred blobs behind the beam */
html[data-theme="dark"] .r-cloud{
  border-radius:50%;filter:blur(52px);mix-blend-mode:screen;will-change:transform;
  animation:cloud-drift 34s ease-in-out infinite alternate;
}
html[data-theme="dark"] .r-c1{left:calc(var(--ray-x) - 6%);top:6%;width:50vw;height:34vh;max-width:820px;
  background:radial-gradient(closest-side,rgba(78,118,255,.62),rgba(60,96,245,.20) 58%,transparent)}
html[data-theme="dark"] .r-c2{left:calc(var(--ray-x) - 46%);top:46%;width:58vw;height:38vh;max-width:940px;animation-delay:-9s;
  background:radial-gradient(closest-side,rgba(110,92,255,.50),rgba(60,80,230,.18) 60%,transparent)}
html[data-theme="dark"] .r-c3{left:calc(var(--ray-x) - 14%);top:52%;width:64vw;height:44vh;max-width:1040px;animation-delay:-17s;
  background:radial-gradient(closest-side,rgba(64,104,255,.56),rgba(40,64,210,.20) 60%,transparent)}
html[data-theme="dark"] .r-c4{left:calc(var(--ray-x) - 30%);top:-12%;width:44vw;height:36vh;max-width:700px;animation-delay:-4s;
  background:radial-gradient(closest-side,rgba(130,160,255,.34),transparent 70%)}
html[data-theme="dark"] .r-c5{left:calc(var(--ray-x) + 0%);top:28%;width:34vw;height:30vh;max-width:560px;animation-delay:-12s;
  background:radial-gradient(closest-side,rgba(140,110,255,.44),transparent 70%)}
html[data-theme="dark"] .r-c6{left:calc(var(--ray-x) - 58%);top:72%;width:60vw;height:30vh;max-width:980px;animation-delay:-22s;
  background:radial-gradient(closest-side,rgba(52,78,220,.42),transparent 70%)}
@keyframes cloud-drift{from{transform:translate3d(-2.5%,0,0) scale(1)}to{transform:translate3d(3%,2.5%,0) scale(1.08)}}

/* wide column of light around the beam, gently shimmering */
html[data-theme="dark"] .r-bloom{
  left:var(--ray-x);top:0;width:min(600px,80vw);height:88%;transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,rgba(110,130,255,.28) 36%,rgba(205,215,255,.52) 50%,rgba(110,130,255,.28) 64%,transparent);
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 26%,#000 78%,transparent);
          mask-image:linear-gradient(to bottom,transparent 0,#000 26%,#000 78%,transparent);
  filter:blur(24px);mix-blend-mode:screen;
  animation:bloom-breathe 5.4s ease-in-out infinite;
}
/* the beam widens as it nears the floor (blur on the parent, shape on the
   child, so the edges come out soft) */
html[data-theme="dark"] .r-cone{
  left:var(--ray-x);top:calc(var(--ray-y) - 36%);width:min(560px,74vw);height:36%;transform:translateX(-50%);
  filter:blur(26px);mix-blend-mode:screen;
}
html[data-theme="dark"] .r-cone::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(150,165,255,0),rgba(150,168,255,.24) 65%,rgba(225,232,255,.46));
  clip-path:polygon(46% 0,54% 0,92% 100%,8% 100%);
}
/* the beam: thin and white-hot */
html[data-theme="dark"] .r-beam{
  left:var(--ray-x);top:0;width:5px;height:var(--ray-y);transform:translateX(-50%);border-radius:5px;
  background:linear-gradient(to bottom,rgba(255,255,255,.15) 0,rgba(255,255,255,.9) 14%,#fff 40%,#fff 100%);
  box-shadow:0 0 4px 1px #fff, 0 0 16px 4px rgba(255,255,255,.7), 0 0 40px 10px rgba(170,190,255,.85), 0 0 100px 28px rgba(110,120,255,.52), 0 0 230px 80px rgba(70,90,240,.30);
}

/* falling light: bright pulses run down the beam and land in the flare */
html[data-theme="dark"] .r-fall{
  left:var(--ray-x);top:0;width:7px;height:20vh;margin-left:-3.5px;border-radius:7px;
  background:linear-gradient(to bottom,rgba(255,255,255,0),rgba(214,224,255,.9) 62%,#fff);
  box-shadow:0 0 14px 4px rgba(190,205,255,.9), 0 0 44px 12px rgba(120,135,255,.6);
  opacity:0;will-change:transform,opacity;
  animation:ray-fall 5.4s cubic-bezier(.5,0,.6,1) infinite;
}
html[data-theme="dark"] .r-fall-b{width:4px;margin-left:-2px;height:13vh;animation-delay:-2.7s;
  box-shadow:0 0 10px 3px rgba(190,205,255,.75), 0 0 30px 8px rgba(120,135,255,.45)}
@keyframes ray-fall{
  0%{transform:translateY(-24vh);opacity:0}
  10%{opacity:1}
  82%{opacity:1}
  100%{transform:translateY(calc(var(--ray-yvh) - 14vh));opacity:0}
}
@keyframes bloom-breathe{0%,100%{opacity:.78}55%{opacity:1}}

/* where the beam lands: a bright fan of light that sweeps out sideways */
html[data-theme="dark"] .r-flare{
  left:var(--ray-x);top:calc(var(--ray-y) - 150px);width:min(1300px,170vw);height:320px;transform:translateX(-50%);
  background:
    radial-gradient(ellipse 40% 22% at 50% 47%,rgba(255,255,255,.92),rgba(205,212,255,.70) 22%,rgba(130,120,255,.40) 50%,transparent 78%),
    radial-gradient(ellipse 50% 40% at 50% 47%,rgba(120,100,255,.46),transparent 74%),
    radial-gradient(ellipse 50% 70% at 50% 40%,rgba(78,110,255,.30),transparent 74%);
  filter:blur(12px);mix-blend-mode:screen;
  animation:flare-pulse 5.4s ease-in-out infinite;will-change:opacity;
}
html[data-theme="dark"] .r-flare::after{
  content:"";position:absolute;left:6%;right:6%;top:calc(47% - 1.5px);height:3px;border-radius:3px;
  background:linear-gradient(90deg,transparent,rgba(190,205,255,.9) 34%,#fff 50%,rgba(190,205,255,.9) 66%,transparent);
  box-shadow:0 0 22px 5px rgba(150,170,255,.7);
}
@keyframes flare-pulse{0%,66%{opacity:.7}84%{opacity:1}100%{opacity:.7}}
/* a ring of light spreads outward each time a pulse lands */
html[data-theme="dark"] .r-ripple{
  left:var(--ray-x);top:var(--ray-y);width:min(900px,120vw);height:110px;border-radius:50%;
  border:2px solid rgba(185,200,255,.6);
  box-shadow:0 0 28px rgba(110,130,255,.45), inset 0 0 26px rgba(110,130,255,.25);
  opacity:0;transform:translate(-50%,-50%) scale(.18);will-change:transform,opacity;
  animation:ray-ripple 5.4s ease-out infinite;
}
@keyframes ray-ripple{
  0%,74%{opacity:0;transform:translate(-50%,-50%) scale(.18)}
  78%{opacity:.7}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1)}
}
@keyframes rays-in{from{opacity:0}to{opacity:1}}

/* Light mode for slow devices / data-saver: keep the glow, drop the motion */
html.rays-lite .theme-rays *{animation:none !important}
html.rays-lite .r-fall,html.rays-lite .r-ripple{display:none !important}
@media (max-width:900px){
  html[data-theme="dark"] .r-cloud{animation:none}
  html[data-theme="dark"] .r-bloom{width:44vw;filter:blur(20px)}
  html[data-theme="dark"] .r-cone{width:70vw;opacity:.6}
  html[data-theme="dark"] .r-cloud{opacity:.6}
  html[data-theme="dark"] .r-beam{box-shadow:0 0 4px 1px #fff, 0 0 14px 3px rgba(255,255,255,.7), 0 0 34px 8px rgba(170,190,255,.8), 0 0 80px 20px rgba(110,120,255,.5)}
}

/* ---- Dark palette ----------------------------------------------------------
   Built as layers, not as an inversion: a deep midnight canvas, slightly
   lighter raised surfaces, blue-tinted hairlines instead of white ones,
   and softened text so nothing glares. */
html[data-theme="dark"]{
  color-scheme:dark;
  --ink:#E3E9F6;
  --ink-soft:#8F9CB6;
  --paper:#070A13;
  --paper-raised:#0E1525;
  --surface-alt:#131C30;
  --line:rgba(140,165,230,.13);
  --line-strong:rgba(140,165,230,.25);
  --blue:#4F7BF7;
  --blue-deep:#9DB7FF;      /* text/eyebrow colour on dark */
  --blue-deep-bg:#2447C4;   /* solid deep blue for hero gradients */
  --blue-hover:#6A90FF;
  --blue-tint:rgba(79,123,247,.15);
  --blue-wash:rgba(79,123,247,.07);
  --blue-line:rgba(79,123,247,.32);
  --amber:#F0993A;
  --amber-deep:#F5B056;
  --green:#3CCB8B;
  --ok-bg:rgba(60,203,139,.12);
  --err:#FF8E7E;
  --err-bg:rgba(255,107,90,.12);
  --err-line:rgba(255,107,90,.34);
  --warn-bg:rgba(240,153,58,.12);
  --warn-line:rgba(240,153,58,.34);
  --warn-ink:#F5C27A;
  --dark-surface:#080D18;
  --chip-bg:rgba(8,12,24,.80);
  --chip-ink:#E3E9F6;
  --chip-blue:#9DB7FF;
  --shadow-sm:0 1px 2px rgba(0,0,0,.5);
  --shadow-md:0 10px 30px rgba(0,0,0,.45), 0 0 0 1px rgba(140,165,230,.06);
  --shadow-lg:0 28px 70px rgba(0,0,0,.6), 0 0 60px rgba(79,123,247,.10);
  --glass-fill:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.03));
  --glass-edge:rgba(255,255,255,.15);
  --glass-shadow:0 10px 24px rgba(0,0,0,.45);
  --glass-inset:inset 0 1px 0 rgba(255,255,255,.12), inset 0 -1px 0 rgba(0,0,0,.4);
  --glass-glow:rgba(79,123,247,.55);
  --glass-dot:rgba(160,185,255,.20);
}
html[data-theme="dark"] body{
  color:var(--ink);
  background:
    radial-gradient(1100px 620px at 8% -8%, rgba(44,66,150,.22), transparent 62%),
    linear-gradient(180deg,#0A0F1E 0%,#070A13 46%,#060810 100%);
  background-attachment:fixed;
}

/* Header: translucent so the light shows through */
html[data-theme="dark"] .site-header{
  background:rgba(7,10,19,.70);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
}
html[data-theme="dark"] .mobile-menu-backdrop{background-color:var(--paper)}

/* Page sections stop painting solid backgrounds, so the fixed light is
   visible the whole way down the page */
html[data-theme="dark"] .section,
html[data-theme="dark"] section#about{background:transparent}
html[data-theme="dark"] .controls-bar{
  background:rgba(7,10,19,.58);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
}
html[data-theme="dark"] .author-section{background:rgba(8,13,24,.62)}
html[data-theme="dark"] .about-founders-hero{background:rgba(8,13,24,.52)}
html[data-theme="dark"] .mkt-hero{
  background:linear-gradient(180deg,rgba(79,123,247,.10),transparent);
  border-bottom-color:var(--line);
}

/* Cards: hairline top highlight + soft depth instead of a bare dark box */
html[data-theme="dark"] :where([class*="-card"]:not(.hero-cover-card):not(.glass-card)){
  border-color:var(--line);
  box-shadow:inset 0 1px 0 rgba(190,205,255,.06), 0 8px 24px rgba(0,0,0,.32);
}
html[data-theme="dark"] .mkt-card:hover,
html[data-theme="dark"] .course-card:hover{
  border-color:var(--blue-line);
  box-shadow:0 0 0 1px var(--blue-line), 0 14px 44px rgba(79,123,247,.20);
}
/* CAD thumbnails are shot on white: take the glare off */
html[data-theme="dark"] .mkt-card-thumb img,
html[data-theme="dark"] .mkt-gallery-main img{filter:brightness(.88) contrast(1.04)}

/* The dark logo is swapped in by js/theme.js; hide the light one until then */
html[data-theme="dark"] img[src*="assets/logo.png"]{visibility:hidden}

/* Form controls that don't style themselves (zero specificity so any
   component rule still wins) */
:where(html[data-theme="dark"]) :where(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]), textarea, select){
  background-color:var(--surface-alt);color:var(--ink);border-color:var(--line-strong);
}
:where(html[data-theme="dark"]) ::placeholder{color:var(--ink-soft);opacity:.75}

/* "Glowing borders" on the surfaces that matter */
html[data-theme="dark"] .btn-primary{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 8px 28px rgba(79,123,247,.40);
}
html[data-theme="dark"] .btn-primary:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 10px 34px rgba(79,123,247,.56)}
html[data-theme="dark"] .btn-ghost:hover{box-shadow:0 0 22px rgba(79,123,247,.25)}
html[data-theme="dark"] .auth-card,
html[data-theme="dark"] .glass-card,
html[data-theme="dark"] .order-card{
  border-color:rgba(150,178,255,.16);
  box-shadow:var(--shadow-lg), inset 0 1px 0 rgba(190,205,255,.14);
}
html[data-theme="dark"] .auth-backdrop{background:rgba(2,4,9,.72)}
html[data-theme="dark"] .bracket-frame::before,
html[data-theme="dark"] .bracket-frame::after{opacity:.8}
html[data-theme="dark"] .blueprint-grid{
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
}
html[data-theme="dark"] .test-cta-row.locked{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

/* Skeleton shimmer */
html[data-theme="dark"] .skel{
  background:linear-gradient(90deg,rgba(255,255,255,.06) 25%,rgba(255,255,255,.12) 37%,rgba(255,255,255,.06) 63%);
  background-size:800px 100%;
}
html[data-theme="dark"] .hero-cover-card::after{opacity:.55}

@media (prefers-reduced-motion:reduce){
  html[data-theme="dark"] .theme-rays,
  html[data-theme="dark"] .theme-rays *{animation:none !important}
  html[data-theme="dark"] .r-fall,html[data-theme="dark"] .r-ripple{display:none}
  html.theme-anim *{transition:none !important}
}