/* DIAGE FESTIVAL — bold editorial / brutalist base */
:root {
  /* Typography system — swappable via Tweaks */
  --font-display: "Space Grotesk", "Noto Sans Thai", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", "Noto Sans Thai", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Geist", "Noto Sans Thai", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Colors — stark B&W + single radioactive accent */
  --bg: #0a0a0a;
  --bg-2: #111111;
  --fg: #f4f2ec;
  --fg-2: #a8a69f;
  --line: rgba(244, 242, 236, 0.14);
  --line-strong: rgba(244, 242, 236, 0.32);
  --accent: #ff2020;    /* signal red */
  --accent-2: #ff6a2a;  /* ember orange */
  --accent-3: #4e5bff;  /* electric blue */
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--bg); color: var(--fg); font-family: var(--font-body); -webkit-font-smoothing: antialiased; font-smooth: always; }
body { min-height: 100vh; overflow-x: hidden; }

/* Film grain — fixed full-screen layer over everything.
   Five independent noise fields swapped on a step timer, so the grain boils
   instead of sliding. Blend is `normal`, not `overlay`: on a near-black page
   overlay cancels itself out and the grain never shows. */
body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 1100;
  opacity: 0.11;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' seed='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-repeat: repeat;
  animation: grain 0.45s steps(1) infinite;
  will-change: background-image;
}

@keyframes grain {
  0%  { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' seed='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>") }
  20%  { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' seed='17'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>") }
  40%  { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' seed='41'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>") }
  60%  { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' seed='63'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>") }
  80%  { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' seed='88'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>") }
  100% { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' seed='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>") }
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, select, textarea { font-family: inherit; color: inherit; }

/* Utility */
.mono { font-family: var(--font-mono); font-feature-settings: "ss01", "cv11"; letter-spacing: 0.02em; }
.display { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.03em; line-height: 0.88; }
.tick { color: var(--accent); }
.container { max-width: 1440px; margin: 0 auto; padding: 0 40px; }
.hr { height: 1px; background: var(--line); width: 100%; }
.hr-strong { height: 1px; background: var(--line-strong); width: 100%; }

/* Marquee */
.marquee { overflow: hidden; white-space: nowrap; border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); background: rgba(10,10,10,0.45); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.marquee-track { display: inline-flex; animation: scroll 76s linear infinite; gap: 24px; padding: 8px 0; }
@keyframes scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* Blinking cursor */
.blink::after { content: "▌"; animation: blink 1.1s steps(2, start) infinite; margin-left: 0.1em; }
@keyframes blink { to { visibility: hidden; } }

/* Section label */
.section-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-2); display: flex; align-items: center; gap: 10px; }
.section-label::before { content: ""; display: inline-block; width: 10px; height: 10px; background: var(--accent); border-radius: 50%; }

/* Credits lockup — inlined SVG. `height` fit keeps it sized by height (footer),
   `width` fit stretches it to the container (Hero, matching the countdown). */
.credits-lockup svg { display: block; max-width: 100%; }
.credits-lockup[data-fit="height"] svg { height: 100%; width: auto; }
.credits-lockup[data-fit="width"]  svg { width: 100%; height: auto; }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line-strong); }
::-webkit-scrollbar-thumb:hover { background: var(--fg-2); }

/* Selection */
::selection { background: var(--accent); color: #000; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  /* grain stays, it just stops boiling */
  body::before { animation: none !important; }
}

/* ---------- Responsive / mobile ---------- */
@media (max-width: 768px) {
  .container { padding: 0 20px; }
  .display { line-height: 0.92; }
  /* Marquee shrinks on mobile */
  .marquee-track { gap: 16px; padding: 6px 0; }
  .marquee-track .display { font-size: 26px !important; }
  .marquee-track img { height: 26px !important; }

  /* Tighter section rhythm on mobile (leave Hero #top alone) */
  section:not(#top) { padding-top: 60px !important; padding-bottom: 60px !important; }

  /* Stacked header meta reads left-aligned (was right on desktop) */
  .m-stack > .mono, .m-stack-tight > .mono { text-align: left !important; }

  /* Layout helpers — override inline grids on mobile.
     minmax(0,1fr) lets tracks shrink below content min-width (prevents overflow). */
  .m-stack { grid-template-columns: minmax(0, 1fr) !important; gap: 22px !important; }
  .m-stack-tight { grid-template-columns: minmax(0, 1fr) !important; gap: 14px !important; }
  .m-1col { grid-template-columns: minmax(0, 1fr) !important; }
  .m-2col { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; }
  .m-hide { display: none !important; }
  .m-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
@media (max-width: 480px) {
  .container { padding: 0 16px; }
  .marquee-track .display { font-size: 22px !important; }
  .marquee-track img { height: 22px !important; }
}

/* DIAGE "A" cursor — traced from the logo. Light mark by default, red over anything
   clickable; text fields keep the I-beam. Hotspot sits on the apex of the A. */
html, body { cursor: url("assets/cursor-diage.svg?v=77") 10 3, auto; }
a, button, [role="button"], label, select, summary,
input[type="checkbox"], input[type="radio"], input[type="submit"], input[type="button"] {
  cursor: url("assets/cursor-diage-hover.svg?v=77") 10 3, pointer;
}
input:not([type]), input[type="text"], input[type="email"], input[type="search"], textarea { cursor: text; }

/* Buy Tickets (nav) — slow breathing glow so the button keeps catching the eye.
   Static glow for reduced motion. */
.buy-pulse {
  transition: background 0.2s ease;
  animation: buy-glow 2.8s ease-in-out infinite;
}
.buy-pulse:hover { background: var(--fg) !important; }

@keyframes buy-glow {
  0%, 100% { box-shadow: 0 0 6px 0 rgba(255, 32, 32, 0.2), 0 0 0 0 rgba(255, 32, 32, 0); filter: brightness(1); }
  50%      { box-shadow: 0 0 14px 2px rgba(255, 32, 32, 0.55), 0 0 34px 6px rgba(255, 32, 32, 0.35); filter: brightness(1.12); }
}
@media (prefers-reduced-motion: reduce) {
  .buy-pulse { animation: none; }
  .buy-pulse { box-shadow: 0 0 18px rgba(255, 32, 32, 0.45); }
}

/* Hero tagline caret */
.hero-caret { margin-left: 0.15em; animation: blink 1.1s steps(2, start) infinite; }
@media (prefers-reduced-motion: reduce) { .hero-caret { animation: none; } }

/* Nav sold bar — a light sweep runs across the filled part */
.sold-fill { overflow: hidden; }
.sold-fill::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -40%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.7), transparent); animation: sold-run 1.8s linear infinite; }
@keyframes sold-run { to { left: 100%; } }
@media (prefers-reduced-motion: reduce) { .sold-fill::after { animation: none; display: none; } }

/* Remix player — vinyl disc spins while playing, title scrolls when it is too long */
.mp-disc {
  display: block; border-radius: 50%;
  background:
    radial-gradient(circle, #0a0a0a 0 7%, var(--accent) 8% 30%, #111 31% 34%, transparent 35%),
    repeating-radial-gradient(circle, #1a1a1a 0 1px, #080808 1px 3px);
  box-shadow: 0 0 0 1px rgba(244,242,236,0.18);
}
.mp-playing .mp-disc:not(.mp-disc--static) { animation: mp-spin 2.4s linear infinite; }
@keyframes mp-spin { to { transform: rotate(360deg); } }
.mp-playing .mp-marquee > span { display: inline-block; padding-left: 100%; animation: mp-scroll 11s linear infinite; }
@keyframes mp-scroll { to { transform: translateX(-100%); } }
.mp:not(.mp-playing) .mp-marquee > span { display: block; overflow: hidden; text-overflow: ellipsis; }
@media (prefers-reduced-motion: reduce) {
  .mp-playing .mp-disc, .mp-playing .mp-marquee > span { animation: none; padding-left: 0; }
}

/* Player map — lit districts breathe, and flicker while music plays */
.mp .mp-lit { animation: mp-breathe 3s ease-in-out infinite; }
.mp-playing .mp-lit { animation: mp-flick 0.9s steps(1, end) infinite; }
@keyframes mp-breathe { 0%, 100% { fill-opacity: 0.55; } 50% { fill-opacity: 0.95; } }
@keyframes mp-flick { 0% { fill-opacity: 1; } 30% { fill-opacity: 0.45; } 55% { fill-opacity: 0.9; } 80% { fill-opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) { .mp .mp-lit, .mp-playing .mp-lit { animation: none; } }

/* equaliser drives the map itself */
.mp .mp-eq .mp-lit { animation: none; }
.mp .mp-eq path { transition: fill 0.06s linear, stroke 0.06s linear; }

/* Letter trace — a thin comet slowly circles the playing artist's initial */
.mp-trace path { fill: none; stroke-linejoin: round; stroke-linecap: round; pointer-events: none; }
.mp-trace-base { stroke: rgba(255, 220, 210, 0.22); stroke-width: 0.6; }
.mp-trace-tail { filter: drop-shadow(0 0 1.5px rgba(255, 32, 32, 0.9)); }
.mp-trace-tail path { stroke: #fff1ea; stroke-width: 1; animation-name: mp-trace-run; animation-timing-function: linear; animation-iteration-count: infinite; }
@keyframes mp-trace-run { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -100; } }
@media (prefers-reduced-motion: reduce) { .mp-trace-tail { display: none; } .mp-trace-base { stroke: rgba(255, 240, 234, 0.6); } }

/* artist photo cross-fades when the track changes */
.mp-art { animation: mp-art-in 0.35s ease both; }
@keyframes mp-art-in { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .mp-art { animation: none; } }

/* Artist bio pop-up */
.am-backdrop { animation: am-fade 0.2s ease both; }
.am-panel { animation: am-rise 0.3s cubic-bezier(.2,.8,.2,1) both; }
@keyframes am-fade { from { opacity: 0; } }
@keyframes am-rise { from { opacity: 0; transform: translateY(18px) scale(0.98); } }
@media (max-width: 768px) {
  .am-panel { display: block !important; overflow-y: auto !important; }
  .am-col { display: block !important; }
  .am-foot { position: sticky; bottom: 0; z-index: 1; }
  .am-photo { height: auto !important; width: 100%; aspect-ratio: 4 / 5; }
  .am-body { overflow: visible !important; }
}
@media (prefers-reduced-motion: reduce) { .am-backdrop, .am-panel { animation: none; } }

/* Archive albums */
.arc-tile img { transition: transform 0.5s ease, filter 0.3s ease; filter: saturate(0.9); }
.arc-tile:hover img { transform: scale(1.05); filter: saturate(1.1); }
@media (max-width: 768px) { .arc-nav { display: none !important; } .arc-img { left: 8px !important; right: 8px !important; width: calc(100% - 16px) !important; } }

/* player: window-style corner grips */
.mp-grip { position: absolute; width: 14px; height: 14px; z-index: 3; touch-action: none; }
.mp-grip::before { content: ""; position: absolute; inset: 2px; border: 0 solid rgba(244,242,236,0.35); transition: border-color 0.2s ease; }
.mp-grip:hover::before { border-color: var(--accent); }
.mp-grip--nw { top: 0; left: 0; cursor: nwse-resize; }
.mp-grip--nw::before { border-top-width: 2px; border-left-width: 2px; }
.mp-grip--ne { top: 0; right: 0; cursor: nesw-resize; }
.mp-grip--ne::before { border-top-width: 2px; border-right-width: 2px; }
.mp-grip--sw { bottom: 0; left: 0; cursor: nesw-resize; }
.mp-grip--sw::before { border-bottom-width: 2px; border-left-width: 2px; }
.mp-grip--se { bottom: 0; right: 0; cursor: nwse-resize; }
.mp-grip--se::before { border-bottom-width: 2px; border-right-width: 2px; }

/* mobile section rail */
.srail { position: fixed; left: 0; top: 50%; transform: translateY(-50%); z-index: 45; display: flex; flex-direction: column; padding: 6px 0; }
.srail-item { position: relative; display: flex; align-items: center; width: 26px; height: 26px; padding: 0 0 0 5px; background: none; }
.srail-tick { display: block; width: 8px; height: 2px; background: rgba(244,242,236,0.45); box-shadow: 0 0 0 1px rgba(0,0,0,0.35); transition: width 0.25s ease, background 0.25s ease; }
.srail-item.is-on .srail-tick { width: 16px; background: var(--accent); }
.srail-label { position: absolute; left: 26px; top: 50%; transform: translate(-6px, -50%); opacity: 0; pointer-events: none; white-space: nowrap;
  font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg); background: rgba(8,8,8,0.88); border: 1px solid var(--line-strong); padding: 3px 6px;
  transition: opacity 0.25s ease, transform 0.25s ease; }
.srail-label.is-shown { opacity: 1; transform: translate(0, -50%); }
@media (prefers-reduced-motion: reduce) { .srail-tick, .srail-label { transition: none; } }

/* artist pop-up: official links */
.am-links { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.am-links a { display: inline-block; padding: 6px 10px; border: 1px solid var(--line-strong); color: var(--fg); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease; }
.am-links a:hover, .am-links a:focus-visible { border-color: var(--accent); color: var(--accent); background: rgba(255,32,32,0.08); }

/* nav: _DIAGER card (name game) */
.nav-card { border: 1px solid var(--line-strong); color: var(--fg); transition: border-color 0.2s ease, background 0.2s ease; }
.nav-card:hover, .nav-card:focus-visible { border-color: var(--accent); background: rgba(255,32,32,0.1); }