/* ==============================
   Animations & Micro-interactions
   ============================== */

/* === Reveal on scroll ===
   IMPORTANT: default state is VISIBLE so missing JS / failed observer
   never leaves content invisible. JS adds .pending only to off-screen
   elements; IntersectionObserver swaps .pending → .in when visible. */
[data-reveal]{opacity:1;transform:none;transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1)}
[data-reveal].pending{opacity:0;transform:translateY(28px)}
[data-reveal].pending.in{opacity:1;transform:translateY(0)}
[data-reveal][data-delay="100"]{transition-delay:.10s}
[data-reveal][data-delay="200"]{transition-delay:.20s}
[data-reveal][data-delay="300"]{transition-delay:.30s}
[data-reveal][data-delay="400"]{transition-delay:.40s}
[data-reveal][data-delay="500"]{transition-delay:.50s}

/* Reveal variants (only apply while pending) */
[data-reveal="left"].pending{transform:translateX(-40px)}
[data-reveal="left"].pending.in{transform:translateX(0)}
[data-reveal="right"].pending{transform:translateX(40px)}
[data-reveal="right"].pending.in{transform:translateX(0)}
[data-reveal="zoom"].pending{transform:scale(.94)}
[data-reveal="zoom"].pending.in{transform:scale(1)}

/* === Page entrance === */
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes scaleIn{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}
@keyframes slideDown{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(31,122,252,.4)}50%{box-shadow:0 0 0 12px rgba(31,122,252,0)}}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
@keyframes wiggle{0%,100%{transform:rotate(0deg)}25%{transform:rotate(-3deg)}75%{transform:rotate(3deg)}}

.anim-fade-up{animation:fadeUp .7s cubic-bezier(.2,.8,.2,1) both}
.anim-fade-in{animation:fadeIn .6s ease both}
.anim-scale-in{animation:scaleIn .5s cubic-bezier(.2,.8,.2,1) both}
.anim-float{animation:float 3.5s ease-in-out infinite}
.anim-pulse{animation:pulse 2s ease-in-out infinite}

/* === Hero entrance — fires on load === */
.hero-bullet,.hero h1,.hero .lead,.hero-cta,.hero-visual{animation:fadeUp .8s cubic-bezier(.2,.8,.2,1) both}
.hero h1{animation-delay:.05s}
.hero .lead{animation-delay:.15s}
.hero-cta{animation-delay:.25s}
.hero-visual{animation-delay:.30s;animation-name:scaleIn;animation-timing-function:cubic-bezier(.2,.8,.2,1)}

/* === Submenu animation handled in layout.css === */

/* === Card hover === */
.card,.service,.chip,.btn,.feature-card{will-change:transform}

/* === Button micro-interaction === */
.btn{position:relative;overflow:hidden}
.btn::after{
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.35),transparent 60%);
  opacity:0;transition:opacity .35s;pointer-events:none;
}
.btn:hover::after{opacity:1}
.btn:active{transform:scale(.97)}

/* === Service card subtle accent on hover === */
.service{position:relative;overflow:hidden}
.service::before{
  content:'';position:absolute;left:0;top:0;width:100%;height:3px;
  background:linear-gradient(90deg,var(--brand-500),var(--brand-300));
  transform:scaleX(0);transform-origin:left;
  transition:transform .35s cubic-bezier(.2,.8,.2,1);
}
.service:hover::before{transform:scaleX(1)}

/* === Chip glow on hover === */
.chip{position:relative}
.chip:hover .chip-icon{transform:scale(1.08);background:var(--brand-100)}
.chip-icon{transition:transform .25s cubic-bezier(.2,.8,.2,1),background var(--transition)}

/* === Feature card image scale === */
.feature-card{position:relative;overflow:hidden;background-size:cover;background-position:center;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.feature-card::after{
  content:'';position:absolute;inset:0;background:inherit;background-size:cover;
  transition:transform .8s cubic-bezier(.2,.8,.2,1);z-index:0;
}
.feature-card:hover{transform:translateY(-4px)}

/* === Stat counter === */
.stat-num{display:inline-block;background:linear-gradient(180deg,var(--brand-600),var(--brand-500));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* === FAB pulse === */
.fab a:not(.alt){animation:pulse 2.4s ease-in-out infinite}

/* === Header brand === */
.brand img{transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.brand:hover img{transform:scale(1.04)}

/* === Aside nav slide === */
.aside-nav li a{position:relative}
.aside-nav li a::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--brand-500);transform:scaleY(0);transform-origin:center;
  transition:transform .25s cubic-bezier(.2,.8,.2,1);
}
.aside-nav li.active a::before,
.aside-nav li:hover a::before{transform:scaleY(1)}

/* === Mobile drawer slide === */
.mb-drawer{transition:right .35s cubic-bezier(.2,.8,.2,1)}

/* === Reduced motion === */
@media (prefers-reduced-motion: reduce){
  [data-reveal]{opacity:1;transform:none;transition:none}
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0!important;transition-duration:.01ms!important}
}