/* =========================================================
   SCROLL REVEAL + INTERACTION ANIMATIONS
   Lightweight, Framer-style fade/slide-in on scroll,
   plus a few hover/interaction touches.
   Driven by IntersectionObserver in js/animations.js
========================================================= */

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-up, .reveal-down, .reveal-left, .reveal-right, .reveal-scale {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* Base hidden states */
.reveal-up, .reveal-down, .reveal-left, .reveal-right, .reveal-scale, .reveal {
  opacity: 0;
  will-change: transform, opacity;
  transition: opacity .8s cubic-bezier(.22,.61,.36,1), transform .8s cubic-bezier(.22,.61,.36,1);
}

.reveal-up{     transform: translateY(36px); }
.reveal-down{   transform: translateY(-28px); }
.reveal-left{   transform: translateX(-42px); }
.reveal-right{  transform: translateX(42px); }
.reveal-scale{  transform: scale(.92); }
.reveal{        transform: translateY(18px); }

/* Visible state, toggled by JS via IntersectionObserver */
.reveal-up.in-view,
.reveal-down.in-view,
.reveal-left.in-view,
.reveal-right.in-view,
.reveal-scale.in-view,
.reveal.in-view {
  opacity: 1;
  transform: none;
}

/* Stagger children of a group — apply .reveal-group to the parent
   and .reveal-item to each child; JS adds the delay inline via
   the data-stagger attribute, this just sets the transition base */
.reveal-item{
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
  will-change: transform, opacity;
}
.reveal-item.in-view{
  opacity: 1;
  transform: none;
}

/* =========================================================
   INTERACTION / HOVER POLISH
========================================================= */

/* Smooth global link/button easing */
a, button { transition: color .25s ease, background-color .25s ease, border-color .25s ease, transform .25s ease, box-shadow .25s ease; }

/* Magnetic-feel button press */
.btn-cream:active, .btn-outline-cream:active { transform: scale(.96); }

/* Service cards: lift + icon nudge on hover (icon anim added, base card hover already exists) */
.service-card .service-icon{ transition: transform .35s cubic-bezier(.22,.61,.36,1); }
.service-card:hover .service-icon{ transform: translateY(-4px) scale(1.12) rotate(-4deg); }

/* Process items: icon ring pulse on hover */
.process-icon{ transition: transform .3s ease, box-shadow .3s ease; }
.process-item:hover .process-icon{ transform: scale(1.12); box-shadow: 0 0 0 6px rgba(179,40,45,.12); }

/* Hero portrait: floating hover effect removed per request */
.hero-giant.reveal-scale{ transition-delay: .1s; }

/* Certificate + blog cards: slightly stronger lift already present; add image zoom */
.cert-card img, .blog-card img{ transition: transform .5s ease; }
.cert-card:hover img{ transform: scale(1.05); }
.blog-card:hover img{ transform: scale(1.08); }

/* Nav underline already animates; add slight brand hover */
.navbar-brand{ transition: letter-spacing .3s ease, color .3s ease; }
.navbar-brand:hover{ letter-spacing: 3px; color: var(--accent-red); }

/* Stat counters: subtle pop when revealed */
.stat-item{ transition: transform .3s ease; }
.stat-item:hover{ transform: translateY(-4px); }

/* Accordion buttons: smoother expand icon rotation already default in bootstrap, add slight bg transition */
.accordion-button{ transition: background-color .3s ease, color .3s ease; }

/* Social icons: pop */
.social-links a{ transition: all .3s cubic-bezier(.34,1.56,.64,1); }
.social-links a:hover{ transform: translateY(-4px) scale(1.08); }

/* Scroll-to-top button breathing */
#scrollTopBtn{ transition: transform .25s ease, background-color .25s ease; }
#scrollTopBtn:hover{ transform: translateY(-3px); }

/* Article nav links */
.article-nav-link{ transition: all .3s cubic-bezier(.34,1.56,.64,1); }
.article-nav-link:hover{ transform: translateY(-3px); }