/* ============================================================
   SMARTIE — Advanced Effects Layer (v1)
   Additive only. Safe to remove by deleting this file + effects.js.
   All motion respects prefers-reduced-motion.
   ============================================================ */

/* ---------- 1. Glass navigation (frosted on scroll) ---------- */
.nav{transition:background .35s ease,box-shadow .35s ease,backdrop-filter .35s ease,border-color .35s ease}
.nav.glass{
  background:color-mix(in srgb,var(--paper,#fff) 72%,transparent);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  backdrop-filter:saturate(180%) blur(18px);
  border-bottom:1px solid color-mix(in srgb,var(--line,#DDE2E7) 70%,transparent);
  box-shadow:0 10px 30px -18px rgba(20,24,29,.35)
}

/* ---------- 2. 3D tilt cards with glare ---------- */
.tilt{transform-style:preserve-3d;transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(0);transition:transform .22s cubic-bezier(.22,1,.36,1),box-shadow .45s cubic-bezier(.22,1,.36,1);will-change:transform;position:relative}
.tilt:hover{box-shadow:0 30px 60px -28px rgba(20,24,29,.45)}
.tilt>.glare{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(420px circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.22),transparent 60%);opacity:0;transition:opacity .35s ease;mix-blend-mode:soft-light;z-index:3}
.tilt:hover>.glare{opacity:1}

/* ---------- 3. Magnetic buttons ---------- */
.btn{transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s ease,background .25s ease,color .25s ease}
.btn.mag{transform:translate(var(--mx,0),var(--my,0))}

/* ---------- 4. Animated gradient border on primary CTAs ---------- */
.btn-signal,.cta-btn{position:relative;isolation:isolate;overflow:hidden}
.btn-signal::before,.cta-btn::before{
  content:"";position:absolute;inset:-2px;z-index:-1;border-radius:inherit;
  background:conic-gradient(from var(--ang,0deg),var(--signal,#E23A24),#ff8a5c,#ffd6c9,var(--signal,#E23A24));
  opacity:0;transition:opacity .35s ease
}
.btn-signal:hover::before,.cta-btn:hover::before{opacity:.9;animation:spin-border 2.2s linear infinite}
.btn-signal::after,.cta-btn::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:inherit}
@property --ang{syntax:'<angle>';initial-value:0deg;inherits:false}
@keyframes spin-border{to{--ang:360deg}}

/* ---------- 5. Cursor spotlight on dark sections ---------- */
.dark-sec{position:relative;overflow:hidden}
.dark-sec::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(600px circle at var(--sx,50%) var(--sy,50%),rgba(226,58,36,.18),transparent 55%);
  opacity:0;transition:opacity .5s ease
}
.dark-sec:hover::after{opacity:1}
.dark-sec>.wrap{position:relative;z-index:1}

/* ---------- 6. Staggered reveal (siblings cascade) ---------- */
.rv{transition-delay:var(--rvd,0ms)}
.rv.in .plate img,.rv.in .team-photo img{clip-path:inset(0 0 0 0);}
.plate img,.team-photo img{clip-path:inset(0 0 100% 0);transition:clip-path .9s cubic-bezier(.77,0,.18,1) .1s}
.rv:not(.in) .plate img,.rv:not(.in) .team-photo img{clip-path:inset(0 0 100% 0)}

/* ---------- 7. Grid focus — hovering one card dims the rest ---------- */
.grid:has(.card:hover) .card:not(:hover){opacity:.62;filter:saturate(.7);transition:opacity .35s ease,filter .35s ease}
.grid .card{transition:opacity .35s ease,filter .35s ease,transform .25s ease,box-shadow .35s ease}

/* ---------- 8. Hero headline shimmer underline ---------- */
.hero h1 .shimmer,.page-hero h1 .shimmer{
  background:linear-gradient(90deg,currentColor 0%,currentColor 40%,var(--signal,#E23A24) 50%,currentColor 60%,currentColor 100%);
  background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:shimmer 5.5s ease-in-out infinite
}
@keyframes shimmer{0%,100%{background-position:100% 0}50%{background-position:0 0}}

/* ---------- 9. Parallax hero background ---------- */
.page-hero .bg{will-change:transform;transform:translate3d(0,var(--py,0px),0) scale(1.08)}

/* ---------- 10. Subtle floating orbs behind hero (depth) ---------- */
.hero-orbs{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.hero-orbs span{position:absolute;border-radius:50%;filter:blur(60px);opacity:.28;animation:orb 14s ease-in-out infinite}
.hero-orbs span:nth-child(1){width:380px;height:380px;left:-8%;top:10%;background:var(--signal,#E23A24)}
.hero-orbs span:nth-child(2){width:300px;height:300px;right:-6%;top:30%;background:#ff9a6c;animation-delay:-5s}
.hero-orbs span:nth-child(3){width:260px;height:260px;left:40%;bottom:-10%;background:#ffd0bf;animation-delay:-9s}
@keyframes orb{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(30px,-40px) scale(1.12)}}

/* ---------- 11. Smooth link underline draw ---------- */
.nav a:not(.btn):not(.cta-btn){position:relative}
.nav a:not(.btn):not(.cta-btn)::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--signal,#E23A24);transform:scaleX(0);transform-origin:right;transition:transform .35s cubic-bezier(.65,.05,.36,1)}
.nav a:not(.btn):not(.cta-btn):hover::after{transform:scaleX(1);transform-origin:left}

/* ---------- 12. Section divider beams ---------- */
.sec-head::before{content:"";display:block;width:56px;height:3px;border-radius:2px;margin-bottom:14px;background:linear-gradient(90deg,var(--signal,#E23A24),transparent);transform:scaleX(0);transform-origin:left;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.sec-head.in::before,.rv.in .sec-head::before,.sec-head.rv.in::before{transform:scaleX(1)}

/* ---------- 13. Image hover zoom ---------- */
.plate{overflow:hidden}
.plate img{transition:transform .8s cubic-bezier(.2,.8,.2,1),clip-path .9s cubic-bezier(.77,0,.18,1) .1s}
.plate:hover img{transform:scale(1.06)}

/* ---------- Reduced motion & touch fallbacks ---------- */
@media (prefers-reduced-motion:reduce){
  .tilt,.btn.mag{transform:none!important}
  .tilt>.glare,.dark-sec::after,.hero-orbs{display:none}
  .btn-signal:hover::before,.cta-btn:hover::before{animation:none}
  .hero h1 .shimmer,.page-hero h1 .shimmer{animation:none;color:inherit;background:none}
  .plate img,.team-photo img{clip-path:none!important}
  .page-hero .bg{transform:none}
  .rv{transition-delay:0ms!important}
}
@media (pointer:coarse){
  .tilt{transform:none!important}
  .tilt>.glare{display:none}
  .dark-sec::after{display:none}
}