@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400..900&family=EB+Garamond:ital,wght@0,400..800;1,400..800&display=swap');

:root {
  --viz-width: 100%;   /* default (mobile). Overridden per breakpoint below */

  --px-per-second: 10;
  --layers-per-side: 10;

  /* Per-layer geometry — widths ≤ 50% so each layer stays within its half of the timeline.
     --viz-width then scales the entire viz proportionally without overflow.
     Layer 1 = widest (nearest axis), layer 10 = narrowest (outermost). */
  --layer-1-width: 50%;    --layer-1-offset: 0px;   --layer-1-z: 1;   --layer-1-persp: 1deg;    --layer-1-alpha: 1.0;
  --layer-2-width: 46%;    --layer-2-offset: 0px;   --layer-2-z: 2;   --layer-2-persp: 1deg;  --layer-2-alpha: 0.95;
  --layer-3-width: 42%;    --layer-3-offset: 0px;   --layer-3-z: 3;   --layer-3-persp: 1deg;  --layer-3-alpha: 0.90;
  --layer-4-width: 38%;    --layer-4-offset: 0px;   --layer-4-z: 4;   --layer-4-persp: 1deg;  --layer-4-alpha: 0.85;
  --layer-5-width: 36%;    --layer-5-offset: 0px;   --layer-5-z: 5;   --layer-5-persp: 1deg;  --layer-5-alpha: 0.80;
  --layer-6-width: 32%;    --layer-6-offset: 0px;   --layer-6-z: 6;   --layer-6-persp: 1deg;    --layer-6-alpha: 0.75;
  --layer-7-width: 28%;    --layer-7-offset: 0px;   --layer-7-z: 7;   --layer-7-persp: 1deg;  --layer-7-alpha: 0.70;
  --layer-8-width: 24%;    --layer-8-offset: 0px;   --layer-8-z: 8;   --layer-8-persp: 1deg;  --layer-8-alpha: 0.65;
  --layer-9-width: 20%;     --layer-9-offset: 0px;   --layer-9-z: 9;   --layer-9-persp: 1deg;  --layer-9-alpha: 0.60;
  --layer-10-width: 16%;    --layer-10-offset: 0px;  --layer-10-z: 10; --layer-10-persp: 1deg; --layer-10-alpha: 0.55;

  --perspective-distance: 800px;

  /* Playhead */
  --playhead-row-height: 80px;
  --playhead-highlight-height: 80px;
  --playhead-glow-intensity: 0.6;
  --playhead-line-color: rgba(255,255,255,0.7);
  --playhead-line-thickness: 1px;

  /* Transitions */
  --metadata-fade-duration: 400ms;
  --text-fade-duration: 500ms;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: #0a0a0f;
  color: white;
  font-family: 'Inter', system-ui, sans-serif;
  overflow-x: hidden;
}

/* ── Timeline container ─────────────────────────────────────────────── */

#timeline {
  position: relative;
  width: var(--viz-width);
  max-width: 100%;
  margin: 0 auto;
}

/* Central axis line */
#timeline::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 1px;
  background: rgba(255,255,255,0.06);
  pointer-events: none;
  z-index: 0;
}

/* ── Timeline content (offset by 50vh so beat-0 aligns with playhead) ── */

#timeline-content {
  position: absolute;
  top: 50vh;
  left: 0;
  right: 0;
}

/* ── Clip layers ─────────────────────────────────────────────────────── */

.clip-layer {
  position: absolute;
  top: 0;
  overflow: visible;
}

/* Generate layer positioning for left and right, layers 1-10 */
.clip-layer.right.l1  { left: calc(50% + var(--layer-1-offset));  width: var(--layer-1-width);  z-index: var(--layer-1-z);  transform: perspective(var(--perspective-distance)) rotateY(calc(-1 * var(--layer-1-persp))); }
.clip-layer.right.l2  { left: calc(50% + var(--layer-2-offset));  width: var(--layer-2-width);  z-index: var(--layer-2-z);  transform: perspective(var(--perspective-distance)) rotateY(calc(-1 * var(--layer-2-persp))); }
.clip-layer.right.l3  { left: calc(50% + var(--layer-3-offset));  width: var(--layer-3-width);  z-index: var(--layer-3-z);  transform: perspective(var(--perspective-distance)) rotateY(calc(-1 * var(--layer-3-persp))); }
.clip-layer.right.l4  { left: calc(50% + var(--layer-4-offset));  width: var(--layer-4-width);  z-index: var(--layer-4-z);  transform: perspective(var(--perspective-distance)) rotateY(calc(-1 * var(--layer-4-persp))); }
.clip-layer.right.l5  { left: calc(50% + var(--layer-5-offset));  width: var(--layer-5-width);  z-index: var(--layer-5-z);  transform: perspective(var(--perspective-distance)) rotateY(calc(-1 * var(--layer-5-persp))); }
.clip-layer.right.l6  { left: calc(50% + var(--layer-6-offset));  width: var(--layer-6-width);  z-index: var(--layer-6-z);  transform: perspective(var(--perspective-distance)) rotateY(calc(-1 * var(--layer-6-persp))); }
.clip-layer.right.l7  { left: calc(50% + var(--layer-7-offset));  width: var(--layer-7-width);  z-index: var(--layer-7-z);  transform: perspective(var(--perspective-distance)) rotateY(calc(-1 * var(--layer-7-persp))); }
.clip-layer.right.l8  { left: calc(50% + var(--layer-8-offset));  width: var(--layer-8-width);  z-index: var(--layer-8-z);  transform: perspective(var(--perspective-distance)) rotateY(calc(-1 * var(--layer-8-persp))); }
.clip-layer.right.l9  { left: calc(50% + var(--layer-9-offset));  width: var(--layer-9-width);  z-index: var(--layer-9-z);  transform: perspective(var(--perspective-distance)) rotateY(calc(-1 * var(--layer-9-persp))); }
.clip-layer.right.l10 { left: calc(50% + var(--layer-10-offset)); width: var(--layer-10-width); z-index: var(--layer-10-z); transform: perspective(var(--perspective-distance)) rotateY(calc(-1 * var(--layer-10-persp))); }

.clip-layer.left.l1  { right: calc(50% + var(--layer-1-offset));  width: var(--layer-1-width);  z-index: var(--layer-1-z);  transform: perspective(var(--perspective-distance)) rotateY(var(--layer-1-persp)); }
.clip-layer.left.l2  { right: calc(50% + var(--layer-2-offset));  width: var(--layer-2-width);  z-index: var(--layer-2-z);  transform: perspective(var(--perspective-distance)) rotateY(var(--layer-2-persp)); }
.clip-layer.left.l3  { right: calc(50% + var(--layer-3-offset));  width: var(--layer-3-width);  z-index: var(--layer-3-z);  transform: perspective(var(--perspective-distance)) rotateY(var(--layer-3-persp)); }
.clip-layer.left.l4  { right: calc(50% + var(--layer-4-offset));  width: var(--layer-4-width);  z-index: var(--layer-4-z);  transform: perspective(var(--perspective-distance)) rotateY(var(--layer-4-persp)); }
.clip-layer.left.l5  { right: calc(50% + var(--layer-5-offset));  width: var(--layer-5-width);  z-index: var(--layer-5-z);  transform: perspective(var(--perspective-distance)) rotateY(var(--layer-5-persp)); }
.clip-layer.left.l6  { right: calc(50% + var(--layer-6-offset));  width: var(--layer-6-width);  z-index: var(--layer-6-z);  transform: perspective(var(--perspective-distance)) rotateY(var(--layer-6-persp)); }
.clip-layer.left.l7  { right: calc(50% + var(--layer-7-offset));  width: var(--layer-7-width);  z-index: var(--layer-7-z);  transform: perspective(var(--perspective-distance)) rotateY(var(--layer-7-persp)); }
.clip-layer.left.l8  { right: calc(50% + var(--layer-8-offset));  width: var(--layer-8-width);  z-index: var(--layer-8-z);  transform: perspective(var(--perspective-distance)) rotateY(var(--layer-8-persp)); }
.clip-layer.left.l9  { right: calc(50% + var(--layer-9-offset));  width: var(--layer-9-width);  z-index: var(--layer-9-z);  transform: perspective(var(--perspective-distance)) rotateY(var(--layer-9-persp)); }
.clip-layer.left.l10 { right: calc(50% + var(--layer-10-offset)); width: var(--layer-10-width); z-index: var(--layer-10-z); transform: perspective(var(--perspective-distance)) rotateY(var(--layer-10-persp)); }

/* Per-layer alpha (applies to both left and right) */
.clip-layer.l1  { opacity: var(--layer-1-alpha);  }
.clip-layer.l2  { opacity: var(--layer-2-alpha);  }
.clip-layer.l3  { opacity: var(--layer-3-alpha);  }
.clip-layer.l4  { opacity: var(--layer-4-alpha);  }
.clip-layer.l5  { opacity: var(--layer-5-alpha);  }
.clip-layer.l6  { opacity: var(--layer-6-alpha);  }
.clip-layer.l7  { opacity: var(--layer-7-alpha);  }
.clip-layer.l8  { opacity: var(--layer-8-alpha);  }
.clip-layer.l9  { opacity: var(--layer-9-alpha);  }
.clip-layer.l10 { opacity: var(--layer-10-alpha); }

/* Overflow layers (> 10) go to outermost edge */
.clip-layer.right.overflow { left: calc(50% + 90px); width: 20%; z-index: 11; }
.clip-layer.left.overflow  { right: calc(50% + 90px); width: 20%; z-index: 11; }

/* ── Clip containers ─────────────────────────────────────────────────── */

.clip-wrap {
  position: absolute;
  left: 0; right: 0;
  overflow: hidden;
  filter: brightness(0.35);
  transition: filter 600ms ease;
}

.clip-wrap.active {
  filter: none;
}

.clip-bg {
  position: absolute;
  inset: 0;
}

.clip-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  mix-blend-mode: screen;
  display: block;
}

/* ── Fixed overlay ───────────────────────────────────────────────────── */

#overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: var(--viz-width);
  max-width: 100%;
  pointer-events: none;
  z-index: 50;
  display: flex;
  flex-direction: column;
}

/* Upper metadata zone (above playhead) */
#meta-upper {
  flex: 1;
  display: flex;
  align-items: flex-end;
  padding: 0 12px 0;
  overflow: hidden;
}

/* Lower metadata zone (below playhead) */
#meta-lower {
  flex: 1;
  display: flex;
  align-items: flex-start;
  padding: 0 12px 0;
  overflow: hidden;
}

.meta-cols {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: inherit;
  gap: 8px;
}

.meta-col-left, .meta-col-right {
  max-width: 42%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.meta-col-left  { align-items: flex-start; text-align: left; }
.meta-col-right { align-items: flex-end;   text-align: right; }

/* ── Metadata rows ───────────────────────────────────────────────────── */

.meta-row {
  display: flex;
  flex-direction: column;
  gap: 1px;
  transition: opacity var(--metadata-fade-duration) ease;
  min-width: 0;
  align-items: flex-start;
}

.meta-row.right { align-items: flex-end; }

.meta-row.fade-out { opacity: 0; }
.meta-row.fade-in  { opacity: 1; }

.title-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.meta-row.right .title-row { justify-content: flex-end; }

.meta-title   { font-size: 0.78rem; font-weight: 600; color: rgba(255,255,255,0.95); line-height: 1.3; }
a.meta-title  { text-decoration: none; cursor: pointer; pointer-events: auto; }
a.meta-title:hover { text-decoration: none; }
.meta-artist  { font-size: 0.68rem; color: rgba(255,255,255,0.65); }
.meta-album   { font-size: 0.65rem; color: rgba(255,255,255,0.45); font-style: italic; }
.meta-info    { font-size: 0.62rem; color: rgba(255,255,255,0.35); padding-top: 0.1rem;}
.meta-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-size: 0.55rem;
  text-decoration: none;
  pointer-events: auto;
  cursor: pointer;
}
.meta-link:hover { opacity: 0.8; }

/* ── Playhead ────────────────────────────────────────────────────────── */

#playhead-row {
  height: var(--playhead-row-height);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  transition: opacity 600ms ease;
}

#playhead-highlight {
  transition: opacity 600ms ease;
}

#playhead-line {
  position: absolute;
  top: 50%;
  left: 0; right: 0;
  height: var(--playhead-line-thickness);
  background: var(--playhead-line-color);
}

#playhead-text {
  position: relative;
  font-size: 0.65rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  text-align: center;
  transition: opacity var(--text-fade-duration);
  max-width: 60%;
  padding-top: 12px;
}

/* Playhead glow band (rendered in the timeline, not overlay) */
#playhead-highlight {
  position: fixed;
  top: 50vh;
  left: 50%;
  width: var(--viz-width);
  max-width: 100%;
  height: var(--playhead-highlight-height);
  background: linear-gradient(to bottom,
    transparent,
    rgba(255,255,255, var(--playhead-glow-intensity)) 40%,
    rgba(255,255,255, var(--playhead-glow-intensity)) 60%,
    transparent
  );
  -webkit-mask-image: linear-gradient(to right, transparent, black 50%, black 70%, transparent);
  mask-image: linear-gradient(to right, transparent, black 50%, black 70%, transparent);
  pointer-events: none;
  mix-blend-mode: overlay;
  z-index: 40;
  transform: translateX(-50%) translateY(-50%);
}

/* ── Scene bands ─────────────────────────────────────────────────────── */

.scene-band {
  position: absolute;
  left: 0; right: 0;
  opacity: 0.0;
  pointer-events: none;
}

/* ── Timeline text labels ────────────────────────────────────────────── */

.tl-text {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  pointer-events: none;
  white-space: normal;
  width: var(--viz-width);
  max-width: 100%;
  padding: 0 2rem;
  z-index: 20;
}

.tl-text.main_title     { font-size: clamp(2.5rem, 8vw, 4rem);   font-weight: 800; letter-spacing: 0.3em; text-transform: uppercase; color: white; }
.tl-text.scene_title    { font-size: clamp(1.5rem, 4vw, 3.5rem); font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: white; }
.tl-text.scene_subtitle { font-size: clamp(0.9rem, 2vw, 1.6rem); font-weight: 300; letter-spacing: 0.1em; color: rgba(255,255,255,0.8); }
.tl-text.caption        { font-size: clamp(0.8rem, 1.5vw, 1.1rem); color: rgba(255,255,255,0.9); }
.tl-text.caption_italic { font-size: clamp(1.05rem, 2.5vw, 1.1rem); font-style: italic; font-weight: 200; color: rgba(255,255,255,0.88); }
.tl-text.caption_small  { font-size: clamp(0.6rem, 1vw, 0.8rem); font-family: monospace; color: rgba(255,255,255,0.6); }
.tl-text.quote          { font-size: clamp(0.85rem, 1.8vw, 1.3rem); font-style: italic; color: rgba(255,255,255,0.9); border-left: 2px solid rgba(255,255,255,0.3); padding-left: 12px; text-align: left; }
.tl-text.paragraph      { font-size: clamp(0.95rem, 1.4vw, 1rem); color: rgba(187, 186, 186, 0.8); font-weight: 200; white-space: pre-line; line-height: 1.8; text-align: center; }

.tl-text.scene_title { 
  font-size: clamp(1.5rem, 3vw, 3rem); 
  font-weight: 300; 
  letter-spacing: 0.2em; 
  /* text-transform: uppercase;  */
  color: white;
  font-family: "Cinzel", serif;
}

/* ── Play button ─────────────────────────────────────────────────────── */

#play-btn {
  border: none;
  outline: none;
  position: fixed;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: rgba(255,255,255,0.25);
  color: white;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  pointer-events: auto;
  z-index: 60;
  transition: background 0.2s;
}

#back-btn {
  border: none;
  outline: none;
  position: relative;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.25);
  color: white;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  pointer-events: auto;
  z-index: 60;
  transition: background 0.2s;
  opacity: 1 !important; /* Safety: Button never fades */
}

#play-btn:hover, #back-btn:hover { background: rgba(255,255,255,0.5); }

#play-btn { top: 1em; right: 1em; }
#play-btn.hidden { display: none; }

/* ── Time counter ────────────────────────────────────────────────────── */

#time-counter {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  font-size: 0.72rem;
  font-family: 'Inter', system-ui, monospace;
  color: rgba(180, 180, 180, 0.7);
  background: rgba(0, 0, 0, 0.55);
  padding: 3px 10px;
  border-radius: 20px;
  letter-spacing: 0.06em;
  pointer-events: none;
  user-select: none;
  transition: opacity 0.6s ease;
}

/* ── Cover modal ─────────────────────────────────────────────────────── */

#cover-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: #000000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  opacity: 1;
  overflow-y: auto;
}

/* Mobile: single column — text → play → image */
#cover-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  width: 100%;
  padding: 2rem 1.5rem;
  cursor: pointer;
  min-height: 100%;
  margin-left: 2.5rem;
  margin-top: 4rem;
}

#cover-img-col {
  width: 100%;
  order: 1;  /* image below text on mobile */
}

#cover-img {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
  user-select: none;
  border-radius: 1rem;
}

#cover-text-col {
  width: 100%;
  order: 0;  /* text above image on mobile */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

/* Override tl-text absolute positioning inside the modal */
#cover-text-col .tl-text {
  position: static;
  transform: none;
  width: 100%;
  max-width: 100%;
  text-align: left;
  padding: 0;
  white-space: pre-line;
  line-height: 1.7;
}

#cover-play-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: rgba(255, 255, 255, 0.7);
  padding-left: 5px;
  flex-shrink: 0;
  transition: background 0.25s ease, color 0.25s ease;
}

#cover-content:hover #cover-play-icon {
  background: rgba(255, 255, 255, 0.45);
  color: white;
}

/* Desktop: two columns — image left, text+play right */
@media (min-width: 1024px) {
  #cover-modal {
    align-items: center;
  }

  #cover-content {
    flex-direction: row;
    align-items: center;
    max-width: 1100px;
    padding: 3rem 2rem;
    gap: 3rem;
  }

  #cover-img-col {
    flex: 1;
    order: 0;  /* image on left */
    max-width: 50%;
  }

  #cover-img {
    max-height: calc(100vh - 6rem);
    width: auto;
    max-width: 100%;
  }

  #cover-text-col {
    flex: 1;
    order: 1;  /* text+button on right */
    max-width: 50%;
    align-items: flex-start;
  }
}

/* ── Responsive width ────────────────────────────────────────────────── */
/* Mobile default: 100% (already set in :root)                           */

/* Tablet portrait: 768px+ */
@media (min-width: 768px) {
  :root { --viz-width: 100%; }
}

/* Tablet landscape / small desktop: 1024px+ */
@media (min-width: 1024px) {
  :root { --viz-width: 90%; }
}

/* Desktop: 1280px+ */
@media (min-width: 1280px) {
  :root { --viz-width: 70%; }
}

/* Large desktop: 1600px+ */
@media (min-width: 1600px) {
  :root { --viz-width: 60%; }
}