/* ============================================================
   base.css — reset, tokens, base elements, utilities
   Four Star Pizza Kilmainham · Umami build
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }

:root {
  --paper:   #ECEAE4;
  --white:   #FFFFFF;
  --ink:     #141414;
  --ink-2:   #1e1e1e;
  --red:     #DC1425;
  --red-ink: #B10F1C;
  --cream:   #FFEFCB;
  --yellow:  #FFDF77;
  --green:   #0B5D2A;
  --muted:   #5B5B5B;
  --line:    rgba(20,20,20,0.12);
  --line-light: rgba(255,255,255,0.16);

  --font-display: "Ranchers", "Arial Black", sans-serif;
  --font-body:    "Nunito", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  --maxw: 1180px;
  --gutter: 16px;
  --radius: 16px;
  --shadow: 0 18px 44px rgba(20,20,20,0.12);
  --step-section: clamp(56px, 8vw, 108px);
}

html, body { background: var(--paper); }
body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--ink);
}

p { color: var(--muted); }
strong { font-weight: 800; color: var(--ink); }

:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }

/* utilities */
.container {
  width: 100%; max-width: var(--maxw);
  margin-inline: auto; padding-inline: var(--gutter);
}
@media (min-width: 768px)  { .container { padding-inline: 32px; } }
@media (min-width: 1200px) { .container { padding-inline: 20px; } }

.section { padding-block: var(--step-section); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.14em; font-size: 13px;
  color: var(--red-ink);
}

/* centered section heading: small red label + big Ranchers title */
.head { text-align: center; max-width: 62ch; margin-inline: auto; }
.head .eyebrow { margin-bottom: 12px; }
.head h2 {
  font-size: clamp(30px, 5.2vw, 48px);
  letter-spacing: 0.02em;
}
.head p { margin-top: 14px; font-size: clamp(16px, 1.6vw, 18px); }

.text-red { color: var(--red); }
.on-dark { color: var(--cream); }

/* ============================================================
   MOTION / REVEAL helpers (GSAP-driven, own code)
   ============================================================ */
:root { --ease-out: cubic-bezier(.16,1,.3,1); --pill: 30px; --card-radius: 32px; }

/* fade + rise (headings / blocks) — matches Umami heading translateY 40->0 */
.fade, .sec-head { opacity: 0; transform: translateY(40px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.fade.in, .sec-head.in { opacity: 1; transform: none; }
.fade.d1 { transition-delay: .08s; } .fade.d2 { transition-delay: .16s; } .fade.d3 { transition-delay: .24s; } .fade.d4 { transition-delay: .32s; }

/* scale-in pop (dish cards) — matches Umami scale 0.9 -> 1 */
.pop { opacity: 0; transform: scale(.9); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.pop.in { opacity: 1; transform: none; }

/* slide from left / right (menu tabs, about) */
.slide-l { opacity: 0; transform: translateX(-56px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.slide-r { opacity: 0; transform: translateX(56px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.slide-l.in, .slide-r.in { opacity: 1; transform: none; }

/* curtain image reveal + hover-zoom base */
.figrev { position: relative; overflow: hidden; }
.figrev img { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); transition: transform 1.2s var(--ease-out); }
.figrev::after { content:""; position:absolute; inset:0; background: var(--paper); z-index:2; transform: translateY(0); transition: transform 1.1s var(--ease-out); }
.figrev.in img { transform: none; }
.figrev.in::after { transform: translateY(-101%); }

/* fallbacks: no-JS / reduced motion — everything visible */
html:not(.js) .fade, html:not(.js) .sec-head, html:not(.js) .pop, html:not(.js) .slide-l, html:not(.js) .slide-r { opacity:1 !important; transform:none !important; }
html:not(.js) .figrev img { transform:none; } html:not(.js) .figrev::after { display:none; }
@media (prefers-reduced-motion: reduce) {
  .fade,.sec-head,.pop,.slide-l,.slide-r,.figrev img,.figrev::after { transition:none !important; transform:none !important; opacity:1 !important; }
  .figrev::after { display:none; }
  .spin { animation: none !important; }
}

/* spin keyframe (rotating badge, like Umami) */
@keyframes spin { to { transform: rotate(360deg); } }
.spin { animation: spin 14s linear infinite; }