/* ============================================================
   Duende Sounds — "Layer line" homepage section
   A full-bleed cinematic band. On desktop it pins while you
   scroll and waveform clips spill out of the starter packs onto
   a timeline, layer by layer. On mobile / reduced-motion it
   shows the finished, stacked state.
   Behaviour: assets/js/layer-timeline.js  ·  markup: front-page.php
   ============================================================ */

.duende-ll { position: relative; }

/* full-bleed dark band */
.duende-ll__band {
  position: relative; width: 100%; overflow: hidden; isolation: isolate;
  background: #0E1116; color: #ECEEF2;
  padding-block: clamp(36px, 5vw, 60px);
}
.duende-ll__bg {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(120% 95% at 16% 6%, rgba(110,150,178,0.50), transparent 55%),
    radial-gradient(125% 125% at 90% 104%, rgba(200,162,96,0.40), transparent 60%),
    linear-gradient(158deg, #223445 0%, #14181F 50%, #2C2417 100%);
}
.duende-ll__bg::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity: 0.06; mix-blend-mode: overlay;
}
.duende-ll__scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(14,17,22,0.30) 0%, rgba(14,17,22,0.58) 70%, rgba(14,17,22,0.74) 100%);
}
.duende-ll__inner {
  position: relative; z-index: 3;
  max-width: 1180px; margin: 0 auto;
  padding-inline: clamp(20px, 5vw, 56px);
}

/* header copy (forced light — the band is always dark) */
.duende-ll__overline {
  font-family: var(--font-display); font-size: 11px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; color: rgba(236,238,242,0.62);
}
.duende-ll__title {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(26px, 3.4vw, 36px); line-height: 1.1; letter-spacing: -0.02em;
  margin: 8px 0 0; max-width: 26ch; color: #ECEEF2; text-wrap: balance;
}
.duende-ll__lead {
  font-family: var(--font-body); font-size: 15px; line-height: 1.6;
  color: rgba(236,238,242,0.66); max-width: 62ch; margin: 12px 0 0;
}

/* stage (built by JS) */
.duende-ll__stage { position: relative; height: 340px; margin: 22px 0 0; }
.duende-ll__hint {
  font-family: var(--font-display); font-size: 12px; letter-spacing: 0.04em;
  color: rgba(236,238,242,0.45); margin: 16px 0 0; transition: opacity 0.35s ease;
  display: inline-flex; align-items: center; gap: 8px;
}

/* rail */
.dll-railcap {
  position: absolute; font-family: var(--font-display); font-size: 11px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: rgba(236,238,242,0.45);
}

/* pack cards (named mini wave-players — no play button) */
.dll-pack { position: absolute; }
.dll-pack__card {
  height: 100%; border-radius: 12px; border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.05); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  padding: 9px 11px; display: flex; flex-direction: column; gap: 8px; justify-content: center;
  transition: border-color 0.3s ease, box-shadow 0.35s ease, transform 0.35s ease;
}
.dll-pack.is-live .dll-pack__card {
  border-color: rgba(110,150,178,0.55); box-shadow: 0 0 28px rgba(110,150,178,0.30);
  transform: translateY(-2px);
}
.dll-pack__name {
  font-family: var(--font-display); font-weight: 500; font-size: 12px; line-height: 1.15;
  color: #ECEEF2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dll-pack__bars { display: flex; align-items: center; gap: 2px; height: 24px; }
.dll-pack__bars .b { flex: 1; min-width: 1px; border-radius: 1px; background: rgba(255,255,255,0.20); }
.dll-pack.is-live .dll-pack__bars .b { background: rgba(110,150,178,0.75); }

/* timeline */
.dll-lanelabel {
  position: absolute; font-family: var(--font-display); font-size: 11px; font-weight: 500;
  color: rgba(236,238,242,0.40); white-space: nowrap;
}
.dll-laneline { position: absolute; height: 1px; background: rgba(255,255,255,0.06); }
.dll-tick { position: absolute; width: 1px; background: rgba(255,255,255,0.08); }

.dll-clip {
  position: absolute; border-radius: 8px; background: rgba(20,25,32,0.72);
  border: 1px solid rgba(255,255,255,0.09); box-shadow: 0 12px 30px rgba(0,0,0,0.45);
  overflow: hidden; display: flex; align-items: center; padding: 0 7px;
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  will-change: transform, left, top;
}
.dll-bars { display: flex; align-items: center; gap: 2px; width: 100%; height: 62%; }
.dll-bar { flex: 1; min-width: 1px; border-radius: 1px; background: rgba(255,255,255,0.18); }
.dll-bar.on { background: var(--accent); }
.dll-bar.head { background: #E6C690; }
.dll-tag {
  position: absolute; left: 7px; top: 4px; font-size: 9px; letter-spacing: 0.04em;
  color: rgba(236,238,242,0.5); pointer-events: none;
}

.dll-playhead { position: absolute; width: 1px; background: rgba(230,198,144,0.7); opacity: 0; transition: opacity 0.2s ease; }
.dll-playhead::before {
  content: ""; position: absolute; left: -3px; top: -4px; width: 7px; height: 7px;
  border-radius: 50%; background: #E6C690; box-shadow: 0 0 10px rgba(230,198,144,0.8);
}
.dll-endcap {
  position: absolute; font-family: var(--font-display); font-size: 12px; font-weight: 500;
  color: #E6C690; opacity: 0; transition: opacity 0.4s ease; white-space: nowrap;
}

/* ---- desktop: pin the band and drive the build with scroll ---- */
@media (min-width: 769px) and (prefers-reduced-motion: no-preference) {
  .duende-ll { height: 240vh; }
  .duende-ll__pin {
    position: -webkit-sticky; position: sticky; top: 0;
    height: 100vh; overflow: hidden;
  }
  .duende-ll__band { min-height: 100vh; display: flex; align-items: center; }
  .duende-ll__inner { width: 100%; }
}

/* ---- mobile / reduced-motion: normal flow, finished state ---- */
@media (max-width: 768px), (prefers-reduced-motion: reduce) {
  .duende-ll { height: auto; }
  .duende-ll__pin { position: static; height: auto; display: block; }
}