/* ═══ FUKUROLL · EFECTOS ═══
   Solo presentación: no cambia el carrito ni los pedidos. Todo se apaga con prefers-reduced-motion. */
@property --ang{syntax:'<angle>';initial-value:0deg;inherits:false}

/* Barra de progreso de lectura */
.fx-progreso{position:fixed;top:0;left:0;right:0;height:3px;z-index:400;transform-origin:0 50%;transform:scaleX(0);
  background:linear-gradient(90deg,var(--cta),var(--gold));box-shadow:0 0 12px rgba(238,28,46,.6);pointer-events:none}

/* ── Héroe ── */
.branch-hero{isolation:isolate;min-height:92vh;justify-content:center}
.fx-aurora{position:absolute;inset:-10%;z-index:-2;pointer-events:none;filter:blur(70px);opacity:.55}
.fx-aurora i{position:absolute;border-radius:50%;mix-blend-mode:screen;animation:fx-flota 18s ease-in-out infinite}
.fx-aurora i:nth-child(1){width:42vw;height:42vw;left:-6vw;top:8%;background:radial-gradient(circle,rgba(238,28,46,.75),transparent 65%)}
.fx-aurora i:nth-child(2){width:36vw;height:36vw;right:-4vw;top:-6%;background:radial-gradient(circle,rgba(255,210,31,.55),transparent 65%);animation-delay:-6s;animation-duration:22s}
.fx-aurora i:nth-child(3){width:30vw;height:30vw;left:35%;bottom:-12%;background:radial-gradient(circle,rgba(238,28,46,.45),transparent 65%);animation-delay:-11s}
@keyframes fx-flota{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(4vw,-3vw) scale(1.08)}66%{transform:translate(-3vw,3vw) scale(.94)}}
/* Luz que sigue al cursor */
.branch-hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,30%),rgba(255,210,31,.10),transparent 60%)}

/* Escenario del logo: levita y se inclina con el cursor */
.fx-escenario{position:relative;width:min(300px,70vw);aspect-ratio:1;display:grid;place-items:center;margin:0 0 .6rem;perspective:900px}
.fx-escenario .fuku-hero-logo{position:relative;z-index:2;width:78%;margin:0;transition:transform .2s ease-out;animation:fx-levita 6s ease-in-out infinite;
  filter:drop-shadow(0 18px 40px rgba(238,28,46,.35))}
@keyframes fx-levita{0%,100%{translate:0 0}50%{translate:0 -14px}}
.fx-sombra{position:absolute;bottom:2%;width:60%;height:9%;border-radius:50%;background:radial-gradient(rgba(238,28,46,.45),transparent 70%);filter:blur(8px);animation:fx-sombra 6s ease-in-out infinite}
@keyframes fx-sombra{50%{transform:scale(.82);opacity:.6}}
/* Título palabra por palabra + brillo en movimiento */
.fx-palabra{display:inline-block;opacity:0;transform:translateY(.4em) rotate(2deg);filter:blur(8px);animation:fx-palabra .8s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes fx-palabra{to{opacity:1;transform:none;filter:none}}
.fx-grad{background:linear-gradient(100deg,#fff 0%,var(--gold) 35%,var(--cta) 65%,#fff 100%);background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:fx-brillo 6s ease-in-out infinite}
.fx-palabra.fx-grad{animation:fx-palabra .8s cubic-bezier(.2,.8,.2,1) forwards,fx-brillo 6s ease-in-out .8s infinite}
@keyframes fx-brillo{0%,100%{background-position:0 0}50%{background-position:100% 0}}

/* Botones del héroe: magnéticos y con barrido de luz */
.hero-mode-btn{position:relative;overflow:hidden;transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s,border-color .25s}
.hero-mode-btn::after{content:"";position:absolute;top:0;bottom:0;width:40%;left:-60%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);animation:fx-barre 4.5s ease-in-out infinite}
.hero-mode-btn:nth-child(2)::after{animation-delay:-2.2s}
@keyframes fx-barre{0%,60%{left:-60%}100%{left:130%}}

/* ── Cintas cruzadas ── */
.fx-cintas{position:relative;height:120px;overflow:hidden;margin:-30px 0 0;z-index:2;pointer-events:none}
.fx-cinta{position:absolute;left:-5%;right:-5%;top:50%;display:flex;overflow:hidden;padding:.7rem 0;box-shadow:0 10px 30px rgba(0,0,0,.45)}
.fx-cinta.roja{background:var(--cta);transform:translateY(-50%) rotate(-3deg)}
.fx-cinta.amarilla{background:var(--gold);transform:translateY(-50%) rotate(2.5deg)}
.fx-pista{display:flex;flex-shrink:0;gap:1.6rem;padding-right:1.6rem;animation:fx-corre 26s linear infinite;
  font-family:"Archivo Black",sans-serif;font-size:1rem;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.fx-cinta.roja .fx-pista{color:#fff}
.fx-cinta.amarilla .fx-pista{color:#0b0b0b;animation-direction:reverse;animation-duration:30s}
.fx-pista span::after{content:"✦";margin-left:1.6rem;opacity:.85}
@keyframes fx-corre{to{transform:translateX(-100%)}}

/* ── Menú ── */
.section-title{background:linear-gradient(100deg,var(--cream) 0%,var(--gold) 45%,var(--cream) 90%);background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent!important;animation:fx-brillo 9s ease-in-out infinite}
.fx-on .section-line{transform:scaleX(0);transition:transform .9s cubic-bezier(.2,.8,.2,1) .2s}
.fx-on .menu-section.visible .section-line{transform:scaleX(1)}

/* Aparición escalonada de platillos */
.fx-on .fx-rv{opacity:0;transform:translateY(18px) scale(.99);filter:blur(1.5px);
  transition:opacity .55s cubic-bezier(.2,.8,.2,1),transform .55s cubic-bezier(.2,.8,.2,1),filter .4s;transition-delay:var(--d,0s)}
.fx-on .fx-rv.fx-in{opacity:1;transform:none;filter:none}

/* Tarjetas: luz bajo el cursor */
.menu-item{position:relative;isolation:isolate;overflow:hidden}
.menu-item::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .3s;
  background:radial-gradient(260px circle at var(--x,50%) var(--y,50%),rgba(238,28,46,.16),transparent 65%)}
.menu-item:hover::after{opacity:1}


/* Sello Fuku: borde animado */
.fuku-favs .menu-item{border:1px solid transparent!important;
  background:linear-gradient(var(--surf-1),var(--surf-1)) padding-box,
             conic-gradient(from var(--ang),var(--cta),var(--gold),rgba(255,255,255,.06) 40%,rgba(255,255,255,.06) 60%,var(--cta)) border-box!important;
  animation:fx-borde 5s linear infinite}
@keyframes fx-borde{to{--ang:360deg}}
.item-badge{position:relative;overflow:hidden}
.item-badge::after{content:"";position:absolute;inset:0;width:40%;left:-60%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent);animation:fx-barre 3.5s ease-in-out infinite}

/* Agregar al carrito: rebote, onda y "+1" que vuela al carrito */
.add-btn.fx-pop{animation:fx-pop .45s cubic-bezier(.2,.8,.2,1)}
@keyframes fx-pop{30%{transform:scale(1.35) rotate(-8deg)}60%{transform:scale(.9)}}
.fx-onda{position:fixed;z-index:500;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;border:2px solid var(--gold);pointer-events:none;animation:fx-onda .6s ease-out forwards}
@keyframes fx-onda{to{transform:scale(5);opacity:0}}
.fx-vuela{position:fixed;z-index:500;pointer-events:none;font-family:"Archivo Black",sans-serif;font-size:.85rem;color:#0b0b0b;
  background:var(--gold);border-radius:999px;padding:.15rem .5rem;box-shadow:0 6px 18px rgba(255,210,31,.45);
  transition:transform .75s cubic-bezier(.5,-.3,.6,1),opacity .75s}
.fx-chispa{position:fixed;z-index:500;width:6px;height:6px;border-radius:50%;pointer-events:none;transition:transform .6s cubic-bezier(.1,.7,.3,1),opacity .6s}
.cart-bubble.fx-brinca{animation:fx-brinca .5s cubic-bezier(.2,.8,.2,1)}
@keyframes fx-brinca{30%{transform:scale(1.18) rotate(-4deg)}60%{transform:scale(.95) rotate(2deg)}}

@media (prefers-reduced-motion:reduce){
  .fx-aurora i,.fx-escenario .fuku-hero-logo,.fx-sombra,.fx-pista,.hero-mode-btn::after,
  .section-title,.fuku-favs .menu-item,.item-badge::after,.fx-grad{animation:none!important}
  .fx-palabra{animation:none;opacity:1;transform:none;filter:none}
  .fx-on .fx-rv{opacity:1;transform:none;filter:none}
}

/* ── Fotos de platillos ── */
.menu-item.has-img{align-items:center}
.item-thumb{position:relative;flex-shrink:0;width:121px;height:121px;padding:0;border:0;border-radius:16px;overflow:hidden;cursor:zoom-in;background:#151515;
  box-shadow:0 10px 24px -12px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.08)}
.item-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.menu-item:hover .item-thumb img{transform:scale(1.08)}
.item-thumb::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
@media(max-width:420px){.item-thumb{width:107px;height:107px;border-radius:14px}}
/* Escritorio: tarjetas en dos columnas → la foto va arriba, a todo lo ancho, y el texto respira */
@media(min-width:768px){
  .menu-item.has-img{flex-wrap:wrap;align-items:flex-start}
  .menu-item.has-img .item-thumb{width:100%;height:auto;aspect-ratio:16/10;border-radius:16px;margin-bottom:.2rem}
  .menu-item.has-img .item-info{flex:1 1 0;min-width:0}
  /* Sello Fuku va a una sola columna ancha: ahí la foto queda a un lado, mediana */
  .fuku-favs .menu-item.has-img{flex-wrap:nowrap;align-items:center}
  .fuku-favs .menu-item.has-img .item-thumb{width:160px;height:160px;aspect-ratio:auto;margin-bottom:0}
}
/* Visor: la foto aparece cuando ya cargó (nunca la anterior) */
#lightbox-img{opacity:0;transition:opacity .18s ease}
#lightbox-img.lb-ready{opacity:1}

/* ── Héroe: video del rollo de fondo (vertical en celular, horizontal en escritorio; la foto fija es el respaldo) ── */
.fx-hero-foto{position:absolute;inset:0;z-index:-3;pointer-events:none;background:#0b0b0b url(/img/hero-desktop-poster.jpg) right center/cover no-repeat}
.fx-hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:right center;opacity:0;transition:opacity .6s}
.fx-hero-video.on{opacity:1}
@media(min-width:768px){
  /* Texto a la izquierda (zona oscura del video), rollo libre a la derecha */
  .fx-hero-foto::after{content:"";position:absolute;inset:0;
    background:linear-gradient(90deg,rgba(11,11,11,.82) 0%,rgba(11,11,11,.55) 30%,rgba(11,11,11,0) 58%),
      linear-gradient(180deg,rgba(11,11,11,.35) 0%,rgba(11,11,11,0) 22%,rgba(11,11,11,0) 78%,#0b0b0b 100%)}
  .branch-hero{min-height:100vh;align-items:flex-start;justify-content:center;text-align:left;padding:6.5rem 5vw 5rem}
  .branch-hero-content{max-width:min(46%,620px);padding:0;align-items:flex-start}
  .fx-escenario{width:min(200px,16vw);margin:0 0 .4rem}
  .branch-eyebrow{align-self:flex-start}
  .branch-title{align-items:flex-start;font-size:clamp(3.4rem,6.6vw,6.6rem)}
  .hero-order-modes{align-items:stretch;align-self:flex-start}
  .fx-aurora{opacity:.22}
}
@media(max-width:767px){
  .fx-hero-foto{background-image:url(/img/hero-movil-poster.jpg);background-position:center bottom}
  .fx-hero-video{object-position:center bottom}
  /* Oscurece arriba (texto legible) y funde abajo con la página */
  .fx-hero-foto::after{content:"";position:absolute;inset:0;
    background:linear-gradient(90deg,rgba(11,11,11,.6) 0%,rgba(11,11,11,.25) 55%,rgba(11,11,11,0) 80%),
      linear-gradient(180deg,rgba(11,11,11,.55) 0%,rgba(11,11,11,.2) 40%,rgba(11,11,11,0) 62%,rgba(11,11,11,.35) 88%,#0b0b0b 100%)}
  .branch-hero{min-height:100svh;justify-content:flex-start;padding-top:9rem}
  /* Bloque compacto arriba (zona oscura del video) para que el rollo quede libre abajo */
  .fx-escenario{display:none}   /* el logo ya está en la barra de arriba */
  .fuku-tagline{font-size:1.05rem;margin:.5rem 0 1.1rem}
  .hero-mode-btn{font-size:.8rem;padding:.75rem 1.1rem}
  /* Logo de la barra: grande y centrado mientras se ve el héroe; al bajar vuelve a la esquina, chico */
  .top-nav .nav-logo{position:absolute;left:50%;top:.5rem;height:118px;transform:translateX(-50%);
    transition:height .35s cubic-bezier(.2,.8,.2,1),left .35s cubic-bezier(.2,.8,.2,1),transform .35s cubic-bezier(.2,.8,.2,1),top .35s;
    filter:drop-shadow(0 10px 26px rgba(238,28,46,.35))}
  .top-nav{min-height:56px}
  .top-nav .nav-right{margin-left:auto}
  .top-nav.scrolled .nav-logo{left:.8rem;top:50%;height:44px;transform:translateY(-50%);filter:none}
  .fuku-tagline{text-shadow:0 2px 12px rgba(0,0,0,.9)}
  .hero-mode-btn{background:rgba(11,11,11,.62)!important;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
  .fx-aurora{opacity:.3}
}

/* ── SEO: texto para lectores de pantalla y bloque "Sushi en Culiacán" ── */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.fuku-acerca{max-width:680px;margin:0 auto;padding:3rem 1.4rem 1rem;text-align:center}
.fuku-acerca h2{font-family:"Archivo Black",sans-serif;font-size:clamp(1.5rem,5.5vw,2.3rem);line-height:1.1;color:var(--cream);margin:.5rem 0 1rem}
.fuku-acerca p{color:var(--textDim);font-size:.95rem;line-height:1.7;margin:0 0 .8rem}

/* Pie: "Operado por STRYV" → página de STRYV */
.footer-stryv{display:inline-flex;align-items:center;gap:.5rem;margin-top:.9rem;padding:.5rem .95rem;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);
  color:rgba(245,245,245,.72);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;transition:background .2s,border-color .2s,color .2s}
.footer-stryv b{color:#fff;font-weight:800;letter-spacing:.18em}
.footer-stryv:hover{background:rgba(255,255,255,.09);border-color:rgba(255,210,31,.45);color:#fff}
.fs-dot{width:7px;height:7px;border-radius:50%;background:#22C55E;box-shadow:0 0 8px rgba(34,197,94,.7)}