/* FFixa · cine.css — strato di animazioni "cinema" condiviso dalle demo.
   Si attiva solo con html.cine (aggiunta da cine.js). Usa solo transform/opacity/filter. */
:root{--cine-ink:#111;--cine-accent:#fff;--cine-ease:cubic-bezier(.16,1,.3,1);--cine-ease-io:cubic-bezier(.77,0,.18,1)}

/* 1 · Apertura a sipario: una linea si traccia al centro, poi lo schermo si apre */
html.cine-curtain body::before,html.cine-curtain body::after{content:"";position:fixed;left:0;right:0;z-index:10000;height:50.5vh;background:var(--cine-ink);pointer-events:none;will-change:transform}
html.cine-curtain body::before{top:0;background:linear-gradient(var(--cine-accent),var(--cine-accent)) 50% 100%/0% 2px no-repeat,var(--cine-ink)}
html.cine-curtain body::after{bottom:0}
html.cine-open body::before{animation:cine-line .55s var(--cine-ease-io) forwards,cine-up 1.05s .5s var(--cine-ease-io) forwards}
html.cine-open body::after{animation:cine-down 1.05s .5s var(--cine-ease-io) forwards}
@keyframes cine-line{to{background-size:100% 2px,auto}}
@keyframes cine-up{to{transform:translateY(-101%)}}
@keyframes cine-down{to{transform:translateY(101%)}}
/* finché il sipario è chiuso, le animazioni della hero aspettano */
html.cine-hold .hero,html.cine-hold .hero *{animation-play-state:paused!important}

/* 2 · Grana pellicola, quasi impercettibile */
.cine-grain{position:fixed;left:-50%;top:-50%;width:200%;height:200%;z-index:9998;pointer-events:none;opacity:.05;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .7 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:cine-grain 1s steps(6) infinite}
html.cine-dark .cine-grain{opacity:.06;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' 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 .7 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@keyframes cine-grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-4%)}60%{transform:translate(-4%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}
@media(max-width:760px){.cine-grain{display:none}}

/* 3 · Barra di avanzamento sottilissima */
.cine-bar{position:fixed;left:0;top:0;width:100%;height:2px;z-index:9999;background:var(--cine-accent);transform-origin:0 50%;transform:scaleX(0);pointer-events:none}

/* 4 · Titoli: le parole emergono da una maschera ruotando in 3D */
.cine-split .cw{display:inline-block;overflow:clip;vertical-align:bottom;padding:.1em .06em .14em;margin:-.1em -.06em -.14em;perspective:700px}
.cine-split .cwi{display:inline-block;transform-origin:50% 100%;transform:translate3d(0,108%,0) rotateX(-75deg);opacity:0;
  transition:transform 1.25s var(--cine-ease),opacity .9s var(--cine-ease);transition-delay:calc(var(--i)*55ms + .05s)}
.cine-split.cine-in .cwi{transform:none;opacity:1}

/* 5 · Comparsa dei blocchi: arrivano dalla profondità, inclinati, e si raddrizzano */
html.cine :is(.rv,.cine-rv){transform-origin:50% 0;transition:opacity 1.1s var(--cine-ease),transform 1.35s var(--cine-ease),filter 1.1s var(--cine-ease),box-shadow .5s,background .3s,border-color .3s,color .3s}
html.cine :is(.rv,.cine-rv):not(.in){opacity:0;transform:perspective(1100px) translate3d(0,70px,-80px) rotateX(16deg);filter:blur(10px)}
html.cine .cine-rv.in{opacity:1;transform:none;filter:none}
@media(max-width:760px){html.cine :is(.rv,.cine-rv):not(.in){filter:none;transform:perspective(900px) translate3d(0,48px,0) rotateX(10deg)}}

/* 6 · Card con inclinazione 3D, riflesso di luce e profondità degli elementi interni */
.cine-tilt{transform-style:preserve-3d}
.cine-tilt>:is(h3,h4,b,strong,.em,.pr,.price,.ic,.yc-top,.no){transition:transform .6s var(--cine-ease)}
.cine-tilt.cine-hot>:is(h3,h4,b,strong,.pr,.price,.ic,.no){transform:translateZ(34px)}
.cine-tilt.cine-hot>:is(.em,.yc-top){transform:translateZ(18px)}
.cine-glare{position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .5s;
  background:radial-gradient(520px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,var(--cine-glare,.38)),transparent 42%);mix-blend-mode:soft-light}
html.cine-dark .cine-glare{mix-blend-mode:normal;--cine-glare:.09}
.cine-hot>.cine-glare{opacity:1}

/* 7 · Hero: entrata dalla profondità (per le demo che non hanno già la loro) */
.cine-enter{animation:cine-enter 1.3s var(--cine-ease) backwards;animation-delay:calc(var(--i,0)*90ms + .12s)}
@keyframes cine-enter{from{opacity:0;transform:perspective(1000px) translate3d(0,46px,-60px) rotateX(-18deg);filter:blur(10px)}}
.cine-enter-art{animation:cine-art-in 1.9s var(--cine-ease) backwards;animation-delay:.3s}
@keyframes cine-art-in{from{opacity:0;transform:perspective(1200px) translate3d(0,40px,-280px) rotateY(-24deg) rotateX(8deg)}}

/* 8 · Hero: profondità per l'arte in primo piano */
html.cine .hero{perspective:1400px}
.cine-art{will-change:transform;transition:rotate .9s var(--cine-ease)}
.cine-art.cine-live{transition:none}

@media(prefers-reduced-motion:reduce){.cine-grain,.cine-bar{display:none}}