/* ============================================================
   MeuCoffe — Estilos (v3 — fotografia premium estática)
   Sem 3D. Sem GSAP. Sem animação atrelada ao scroll.
   Stack: HTML + Tailwind + Vanilla JS (IntersectionObserver).
   ============================================================ */

:root {
  --gold: #d4af37;
  --champagne: #e8c77a;
  --ink: #0b0a0a;
  --obsidian: #121111;
  --espresso: #1a1413;
  --cream: #f4efe6;
}

html { scroll-behavior: smooth; }

body {
  background-color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Scrollbar dourada minimalista */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--ink); }
::-webkit-scrollbar-thumb { background: rgba(212, 175, 55, 0.2); }
::-webkit-scrollbar-thumb:hover { background: rgba(212, 175, 55, 0.5); }

/* ============================================================
   SEÇÕES FOTOGRÁFICAS — fotos como protagonistas
   ============================================================ */
.hero-section,
.cinema-section {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* Parallax CSS puro — a foto fica parada enquanto o conteúdo rola.
     NÃO é animação sincronizada com scroll, é o oposto: imobilidade. */
  background-attachment: fixed;
  isolation: isolate;
}

/* Hero overlay: vinheta forte para tipografia central respirar */
.hero-overlay {
  background:
    radial-gradient(ellipse at center,
      rgba(11, 10, 10, 0.55) 0%,
      rgba(11, 10, 10, 0.78) 60%,
      rgba(11, 10, 10, 0.92) 100%),
    linear-gradient(180deg,
      rgba(11, 10, 10, 0.85) 0%,
      rgba(11, 10, 10, 0.3) 35%,
      rgba(11, 10, 10, 0.3) 65%,
      rgba(11, 10, 10, 0.92) 100%);
  z-index: 1;
}

/* Cinema overlay: vinheta lateral cinematográfica — destaca tipografia
   no lado oposto da foto. Há 3 variantes: left, right, center. */
.cinema-overlay {
  z-index: 1;
}

/* Texto à DIREITA → escurece o lado direito mantendo foto à esquerda */
.cinema-overlay-right {
  background:
    linear-gradient(90deg,
      rgba(11, 10, 10, 0.3) 0%,
      rgba(11, 10, 10, 0.4) 30%,
      rgba(11, 10, 10, 0.82) 65%,
      rgba(11, 10, 10, 0.94) 100%),
    linear-gradient(180deg,
      rgba(11, 10, 10, 0.7) 0%,
      rgba(11, 10, 10, 0) 18%,
      rgba(11, 10, 10, 0) 82%,
      rgba(11, 10, 10, 0.85) 100%);
}

/* Texto à ESQUERDA → escurece a esquerda, foto fica visível à direita */
.cinema-overlay-left {
  background:
    linear-gradient(90deg,
      rgba(11, 10, 10, 0.94) 0%,
      rgba(11, 10, 10, 0.82) 35%,
      rgba(11, 10, 10, 0.4) 70%,
      rgba(11, 10, 10, 0.3) 100%),
    linear-gradient(180deg,
      rgba(11, 10, 10, 0.7) 0%,
      rgba(11, 10, 10, 0) 18%,
      rgba(11, 10, 10, 0) 82%,
      rgba(11, 10, 10, 0.85) 100%);
}

/* Texto centralizado → vinheta dupla com centro mais claro */
.cinema-overlay-center {
  background:
    radial-gradient(ellipse at center,
      rgba(11, 10, 10, 0.45) 0%,
      rgba(11, 10, 10, 0.75) 60%,
      rgba(11, 10, 10, 0.95) 100%);
}

/* Linhas douradas finas (letterbox cinematográfico) — só em seções cinema */
.cinema-section::before,
.cinema-section::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.35), transparent);
  z-index: 2;
  pointer-events: none;
}
.cinema-section::before { top: 0; }
.cinema-section::after  { bottom: 0; }

/* Mobile: desabilita background-attachment fixed (Safari iOS quebra) */
@media (max-width: 768px) {
  .hero-section,
  .cinema-section {
    background-attachment: scroll;
  }
}

/* ============================================================
   BOTÃO DOURADO (CTA premium)
   ============================================================ */
.btn-gold {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 1rem 2.25rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--gold);
  background: transparent;
  border: 1px solid rgba(212, 175, 55, 0.55);
  cursor: pointer;
  overflow: hidden;
  transition: color 0.5s ease, border-color 0.5s ease, transform 0.4s ease,
              background-color 0.5s ease, box-shadow 0.5s ease;
}

.btn-gold::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent, rgba(212, 175, 55, 0.22), transparent);
  transform: translateX(-100%);
  transition: transform 0.7s ease;
}

.btn-gold:hover {
  color: var(--ink);
  border-color: var(--gold);
  background-color: var(--gold);
  box-shadow:
    0 0 28px rgba(212, 175, 55, 0.4),
    0 0 70px rgba(212, 175, 55, 0.2);
  transform: translateY(-1px);
}
.btn-gold:hover::before { transform: translateX(100%); }

/* ============================================================
   CARDS PREMIUM (Seção 4 — clube)
   Fundo ink com leve transparência sobre a foto + hover dourado
   ============================================================ */
.card-premium {
  position: relative;
  padding: 2.5rem 3rem;
  background-color: rgba(11, 10, 10, 0.92);
  backdrop-filter: blur(4px);
  transition: background-color 0.6s ease, transform 0.5s ease;
}
.card-premium:hover {
  background-color: rgba(26, 20, 19, 0.96);
  transform: translateY(-2px);
}

/* ============================================================
   FORMULÁRIO LOTE ZERO
   ============================================================ */
.field {
  width: 100%;
  padding: 0.75rem 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(244, 239, 230, 0.2);
  color: var(--cream);
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  font-weight: 300;
  letter-spacing: 0.02em;
  outline: none;
  transition: border-color 0.4s ease;
}
.field::placeholder { color: rgba(244, 239, 230, 0.3); font-style: italic; }
.field:focus { border-color: var(--gold); }

.choice {
  flex: 1;
  position: relative;
  cursor: pointer;
}
.choice input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.choice span {
  display: block;
  text-align: center;
  padding: 0.75rem 1rem;
  font-size: 0.75rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(244, 239, 230, 0.6);
  border: 1px solid rgba(244, 239, 230, 0.15);
  transition: all 0.4s ease;
}
.choice input:checked + span {
  color: var(--ink);
  background-color: var(--gold);
  border-color: var(--gold);
  box-shadow: 0 0 18px rgba(212, 175, 55, 0.3);
}
.choice:hover span { border-color: rgba(212, 175, 55, 0.6); color: var(--cream); }

.corner {
  position: absolute;
  width: 14px;
  height: 14px;
  border-color: var(--gold);
  border-style: solid;
  border-width: 0;
  opacity: 0.8;
}
.corner-tl { top: -1px; left: -1px;  border-top-width: 1px; border-left-width: 1px; }
.corner-tr { top: -1px; right: -1px; border-top-width: 1px; border-right-width: 1px; }
.corner-bl { bottom: -1px; left: -1px;  border-bottom-width: 1px; border-left-width: 1px; }
.corner-br { bottom: -1px; right: -1px; border-bottom-width: 1px; border-right-width: 1px; }

/* ============================================================
   REVEAL (IntersectionObserver adiciona .is-visible)
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1.0s cubic-bezier(.2, .8, .2, 1),
              transform 1.0s cubic-bezier(.2, .8, .2, 1);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
/* Stagger natural: cada filho .reveal espera mais que o anterior */
.reveal:nth-child(2).is-visible { transition-delay: 0.08s; }
.reveal:nth-child(3).is-visible { transition-delay: 0.16s; }
.reveal:nth-child(4).is-visible { transition-delay: 0.24s; }
.reveal:nth-child(5).is-visible { transition-delay: 0.32s; }
.reveal:nth-child(6).is-visible { transition-delay: 0.40s; }

/* Scroll cue pulsante */
.scroll-cue { animation: scroll-pulse 2.6s ease-in-out infinite; }
@keyframes scroll-pulse {
  0%, 100% { opacity: 0.3;  transform: translateY(0); }
  50%      { opacity: 0.75; transform: translateY(6px); }
}

/* Tipografia */
h1, h2, h3 { font-feature-settings: "liga", "kern"; }
.font-serif { letter-spacing: -0.005em; }

/* Acessibilidade */
@media (prefers-reduced-motion: reduce) {
  .scroll-cue { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero-section, .cinema-section { background-attachment: scroll; }
}