/* ============================================================
   ZAHRA — Living Green Glow System (glow.css)
   Layered on top of zahra.css WITHOUT touching layout/structure.
   Deep Jade #0E5C4A · Sabbarah Green #1FD9A0 · Mint #6BF5CE ·
   Desert Gold #C9A227 (one touch per composition).
   2026-09-06 consolidation: motion means a state changed. The
   ambient loops (orbs, aurora, shimmer, breath, sweeps, twinkle,
   header hairline, button pulse) are retired; what remains reacts
   to the visitor: cursor light on hover, the heading underline on
   reveal, and one edge light on the active station.
   ============================================================ */

/* ---------- 1. hero headline: the second line is simply green ---------- */
.hero h1 span{color:var(--green)}
html[data-theme="light"] .hero h1 span{color:var(--jade)}

/* ---------- 2. cursor-following light on interactive surfaces (dark: glow, light: fill light) ---------- */
.sol-card,.faq details,.guard__list li,.price-card,.steps li{--mx:50%;--my:50%;position:relative}
.sol-card::before,.faq details::before,.price-card::before{
content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .45s ease;z-index:0;
background:radial-gradient(320px circle at var(--mx) var(--my),rgba(31,217,160,.06),transparent 65%)}
.sol-card:hover::before,.faq details:hover::before,.price-card:hover::before{opacity:1}
.sol-card>*,.price-card>*{position:relative;z-index:1}
/* on Sand the pointer is a fill light, not a torch: a warm white lift instead of green */
html[data-theme="light"] .sol-card::before,html[data-theme="light"] .faq details::before,html[data-theme="light"] .price-card::before{
background:radial-gradient(360px circle at var(--mx) var(--my),rgba(255,255,255,.55),transparent 66%)}

/* ---------- 3. scroll-reactive: heading underline draws on reveal ---------- */
.section-heading h2{position:relative;display:block;width:fit-content}
.section-heading h2::after{content:"";position:absolute;inset-inline-start:0;bottom:-10px;height:3px;width:0;border-radius:99px;
background:linear-gradient(90deg,var(--green),var(--mint));box-shadow:0 0 12px rgba(31,217,160,.35);
transition:width .9s var(--ease-out) .2s}
html[dir="rtl"] .section-heading h2::after{background:linear-gradient(270deg,var(--green),var(--mint))}
.reveal.is-visible h2::after,.is-visible .section-heading h2::after,.section-heading.is-visible h2::after,
html:not(.js) .section-heading h2::after{width:56px}
html[data-theme="light"] .section-heading h2::after{background:linear-gradient(90deg,var(--jade),var(--green));box-shadow:none}

/* ---------- 4. the active station carries the one edge light on the page ---------- */
@property --sweep{syntax:"<angle>";inherits:false;initial-value:0deg}
.sol-card.is-active::after{
content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;opacity:1;height:auto;background:none;
background:conic-gradient(from var(--sweep,0deg),transparent 0deg,transparent 300deg,rgba(31,217,160,.45) 330deg,rgba(107,245,206,.7) 342deg,rgba(31,217,160,.45) 354deg,transparent 360deg);
-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
animation:sweep 6s linear 2}
@keyframes sweep{to{--sweep:360deg}}
@supports not (background:conic-gradient(from var(--sweep,0deg),#000,#000)){.sol-card.is-active::after{display:none}}

/* ---------- 5. quiet text accents (no shadows on paper) ---------- */
.eyebrow,.kicker{text-shadow:0 0 18px rgba(107,245,206,.18)}
html[data-theme="light"] .eyebrow,html[data-theme="light"] .kicker{text-shadow:none}

/* ---------- reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
.sol-card.is-active::after{animation:none!important}
.section-heading h2::after{transition:none}}