/* =========================================================
   OJITOCORP · Movimiento: ola lateral, entradas de portada,
   revelado al hacer scroll y animaciones ambientales.
   Todo se desactiva con «Pausar animaciones» o con
   prefers-reduced-motion.
   ========================================================= */

/* ---------- Ola lateral (una sola, controlada por transition.js) ---------- */
.scene-wave { position: absolute; top: 0; left: 0; width: 100%; height: calc(100svh + 40px); z-index: 20; pointer-events: none; overflow: hidden; }
.wave-layer { position: absolute; top: 0; bottom: 0; left: -22%; width: 144%; border-radius: 22% / 50%; will-change: transform; transform: translateX(118%); }
.wave-accent { background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.wave-fill { background: var(--bg); }

/* ---------- Entrada de portada (solo cuando cambia o carga el ambiente) ---------- */
.scene-inner:not([data-enter="none"]) .line > span { animation: line-up .9s var(--ease) calc(var(--enter) + var(--i, 0) * 90ms) backwards; }
.scene-inner:not([data-enter="none"]) :is(.hero .eyebrow, .intro-description, .hero-actions, .spec-chips, .business-index, .title-tail) { animation: fade-up .8s var(--ease) calc(var(--enter) + 260ms) backwards; }
.scene-inner:not([data-enter="none"]) .hero-actions { animation-delay: calc(var(--enter) + 360ms); }
.scene-inner:not([data-enter="none"]) .ticker { animation: fade-in .8s ease calc(var(--enter) + 300ms) backwards; }

/* Inicio: el arco sube y los recortes llegan después */
.scene-inner:not([data-enter="none"]) .home-arch { animation: clip-up 1.1s var(--ease) var(--enter) backwards; }
.scene-inner:not([data-enter="none"]) .home-arch img { animation: settle 1.6s var(--ease) var(--enter) backwards; }
.scene-inner:not([data-enter="none"]) .home-tech { animation: slide-right .9s var(--ease) calc(var(--enter) + 380ms) backwards; }
.scene-inner:not([data-enter="none"]) .home-inset { animation: pop .9s var(--ease) calc(var(--enter) + 480ms) backwards; }
.scene-inner:not([data-enter="none"]) .home-ring { animation: pop 1s var(--ease) calc(var(--enter) + 200ms) backwards; }

/* Tecnología: marco preciso que se abre desde un lado */
.scene-inner:not([data-enter="none"]) .tech-frame > img { animation: clip-left 1s var(--ease) var(--enter) backwards; }
.scene-inner:not([data-enter="none"]) .corner { animation: corner-in .7s var(--ease) calc(var(--enter) + 450ms) backwards; }
.scene-inner:not([data-enter="none"]) .tech-float { animation: slide-up .8s var(--ease) calc(var(--enter) + 420ms) backwards; }
.scene-inner:not([data-enter="none"]) .chip-list li { animation: fade-up .5s var(--ease) calc(var(--enter) + 420ms) backwards; }

/* Negocios: regla editorial que se traza y fotos que se descubren */
.scene-inner:not([data-enter="none"]) .rule { animation: draw-x 1.1s var(--ease) calc(var(--enter) + 200ms) backwards; }
.scene-inner:not([data-enter="none"]) .business-photo { animation: clip-down 1s var(--ease) calc(var(--enter) + 300ms) backwards; }
.scene-inner:not([data-enter="none"]) .business-inset { animation: slide-left .9s var(--ease) calc(var(--enter) + 600ms) backwards; }
.scene-inner:not([data-enter="none"]) .index-list li { animation: slide-left .6s var(--ease) calc(var(--enter) + 400ms) backwards; }
.scene-inner:not([data-enter="none"]) .index-list li:nth-child(2) { animation-delay: calc(var(--enter) + 470ms); }
.scene-inner:not([data-enter="none"]) .index-list li:nth-child(3) { animation-delay: calc(var(--enter) + 540ms); }
.scene-inner:not([data-enter="none"]) .index-list li:nth-child(4) { animation-delay: calc(var(--enter) + 610ms); }
.scene-inner:not([data-enter="none"]) .index-list li:nth-child(5) { animation-delay: calc(var(--enter) + 680ms); }

/* Digital: las piezas se abren en abanico */
.scene-inner:not([data-enter="none"]) .stack-a { animation: deal-a .9s var(--ease) var(--enter) backwards; }
.scene-inner:not([data-enter="none"]) .stack-b { animation: deal-b .9s var(--ease) calc(var(--enter) + 160ms) backwards; }
.scene-inner:not([data-enter="none"]) .stack-c { animation: deal-c .9s var(--ease) calc(var(--enter) + 260ms) backwards; }
.scene-inner:not([data-enter="none"]) .outline-word { animation: slide-right 1.2s var(--ease) calc(var(--enter) + 200ms) backwards; }

/* Alimentos: la foto se asienta y la forma orgánica aparece */
.scene-inner:not([data-enter="none"]) .food-bg img { animation: settle 1.8s var(--ease) var(--enter) backwards; }
.scene-inner:not([data-enter="none"]) .hero-food .intro-copy { animation: fade-up .9s var(--ease) calc(var(--enter) + 80ms) backwards; }
.scene-inner:not([data-enter="none"]) .food-blob { animation: pop 1s var(--ease) calc(var(--enter) + 420ms) backwards; }
.scene-inner:not([data-enter="none"]) .food-word { animation: fade-up 1s var(--ease) calc(var(--enter) + 560ms) backwards; }

/* Formación: trazo a mano y fotos que suben de forma pausada */
.scene-inner:not([data-enter="none"]) .scribble path { animation: draw-line 1s var(--ease) calc(var(--enter) + 650ms) backwards; }
.scene-inner:not([data-enter="none"]) .learning-strip figure { animation: slide-up 1s var(--ease) calc(var(--enter) + 300ms) backwards; }
.scene-inner:not([data-enter="none"]) .learning-strip figure:first-child { animation-delay: calc(var(--enter) + 200ms); }
.scene-inner:not([data-enter="none"]) .learning-strip figure:nth-child(3) { animation-delay: calc(var(--enter) + 420ms); }

/* ---------- Animaciones ambientales (suaves y pausables) ---------- */
.ticker-track { animation: marquee 48s linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
.tech-grid::after { animation: glow 7s ease-in-out infinite; }
.scanline { animation: scan 5s ease-in-out infinite; }
.b1 { animation: float-a 16s ease-in-out infinite; }
.b2 { animation: float-b 19s ease-in-out infinite; }
.b3 { animation: float-a 22s ease-in-out infinite reverse; }
.food-blob { animation: morph 14s ease-in-out infinite; }
.home-ring { animation: bob 9s ease-in-out infinite; }

/* ---------- Revelado al hacer scroll ---------- */
.js [data-reveal]:not(.is-visible) { opacity: 0; }
.js [data-reveal].is-visible { animation: reveal .8s var(--ease) calc(var(--d, 0) * 90ms) backwards; }

@keyframes line-up { from { transform: translateY(105%); } }
@keyframes fade-up { from { opacity: 0; transform: translateY(18px); } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes reveal { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes clip-up { from { clip-path: inset(100% 0 0 0 round 260px 260px 22px 22px); } to { clip-path: inset(0 0 0 0 round 260px 260px 22px 22px); } }
@keyframes clip-down { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }
@keyframes clip-left { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0); } }
@keyframes settle { from { transform: scale(1.14); } }
@keyframes slide-right { from { opacity: 0; transform: translateX(-36px); } }
@keyframes slide-left { from { opacity: 0; transform: translateX(28px); } }
@keyframes slide-up { from { opacity: 0; transform: translateY(40px); } }
@keyframes pop { from { opacity: 0; transform: scale(.7); } }
@keyframes corner-in { from { opacity: 0; transform: scale(2.2); } }
@keyframes draw-x { from { transform: scaleX(0); } }
@keyframes draw-line { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes deal-a { from { opacity: 0; transform: rotate(0) translateY(40px) scale(.94); } }
@keyframes deal-b { from { opacity: 0; transform: rotate(0) translate(-60px, 60px); } }
@keyframes deal-c { from { opacity: 0; transform: rotate(0) translate(60px, -40px); } }
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes glow { 50% { transform: translate(-40px, 30px) scale(1.12); opacity: .7; } }
@keyframes scan { 0%, 100% { top: 0; } 50% { top: calc(100% - 2px); } }
@keyframes float-a { 50% { transform: translate(-60px, 50px) scale(1.1); } }
@keyframes float-b { 50% { transform: translate(70px, -40px) scale(.92); } }
@keyframes morph { 50% { border-radius: 42% 58% 45% 55% / 58% 42% 58% 42%; } }
@keyframes bob { 50% { transform: translateY(-14px); } }
@keyframes modal-in { from { opacity: 0; transform: translateY(24px) scale(.98); } }
@keyframes menu-in { from { opacity: 0; transform: translateY(-8px); } }

/* ---------- Pausa manual y movimiento reducido ---------- */
.motion-paused { scroll-behavior: auto; }
.motion-paused *, .motion-paused *::before, .motion-paused *::after { animation: none !important; transition-duration: 0s !important; }
.motion-paused [data-reveal] { opacity: 1 !important; }
.motion-paused .scene-wave { display: none !important; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: 0s !important; }
  .js [data-reveal] { opacity: 1 !important; }
  .scene-wave { display: none !important; }
}