/* ============================================
   Importa2SF — EggCoker Landing · Estilos custom
   Complementa Tailwind con animaciones y micro-UX
   ============================================ */

html { scroll-behavior: auto; }
body { overscroll-behavior-y: none; }

html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-scrolling iframe { pointer-events: none; }

/* ===== Captions scroll-driven (tarjetas glass) =====
   Las frases NO tapan el producto: en desktop son tarjetas a los costados
   (alternando izquierda/derecha, en el campo greige libre); en mobile una
   tarjeta abajo, sobre la base del podio. Mismo sistema is-active del scroll. */
#scrolly-captions .caption {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s var(--ease-out, ease), transform .4s var(--ease-out, ease);
  /* mobile (default): tarjeta centrada abajo, despegada del sticky-CTA */
  left: 50%;
  bottom: 7rem;
  width: min(86%, 22rem);
  text-align: center;
  transform: translate(-50%, 14px);
}
#scrolly-captions .caption.is-active {
  opacity: 1;
  transform: translate(-50%, 0);
}

@media (min-width: 768px) {
  #scrolly-captions .caption {
    bottom: auto;
    top: 50%;
    width: auto;
    max-width: 17rem;
    text-align: left;
  }
  #scrolly-captions .caption.side-left  { left: 7%;  right: auto; transform: translate(-18px, -50%); }
  #scrolly-captions .caption.side-right { right: 7%; left: auto;  transform: translate(18px, -50%); }
  #scrolly-captions .caption.is-active.side-left,
  #scrolly-captions .caption.is-active.side-right { transform: translate(0, -50%); opacity: 1; }
}
@media (min-width: 1280px) {
  #scrolly-captions .caption { max-width: 21rem; }
  #scrolly-captions .caption.side-left  { left: 11%; }
  #scrolly-captions .caption.side-right { right: 11%; }
}

/* ===== Canvas de la animación =====
   El fundido de bordes del frame lo dibuja el propio canvas (fadeEdges en
   scroll-animation.js) sobre las coordenadas reales del frame. */
#scrolly-canvas {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ===== Escenario del video vertical (fundido con el fondo del video) =====
   El video es 9:16 con fondo greige de estudio (~#d4cec9 centro, ~#b2ada3 esquinas).
   La sección replica ese campo con la misma viñeta → el frame (con bordes
   enmascarados) flota en un fondo continuo, sin bandas. Estilo product-page Apple. */
.scrolly-section { background: #c6c1b6; }
.scrolly-stage {
  background:
    radial-gradient(ellipse 80% 72% at 50% 47%, #d7d2c8 0%, #cdc8bd 52%, #b5b0a5 100%);
}

/* Placeholder visual cuando faltan los frames */
#scrolly:not([data-frames-loaded="true"]) #scrolly-canvas {
  background:
    radial-gradient(circle at 50% 45%, rgba(255,90,31,0.10), transparent 55%);
}
#scrolly:not([data-frames-loaded="true"])::before {
  content: "🐔";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 22vmin;
  opacity: 0.18;
  pointer-events: none;
  z-index: 1;
  filter: grayscale(1);
}

/* ===== Sticky CTA animado ===== */
#sticky-cta.is-visible { transform: translateY(0); }

/* ===== Modal / Bottom-sheet ===== */
#buy-modal.is-open { display: block; }
#buy-modal.is-open .modal-backdrop { opacity: 1; }
#buy-modal.is-open .modal-sheet { transform: translateY(0); opacity: 1; }
@media (min-width: 640px) {
  #buy-modal.is-open .modal-sheet { transform: translate(-50%, -50%); opacity: 1; }
}
body.modal-open { overflow: hidden; }

/* ===== Reduce motion: desactivamos scroll-driven animations ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .scrolly-track { height: auto !important; }
  .scrolly-track > .sticky { position: relative !important; height: auto !important; }
  #scrolly-captions {
    position: relative !important;
    inset: auto !important;
    display: grid;
    gap: .75rem;
    padding: 2.5rem 1.25rem;
    justify-items: center;
  }
  #scrolly-captions .caption {
    position: relative !important;
    opacity: 1;
    transform: none !important;
    left: auto !important; right: auto !important;
    top: auto !important; bottom: auto !important;
    width: auto;
  }
}

/* ===== FAQ details — quitamos marker default ===== */
details > summary::-webkit-details-marker { display: none; }
details > summary { -webkit-tap-highlight-color: transparent; }

/* ===== Focus states accesibles ===== */
a:focus-visible, button:focus-visible {
  outline: 2px solid #FF5A1F;
  outline-offset: 3px;
  border-radius: 999px;
}

/* ===== Selección de texto ===== */
::selection { background: #FF5A1F; color: #FAFAF8; }

/* ============================================
   Motion & micro-interacciones (craft — Emil Kowalski)
   Tokens de movimiento del sistema + feedback táctil. Mobile-first.
   El bloque de prefers-reduced-motion de arriba ya neutraliza estas
   transiciones para quien lo pida (accesibilidad).
   ============================================ */
:root {
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);    /* salida fuerte y responsiva (UI) */
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1); /* curva iOS para el bottom-sheet */
}

/* Feedback al presionar: cada botón de acción "responde" al dedo.
   Selectores con peso (elemento+atributo / id) para pisar el transition-colors de Tailwind
   sin perder la transición de color del hover. */
button[data-buy],
button[data-wa],
button[data-close-modal],
#cta-mp,
#cta-wa {
  transition: transform .16s var(--ease-out), background-color .15s ease, color .15s ease;
}
button[data-buy]:active,
button[data-wa]:active,
button[data-close-modal]:active,
#cta-mp:active,
#cta-wa:active {
  transform: scale(0.97);
}

/* El bottom-sheet de compra entra/sale con curva iOS, no con transition-all (caro e impreciso) */
#buy-modal .modal-sheet {
  transition: transform .34s var(--ease-drawer), opacity .34s var(--ease-drawer);
}

/* Stagger de entrada al aparecer en viewport (beneficios y reseñas en cascada).
   Doble gate de seguridad: solo si JS confirma soporte (.js-stagger) y no hay reduced-motion.
   Si el JS falla, el contenido se ve normal — NUNCA queda invisible. */
@media (prefers-reduced-motion: no-preference) {
  .js-stagger [data-stagger] > * {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .5s var(--ease-out), transform .5s var(--ease-out);
  }
  .js-stagger [data-stagger].is-in > * {
    opacity: 1;
    transform: none;
  }
  .js-stagger [data-stagger].is-in > *:nth-child(2) { transition-delay: 60ms; }
  .js-stagger [data-stagger].is-in > *:nth-child(3) { transition-delay: 120ms; }
  .js-stagger [data-stagger].is-in > *:nth-child(4) { transition-delay: 180ms; }
  .js-stagger [data-stagger].is-in > *:nth-child(5) { transition-delay: 240ms; }
}