/* Mis Pollos motion layer (v1.0.1): scroll reveals, slow photo zoom, hover lift.
   Content stays visible without JS; everything is off for prefers-reduced-motion. */

/* ---- Scroll reveals (only once JS adds .mp-motion to <html>) ---- */
.mp-motion .mp-reveal{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1);transition-delay:var(--mp-d,0ms);will-change:opacity,transform}
.mp-motion .mp-reveal.mp-left{transform:translateX(-36px)}
.mp-motion .mp-reveal.mp-zoom{transform:scale(.94)}
.mp-motion .mp-reveal.is-in{opacity:1;transform:none}

/* Headlines rise out of a mask, line by line */
.mp-motion .mp-line{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.06em}
.mp-motion .mp-line > .mp-line-in{display:inline-block;transform:translateY(105%);transition:transform 1s cubic-bezier(.16,.84,.3,1);transition-delay:var(--mp-d,0ms)}
.mp-motion .is-in .mp-line > .mp-line-in,.mp-motion .mp-line.is-in > .mp-line-in{transform:none}

/* Fire word: slow warm shimmer */
.fire-word{background:linear-gradient(90deg,var(--fire,#b71c1c) 0%,#ff7a1a 45%,var(--fire,#b71c1c) 70%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:mp-shimmer 6s ease-in-out infinite}
@keyframes mp-shimmer{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

/* ---- Slow zoom (Ken Burns) ---- */
.hero-photo-slot{overflow:hidden}
.hero-photo-slot img{animation:mp-kb 22s ease-in-out infinite alternate;transform-origin:50% 40%}
.mp-kb{position:relative;overflow:hidden;border-radius:8px;box-shadow:0 10px 26px rgba(43,26,18,.16)}
.mp-kb img{box-shadow:none!important;border-radius:0!important;animation:mp-kb 20s ease-in-out infinite alternate;transition:filter .5s ease}
.mp-kb:nth-child(2) img{animation-delay:-5s;transform-origin:30% 60%}
.mp-kb:nth-child(3) img{animation-delay:-10s;transform-origin:70% 40%}
.mp-kb:nth-child(4) img{animation-delay:-15s;transform-origin:40% 70%}
@keyframes mp-kb{from{transform:scale(1)}to{transform:scale(1.12)}}

/* ---- Hover / tap effects ---- */
.mp-kb{transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s ease}
.mp-kb::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(43,26,18,.35));opacity:0;transition:opacity .45s ease;pointer-events:none}
.mp-kb:hover{transform:translateY(-6px);box-shadow:0 22px 40px rgba(43,26,18,.28)}
.mp-kb:hover::after{opacity:1}
.mp-kb:hover img{filter:saturate(1.15) contrast(1.05)}
.step-card,.review-card,.info-block{transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s ease}
.step-card:hover,.review-card:hover{transform:translateY(-6px);box-shadow:0 18px 36px rgba(43,26,18,.18)}
.step-num{transition:transform .5s cubic-bezier(.3,1.6,.5,1)}
.step-card:hover .step-num{transform:scale(1.12) rotate(-6deg)}
.dish{transition:background-color .3s ease,transform .3s ease;border-radius:8px}
.dish:hover{background-color:rgba(255,255,255,.55);transform:translateX(4px)}
.btn,.add-btn,.call-btn{transition:transform .25s ease,box-shadow .25s ease,background-color .25s ease,color .25s ease}
.btn:hover,.call-btn:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(183,28,28,.28)}
.brand-logo{transition:transform .5s cubic-bezier(.3,1.6,.5,1)}
.brand:hover .brand-logo,a:hover > .brand-logo{transform:rotate(-8deg) scale(1.06)}

/* Menu dishes fade up as they render (works after tab switches too) */
.dish{animation:mp-up .6s cubic-bezier(.2,.7,.2,1) both}
.dish:nth-child(2){animation-delay:.06s}.dish:nth-child(3){animation-delay:.12s}.dish:nth-child(4){animation-delay:.18s}
.dish:nth-child(5){animation-delay:.24s}.dish:nth-child(6){animation-delay:.3s}.dish:nth-child(n+7){animation-delay:.36s}
@keyframes mp-up{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion: reduce){
  .mp-motion .mp-reveal,.mp-motion .mp-line > .mp-line-in{opacity:1!important;transform:none!important;transition:none!important}
  .hero-photo-slot img,.mp-kb img,.dish,.fire-word{animation:none!important}
  .mp-kb:hover,.step-card:hover,.review-card:hover,.dish:hover,.btn:hover{transform:none}
}

.photo-credit{margin-top:12px;font-size:.8rem;opacity:.65;text-align:right;font-family:"DM Sans",sans-serif}

/* v1.0.3: keep gallery tiles 4:3 (the img width/height attributes were overriding aspect-ratio) */
.gallery-grid img{height:auto!important;aspect-ratio:4/3;object-fit:cover}
.gallery-grid .mp-kb{aspect-ratio:4/3}
.gallery-grid .mp-kb img{height:100%!important;width:100%}