/* =========================================================
   F.I.E.L. — Motion
   Scroll-reveal, cursor parallax, hover spotlight.
   Solo aplica cuando JS está activo (.js-motion) y el usuario
   no ha pedido reducir movimiento.
   ========================================================= */

/* ---------- Reveal base ---------- */
.js-motion [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition:
    opacity 800ms cubic-bezier(.2,.65,.2,1),
    transform 800ms cubic-bezier(.2,.65,.2,1);
  will-change: opacity, transform;
}
.js-motion [data-reveal="left"]  { transform: translate3d(-32px, 0, 0); }
.js-motion [data-reveal="right"] { transform: translate3d(32px, 0, 0); }
.js-motion [data-reveal="scale"] { transform: scale(0.96); }
.js-motion [data-reveal="fade"]  { transform: none; }

.js-motion [data-reveal].is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

/* ---------- Hero parallax ---------- */
.js-motion .hero__image {
  perspective: 800px;
}
.js-motion .hero__image img {
  transition: transform 600ms cubic-bezier(.2,.7,.2,1);
  will-change: transform;
}
.js-motion .hero__deco {
  transition: transform 800ms cubic-bezier(.2,.7,.2,1);
  will-change: transform;
}

/* ---------- Spotlight (sigue al cursor en cards) ---------- */
.js-spotlight {
  position: relative;
  overflow: hidden;
}
.js-spotlight::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    320px circle at var(--mx, 50%) var(--my, 50%),
    rgba(35, 55, 106, 0.07),
    transparent 55%
  );
  opacity: 0;
  transition: opacity 280ms ease;
  pointer-events: none;
  z-index: 0;
}
.js-spotlight:hover::before { opacity: 1; }
.js-spotlight > * { position: relative; z-index: 1; }

/* Dark variant for pillars */
.pillar.js-spotlight::before {
  background: radial-gradient(
    320px circle at var(--mx, 50%) var(--my, 50%),
    rgba(242, 201, 176, 0.10),
    transparent 55%
  );
}

/* ---------- Subtle card-tilt response (very gentle) ---------- */
.js-tilt {
  transition: transform 400ms cubic-bezier(.2,.7,.2,1), box-shadow var(--t-base);
  transform-style: preserve-3d;
  will-change: transform;
}

/* ---------- Buttons: gentle press already in components ---------- */
.btn { will-change: transform; }

/* ---------- Animated underline on nav links ---------- */
.js-motion .site-nav__link::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 2px;
  background: var(--color-crimson);
  border-radius: var(--radius-full);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 300ms cubic-bezier(.2,.7,.2,1);
}
.js-motion .site-nav__link:hover::before { transform: scaleX(1); }
.js-motion .site-nav__link.is-active::after { display: none; } /* let the animated bar handle it */
.js-motion .site-nav__link.is-active::before { transform: scaleX(1); }

/* ---------- Accordion chevron easing ---------- */
.acc-trigger { transition: background var(--t-fast), padding-left var(--t-base); }
.js-motion .acc-trigger:hover { padding-left: calc(var(--space-6) + 4px); }

/* ---------- Verse quote subtle indent on hover ---------- */
.principle blockquote.verse-quote {
  transition: border-left-width var(--t-base), padding-left var(--t-base);
}
.js-motion .principle:hover blockquote.verse-quote {
  border-left-width: 5px;
  padding-left: calc(var(--space-5) + 2px);
}

/* ---------- Hero entrance (only once, on load) ---------- */
@keyframes heroFadeUp {
  from { opacity: 0; transform: translate3d(0, 24px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes heroFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes decoFloat {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, -14px, 0); }
}

.js-motion .hero h1,
.js-motion .hero p.lead,
.js-motion .hero__cta,
.js-motion .hero .eyebrow,
.js-motion .hero-simple h1,
.js-motion .hero-simple p,
.js-motion .hero-simple .subtitle,
.js-motion .hero-simple .tag {
  animation: heroFadeUp 900ms cubic-bezier(.2,.65,.2,1) both;
}
.js-motion .hero .eyebrow,
.js-motion .hero-simple .tag      { animation-delay: 0ms; }
.js-motion .hero h1,
.js-motion .hero-simple h1        { animation-delay: 80ms; }
.js-motion .hero-simple .subtitle { animation-delay: 160ms; }
.js-motion .hero p.lead,
.js-motion .hero-simple p         { animation-delay: 220ms; }
.js-motion .hero__cta             { animation-delay: 360ms; }
.js-motion .hero__image           { animation: heroFadeIn 1100ms cubic-bezier(.2,.65,.2,1) 200ms both; }

/* Decorative circles parallax is driven by JS — no float animation here
   (a CSS keyframe would override the JS-set transform). */

/* ---------- Footer social icons ---------- */
.site-footer__social a {
  transition: background var(--t-fast), color var(--t-fast), transform var(--t-base);
}
.js-motion .site-footer__social a:hover {
  transform: translateY(-2px);
}

/* ---------- Reduce Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .js-motion [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .js-motion .hero__image img,
  .js-motion .hero__deco {
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
  .js-motion .hero h1,
  .js-motion .hero p.lead,
  .js-motion .hero__cta,
  .js-motion .hero .eyebrow,
  .js-motion .hero-simple h1,
  .js-motion .hero-simple p,
  .js-motion .hero-simple .subtitle,
  .js-motion .hero-simple .tag,
  .js-motion .hero__image {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .js-spotlight::before { display: none; }
}