/* Scroll-driven animation layer — visual support styles */

.scroll-luxe .sl-w{ display:inline-block; overflow:hidden; vertical-align:bottom; }
.scroll-luxe .sl-w > i{ display:inline-block; font-style:inherit; will-change:transform; }

/* Progress ring */
.sl-ring{
  position:fixed; left:26px; bottom:26px; width:54px; height:54px;
  display:grid; place-items:center; z-index:70; cursor:pointer;
  opacity:0; transform:translateY(12px) scale(.9);
  transition:opacity .5s ease, transform .5s cubic-bezier(.2,.8,.2,1);
  border-radius:50%;
  background:rgba(12,12,12,.55);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border:1px solid rgba(232,205,151,.18);
}
.sl-ring.is-visible{ opacity:1; transform:translateY(0) scale(1); }
.sl-ring:hover{ border-color:rgba(232,205,151,.5); }
.sl-ring svg{ position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg); }
.sl-ring circle{ fill:none; stroke-width:1.6; }
.sl-ring-track{ stroke:rgba(244,241,235,.10); }
.sl-ring-fill{ stroke:#e8cd97; stroke-linecap:round; transition:stroke-dashoffset .12s linear; }
.sl-ring-num{
  font-size:10.5px; letter-spacing:.12em; font-weight:600;
  color:rgba(244,241,235,.72); font-variant-numeric:tabular-nums;
}

/* Ambient glow that follows the active section */
.sl-glow{
  position:fixed; inset:0; pointer-events:none; z-index:0;
  --gx:22%;
  background:radial-gradient(60vw 60vh at var(--gx) 45%, rgba(232,205,151,.055), transparent 70%);
  transition:background 1.4s ease;
}

/* Self-drawing hairline rules */
.sl-rule{
  display:block; height:1px; width:100%; margin-top:22px;
  transform-origin:left center; transform:scaleX(0);
  background:linear-gradient(90deg, rgba(232,205,151,.55), rgba(232,205,151,.06) 70%, transparent);
}
.faq-item .sl-rule{ margin-top:0; }

@media (prefers-reduced-motion: reduce){
  .sl-ring, .sl-glow, .sl-rule{ display:none !important; }
}