/* =========================================================
  DDESIREMEDIA MOTION LAYER
   Scroll reveals, cursor, page transitions, magnetic buttons.
   All effects are inert under prefers-reduced-motion.
========================================================= */

/* ---------- SCROLL REVEAL ---------- */
.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .8s cubic-bezier(.16,.84,.44,1), transform .8s cubic-bezier(.16,.84,.44,1);
  will-change:opacity, transform;
}
.reveal.in{ opacity:1; transform:translateY(0); }
.reveal-scale{ opacity:0; transform:scale(0.94); transition:opacity .7s cubic-bezier(.16,.84,.44,1), transform .7s cubic-bezier(.16,.84,.44,1); }
.reveal-scale.in{ opacity:1; transform:scale(1); }

/* ---------- ANIMATED UNDERLINE for eyebrow dot pulse ---------- */
.eyebrow .dot{ position:relative; }
.eyebrow .dot::after{
  content:''; position:absolute; inset:-4px; border-radius:50%;
  border:1px solid currentColor; opacity:0; animation:eyebrowPulse 2.4s ease-out infinite;
}
@keyframes eyebrowPulse{
  0%{ opacity:0.55; transform:scale(0.6); }
  70%{ opacity:0; transform:scale(1.8); }
  100%{ opacity:0; transform:scale(1.8); }
}

/* ---------- HERO ENTRANCE ---------- */
.hero-in{ opacity:0; transform:translateY(22px); animation:heroUp .9s cubic-bezier(.16,.84,.44,1) forwards; }
@keyframes heroUp{ to{ opacity:1; transform:translateY(0); } }

/* ---------- HERO AMBIENT GLOW ---------- */
#hero::before{ animation:heroGlow 10s ease-in-out infinite alternate; }
@keyframes heroGlow{
  0%{ opacity:0.7; transform:scale(1); }
  100%{ opacity:1; transform:scale(1.08); }
}

/* ---------- MARQUEE: pause on hover ---------- */
.ticker:hover .ticker-track,
.clients-marquee-wrap:hover .clients-marquee{
  animation-play-state:paused;
}

/* ---------- MAGNETIC BUTTONS ---------- */
.btn{ transition: background .25s ease, color .25s ease, transform .18s cubic-bezier(.16,.84,.44,1), box-shadow .25s ease; }
.btn:hover{ box-shadow:0 10px 26px rgba(0,0,0,0.18); }

/* ---------- CARD LIFT ---------- */
.case-card, .testi-card, .work-card, .a-card, .stat-cell, .sub-service-cell{
  transition: transform .35s cubic-bezier(.16,.84,.44,1), box-shadow .35s ease;
}
.testi-card:hover{ transform:translateY(-4px); box-shadow:0 18px 40px rgba(0,0,0,0.28); }
.stat-cell:hover, .sub-service-cell:hover{ transform:translateY(-3px); }

/* ---------- SERVICE CARD MOTION ---------- */
.service-card{
  position:relative;
  transition:transform .42s cubic-bezier(.16,.84,.44,1), box-shadow .42s ease, border-color .3s ease;
}
.service-card::after{
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  box-shadow:inset 0 0 0 1px var(--card-accent, transparent);
  opacity:0;
  pointer-events:none;
  transition:opacity .3s ease;
}
.service-card.reveal.in:hover{
  transform:translateY(-6px);
  box-shadow:0 18px 36px rgba(17,24,39,0.13);
}
.service-card.reveal.in:hover::after{ opacity:.35; }
.service-card-bar{
  transform-origin:left center;
  transition:transform .5s cubic-bezier(.16,.84,.44,1);
}
.service-card:hover .service-card-bar{ transform:scaleX(.72); }
.service-card-icon{
  transition:transform .4s cubic-bezier(.16,.84,.44,1);
}
.service-card:hover .service-card-icon{ transform:translateY(-3px) rotate(-4deg); }

/* ---------- CUSTOM CURSOR (desktop, pointer:fine only) ---------- */
#cursorDot{
  position:fixed; top:0; left:0; width:9px; height:9px; border-radius:50%;
  background:var(--gold, #2a9d8f); pointer-events:none; z-index:10001;
  transform:translate(-50%,-50%); mix-blend-mode:difference;
  transition:width .22s cubic-bezier(.16,.84,.44,1), height .22s cubic-bezier(.16,.84,.44,1), background .22s ease, opacity .3s ease;
  opacity:0;
}
#cursorDot.ready{ opacity:1; }
#cursorDot.hover{ width:38px; height:38px; background:var(--cue, #e76f51); }
@media (pointer: coarse), (hover: none){ #cursorDot{ display:none !important; } }

/* ---------- PAGE TRANSITION WIPE ---------- */
#pageTransition{
  position:fixed; inset:0; background:var(--ink, #183b56); z-index:10000;
  transform:scaleY(1); transform-origin:top;
  transition:transform .65s cubic-bezier(.76,0,.24,1);
  pointer-events:none;
}
body.pt-ready #pageTransition{ transform:scaleY(0); transform-origin:bottom; }
#pageTransition.leaving{
  transform:scaleY(1) !important; transform-origin:top !important;
  transition:transform .55s cubic-bezier(.76,0,.24,1);
  pointer-events:all;
}

/* ---------- COUNTER TARGETS get a subtle pop when they finish ---------- */
[data-counted="true"]{ animation:countPop .3s ease; }
@keyframes countPop{ 0%{ transform:scale(1);} 40%{ transform:scale(1.08);} 100%{ transform:scale(1);} }

/* ---------- REDUCED MOTION: kill everything above ---------- */
@media (prefers-reduced-motion: reduce){
  .reveal, .reveal-scale{ opacity:1 !important; transform:none !important; transition:none !important; }
  .hero-in{ opacity:1 !important; transform:none !important; animation:none !important; }
  #hero::before{ animation:none !important; }
  .eyebrow .dot::after{ animation:none !important; display:none; }
  #cursorDot{ display:none !important; }
  #pageTransition{ display:none !important; }
  .case-card, .testi-card, .work-card, .a-card, .stat-cell, .sub-service-cell, .service-card, .service-card-bar, .service-card-icon{ transition:none !important; }
  .service-card.reveal.in:hover{ transform:none !important; }
  .service-card::after{ display:none; }
}