/* =====================================================================
   Luna de México — PREMIUM LAYER (v4)
   Loads AFTER style.css. Written against the real style.css selectors.
   Additive only: delete this file + luna-enhance.js (and their <link>/<script>) to revert.
   Motion = transform / opacity / translate / scale only (GPU-friendly).
   style.css already disables animation + transition for prefers-reduced-motion.
   ===================================================================== */
:root{
  --lx-ease:cubic-bezier(.22,.61,.36,1);
  --lx-out:cubic-bezier(.16,1,.3,1);
  --lx-glow:rgba(240,185,77,.16);
}
@keyframes lxPageIn{from{opacity:0}to{opacity:1}}
@keyframes lxFade{from{opacity:0}to{opacity:1}}
@keyframes lxUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes lxKen{from{scale:1;translate:0 0}to{scale:1.07;translate:-1.2% -.8%}}
@keyframes lxKenSoft{from{scale:1}to{scale:1.05}}
@keyframes lxHaze{from{translate:-4% 0}to{translate:6% -1.5%}}

/* ---------- Base: page fade, skip link, focus, scroll lock ---------- */
@media (prefers-reduced-motion:no-preference){
  body{animation:lxPageIn .4s var(--lx-ease) backwards;}   /* backwards = never locks opacity afterwards */
  body.lx-leaving{opacity:0; transition:opacity .22s ease;}
}
.lx-skip-link{position:absolute; left:-9999px; top:8px; z-index:10000; padding:12px 18px; background:var(--gold); color:var(--ink); font-weight:700; border-radius:4px;}
.lx-skip-link:focus{left:12px;}
body.lx-nav-open{overflow:hidden;}
a:focus-visible,button:focus-visible,.gal-tile:focus-visible,summary:focus-visible{outline:2px solid var(--gold); outline-offset:3px; border-radius:4px;}
h1,h2{text-wrap:balance;}
p{text-wrap:pretty;}

/* very light film grain, desktop only (cheap, fixed, non-interactive) */
@media (min-width:901px){
  body::after{content:""; position:fixed; inset:0; z-index:2; pointer-events:none; opacity:.045; mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");}
}

/* ---------- Header ----------
   BUGFIX: style.css puts backdrop-filter on header.solid. A filtered ancestor becomes the containing block of
   position:fixed children, so the mobile drawer (nav.links, fixed) collapsed to header height after scrolling.
   The blur now lives on a pseudo-element, so the drawer stays full-screen. */
header.solid{background:transparent; -webkit-backdrop-filter:none; backdrop-filter:none;}
header::before{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:0; transition:opacity .4s ease;
  background:rgba(20,9,33,.92); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);}
header.solid::before{opacity:1;}
.burger{min-width:44px; min-height:44px; align-items:center; justify-content:center;}
@media (max-width:1180px){
  nav.links a{min-height:44px; display:flex; align-items:center;}
  nav.links{overflow-y:auto; height:100vh; height:100dvh;}
}

/* ---------- Hero (home): real photo background ---------- */
.hero.has-bg{background:linear-gradient(180deg,#1a0836,#150822);}
.hero.has-bg .moon,.hero.has-bg .agave-crest,.hero.has-bg .mesas,.hero.has-bg .stars{display:none;}
.hero-bg{position:absolute; inset:0; z-index:0; display:block; overflow:hidden; translate:0 calc(var(--lx-py,0) * 1px); will-change:translate;}
.hero-bg img{width:100%; height:100%; max-width:none; object-fit:cover; object-position:62% 55%; display:block; transform:scale(1.05); transform-origin:60% 50%;}
.hero-bg::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(21,8,34,.74) 0%, rgba(21,8,34,.46) 38%, rgba(21,8,34,0) 66%),
    linear-gradient(180deg, rgba(21,8,34,.38) 0%, rgba(21,8,34,0) 28%, rgba(21,8,34,0) 70%, rgba(21,8,34,.55) 100%);}
.hero-bg::before{content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(ellipse 38% 55% at 0% 0%, rgba(21,8,34,.7), transparent 70%),
             radial-gradient(ellipse 40% 45% at 0% 100%, rgba(21,8,34,.7), transparent 70%);}
.hero-haze{display:none;}
.hero.has-bg::after{content:""; position:absolute; inset:0; z-index:1; pointer-events:none; box-shadow:inset 0 0 180px rgba(12,5,22,.42);}

/* hero entrance (staggered) + slow cinematic drift */
@media (prefers-reduced-motion:no-preference){
  .hero-bg{animation:lxFade 1.2s var(--lx-ease) both;}
  .hero-bg img{animation:lxKen 48s ease-in-out 1s infinite alternate; will-change:scale,translate;}
  .hero.has-bg .hero-haze{display:block; position:absolute; z-index:1; top:-5%; bottom:-5%; left:-15%; width:130%; pointer-events:none; opacity:.9;
    background:
      radial-gradient(ellipse 28% 14% at 22% 62%, rgba(150,80,200,.20), transparent 70%),
      radial-gradient(ellipse 34% 12% at 55% 72%, rgba(224,36,122,.14), transparent 70%),
      radial-gradient(ellipse 26% 10% at 80% 55%, rgba(120,90,220,.16), transparent 70%),
      radial-gradient(ellipse 30% 9% at 38% 40%, rgba(247,228,204,.06), transparent 70%);
    animation:lxHaze 70s ease-in-out infinite alternate; will-change:translate;}
  .hero .hero-tag{animation:lxUp .8s var(--lx-out) .30s both;}
  .hero h1{animation:lxUp .9s var(--lx-out) .45s both;}
  .hero .hero-sub{animation:lxUp .8s var(--lx-out) .62s both;}
  .hero .hero-ctas{animation:lxUp .8s var(--lx-out) .78s both;}
  .hero .scroll-cue{animation:lxFade .8s ease 1.2s both;}
}
.scroll-cue{transition:opacity .5s ease;}
.scroll-cue.lx-hide{opacity:0 !important; pointer-events:none;}

/* desktop: copy on the calm left, moon stays right */
@media (min-width:901px){
  .hero.has-bg{justify-content:flex-start;}
  .hero.has-bg .hero-inner{width:100%; max-width:min(660px,54vw); margin-left:clamp(28px,8vw,150px); text-align:left;}
  .hero.has-bg .hero-ctas{justify-content:flex-start;}
  .hero.has-bg .hero-sub{margin-left:0; margin-right:0;}
}
/* tablet portrait */
@media (min-width:701px) and (max-width:900px){
  .hero-bg img{object-position:72% 60%;}
  .hero-bg::after{background:linear-gradient(180deg, rgba(21,8,34,.7) 0%, rgba(21,8,34,.35) 50%, rgba(21,8,34,.55) 100%);}
}
/* phone: text block on top, photo band at the bottom (never overlap) */
@media (max-width:700px){
  .hero.has-bg{display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
    height:auto; min-height:100vh; min-height:100svh; padding:0 0 calc(min(100vw,430px) - 30px);}
  .hero.has-bg .hero-inner{width:100%; max-width:520px; margin:0 auto; padding:clamp(100px,26vw,124px) 22px 8px; text-align:center;}
  .hero.has-bg .hero-tag{font-size:10.5px; letter-spacing:.2em; line-height:1.7; margin-bottom:14px;}
  .hero.has-bg h1{font-size:clamp(46px,14.5vw,68px); line-height:.98;}
  .hero.has-bg .hero-sub{font-size:15px; line-height:1.7; max-width:36ch; margin:16px auto 24px;}
  .hero.has-bg .hero-ctas{flex-direction:column; align-items:stretch; width:100%; max-width:320px; margin:0 auto; gap:12px;}
  .hero.has-bg .hero-ctas .btn{width:100%; justify-content:center; min-height:48px;}
  .hero.has-bg .scroll-cue{display:none;}
  .hero.has-bg::after{display:none;}
  .hero-bg{translate:none; will-change:auto; inset:auto 0 0 0; height:calc(min(100vw,430px) + 70px);
    -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 32%); mask-image:linear-gradient(180deg,transparent 0%,#000 32%);}
  .hero-bg img{object-position:50% 100%; transform:none;}
  .hero-bg::after{background:linear-gradient(180deg, rgba(21,8,34,.25), rgba(21,8,34,0) 40%, rgba(21,8,34,.5) 100%);}
  .hero-bg::before{display:none;}
  .hero.has-bg .hero-haze{opacity:.6;}
}
@media (max-width:360px){
  .hero.has-bg .hero-inner{padding-left:16px; padding-right:16px;}
  .hero.has-bg .hero-sub{font-size:14px;}
}
@media (max-height:480px) and (orientation:landscape){ .hero.has-bg{min-height:0;} }

/* ---------- Section reveals: staggered children inside the existing .reveal system ---------- */
@media (prefers-reduced-motion:no-preference){
  .reveal.in :is(.quick-card,.hh-card,.c-card,.order-card,.gal-tile,.story-stats > div){animation:lxUp .8s var(--lx-out) backwards; animation-delay:calc(var(--i,0) * 90ms);}
  .reveal.in :is(.quick-card,.hh-card,.c-card,.order-card,.gal-tile,.story-stats > div):nth-child(2){--i:1}
  .reveal.in :is(.quick-card,.hh-card,.c-card,.order-card,.gal-tile,.story-stats > div):nth-child(3){--i:2}
  .reveal.in :is(.quick-card,.hh-card,.c-card,.order-card,.gal-tile,.story-stats > div):nth-child(4){--i:3}
  .reveal.in :is(.quick-card,.hh-card,.c-card,.order-card,.gal-tile,.story-stats > div):nth-child(5){--i:4}
  .reveal.in :is(.quick-card,.hh-card,.c-card,.order-card,.gal-tile,.story-stats > div):nth-child(6){--i:5}
  .reveal.in :is(.quick-card,.hh-card,.c-card,.order-card,.gal-tile,.story-stats > div):nth-child(7){--i:6}
  .reveal.in :is(.quick-card,.hh-card,.c-card,.order-card,.gal-tile,.story-stats > div):nth-child(8){--i:7}
  /* very slow breathing on the Our Story photo */
  .story-art img{animation:lxKenSoft 40s ease-in-out infinite alternate;}
}

/* ---------- Micro-interactions (hover devices only) ---------- */
.quick-card{transition:transform .35s var(--lx-ease), border-color .3s ease, box-shadow .45s var(--lx-ease);}
.quick-card span{display:inline-block; transition:transform .35s var(--lx-ease);}
.c-card,.order-card{transition:transform .35s var(--lx-ease), border-color .3s ease, box-shadow .45s var(--lx-ease);}
@media (hover:hover){
  .quick-card:hover{box-shadow:0 22px 48px -18px rgba(8,3,16,.7), 0 0 36px -10px var(--lx-glow);}
  .quick-card:hover span{transform:translateX(5px);}
  .c-card:hover,.order-card:hover{transform:translateY(-4px); border-color:var(--gold-soft); box-shadow:0 22px 48px -22px rgba(8,3,16,.7), 0 0 30px -12px var(--lx-glow);}
  .foot-col a{transition:color .3s ease, transform .35s var(--lx-ease);}
  .foot-col a:hover{transform:translateX(3px);}
}

/* ---------- Forms ---------- */
.visit-form{color-scheme:dark;}
.visit-form input:focus,.visit-form select:focus,.visit-form textarea:focus{outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(240,185,77,.18);}
.visit-form input,.visit-form select,.visit-form textarea{min-height:46px; transition:border-color .3s ease, box-shadow .3s ease;}
.visit-form textarea{resize:vertical; line-height:1.6;}
.visit-form select option{background:#1b0b33; color:#fbeedd;}
@media (max-width:760px){ .visit-form{padding:28px 22px;} .visit-form input,.visit-form select,.visit-form textarea{font-size:16px;} }
.visit-form .confirm{line-height:1.6;}

/* ---------- Gallery lightbox (extends style.css .lb) ---------- */
.lb{touch-action:pan-y;}
.lb.show{animation:lxFade .3s ease;}
.lb img{max-height:78vh; max-height:78dvh;}
.lb-x{display:grid; place-items:center; line-height:1;}
.lb-nav{position:absolute; top:50%; translate:0 -50%; width:46px; height:46px; border-radius:50%; border:1px solid rgba(247,228,204,.3); background:rgba(12,5,22,.55); color:var(--paper); font-size:26px; line-height:1; cursor:pointer; display:grid; place-items:center; transition:border-color .3s ease, color .3s ease;}
.lb-nav:hover{border-color:var(--gold); color:var(--gold-soft);}
.lb-prev{left:14px;} .lb-next{right:14px;}
.lb-count{position:absolute; top:24px; left:22px; font-size:12px; letter-spacing:.2em; color:rgba(247,228,204,.6);}
@media (max-width:560px){ .lb-prev{left:6px;} .lb-next{right:6px;} .lb-nav{width:42px; height:42px;} }
body.lx-lb-open{overflow:hidden;}

/* ---------- Small-screen safety ---------- */
@media (max-width:480px){
  .c-card{padding:26px 18px;}
  .map-actions .btn,.gal-cta .btn{width:100%; justify-content:center;}
}

/* ---------- Page titles are now real <h1>: mirror the existing h2 rules from style.css ---------- */
.menu-head h1{font-size:clamp(34px,4.4vw,54px); color:var(--paper); text-wrap:balance;}
.story h1{font-size:clamp(32px,4vw,50px); color:var(--paper); margin-bottom:22px;}
.story h1 em{font-style:italic; color:var(--gold-soft);}
.hh-top h1{font-size:clamp(32px,4.2vw,52px); color:var(--paper);}
.visit h1{font-size:clamp(32px,4.2vw,50px); color:var(--ink);}
.contact-top .menu-head h1 em{font-style:italic; color:var(--gold-soft);}

/* menu: item number on Build-Your-Own boxes (same look as .dish-num) */
.build-box h4 .build-no{font-family:var(--display); font-size:13px; color:var(--gold); opacity:.8; margin-right:12px; letter-spacing:.04em;}

/* =====================================================================
   CONTACT PAGE LAYOUT (all devices)
   ===================================================================== */
[id]{scroll-margin-top:96px;}
.lx-quick{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin:30px auto 0;}
.contact-top .menu-head{margin-bottom:46px;}
.c-body{flex:1; width:100%; display:flex; flex-direction:column; align-items:center; min-width:0;}
.c-body a,.c-body .c-sub{margin-top:auto;}
.c-card a{padding:6px 0; display:inline-block;}
/* main block: map left, form right */
.lx-contact-grid{align-items:start; gap:clamp(36px,5vw,70px);}
.lx-find .map-frame{aspect-ratio:4/3.1;}
.lx-find .map-actions{margin-top:20px;}
.lx-private{margin-top:28px; padding:28px 30px; border-radius:12px; border:1px solid rgba(240,185,77,.4);
  background:radial-gradient(circle at 50% 0%, rgba(240,185,77,.14), transparent 62%), linear-gradient(165deg,#2a1550,#150822 80%); color:var(--paper);}
.lx-private h3{font-family:var(--display); font-size:22px; margin-bottom:6px; color:var(--paper);}
.lx-private p{font-size:14px; line-height:1.7; color:rgba(247,228,204,.78); margin-bottom:16px;}
.lx-private .btn{min-height:46px;}
.contact-main .visit-form{width:100%; box-sizing:border-box;}
@media (min-width:901px){ .contact-main .visit-form{position:sticky; top:104px;} }

/* tablet: 2x2 cards, single column main block, centered readable width */
@media (max-width:900px){
  .lx-contact-grid{gap:34px;}
  .lx-find,.contact-main .visit-form{max-width:720px; margin-inline:auto; width:100%;}
}
/* phone: compact horizontal cards, full-width buttons */
@media (max-width:560px){
  .lx-quick{flex-direction:column; align-items:stretch; max-width:320px;}
  .lx-quick .btn{width:100%; justify-content:center; min-height:48px;}
  .contact-top .c-cards{gap:12px;}
  .contact-top .c-card{flex-direction:row; align-items:center; text-align:left; gap:16px; padding:18px 18px;}
  .contact-top .c-ico{margin:0; flex:none; width:46px; height:46px;}
  .contact-top .c-body{align-items:flex-start;}
  .contact-top .c-card h4{font-size:18px; margin-bottom:4px;}
  .contact-top .c-card p{margin-bottom:6px;}
  .contact-top .c-card a,.contact-top .c-sub{margin-top:2px;}
  .lx-find .map-frame{aspect-ratio:1/1; margin-top:20px;}
  .lx-private{padding:22px 20px;}
  .lx-private .btn{width:100%; justify-content:center;}
  .contact-social{padding:54px 0;}
  .social-row a{width:100%; max-width:320px; justify-content:flex-start;}
}

/* =====================================================================
   RESPONSIVE POLISH (from the device audit)
   ===================================================================== */
.brand-word small{font-size:10px;}
@media (max-width:1024px){
  .foot-col a{display:block; padding:14px 0; margin-bottom:0;}
  .foot-col a[style]{display:inline-block; padding:8px 0;}
  .foot-social a{width:44px; height:44px;}
}
@media (max-width:1024px){ .c-card a{padding:13px 0;} .c-card .c-body a{margin-top:0;} }