/* ============================================================
   Animations — Apple & Framer Motion Design System
   ============================================================
   Fluid spring physics, GPU-accelerated scroll reveals, 
   interactive 3D spotlight tracking, kinetic text masks,
   magnetic button dynamics, and ambient light meshes.
   ============================================================ */

/* ── Scroll Reveal Base (Scoped to JS-enabled) ───────────── */
body.js-animated [data-animate] {
  opacity: 0;
  transform: translateY(32px) scale(0.98);
  filter: blur(4px);
  will-change: transform, opacity, filter;
  backface-visibility: hidden;
  transition: opacity var(--duration-slower) var(--ease-apple-fluid),
              transform var(--duration-slower) var(--ease-apple-fluid),
              filter var(--duration-slower) var(--ease-apple-fluid);
}

body.js-animated [data-animate].is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

/* ── Animation Variants ───────────────────────────────────── */
body.js-animated [data-animate="fadeUp"] {
  opacity: 0;
  transform: translateY(32px) scale(0.98);
  filter: blur(4px);
}

body.js-animated [data-animate="fadeIn"] {
  opacity: 0;
  transform: scale(0.98);
  filter: blur(6px);
}

body.js-animated [data-animate="slideLeft"] {
  opacity: 0;
  transform: translateX(-35px) scale(0.98);
  filter: blur(4px);
}

body.js-animated [data-animate="slideRight"] {
  opacity: 0;
  transform: translateX(35px) scale(0.98);
  filter: blur(4px);
}

body.js-animated [data-animate="scaleIn"] {
  opacity: 0;
  transform: scale(0.90) translateY(15px);
  filter: blur(8px);
  transition-timing-function: var(--ease-apple-bounce);
}

/* Apple-style Blur In Reveal */
body.js-animated [data-animate="blurIn"] {
  opacity: 0;
  transform: scale(0.94);
  filter: blur(16px);
  transition: opacity var(--duration-slower) var(--ease-apple-fluid),
              transform var(--duration-slower) var(--ease-apple-fluid),
              filter var(--duration-slower) var(--ease-apple-fluid);
}

/* Framer Motion 3D Perspective Incline Reveal */
body.js-animated [data-animate="perspective3d"] {
  opacity: 0;
  transform: perspective(1000px) rotateX(14deg) translateY(45px) scale(0.94);
  transform-origin: 50% 100%;
  filter: blur(6px);
  transition: opacity var(--duration-lux) var(--ease-apple-fluid),
              transform var(--duration-lux) var(--ease-apple-fluid),
              filter var(--duration-lux) var(--ease-apple-fluid);
}

/* Curtain Reveal */
body.js-animated [data-animate="curtainReveal"] {
  opacity: 0;
  clip-path: inset(0 0 100% 0);
  transform: none;
  filter: none;
  transition: opacity 0.8s var(--ease-apple-fluid),
              clip-path 1.1s var(--ease-apple-fluid);
}

/* Visibiltiy overrides for all variants */
body.js-animated [data-animate="fadeUp"].is-visible,
body.js-animated [data-animate="fadeIn"].is-visible,
body.js-animated [data-animate="slideLeft"].is-visible,
body.js-animated [data-animate="slideRight"].is-visible,
body.js-animated [data-animate="scaleIn"].is-visible,
body.js-animated [data-animate="blurIn"].is-visible,
body.js-animated [data-animate="perspective3d"].is-visible {
  opacity: 1;
  transform: perspective(1000px) rotateX(0deg) translateY(0) translateX(0) scale(1);
  filter: blur(0);
}

body.js-animated [data-animate="curtainReveal"].is-visible {
  opacity: 1;
  clip-path: inset(0 0 0 0);
}

/* ── Apple Kinetic Text Mask & Word Reveal ────────────────── */
.word-mask-container {
  display: inline;
}

.word-mask {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  margin-right: 0.28em;
  padding-bottom: 0.08em;
}

.word-inner {
  display: inline-block;
  transform: translateY(115%) rotate(2.5deg);
  opacity: 0;
  will-change: transform, opacity;
  transition: transform 0.85s var(--ease-apple-fluid),
              opacity 0.85s var(--ease-apple-fluid);
}

body.js-animated .is-visible .word-inner,
.word-mask-container.is-visible .word-inner {
  transform: translateY(0%) rotate(0deg);
  opacity: 1;
}

/* ── Stagger Delays (1-12) ────────────────────────────────── */
[data-delay="1"]  { transition-delay: 80ms; }
[data-delay="2"]  { transition-delay: 160ms; }
[data-delay="3"]  { transition-delay: 240ms; }
[data-delay="4"]  { transition-delay: 320ms; }
[data-delay="5"]  { transition-delay: 400ms; }
[data-delay="6"]  { transition-delay: 480ms; }
[data-delay="7"]  { transition-delay: 560ms; }
[data-delay="8"]  { transition-delay: 640ms; }
[data-delay="9"]  { transition-delay: 720ms; }
[data-delay="10"] { transition-delay: 800ms; }
[data-delay="11"] { transition-delay: 880ms; }
[data-delay="12"] { transition-delay: 960ms; }

/* ── Interactive Card Spotlight & Specular Reflections ────── */
.spotlight-card,
.card,
.v2-card,
.v3-card,
.pub-card,
.governance-card,
.feature-card,
.hero__card {
  position: relative;
  isolation: isolate;
  transform-style: preserve-3d;
  transition: transform 0.5s var(--ease-apple-fluid),
              box-shadow 0.5s var(--ease-apple-fluid),
              border-color 0.4s var(--ease-apple-fluid);
}

/* Cursor-following radial spotlight */
.spotlight-card::before,
.card::before,
.v2-card::before,
.v3-card::before,
.pub-card::before,
.governance-card::before,
.feature-card::before,
.hero__card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    550px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(70, 194, 255, 0.15),
    rgba(10, 77, 140, 0.04) 40%,
    transparent 80%
  );
  opacity: 0;
  transition: opacity 0.4s var(--ease-apple-fluid);
  pointer-events: none;
  z-index: 2;
}

/* Specular top border shimmer */
.spotlight-card::after,
.card::after,
.v2-card::after,
.v3-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.5),
    rgba(255, 255, 255, 0.05) 40%,
    rgba(70, 194, 255, 0.3) 80%,
    transparent
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.4s var(--ease-apple-fluid);
  pointer-events: none;
  z-index: 3;
}

.spotlight-card:hover::before,
.card:hover::before,
.v2-card:hover::before,
.v3-card:hover::before,
.pub-card:hover::before,
.governance-card:hover::before,
.feature-card:hover::before,
.hero__card:hover::before,
.spotlight-card:hover::after,
.card:hover::after,
.v2-card:hover::after,
.v3-card:hover::after {
  opacity: 1;
}

/* ── Magnetic & Tactile Elastic Buttons ───────────────────── */
.btn,
.magnetic-btn,
.top-bar__contact-item {
  position: relative;
  will-change: transform;
  transition: transform 0.35s var(--ease-apple-spring),
              box-shadow 0.35s var(--ease-apple-fluid),
              background-color 0.3s var(--ease-apple-fluid);
}

.btn:active,
.magnetic-btn:active {
  transform: scale(0.94) !important;
  transition: transform 0.12s var(--ease-apple-snappy) !important;
}

/* Ripple effect layer */
.ripple-wave {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  transform: scale(0);
  animation: rippleAnimation 0.65s var(--ease-apple-fluid);
  pointer-events: none;
  z-index: 10;
}

@keyframes rippleAnimation {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

/* ── Hover Utility Classes ────────────────────────────────── */
.hover-lift {
  transition: transform 0.45s var(--ease-apple-fluid),
              box-shadow 0.45s var(--ease-apple-fluid);
}

.hover-lift:hover {
  transform: translateY(-8px) scale(1.01);
  box-shadow: 0 20px 40px rgba(10, 77, 140, 0.12);
}

.hover-glow:hover {
  box-shadow: 0 0 35px rgba(70, 194, 255, 0.25);
}

.hover-scale {
  transition: transform 0.4s var(--ease-apple-bounce);
}

.hover-scale:hover {
  transform: scale(1.04);
}

/* ── Ambient Floating Mesh & Orbs ─────────────────────────── */
.ambient-glow-wrapper {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.ambient-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.35;
  mix-blend-mode: screen;
  animation: orbFloat 18s ease-in-out infinite alternate;
  will-change: transform;
}

.ambient-orb--1 {
  width: 450px;
  height: 450px;
  background: radial-gradient(circle, rgba(70, 194, 255, 0.6), transparent 70%);
  top: -10%;
  left: -5%;
  animation-duration: 22s;
}

.ambient-orb--2 {
  width: 550px;
  height: 550px;
  background: radial-gradient(circle, rgba(10, 77, 140, 0.5), transparent 70%);
  bottom: -15%;
  right: -8%;
  animation-duration: 28s;
  animation-delay: -5s;
}

.ambient-orb--3 {
  width: 350px;
  height: 350px;
  background: radial-gradient(circle, rgba(23, 162, 184, 0.4), transparent 70%);
  top: 40%;
  right: 15%;
  animation-duration: 20s;
  animation-delay: -10s;
}

@keyframes orbFloat {
  0% {
    transform: translate(0, 0) scale(1) rotate(0deg);
  }
  50% {
    transform: translate(40px, -60px) scale(1.12) rotate(180deg);
  }
  100% {
    transform: translate(-30px, 40px) scale(0.92) rotate(360deg);
  }
}

/* ── Shimmer & Keyframes ──────────────────────────────────── */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.shimmer-text {
  background: linear-gradient(90deg, #0A4D8C 0%, #46C2FF 50%, #0A4D8C 100%);
  background-size: 200% auto;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  animation: shimmer 4s linear infinite;
}

/* ── Reduced Motion Fallback ──────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  body.js-animated [data-animate],
  body.js-animated [data-animate="perspective3d"],
  body.js-animated [data-animate="blurIn"],
  body.js-animated [data-animate="curtainReveal"] {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
    transition: none !important;
  }

  .word-inner {
    transform: none !important;
    opacity: 1 !important;
    transition: none !important;
  }

  .hover-lift:hover,
  .hover-scale:hover,
  .spotlight-card:hover {
    transform: none !important;
  }

  .ambient-orb {
    animation: none !important;
  }
}