/* =========================================================
   CERTIFICATION GURU — ANIMATIONS (decorative motion layer)
   ---------------------------------------------------------
   Separate, toggleable module. Safe to dequeue entirely:
   nothing here is required for layout or functionality.
   Rules:
   - transform/opacity only (GPU-cheap, no layout thrash)
   - max 600ms, natural cubic-bezier easing
   - everything disabled under prefers-reduced-motion
   ========================================================= */

/* ── 1. Scroll reveal ──
   .cg-reveal is added by animations.js ONLY to elements below
   the fold, so above-fold content never flashes or hurts LCP.
   --reveal-delay is set inline per card for grid stagger.   */
.cg-reveal {
  opacity: 0;
  transform: translateY(18px);
}
.cg-reveal.cg-in-view {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 480ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 480ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--reveal-delay, 0ms);
}

/* ── 2. Pressed states — tactile feedback on tap/click ── */
.btn-cta:active,
.btn-outline-blue:active,
.btn-outline-hero:active,
.btn-outline-white:active,
.tc-cta-btn:active,
.filter-chip:active,
.sort-pill:active,
.country-tab:active,
.popular-tag:active,
.mobile-nav-tab:active {
  transform: scale(0.97);
  transition-duration: 80ms;
}
.domain-card:active,
.trending-card:active,
.blog-card:active,
.cg-cert-card:active,
.country-card:active,
.cert-related-card:active {
  transform: scale(0.985);
  transition-duration: 80ms;
}

/* ── 3. Animated link underline — article body links ── */
.cert-body .entry-content a:not(.btn),
.single-post .entry-content a:not(.btn) {
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0% 1.5px;
  transition: background-size 250ms cubic-bezier(0.22, 1, 0.36, 1);
  padding-bottom: 1px;
}
.cert-body .entry-content a:not(.btn):hover,
.cert-body .entry-content a:not(.btn):focus-visible,
.single-post .entry-content a:not(.btn):hover,
.single-post .entry-content a:not(.btn):focus-visible {
  background-size: 100% 1.5px;
}

/* ── 4. Hero ambient gradient shift — desktop only, GPU-cheap ──
   A soft radial glow that drifts with transform (composited).
   Hidden on mobile: saves paint on mid-range Android.        */
@media (min-width: 992px) {
  .hero-section::after {
    content: '';
    position: absolute;
    top: -30%;
    right: -15%;
    width: 70%;
    height: 120%;
    background: radial-gradient(ellipse at center,
      rgba(59, 130, 246, 0.14) 0%,
      rgba(249, 115, 22, 0.05) 45%,
      transparent 70%);
    pointer-events: none;
    will-change: transform;
    animation: cg-hero-drift 16s ease-in-out infinite alternate;
  }
  @keyframes cg-hero-drift {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(-6%, 4%, 0) scale(1.08); }
  }
}

/* ── 5. FAQ icon rotation easing (open handled in animations.js) ── */
.faq-details .faq-icon { transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1), background 200ms ease; }
.faq-answer { overflow: hidden; }

/* ── 6. TOC active-state slide ── */
.sidebar-toc-item { transition: color 200ms ease, border-color 200ms ease, background 200ms ease, padding-left 200ms cubic-bezier(0.22, 1, 0.36, 1); }
.sidebar-toc-item.active { padding-left: 18px; }

/* ── 7. Reduced motion — full opt-out, content stays visible ── */
@media (prefers-reduced-motion: reduce) {
  .cg-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hero-section::after { animation: none !important; }
  .btn-cta:active, .domain-card:active, .trending-card:active,
  .blog-card:active, .cg-cert-card:active, .country-card:active,
  .cert-related-card:active, .tc-cta-btn:active, .filter-chip:active,
  .sort-pill:active, .country-tab:active, .popular-tag:active,
  .mobile-nav-tab:active { transform: none !important; }
  .faq-details .faq-icon, .sidebar-toc-item,
  .cert-body .entry-content a:not(.btn),
  .single-post .entry-content a:not(.btn) { transition: none !important; }
}