/* ============================================================
   ANSERA SOLTANE — visual directions
   A = Constellation (default, in base.css)
   B = Nébuleuse   (immersive, glowing, glassy)
   C = Éclipse     (minimal, near-black, type-led)
   ============================================================ */

/* ───────────────────────────────────────────────────────────
   DIRECTION B — NÉBULEUSE
   Richer aurora glows bleeding behind every section, glassy
   panels, warmer and more saturated, softer geometry.
   ─────────────────────────────────────────────────────────── */
:root[data-direction="b"]{
  --bg:#0b0817;
  --bg-soft:#120d28;
  --line:rgba(216,184,120,.28);
  --glow-mul:1.55;
}
:root[data-direction="b"] .cosmos{
  background:
    radial-gradient(70% 55% at 82% 4%, rgba(168,108,190,calc(.34*var(--glow-mul))), transparent 60%),
    radial-gradient(60% 50% at 6% 30%, rgba(var(--accent-rgb),calc(.2*var(--glow-mul))), transparent 58%),
    radial-gradient(80% 60% at 30% 78%, rgba(108,86,210,calc(.3*var(--glow-mul))), transparent 62%),
    radial-gradient(70% 60% at 92% 88%, rgba(201,143,176,calc(.22*var(--glow-mul))), transparent 60%),
    linear-gradient(180deg, #0a0716 0%, var(--bg) 38%, var(--bg-soft) 100%);
}
/* drifting aurora layer unique to B */
:root[data-direction="b"] .wrap::before{
  content:""; position:fixed; inset:-20%; z-index:0; pointer-events:none;
  background:
    radial-gradient(40% 30% at 20% 20%, rgba(168,108,190,.16), transparent 60%),
    radial-gradient(46% 34% at 80% 70%, rgba(125,114,214,.16), transparent 60%);
  filter:blur(40px);
  animation:aurora 22s ease-in-out infinite alternate;
}
@keyframes aurora{ 0%{ transform:translate3d(-2%, -1%, 0) scale(1) } 100%{ transform:translate3d(3%, 2%, 0) scale(1.08) } }
@media (prefers-reduced-motion:reduce){ :root[data-direction="b"] .wrap::before{ animation:none } }

:root[data-direction="b"] .life{
  border-radius:20px;
  background:linear-gradient(180deg, rgba(40,30,78,.5), rgba(18,13,40,.42));
  -webkit-backdrop-filter:blur(10px) saturate(150%);
  backdrop-filter:blur(10px) saturate(150%);
  border-color:rgba(216,184,120,.2);
}
:root[data-direction="b"] .life::before{ opacity:.9; }
:root[data-direction="b"] .qcard,
:root[data-direction="b"] .info{
  -webkit-backdrop-filter:blur(12px) saturate(150%);
  backdrop-filter:blur(12px) saturate(150%);
  background:linear-gradient(180deg, rgba(40,30,78,.4), rgba(18,13,40,.34));
  border-radius:20px;
}
:root[data-direction="b"] .hero h1{
  background:linear-gradient(172deg, #fff 4%, #e9def6 38%, var(--accent-bright) 96%, #d99dc4 140%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
:root[data-direction="b"] .portal-frame{ border-radius:999px 999px 26px 26px; }
:root[data-direction="b"] .portal-halo{ filter:blur(22px); }
:root[data-direction="b"] .orb{ box-shadow:
  0 0 90px 4px rgba(var(--accent-rgb),.7),
  0 0 180px 18px rgba(168,108,190,.4),
  inset 0 0 60px rgba(255,255,255,.3); }
:root[data-direction="b"] .btn-ghost{ -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  background:rgba(255,255,255,.04); }

/* ───────────────────────────────────────────────────────────
   DIRECTION C — ÉCLIPSE
   Near-black, vast negative space, type is the hero, a single
   luminous element per section, almost no borders.
   ─────────────────────────────────────────────────────────── */
:root[data-direction="c"]{
  --bg:#050409;
  --bg-soft:#070611;
  --panel:#0c0a18;
  --text:#f3f1f8;
  --text-dim:#a39ec0;
  --line:rgba(216,184,120,.16);
  --line-soft:rgba(216,184,120,.07);
  --glow-mul:.8;
  --sec-pad:clamp(110px,17vh,220px);
}
:root[data-direction="c"] .cosmos{
  background:
    radial-gradient(50% 40% at 50% 0%, rgba(var(--accent-rgb),calc(.14*var(--glow-mul))), transparent 55%),
    radial-gradient(60% 50% at 50% 108%, rgba(96,70,180,calc(.12*var(--glow-mul))), transparent 60%),
    linear-gradient(180deg, #050409 0%, var(--bg) 50%, var(--bg-soft) 100%);
}
:root[data-direction="c"] #starfield{ opacity:calc(.6 * var(--star-op)); }

/* type goes larger & lighter, lots of air */
:root[data-direction="c"] h2.title{ font-weight:200; font-size:clamp(2.7rem,6vw,5.4rem); }
:root[data-direction="c"] .hero h1{ font-weight:200; letter-spacing:.04em;
  background:linear-gradient(180deg,#fff, #cfc9e4 70%, var(--accent-bright));
  -webkit-background-clip:text; background-clip:text; color:transparent; }
:root[data-direction="c"] .pull{ font-weight:200; font-size:clamp(2.1rem,4.4vw,3.6rem); }
:root[data-direction="c"] .sec-head{ margin-bottom:clamp(3rem,6vw,5rem); }

/* eclipse rings instead of filled cards */
:root[data-direction="c"] .life{
  background:transparent; border:none; border-top:1px solid var(--line);
  border-radius:0; padding:30px 14px 0; min-height:380px;
  backdrop-filter:none;
}
:root[data-direction="c"] .life::before{ display:none; }
:root[data-direction="c"] .life:hover{ transform:translateY(-6px); box-shadow:none; border-color:rgba(var(--accent-rgb),.5); }
:root[data-direction="c"] .life-num{ font-size:4rem; }
:root[data-direction="c"] .qcard,
:root[data-direction="c"] .info{ background:transparent; border:none; border-top:1px solid var(--line);
  border-radius:0; padding:1.8rem 0 0; }
:root[data-direction="c"] .info:hover{ transform:none; border-color:rgba(var(--accent-rgb),.4); }

/* eclipse portal: thin ring, image dimmer, luminous crescent edge */
:root[data-direction="c"] .portal-frame{
  border-radius:50%; border:1px solid rgba(var(--accent-rgb),.3);
  box-shadow:0 0 0 1px rgba(var(--accent-rgb),.08),
             0 0 120px -20px rgba(var(--accent-rgb),.6),
             inset -16px -10px 60px -20px rgba(var(--accent-rgb),.7);
}
:root[data-direction="c"] .portal{ aspect-ratio:1; }
:root[data-direction="c"] .portal-frame img{ filter:saturate(.8) brightness(.8) contrast(1.04); }
:root[data-direction="c"] .portal-frame::after{
  background:linear-gradient(105deg, rgba(5,4,9,.78) 30%, transparent 70%),
             radial-gradient(120% 90% at 92% 50%, rgba(var(--accent-rgb),.2), transparent 55%);
}
:root[data-direction="c"] .portal-cap{ display:none; }

/* eclipse buttons: pure outline */
:root[data-direction="c"] .btn-primary{
  background:transparent; color:var(--accent-bright); border:1px solid var(--accent);
  box-shadow:none; font-weight:500;
}
:root[data-direction="c"] .btn-primary:hover{
  background:rgba(var(--accent-rgb),.1);
  box-shadow:0 0 40px -10px rgba(var(--accent-rgb),.6); transform:translateY(-2px);
}
:root[data-direction="c"] .gate-ring.g1{ border-color:rgba(var(--accent-rgb),.35); }
:root[data-direction="c"] .step{ border-top-color:var(--line); }