/* Venue skin: Mexican folk-art layer (pattern, papel picado, motion).
   Everything here is presentation only; content comes from venue.json via mx-skin.js.
   Colours: logo palette (green / red / marigold / pink / turquoise) over the venue's navy ground. */
:root {
  --mx-green: #17B26A;
  --mx-red: #E0432E;
  --mx-gold: #F4C430;
  --mx-pink: #E8508A;
  --mx-teal: #2BB3B3;
  --mx-cream: #F6F1E4;
  --mx-night: #121734;
  --mx-display: 'Rye', var(--font-heading, serif);
}

/* ---------- display type ---------- */
.mx-skin .hero h1,
.mx-skin .story h2,
.mx-skin .section-intro h2,
.mx-skin .events h2,
.mx-skin .about h2 {
  font-family: var(--mx-display);
  font-weight: 400;
  letter-spacing: .01em;
  line-height: 1.08;
  text-wrap: balance;
}
.mx-skin .hero h1 { font-size: clamp(2.5rem, 5.8vw, 5.6rem); max-width: 12ch; text-shadow: 0 3px 0 rgba(18, 23, 52, .55); }
.mx-skin[lang="es"] .hero h1 { font-size: clamp(2.3rem, 5vw, 4.9rem); max-width: 14ch; }
.mx-skin .story h2, .mx-skin .section-intro h2, .mx-skin .events h2, .mx-skin .about h2 { font-size: clamp(2rem, 4vw, 4rem); }
.mx-skin .eyebrow, .mx-skin .hub-agents__eyebrow { color: var(--mx-gold); letter-spacing: .2em; }

/* ---------- folk-art pattern fields ---------- */
.mx-pattern {
  background-image: url("mx-pattern.svg");
  background-size: 760px auto;
  background-position: 50% var(--mx-py, 0px);
}
.mx-skin body.mx-hub-body { background-color: var(--bg); }
.mx-skin .reviews, .mx-skin .story, .mx-skin .menu-section, .mx-skin .about { background-color: var(--surface); }
.mx-skin .menu-section { background-color: var(--bg); }
.mx-skin .about { background-color: color-mix(in srgb, var(--surface) 70%, var(--bg)); }
.mx-skin footer { background-color: var(--mx-night); }
.mx-skin .dash-main { background-image: url("mx-pattern.svg"); background-size: 900px auto; background-position: 50% var(--mx-py, 0px); background-attachment: local; }

/* ---------- hero motion ---------- */
.mx-skin .hero-media { overflow: hidden; }
.mx-skin .hero-media img { animation: mx-kenburns 28s ease-in-out infinite alternate; transform-origin: 60% 45%; }
.mx-skin .hero-wash { background: linear-gradient(90deg, rgba(18, 23, 52, .82), rgba(18, 23, 52, .35) 58%, rgba(18, 23, 52, .12)); }
@keyframes mx-kenburns { from { transform: scale(1.02) translate3d(0, 0, 0); } to { transform: scale(1.14) translate3d(-1.5%, -1%, 0); } }

/* falling cempasuchil petals */
.mx-petals { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.mx-petal {
  position: absolute; top: -8%; width: var(--s, 14px); height: calc(var(--s, 14px) * 1.5);
  background: linear-gradient(160deg, var(--c1, #F4C430), var(--c2, #E8891A));
  border-radius: 100% 0 100% 0; opacity: 0; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .25));
  animation: mx-fall var(--d, 14s) linear var(--w, 0s) infinite;
}
@keyframes mx-fall {
  0% { transform: translate3d(0, -6vh, 0) rotate(0deg); opacity: 0; }
  8% { opacity: .95; }
  50% { transform: translate3d(var(--x, 40px), 55vh, 0) rotate(calc(var(--r, 240deg) * .5)); }
  92% { opacity: .9; }
  100% { transform: translate3d(calc(var(--x, 40px) * -.6), 112vh, 0) rotate(var(--r, 240deg)); opacity: 0; }
}

/* rotating seal */
.mx-seal {
  position: absolute; z-index: 3; right: clamp(16px, 5vw, 84px); top: clamp(104px, 17vh, 170px);
  width: clamp(104px, 11vw, 168px); aspect-ratio: 1; pointer-events: none; color: var(--mx-cream);
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .35));
}
.mx-seal svg { width: 100%; height: 100%; display: block; transform: rotate(var(--mx-seal-rot, 0deg)); transition: transform .25s linear; }
.mx-seal .mx-seal-ring { animation: mx-spin 30s linear infinite; transform-origin: 50% 50%; }
.mx-seal text { font: 700 7.6px var(--font-body, sans-serif); letter-spacing: .12em; fill: var(--mx-cream); text-transform: uppercase; }
@keyframes mx-spin { to { transform: rotate(360deg); } }

/* ---------- papel picado bunting ---------- */
.mx-bunting { position: absolute; left: 0; right: 0; top: 0; height: clamp(58px, 7vw, 92px); z-index: 4; pointer-events: none; overflow: hidden; }
.mx-bunting svg { width: 100%; height: 100%; display: block; overflow: visible; }
.mx-flag { transform-box: fill-box; transform-origin: 50% 0; animation: mx-sway 4.6s ease-in-out infinite; animation-delay: var(--dl, 0s); }
@keyframes mx-sway { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
.mx-skin .reservation-bar { position: relative; padding-top: clamp(86px, 9vw, 116px); }
.mx-skin .reservation-bar::before {
  content: ""; position: absolute; left: 0; right: 0; top: -17px; height: 18px; background: var(--brand);
  -webkit-mask: conic-gradient(from -45deg at 50% 100%, #0000, #000 1deg 89deg, #0000 90deg) 50% / 26px 100%;
          mask: conic-gradient(from -45deg at 50% 100%, #0000, #000 1deg 89deg, #0000 90deg) 50% / 26px 100%;
}
.mx-hub-bunting { position: relative; margin: -22px -22px 12px; height: 70px; }

/* ---------- sawtooth + greca dividers ---------- */
.mx-skin .menu-group { border-top: 0; position: relative; padding-top: 34px; }
.mx-skin .menu-group::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 16px;
  background: url("mx-greca.svg") repeat-x left center / 24px 16px; opacity: .6;
}
.mx-skin .menu-group h3 { display: flex; align-items: center; gap: 14px; }
.mx-skin .menu-group h3::after {
  content: ""; width: 64px; height: 12px; flex: none; opacity: .95;
  background:
    linear-gradient(135deg, var(--mx-green) 50%, transparent 50%) 0 0 / 16px 12px no-repeat,
    linear-gradient(135deg, #F07A2B 50%, transparent 50%) 16px 0 / 16px 12px no-repeat,
    linear-gradient(135deg, #B9C82F 50%, transparent 50%) 32px 0 / 16px 12px no-repeat,
    linear-gradient(135deg, var(--mx-red) 50%, transparent 50%) 48px 0 / 16px 12px no-repeat;
  clip-path: polygon(0 50%, 8px 0, 16px 50%, 24px 0, 32px 50%, 40px 0, 48px 50%, 56px 0, 64px 50%, 56px 100%, 48px 50%, 40px 100%, 32px 50%, 24px 100%, 16px 50%, 8px 100%);
}
.mx-skin .menu-item { transition: transform .25s cubic-bezier(.22, 1, .36, 1); }
.mx-skin .menu-item:hover { transform: translateX(6px); }
.mx-skin .menu-item:hover span { color: var(--mx-gold); animation: mx-pop .5s ease; }
@keyframes mx-pop { 30% { transform: scale(1.28) rotate(-4deg); } 100% { transform: scale(1); } }
.mx-skin footer { position: relative; }
.mx-skin footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 16px; background: url("mx-greca.svg") repeat-x left center / 24px 16px; opacity: .6; }

/* ---------- ribbon marquee ---------- */
.mx-ribbon {
  position: relative; z-index: 2; overflow: hidden; background: var(--mx-gold); color: var(--mx-night);
  transform: rotate(-1.4deg) scale(1.03); margin: -8px 0; box-shadow: 0 8px 22px rgba(0, 0, 0, .35);
  border-block: 3px solid var(--mx-night); user-select: none;
}
.mx-ribbon-track { display: flex; width: max-content; animation: mx-marquee 38s linear infinite; }
.mx-ribbon span { font: 400 clamp(1.1rem, 2.2vw, 1.7rem) var(--mx-display); letter-spacing: .06em; padding: 12px 0; white-space: nowrap; text-transform: uppercase; }
.mx-ribbon i { display: inline-block; width: 12px; height: 12px; margin: 0 clamp(14px, 2.4vw, 30px); background: var(--mx-red); transform: rotate(45deg); }
.mx-ribbon i:nth-of-type(3n+1) { background: var(--mx-green); }
.mx-ribbon i:nth-of-type(3n+2) { background: var(--mx-pink); }
.mx-ribbon:hover .mx-ribbon-track { animation-play-state: paused; }
@keyframes mx-marquee { to { transform: translateX(-50%); } }

/* ---------- story photo: polaroid ---------- */
.mx-skin .story-image img { border: 10px solid var(--mx-cream); border-bottom-width: 34px; box-shadow: 0 18px 40px rgba(0, 0, 0, .4); transform: rotate(-2deg); transition: transform .5s cubic-bezier(.22, 1, .36, 1); }
.mx-skin .story-image:hover img { transform: rotate(0deg) scale(1.02); }
.mx-skin .story-image figcaption { color: var(--mx-gold); }

/* ---------- reveals ---------- */
.mx-skin .reveal { transform: translateY(34px) scale(.98); transition: opacity .9s cubic-bezier(.22, 1, .36, 1), transform .9s cubic-bezier(.22, 1, .36, 1); }
.mx-skin .reveal.visible { transform: none; }
.mx-skin .button { border-radius: 999px; box-shadow: 0 4px 0 rgba(0, 0, 0, .35); transition: transform .15s ease, box-shadow .15s ease, background .2s; }
.mx-skin .button:hover { transform: translateY(-2px); }
.mx-skin .button:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0, 0, 0, .35); }
.mx-skin .button--nav { animation: mx-wiggle 5s ease-in-out 2s infinite; }
@keyframes mx-wiggle { 0%, 88%, 100% { transform: none; } 91% { transform: rotate(-4deg) scale(1.06); } 94% { transform: rotate(4deg) scale(1.06); } 97% { transform: rotate(-2deg); } }

/* ---------- hub ---------- */
.mx-skin .hub { position: relative; }
.mx-skin .hub-card { transition: transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s, border-color .35s; }
.mx-skin .hub-card:hover { transform: translateY(-6px) rotate(-.6deg); box-shadow: 0 16px 0 -8px var(--mx-gold), 0 22px 36px rgba(0, 0, 0, .4); border-color: var(--mx-gold); }
.mx-skin .hub-logo { animation: mx-bob 6s ease-in-out infinite; }
@keyframes mx-bob { 50% { transform: translateY(-6px) rotate(-1deg); } }

/* ---------- dashboard / POS ---------- */
.mx-skin .dashboard-nav { background: var(--mx-night); border-right: 4px solid var(--mx-green); }
.mx-skin .dash-tab.active { background: var(--mx-green); color: #06190E; }
.mx-skin .dash-tab { transition: padding-left .2s, background .2s; }
.mx-skin .dash-tab:hover { padding-left: 20px; }
.mx-skin .pos-login, .mx-skin .pos-login-screen { background-image: url("mx-pattern.svg"); background-size: 760px auto; }

/* ---------- motion safety ---------- */
@media (prefers-reduced-motion: reduce) {
  .mx-petals, .mx-seal .mx-seal-ring { display: none; }
  .mx-skin .hero-media img, .mx-flag, .mx-ribbon-track, .mx-skin .hub-logo, .mx-skin .button--nav { animation: none; }
  .mx-skin .reveal { transform: none; }
}
@media (max-width: 640px) {
  .mx-seal { top: 96px; bottom: auto; right: 12px; width: 84px; }
  .mx-skin .hero h1 { max-width: 11ch; }
  .mx-ribbon { transform: rotate(-1deg) scale(1.04); }
  .mx-pattern { background-size: 520px auto; }
}

/* keep tilted ribbon / bunting from creating a horizontal scrollbar */
html.mx-skin, .mx-skin body { overflow-x: clip; }

/* all section headings on the public site use the display face (template font-fix.css targets bare h2) */
.mx-skin #main h2 { font-family: var(--mx-display); font-weight: 400; letter-spacing: .01em; line-height: 1.1; text-wrap: balance; font-size: clamp(1.9rem, 3.6vw, 3.6rem); }
.mx-skin #main .reservation-bar h2 { font-family: var(--font-heading, serif); font-weight: 600; letter-spacing: -.01em; font-size: clamp(1.5rem, 2.3vw, 2.3rem); }
.mx-skin #main .events h2, .mx-skin #main .about h2, .mx-skin #main .story h2, .mx-skin #main .section-intro h2 { font-size: clamp(2rem, 4vw, 4rem); }

/* polish */
.mx-ribbon-track { align-items: center; }
.mx-ribbon i { flex: none; }
.mx-skin .reel-line { font-family: var(--mx-display); font-weight: 400; letter-spacing: .01em; text-shadow: 0 3px 0 rgba(18, 23, 52, .6); }