/* ═══════════════════════════════════════════════════
   A. SCROLL-DRIVEN — REVEAL
   ═══════════════════════════════════════════════════ */
.reveal{
  opacity:0;
  transform:translateY(30px);
  filter:blur(6px);
  transition:
    opacity .9s var(--ease-out-expo),
    transform .9s var(--ease-out-expo),
    filter .9s var(--ease-out-expo);
  transition-delay:var(--d,0ms);
}
.reveal.in{opacity:1;transform:translateY(0);filter:blur(0)}

/* Reveal from left / right */
.reveal-left{
  opacity:0;transform:translateX(-60px);filter:blur(4px);
  transition:opacity .9s var(--ease-out-expo),transform .9s var(--ease-out-expo),filter .9s var(--ease-out-expo);
  transition-delay:var(--d,0ms);
}
.reveal-left.in{opacity:1;transform:translateX(0);filter:blur(0)}
.reveal-right{
  opacity:0;transform:translateX(60px);filter:blur(4px);
  transition:opacity .9s var(--ease-out-expo),transform .9s var(--ease-out-expo),filter .9s var(--ease-out-expo);
  transition-delay:var(--d,0ms);
}
.reveal-right.in{opacity:1;transform:translateX(0);filter:blur(0)}

/* Scale reveal */
.reveal-scale{
  opacity:0;transform:scale(.88);filter:blur(6px);
  transition:opacity .9s var(--ease-out-expo),transform .9s var(--ease-out-expo),filter .9s var(--ease-out-expo);
  transition-delay:var(--d,0ms);
}
.reveal-scale.in{opacity:1;transform:scale(1);filter:blur(0)}

/* ═══════════════════════════════════════════════════
   A. SCROLL-DRIVEN — PARALLAX SECTION
   ═══════════════════════════════════════════════════ */
.parallax-section{
  position:relative;overflow:hidden;
  min-height:80vh;
  display:flex;align-items:center;
}
.parallax-bg{
  position:absolute;inset:-20% 0;
  background-size:cover;background-position:center;
  will-change:transform;
  filter:brightness(.45) saturate(1.2);
}
.parallax-content{
  position:relative;z-index:2;
  width:100%;
}

/* A. SCROLL-DRIVEN — Horizontal scroll section */
.hscroll-track{
  position:relative;
  /* height set by JS: panels * 100vh */
}
.hscroll-sticky{
  position:sticky;top:0;
  height:100vh;
  overflow:hidden;
  display:flex;align-items:center;
}
.hscroll-tape{
  display:flex;gap:32px;
  padding:0 48px;
  will-change:transform;
}
.hscroll-panel{
  flex:0 0 min(80vw,520px);
  min-height:55vh;
  position:relative;
  isolation:isolate;
  border-radius:var(--radius);
  border:1px solid var(--stroke);
  background:var(--glass);
  overflow:hidden;
  background-clip:padding-box;
  display:flex;flex-direction:column;
}
.hscroll-panel .glow{z-index:0}
.hscroll-panel > *:not(.glow){
  position:relative;
  z-index:1;
}
.hscroll-panel-media{
  position:relative;
  height:220px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:48px;
  border-bottom:1px solid var(--stroke);
  overflow:hidden;
}
.hscroll-panel-media::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,.08),transparent 46%);
  pointer-events:none;
}
.hscroll-panel img{
  width:100%;height:220px;object-fit:cover;
  border-bottom:1px solid var(--stroke);
}
.hscroll-panel .body{
  padding:28px;
  flex:1;
  display:flex;
  flex-direction:column;
  transform:translateZ(22px);
}
.hscroll-panel h3{font-size:20px;margin-bottom:8px;letter-spacing:-.02em}
.hscroll-panel p{color:var(--muted);line-height:1.7;font-size:14px}
.hscroll-source{
  margin-top:10px;
  color:var(--muted);
  font-size:12px;
}

/* A. SCROLL-DRIVEN — Progress ring */
.scroll-ring-wrap{
  position:fixed;bottom:28px;right:28px;z-index:80;
  width:48px;height:48px;
  opacity:0;transition:opacity .3s ease;
  pointer-events:none;
}
.scroll-ring-wrap.show{opacity:1}
.scroll-ring{
  transform:rotate(-90deg);
}
.scroll-ring circle{
  fill:none;stroke-width:3;
}
.scroll-ring .track{stroke:rgba(255,255,255,.08)}
.scroll-ring .fill{
  stroke:url(#ringGrad);
  stroke-dasharray:126;
  stroke-dashoffset:126;
  stroke-linecap:round;
  transition:stroke-dashoffset .1s linear;
}