/* ===== QDOT SHARED DEPTH & MOTION KIT ===== */
/* Linked on remi / about / insights / category pages. Index has its own inline depth. */

/* Scroll progress bar */
.scroll-progress{position:fixed;top:0;left:0;height:2px;width:0;background:var(--copper);z-index:400;transition:width .1s linear}

/* Glass nav on scroll */
.nav{transition:background .4s var(--ease),box-shadow .4s var(--ease)}
.nav.scrolled{background:rgba(0,14,48,0.72);backdrop-filter:blur(18px) saturate(1.2);-webkit-backdrop-filter:blur(18px) saturate(1.2);box-shadow:0 1px 0 var(--rule-copper)}

/* Hero ambient gradient mesh (injected as .depth-mesh) */
.hero,.page-hero{position:relative}
.depth-mesh{position:absolute;inset:-10%;z-index:0;pointer-events:none;
  background:
    radial-gradient(40% 50% at 20% 25%,rgba(54,113,198,0.10),transparent 70%),
    radial-gradient(35% 45% at 80% 30%,rgba(192,133,82,0.10),transparent 70%),
    radial-gradient(50% 60% at 60% 85%,rgba(27,42,74,0.45),transparent 70%),
    radial-gradient(45% 55% at 15% 80%,rgba(192,133,82,0.05),transparent 70%);
  background-size:200% 200%;animation:meshDrift 30s ease-in-out infinite alternate;filter:saturate(1.1)}
@keyframes meshDrift{0%{background-position:0% 0%,100% 0%,50% 100%,0% 100%}100%{background-position:20% 15%,75% 20%,60% 80%,15% 85%}}
.hero>.wrap,.page-hero>.wrap,.hero>.hero-content,.page-hero>.hero-content{position:relative;z-index:1}

/* Scroll reveals (base + directional) */
.reveal,.reveal-left,.reveal-right,.reveal-scale{opacity:0;transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal{transform:translateY(24px)}
.reveal-left{transform:translateX(-28px)}
.reveal-right{transform:translateX(28px)}
.reveal-scale{transform:scale(.96)}
.reveal.in,.reveal-left.in,.reveal-right.in,.reveal-scale.in{opacity:1;transform:none}
.reveal-delay-1{transition-delay:.1s}.reveal-delay-2{transition-delay:.2s}.reveal-delay-3{transition-delay:.3s}

/* Card hover lift across page card types */
.intel-card,.outcome-card,.pricing-card,.bt-card,.tl-card,.pos-card,.engine-card,.output-card,.cap-card,.step-card,.fit-row{
  transition:transform .4s var(--ease),background .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease)}
.intel-card:hover,.outcome-card:hover,.pricing-card:hover,.bt-card:hover,.tl-card:hover,.pos-card:hover,.engine-card:hover,.output-card:hover,.cap-card:hover{
  transform:translateY(-6px);background:rgba(192,133,82,0.05);box-shadow:0 18px 50px -20px rgba(0,0,0,0.55)}

/* Buttons */
.btn,.btn--primary,.btn--ghost,.pricing-cta,.nav-cta,.li-link{transition:transform .3s var(--ease),background .3s var(--ease),color .3s var(--ease),box-shadow .3s var(--ease)}
.btn--primary:hover,.btn:hover{transform:translateY(-2px);box-shadow:0 12px 30px -12px rgba(192,133,82,0.6)}

/* 3D tilt */
.tilt{transform-style:preserve-3d;will-change:transform;transition:transform .25s var(--ease),box-shadow .25s var(--ease)}

/* Count-up tabular */
[data-count]{font-variant-numeric:tabular-nums}

/* Smooth scroll */
html{scroll-behavior:smooth}

/* Mobile: lighten heavy effects */
@media(max-width:768px){
  .depth-mesh{opacity:.7}
  .nav.scrolled{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
}

/* Reduced motion */
@media(prefers-reduced-motion:reduce){
  .depth-mesh{animation:none!important}
  .reveal,.reveal-left,.reveal-right,.reveal-scale{opacity:1!important;transform:none!important;transition:none!important}
  .tilt{transform:none!important}
  html{scroll-behavior:auto}
  .scroll-progress{display:none}
}

/* Failsafe: if JS disabled, never hide content */

/* ===== EXCLUSIVE EXPERIENCE: spotlight / page transitions / entry intro ===== */
/* #4 Cursor spotlight (desktop only, added by JS) */
.cursor-spot{position:fixed;top:0;left:0;width:520px;height:520px;border-radius:50%;pointer-events:none;z-index:55;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(192,133,82,0.07),transparent 62%);opacity:0;transition:opacity .4s ease;mix-blend-mode:screen}

/* #5 Page transition curtain */
.pt-curtain{position:fixed;inset:0;background:var(--navy-deep,#0F1B33);z-index:350;opacity:0;pointer-events:none;transition:opacity .45s var(--ease)}
.pt-curtain.show{opacity:1;pointer-events:all}

/* #6 Entry intro overlay */
.qdot-intro{position:fixed;inset:0;background:var(--navy-deep,#0F1B33);z-index:500;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:22px;transition:opacity .8s ease}
.qdot-intro.done{opacity:0;pointer-events:none}
.qdot-intro .qi-mark{font-family:var(--serif,'Cormorant Garamond',serif);font-weight:300;font-size:clamp(40px,7vw,84px);color:#fff;letter-spacing:.02em;opacity:0;transform:translateY(12px);animation:qiRise .9s var(--ease,cubic-bezier(.22,1,.36,1)) .15s forwards}
.qdot-intro .qi-mark em{font-style:italic;color:var(--copper,#C08552)}
.qdot-intro .qi-line{width:0;height:1px;background:var(--copper,#C08552);animation:qiLine 1s var(--ease,cubic-bezier(.22,1,.36,1)) .5s forwards}
.qdot-intro .qi-sub{font-family:var(--display,'Barlow Condensed',sans-serif);font-size:13px;font-weight:600;letter-spacing:.32em;text-transform:uppercase;color:rgba(255,255,255,.65);opacity:0;animation:qiFade .8s ease .9s forwards}
@keyframes qiRise{to{opacity:1;transform:none}}
@keyframes qiLine{to{width:220px}}
@keyframes qiFade{to{opacity:1}}

@media(prefers-reduced-motion:reduce){
  .cursor-spot{display:none}
  .pt-curtain{transition:none}
  .qdot-intro .qi-mark,.qdot-intro .qi-line,.qdot-intro .qi-sub{animation:none;opacity:1;transform:none;width:220px}
}