/* ==========================================================================
   Maria's Cocina (concept) · shared styles for site, menu, story, catering, visit
   Loaded after the Tailwind CDN script. Tailwind handles layout utilities,
   this file holds the brand pieces and the motion system.

   Motion rules used throughout:
   - only transform and opacity are animated
   - hidden "before" states only exist when <html> has the .js class
     (added by assets/site.js), so with no JS everything is simply visible
   - html.reveal-all forces every animated thing to its finished state
   - prefers-reduced-motion switches all of it off
   ========================================================================== */

:root {
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ink: #3A2418;
  --mole: #1F110B;
  --terracotta: #C84B31;
  --gold: #E3A857;
  --header-h: 64px;
}

html { scroll-padding-top: calc(var(--header-h) + 16px); }
body { font-family: 'Barlow', system-ui, sans-serif; }
.font-serif { font-family: 'Bevan', Georgia, serif; }
.font-hand { font-family: 'Caveat', cursive; }

/* Soft cross-fade between pages (browsers that support it), plus a gentle
   fade-in of the page itself. Both are pure CSS so they can't get stuck. */
@view-transition { navigation: auto; }
@keyframes pageIn { from { opacity: 0; } to { opacity: 1; } }
.js main { animation: pageIn .7s ease-out both; }

/* ---------- Type scale ---------- */
.display-1 { font-size: clamp(2.125rem, 6vw, 4.5rem); line-height: 1; letter-spacing: -.012em; }
.display-2 { font-size: clamp(2rem, 4.8vw, 3.5rem); line-height: 1.06; letter-spacing: -.008em; }
.display-3 { font-size: clamp(1.5rem, 3vw, 2.125rem); line-height: 1.14; }
.lede { font-size: clamp(1.075rem, 1.5vw, 1.25rem); line-height: 1.6; }
.eyebrow { font-family: 'Caveat', cursive; font-size: clamp(1.5rem, 2.4vw, 1.875rem); line-height: 1.1; display: inline-block; }
.section { padding-top: clamp(4rem, 9vw, 7.5rem); padding-bottom: clamp(4rem, 9vw, 7.5rem); }

/* ---------- Keyboard focus ---------- */
:focus-visible { outline: 3px solid var(--terracotta); outline-offset: 3px; border-radius: 3px; }
.on-dark :focus-visible, .on-dark:focus-visible { outline-color: var(--gold); }
.skip-link { position: absolute; left: 50%; top: -80px; transform: translateX(-50%); z-index: 90; background: #fff; color: var(--ink); padding: .75rem 1.25rem; font-weight: 700; border-radius: 4px; }
.skip-link:focus { top: 12px; }

/* ---------- Portfolio "Spec work" button (do not restyle) ---------- */
#specBtn.open .l1 { transform: translateY(5px) rotate(45deg); }
#specBtn.open .l2 { opacity: 0; }
#specBtn.open .l3 { transform: translateY(-5px) rotate(-45deg); }
.spec-line { transition: transform .3s ease, opacity .2s ease; }

/* ---------- Header ---------- */
.site-header { transition: box-shadow .3s ease; }
.site-header.is-stuck { box-shadow: 0 10px 30px -18px rgba(58, 36, 24, .55); }
.nav-link { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 .25rem; color: rgba(58, 36, 24, .8); transition: color .2s ease; }
.nav-link::after { content: ''; position: absolute; left: .25rem; right: .25rem; bottom: 8px; height: 3px; border-radius: 3px; background: var(--terracotta); transform: scaleX(0); transform-origin: left center; transition: transform .35s var(--ease); }
.nav-link:hover { color: var(--terracotta); }
.nav-link:hover::after { transform: scaleX(1); }
.nav-link[aria-current="page"] { color: var(--terracotta); font-weight: 700; }
.nav-link[aria-current="page"]::after { transform: scaleX(1); }
.mnav-link { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 0 .25rem; border-bottom: 1px solid rgba(58, 36, 24, .1); font-weight: 600; }
.mnav-link[aria-current="page"] { color: var(--terracotta); }
@keyframes menuIn { from { opacity: 0; transform: translate3d(0, -8px, 0); } to { opacity: 1; transform: none; } }
#siteNav:not(.hidden) { animation: menuIn .3s var(--ease) both; }

/* ---------- Buttons ---------- */
.btn-retro { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 48px; border-radius: 4px; border-width: 2px; border-style: solid; border-color: transparent; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; box-shadow: 3px 3px 0 rgba(58, 36, 24, .35); transition: transform .2s var(--ease), box-shadow .2s var(--ease), background-color .2s ease, border-color .2s ease; }
.btn-retro:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 rgba(58, 36, 24, .35); }
.btn-retro:active { box-shadow: 0 0 0 rgba(58, 36, 24, .35); transform: translate(3px, 3px); }
.on-dark .btn-retro { box-shadow: 3px 3px 0 rgba(0, 0, 0, .45); }
.link-arrow { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; font-weight: 700; color: var(--terracotta); }
.link-arrow svg { transition: transform .35s var(--ease); }
.link-arrow:hover svg { transform: translateX(5px); }
.on-dark .link-arrow { color: var(--gold); }

/* ---------- Brand textures ---------- */
.kraft-grain {
  position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .07; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.serape { height: 14px; background: repeating-linear-gradient(90deg, #C84B31 0 28px, #C98A1C 28px 56px, #5E7245 56px 84px, #8B1E3F 84px 112px, #F1E3CC 112px 140px); }
.index-card {
  background-color: #FFFBF0;
  background-image: repeating-linear-gradient(transparent, transparent 27px, rgba(139, 30, 63, .12) 28px);
  box-shadow: 0 14px 30px -10px rgba(58, 36, 24, .3);
}
.leader { flex: 1 1 auto; border-bottom: 2px dotted rgba(58, 36, 24, .28); margin: 0 .6rem .35rem; min-width: 1rem; }
.on-dark .leader { border-bottom-color: rgba(241, 227, 204, .3); }

/* Dark "mole" sections: hero bands and closing calls to action */
.mole-band { position: relative; isolation: isolate; overflow: hidden; background: var(--mole); color: #F1E3CC; }
.mole-band::before { content: ''; position: absolute; inset: 0; z-index: -2; background: radial-gradient(70% 60% at 18% 0%, rgba(200, 75, 49, .28), transparent 62%), radial-gradient(55% 55% at 92% 85%, rgba(227, 168, 87, .16), transparent 65%), radial-gradient(60% 50% at 50% 110%, rgba(139, 30, 63, .35), transparent 70%); }

/* ---------- Pinned photos ---------- */
/* Rotation lives in --rot so reveal and hover transforms can keep the tilt. */
.pin-0 { --rot: .6deg; transform: rotate(var(--rot)); }
.pin-1 { --rot: -3.2deg; transform: rotate(var(--rot)); }
.pin-2 { --rot: 2.4deg; transform: rotate(var(--rot)); }
.pin-3 { --rot: -1.3deg; transform: rotate(var(--rot)); }
.pin-4 { --rot: 4deg; transform: rotate(var(--rot)); }
.pin-5 { --rot: -2deg; transform: rotate(var(--rot)); }

.polaroid { background: #fff; padding: 10px 10px 28px 10px; box-shadow: 0 10px 25px -8px rgba(58, 36, 24, .4); transition: transform .45s var(--ease), box-shadow .45s ease; }
.polaroid img { filter: sepia(.4) saturate(1.3) contrast(1.05) brightness(.96); }
.on-dark .polaroid { box-shadow: 0 24px 50px -18px rgba(0, 0, 0, .75); }

.tape::before {
  content: ''; position: absolute; z-index: 4; top: -14px; left: 50%; transform: translateX(-50%) rotate(-3deg);
  width: 64px; height: 26px; background: rgba(227, 168, 87, .78); box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
}
.tape-l::before { left: 18%; transform: translateX(-50%) rotate(-7deg); }
.tape-r::before { left: 82%; transform: translateX(-50%) rotate(6deg); }

/* Image slot: a styled placeholder with the real <img> laid on top.
   If the image file is missing the <img> hides itself and the placeholder shows.
   Set the two placeholder colours with style="--ph1:#...; --ph2:#..." */
.photo { position: relative; overflow: hidden; background: linear-gradient(135deg, var(--ph1, #caa15a), var(--ph2, #8c4a2b)); }
.photo::before { content: ''; position: absolute; inset: 0; background: radial-gradient(80% 60% at 25% 15%, rgba(255, 255, 255, .28), transparent 60%), repeating-linear-gradient(115deg, rgba(255, 255, 255, .05) 0 2px, transparent 2px 9px); }
.photo .ph { position: absolute; inset: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; padding: 1rem; text-align: center; color: rgba(255, 255, 255, .9); border: 1px dashed rgba(255, 255, 255, .45); font-family: 'Caveat', cursive; font-size: 1.4rem; line-height: 1.15; }
.photo .ph svg { width: 30px; height: 30px; opacity: .8; }
.photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Est. 2011 seal bobs like it's pinned loose */
@keyframes sealBob { 0%, 100% { transform: rotate(-6deg) translateY(0); } 50% { transform: rotate(-6deg) translateY(-7px); } }
.seal { transform: rotate(-6deg); animation: sealBob 4.5s ease-in-out infinite; }

/* ---------- Signature: comal smoke ---------- */
.smoke { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; opacity: .9;
  -webkit-mask-image: linear-gradient(to top, #000 35%, transparent 96%); mask-image: linear-gradient(to top, #000 35%, transparent 96%); }

/* ---------- Motion: reveals ---------- */
.js .reveal { opacity: 0; transform: translate3d(0, 30px, 0) scale(.975) rotate(var(--rot, 0deg)); transition: opacity .9s var(--ease) var(--d, 0ms), transform 1.1s var(--ease) var(--d, 0ms); will-change: opacity, transform; }
.js .reveal.in, .reveal-all .reveal { opacity: 1; transform: translate3d(0, 0, 0) scale(1) rotate(var(--rot, 0deg)); }
.js .reveal.done { will-change: auto; }
.js .polaroid.reveal.done { transition: transform .45s var(--ease), box-shadow .45s ease; }

/* Polaroids lift off the board on hover, tilt kept */
.polaroid:hover, .js .polaroid.reveal.in:hover { transform: translate3d(0, -7px, 0) rotate(var(--rot, 0deg)); box-shadow: 0 22px 38px -12px rgba(58, 36, 24, .5); }

/* Image mask reveal: a gold card slides off while the photo settles */
.js .mask::after { content: ''; position: absolute; inset: 0; z-index: 3; background: var(--mask, #E3A857); transform: translate3d(0, 0, 0); transition: transform 1.1s var(--ease) var(--d, 0ms); }
.js .mask > img, .js .mask > .ph { transform: scale(1.12); transition: transform 1.7s var(--ease) var(--d, 0ms); }
.js .mask.in::after, .reveal-all .mask::after { transform: translate3d(0, -101%, 0); }
.js .mask.in > img, .js .mask.in > .ph, .reveal-all .mask > img, .reveal-all .mask > .ph { transform: scale(1); }

/* Headline lines rise out of a mask on load (CSS only, always finishes) */
.line { display: block; overflow: hidden; padding: .06em .04em .12em; margin: -.06em -.04em -.12em; }
.line > span { display: block; }
@keyframes lineUp { from { transform: translate3d(0, 105%, 0); } to { transform: none; } }
/* no end transform on purpose: the element settles into its own (it may be tilted) */
@keyframes fadeUp { from { opacity: 0; transform: translate3d(0, 18px, 0); } to { opacity: 1; } }
.js .line > span { animation: lineUp 1.05s var(--ease) both; animation-delay: calc(var(--i, 0) * 110ms + 120ms); }
.js .rise { animation: fadeUp .9s var(--ease) both; animation-delay: calc(var(--i, 0) * 110ms + 120ms); }

/* Gentle scroll drift for pinned photos. JS writes --py on the wrapper,
   so the tilted polaroid inside keeps its own --rot transform. */
.drift { transform: translate3d(0, var(--py, 0px), 0); will-change: transform; }

/* Stamps press onto the Familia card */
.stamp { display: grid; place-items: center; aspect-ratio: 1; border-radius: 9999px; }
.stamp-on { background: #5E7245; color: #fff; }
.stamp-off { border: 2px dashed rgba(58, 36, 24, .28); }
.js .stamp-card .stamp-on { opacity: 0; transform: scale(1.7) rotate(-18deg); transition: opacity .35s ease-out calc(var(--i, 0) * 140ms + 250ms), transform .55s var(--ease) calc(var(--i, 0) * 140ms + 250ms); }
.js .stamp-card.in .stamp-on, .reveal-all .stamp-card .stamp-on { opacity: 1; transform: scale(1) rotate(var(--sr, -6deg)); }

/* ---------- Story: the two-day sequence ---------- */
.seq-panel { position: sticky; top: var(--header-h); z-index: 30; }
.pot { position: relative; border-radius: 9999px; background: #B5532F; box-shadow: inset 0 0 0 6px #9A4124, 0 18px 40px -18px rgba(58, 36, 24, .6); }
.pot-sauce, .pot-dark, .pot-swirl { position: absolute; inset: 11%; border-radius: 9999px; }
.pot-sauce { background: radial-gradient(circle at 35% 30%, #B8492A, #8E2F1B 70%); }
.pot-dark { background: radial-gradient(circle at 35% 30%, #3A1F14, #150A06 70%); opacity: var(--p, 0); }
.pot-swirl { transform: rotate(calc(var(--p, 0) * 540deg)); }
.seq-bar { position: relative; overflow: hidden; background: rgba(58, 36, 24, .12); border-radius: 9999px; }
.seq-bar > span { position: absolute; inset: 0; background: var(--terracotta); border-radius: inherit; transform-origin: left center; transform: scaleX(var(--p, 0)); }
.seq-ready .seq-step { opacity: .42; transition: opacity .6s ease; }
.seq-ready .seq-step.is-active, .seq-ready .seq-step:focus-within { opacity: 1; }
.seq-day { transition: opacity .5s ease; }

/* ---------- Forms and pickers ---------- */
.field { width: 100%; min-height: 48px; border-radius: 6px; background: #fff; color: var(--ink); border: 2px solid rgba(58, 36, 24, .18); padding: .65rem .9rem; font-size: 1rem; font-weight: 500; transition: border-color .2s ease; }
.field:hover { border-color: rgba(58, 36, 24, .35); }
.field:focus { outline: none; border-color: var(--terracotta); box-shadow: 0 0 0 3px rgba(200, 75, 49, .22); }
.field-label { display: block; font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin-bottom: .35rem; color: rgba(58, 36, 24, .75); }
.chip { display: inline-flex; align-items: center; justify-content: center; min-width: 48px; min-height: 46px; padding: 0 .85rem; border-radius: 6px; border: 2px solid rgba(58, 36, 24, .18); background: #fff; font-weight: 600; color: var(--ink); transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s var(--ease); }
.chip:hover { border-color: var(--terracotta); }
.chip:active { transform: scale(.96); }
.chip[aria-pressed="true"] { background: var(--terracotta); border-color: var(--terracotta); color: #fff; }
.chip small { display: block; font-size: .7rem; font-weight: 600; opacity: .75; text-transform: uppercase; letter-spacing: .05em; }
.chip-date { flex-direction: column; min-width: 62px; min-height: 60px; line-height: 1.1; }
/* When JS has built chips for a select, the select itself is tucked away */
.chips-built { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@keyframes confirmIn { from { opacity: 0; transform: translate3d(0, 10px, 0) scale(.98); } to { opacity: 1; transform: none; } }
.confirm:not([hidden]) { animation: confirmIn .5s var(--ease) both; }
.range { width: 100%; height: 44px; accent-color: var(--terracotta); }

/* ---------- Mobile action bar: reserve, order, call ---------- */
.action-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(241, 227, 204, .18); padding-bottom: env(safe-area-inset-bottom); box-shadow: 0 -10px 30px -12px rgba(0, 0, 0, .45); }
.action-bar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 58px; font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; background: var(--mole); color: #F1E3CC; }
.action-bar a.primary { background: var(--terracotta); color: #fff; }
.action-bar svg { width: 20px; height: 20px; }
@media (max-width: 767px) { body { padding-bottom: calc(58px + env(safe-area-inset-bottom)); } }
@media (min-width: 768px) { .action-bar { display: none; } }

/* Keeps Tailwind's show/hide classes in charge of buttons whatever the stylesheet order */
.btn-retro.hidden { display: none; }
@media (min-width: 768px) { .btn-retro.md\:inline-flex { display: inline-flex; } }

/* ---------- Reduced motion: everything simply shows ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  @view-transition { navigation: none; }
  .js main, .js .line > span, .js .rise, .seal, #siteNav:not(.hidden), .confirm:not([hidden]) { animation: none !important; }
  .js .reveal { opacity: 1 !important; transform: rotate(var(--rot, 0deg)) !important; transition: none !important; }
  .js .mask::after { display: none !important; }
  .js .mask > img, .js .mask > .ph { transform: none !important; transition: none !important; }
  .js .stamp-card .stamp-on { opacity: 1 !important; transform: rotate(var(--sr, -6deg)) !important; transition: none !important; }
  .drift { transform: none !important; }
  .polaroid:hover, .js .polaroid.reveal.in:hover { transform: rotate(var(--rot, 0deg)) !important; }
  .btn-retro, .link-arrow svg, .nav-link::after, .chip { transition: none !important; }
  .seq-ready .seq-step { opacity: 1 !important; }
  .pot-swirl { transform: none !important; }
}

/* Tailwind's button reset would otherwise clear these */
button.chip { background-color: #fff; }
button.chip[aria-pressed="true"] { background-color: var(--terracotta); }
[hidden] { display: none !important; }

/* A light card sitting inside a dark band (forms, the offer ticket) */
.on-light .link-arrow { color: var(--terracotta); }
.on-light :focus-visible { outline-color: var(--terracotta); }
.on-light .btn-retro { box-shadow: 3px 3px 0 rgba(58, 36, 24, .35); }
.pot-swirl { width: 78%; height: 78%; }