.cine-grano {
  position: fixed; inset: -50%; z-index: 9998; pointer-events: none; opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: cineGrano 1s steps(4) infinite;
}
@keyframes cineGrano { 25% { transform: translate(-3%, 2%); } 50% { transform: translate(2%, -3%); } 75% { transform: translate(-2%, -2%); } }

.cine-barra { position: fixed; left: 0; right: 0; z-index: 9997; height: 50vh; background: #053a24; pointer-events: none; transition: transform 1.1s cubic-bezier(.77, 0, .18, 1); }
.cine-barra.arriba { top: 0; transform-origin: top; }
.cine-barra.abajo { bottom: 0; transform-origin: bottom; }
.cine-abierto .cine-barra { transform: scaleY(0); }
.cine-barra.fuera { display: none; }

body.rd .hero-name .cine-letra { display: inline-block; opacity: 0; translate: 0 45%; filter: blur(14px); }
.cine-abierto body.rd .hero-name .cine-letra,
body.rd.cine-listo .hero-name .cine-letra {
  opacity: 1; translate: 0 0; filter: blur(0);
  transition: opacity .9s ease, translate 1.1s cubic-bezier(.16, 1, .3, 1), filter 1s ease;
  transition-delay: calc(.45s + var(--i) * .07s);
}
body.rd.cine-listo .hero-name { animation: cineBrillo 4.5s ease-in-out 2.2s infinite; }
@keyframes cineBrillo { 0%, 100% { text-shadow: 0 0 0 rgba(240, 162, 92, 0); } 50% { text-shadow: 0 0 34px rgba(240, 162, 92, .38); } }
body.rd .cine-sube { opacity: 0; translate: 0 18px; }
body.rd.cine-listo .cine-sube { opacity: 1; translate: 0 0; transition: opacity .9s ease, translate 1s cubic-bezier(.16, 1, .3, 1); transition-delay: calc(.9s + var(--i) * .12s); }

.cine-cortina {
  position: fixed; inset: 0; z-index: 9990; pointer-events: none; display: grid; place-items: center;
  background: #05432a; transform: scaleX(0); transform-origin: left;
}
.cine-cortina span { font-family: 'Shippori Mincho', serif; font-weight: 800; font-size: clamp(48px, 14vw, 120px); color: rgba(244, 239, 227, .9); letter-spacing: .1em; opacity: 0; }
.cine-cortina.corre { animation: cineCortina .62s cubic-bezier(.77, 0, .18, 1) both; }
.cine-cortina.corre span { animation: cineKanji .62s ease both; }
@keyframes cineCortina { 0% { transform: scaleX(0); transform-origin: left; } 46% { transform: scaleX(1); transform-origin: left; } 54% { transform: scaleX(1); transform-origin: right; } 100% { transform: scaleX(0); transform-origin: right; } }
@keyframes cineKanji { 0%, 30% { opacity: 0; } 50% { opacity: 1; } 70%, 100% { opacity: 0; } }

.cine-oculto { opacity: 0; translate: 0 34px; filter: blur(8px); }
.ap-open.cine-oculto, .ap-open.cine-in, body.buscando .cine-oculto { opacity: 1; translate: none; filter: none; transition: none; }
.cine-in { opacity: 1; translate: 0 0; filter: blur(0); transition: opacity .8s ease, translate .9s cubic-bezier(.16, 1, .3, 1), filter .8s ease; transition-delay: calc(var(--d, 0) * 1s); }
.cine-titulo { clip-path: inset(0 100% 0 0); }
.cine-titulo.cine-in-titulo { clip-path: inset(0 0 0 0); transition: clip-path 1.2s cubic-bezier(.77, 0, .18, 1); }

.cine-golpe { animation: cineGolpe .5s cubic-bezier(.2, .8, .2, 1); }
@keyframes cineGolpe { 30% { transform: scale(1.18); box-shadow: 0 0 0 10px rgba(240, 162, 92, .25); } 100% { transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
  .cine-grano, .cine-barra, .cine-cortina { display: none; }
  body.rd .hero-name .cine-letra, body.rd .cine-sube, .cine-oculto { opacity: 1; translate: none; filter: none; }
  .cine-titulo { clip-path: none; }
  body.rd.cine-listo .hero-name { animation: none; }
}

body.rd #menu .menu-item.item-with-image:not(.ap-open) > .item-image-wrapper img.cine-px { scale: 1.16; translate: 0 var(--py, 0px); }

body.rd .menu-item.cine-destaca > .item-image-wrapper::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 244, 214, .5) 48%, rgba(255, 255, 255, .15) 52%, transparent 62%);
  translate: -120% 0; animation: cineDestello 5.5s ease-in-out infinite; animation-delay: var(--dd, 0s);
}
@keyframes cineDestello { 0%, 62% { translate: -120% 0; } 85%, 100% { translate: 120% 0; } }


.cine-faroles { position: absolute; top: var(--nav-h, 64px); left: 0; right: 0; height: 0; z-index: 4; pointer-events: none; }
.cine-farol { position: absolute; top: 0; width: 34px; transform-origin: 50% 0; animation: cineMece var(--t, 4.6s) ease-in-out infinite alternate; animation-delay: var(--dl, 0s); }
.cine-farol svg { display: block; width: 100%; height: auto; overflow: visible; }
.cine-farol .luz { opacity: .25; transition: opacity .6s ease; }
body.rd:not(.ap-cerrado) .cine-farol .luz { opacity: 1; animation: cineLuz 2.8s ease-in-out infinite alternate; }
body.rd:not(.ap-cerrado) .cine-farol svg { filter: drop-shadow(0 0 14px rgba(255, 150, 70, .55)); }
@keyframes cineMece { from { rotate: -5deg; } to { rotate: 5deg; } }
@keyframes cineLuz { from { opacity: .75; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  body.rd #menu .menu-item.item-with-image > .item-image-wrapper img.cine-px { scale: 1; translate: none; }
  body.rd .menu-item.cine-destaca > .item-image-wrapper::after, .cine-farol, body.rd:not(.ap-cerrado) .cine-farol .luz { animation: none; }
  body.rd .menu-item.cine-destaca > .item-image-wrapper::after { display: none; }
}

.cine-petalos { position: fixed; inset: 0; z-index: 30; pointer-events: none; overflow: hidden; }
.cine-petalos i { position: absolute; top: -24px; left: var(--x); opacity: .85; animation: cinePetalo var(--t) linear var(--d) infinite; }
.cine-p-cempa { width: 10px; height: 13px; border-radius: 60% 10% 60% 10%; background: radial-gradient(circle at 30% 30%, #ffc23a, #f39200 70%); }
.cine-p-higan { width: 4px; height: 18px; border-radius: 50% 50% 50% 50% / 80% 80% 20% 20%; background: linear-gradient(#ff4d5e, #b5121b); }
.cine-p-oro { width: 7px; height: 11px; border-radius: 1px; background: linear-gradient(135deg, #fff1b8, #e8b84a 60%, #b8862b); }
.cine-p-rojo { width: 7px; height: 11px; border-radius: 1px; background: #d23a24; }
.cine-p-corazon { width: 14px; height: 13px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 36'%3E%3Cpath d='M20 34S2 23 2 12a9 9 0 0 1 18-4 9 9 0 0 1 18 4c0 11-18 22-18 22z' fill='%23ff5c8a'/%3E%3C/svg%3E") center / contain no-repeat; }
.cine-p-sakura { width: 11px; height: 11px; border-radius: 80% 0 80% 0; background: radial-gradient(circle at 30% 30%, #fff0f4, #ffb7c5 70%); }
.cine-p-estrella { width: 11px; height: 11px; background: #ffe066; clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); filter: drop-shadow(0 0 4px #ffd400); }
.cine-p-burbuja { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid rgba(190, 230, 255, .8); background: rgba(190, 230, 255, .15); }
@keyframes cinePetalo {
  0% { translate: 0 0; rotate: 0deg; }
  25% { translate: 26px 28vh; rotate: 90deg; }
  50% { translate: -18px 56vh; rotate: 180deg; }
  75% { translate: 22px 84vh; rotate: 270deg; }
  100% { translate: -10px 112vh; rotate: 360deg; }
}

.cine-picado { display: flex; justify-content: space-between; gap: 4px; height: 34px; margin: 0 0 16px; pointer-events: none; }
.cine-picado::before { content: ""; position: absolute; left: var(--pad-x, 20px); right: var(--pad-x, 20px); height: 1.5px; background: rgba(244, 239, 227, .5); }
.cine-picado svg { flex: 1; max-width: 44px; height: 100%; transform-origin: 50% 0; animation: cinePicado 3.2s ease-in-out var(--d, 0s) infinite alternate; }
@keyframes cinePicado { from { rotate: -4deg; } to { rotate: 4deg; } }
body.rd.ap[data-temporada] .category-block { padding-top: 54px; }

.cine-vela { position: absolute; top: -16px; left: 50%; width: 22px; height: 32px; translate: -50% 0; pointer-events: none; z-index: 2; }
.cine-vela svg { width: 100%; height: 100%; overflow: visible; }
.cine-vela .flama { transform-box: fill-box; transform-origin: 50% 100%; animation: cineFlama .9s ease-in-out infinite alternate; }
.cine-vela .halo { animation: cineHalo 1.6s ease-in-out infinite alternate; }
@keyframes cineFlama { 0% { scale: 1 1; rotate: -3deg; } 50% { scale: .9 1.12; } 100% { scale: 1.05 .94; rotate: 3deg; } }
@keyframes cineHalo { from { opacity: .45; } to { opacity: .85; } }
body.rd.ap[data-temporada]:not([data-temporada="navidad"]) .category-block + .category-block {
  background: linear-gradient(90deg, transparent, var(--cine-acento, rgba(201, 163, 106, .6)) 18%, var(--cine-acento, rgba(201, 163, 106, .6)) 82%, transparent) center 7.5px / calc(100% - 2 * var(--pad-x)) 1px no-repeat;
}
.cine-vela svg.latido { animation: cineLatido 1.2s ease-in-out infinite; }
.cine-vela svg.gira { animation: cineGira 9s linear infinite; }
.cine-vela svg.titila { animation: cineTitila 1.8s ease-in-out infinite alternate; }
@keyframes cineLatido { 0%, 100% { scale: 1; } 15% { scale: 1.2; } 30% { scale: 1; } 45% { scale: 1.12; } }
@keyframes cineGira { to { rotate: 360deg; } }
@keyframes cineTitila { from { opacity: .6; scale: .9; filter: drop-shadow(0 0 2px #ffd400); } to { opacity: 1; scale: 1.1; filter: drop-shadow(0 0 8px #ffd400); } }
.cine-tira-cuerda::before { height: 5px !important; border-radius: 3px; background: repeating-linear-gradient(115deg, #d9c08a 0 6px, #b89a5c 6px 10px) !important; }

.cine-hero-deco { position: absolute; z-index: 4; pointer-events: none; }
.cine-hero-rama { top: var(--nav-h, 64px); right: 0; width: min(220px, 52vw); transform-origin: 100% 0; animation: cineMece 6s ease-in-out infinite alternate; }
.cine-hero-rama svg, .cine-hero-koinobori svg, .cine-hero-bambu svg { display: block; width: 100%; height: auto; overflow: visible; }
.cine-hero-koinobori { top: calc(var(--nav-h, 64px) + 40px); left: 46%; width: min(150px, 34vw); }
.cine-hero-koinobori .onda, .cine-final .onda { transform-box: fill-box; transform-origin: 0 50%; animation: cineOnda 1.6s ease-in-out infinite alternate; }
@keyframes cineOnda { from { transform: skewY(-4deg) scaleX(.94); } to { transform: skewY(4deg) scaleX(1.03); } }
.cine-hero-bambu { top: var(--nav-h, 64px); right: 0; width: min(210px, 50vw); }
.cine-hero-bambu .tanzaku { animation: cineMece 3.4s ease-in-out infinite alternate; }
.cine-hero-fuegos { inset: var(--nav-h, 64px) 0 auto 0; height: 60%; }
.cine-chispa-fuego { position: absolute; width: 5px; height: 5px; border-radius: 50%; box-shadow: 0 0 8px currentColor; }

.cine-final { position: relative; margin: 34px var(--pad-x, 20px) 0; padding: 22px 18px 24px; border-radius: 22px; text-align: center; overflow: hidden;
  background: radial-gradient(120% 90% at 50% 0%, rgba(243, 146, 0, .22), transparent 60%), #074a2b; box-shadow: inset 0 0 0 1px rgba(244, 239, 227, .1); }
.cine-final-btn { display: block; margin: 0 auto; width: 150px; padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.cine-final-btn svg { display: block; width: 100%; height: auto; overflow: visible; transform-origin: 50% 92%; animation: cineRespira 3.4s ease-in-out infinite; }
.cine-final-btn.tambalea svg { animation: cineTambalea 1.5s cubic-bezier(.3, .7, .4, 1); }
@keyframes cineRespira { 0%, 100% { rotate: -2deg; } 50% { rotate: 2deg; } }
@keyframes cineTambalea { 0% { rotate: 0; } 12% { rotate: -16deg; } 28% { rotate: 13deg; } 44% { rotate: -9deg; } 60% { rotate: 6deg; } 76% { rotate: -3deg; } 100% { rotate: 0; } }
.cine-final b { display: block; margin-top: 10px; font-family: var(--font-title, serif); font-weight: 400; font-size: 22px; color: #f4efe3; }
.cine-final span { display: block; margin-top: 4px; font-size: 13.5px; line-height: 1.45; color: rgba(244, 239, 227, .75); }
.cine-final small { display: inline-block; margin-top: 10px; padding: 5px 12px; border-radius: 999px; background: rgba(243, 146, 0, .18); color: #ffcf5a; font-weight: 700; font-size: 12px; }
.cine-chispa { position: absolute; left: 50%; top: 40%; pointer-events: none; }
.cine-final small.sale { animation: cineSale .5s cubic-bezier(.2, .8, .2, 1); }
@keyframes cineSale { from { opacity: 0; scale: .8; } }

@media (prefers-reduced-motion: reduce) {
  .cine-petalos { display: none; }
  .cine-picado svg, .cine-vela .flama, .cine-vela .halo, .cine-final-btn svg, .cine-vela svg, .cine-hero-deco, .cine-hero-deco .onda, .cine-hero-deco .tanzaku, .cine-final .onda { animation: none !important; }
}

.cine-hero-liston { top: calc(var(--nav-h, 64px) + 14px); left: 50%; translate: -50% 0; width: max-content; max-width: calc(100% - 120px); }
.cine-liston { display: flex; align-items: center; gap: 10px; padding: 8px 18px 8px 8px; border-radius: 999px; background: #c8232c; color: #fff4dc; font-weight: 800; font-size: 14px; box-shadow: 0 10px 24px rgba(0, 0, 0, .3); animation: cineListon 3s ease-in-out infinite alternate; }
.cine-liston b { display: grid; place-items: center; min-width: 34px; height: 34px; padding: 0 6px; border-radius: 999px; background: #e8b84a; color: #5c2e12; font-family: 'Shippori Mincho', serif; font-size: 15px; }
@keyframes cineListon { from { rotate: -2deg; } to { rotate: 2deg; } }
.cine-final .velas .flama { transform-box: fill-box; transform-origin: 50% 100%; animation: cineFlama .9s ease-in-out infinite alternate; }
@media (prefers-reduced-motion: reduce) { .cine-liston, .cine-final .velas .flama { animation: none; } }

.cine-p-nieve { width: 7px; height: 7px; border-radius: 50%; background: radial-gradient(circle, #fff 40%, rgba(255, 255, 255, .2) 70%, transparent); }
.cine-p-copo { width: 13px; height: 13px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cg stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M10 1v18M2.2 5.5l15.6 9M2.2 14.5l15.6-9'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat; opacity: .9; }
.cine-final .pinata { transform-box: view-box; transform-origin: 80px 0; animation: cineMece 2.6s ease-in-out infinite alternate; }
.cine-final-btn.tambalea .pinata { animation: cinePinata 1.2s cubic-bezier(.3, .7, .4, 1); }
@keyframes cinePinata { 0% { rotate: 0; } 15% { rotate: 24deg; } 35% { rotate: -18deg; } 55% { rotate: 11deg; } 75% { rotate: -5deg; } 100% { rotate: 0; } }
@media (prefers-reduced-motion: reduce) { .cine-final .pinata { animation: none !important; } }
.cine-final-btn svg:has(.pinata) { animation: none !important; }