/* Bangkok Film — Black Lagoon alternate cut (dark chrome override) */

.film-page.film-lagoon {
  --film-sky: #0e1a2c;
  --film-sky-deep: #060b14;
  --film-sakura: #c84a7a;
  --film-pink: #e85a9a;
  --film-gold: #e8a020;
  --film-warm: #c87830;
  --film-cream: #d8d4cc;
  --film-emerald: #2a9a8a;
  --film-ink: #e8e4dc;
  --film-glow: rgba(42, 212, 232, 0.35);
  --lagoon-bg: #0a0c12;
  --lagoon-panel: rgba(12, 16, 24, 0.94);
  --lagoon-cyan: #2ad4e8;
  --lagoon-magenta: #e84a9a;
  --lagoon-amber: #f0a020;
}

.film-page.film-lagoon {
  background: radial-gradient(ellipse at top, #141c28 0%, #0a0c12 55%, #060810 100%);
  color: var(--film-cream);
}

.film-page.film-lagoon .site-header {
  background: rgba(8, 12, 20, 0.92);
  border-bottom-color: rgba(42, 212, 232, 0.18);
}

.film-page.film-lagoon .logo,
.film-page.film-lagoon .nav a,
.film-page.film-lagoon .page-title,
.film-page.film-lagoon .eyebrow,
.film-page.film-lagoon .lede {
  color: var(--film-cream);
}

.film-page.film-lagoon .logo span {
  color: var(--lagoon-cyan);
}

.film-page.film-lagoon .nav a[aria-current="page"] {
  color: var(--lagoon-amber);
  border-color: rgba(240, 160, 32, 0.45);
}

.film-page.film-lagoon .eyebrow {
  color: var(--lagoon-cyan);
  letter-spacing: 0.08em;
}

.film-page.film-lagoon .page-title {
  text-shadow: 0 2px 18px rgba(42, 212, 232, 0.2);
}

.film-page.film-lagoon .film-lede {
  color: rgba(216, 212, 204, 0.82);
}

.film-page.film-lagoon .film-stage-wrap {
  border-radius: 10px;
  box-shadow:
    0 18px 50px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(42, 212, 232, 0.28),
    inset 0 0 60px rgba(232, 74, 154, 0.06);
  background: linear-gradient(160deg, #060b14, #1a1020 55%, #0e1a2c);
}

.film-page.film-lagoon .film-stage,
.film-page.film-lagoon .film-stage canvas {
  background: #060810;
}

.film-page.film-lagoon .film-overlay {
  background: radial-gradient(ellipse at center, rgba(6, 10, 16, 0.4), rgba(6, 10, 16, 0.82));
}

.film-page.film-lagoon .film-play-btn {
  color: #0a0c12;
  background: linear-gradient(135deg, #2ad4e8, #e8a020 70%, #e84a9a);
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.45),
    0 0 0 2px rgba(42, 212, 232, 0.35);
}

.film-page.film-lagoon .film-caption-bar {
  background: linear-gradient(90deg, rgba(12, 16, 24, 0.95), rgba(30, 16, 28, 0.85));
  border: 1px solid rgba(42, 212, 232, 0.28);
}

.film-page.film-lagoon .film-caption {
  color: var(--film-cream);
}

.film-page.film-lagoon .film-ctrl {
  border: 1.5px solid rgba(42, 212, 232, 0.35);
  background: #121820;
  color: var(--film-cream);
}

.film-page.film-lagoon .film-ctrl:hover:not(:disabled),
.film-page.film-lagoon .film-ctrl:focus-visible:not(:disabled) {
  background: #1a2430;
  border-color: var(--lagoon-amber);
}

.film-page.film-lagoon .film-progress {
  background: rgba(30, 40, 55, 0.7);
}

.film-page.film-lagoon .film-progress-fill {
  background: linear-gradient(90deg, #2ad4e8, #e84a9a 55%, #f0a020);
}

.film-page.film-lagoon .film-time {
  color: rgba(200, 210, 220, 0.7);
}

.film-page.film-lagoon .film-alt-link {
  color: rgba(180, 190, 200, 0.75);
}

.film-page.film-lagoon .film-alt-link a {
  color: var(--lagoon-cyan);
}

.film-page.film-lagoon .site-footer {
  color: rgba(180, 190, 200, 0.65);
  border-top-color: rgba(42, 212, 232, 0.12);
}

.film-page.film-lagoon .site-footer .hand {
  color: var(--lagoon-magenta);
}

/* Version switcher (used on both film cuts) */
.film-version-switch {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.85rem 0 0.25rem;
}

.film-version-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap, 44px);
  padding: 0.45rem 1rem;
  border-radius: 999px;
  font-family: "Source Sans 3", system-ui, sans-serif;
  font-weight: 600;
  font-size: 0.92rem;
  text-decoration: none;
  border: 1.5px solid rgba(232, 196, 184, 0.55);
  background: #fff8f0;
  color: #2c2a28;
  touch-action: manipulation;
}

.film-version-chip[aria-current="page"] {
  pointer-events: none;
  opacity: 0.95;
}

.film-page:not(.film-lagoon) .film-version-chip[href*="lagoon"] {
  border-color: rgba(42, 212, 232, 0.45);
  background: #121820;
  color: #e8e4dc;
}

.film-page:not(.film-lagoon) .film-version-chip[aria-current="page"] {
  border-color: #f7b6c8;
  background: linear-gradient(135deg, #fff8f0, #ffe8ef);
}

.film-page.film-lagoon .film-version-chip {
  border-color: rgba(42, 212, 232, 0.35);
  background: #121820;
  color: #e8e4dc;
}

.film-page.film-lagoon .film-version-chip[aria-current="page"] {
  border-color: var(--lagoon-amber);
  background: linear-gradient(135deg, #1a2430, #2a1a28);
  color: var(--lagoon-amber);
}

.film-page.film-lagoon .film-version-chip[href="bangkok-film.html"] {
  border-color: rgba(247, 182, 200, 0.45);
  background: #fff8f0;
  color: #2c2a28;
}

.film-badge {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-family: "Source Sans 3", system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  vertical-align: middle;
}

.film-page.film-lagoon .film-badge {
  background: rgba(232, 74, 154, 0.2);
  color: var(--lagoon-magenta);
  border: 1px solid rgba(232, 74, 154, 0.4);
}

/* HQ MP4 player */
.film-page.film-lagoon .film-stage-video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #060810;
}

.film-page.film-lagoon .film-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #060810;
}

.film-page.film-lagoon .reduced-still {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
}

.film-page.film-lagoon .film-badge {
  display: inline-block;
  margin-left: 0.4em;
  padding: 0.1em 0.55em;
  border-radius: 999px;
  font-size: 0.72em;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #0a0c12;
  background: linear-gradient(120deg, #2ad4e8, #e84a9a);
  vertical-align: middle;
}

/* HQ video fills the stage (replaces canvas for Lagoon cut) */
.film-page.film-lagoon .film-stage-video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #060810;
}

.film-page.film-lagoon .film-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #060810;
  vertical-align: top;
}

.film-page.film-lagoon .film-stage-video .film-overlay {
  pointer-events: auto;
}

.film-page.film-lagoon .reduced-still {
  display: block;
  width: 100%;
  height: auto;
}

.film-page.film-lagoon .film-badge {
  display: inline-block;
  margin-left: 0.35em;
  padding: 0.12em 0.55em;
  border-radius: 999px;
  font-size: 0.7em;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #0a0c12;
  background: linear-gradient(120deg, #2ad4e8, #e84a9a);
  vertical-align: middle;
}