/* ============================================================
   animations.css — Keyframes y states de animación
   ============================================================ */

/* Reveal on scroll (manejado por JS pero estados aquí) */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 800ms var(--ease-out-quart), transform 800ms var(--ease-out-quart);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal--delay-1 { transition-delay: 100ms; }
.reveal--delay-2 { transition-delay: 200ms; }
.reveal--delay-3 { transition-delay: 300ms; }
.reveal--delay-4 { transition-delay: 400ms; }

/* Stagger children */
.stagger > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 700ms var(--ease-out-quart), transform 700ms var(--ease-out-quart);
}
.stagger.is-visible > *:nth-child(1) { transition-delay: 0ms; }
.stagger.is-visible > *:nth-child(2) { transition-delay: 80ms; }
.stagger.is-visible > *:nth-child(3) { transition-delay: 160ms; }
.stagger.is-visible > *:nth-child(4) { transition-delay: 240ms; }
.stagger.is-visible > *:nth-child(5) { transition-delay: 320ms; }
.stagger.is-visible > *:nth-child(6) { transition-delay: 400ms; }
.stagger.is-visible > *:nth-child(7) { transition-delay: 480ms; }
.stagger.is-visible > *:nth-child(8) { transition-delay: 560ms; }
.stagger.is-visible > *:nth-child(n+9) { transition-delay: 640ms; }
.stagger.is-visible > * { opacity: 1; transform: translateY(0); }

/* Hero entrance */
.hero__title,
.hero__lead,
.hero__ctas,
.hero__visual,
.hero__eyebrow {
  opacity: 0;
  transform: translateY(20px);
  animation: heroIn 1100ms var(--ease-out-quart) forwards;
}
.hero__eyebrow { animation-delay: 200ms; }
.hero__title  { animation-delay: 320ms; }
.hero__lead   { animation-delay: 480ms; }
.hero__ctas   { animation-delay: 620ms; }
.hero__visual { animation-delay: 360ms; transform: translateY(40px); }

@keyframes heroIn {
  to { opacity: 1; transform: translateY(0); }
}

/* Pulse */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* Float */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
.float { animation: float 4s ease-in-out infinite; }

/* Split word animation helpers (used by [data-split] in animations.js) */
.word { display: inline-block; overflow: hidden; vertical-align: top; }
.word-inner { display: inline-block; }

/* ============================================================
   CINEMATOGRAFIA — Día 3
   Noise grain texture en secciones dark + SVG drawing eyebrows
   ============================================================ */

/* Film grain noise overlay sutil */
.noise-grain,
.results-strip,
.cta-banner,
.final-cta,
.site-footer,
.section--brand,
.blue-band {
  position: relative;
}
.noise-grain::after,
.results-strip::after,
.cta-banner::after,
.final-cta::after,
.site-footer::after,
.section--brand::after,
.blue-band::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.18 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.5;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 1;
}
/* En secciones light, reducir aún más la opacidad del grain */
.site-footer::after { opacity: 0.4; }
.cta-banner::after,
.final-cta::after { opacity: 0.35; }
/* Asegurar contenido encima del grain */
.results-strip > .container,
.cta-banner > *,
.final-cta__inner,
.site-footer > .container,
.section--brand > *,
.blue-band > .container { position: relative; z-index: 2; }

/* Eyebrow línea: convertir en SVG path animado al entrar viewport */
.eyebrow-line {
  display: inline-block;
  width: 32px;
  height: 2px;
  vertical-align: middle;
  margin-right: var(--sp-3);
  overflow: visible;
}
.eyebrow-line path {
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  fill: none;
  stroke-dasharray: 32;
  stroke-dashoffset: 32;
  transition: stroke-dashoffset 800ms cubic-bezier(0.16, 1, 0.3, 1) 200ms;
}
.eyebrow.is-visible .eyebrow-line path,
.section-eyebrow.is-visible .eyebrow-line path,
.is-visible .eyebrow-line path { stroke-dashoffset: 0; }
/* Si no hay observer, render normal */
.no-js .eyebrow-line path,
.no-anim .eyebrow-line path { stroke-dashoffset: 0; }

/* Ocultar ::before estático cuando JS inyecta el SVG */
.hero__eyebrow:has(.eyebrow-line)::before,
.section-eyebrow:has(.eyebrow-line)::before,
.eyebrow:has(.eyebrow-line)::before,
.results-strip__eyebrow:has(.eyebrow-line)::before { display: none; }

/* ============================================================
   CINEMATOGRAFIA PREMIUM — efectos avanzados
   ============================================================ */

/* 3D Tilt preparation - GPU-accelerated cards */
.photo-card,
.center-cinema,
.center-detail__map {
  transform-style: preserve-3d;
  perspective: 1000px;
  will-change: transform;
}
.photo-card__img,
.center-cinema__img {
  will-change: transform;
}
.photo-card__body,
.center-cinema__body {
  transform: translateZ(40px);
  transform-style: preserve-3d;
}

/* Magnetic buttons — base setup */
[data-magnetic] {
  display: inline-flex;
  position: relative;
  will-change: transform;
  transition: transform 350ms cubic-bezier(0.25, 1, 0.5, 1);
}
[data-magnetic] > span,
[data-magnetic] > svg {
  pointer-events: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: transform 350ms cubic-bezier(0.25, 1, 0.5, 1);
}

/* Mask reveal text — heading appears from below a mask */
[data-mask-reveal] {
  overflow: hidden;
  display: block;
}
[data-mask-reveal] > .mask-line {
  display: block;
  transform: translateY(110%);
  will-change: transform;
}
[data-mask-reveal].is-visible > .mask-line {
  animation: maskRevealIn 1.1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes maskRevealIn {
  0% { transform: translateY(110%); }
  100% { transform: translateY(0); }
}

/* Floating particles in hero */
.hero-particles {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.hero-particles__dot {
  position: absolute;
  border-radius: 50%;
  background: var(--white);
  opacity: 0;
  filter: blur(0.5px);
  will-change: transform, opacity;
}

/* Cursor blob (desktop only) */
@media (hover: hover) and (pointer: fine) {
  .cursor-blob {
    position: fixed;
    top: 0;
    left: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--primary);
    pointer-events: none;
    z-index: 999;
    transform: translate(-50%, -50%);
    transition: width 250ms cubic-bezier(0.25, 1, 0.5, 1),
                height 250ms cubic-bezier(0.25, 1, 0.5, 1),
                background 250ms ease,
                mix-blend-mode 250ms ease,
                border-radius 250ms ease,
                opacity 200ms ease;
    opacity: 0;
    mix-blend-mode: difference;
  }
  .cursor-blob.is-active { opacity: 0.45; }
  .cursor-blob.is-hover {
    width: 72px;
    height: 72px;
    opacity: 0.7;
    mix-blend-mode: difference;
  }
  .cursor-blob.is-text {
    width: 4px;
    height: 32px;
    border-radius: 2px;
    opacity: 0.8;
    mix-blend-mode: difference;
  }
}

/* Marquee — infinite horizontal scroll for trust bar */
.marquee {
  overflow: hidden;
  width: 100%;
  position: relative;
  mask-image: linear-gradient(90deg, transparent 0, var(--white) 8%, var(--white) 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, var(--white) 8%, var(--white) 92%, transparent 100%);
}
.marquee__track {
  display: flex;
  width: max-content;
  animation: marqueeScroll 38s linear infinite;
  will-change: transform;
}
.marquee:hover .marquee__track {
  animation-play-state: paused;
}
.marquee__item {
  flex-shrink: 0;
  padding-inline: clamp(28px, 4vw, 56px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  color: var(--ink-soft);
  letter-spacing: 0.01em;
  opacity: 0.55;
  transition: opacity var(--t-fast), color var(--t-fast);
  white-space: nowrap;
  position: relative;
}
.marquee__item:not(:first-child)::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--primary);
  opacity: 0.4;
}
.marquee__item:hover { opacity: 1; color: var(--accent); }
@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* Section reveal with mask wipe */
.mask-reveal-img {
  position: relative;
  overflow: hidden;
  will-change: clip-path;
}
.mask-reveal-img.is-revealed {
  animation: maskWipe 1.4s cubic-bezier(0.77, 0, 0.18, 1) forwards;
}
@keyframes maskWipe {
  0% { clip-path: inset(0 100% 0 0); }
  100% { clip-path: inset(0 0 0 0); }
}

/* Hover lift effect on interactive cards */
.lift-on-hover {
  transition: transform 400ms var(--ease-out-quart), box-shadow 400ms var(--ease-out-quart);
}
.lift-on-hover:hover {
  transform: translateY(-4px);
}

/* Floating subtle on icons */
@keyframes floatSubtle {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-4px) rotate(0.5deg); }
}
.specialty-card__icon svg {
  animation: floatSubtle 6s ease-in-out infinite;
}
.specialty-card:nth-child(2n) .specialty-card__icon svg { animation-delay: -2s; }
.specialty-card:nth-child(3n) .specialty-card__icon svg { animation-delay: -4s; }
.specialty-card:hover .specialty-card__icon svg {
  animation-play-state: paused;
}

/* Smooth section appear */
section { isolation: isolate; }

/* Reduce motion accessibility */
@media (prefers-reduced-motion: reduce) {
  .marquee__track,
  .specialty-card__icon svg,
  .hero__title,
  .hero__lead,
  .hero__ctas,
  .hero__visual,
  .hero__eyebrow {
    animation: none !important;
  }
  .cursor-blob { display: none !important; }
  [data-magnetic] { transform: none !important; }
  [data-mask-reveal] > .mask-line { transform: none !important; animation: none !important; }
}

/* ============================================================
   Marquee logos (ARS / aseguradoras)
   ============================================================ */
.marquee__item img {
  max-height: 56px;
  width: auto;
  max-width: 180px;
  object-fit: contain;
  filter: grayscale(1) opacity(0.65);
  transition: filter 250ms ease;
}
.marquee:hover .marquee__item img,
.marquee__item:hover img {
  filter: grayscale(0) opacity(1);
}