/* ============================================================
   CANALE 78 · TV campaigns cinema · styles
   Load AFTER styles.css (root variables come from there; local
   fallbacks below keep the section presentable standalone).
   The background image path assets/gen/cinema-room.jpg resolves
   from the site root, so this file must ship at the site root or
   be merged into styles.css. See MANIFEST.md.

   Architecture contract: every rule below renders a complete
   static section by default. Choreography exists only under
   html.anim, and event states (.blip, .l3-in) are added by
   cinema.js, never required for content.
   ============================================================ */

/* ---------- Room ---------- */
.tv-cinema {
  position: relative;
  padding-block: var(--sec, clamp(4.5rem, 9vw, 8.5rem));
  background: var(--forest-950, #0A2517);
  color: #fff;
}
.cin-room {
  position: absolute; inset: 0; pointer-events: none;
  background: url("assets/gen/cinema-room.jpg") center / cover no-repeat;
  opacity: .12;
}
.cin-vignette {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(95rem 60rem at 50% 28%, rgba(10, 37, 23, 0) 0%, var(--forest-950, #0A2517) 82%);
}
.cin-wrap { position: relative; z-index: 1; }

/* ---------- Stat-led opener (deliberately not a .sec-head) ---------- */
.cin-open {
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  gap: 1.6rem clamp(2rem, 5vw, 4rem); align-items: end;
  margin-bottom: clamp(2.8rem, 6vw, 4.5rem);
}
.cin-tag {
  font-weight: 700; font-size: 1.02rem; color: var(--green-300, #7FDCA2);
  margin-bottom: 12px;
}
.cin-open h2 { font-size: var(--fs-h2, clamp(2.05rem, 3vw + .9rem, 3.4rem)); }
.cin-sun { color: var(--sun-400, #FFCE3E); }
.cin-open-copy p {
  color: rgba(255, 255, 255, .86); font-size: var(--fs-lead, 1.15rem);
  line-height: 1.62; max-width: 50ch;
}

/* ---------- The set ---------- */
.cin-stage { max-width: 880px; margin-inline: auto; }
.cin-set { position: relative; }
.cin-set::after {
  /* screen light pooling on the rug, background gradient only */
  content: ""; position: absolute; left: 8%; right: 8%; bottom: -26px; height: 60px;
  background: radial-gradient(closest-side, rgba(127, 220, 162, .14), rgba(127, 220, 162, 0) 72%);
  pointer-events: none;
}
.cin-ant { display: block; width: min(46%, 330px); margin-inline: auto; height: auto; }
.cin-ant-rod { stroke: rgba(255, 255, 255, .92); stroke-width: 3.5; stroke-linecap: round; fill: none; }
.cin-ant-tip { fill: var(--sun-400, #FFCE3E); stroke: var(--forest-950, #0A2517); stroke-width: 2.5; }

.cin-body {
  position: relative;
  background: #fff;
  border: 3.5px solid var(--forest-900, #0F3423);
  border-radius: 30px;
  padding: clamp(12px, 2.2vw, 20px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(84px, 12vw, 112px);
  gap: clamp(12px, 2vw, 18px);
  box-shadow: 0 34px 70px -34px rgba(0, 0, 0, .6);
}
.cin-feet { display: block; width: min(78%, 560px); margin-inline: auto; height: auto; margin-top: -3px; }
.cin-feet path { stroke: rgba(255, 255, 255, .9); stroke-width: 5; stroke-linecap: round; fill: none; }

/* Screen */
.cin-screenframe {
  background: var(--forest-950, #0A2517);
  border-radius: 20px;
  padding: clamp(8px, 1.4vw, 12px);
  box-shadow: 0 0 90px -22px rgba(127, 220, 162, .38);
}
.cin-screen {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: 12px; background: var(--forest-900, #0F3423);
}
.cin-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cin-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 4; }

/* Play affordance: whole screen is the link, one drawn button */
.cin-play {
  position: absolute; inset: 0; z-index: 3;
  display: grid; place-items: center; text-decoration: none;
}
.cin-playbtn { width: clamp(60px, 9vw, 92px); height: auto; }
.cin-playbtn circle { fill: var(--sun-400, #FFCE3E); stroke: var(--forest-950, #0A2517); stroke-width: 3; }
.cin-playbtn path { fill: var(--forest-950, #0A2517); }
.cin-playbtn {
  filter: drop-shadow(4px 4px 0 rgba(10, 37, 23, .55));
  transition: transform .35s var(--ease, cubic-bezier(.22, 1, .36, 1));
}
.cin-play:hover .cin-playbtn,
.cin-play:focus-visible .cin-playbtn { transform: scale(1.12) rotate(3deg); }
.tv-cinema :focus-visible { outline-color: var(--sun-400, #FFCE3E); }

/* Channel badge, broadcast bug */
.cin-badge {
  position: absolute; top: 10px; right: 12px; z-index: 3; pointer-events: none;
  background: var(--forest-950, #0A2517); color: var(--green-300, #7FDCA2);
  border: 1.5px solid rgba(127, 220, 162, .38);
  font-weight: 800; font-size: .88rem; letter-spacing: .06em;
  padding: 4px 11px; border-radius: 9px;
}

/* Lower third, printed broadcast card */
.cin-lower3 {
  position: absolute; left: 12px; bottom: 12px; z-index: 3; pointer-events: none;
  max-width: min(78%, 420px);
  background: #fff; color: var(--ink, #142219);
  border-radius: 10px; padding: 9px 14px 10px;
  box-shadow: 4px 4px 0 rgba(10, 37, 23, .8);
}
.cin-lower3 p { display: flex; flex-direction: column; line-height: 1.3; }
.cin-lower3 strong { font-weight: 800; font-size: .98rem; }
.cin-lower3 span { font-size: .84rem; color: var(--ink-soft, #41564A); font-weight: 600; }
html.anim .tv-cinema .cin-lower3.l3-in { animation: cin-l3 .38s var(--ease, cubic-bezier(.22, 1, .36, 1)) both; }
@keyframes cin-l3 {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

/* Static burst: base state fully transparent, two-frame blip under .anim only */
.cin-staticfx {
  position: absolute; inset: 0; z-index: 2; opacity: 0; pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .2) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(127, 220, 162, .16) 0 2px, transparent 2px 5px);
}
html.anim .tv-cinema .cin-screen.blip .cin-staticfx {
  animation: cin-blip .18s steps(2, end) 1;
}
@keyframes cin-blip {
  0% { opacity: 1; background-position: 0 0, 0 0; }
  50% { opacity: 1; background-position: 0 3px, 3px 0; }
  100% { opacity: 0; background-position: 0 -2px, -2px 0; }
}

/* Control panel */
.cin-panel {
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(10px, 1.6vw, 16px); padding-block: 4px;
}
.cin-dial { width: 100%; max-width: 88px; }
.cin-dial svg, .cin-knob svg, .cin-grille { display: block; width: 100%; height: auto; }
.dial-face, .knob-face { fill: var(--mint-100, #E7F5EC); stroke: var(--forest-900, #0F3423); stroke-width: 2.5; }
.dial-ticks path, .knob-line {
  stroke: var(--forest-900, #0F3423); stroke-width: 2.5; stroke-linecap: round; fill: none;
}
.dial-pointer { stroke: var(--forest-900, #0F3423); stroke-width: 4; stroke-linecap: round; fill: none; }
.dial-hub { fill: var(--forest-900, #0F3423); }
.cin-rotor { transform-box: fill-box; transform-origin: center; }
html.anim .tv-cinema .cin-rotor {
  transform: rotate(var(--dial, 0deg));
  transition: transform .3s var(--ease, cubic-bezier(.22, 1, .36, 1));
}
.cin-knob { width: 44%; max-width: 44px; }
.cin-grille { width: 62%; max-width: 60px; }
.cin-grille path { stroke: var(--forest-900, #0F3423); stroke-width: 2.5; stroke-linecap: round; }
/* cinema.js wraps the dial svg in this button */
.cin-dialbtn {
  display: block; width: 100%; padding: 0; border: 0; border-radius: 50%;
  background: none; color: inherit; font: inherit; cursor: pointer;
}
.dial-face { transition: fill .25s var(--ease, cubic-bezier(.22, 1, .36, 1)); }
.cin-dialbtn:hover .dial-face { fill: var(--sun-300, #FFDD70); }
.cin-plate {
  margin-top: auto;
  background: var(--mint-100, #E7F5EC); color: var(--forest-900, #0F3423);
  border: 2px solid var(--forest-900, #0F3423); border-radius: 8px;
  font-weight: 800; font-size: .6rem; letter-spacing: .1em;
  padding: 4px 8px; text-align: center; white-space: nowrap;
}

/* JS-injected channel nav and surf hint */
.cin-nav { display: flex; justify-content: center; gap: 12px; margin-top: 18px; }
.cin-navbtn {
  width: 46px; height: 46px; border-radius: 999px; cursor: pointer;
  background: #fff; color: var(--forest-900, #0F3423);
  border: 2.5px solid var(--forest-900, #0F3423);
  display: grid; place-items: center;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, .45);
  transition: transform .25s var(--ease, cubic-bezier(.22, 1, .36, 1)),
              box-shadow .25s var(--ease, cubic-bezier(.22, 1, .36, 1));
}
.cin-navbtn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 rgba(0, 0, 0, .45); }
.cin-navbtn:active { transform: translate(1px, 1px); box-shadow: 2px 2px 0 rgba(0, 0, 0, .45); }
.cin-navbtn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.cin-hint { text-align: center; margin-top: 12px; font-size: .88rem; font-weight: 600; color: rgba(255, 255, 255, .7); }
.cin-hint.seen { opacity: 0; transition: opacity .6s var(--ease, cubic-bezier(.22, 1, .36, 1)); }

/* Close button while the embed is alive */
.cin-close {
  position: absolute; top: 10px; left: 12px; z-index: 5; cursor: pointer;
  background: #fff; color: var(--ink, #142219);
  border: 2.5px solid var(--forest-900, #0F3423); border-radius: 999px;
  font: inherit; font-weight: 700; font-size: .85rem; padding: 6px 14px;
  box-shadow: 3px 3px 0 rgba(10, 37, 23, .8);
  transition: transform .25s var(--ease, cubic-bezier(.22, 1, .36, 1)),
              box-shadow .25s var(--ease, cubic-bezier(.22, 1, .36, 1));
}
.cin-close:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 rgba(10, 37, 23, .8); }
.cin-close:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 rgba(10, 37, 23, .8); }

/* While playing: clear the overlays so the film owns the screen */
.tv-cinema.is-playing .cin-play,
.tv-cinema.is-playing .cin-badge,
.tv-cinema.is-playing .cin-lower3,
.tv-cinema.is-playing .cin-staticfx { display: none; }

/* ---------- Scroll surf (armed by cinema.js under html.anim only) ---------- */
html.anim .tv-cinema.cin-surf .cin-stagewrap { position: sticky; }

/* ---------- Reel strip ---------- */
.cin-reelwrap { margin-top: clamp(2.2rem, 4.5vw, 3.4rem); }
.cin-reel {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 13px;
}
.cin-spot { display: block; text-decoration: none; color: #fff; border-radius: 14px; }
.cin-thumb {
  position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: 12px; border: 2.5px solid var(--forest-700, #1B5A38);
  background: var(--forest-900, #0F3423);
  transition: border-color .3s var(--ease, cubic-bezier(.22, 1, .36, 1)),
              transform .3s var(--ease, cubic-bezier(.22, 1, .36, 1));
}
.cin-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cin-ch {
  position: absolute; left: 7px; top: 7px;
  background: var(--forest-950, #0A2517); color: #fff;
  border: 1.5px solid rgba(255, 255, 255, .28);
  font-weight: 800; font-size: .68rem; letter-spacing: .06em;
  padding: 2px 7px; border-radius: 7px;
}
.cin-spot:hover .cin-thumb { border-color: var(--green-300, #7FDCA2); transform: translateY(-4px); }
.cin-spot[aria-current] .cin-thumb { border-color: var(--sun-400, #FFCE3E); }
.cin-spot[aria-current] .cin-ch { background: var(--sun-400, #FFCE3E); color: var(--forest-950, #0A2517); border-color: var(--forest-950, #0A2517); }
.cin-meta { display: flex; flex-direction: column; padding: 9px 4px 0; line-height: 1.35; }
.cin-meta strong { font-size: .95rem; font-weight: 800; }
.cin-meta > span { font-size: .82rem; color: rgba(255, 255, 255, .74); font-weight: 600; }

.cin-note { margin-top: 22px; font-size: .95rem; color: rgba(255, 255, 255, .8); max-width: 72ch; }
.cin-note a {
  color: #fff; font-weight: 700;
  text-decoration-color: var(--sun-400, #FFCE3E);
  text-decoration-thickness: 2px; text-underline-offset: 4px;
  transition: color .25s var(--ease, cubic-bezier(.22, 1, .36, 1));
}
.cin-note a:hover { color: var(--sun-300, #FFDD70); }
.cin-note-slot { margin-top: 8px; font-style: italic; font-size: .88rem; color: rgba(255, 255, 255, .66); }

/* ---------- Reveal choreography ----------
   The wrappers ride the site .rv system from main.js. Reveal
   transforms live on non-interactive wrappers and list items;
   hover transitions live on inner elements (.cin-thumb, buttons),
   so the settle pin below never freezes a hover. */
html.anim .cin-reelwrap.rv { opacity: 1; transform: none; }
html.anim .cin-reelwrap.rv .cin-reel > li { opacity: 0; transform: translateY(16px); }
html.anim .cin-reelwrap.rv.in .cin-reel > li {
  opacity: 1; transform: none;
  transition: opacity .55s var(--ease, cubic-bezier(.22, 1, .36, 1)) calc(var(--i, 0) * 60ms),
              transform .55s var(--ease, cubic-bezier(.22, 1, .36, 1)) calc(var(--i, 0) * 60ms);
}
html.anim .cin-reelwrap.rv.in.settle .cin-reel > li { transition: none; opacity: 1; transform: none; }
html.anim .cin-reelwrap.rv .cin-note { opacity: 0; transform: translateY(12px); }
html.anim .cin-reelwrap.rv.in .cin-note {
  opacity: 1; transform: none;
  transition: opacity .6s var(--ease, cubic-bezier(.22, 1, .36, 1)) .32s,
              transform .6s var(--ease, cubic-bezier(.22, 1, .36, 1)) .32s;
}
html.anim .cin-reelwrap.rv.in.settle .cin-note { transition: none; opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
/* shorter laptop viewports: shrink the set so the scroll surf can still pin */
@media (max-height: 780px) and (min-width: 900px) {
  .cin-stage { max-width: 740px; }
}
@media (max-width: 1020px) {
  .cin-open { grid-template-columns: 1fr; align-items: start; }
  .cin-reel { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .cin-reel {
    display: flex; overflow-x: auto; gap: 11px;
    scroll-snap-type: x proximity; padding-bottom: 10px;
    scrollbar-width: thin; scrollbar-color: var(--forest-700, #1B5A38) transparent;
  }
  .cin-reel > li { flex: 0 0 clamp(180px, 52vw, 230px); scroll-snap-align: center; }
  .cin-body { grid-template-columns: 1fr; }
  .cin-panel {
    flex-direction: row; justify-content: center; align-items: center;
    gap: 16px; padding-block: 2px;
  }
  .cin-dial { max-width: 56px; }
  .cin-knob { max-width: 30px; width: auto; flex: none; }
  .cin-grille { display: none; }
  .cin-plate { margin-top: 0; }
  .cin-badge { font-size: .76rem; padding: 3px 8px; }
}
@media (max-width: 560px) {
  .cin-lower3 { display: none; }
  .cin-ant { width: 52%; }
  .cin-feet { width: 86%; }
}

/* ---------- Reduced motion: static broadcast, no exceptions ----------
   styles.css already collapses all animation globally; these are local
   belt and braces for the cinema's own effects. */
@media (prefers-reduced-motion: reduce) {
  .cin-staticfx { display: none !important; }
  .cin-hint { display: none !important; }
  .cin-rotor { transform: none !important; transition: none !important; }
  .cin-lower3 { animation: none !important; opacity: 1 !important; transform: none !important; }
  .cin-reel > li, .cin-note { opacity: 1 !important; transform: none !important; }
  /* Belt and braces for a mid-session preference flip: cinema.js
     dismantles the surf (it owns the inline pinspace height), and
     this unsticks the stage even if that listener never ran. */
  .cin-surf .cin-stagewrap { position: static !important; }
}