/* ============================================================
   ROSITAFOOD V63 — CINEMATIC MOTION SYSTEM
   Global content-page polish. Header + promo remain structurally untouched.
   ============================================================ */
:root{
  --cine-accent:#c51f3d;
  --cine-accent-2:#f1bb32;
  --cine-warm:#6f3a22;
  --cine-cream:#fff8ed;
  --cine-ink:#2b1b14;
  --cine-mx:50vw;
  --cine-my:45vh;
}

body.cinematic-v63{
  background:
    radial-gradient(circle at 12% 8%,rgba(243,189,73,.09),transparent 22%),
    radial-gradient(circle at 88% 16%,rgba(197,31,61,.07),transparent 20%),
    linear-gradient(180deg,#fffdf9 0%,#fbf6ee 48%,#fffdf9 100%);
}

/* Scope cinematic system to page content, NOT approved header or promo bar. */
body.cinematic-v63 main{
  position:relative;
  isolation:isolate;
  overflow:clip;
  --cine-depth:0px;
}
body.cinematic-v63 main::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-3;
  pointer-events:none;
  background:
    radial-gradient(circle at var(--cine-mx) var(--cine-my), color-mix(in srgb,var(--cine-accent-2) 17%,transparent), transparent 20%),
    radial-gradient(circle at 8% 28%,color-mix(in srgb,var(--cine-accent) 10%,transparent),transparent 18%),
    radial-gradient(circle at 90% 68%,color-mix(in srgb,var(--cine-warm) 10%,transparent),transparent 20%),
    linear-gradient(120deg,rgba(255,255,255,.58),rgba(248,237,224,.18),rgba(255,255,255,.54));
  transform:translate3d(0,var(--cine-depth),0) scale(1.03);
  animation:cineAtmosphereDrift 16s ease-in-out infinite alternate;
}
body.cinematic-v63 main::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  pointer-events:none;
  opacity:.30;
  background-image:
    radial-gradient(circle at 20% 40%,rgba(255,255,255,.34) 0 1px,transparent 1.5px),
    radial-gradient(circle at 70% 30%,rgba(104,56,29,.12) 0 1px,transparent 1.4px),
    radial-gradient(circle at 45% 80%,rgba(197,31,61,.10) 0 1px,transparent 1.4px);
  background-size:34px 34px,47px 47px,59px 59px;
  animation:cineGrainTravel 22s linear infinite;
  mix-blend-mode:multiply;
}

/* Never restyle approved promo bar itself. */
body.cinematic-v63 main > .micro-promo{
  position:relative;
  z-index:20;
}

/* Reveal animation applied by JS to content sections/cards/images. */
.cine-reveal{
  opacity:0;
  transform:translate3d(0,34px,0) scale(.985);
  filter:blur(7px);
  transition:
    opacity .85s cubic-bezier(.2,.72,.2,1),
    transform .95s cubic-bezier(.18,.8,.2,1),
    filter .8s ease;
  will-change:opacity,transform,filter;
}
.cine-reveal.cine-visible{
  opacity:1;
  transform:translate3d(0,0,0) scale(1);
  filter:blur(0);
}
.cine-reveal[data-cine-delay="1"]{transition-delay:.08s}
.cine-reveal[data-cine-delay="2"]{transition-delay:.16s}
.cine-reveal[data-cine-delay="3"]{transition-delay:.24s}

/* Premium image/card micro-motion */
body.cinematic-v63 main img:not(.promo-marquee img){
  transition:transform .65s cubic-bezier(.2,.72,.2,1),filter .65s ease,box-shadow .65s ease;
}
body.cinematic-v63 main a:hover img,
body.cinematic-v63 main article:hover img,
body.cinematic-v63 main [class*="card"]:hover img,
body.cinematic-v63 main [class*="panel"]:hover img{
  transform:scale(1.035);
  filter:saturate(1.08) contrast(1.03);
}

/* Cinematic accents behind page sections */
.cine-section{
  position:relative;
  z-index:1;
}
.cine-section::before{
  content:"";
  position:absolute;
  left:4%;right:4%;bottom:-8px;
  height:1px;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--cine-accent-2) 38%,transparent),color-mix(in srgb,var(--cine-accent) 32%,transparent),transparent);
  transform:scaleX(.75);
  opacity:.34;
}

/* Floating themed icon atmosphere */
.rosita-cine-icons{
  position:fixed;
  inset:150px 0 0 0;
  z-index:120;
  pointer-events:none;
  overflow:hidden;
}
.rosita-cine-icon{
  position:absolute;
  width:58px;
  height:58px;
  display:grid;
  place-items:center;
  border-radius:19px;
  color:var(--cine-icon-color,var(--cine-accent));
  background:
    radial-gradient(circle at 30% 18%,rgba(255,255,255,.88),rgba(255,255,255,.38) 28%,transparent 32%),
    linear-gradient(145deg,rgba(255,255,255,.72),rgba(248,232,211,.44));
  border:1px solid rgba(255,255,255,.75);
  box-shadow:0 18px 30px rgba(57,31,18,.10),inset 0 1px 0 rgba(255,255,255,.88);
  opacity:.58;
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
  animation:cineIconFloat 7.5s ease-in-out infinite;
}
.rosita-cine-icon svg{
  width:31px;height:31px;
  fill:none;
  stroke:currentColor;
  stroke-width:2.1;
  stroke-linecap:round;
  stroke-linejoin:round;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.10));
}
.rosita-cine-icon:nth-child(1){left:18px;top:12%;animation-delay:-1.2s;--cine-icon-color:var(--cine-accent)}
.rosita-cine-icon:nth-child(2){right:20px;top:29%;animation-delay:-3.8s;--cine-icon-color:var(--cine-accent-2)}
.rosita-cine-icon:nth-child(3){left:30px;top:57%;animation-delay:-5.1s;--cine-icon-color:var(--cine-warm)}
.rosita-cine-icon:nth-child(4){right:30px;top:73%;animation-delay:-2.4s;--cine-icon-color:var(--cine-accent)}
.rosita-cine-icon:nth-child(5){right:10%;top:8%;width:42px;height:42px;border-radius:15px;opacity:.38;animation-delay:-4.6s}

/* Moving light streaks */
.cine-light-sweep{
  position:fixed;
  z-index:80;
  pointer-events:none;
  width:34vw;
  height:120vh;
  top:-10vh;
  left:-42vw;
  transform:skewX(-16deg);
  background:linear-gradient(90deg,transparent,rgba(255,220,146,.05),rgba(255,255,255,.14),rgba(255,220,146,.05),transparent);
  filter:blur(6px);
  animation:cineSweep 15s ease-in-out infinite;
}

/* Page-specific atmosphere variables */
body.cine-home{--cine-accent:#c51f3d;--cine-accent-2:#efbc36;--cine-warm:#6d3c25}
body.cine-menu{--cine-accent:#c42536;--cine-accent-2:#efb62d;--cine-warm:#754625}
body.cine-taqueria{--cine-accent:#c82236;--cine-accent-2:#f1a82c;--cine-warm:#5a2b18}
body.cine-tortilleria{--cine-accent:#b91f37;--cine-accent-2:#e9bd48;--cine-warm:#8b5a28}
body.cine-carniceria{--cine-accent:#a81931;--cine-accent-2:#d99032;--cine-warm:#4c231d}
body.cine-panaderia{--cine-accent:#b94831;--cine-accent-2:#e7b45c;--cine-warm:#765033}
body.cine-groceries{--cine-accent:#b3253d;--cine-accent-2:#d9aa36;--cine-warm:#56713b}
body.cine-nosotros{--cine-accent:#bd2444;--cine-accent-2:#d9ae52;--cine-warm:#6c4636}
body.cine-ubicacion{--cine-accent:#b8233c;--cine-accent-2:#e2b13a;--cine-warm:#58453a}
body.cine-contacto{--cine-accent:#bd2142;--cine-accent-2:#e8b83c;--cine-warm:#5e4339}

/* Cinematic hover glow for actionable content only */
body.cinematic-v63 main a:not(.promo-fixed-cta):not(.promo-marquee a),
body.cinematic-v63 main button:not(.promo-marquee button){
  transition:transform .25s ease,filter .25s ease,box-shadow .25s ease;
}
body.cinematic-v63 main a:not(.promo-fixed-cta):not(.promo-marquee a):hover,
body.cinematic-v63 main button:not(.promo-marquee button):hover{
  filter:brightness(1.025) saturate(1.025);
}

@keyframes cineAtmosphereDrift{
  0%{transform:translate3d(-1.5%,0,0) scale(1.03)}
  50%{transform:translate3d(1.4%,-.8%,0) scale(1.045)}
  100%{transform:translate3d(-.4%,1.1%,0) scale(1.035)}
}
@keyframes cineGrainTravel{
  0%{background-position:0 0,0 0,0 0}
  100%{background-position:68px 34px,-94px 47px,118px -59px}
}
@keyframes cineIconFloat{
  0%,100%{transform:translate3d(0,0,0) rotate(-3deg) scale(1)}
  50%{transform:translate3d(0,-18px,0) rotate(4deg) scale(1.04)}
}
@keyframes cineSweep{
  0%,20%{left:-42vw;opacity:0}
  32%{opacity:.8}
  58%{left:108vw;opacity:.55}
  70%,100%{left:108vw;opacity:0}
}

@media(max-width:1100px){
  .rosita-cine-icon{width:48px;height:48px;border-radius:16px;opacity:.46}
  .rosita-cine-icon svg{width:26px;height:26px}
  .rosita-cine-icon:nth-child(1),.rosita-cine-icon:nth-child(3){left:8px}
  .rosita-cine-icon:nth-child(2),.rosita-cine-icon:nth-child(4){right:8px}
}
@media(max-width:760px){
  .rosita-cine-icons{display:none}
  .cine-light-sweep{opacity:.4}
  .cine-reveal{transform:translate3d(0,22px,0);filter:blur(4px)}
}
@media(prefers-reduced-motion:reduce){
  .cine-reveal,.cine-reveal.cine-visible,
  .rosita-cine-icon,.cine-light-sweep,
  body.cinematic-v63 main::before,body.cinematic-v63 main::after{
    animation:none!important;
    transition:none!important;
    transform:none!important;
    opacity:1!important;
    filter:none!important;
  }
}