/* ============================================================
   BEIKORA Landing — animations.css
   Urban Motion: snappy, achromatic, minimal motion
   ============================================================ */

/* ── Reduced-motion fallback ─────────────────────────────── */
[data-reveal] {
  opacity: 1;
  transform: none;
}

/* ============================================================
   MOTION STYLES — guarded by prefers-reduced-motion
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {

  /* ── 1. Scroll Reveal — premium ease-out with filter blur ── */
  [data-reveal] {
    opacity: 0;
    transform: translateY(24px);
    filter: blur(6px);
    transition:
      opacity  700ms cubic-bezier(0.16, 1, 0.3, 1),
      transform 700ms cubic-bezier(0.16, 1, 0.3, 1),
      filter    700ms cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform, filter;
  }

  [data-reveal="left"] {
    opacity: 0;
    transform: translateX(-36px);
    filter: blur(6px);
  }

  [data-reveal="right"] {
    opacity: 0;
    transform: translateX(36px);
    filter: blur(6px);
  }

  [data-reveal="scale"] {
    opacity: 0;
    transform: scale(0.96);
    filter: blur(6px);
  }

  [data-reveal].revealed {
    opacity: 1;
    transform: none;
    filter: blur(0);
  }

  /* ── 2a. Phone float — suave, largo ───────────────────── */
  @keyframes phoneFloat {
    0%, 100% { transform: translateY(0px);   }
    50%       { transform: translateY(-10px); }
  }

  .phone-mockup--hero {
    animation: phoneFloat 7s ease-in-out infinite;
  }

  .phone-mockup--large {
    animation: phoneFloat 8s ease-in-out infinite;
    animation-delay: 0.8s;
  }

  /* iPhone frame float */
  .iphone-frame--hero {
    animation: phoneFloat 7s ease-in-out infinite;
  }

  /* ── 2f. Anillos concéntricos NUTRIR/MOVER/CUIDAR ──── */
  @keyframes ringOrbit {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
  }

  .rings-outer {
    animation: ringOrbit 28s linear infinite;
    transform-origin: center;
    will-change: transform;
  }

  .rings-mid {
    animation: ringOrbit 20s linear infinite;
    transform-origin: center;
    will-change: transform;
  }

  .rings-inner {
    animation: ringOrbit 14s linear infinite reverse;
    transform-origin: center;
    will-change: transform;
  }

  /* ── 2b. Fade in up — utilidad general ────────────────── */
  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translateY(24px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* ── 2c. Hero word stagger — slower for editorial feel ─ */
  .hero__word {
    display: inline-block;
    opacity: 0;
    transform: translateY(24px);
    filter: blur(8px);
  }

  @keyframes heroWordIn {
    from {
      opacity: 0;
      transform: translateY(24px);
      filter: blur(8px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
      filter: blur(0);
    }
  }

  .hero__word.animated {
    animation: heroWordIn 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }

  .hero__word:nth-child(1) { animation-delay: 0.10s; }
  .hero__word:nth-child(2) { animation-delay: 0.22s; }
  .hero__word:nth-child(3) { animation-delay: 0.34s; }

  /* ── 2d. Callout float ─────────────────────────────────── */
  @keyframes calloutFloat {
    0%, 100% { transform: translateY(0px);  }
    50%       { transform: translateY(-5px); }
  }

  .callout--1 {
    animation: calloutFloat 4s ease-in-out infinite;
  }

  .callout--2 {
    animation: calloutFloat 4s ease-in-out infinite;
    animation-delay: 1.5s;
  }

  /* ── 2e. Step number reveal on hover ───────────────────── */
  /* Handled via CSS opacity transition in sections.css */

  /* ── 3. Nav scroll effect ──────────────────────────────── */
  .nav--scrolled {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border-bottom-color: var(--glass-border);
  }

  /* ── 4. Mobile menu transitions ───────────────────────── */
  .nav__mobile {
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.32, 0, 0.67, 0);
  }

  .nav__mobile.open {
    transform: translateX(0);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .nav__overlay {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
  }

  .nav__overlay.open {
    opacity: 1;
    pointer-events: auto;
  }

  /* Hamburger → × */
  .nav__hamburger span {
    display: block;
    width: 20px;
    height: 1.5px;
    background: var(--on-surface-variant);
    border-radius: 0;
    transition: transform 0.25s ease, opacity 0.25s ease;
  }

  .nav__hamburger.active span:nth-child(1) {
    transform: translateY(6.5px) rotate(45deg);
  }

  .nav__hamburger.active span:nth-child(2) {
    opacity: 0;
  }

  .nav__hamburger.active span:nth-child(3) {
    transform: translateY(-6.5px) rotate(-45deg);
  }

  /* ── 5. Stagger utility — 70ms cadence (premium) ──────── */
  .stagger-1 { transition-delay:  70ms; }
  .stagger-2 { transition-delay: 140ms; }
  .stagger-3 { transition-delay: 210ms; }
  .stagger-4 { transition-delay: 280ms; }
  .stagger-5 { transition-delay: 350ms; }
  .stagger-6 { transition-delay: 420ms; }

  /* ── 6. Pulse — IA dot ──────────────────────────────────── */
  @keyframes pulse {
    0%, 100% { opacity: 1;   transform: scale(1);    }
    50%       { opacity: 0.5; transform: scale(0.75); }
  }

  /* ── 7. Featured pricing card — subtle breathing glow ── */
  @keyframes featuredGlow {
    0%, 100% {
      box-shadow:
        0 0 0 1px oklch(0.97 0.003 75 / 0.14),
        0 20px 60px -20px oklch(0 0 0 / 0.50),
        0 40px 120px -40px oklch(0 0 0 / 0.35),
        inset 0 1px 0 oklch(1 0 0 / 0.08);
    }
    50% {
      box-shadow:
        0 0 0 1px oklch(0.97 0.003 75 / 0.20),
        0 24px 72px -20px oklch(0 0 0 / 0.55),
        0 48px 140px -40px oklch(0 0 0 / 0.42),
        inset 0 1px 0 oklch(1 0 0 / 0.10);
    }
  }

  .pricing-card--featured {
    animation: featuredGlow 6s ease-in-out infinite;
  }
  .pricing-card--featured:hover {
    animation-play-state: paused;
  }

  /* ── 8. Shimmer utility — sweeping light on gradient ── */
  @keyframes shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position:  200% 0; }
  }

  /* ── 9. Hero italic word — subtle lift cycle ─────────── */
  @keyframes italicBreath {
    0%, 100% { opacity: 1;    transform: translateY(0); }
    50%      { opacity: 0.92; transform: translateY(-2px); }
  }

  /* Only on first paint, after word stagger finishes.
     Uses heroWordIn (not fadeInUp) so filter:blur(8px) is cleared. */
  .hero__word--clay.animated {
    animation:
      heroWordIn 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards,
      italicBreath 5.5s ease-in-out 1.4s infinite;
  }

} /* end @media */

/* ── Número monoespaciado — fuera del guard ─────────────── */
.proof-number {
  font-variant-numeric: tabular-nums;
}