/* EL STUDIO — films.css : one row of worn VHS spines, the selected tape pulled out face-on
   Everything is sized from ONE unit, --sh (the sleeve height). It comes from the room that is left:
   --top (how far the carousel starts below the section top, measured by films.js) and the content width
   (container units of .films), so proportions hold from 360px phones to 2560px screens.               */

.films {
  --accent: var(--red);
  --pb: clamp(24px, 4vh, 44px);                                  /* section bottom padding */
  --btnh: 44px;                                                  /* .btn height from base.css */
  --cw: min(var(--maxw), 100cqw);                                /* content width */
  /* height left for the carousel; anchor jumps park the section top under the header (scroll-padding-top = osd + 8px) */
  --avail: calc(100svh - var(--osd-h) - 8px - var(--top, 320px) - var(--pb));
  /* shelf: sleeve + caption must fit the height; sleeve + 8 spines a side + arrows must fit the width */
  --sh: clamp(220px, min((var(--avail) - var(--btnh) - 10px) / 1.27, var(--cw) / 2.75), 1000px);
  --ph: calc(var(--sh) * .8);                                    /* spine height */
  --pw: calc(var(--ph) * .118);                                  /* spine width (real VHS ratio) */
  --nav: clamp(40px, calc(var(--sh) * .1), 76px);                /* arrow button */
  --navgap: calc(var(--sh) * .05);
  container-type: inline-size;
  min-height: 100svh;
  padding-top: clamp(20px, 5vh, 48px);                           /* the header is already cleared by the scroll offset */
  padding-bottom: var(--pb);
  background: var(--ink);
  overflow-x: clip;
}
@media (min-width: 1800px) { .films { --btnh: 50px; } }
@media (min-width: 2300px) { .films { --btnh: 58px; } }
.films .sec-head { margin-bottom: clamp(20px, 4vh, 44px); }
.films .tabs .tab-s { display: none; }

.tapes {
  display: grid; grid-template-areas: "stage" "info";
  max-width: var(--maxw); margin: 0 auto;
}

/* ---------- the row (shelf: spines part around the sleeve; JS hides the ones that would not fit) ---------- */
.tapes__row {
  grid-area: stage; position: relative; z-index: 0; align-self: end;
  height: var(--sh); margin: 0 calc(var(--nav) + var(--navgap));
}
.spine {
  --x: 0px;
  position: absolute; left: 50%; bottom: 0;
  display: block; width: var(--pw); height: var(--ph); margin-left: calc(var(--pw) / -2);
  padding: 0; border: 0; border-radius: 2px; cursor: pointer;
  color: #e6dccd;
  background:
    linear-gradient(90deg, rgba(255,255,255,.13) 0, rgba(255,255,255,.04) 9%, transparent 22%, transparent 72%, rgba(0,0,0,.42) 100%),
    linear-gradient(180deg, rgba(255,255,255,.05), transparent 30%, rgba(0,0,0,.18)),
    color-mix(in srgb, var(--c) 13%, #141111);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.05),
    inset 0 1px 0 rgba(255,255,255,.14),
    1px 0 0 rgba(0,0,0,.6),
    0 calc(var(--pw) * .35) calc(var(--pw) * .55) calc(var(--pw) * -.25) rgba(0,0,0,.8);
  transform: translateX(var(--x));
}
.spine[hidden] { display: none; }
/* transitions only once someone has used the shelf (first paint lands in place, no slide-in from the centre) */
.tapes.is-live .spine { transition: transform .55s cubic-bezier(.2,.75,.25,1), opacity .3s, visibility .3s, filter .2s; }
.spine::before, .spine::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }
/* paper grain + scuffs */
.spine::before {
  background:
    radial-gradient(60% 3% at 30% 18%, rgba(255,255,255,.08), transparent 70%),
    radial-gradient(40% 2% at 70% 64%, rgba(255,255,255,.07), transparent 70%),
    radial-gradient(120% 4% at 50% 0, rgba(255,255,255,.12), transparent 80%),
    radial-gradient(120% 4% at 50% 100%, rgba(0,0,0,.4), transparent 80%),
    url("../assets/ui/films/noise.svg");
  background-size: auto, auto, auto, auto, 180px;
  opacity: .5; mix-blend-mode: overlay;
}
/* plastic case sheen */
.spine::after { background: linear-gradient(90deg, transparent 30%, rgba(255,255,255,.07) 42%, transparent 55%); }
/* every inner measure is a multiple of the spine width, so title and foot can never meet */
.spine__band {
  position: absolute; left: 0; right: 0; top: calc(var(--pw) * .6); height: calc(var(--pw) * .2);
  background: color-mix(in srgb, var(--c) 82%, #5c5650);
  box-shadow: 0 calc(var(--pw) * .1) 0 rgba(0,0,0,.25);
}
.spine__title {
  position: absolute; left: 50%; top: calc(var(--pw) * 1.15); bottom: calc(var(--pw) * 1.6);
  transform: translateX(-50%);
  writing-mode: vertical-rl; text-orientation: mixed;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  font: 400 calc(var(--pw) * .5)/1 var(--f-poster); letter-spacing: .04em; text-transform: uppercase;
  opacity: .9;
}
.spine__foot {
  position: absolute; left: 0; right: 0; bottom: calc(var(--pw) * .3);
  display: flex; flex-direction: column; align-items: center; gap: calc(var(--pw) * .12);
  font: 400 calc(var(--pw) * .34)/1 var(--f-crt); letter-spacing: .04em;
}
.spine__foot b { font-weight: 400; color: color-mix(in srgb, var(--c) 55%, #e6dccd); font-size: 1.25em; line-height: 1; }
.spine__foot span { padding: .12em .2em 0; border: 1px solid rgba(230,220,205,.45); font-size: .8em; line-height: 1; opacity: .75; }
.spine:hover { filter: brightness(1.25); }
.spine:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.spine.is-out { opacity: 0; visibility: hidden; pointer-events: none; transform: translateX(var(--x)) translateY(-14%) scale(.92); }
.spine.is-away { opacity: 0; visibility: hidden; pointer-events: none; }

/* ---------- the pulled-out tape ---------- */
.tapes__stage {
  grid-area: stage; position: relative; z-index: 2;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  pointer-events: none;
}
.tapes__stage > * { pointer-events: auto; }
.tapes__nav {
  justify-self: start; width: var(--nav); height: var(--nav); padding: 0;
  border: 1px solid var(--line-2); border-radius: 2px; background: rgba(10,7,8,.72);
  color: var(--text); font: 400 calc(var(--nav) * .55)/1 var(--f-crt);
  transition: background .15s, border-color .15s;
}
.tapes__nav--next { justify-self: end; }
.tapes__nav:hover { border-color: var(--text); background: rgba(10,7,8,.9); }
.tapes__nav:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

.sleeve { position: relative; width: calc(var(--sh) * .6); height: var(--sh); margin: 0; perspective: calc(var(--sh) * 3); }
/* floor shadow */
.sleeve::after {
  content: ""; position: absolute; left: 4%; right: -2%; bottom: calc(var(--sh) * -.03); height: calc(var(--sh) * .06); z-index: -1;
  background: radial-gradient(50% 50% at 50% 50%, rgba(0,0,0,.85), transparent 70%);
  filter: blur(4px);
}
.sleeve__box {
  position: absolute; inset: 0;
  transform: rotateY(-7deg) rotateZ(-1.1deg);
  transform-style: preserve-3d;
}
/* the cassette, half out of the sleeve's open side */
.sleeve__tape {
  position: absolute; top: 2.5%; bottom: 3%; right: -7.5%; width: 30%; z-index: 0;
  border-radius: 2px 3px 3px 2px;
  background:
    repeating-linear-gradient(180deg, transparent 0 calc(var(--sh) * .01), rgba(255,255,255,.035) calc(var(--sh) * .01) calc(var(--sh) * .012)),
    linear-gradient(90deg, #070606, #1d1b1a 55%, #2a2726 80%, #121010);
  box-shadow: inset -1px 0 0 rgba(255,255,255,.12), 0 calc(var(--sh) * .02) calc(var(--sh) * .04) rgba(0,0,0,.6);
}
.sleeve__tape i {           /* label strip on the cassette's edge */
  position: absolute; top: 12%; bottom: 12%; right: 22%; width: 14%;
  background: linear-gradient(90deg, #cfc6b6, #e8e0d1 50%, #bdb3a3);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.2);
  opacity: .85;
}
.sleeve__face {
  position: absolute; inset: 0; z-index: 1; overflow: hidden;
  border-radius: 2px; background: #0d0b0b;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.08),
    calc(var(--sh) * .008) 0 0 #0b0909,                                  /* card thickness */
    0 2px 3px rgba(0,0,0,.6),
    0 calc(var(--sh) * .06) calc(var(--sh) * .1) calc(var(--sh) * -.036) rgba(0,0,0,.95),
    0 calc(var(--sh) * .12) calc(var(--sh) * .18) calc(var(--sh) * -.08) rgba(0,0,0,.8);
}
.sleeve__face img, .sleeve__face video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%;
  filter: saturate(.88) contrast(1.04);
}
.sleeve__face video { opacity: 0; transition: opacity .4s; }
.sleeve.is-playing .sleeve__face video { opacity: 1; }
/* printed top band + worn edges + plastic sleeve sheen */
.sleeve__face::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 7.5%; z-index: 2;
  background: linear-gradient(180deg, #0f0c0c, #161212);
  border-bottom: max(2px, calc(var(--sh) * .006)) solid color-mix(in srgb, var(--c, #a8353b) 82%, #5c5650);
}
.sleeve__face::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background:
    linear-gradient(104deg, transparent 22%, rgba(255,255,255,.10) 31%, rgba(255,255,255,.02) 40%, transparent 52%),
    linear-gradient(90deg, rgba(255,255,255,.07), transparent 6%, transparent 92%, rgba(0,0,0,.35)),
    radial-gradient(130% 90% at 50% 45%, transparent 55%, rgba(0,0,0,.45)),
    url("../assets/ui/films/noise.svg");
  background-size: auto, auto, auto, 180px;
  mix-blend-mode: screen; opacity: .55;
}
.sleeve__print {
  position: absolute; left: 0; right: 0; top: 0; height: 7.5%; z-index: 4;
  display: flex; align-items: center; justify-content: space-between; padding: 0 7%;
  font: 400 calc(var(--sh) * .036)/1 var(--f-crt); letter-spacing: .08em; color: #d9cfbf;
}
.sleeve__print b { font-weight: 400; color: var(--red); font-size: 1.2em; }
.sleeve__print span { padding: .1em .25em 0; border: 1px solid rgba(217,207,191,.5); }

/* ---------- caption (also in --sh, so it grows with the sleeve) ---------- */
.tapes__info { grid-area: info; position: relative; z-index: 2; text-align: center; padding-top: calc(var(--sh) * .055); }
.tapes__title { margin: 0; font: 400 max(26px, calc(var(--sh) * .085))/1 var(--f-poster); text-transform: uppercase; letter-spacing: .01em; color: var(--text); }
.tapes__line { margin: calc(var(--sh) * .025) 0 0; display: flex; justify-content: center; flex-wrap: wrap; gap: .2em .8em; font: 400 max(17px, calc(var(--sh) * .042))/1.1 var(--f-crt); letter-spacing: .08em; text-transform: uppercase; }
.tapes__sub { color: var(--red); }
.tapes__meta { color: var(--muted); }
.tapes__info .btn { margin-top: calc(var(--sh) * .045); }

/* ---------- tablets / portrait: sleeve on top, caption, then the whole shelf in one centred row ---------- */
@media (max-width: 1000px), (max-aspect-ratio: 4/5), (orientation: landscape) and (max-height: 540px) {
  .films {
    /* sleeve + caption + row (.06 gap + .05 lift room + .72 spines + .03) must fit; 16 spines must fit the width */
    --sh: clamp(240px, min((var(--avail) - var(--btnh) - 10px) / 2.12, var(--cw) / 1.8), 640px);
    --ph: calc(var(--sh) * .72);
    --pw: calc(var(--sh) * .1);
    --nav: clamp(40px, calc(var(--sh) * .12), 64px);
  }
  .tapes { grid-template-areas: "stage" "info" "row"; }
  .tapes__stage { grid-template-columns: var(--nav) auto var(--nav); justify-content: center; column-gap: calc(var(--sh) * .16); }
  .tapes__row {
    grid-area: row; align-self: auto; height: auto; margin: calc(var(--sh) * .06) 0 0;
    display: flex; justify-content: safe center; gap: calc(var(--pw) * .12);
    padding: calc(var(--pw) * .5) 0 calc(var(--pw) * .3);
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity;
    scrollbar-width: none;
  }
  .tapes__row::-webkit-scrollbar { display: none; }
  .spine { position: relative; left: auto; flex: 0 0 var(--pw); margin: 0; transform: none; scroll-snap-align: center; }
  .spine.is-out {
    opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(calc(var(--pw) * -.4));
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), 0 0 0 max(1px, calc(var(--pw) * .05)) var(--red), 0 calc(var(--pw) * .35) calc(var(--pw) * .55) calc(var(--pw) * -.25) rgba(0,0,0,.8);
  }
  .spine.is-away { opacity: 1; visibility: visible; pointer-events: auto; }
  .tapes.is-live .spine { transition: transform .3s cubic-bezier(.2,.75,.25,1), filter .2s; }
}

/* ---------- phones: sleeve + caption + Play fit one screen under the head; spines scroll sideways below ---------- */
@media (max-width: 700px) {
  .films {
    --avail: calc(100svh - var(--osd-h) - 8px - var(--top, 230px));
    --sh: clamp(220px, min((var(--avail) - var(--btnh) - 16px) / 1.256, (var(--cw) - 2 * var(--nav) - 12px) / .69), 560px);
    --ph: calc(var(--sh) * .5);
    --pw: calc(var(--sh) * .068);
    --nav: 40px;
    min-height: 0;
  }
  .films .sec-head__row { align-items: flex-start; gap: 16px; }
  .films .sec-head__row > :first-child { flex: 1 1 100%; }
  /* one strip of short labels instead of two wrapped rows */
  .films .tabs { display: flex; flex-wrap: nowrap; width: 100%; overflow-x: auto; scrollbar-width: none; }
  .films .tabs::-webkit-scrollbar { display: none; }
  .films .tabs button { flex: 1 0 auto; padding: 8px 8px 6px; font-size: 17px; }
  .films .tabs .tab-l { display: none; }
  .films .tabs .tab-s { display: inline; }
  .tapes__stage { grid-template-columns: 1fr auto 1fr; column-gap: 0; }
  .tapes__row { justify-content: safe center; margin: calc(var(--sh) * .1) calc(var(--gutter) * -1) 0; padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); }
}

/* ---------- landscape phones / "widescreen phone" (short screens): head on one line, the sleeve on the left
   sized from the screen height, caption + Play + the spine strip beside it, so the whole shelf is one screen ---------- */
@media (orientation: landscape) and (max-height: 540px) {
  .films {
    --pb: 14px;
    --avail: calc(100svh - var(--osd-h) - 8px - var(--top, 96px) - var(--pb));
    --sh: clamp(180px, var(--avail), 460px);
    --ph: calc(var(--sh) * .44);
    --pw: calc(var(--ph) * .15);
    --nav: 44px;
    min-height: 0;
    padding-top: 6px;
  }
  .films .sec-head { margin-bottom: clamp(8px, 3svh, 16px); }
  .films .sec-head__bar { padding-top: 8px; font-size: 16px; }
  .films .sec-head__row { margin-top: 6px; flex-wrap: nowrap; align-items: center; gap: 16px; }
  .films .sec-head__row > :first-child { flex: 0 0 auto; }
  .films .sec-head__title { font-size: clamp(36px, 11svh, 52px); }
  .films .tabs { display: flex; flex-wrap: nowrap; width: auto; min-width: 0; margin-left: auto; overflow-x: auto; scrollbar-width: none; }
  .films .tabs::-webkit-scrollbar { display: none; }
  .films .tabs button { flex: 0 0 auto; min-height: 40px; padding: 8px 12px 6px; font-size: 17px; }

  .tapes {
    grid-template-columns: auto minmax(0, 1fr); grid-template-rows: 1fr auto;
    grid-template-areas: "stage info" "stage row";
    column-gap: clamp(18px, 4vw, 48px); align-items: center;
  }
  .tapes__stage { grid-template-columns: var(--nav) auto var(--nav); justify-content: start; column-gap: 14px; }
  .tapes__info { align-self: end; padding-top: 0; text-align: left; }
  .tapes__title { font-size: clamp(22px, 7svh, 34px); }
  .tapes__line { justify-content: flex-start; margin-top: 6px; font-size: 16px; }
  .tapes__info .btn { margin-top: 10px; }
  .tapes__row {
    grid-area: row; align-self: start; justify-content: flex-start;
    margin: 10px 0 0; padding: calc(var(--pw) * .5) 2px calc(var(--pw) * .3); scroll-padding-inline: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tapes.is-live .spine { transition: opacity .2s, visibility .2s; }
}