/* ─────────────────────────────────────────────────────────────────────────
   KWBA — Parallax / scroll-effects layer v2
   Drop with /assets/parallax.js
   Requires CSS vars: --gold, --bg, --border
   Improvements over v1:
   - Modern motion timing (12-20px translate, cubic-bezier)
   - Watermark uses Inter Tight italic (matches new design system)
   - Layer count reduced from 5 → 4 (perf on iOS/low-end Android)
   - All gold rgba values use the deeper light-bg tone (#b08a2e ≈ rgb(176,138,46))
   ───────────────────────────────────────────────────────────────────────── */

/* Global parallax background — fixed orbs behind everything */
.bg-parallax{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden;contain:strict}
.bg-parallax .bg-layer{position:absolute;will-change:transform;border-radius:50%}
.bg-parallax .bg-l1{
  top:-12%; right:-10%; width:820px; height:820px;
  background:radial-gradient(circle,rgba(176,138,46,0.10) 0%,transparent 62%);
  filter:blur(50px);
}
.bg-parallax .bg-l2{
  top:34%; left:-18%; width:660px; height:660px;
  background:radial-gradient(circle,rgba(176,138,46,0.07) 0%,transparent 65%);
  filter:blur(60px);
}
.bg-parallax .bg-l3{
  top:120%; right:-8%; width:780px; height:780px;
  background:radial-gradient(circle,rgba(176,138,46,0.08) 0%,transparent 62%);
  filter:blur(50px);
}
.bg-parallax .bg-l4{
  top:240%; left:8%; width:580px; height:580px;
  background:radial-gradient(circle,rgba(176,138,46,0.06) 0%,transparent 68%);
  filter:blur(60px);
}

/* Faint dotted grid overlay (very subtle, mid-vignette) */
.bg-grid{
  position:fixed; inset:0; pointer-events:none; z-index:1; opacity:.45;
  background-image:
    linear-gradient(rgba(176,138,46,0.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(176,138,46,0.06) 1px,transparent 1px);
  background-size:96px 96px;
  -webkit-mask-image:radial-gradient(ellipse at center,#000 25%,transparent 72%);
          mask-image:radial-gradient(ellipse at center,#000 25%,transparent 72%);
}

/* Make sure foreground content sits above parallax */
nav, main, body > section, body > div.section, body > .hero, footer{position:relative; z-index:5}

/* Top scroll-progress indicator */
.scroll-progress{
  position:fixed; top:0; left:0; height:2px;
  background:linear-gradient(90deg,transparent,var(--gold,#b08a2e),var(--gold,#b08a2e) 80%,transparent);
  width:0%; z-index:200;
  transition:width .08s linear;
  box-shadow:0 0 8px rgba(176,138,46,0.4);
}

/* Floating italic watermark words — slowest parallax speed
   Inter Tight italic matches the new design system (was Cormorant before). */
.watermark{
  position:absolute;
  font-family:'Inter Tight', 'Inter', -apple-system, system-ui, sans-serif;
  font-style:italic; font-weight:700;
  font-size:clamp(140px,24vw,360px);
  color:rgba(176,138,46,0.045);
  letter-spacing:-.045em;
  pointer-events:none;
  line-height:.85;
  white-space:nowrap;
  will-change:transform;
  z-index:0;
  user-select:none;
}
.wm-1{top:120%; right:-12%}
.wm-2{top:230%; left:-8%}
.wm-3{top:340%; right:-10%}
.wm-4{top:460%; left:-12%}

/* Reveal-on-scroll — Linear-style: small translate, fast ease */
.reveal-item{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .7s cubic-bezier(0.4, 0, 0.2, 1),
             transform .7s cubic-bezier(0.4, 0, 0.2, 1);
}
.reveal-item.in{opacity:1; transform:translateY(0)}
.reveal-item.delay-1{transition-delay:60ms}
.reveal-item.delay-2{transition-delay:120ms}
.reveal-item.delay-3{transition-delay:180ms}
.reveal-item.delay-4{transition-delay:240ms}
.reveal-item.delay-5{transition-delay:300ms}

/* Slabel underline grows when section enters view */
.slabel::before{transition:width .6s ease}
.reveal .slabel::before{width:60px !important}

/* Respect reduced motion + Save-Data */
@media (prefers-reduced-motion: reduce){
  .bg-parallax .bg-layer, .watermark, [data-speed]{transform:none !important}
  .reveal-item{opacity:1 !important; transform:none !important; transition:none !important}
  .scroll-progress{transition:none}
}

/* Hide decorative parallax on small screens — perf + clarity */
@media (max-width:900px){
  .watermark{display:none}
  .bg-grid{opacity:.25}
  .bg-parallax .bg-layer{filter:blur(40px); opacity:.7}
}

/* Card hover glow — RAF-throttled in JS; uses CSS custom props */
.svc:hover, .tier:hover, .insight:hover, .testimonial:hover, .pcard:hover{
  background-image:radial-gradient(circle 200px at var(--mx,50%) var(--my,50%),
                                   rgba(176,138,46,0.04), transparent 60%);
}