/* ==========================================================================
   Summer's End Boat Bash — shared site styles
   Restored from the original Claude Design export (bundled single-page file).
   The section markup references these custom properties and keyframes; without
   them, var() colours fall back to defaults and every `animation: … var(--play)`
   shorthand is invalid, so nothing animates.
   ========================================================================== */

:root {
  --accent: #FF5A3C;
  --tang:   #FF8A3D;
  --gold:   #FFC24B;
  --ink:    #2C1408;
  --cream:  #FFF3E6;
  --play:   running;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  background: var(--cream);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  position: relative;
}
img { max-width: 100%; display: block; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: #E23D22; }

/* ---- keyframes (verbatim from the original export) ---- */
@keyframes bob      { 0%,100% { transform: translateY(6px) rotate(-0.7deg); } 50% { transform: translateY(-14px) rotate(0.7deg); } }
@keyframes wake     { 0% { background-position: 0 0, 0 0; } 100% { background-position: -1200px 0, 900px 0; } }
@keyframes sunpulse { 0%,100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.06); opacity: 1; } }
@keyframes drift    { 0% { transform: translateX(-6%); } 100% { transform: translateX(6%); } }
@keyframes glowmove { 0%,100% { transform: translate(-50%,0); } 50% { transform: translate(-50%,-10px); } }
@keyframes bounce   { 0%,100% { transform: translateY(0); } 50% { transform: translateY(9px); } }
@keyframes shimmer  { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }
@keyframes floaty   { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes kenburns { 0% { transform: scale(1.06) translateY(0); } 100% { transform: scale(1.14) translateY(-1.5%); } }
/* new for the Sunset Depth home (verbatim from the design handoff) */
@keyframes ripple   { from { transform: translate(-50%,-50%) scale(.7); opacity:.5; } to { transform: translate(-50%,-50%) scale(1.4); opacity:0; } }
@keyframes eq       { from { transform: scaleY(.22); } to { transform: scaleY(1); } }
@keyframes noterise { from { opacity:0; transform: translateY(20px); } 15% { opacity:.9; } to { opacity:0; transform: translateY(-120px); } }

/* Hero bob: the boat rocks on the water. The original defined `bob` but never
   applied it. Scale is baked into every step so the ±0.7deg rotation can never
   expose the image's corners on a full-bleed backdrop. */
@keyframes heroBob {
  0%,100% { transform: scale(1.08) translateY(5px)  rotate(-0.55deg); }
  50%     { transform: scale(1.08) translateY(-11px) rotate(0.55deg); }
}
.hero-boat-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  animation: heroBob 9s ease-in-out infinite var(--play);
  will-change: transform;
}

/* ==========================================================================
   SUNSET DEPTH HERO (home page) — centred circular boat photo bobbing over a
   rising sun and expanding wake rings; the H1 overlaps the top of the circle
   for a poster effect. Helper classes live here; layout/colour is inline in
   index.html per the site's flattened-export convention.
   ========================================================================== */
/* Wrapper does the centering; inner element does the sunpulse scale. They must
   be separate because sunpulse animates `transform`, which would otherwise
   clobber the centering translate (the handoff's "two transforms" warning). */
.hero-sun {
  position: absolute; left: 50%; top: 56%;
  width: min(64vw, 640px); aspect-ratio: 1;
  transform: translate(-50%, -50%);
  z-index: 0;
  pointer-events: none;
}
.hero-sun > i {
  display: block; width: 100%; height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 60%, #FFC85B 0%, #FF6F5B 42%, rgba(91,42,133,.35) 72%, transparent 80%);
  filter: blur(6px);
  animation: sunpulse 8s ease-in-out infinite alternate var(--play);
}
.hero-ripple {
  position: absolute; left: 50%; top: 52%;
  width: min(46vw, 460px); aspect-ratio: 1;
  border: 1.5px solid rgba(255,231,163,.4);
  border-radius: 50%;
  z-index: 0;
  transform: translate(-50%, -50%);
  animation: ripple 6s ease-out infinite var(--play);
  pointer-events: none;
}
.hero-ripple.delay { animation-delay: 3s; }

.hero-circle {
  position: relative;
  z-index: 1;
  width: clamp(220px, 36vw, 352px); aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto;
  background: #150A1F;
  animation: bob 5.5s ease-in-out infinite alternate var(--play);
  will-change: transform;
  box-shadow:
    0 30px 60px rgba(0,0,0,.6),
    0 0 0 2px rgba(255,194,75,.8),
    0 0 40px rgba(255,138,61,.35);
}
.hero-circle img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }

/* shimmering gradient headline (The sound) */
.shimmer-text {
  background: linear-gradient(90deg, #FFE7A3, #FF8A3D, #FFE7A3, #FFC24B, #FFE7A3);
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: shimmer 5s linear infinite var(--play);
}

/* equalizer bars */
.eq-bar {
  width: clamp(8px, 2vw, 16px);
  height: 100%;
  border-radius: 8px 8px 3px 3px;
  transform-origin: bottom;
  background: linear-gradient(#FFE7A3, #FF5A3C);
  animation: eq 0.8s ease-in-out infinite alternate var(--play);
}

/* floating-notes layer + the note glyphs JS spawns into it */
#notefield { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.note {
  position: absolute; bottom: 0;
  color: #FFE7A3;
  animation: noterise linear forwards var(--play);
  pointer-events: none;
}

/* run-of-night timeline fill (draws on reveal) */
.timeline-fill {
  width: 0;
  transition: width 1.6s cubic-bezier(.22,1,.36,1);
}
.timeline-fill.is-drawn { width: 100%; }

/* ---- scroll reveal ----
   Hidden state is gated on html.js (set by an inline script in <head>) so that
   if JS never runs, content stays visible instead of being stuck invisible. */
html.js [data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
}
html.js [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

/* ---- floating sticky Reserve button ----
   Hidden while the hero is on screen: the hero already has its own CTAs, and
   the fixed button otherwise overlaps them. `.is-visible` is toggled by site.js
   once the user scrolls past the hero. */
.float-reserve {
  position: fixed;
  bottom: 22px;
  right: 22px;
  z-index: 50;
  background: linear-gradient(135deg, var(--accent), var(--gold));
  color: #fff;
  font-weight: 800;
  font-size: 15px;
  padding: 14px 24px;
  border-radius: 100px;
  box-shadow: 0 12px 30px rgba(255,90,60,.5);
  animation: floaty 4s ease-in-out infinite var(--play);
}
.float-reserve:hover { color: #fff; }
html.js .float-reserve {
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s ease, visibility .35s ease;
}
html.js .float-reserve.is-visible {
  opacity: 1;
  visibility: visible;
}

/* ---- responsive stacking ----
   The section markup carries inline `grid-template-columns`, so a plain
   stylesheet rule can't win — these overrides need !important. `.stack-md`
   is for full-width two-column layouts, `.stack-sm` for the tight
   label/value grids inside cards. */
@media (max-width: 880px) {
  .stack-md { grid-template-columns: 1fr !important; }
}
@media (max-width: 520px) {
  .stack-sm { grid-template-columns: 1fr !important; }
}
/* home-page grids: drop 4→2 and 3→2 so cards don't get too narrow on phones */
@media (max-width: 720px) {
  .stat-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .food-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ---- accessibility: honour reduced-motion ---- */
@media (prefers-reduced-motion: reduce) {
  :root { --play: paused; }
  html { scroll-behavior: auto; }
  .hero-boat-wrap,
  .float-reserve,
  [data-hero-boat],
  .hero-circle, .hero-sun > i, .hero-ripple, .shimmer-text, .eq-bar { animation: none !important; }
  #notefield { display: none !important; }
  .timeline-fill { width: 100% !important; transition: none !important; }
  html.js [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ---- print ---- */
@media print {
  html { scroll-behavior: auto; }
  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
  html.js [data-reveal] { opacity: 1 !important; transform: none !important; }
  .float-reserve { display: none !important; }
  section { break-inside: avoid-page; page-break-inside: avoid; }
  [data-hero-boat], .hero-boat-wrap,
  .hero-circle, .hero-sun > i, .hero-ripple { animation: none !important; }
  #notefield { display: none !important; }
}