/* Postim — o copo de chopp (dia) que vira quintal aceso (noite) */
:root {
  --sun: #FFC700;
  --navy: #16235E;
  --navy-deep: #0A1238;
  --cream: #FFF4D6;
  --foam: #FFF6E0;
  --leaf: #2EA555;
  --dot: #F5872A;

  --font: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", sans-serif;

  --motion-instant: 90ms;
  --motion-fast: 160ms;
  --motion-standard: 240ms;
  --motion-emphasis: 620ms;
  --motion-scene: 420ms;
  --ease-enter: cubic-bezier(.2, .8, .2, 1);
  --ease-exit: cubic-bezier(.4, 0, 1, 1);
  --ease-standard: cubic-bezier(.4, 0, .2, 1);
  --ease-emphasis: cubic-bezier(.34, 1.36, .64, 1);

  --gutter: 20px;
  --radius: 16px;
  --press: 3px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--navy); }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body {
  margin: 0;
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--navy);
  background: var(--sun);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p { margin: 0; }
a { color: inherit; }
img, svg, iframe { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }

.wrap {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 560px;
  margin-inline: auto;
  padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right));
}

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 10;
  padding: 12px 16px; border-radius: 10px;
  background: var(--navy); color: var(--cream); font-weight: 600;
}
.skip:focus { top: calc(12px + env(safe-area-inset-top)); }

:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; border-radius: 6px; }
.night :focus-visible, .foot :focus-visible { outline-color: var(--sun); }

/* ---------- Botões: afundam como bolacha na mesa ---------- */
.btn {
  position: relative;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 14px 20px;
  border-radius: var(--radius);
  font-weight: 600; font-size: 1.0625rem; text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: transform var(--motion-instant) var(--ease-standard),
              box-shadow var(--motion-instant) var(--ease-standard),
              background-color var(--motion-fast) var(--ease-standard);
}
.btn i { font-size: 1.1em; }
.btn:active { transform: translateY(var(--press)); }

.btn--main {
  background: var(--navy); color: var(--sun);
  box-shadow: 0 4px 0 var(--navy-deep), inset 0 1px 0 rgba(255, 255, 255, .12);
}
.btn--main:active { box-shadow: 0 1px 0 var(--navy-deep), inset 0 1px 0 rgba(255, 255, 255, .12); }

.btn--line {
  border: 2px solid var(--navy); color: var(--navy);
  background: rgba(255, 246, 224, .28);
  box-shadow: 0 4px 0 var(--navy);
}
.btn--line:active { background: rgba(255, 246, 224, .5); box-shadow: 0 1px 0 var(--navy); }

.btn--sun {
  background: var(--sun); color: var(--navy);
  box-shadow: 0 4px 0 #B88A00, 0 10px 30px -8px rgba(255, 199, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .45);
}
.btn--sun:active { box-shadow: 0 1px 0 #B88A00, 0 4px 16px -8px rgba(255, 199, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .45); }

@media (hover: hover) {
  .btn--main:hover { background: #1E2D72; }
  .btn--line:hover { background: rgba(255, 246, 224, .45); }
  .btn--sun:hover { background: #FFD233; }
}

/* ---------- Cena 1: o copo ---------- */
.hero {
  --foam-h: calc(52px + env(safe-area-inset-top));
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-top: calc(var(--foam-h) + 26px);
  padding-bottom: 44px;
  background: linear-gradient(180deg, #FFCC1F 0%, var(--sun) 45%, #F7B400 100%);
}

/* espuma estática: sem JS, com movimento reduzido ou sem WebGL */
.hero::before {
  content: "";
  position: absolute; inset: 0 0 auto; z-index: 0;
  height: calc(var(--foam-h) + 11px);
  background:
    radial-gradient(circle at 30% 40%, rgba(214, 170, 60, .28) 0 2px, transparent 2.6px) 0 0 / 15px 13px,
    radial-gradient(circle at 70% 70%, rgba(214, 170, 60, .22) 0 1.4px, transparent 2px) 4px 3px / 9px 10px,
    linear-gradient(180deg, var(--foam) 60%, #FBEBC0);
  -webkit-mask:
    radial-gradient(circle 11px at 11px 0, #000 98%, transparent) 0 100% / 22px 11px repeat-x,
    linear-gradient(#000 0 0) top / 100% calc(100% - 10px) no-repeat;
          mask:
    radial-gradient(circle 11px at 11px 0, #000 98%, transparent) 0 100% / 22px 11px repeat-x,
    linear-gradient(#000 0 0) top / 100% calc(100% - 10px) no-repeat;
  transition: opacity var(--motion-scene) var(--ease-standard);
}
.hero.gl-pending::before,
.hero.gl-on::before { opacity: 0; }

.hero__gl {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 280ms var(--ease-standard);
}
.hero.gl-on .hero__gl { opacity: 1; }

.brand { display: flex; align-items: center; gap: 20px; }

/* logo = bolacha de chopp, vira no toque */
.coaster {
  position: relative;
  flex: none; width: 104px; height: 104px;
  padding: 0; border: 0; border-radius: 50%;
  background: none; cursor: pointer;
  perspective: 520px;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--motion-instant) var(--ease-standard);
}
.coaster:active { transform: scale(.95); }
.coaster:focus-visible { outline-offset: 10px; border-radius: 50%; }
.coaster::after {
  /* sombra da bolacha no copo */
  content: ""; position: absolute; z-index: -1;
  left: 8px; right: 8px; top: 18px; bottom: -8px;
  border-radius: 50%;
  background: rgba(130, 78, 0, .38);
  filter: blur(9px);
}
.coaster__inner {
  position: relative; display: block; width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition: transform var(--motion-emphasis) var(--ease-emphasis);
}
.coaster.is-flipped .coaster__inner { transform: rotateY(180deg); }
.coaster__face {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  border-radius: 50%;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  box-shadow: 0 0 0 4px var(--foam), 0 0 0 7px var(--navy);
}
.coaster__front svg { width: 100%; height: 100%; }
.coaster__back {
  transform: rotateY(180deg);
  align-content: center; gap: 4px;
  padding: 14px;
  background: radial-gradient(circle at 35% 30%, #22318A, var(--navy) 70%);
  color: var(--sun);
  font-weight: 800; font-stretch: 80%; font-size: .9375rem; line-height: 1.05; text-align: center;
}
.coaster__back i { color: var(--leaf); font-size: 1.125rem; }

.brand__name {
  font-size: 2.5rem; line-height: 1; font-weight: 800;
  font-stretch: 80%; letter-spacing: -.01em;
}
.brand__tag { margin-top: 4px; font-weight: 600; }
.brand__handle {
  display: inline-flex; align-items: center; min-height: 32px;
  font-size: .9375rem; text-decoration: none;
}

.hero__lead {
  margin-top: 26px; max-width: 34ch;
  font-size: 1.1875rem; line-height: 1.45;
}


.week { margin-top: 34px; }
.week__title { font-size: 1rem; font-weight: 600; }
.week__days {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px;
  margin: 12px 0 0; padding: 0; list-style: none;
}
.day { position: relative; display: grid; }
.day__btn {
  height: 48px; padding: 0;
  border-radius: 12px; font-weight: 800; font-size: 1.0625rem;
  border: 2px dashed rgba(22, 35, 94, .4); background: transparent; color: rgba(22, 35, 94, .62);
  cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: transform var(--motion-instant) var(--ease-standard), box-shadow var(--motion-fast) var(--ease-standard);
}
.day--open .day__btn {
  border: 0; background: var(--navy); color: var(--sun);
  box-shadow: 0 3px 0 var(--navy-deep);
}
.day__btn:active { transform: translateY(2px); }
.day--open .day__btn:active { box-shadow: 0 1px 0 var(--navy-deep); }
.day__btn[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--foam), 0 0 0 5px var(--navy); }
.day--today::after {
  content: ""; position: absolute; left: 50%; bottom: -11px;
  width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; background: var(--dot);
}
.week__today { margin-top: 20px; min-height: 3em; font-size: .9375rem; }

/* ---------- Cena 2: noite ---------- */
.night {
  position: relative;
  background: var(--navy); color: var(--cream);
  padding: 0 0 52px;
}
/* luz das lâmpadas derramando no quintal */
.night::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 340px;
  background:
    radial-gradient(55% 70% at 50% 0%, rgba(255, 199, 0, .20), transparent 70%),
    radial-gradient(30% 40% at 18% 10%, rgba(245, 135, 42, .12), transparent 70%),
    radial-gradient(30% 40% at 82% 10%, rgba(245, 135, 42, .12), transparent 70%);
  pointer-events: none;
  transition: opacity 1100ms var(--ease-enter) 250ms;
}
.js .night:not(.is-lit)::before { opacity: 0; }

.lights { position: relative; z-index: 1; width: 100%; height: auto; overflow: visible; touch-action: manipulation; cursor: pointer; }
.lights__wire { fill: none; stroke: #070D2E; stroke-width: 2; }
.bulb line { stroke: #070D2E; stroke-width: 1.6; }
.bulb__cap { fill: #3B3F55; }
.bulb__off { fill: url(#bulb-dark); }
.bulb__on { fill: url(#bulb-lit); }
.bulb__glow { fill: url(#glow); }
.bulb__swing { transform-box: view-box; transform-origin: 0 0; }

/* sem JS as lâmpadas já nascem acesas; com JS esperam a cena entrar */
.js .night:not(.is-lit) .bulb__on,
.js .night:not(.is-lit) .bulb__glow { opacity: 0; }
.night.is-lit .bulb__on,
.night.is-lit .bulb__glow {
  animation: bulb-on 560ms var(--ease-standard) both;
  animation-delay: calc(var(--i) * 70ms);
}
@keyframes bulb-on {
  0%   { opacity: 0; }
  35%  { opacity: 1; }
  50%  { opacity: .3; }
  68%  { opacity: 1; }
  100% { opacity: 1; }
}

.bulb.is-swinging .bulb__swing {
  animation: swing 1500ms cubic-bezier(.3, .6, .4, 1) both;
  animation-delay: var(--d, 0ms);
}
@keyframes swing {
  0%   { transform: rotate(0); }
  14%  { transform: rotate(calc(10deg * var(--dir, 1))); }
  34%  { transform: rotate(calc(-7deg * var(--dir, 1))); }
  54%  { transform: rotate(calc(4deg * var(--dir, 1))); }
  74%  { transform: rotate(calc(-2deg * var(--dir, 1))); }
  100% { transform: rotate(0); }
}

.night__title {
  margin-top: 22px; max-width: 16ch;
  font-size: 2.25rem; line-height: 1.05; font-weight: 800; font-stretch: 80%;
  color: var(--sun);
  text-shadow: 0 0 28px rgba(255, 199, 0, .25);
}

.menu { margin: 28px 0 34px; padding: 0; list-style: none; }
.menu__item {
  display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: start;
  padding: 18px 0;
  border-top: 1px solid rgba(255, 244, 214, .16);
  transition: opacity 480ms var(--ease-enter), transform 480ms var(--ease-enter);
  transition-delay: calc(var(--i) * 110ms);
}
.menu__item:last-child { border-bottom: 1px solid rgba(255, 244, 214, .16); }
.js .menu:not(.is-on) .menu__item { opacity: .28; transform: translateY(8px); }
.menu__icon {
  font-size: 1.375rem; color: var(--sun); padding-top: 3px; text-align: center;
  text-shadow: 0 0 16px rgba(255, 199, 0, .45);
}
.menu__item h3 { font-size: 1.1875rem; font-weight: 600; line-height: 1.3; }
.menu__item p { margin-top: 2px; color: rgba(255, 244, 214, .82); }

.menu__item--live h3 { font-size: 1.5rem; font-weight: 800; font-stretch: 85%; }
.menu__item--live .menu__icon { font-size: 1.625rem; }
.live-dot {
  display: inline-flex; align-items: center; gap: 6px; vertical-align: middle;
  margin-left: 6px; padding: 2px 10px 3px;
  border-radius: 999px; background: rgba(245, 135, 42, .18);
  color: #FFB173; font-size: .8125rem; font-weight: 600; font-stretch: 100%;
}
.live-dot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--dot); }

/* ---------- Cena 3: onde (estática) ---------- */
.where { padding: 48px 0 44px; }
.where__title {
  font-size: 2.25rem; line-height: 1.05; font-weight: 800; font-stretch: 80%;
}
.where__address {
  display: flex; gap: 12px; margin-top: 16px;
  font-style: normal; font-size: 1.0625rem;
}
.where__address i { padding-top: 4px; color: var(--leaf); }

.map {
  margin-top: 22px; aspect-ratio: 4 / 3;
  border: 3px solid var(--navy); border-radius: 20px; overflow: hidden;
  background: #F2BC00;
  box-shadow: 0 5px 0 var(--navy);
}
.map iframe { width: 100%; height: 100%; border: 0; }

.route { display: grid; gap: 14px; margin-top: 24px; }

/* ---------- Rodapé ---------- */
.foot {
  background: var(--navy); color: rgba(255, 244, 214, .75);
  padding: 28px 0 calc(28px + env(safe-area-inset-bottom));
  font-size: .875rem; text-align: center;
}
.foot__ig {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  color: var(--cream); font-weight: 600; font-size: 1rem; text-decoration: none;
}
.foot p { margin-top: 4px; }

@media (min-width: 400px) {
  .brand__name { font-size: 2.75rem; }
}

/* ---------- Movimento reduzido: mesma informação, sem deslocamento ---------- */
@media (prefers-reduced-motion: reduce) {
  .btn, .day__btn, .coaster { transition: background-color var(--motion-fast) linear, box-shadow var(--motion-fast) linear; }
  .btn:active, .day__btn:active, .coaster:active { transform: none; }

  /* bolacha: giro vira troca de face */
  .coaster__inner { transition: none; }
  .coaster.is-flipped .coaster__inner { transform: none; }
  .coaster__back { transform: none; opacity: 0; transition: opacity var(--motion-standard) linear; }
  .coaster.is-flipped .coaster__back { opacity: 1; }

  /* lâmpadas já acesas; balanço vira piscada */
  .js .night:not(.is-lit) .bulb__on,
  .js .night:not(.is-lit) .bulb__glow,
  .js .night:not(.is-lit)::before { opacity: 1; }
  .night.is-lit .bulb__on,
  .night.is-lit .bulb__glow { animation: none; }
  .bulb.is-swinging .bulb__swing { animation: none; }
  .bulb.is-swinging .bulb__on { animation: blink 300ms linear; }

  .js .menu:not(.is-on) .menu__item { opacity: 1; transform: none; }
  .menu__item { transition: none; }
}
@keyframes blink { 50% { opacity: .45; } }