/* ============================================================
   Catapulte — animations.css
   FOUC gate, animation-related CSS, keyframes, transitions
   ============================================================ */

/* ── FOUC Gate ──
   html.mcs-ani-init hides [data-animate] elements before GSAP initializes.
   Gate is removed by JS after init or by timeout (CDN failure fallback).
   Pattern adapted from child theme gsap-data-animate.js mcs-ani-init class.
   ──────────────────────────────────────────────────────────────── */

/* Gate active: hide animated elements via opacity */
html.mcs-ani-init [data-animate] {
  opacity: 0;
}

/* clipPath presets need clip-path hiding, not opacity */
html.mcs-ani-init [data-animate="wipe"],
html.mcs-ani-init [data-animate="wipe-up"],
html.mcs-ani-init [data-animate="circle"] {
  opacity: 1; /* override the generic opacity:0 */
}
html.mcs-ani-init [data-animate="wipe"] {
  clip-path: inset(0 100% 0 0);
}
html.mcs-ani-init [data-animate="wipe-up"] {
  clip-path: inset(100% 0 0 0);
}
html.mcs-ani-init [data-animate="circle"] {
  clip-path: circle(0% at 50% 50%);
}

/* Gate released: fade in un-animated elements gracefully */
html:not(.mcs-ani-init) [data-animate]:not([data-animated="true"]) {
  transition: opacity 0.3s ease;
  opacity: 1;
}

/* Already animated by GSAP: GSAP handles visibility/opacity directly */
[data-animated="true"] {
  /* no extra rules needed — GSAP sets final state */
}

/* ── Theme Switch Crossfade Overlay ──
   Hides layout recalculation flicker during theme switch.
   Activated by JS (theme.js), auto-hidden after ScrollTrigger refresh.
   ──────────────────────────────────────────────────────────────── */
/* ── Reduced motion: hide decorative progress bar ── */
@media (prefers-reduced-motion: reduce) {
  .scroll-progress {
    display: none;
  }
}

.theme-crossfade {
  position: fixed;
  inset: 0;
  background: var(--bg, #18181b);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  z-index: 9999;
}
.theme-crossfade.active {
  opacity: 1;
}

/* ── Parallax Depth Effects (DPTH-01, DPTH-02) ──
   Hero parallax background + decorative gradient blobs.
   JS animation in animate.js initParallax().
   ──────────────────────────────────────────────────────────────── */

/* Hero parallax background (JS-driven alternative to ::before pseudo) */
.hero-parallax-bg {
  position: absolute;
  top: -30%;
  left: 50%;
  transform: translateX(-50%);
  width: 900px;
  height: 900px;
  background: radial-gradient(circle, var(--accent-glow) 0%, transparent 70%);
  pointer-events: none;
  will-change: transform;
  z-index: 0;
}

/* Decorative parallax blobs */
.parallax-blob {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(80px);
  opacity: 0;
  z-index: 0;
  will-change: transform;
}
.parallax-blob--1 {
  width: 500px;
  height: 500px;
  background: var(--accent);
}
.parallax-blob--2 {
  width: 400px;
  height: 400px;
  background: var(--pink);
}
.parallax-blob--3 {
  width: 350px;
  height: 350px;
  background: var(--orange);
}

/* Hide parallax on mobile */
@media (max-width: 767px) {
  .parallax-blob,
  .hero-parallax-bg { display: none; }
}
/* Hide parallax for reduced motion */
@media (prefers-reduced-motion: reduce) {
  .parallax-blob,
  .hero-parallax-bg { display: none; }
}

/* ── Reduced motion: card hover + CTA fill-reveal overrides ──
   Cards get subtle border highlight instead of lift/glow.
   CTA fill-reveal pseudo-element is hidden entirely.
   ──────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .service-card:hover,
  .article-card:hover,
  .team-card:hover,
  .value-card:hover,
  .sector-card:hover {
    transform: none;
    box-shadow: 0 0 0 1px var(--accent-dim);
  }
  .hero-cta::before,
  .cta-btn::before {
    display: none;
  }
}

/* ── Safari iOS clip-path Fallback (QA-02) ──
   CTA fill-reveal uses clip-path: inset() on ::before pseudo-elements.
   Older Safari iOS (< 16.2) may not animate clip-path transitions on
   pseudo-elements. Fallback: use opacity transition instead.
   Modern browsers that support clip-path: inset() skip this block entirely.
   ──────────────────────────────────────────────────────────────── */
@supports not (clip-path: inset(0 0 0 0)) {
  .hero-cta::before,
  .cta-btn::before {
    clip-path: none;
    opacity: 0;
    transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .hero-cta:hover::before,
  .cta-btn:hover::before {
    opacity: 1;
  }
}

/* ── Masked Line Reveal System (Phase 9) ── */
.mask-line {
  overflow: clip;
  position: relative;
}
.mask-line__inner {
  will-change: transform;
}

/* ── Accent Color Sweep ── */
.hero-accent-sweep {
  position: relative;
  display: inline-block;
}
.hero-accent-sweep__base {
  /* Base text inherits color from parent */
}
.hero-accent-sweep__overlay {
  position: absolute;
  left: 0;
  top: 0;
  color: var(--accent);
  clip-path: inset(0 100% 0 0);
  pointer-events: none;
}

/* ── Custom Cursor (Phase 9) ── */
.custom-cursor {
  pointer-events: none;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  mix-blend-mode: difference;
}
.cursor-dot {
  position: fixed;
  top: -4px;
  left: -4px;
  width: 8px;
  height: 8px;
  background: var(--text);
  border-radius: 50%;
  pointer-events: none;
}
.cursor-ring {
  position: fixed;
  top: -20px;
  left: -20px;
  width: 40px;
  height: 40px;
  border: 1.5px solid var(--text);
  border-radius: 50%;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cursor-label {
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text);
  opacity: 0;
  white-space: nowrap;
}

/* Hide cursor on mobile/tablet and reduced motion */
@media (max-width: 990px), (prefers-reduced-motion: reduce) {
  .custom-cursor { display: none; }
  body { cursor: auto !important; }
}

/* Desktop: hide native cursor when custom cursor active */
@media (min-width: 991px) {
  body { cursor: none; }
}

/* Reduced motion: bypass mask reveals */
@media (prefers-reduced-motion: reduce) {
  .mask-line__inner {
    transform: none !important;
  }
  .hero-accent-sweep__overlay {
    clip-path: inset(0 0% 0 0) !important;
  }
}