/* ==========================================================================
   HOMEBEACH — Layout Styles
   Retro Surf Culture elevation
   ========================================================================== */

/* ---- Hero ---- */
.hero {
  background: var(--grad-hero);
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  padding: 2rem 4rem;
}

/* Warm amber tint overlay — faded photo effect */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--grad-hero-tint);
  pointer-events: none;
  z-index: 1;
}

/* Push all hero children above the tint */
.hero > * { position: relative; z-index: 2; }

/* ---- Hero drifting sticker ticker ---- */
.hero-drift-row {
  position: absolute;
  top: 16px; left: 0; right: 0;
  overflow: hidden;
  height: 52px;
  opacity: 0.18;
  pointer-events: none;
  z-index: 2;
}
.hero-drift-inner {
  display: flex;
  gap: 2.5rem;
  align-items: center;
  animation: drift 30s linear infinite;
  white-space: nowrap;
  width: max-content;
}
.hero-drift-sticker {
  height: 44px;
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
}

/* ---- Games inner ---- */
.games-inner { position: relative; z-index: 2; }

/* ---- Section Shell ---- */
.section       { padding: 5rem 2rem; position: relative; overflow: hidden; }
.section-inner { max-width: 1000px; margin: 0 auto; position: relative; z-index: 1; }

/* ---- Section Logo Watermarks ---- */
.cocktails-section::before,
.quotes-section::after,
.facts-section::before,
.games-section::after {
  content: '';
  position: absolute;
  top: -80px;
  width: 50vw;
  height: 50vw;
  background-image: url('../images/logo-badge-transparent.png');
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 0;
  opacity: 0.07;
}
/* Top-left sections: cocktails, facts */
.cocktails-section::before,
.facts-section::before {
  left: -60px;
  transform: rotate(-20deg);
}
/* Top-right sections: quotes, games */
.quotes-section::after,
.games-section::after {
  right: -60px;
  transform: rotate(20deg);
}

/* ---- Notice Banner ---- */
.notice-banner {
  background: var(--ink);
  color: var(--sand);
  text-align: center;
  padding: 0.75rem 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 3;
}
.notice-text {
  font-family: 'Space Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.notice-icon { font-size: 1rem; }

/* ---- Wave Divider ---- */
.wave     { width: 100%; overflow: hidden; line-height: 0; display: block; }
.wave svg {
  display: block;
  width: 100%;
  filter: url(#wave-roughen);
}

/* ---- Cocktails Section ---- */
.cocktails-section {
  background-color: var(--paper);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cpath d='M0 0 L60 60 M60 0 L0 60' stroke='%231A1209' stroke-width='0.5' stroke-linecap='round' opacity='0.04'/%3E%3Cpath d='M30 0 L30 60 M0 30 L60 30' stroke='%231A1209' stroke-width='0.3' stroke-linecap='round' opacity='0.025'/%3E%3C/svg%3E");
  padding: 3rem 2rem;
}
.cocktails-section .section-tag    { color: var(--rust); border-color: var(--rust); background: rgba(184,92,56,0.08); }
.cocktails-section .section-heading { color: var(--ink); }
.cocktails-section .section-heading em { color: var(--rust); font-style: italic; }

.cocktail-intro {
  font-size: 1.05rem;
  color: var(--text-light);
  font-style: italic;
  margin-bottom: 1.8rem;
  max-width: 560px;
}

.cocktail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 1.8rem;
}

/* ---- Quotes Section ---- */
.quotes-section {
  background-color: #1B4F6B;
  background-image:
    var(--grad-quotes),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Ccircle cx='10' cy='10' r='1.8' fill='white' opacity='0.07'/%3E%3C/svg%3E");
}
.quotes-section .section-tag     { color: var(--sand); border-color: rgba(232,200,74,0.5); background: rgba(232,200,74,0.1); letter-spacing: 0.22em; }
.quotes-section .section-heading { color: var(--white); }
.quotes-section .section-heading em { color: var(--sand); }
.quotes-section .section-icon-img { filter: brightness(0) invert(1) opacity(0.7); }

.quotes-ticker-wrap { overflow: hidden; margin-bottom: 3rem; padding: 1rem 0; }
.quotes-ticker {
  display: flex;
  gap: 3rem;
  animation: ticker 35s linear infinite;
  white-space: nowrap;
}
.quotes-ticker span {
  font-family: 'Bangers', cursive;
  font-size: 1.2rem;
  letter-spacing: 0.06em;
  font-style: italic;
  color: rgba(232,200,74,0.4);
  flex-shrink: 0;
}

.quotes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}

/* ---- Facts Section ---- */
.facts-section {
  background-color: #D9C87A;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cpath d='M0 40 Q20 30 40 40 Q60 50 80 40' stroke='%231A1209' stroke-width='1' fill='none' stroke-linecap='round' opacity='0.06'/%3E%3C/svg%3E");
}
.facts-section .section-tag     { color: var(--ink); border-color: var(--ink); background: rgba(26,18,9,0.08); letter-spacing: 0.22em; }
.facts-section .section-heading { color: var(--ink); }
.facts-section .section-heading em { color: var(--rust); }

.facts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-top: 1rem;
}

/* ---- Vibes Section ---- */
.vibes-section {
  background-color: var(--ink);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Ccircle cx='12' cy='12' r='1.2' fill='white' opacity='0.04'/%3E%3C/svg%3E");
  padding: 4rem 2rem;
}
.vibes-section .section-tag { color: rgba(184,92,56,0.8); border-color: rgba(184,92,56,0.4); background: rgba(184,92,56,0.08); }
.vibes-section .section-heading { color: var(--white); }
.vibes-section .section-heading em { color: var(--rust); }

.vibes-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 0.75rem;
  margin-top: 2.5rem;
}
.vibe-img {
  width: 100%;
  height: 280px;
  object-fit: cover;
  display: block;
  border-radius: 3px;
  border: 1.5px solid rgba(26,18,9,0.4);
  transition: transform 0.2s, filter 0.2s;
  filter: sepia(0.28) saturate(0.72) contrast(1.14) brightness(0.95);
}
.vibe-img--tall {
  height: 340px;
}
.vibe-img:nth-child(3),
.vibe-img:nth-child(4) {
  margin-top: 1.5rem;
}
.vibe-img:hover {
  transform: scale(1.02);
  filter: sepia(0.15) saturate(0.88) contrast(1.14) brightness(1.02);
  z-index: 1;
  position: relative;
}

@media (max-width: 640px) {
  .vibes-grid { grid-template-columns: 1fr; }
}

/* ---- Games Section ---- */
.games-section {
  background-color: var(--warm-dark);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Ccircle cx='12' cy='12' r='1.5' fill='%234CAF50' opacity='0.10'/%3E%3C/svg%3E");
  position: relative;
  overflow: hidden;
}
.games-section .section-tag     { color: var(--green); border-color: rgba(61,107,69,0.5); background: rgba(61,107,69,0.12); letter-spacing: 0.22em; }
.games-section .section-heading { color: var(--white); }
.games-section .section-heading em { color: var(--green); }
.games-section .section-icon-img { filter: brightness(0) invert(1) opacity(0.5); }

.games-intro {
  font-size: 1rem;
  color: rgba(254,251,243,0.45);
  font-style: italic;
  margin-bottom: 3rem;
  max-width: 480px;
}
.games-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1.2rem;
  position: relative;
  z-index: 2;
}

/* ---- Footer ---- */
footer {
  background: #050300;
  padding: 3rem 2rem;
  text-align: center;
  border-top: 1px solid rgba(232,200,74,0.12);
}
.footer-logo-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 1rem;
}
.footer-logo-img {
  width: 80px;
  height: auto;
  opacity: 0.55;
}