/* ============================================================
   Riviera Beach Bar — design tokens
   ============================================================ */
:root{
  --dusk-ink:     #141C12;
  --golden-sand:  #F7E9B8;
  --riviera-lime: #A3DC42;
  --riviera-sun:  #FFF822;
  --sunset-coral: #FF5A36;
  --dusk-plum:    #3B1F4D;

  --ink-soft: #EFE6C8cc;
  --sand-ink: #22271a;

  --font-display: "Big Shoulders Display", sans-serif;
  --font-body: "Schibsted Grotesk", sans-serif;

  --edge: 26px;
  --edge-lg: 64px;

  --ease: cubic-bezier(.16,.8,.24,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--dusk-ink);
  color:var(--golden-sand);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3{ font-family:var(--font-display); margin:0; }
p{ margin:0; }

.skip-link{
  position:absolute; left:-999px; top:0;
  background:var(--riviera-sun); color:var(--dusk-ink);
  padding:.6em 1em; z-index:200; font-weight:600;
}
.skip-link:focus{ left:var(--edge); top:var(--edge); }

/* ============================================================
   Buttons
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; gap:.5em;
  font-family:var(--font-body); font-weight:600; font-size:.98rem;
  padding:.95em 1.5em;
  border-radius:100px;
  border:1px solid transparent;
  white-space:nowrap;
  transition:transform .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease);
}
.btn span{ transition:transform .25s var(--ease); display:inline-block; }
.btn:hover span{ transform:translateX(3px); }
.btn:active{ transform:scale(.97); }

.btn--coral{ background:var(--sunset-coral); color:var(--dusk-ink); }
.btn--coral:hover{ background:#ff7355; }

.btn--dark{ background:var(--dusk-ink); color:var(--golden-sand); }
.btn--dark:hover{ background:#26311f; }

.btn--line{ background:transparent; border-color:currentColor; }
.btn--line:hover{ background:rgba(255,255,255,.08); }

/* ============================================================
   Photo placeholders — graceful fallback when no real image
   is dropped into /img yet. Real photos simply cover these.
   ============================================================ */
.photo{
  position:relative;
  overflow:hidden;
  background-color:var(--dusk-ink);
  isolation:isolate;
}
.photo::before{
  content:"";
  position:absolute; inset:0;
  z-index:0;
}
.photo::after{
  content:"";
  position:absolute; inset:0;
  z-index:1;
  opacity:.5;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/></svg>");
}
.photo img{
  position:relative; z-index:2;
  width:100%; height:100%;
  object-fit:cover;
  opacity:0; transition:opacity .5s var(--ease);
}
.photo img.is-loaded{ opacity:1; }

.photo--sunset::before{ background:
  radial-gradient(120% 90% at 50% 105%, var(--sunset-coral) 0%, transparent 55%),
  radial-gradient(80% 60% at 50% 0%, var(--dusk-plum) 0%, transparent 60%),
  linear-gradient(180deg, var(--dusk-ink), #1c1408 60%, var(--sunset-coral)); }
.photo--drinks::before{ background: linear-gradient(140deg, var(--golden-sand), var(--sunset-coral) 75%); }
.photo--couple::before{ background: linear-gradient(160deg, var(--dusk-plum), var(--dusk-ink) 70%); }
.photo--chope::before{ background: linear-gradient(150deg, var(--riviera-lime), var(--golden-sand) 80%); }
.photo--food::before{ background: linear-gradient(135deg, var(--golden-sand), #f0c98a 60%, var(--sunset-coral)); }
.photo--drink2::before{ background: linear-gradient(150deg, var(--dusk-ink), var(--riviera-lime) 110%); }
.photo--chope2::before{ background: linear-gradient(150deg, var(--golden-sand), var(--riviera-lime) 90%); }
.photo--acai::before{ background: linear-gradient(150deg, var(--dusk-plum), #7a2f4a 55%, var(--sunset-coral)); }
.photo--poster::before{ background:
  radial-gradient(70% 60% at 50% 20%, var(--riviera-lime) 0%, transparent 60%),
  linear-gradient(180deg, var(--dusk-ink), var(--dusk-plum)); }
.photo--insta1::before{ background: linear-gradient(140deg, var(--sunset-coral), var(--dusk-plum)); }
.photo--insta2::before{ background: linear-gradient(140deg, var(--riviera-lime), var(--dusk-ink)); }
.photo--insta3::before{ background: linear-gradient(140deg, var(--golden-sand), var(--sunset-coral)); }
.photo--insta4::before{ background: linear-gradient(140deg, var(--dusk-ink), var(--riviera-lime)); }

/* ============================================================
   Topbar
   ============================================================ */
.topbar{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:flex-start;
  padding:var(--edge);
  transition:background .35s var(--ease), padding .35s var(--ease), box-shadow .35s var(--ease);
}
.topbar.is-solid{
  background:rgba(20,28,18,.86);
  backdrop-filter:blur(10px);
  padding:14px var(--edge);
  box-shadow:0 1px 0 rgba(255,255,255,.06);
}
.topbar__mark img{ width:40px; height:40px; border-radius:50%; }

.topbar__toggle{
  position:relative; z-index:101;
  width:40px; height:40px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  background:transparent; border:0; padding:0; margin-left:auto;
  cursor:pointer;
}
.topbar__toggle span{
  display:block; width:22px; height:2px;
  background:var(--golden-sand);
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.6));
  transition:transform .3s var(--ease), opacity .3s var(--ease);
}
.topbar__toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.topbar__toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.topbar__toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.topbar__nav{
  position:fixed; inset:0 0 auto 0; top:0; z-index:100;
  display:flex; flex-direction:column;
  padding:90px var(--edge) 30px;
  background:var(--dusk-ink);
  transform:translateY(-100%);
  transition:transform .35s var(--ease);
}
.topbar__nav.is-open{ transform:translateY(0); }
.topbar__nav a{
  padding:16px 0;
  border-bottom:1px solid rgba(247,233,184,.12);
  font-family:var(--font-display); font-weight:700; font-size:1.4rem;
  color:var(--golden-sand);
}
.topbar__nav a:hover{ color:var(--riviera-lime); }

body.nav-open{ overflow:hidden; }

@media(min-width:760px){
  .topbar{ justify-content:space-between; }
  .topbar__toggle{ display:none; }
  .topbar__nav{
    position:static; z-index:auto;
    flex-direction:row; gap:28px;
    padding:0; background:transparent;
    transform:none; transition:none;
  }
  .topbar__nav a{
    padding:0; border:0;
    font-family:var(--font-body); font-weight:600; font-size:.9rem;
    color:var(--golden-sand);
    text-shadow:0 1px 4px rgba(0,0,0,.5);
  }
}

/* ============================================================
   Hero
   ============================================================ */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:calc(var(--edge) * 4) var(--edge) calc(var(--edge) * 3);
}
.hero__photo{ position:absolute; inset:0; z-index:0; }
.hero__scrim{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(20,28,18,.15) 0%, rgba(20,28,18,.15) 35%, rgba(20,28,18,.92) 92%);
}
.hero__content{ position:relative; z-index:2; text-align:center; }
.hero__word{
  font-family:var(--font-display);
  font-weight:900;
  font-size:clamp(4.2rem, 22vw, 8rem);
  line-height:.85;
  color:var(--riviera-sun);
  letter-spacing:-.01em;
  text-shadow:0 6px 30px rgba(0,0,0,.35);
  margin:0 0 .1em;
  animation:hero-word-float 7s ease-in-out infinite;
  transform-origin:center bottom;
}
@keyframes hero-word-float{
  0%,100%{ transform:scaleY(1.08) skewX(-3deg) translateY(0); }
  50%{ transform:scaleY(1.08) skewX(-3deg) translateY(-10px); }
}
.hero__tag{
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(1.3rem, 5.5vw, 1.9rem);
  color:var(--golden-sand);
  margin-bottom:.5em;
}
.hero__bio{
  font-size:1.02rem;
  color:var(--ink-soft);
  max-width:26em;
  margin:0 auto .9em;
}
.hero__hours{
  font-family:var(--font-display);
  font-weight:700;
  font-size:.95rem;
  letter-spacing:.03em;
  line-height:1.6;
  color:var(--riviera-lime);
  margin-bottom:1.6em;
}
.hero .btn{ font-size:1.05rem; padding:1em 2em; }
.hero__down{
  position:absolute; left:50%; bottom:18px; z-index:2;
  transform:translateX(-50%);
  width:34px; height:34px;
  display:flex; align-items:center; justify-content:center;
  animation:bob 2.2s ease-in-out infinite;
}
.hero__down svg{ width:20px; height:20px; stroke:var(--golden-sand); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
@keyframes bob{ 0%,100%{ transform:translate(-50%,0);} 50%{ transform:translate(-50%,8px);} }

/* ============================================================
   Photo strip — overlapping, slightly rotated mural
   ============================================================ */
.strip{
  position:relative;
  background:var(--dusk-ink);
  padding:70px var(--edge) 90px;
  display:flex; flex-direction:column; gap:0;
  align-items:center;
}
.strip__frame{
  width:78%;
  aspect-ratio:4/5;
  border-radius:6px;
  box-shadow:0 18px 40px rgba(0,0,0,.45);
  margin-bottom:-34px;
}
.strip__frame--a{ transform:rotate(-4deg); z-index:3; align-self:flex-start; margin-left:2%; }
.strip__frame--b{ transform:rotate(3deg); z-index:2; align-self:flex-end; margin-right:0%; width:82%; }
.strip__frame--c{ transform:rotate(-2deg); z-index:1; align-self:center; margin-bottom:0; }

@media(min-width:760px){
  .strip{ flex-direction:row; align-items:center; justify-content:center; gap:0; padding:110px var(--edge-lg) 130px; }
  .strip__frame{ width:27%; margin-bottom:0; }
  .strip__frame--a{ margin-left:0; margin-right:-4%; }
  .strip__frame--b{ width:30%; margin-top:-6%; margin-right:-3%; }
  .strip__frame--c{ margin-left:-4%; }
}

/* ============================================================
   Cardápio
   ============================================================ */
.menu{
  background:var(--golden-sand);
  color:var(--sand-ink);
  padding:80px 0 90px;
}
.menu__inner{ padding:0 var(--edge); }
.menu__head{ max-width:34em; margin-bottom:40px; }
.menu__head h2{
  font-size:clamp(2.4rem, 9vw, 3.4rem);
  font-weight:900;
  letter-spacing:-.01em;
  margin-bottom:.3em;
}
.menu__head p{ font-size:1.05rem; opacity:.8; margin-bottom:1.2em; max-width:32ch; }

.menu__gallery{
  display:flex; gap:16px;
  overflow-x:auto;
  padding:4px 0 12px;
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}

@media(min-width:760px){
  .menu__inner{ padding:0 var(--edge-lg); }
}
.menu__gallery::-webkit-scrollbar{ display:none; }
.menu__item{
  flex:0 0 auto;
  width:68vw; max-width:320px;
  aspect-ratio:4/5;
  border-radius:8px;
  scroll-snap-align:start;
  margin:0;
}
.menu__item figcaption{
  position:absolute; left:14px; bottom:12px; z-index:3;
  font-family:var(--font-display); font-weight:800;
  font-size:1.1rem; color:var(--golden-sand);
  text-shadow:0 2px 12px rgba(0,0,0,.5);
}

/* Telas bem grandes (monitor externo): a galeria do cardápio vira
   um mural com leve rotação, na mesma pegada do "Segue a gente aí". */
@media(min-width:1600px){
  .menu__inner{ max-width:1500px; margin:0 auto; }
  .menu__gallery{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:20px;
    overflow:visible;
    padding:20px 0 12px;
  }
  .menu__item{
    width:100%; max-width:none;
    aspect-ratio:1/1;
    box-shadow:0 14px 30px rgba(0,0,0,.4);
  }
  .menu__gallery .menu__item:nth-child(1){ transform:rotate(-3deg); }
  .menu__gallery .menu__item:nth-child(2){ transform:rotate(2deg); margin-top:26px; }
  .menu__gallery .menu__item:nth-child(3){ transform:rotate(2deg); margin-top:26px; }
  .menu__gallery .menu__item:nth-child(4){ transform:rotate(-2deg); }
}

/* ============================================================
   Evento
   ============================================================ */
.event{
  background:var(--dusk-ink);
  padding:80px var(--edge) 90px;
  display:flex; flex-direction:column; gap:36px;
}
.event__copy h2{
  font-size:clamp(2.4rem, 9vw, 3.4rem);
  font-weight:900; color:var(--golden-sand);
  margin-bottom:.3em;
}
.event__copy p{ font-size:1.05rem; color:var(--ink-soft); max-width:32ch; margin-bottom:1.3em; }
.event__poster{
  width:100%; max-width:420px; margin:0 auto;
  aspect-ratio:3/4;
  border-radius:10px;
  box-shadow:0 24px 60px rgba(0,0,0,.5);
  transform:rotate(-1.5deg);
}

@media(min-width:820px){
  .event{ flex-direction:row-reverse; align-items:center; justify-content:center; gap:70px; padding:110px var(--edge-lg); }
  .event__copy{ max-width:26em; }
  .event__poster{ margin:0; flex:0 0 340px; }
}

/* ============================================================
   Localização
   ============================================================ */
.location{
  background:var(--golden-sand);
  color:var(--sand-ink);
  padding:80px var(--edge) 90px;
}
.location__inner{ display:flex; flex-direction:column; gap:24px; }
.location__copy{ max-width:34em; }
.location__copy h2{ font-size:clamp(2.4rem, 9vw, 3.4rem); font-weight:900; margin-bottom:.4em; }
.location__joke{ font-size:1.05rem; opacity:.85; margin-bottom:1.1em; }
.location__address{ font-weight:600; margin-bottom:.3em; }
.location__hours{ opacity:.75; line-height:1.6; margin-bottom:1.3em; }
.location__map{
  width:100%; aspect-ratio:16/10;
  border-radius:12px; overflow:hidden;
  background:#ddd2a3;
}
.location__map iframe{ width:100%; height:100%; border:0; display:block; filter:grayscale(.15) contrast(1.05); }

@media(min-width:820px){
  .location{ padding:110px var(--edge-lg) 100px; }
  .location__inner{ flex-direction:row; align-items:stretch; gap:56px; }
  .location__copy{ flex:1 1 56%; }
  .location__map{ flex:1 1 40%; width:auto; aspect-ratio:auto; align-self:stretch; }
}

/* ============================================================
   Siga a gente
   ============================================================ */
.follow{
  background:var(--dusk-ink);
  padding:80px var(--edge) 0;
}
.follow__copy{ margin-bottom:44px; }
.follow__copy h2{
  font-size:clamp(2.4rem, 9vw, 3.4rem);
  font-weight:900; color:var(--golden-sand);
  margin-bottom:.6em;
}
.follow__links{ display:flex; flex-wrap:wrap; gap:14px; }

.follow__strip{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  padding-bottom:70px;
}
.follow__strip .strip__frame{ width:100%; aspect-ratio:1/1; margin:0; box-shadow:0 14px 30px rgba(0,0,0,.4); }
.follow__strip .strip__frame--a{ transform:rotate(-3deg); }
.follow__strip .strip__frame--b{ transform:rotate(2deg); margin-top:18px; }
.follow__strip .strip__frame--c{ transform:rotate(2deg); margin-top:-18px; }
.follow__strip .strip__frame--d{ transform:rotate(-2deg); }

@media(min-width:600px){
  .follow__strip{ grid-template-columns:repeat(4,1fr); }
  .follow__strip .strip__frame--b,.follow__strip .strip__frame--c{ margin-top:26px; }
}
@media(min-width:820px){
  .follow{ padding:110px var(--edge-lg) 0; }
}

/* ============================================================
   Footer
   ============================================================ */
.footer{
  background:var(--dusk-ink);
  border-top:1px solid rgba(247,233,184,.12);
  padding:44px var(--edge) 34px;
  display:flex; flex-direction:column; align-items:flex-start; gap:16px;
}
.footer__mark{ width:44px; height:44px; border-radius:50%; }
.footer__address, .footer__hours{ color:var(--ink-soft); font-size:.92rem; line-height:1.6; }
.footer__legal{ color:rgba(247,233,184,.45); font-size:.8rem; margin-top:8px; }

@media(min-width:760px){
  .footer{
    flex-direction:row; align-items:center; justify-content:space-between;
    padding:32px var(--edge-lg);
  }
}

/* ============================================================
   Reveal on scroll
   ============================================================ */
[data-reveal]{
  opacity:0; transform:translateY(24px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
[data-reveal].is-visible{ opacity:1; transform:none; }

/* ============================================================
   Floating WhatsApp button
   ============================================================ */
.fab-whatsapp{
  position:fixed;
  right:18px;
  bottom:calc(18px + env(safe-area-inset-bottom));
  z-index:150;
  width:56px; height:56px;
  border-radius:50%;
  background:#25D366;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 26px rgba(0,0,0,.4);
  transition:transform .2s var(--ease);
}
.fab-whatsapp::before{
  content:"";
  position:absolute; inset:0;
  border-radius:50%;
  background:#25D366;
  opacity:.55;
  animation:fab-ping 2.8s ease-out infinite;
  z-index:-1;
}
.fab-whatsapp svg{ width:28px; height:28px; fill:#fff; }
.fab-whatsapp:hover{ transform:scale(1.08); }
@keyframes fab-ping{
  0%{ transform:scale(1); opacity:.45; }
  100%{ transform:scale(1.6); opacity:0; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  [data-reveal]{ opacity:1; transform:none; transition:none; }
  .hero__down{ animation:none; }
  .hero__word{ animation:none; }
  .fab-whatsapp::before{ animation:none; display:none; }
}