/* ========================================
   LOSTANDFOUND — Live Music Guide Styles
   ======================================== */

html { scroll-behavior: smooth; }

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* --- Navigation States --- */
.nav-scrolled {
  background: rgba(28, 25, 23, 0.95) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
}

.nav-text-color { color: #FFFFFF; transition: color 0.3s; }
.nav-link { color: rgba(255,255,255,0.6); transition: color 0.2s; }
.nav-link:hover { color: #E0301E !important; }
.nav-icon-color { color: #FFFFFF; }

/* Brand logo: the mark is black-on-transparent; on dark headers/footers we flip
   it to solid white. (Nav is dark in both states — transparent over the hero and
   ink-blur when scrolled — so a single white treatment works everywhere.) */
.logo-white { filter: brightness(0) invert(1); }

/* --- Outline Text --- */
.outline-text {
  -webkit-text-stroke: 3px #F2ECDD;
  color: transparent !important;
}

@media (min-width: 768px) {
  .outline-text { -webkit-text-stroke: 4px #F2ECDD; }
}

/* --- Genre Filter Buttons --- */
.genre-filter-btn {
  color: #78716C;
  background: white;
  border: 1px solid #E7E5E4;
}
.genre-filter-btn:hover {
  border-color: #E0301E;
  color: #E0301E;
}
.genre-filter-btn.active {
  background: #1C1917;
  color: white;
  border-color: #1C1917;
}

/* ========================================
   CALENDAR
   ======================================== */
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}

.cal-weekday {
  text-align: center;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #78716C;
  padding: 8px 0;
  font-size: 0.75rem;
}

.cal-cell {
  position: relative;
  min-height: 66px;
  display: flex;
  flex-direction: column;
  padding: 6px;
  background: #FBF8EF;
  border: 1px solid #E7E5E4;
  transition: all 0.15s ease;
  overflow: hidden;
}

@media (min-width: 768px) {
  .cal-cell { min-height: 132px; padding: 8px; }
  /* let event-free weeks shrink so the month doesn't open on empty rows */
  .cal-cell:not(.has-events):not(.is-blank) { min-height: 92px; }
}

.cal-cell.is-blank {
  background: transparent;
  border-color: transparent;
}

.cal-cell.has-events {
  cursor: pointer;
}
.cal-cell.has-events:hover {
  border-color: #E0301E;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(220, 38, 38, 0.12);
  z-index: 2;
}

.cal-cell.is-past { opacity: 0.4; }

.cal-cell.is-today { border-color: #1C1917; }
.cal-cell.is-today .cal-daynum {
  background: #1C1917;
  color: #fff;
}

.cal-cell.is-selected {
  border-color: #E0301E;
  background: #FFF1F1;
  box-shadow: inset 0 0 0 1px #E0301E;
}

.cal-daynum {
  font-family: 'Courier Prime', monospace;
  font-weight: 700;
  font-size: 12px;
  line-height: 1;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #44403C;
  flex-shrink: 0;
}

@media (min-width: 768px) {
  .cal-daynum { font-size: 14px; width: 26px; height: 26px; }
}

/* event titles inside calendar cells (desktop) */
.cal-events {
  flex-direction: column;
  gap: 3px;
  margin-top: 6px;
  min-width: 0;
}
.cal-event {
  display: block;
  font-family: 'Courier Prime', monospace;
  font-size: 0.75rem;
  line-height: 1.35;
  color: #fff;
  padding: 2px 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: filter 0.15s ease;
}
.cal-event:hover { filter: brightness(1.12); }
.cal-event b { font-weight: 700; }
/* "+N more" reads as the clickable affordance it is (cell click reveals the day) */
.cal-event-more {
  font-family: 'Courier Prime', monospace;
  font-size: 0.6875rem;
  font-weight: 700;
  color: #C42818;
  padding-left: 2px;
  margin-top: 1px;
  cursor: pointer;
}

/* event dots in calendar cells (mobile) */
.cal-dots {
  margin-top: auto;
  flex-wrap: wrap;
  gap: 3px;
  align-items: center;
}
.cal-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  flex-shrink: 0;
}
.cal-more {
  font-family: 'Courier Prime', monospace;
  font-size: 0.625rem;
  font-weight: 700;
  color: #78716C;
}

/* --- Agenda date group header --- */
.agenda-day-header {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding-bottom: 8px;
  border-bottom: 2px solid #1C1917;
  margin-bottom: 12px;
}

/* --- Event Card --- */
.event-card {
  transition: all 0.2s ease;
}
.event-card:hover {
  transform: translateX(4px);
}
.event-card .event-card-marker {
  transition: background-color 0.2s;
}
.event-card:hover .event-card-marker {
  background-color: #E0301E;
}

/* --- Venue Card --- */
.venue-card { transition: all 0.3s ease; }
.venue-card:hover { transform: translateY(-4px); }

/* --- Artist Card --- */
.artist-card { transition: all 0.3s ease; }
.artist-card:hover { transform: rotate(-1deg) scale(1.02); }

/* --- Selection --- */
::selection { background: #E0301E; color: white; }

/* --- Scrollbar --- */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #F5F5F4; }
::-webkit-scrollbar-thumb { background: #A8A29E; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #78716C; }

/* --- Button active --- */
button:active { transform: scale(0.98); }

/* --- Scroll reveal --- */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* --- Genre colors ---
   Darker, muted "poster" family: white text passes WCAG AA (>=4.5:1) on every
   badge, and the hues join the red+ink editorial discipline instead of the raw
   Tailwind rainbow. Rock is rose (#BE123C), kept distinct from the brand action
   red (#E0301E/#E0301E) so a red chip is never ambiguous with selected/primary. */
.genre-rock { background: #BE123C; }
.genre-jazz { background: #6D28D9; }
.genre-electronic { background: #0E7490; }
.genre-acoustic { background: #A16207; }
.genre-folk { background: #047857; }
.genre-blues { background: #1D4ED8; }
.genre-hiphop { background: #C2410C; }

.dot-rock { background: #BE123C; }
.dot-jazz { background: #6D28D9; }
.dot-electronic { background: #0E7490; }
.dot-acoustic { background: #A16207; }
.dot-folk { background: #047857; }
.dot-blues { background: #1D4ED8; }
.dot-hiphop { background: #C2410C; }

/* --- Mobile menu transitions --- */
#mobileMenu { transition: opacity 0.3s ease; }
#mobileMenu.hidden { opacity: 0; pointer-events: none; }

/* ========================================
   MOTION — tokens, blobs, marquee
   (ported from Bill/motion-design motion.css)
   ======================================== */
:root {
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
}

/* Global reduced-motion kill-switch: a functional, animation-free site. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- Gradient blobs behind the hero (GradientHero, CSS-only) --- */
.hero-blob {
  position: absolute;
  border-radius: 9999px;
  filter: blur(90px);
  opacity: 0.5;
  pointer-events: none;
  will-change: transform;
}
.hero-blob--1 {
  width: 38vw; height: 38vw; top: -6%; left: -4%;
  background: radial-gradient(circle at 30% 30%, #E0301E, transparent 70%);
  animation: blobDrift1 19s ease-in-out infinite alternate;
}
.hero-blob--2 {
  width: 32vw; height: 32vw; bottom: -8%; right: -6%;
  background: radial-gradient(circle at 60% 40%, #F97316, transparent 70%);
  opacity: 0.4;
  animation: blobDrift2 23s ease-in-out infinite alternate;
}
.hero-blob--3 {
  width: 26vw; height: 26vw; top: 40%; left: 55%;
  background: radial-gradient(circle at 50% 50%, #C42818, transparent 70%);
  opacity: 0.35;
  animation: blobDrift3 17s ease-in-out infinite alternate;
}
@keyframes blobDrift1 { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(6%, 8%, 0) scale(1.12); } }
@keyframes blobDrift2 { from { transform: translate3d(0,0,0) scale(1.05); } to { transform: translate3d(-7%, -5%, 0) scale(1); } }
@keyframes blobDrift3 { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(-5%, 6%, 0) scale(1.1); } }
@media (max-width: 768px) { .hero-blob { filter: blur(60px); } }

/* --- Marquee strip (CSS-only, hover-pause) --- */
.marquee { overflow: hidden; white-space: nowrap; }
.marquee-track {
  display: inline-flex;
  align-items: center;
  will-change: transform;
  animation: marquee 32s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-item { display: inline-flex; align-items: center; }
@keyframes marquee { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }

/* Parallax layers should not paint outside their box */
[data-parallax] { will-change: transform; }

/* ========================================
   ANALOG / ZINE SYSTEM  (Lost & Found brand)
   Edition spot colour is a CSS var so the monthly rotation is one swap.
   ======================================== */
:root {
  --paper: #F2ECDD;
  --paper-light: #FBF8EF;
  --ink: #17150F;
  --edition: #E0301E;      /* Edition 01 spot colour — rotate monthly */
  --edition-deep: #C42818;
}

/* --- Film-grain overlay (fixed, site-wide, cheap, non-interactive) --- */
.grain { position: relative; }
.grain::after {
  content: "";
  position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  opacity: 0.05; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion: reduce) { .grain::after { opacity: 0.035; } }

/* --- Honeycomb texture (community / chain metaphor) --- */
.honeycomb {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none' stroke='%23E0301E' stroke-width='2' stroke-opacity='0.5'%3E%3Cpath d='M28 0 L56 16 L56 50 L28 66 L0 50 L0 16 Z'/%3E%3Cpath d='M28 66 L56 82 L56 116 M28 66 L0 82 L0 116'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 56px 100px;
}
.honeycomb-ink {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cg fill='none' stroke='%23F2ECDD' stroke-width='2' stroke-opacity='0.10'%3E%3Cpath d='M28 0 L56 16 L56 50 L28 66 L0 50 L0 16 Z'/%3E%3Cpath d='M28 66 L56 82 L56 116 M28 66 L0 82 L0 116'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 56px 100px;
}

/* --- Rubber stamp badge: rotated, distressed edge, ink-bleed --- */
.stamp {
  display: inline-flex; align-items: center; gap: 0.4em;
  font-family: 'Courier Prime', monospace; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--edition);
  border: 2.5px solid var(--edition);
  padding: 0.3em 0.7em;
  transform: rotate(-3deg);
  opacity: 0.92;
  /* roughen the ink so it reads stamped, not printed */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.06' numOctaves='2'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -9 1.1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23r)'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.06' numOctaves='2'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -9 1.1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23r)'/%3E%3C/svg%3E");
}
.stamp--ink { color: var(--paper); border-color: var(--paper); }
.stamp--filled { background: var(--edition); color: var(--paper); border-color: var(--edition); }

/* --- Halftone / social-realism photo treatment --- */
.halftone { position: relative; filter: grayscale(1) contrast(1.15) brightness(1.02); }
.halftone::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  mix-blend-mode: multiply; opacity: 0.45;
  background-image: radial-gradient(var(--ink) 38%, transparent 39%);
  background-size: 4px 4px;
}
/* Full colour now, with a whisper of warm + edition-red so it still ties to the
   palette (was grayscale(1) + a heavy red duotone that flattened the photos). */
.halftone--duo { filter: saturate(1.06) contrast(1.04) sepia(0.06); }
.halftone--duo::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  mix-blend-mode: screen; background: var(--edition); opacity: 0.07;
}

/* --- Thick zine rules --- */
.rule-thick { border: 0; border-top: 4px solid var(--ink); }
.rule-edition { border: 0; border-top: 4px solid var(--edition); }

/* --- Edition badge --- */
.edition-badge {
  font-family: 'Bebas Neue', sans-serif; letter-spacing: 0.06em;
  line-height: 0.9; color: var(--edition);
}

/* --- RGB / photocopy shift on display headings (hover, present/future vibe) --- */
.rgb-shift { position: relative; }
.rgb-shift:hover { text-shadow: 2px 0 var(--edition), -2px 0 #1d4ed8; }

/* --- Rubber-stamp "thunk" on key actions (signup / redeem) --- */
@keyframes stamp-thunk {
  0% { transform: scale(2.4) rotate(-9deg); opacity: 0; }
  55% { transform: scale(0.86) rotate(-3deg); opacity: 1; }
  72% { transform: scale(1.04) rotate(-3deg); }
  100% { transform: scale(1) rotate(-3deg); opacity: 0.92; }
}
.stamp-thunk { animation: stamp-thunk 0.45s var(--ease-out-quart) both; }

/* Bebas Neue is a single weight — neutralise font-black so it doesn't fake-bold */
.font-display { font-weight: 400 !important; }

/* --- Site-wide photographic texture (Minh's photos, faint, behind content) ---
   A section gets paper/ink as usual, then a low-opacity grayscale photo ghosts
   over it. background-attachment:fixed makes the photo continuous across sections
   as you scroll. Set the image per section with style="--bgimg:url('…')". */
.bg-photo { position: relative; isolation: isolate; }
.bg-photo::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: var(--bgimg, url("/assets/photos/minh-04.jpg"));
  background-size: cover; background-position: center; background-attachment: fixed;
  /* Real photo colour — NO filter, NO blend. Opacity is the only dial, set high so
     Hoi An's colours read as the actual photo; legibility is handled by the solid
     cards + a text-shadow on the section headings, not by veiling the photo. */
  opacity: 0.78;
}
/* dark sections: a touch less so white headings keep contrast (no "screen" blend —
   that washed the photo into grey haze). */
.bg-photo--ink::before { opacity: 0.66; }
/* Keep headings legible where they cross a bright/busy part of the photo, without
   muting the photo itself (the "filter only behind text" the brief asks for). */
.bg-photo h2 { text-shadow: 0 1px 14px rgba(242, 236, 221, 0.55); }
.bg-photo--ink h2 { text-shadow: 0 2px 16px rgba(23, 21, 15, 0.7); }
@media (max-width: 768px) {
  .bg-photo::before { background-attachment: scroll; } /* iOS ignores fixed; avoid jump */
}