/* ============================================================
   ROUTE 66 BURGERS · Diner americano
   Vermelho berrante · turquesa · azulejo preto/branco
   Nested CSS
   ============================================================ */

:root {
  --red:    #e10600;
  --red-dk: #b00500;
  --teal:   #10c6c6;
  --teal-dk:#0a9d9d;
  --navy:   #1b2a4a;
  --cream:  #fff4e0;
  --yellow: #ffd23f;
  --ink:    #1a1a1a;
  --char:   #191a1e;
  --white:  #ffffff;

  --font-display: "Anton", Impact, sans-serif;
  --font-script:  "Pacifico", cursive;
  --font-body:    "Poppins", system-ui, sans-serif;

  --maxw: 1140px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --checker: repeating-conic-gradient(#111 0% 25%, #fff 0% 50%) 0 / 40px 40px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.6;
  overflow-x: hidden;

  &.is-loading { overflow: hidden; }
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

h1, h2, h3 { margin: 0; line-height: 1; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; }
::selection { background: var(--red); color: #fff; }

/* ---------- Reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(40px) scale(0.96);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  &.is-visible { opacity: 1; transform: none; }
}

/* ============================================================
   Boot / opening animation — retro neon sign
   ============================================================ */
.boot {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: grid;
  place-items: center;
  background: var(--char);
  transition: opacity 0.6s ease, visibility 0.6s;

  &.is-done { opacity: 0; visibility: hidden; }

  & .boot__sign {
    position: relative;
    text-align: center;
    padding: 2rem 2.6rem;
    border: 4px solid var(--yellow);
    border-radius: 14px;
    box-shadow: 0 0 0 8px var(--char), 0 0 40px rgba(225,6,0,0.6);
    animation: signPop 0.7s var(--ease) both, signGlow 1.6s ease-in-out 0.7s infinite alternate;
  }

  & .boot__top {
    display: block;
    font-family: var(--font-body);
    font-weight: 700;
    letter-spacing: 0.4em;
    font-size: 0.75rem;
    color: var(--teal);
    padding-left: 0.4em;
  }
  & .boot__big {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(3rem, 14vw, 6rem);
    color: var(--red);
    letter-spacing: 0.02em;
    text-shadow: 0 0 18px rgba(225,6,0,0.8), 3px 3px 0 #fff;
    margin: 0.2rem 0;
  }
  & .boot__bot {
    display: block;
    font-family: var(--font-body);
    font-weight: 600;
    letter-spacing: 0.25em;
    font-size: 0.72rem;
    color: var(--cream);
  }

  /* chasing bulbs around the sign */
  & .boot__bulbs {
    position: absolute;
    inset: -4px;
    border-radius: 14px;
    background:
      radial-gradient(circle, var(--yellow) 40%, transparent 42%) 0 0 / 22px 22px repeat-x,
      radial-gradient(circle, var(--yellow) 40%, transparent 42%) 0 100% / 22px 22px repeat-x;
    animation: bulbs 0.5s steps(2) infinite;
    opacity: 0.9;
    pointer-events: none;
  }
}

@keyframes signPop {
  from { opacity: 0; transform: scale(0.8) rotate(-3deg); }
  to   { opacity: 1; transform: none; }
}
@keyframes signGlow {
  from { box-shadow: 0 0 0 8px var(--char), 0 0 30px rgba(225,6,0,0.5); }
  to   { box-shadow: 0 0 0 8px var(--char), 0 0 55px rgba(16,198,198,0.7); }
}
@keyframes bulbs { to { background-position-x: 22px, 22px; } }

/* ============================================================
   Header
   ============================================================ */
.bar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem clamp(1rem, 4vw, 2.5rem);
  transition: background 0.4s var(--ease), box-shadow 0.4s, padding 0.4s;

  &.is-scrolled {
    background: var(--red);
    box-shadow: 0 6px 0 var(--yellow);
    padding-block: 0.6rem;
  }

  & .brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--white);

    & .brand__name {
      font-family: var(--font-display);
      font-size: 1.5rem;
      letter-spacing: 0.02em;
      text-shadow: 2px 2px 0 rgba(0,0,0,0.25);
    }
  }

  & .links {
    display: flex;
    gap: clamp(0.8rem, 2.5vw, 1.8rem);

    & a {
      font-weight: 600;
      color: var(--white);
      position: relative;
      transition: color 0.3s;

      &::after {
        content: "";
        position: absolute; left: 0; bottom: -4px;
        width: 100%; height: 3px;
        background: var(--yellow);
        transform: scaleX(0);
        transform-origin: right;
        transition: transform 0.35s var(--ease);
      }
      &:hover::after { transform: scaleX(1); transform-origin: left; }
    }
  }
}

/* brand badge (also reused in footer) */
.brand__badge {
  display: inline-grid;
  place-items: center;
  width: 34px; height: 34px;
  background: var(--yellow);
  color: var(--red);
  font-family: var(--font-display);
  font-size: 1.1rem;
  border-radius: 50%;
  border: 2px solid var(--white);
  box-shadow: 0 2px 0 rgba(0,0,0,0.25);
}

.order-btn {
  padding: 0.55rem 1.2rem;
  background: var(--teal);
  color: var(--white);
  font-weight: 700;
  border-radius: 999px;
  border: 2px solid var(--white);
  box-shadow: 0 3px 0 rgba(0,0,0,0.25);
  transition: transform 0.25s var(--ease);
  &:hover { transform: translateY(-2px) rotate(-2deg); }
}

/* ============================================================
   Hero
   ============================================================ */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 7rem 1.5rem 4rem;
  background:
    radial-gradient(circle at 50% 120%, var(--teal) 0%, transparent 45%),
    linear-gradient(160deg, var(--red) 0%, var(--red-dk) 100%);
  color: var(--white);
  overflow: hidden;

  & .hero__checker {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 120px;
    background: var(--checker);
    mask-image: linear-gradient(to top, #000 40%, transparent);
    opacity: 0.9;
  }

  & .hero__inner { position: relative; z-index: 2; max-width: 820px; }

  & .hero__script {
    font-family: var(--font-script);
    font-size: clamp(1.6rem, 5vw, 2.6rem);
    color: var(--yellow);
    transform: rotate(-3deg);
    margin: 0 0 0.4rem;
    text-shadow: 2px 2px 0 rgba(0,0,0,0.25);
  }

  & .hero__title {
    font-family: var(--font-display);
    font-size: clamp(3.4rem, 15vw, 9rem);
    line-height: 0.85;
    letter-spacing: 0.01em;

    & .hero__stroke {
      display: block;
      color: transparent;
      -webkit-text-stroke: 3px var(--white);
      text-stroke: 3px var(--white);
    }
    & .hero__fill {
      display: block;
      color: var(--yellow);
      text-shadow: 5px 5px 0 var(--char);
    }
  }

  & .hero__tag {
    max-width: 34rem;
    margin: 1.6rem auto 2.2rem;
    font-weight: 500;
    font-size: clamp(0.95rem, 2vw, 1.1rem);
    color: rgba(255,255,255,0.92);
  }

  & .hero__cta { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

  & .hero__stars {
    position: absolute;
    top: 6.5rem; left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    letter-spacing: 0.5em;
    color: var(--yellow);
    font-size: 1rem;
  }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  padding: 0.9rem 2rem;
  font-weight: 700;
  font-size: 1rem;
  border-radius: 999px;
  border: 3px solid var(--white);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);

  &--red {
    background: var(--yellow);
    color: var(--red);
    box-shadow: 0 5px 0 var(--char);
    &:hover { transform: translateY(-3px); box-shadow: 0 8px 0 var(--char); }
  }
  &--ghost {
    background: transparent;
    color: var(--white);
    &:hover { transform: translateY(-3px); background: rgba(255,255,255,0.12); }
  }
}

/* ============================================================
   Scroll-driven burger build
   ============================================================ */
.build {
  position: relative;
  height: 320vh;                 /* tall runway for the scroll */
  background:
    radial-gradient(circle at 50% 30%, rgba(16,198,198,0.25), transparent 55%),
    var(--char);
}

.build__sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  display: grid;
  place-content: center;
  justify-items: center;
  text-align: center;
  padding: 1rem;
  overflow: hidden;

  & .build__title {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 6vw, 3.4rem);
    color: var(--cream);
    margin-bottom: 1.5rem;
    & em { color: var(--teal); font-style: normal; }
  }

  & .build__hint {
    margin-top: 1.6rem;
    font-weight: 600;
    color: var(--yellow);
    transition: opacity 0.4s;
  }
  & .build__done {
    position: absolute;
    bottom: clamp(1.5rem, 6vh, 3rem);
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 4vw, 2rem);
    color: var(--cream);
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
    & span { color: var(--yellow); }
    &.is-shown { opacity: 1; transform: none; }
  }
}

/* ---------- Burger (CSS layers) ---------- */
.burger {
  --bw: clamp(230px, 74vw, 320px);
  position: relative;
  width: var(--bw);
  height: calc(var(--bw) * 0.95);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.layer {
  position: relative;
  will-change: transform, opacity;
  filter: drop-shadow(0 8px 6px rgba(0,0,0,0.35));
}

/* top bun — sesame dome */
.layer--topbun {
  width: 100%;
  height: calc(var(--bw) * 0.42);
  background:
    radial-gradient(circle at 22% 62%, #fff6 6%, transparent 7%),
    radial-gradient(circle at 40% 45%, #fff6 6%, transparent 7%),
    radial-gradient(circle at 60% 55%, #fff6 6%, transparent 7%),
    radial-gradient(circle at 78% 48%, #fff6 6%, transparent 7%),
    radial-gradient(circle at 50% 30%, #fff6 6%, transparent 7%),
    linear-gradient(180deg, #f0b968 0%, #e8a44b 55%, #d98a2b 100%);
  background-color: #e8a44b;
  border-radius: 50% 50% 22% 22% / 92% 92% 22% 22%;
  z-index: 6;
}

/* lettuce — wavy green, wider */
.layer--lettuce {
  width: 108%;
  height: calc(var(--bw) * 0.13);
  margin-top: calc(var(--bw) * -0.02);
  background: linear-gradient(180deg, #8ed94f, #5cb128);
  border-radius: 50%;
  clip-path: polygon(0 40%, 8% 15%, 16% 45%, 25% 12%, 34% 45%, 43% 10%, 52% 45%, 61% 12%, 70% 45%, 79% 12%, 88% 45%, 96% 15%, 100% 42%, 100% 100%, 0 100%);
  z-index: 5;
}

/* tomato — red slice, wider */
.layer--tomato {
  width: 100%;
  height: calc(var(--bw) * 0.09);
  background: linear-gradient(180deg, #ff5b5b, #e03131);
  border-radius: 40%;
  z-index: 4;
}

/* cheese — with drips */
.layer--cheese {
  width: 102%;
  height: calc(var(--bw) * 0.08);
  background: linear-gradient(180deg, #ffd23f, #ffb703);
  border-radius: 8px;
  z-index: 3;

  &::after {
    content: "";
    position: absolute;
    inset: auto 6% -60% 6%;
    height: 60%;
    background: linear-gradient(180deg, #ffb703, #ffb703);
    clip-path: polygon(0 0, 100% 0, 100% 30%, 88% 100%, 76% 30%, 60% 90%, 46% 30%, 32% 100%, 18% 30%, 6% 85%, 0 30%);
  }
}

/* patty — dark grilled, widest */
.layer--patty {
  width: 106%;
  height: calc(var(--bw) * 0.15);
  background:
    radial-gradient(circle at 30% 30%, #6b3a1e, transparent 40%),
    radial-gradient(circle at 70% 60%, #4a230f, transparent 45%),
    linear-gradient(180deg, #5a2e17, #3d1d0d);
  border-radius: 46% / 60%;
  z-index: 2;
}

/* bottom bun */
.layer--bottombun {
  width: 98%;
  height: calc(var(--bw) * 0.16);
  background: linear-gradient(180deg, #e0973c, #c67a24);
  border-radius: 18% 18% 48% 48% / 22% 22% 100% 100%;
  z-index: 1;
}

/* ============================================================
   Ticker (checker marquee divider)
   ============================================================ */
.ticker {
  overflow: hidden;
  background: var(--navy);
  color: var(--white);
  padding: 0.8rem 0;
  border-block: 5px solid var(--yellow);

  & .ticker__track {
    display: flex;
    width: max-content;
    animation: roll 30s linear infinite;

    & span {
      font-family: var(--font-display);
      font-size: clamp(1rem, 3vw, 1.5rem);
      letter-spacing: 0.08em;
      white-space: nowrap;
      padding-right: 1rem;
    }
  }
  &:hover .ticker__track { animation-play-state: paused; }
}
@keyframes roll { to { transform: translateX(-50%); } }

/* ============================================================
   Menu shelves
   ============================================================ */
.shelf {
  padding: clamp(3.5rem, 8vw, 6rem) clamp(1.2rem, 5vw, 2.5rem);

  & > * { max-width: var(--maxw); margin-inline: auto; }

  &--teal {
    background:
      linear-gradient(180deg, transparent, rgba(16,198,198,0.14) 15%, rgba(16,198,198,0.14) 85%, transparent);
  }

  & .shelf__head {
    text-align: center;
    margin-bottom: clamp(2rem, 5vw, 3.5rem);

    & .shelf__kicker {
      display: inline-block;
      font-family: var(--font-script);
      font-size: clamp(1.4rem, 4vw, 2rem);
      color: var(--red);
      transform: rotate(-2deg);
      margin-bottom: 0.2rem;
    }
    & .shelf__title {
      font-family: var(--font-display);
      font-size: clamp(2.4rem, 8vw, 4.5rem);
      color: var(--navy);
      text-shadow: 3px 3px 0 var(--yellow);
    }
  }
}

/* ---------- Cards ---------- */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: clamp(1.2rem, 3vw, 2rem);
}

.card {
  position: relative;
  background: var(--white);
  border: 3px solid var(--ink);
  border-radius: 18px;
  padding: 2.2rem 1.4rem 1.4rem;
  text-align: center;
  box-shadow: 6px 6px 0 var(--ink);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);

  &:hover {
    transform: translate(-3px, -3px) rotate(-1deg);
    box-shadow: 10px 12px 0 var(--teal);
  }

  & .card__emoji {
    display: inline-block;
    font-size: 2.8rem;
    transition: transform 0.4s var(--ease);
  }
  &:hover .card__emoji { transform: scale(1.2) rotate(8deg); }

  & .card__name {
    font-family: var(--font-display);
    font-size: 1.5rem;
    color: var(--navy);
    margin: 0.6rem 0 0.4rem;
    letter-spacing: 0.01em;
  }
  & .card__desc {
    font-size: 0.88rem;
    color: #555;
    min-height: 2.6em;
  }
  & .card__price {
    display: inline-block;
    margin-top: 0.9rem;
    padding: 0.35rem 1.1rem;
    background: var(--red);
    color: var(--white);
    font-family: var(--font-display);
    font-size: 1.25rem;
    border-radius: 999px;
    box-shadow: 0 3px 0 var(--red-dk);
    &::before { content: "€ "; font-size: 0.7em; }
  }

  /* corner flag badges */
  & .card__flag {
    position: absolute;
    top: -12px; right: 14px;
    padding: 0.25rem 0.7rem;
    background: var(--yellow);
    color: var(--ink);
    font-weight: 800;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    border-radius: 6px;
    transform: rotate(6deg);
    box-shadow: 0 2px 0 rgba(0,0,0,0.25);

    &--hot { background: var(--red); color: #fff; }
    &--veg { background: #5cb128; color: #fff; }
  }
}

/* ============================================================
   Footer
   ============================================================ */
.footer {
  position: relative;
  background: var(--navy);
  color: var(--white);
  text-align: center;

  & .footer__checker {
    height: 40px;
    background: var(--checker);
  }
  & .footer__body { padding: clamp(2.5rem, 6vw, 4rem) 1.5rem 3rem; }

  & .footer__brand {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--font-display);
    font-size: 1.6rem;
    margin: 0 0 0.8rem;
  }
  & .footer__tag { color: var(--teal); margin: 0.2rem 0; font-weight: 600; }
  & .footer__meta { margin: 0.2rem 0; color: rgba(255,255,255,0.8); font-size: 0.9rem; }
  & .footer__note {
    margin-top: 1.6rem;
    font-family: var(--font-script);
    color: var(--yellow);
    font-size: 1.1rem;
  }
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 720px) {
  .bar .links { display: none; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  /* collapse the tall build runway so nothing is stuck mid-assembly */
  .build { height: auto; }
  .build__sticky { position: static; height: auto; padding-block: 4rem; }
  .build__done { opacity: 1; transform: none; }
}