/* Three films, three environments. Artwork and video grading are unchanged. */
.mc-case { --film-accent: #89cfff; --film-rgb: 94,165,235; --film-ink: #080e18; }
.mc-case[data-featured-film="belyounech"] { --film-accent: #c6d8bc; --film-rgb: 83,164,161; --film-ink: #0b191b; }
.mc-case[data-featured-film="racks"] { --film-accent: #ef8b77; --film-rgb: 177,61,49; --film-ink: #170c0e; }
#project-dialog.motion-project:has([data-featured-film="seekfree"]) { --case-accent: #89cfff; --case-rgb: 94,165,235; --case-chrome: #0a1320f5; }
#project-dialog.motion-project:has([data-featured-film="belyounech"]) { --case-accent: #c6d8bc; --case-rgb: 83,164,161; --case-chrome: #0b191bf5; }
#project-dialog.motion-project:has([data-featured-film="racks"]) { --case-accent: #ef8b77; --case-rgb: 177,61,49; --case-chrome: #170c0ef5; }
.mc-showcase { position: relative; isolation: isolate; background: #080c12; overflow: hidden; }
.mc-film-atmospheres { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.mc-film-atmospheres > span { position: absolute; inset: 0; opacity: 0; transition: opacity .85s ease; }
.mc-film-atmospheres [data-film-tone="seekfree"] {
  background: radial-gradient(ellipse at 85% 42%, #234f7c88, transparent 70%), radial-gradient(ellipse at 8% 100%, #203b6266, transparent 65%), #080e18;
}
.mc-film-atmospheres [data-film-tone="belyounech"] {
  background: radial-gradient(ellipse at 85% 20%, #28646680, transparent 70%), radial-gradient(ellipse at 5% 95%, #99805c40, transparent 66%), #0b191b;
}
.mc-film-atmospheres [data-film-tone="racks"] {
  background: radial-gradient(ellipse at 92% 50%, #812c2980, transparent 64%), linear-gradient(115deg, #101316, #210e11);
}
.mc-case[data-featured-film="seekfree"] [data-film-tone="seekfree"],
.mc-case[data-featured-film="belyounech"] [data-film-tone="belyounech"],
.mc-case[data-featured-film="racks"] [data-film-tone="racks"] { opacity: 1; }
.mc-showcase-header h2 span, .mc-showcase-header > p { color: #b2bdc5; }
.mc-cinema { border: 1px solid rgba(var(--film-rgb), .23); box-shadow: 0 24px 65px #0005; background: var(--film-ink); }
.mc-cinema-copy > p:first-child { color: var(--film-accent); }
.mc-cinema::after { background: linear-gradient(90deg, #05090de6, #05090d66 42%, transparent 78%), linear-gradient(0deg, #05090dc9, transparent 65%); }
.mc-case[data-featured-film="belyounech"] .mc-cinema::after { background: linear-gradient(90deg, #071719db, #07171955 48%, transparent 85%), linear-gradient(0deg, #0b191bd9, transparent 70%); }
.mc-case[data-featured-film="racks"] .mc-cinema::after { background: linear-gradient(90deg, #10090cde, #10090c66 45%, transparent 80%), linear-gradient(0deg, #180b0ee0, transparent 65%); }
.mc-watch { background: var(--film-accent); border-color: var(--film-accent); }

/* Each selector carries its film palette even before it is selected. */
.mc-selection { gap: 16px; }
.mc-select { --select-rgb: 94,165,235; padding: 17px 14px; border: 1px solid rgba(var(--select-rgb), .18); border-top: 2px solid rgba(var(--select-rgb), .3); background: linear-gradient(120deg, rgba(var(--select-rgb), .075), #080c1233); transition: border-color .3s, background .3s; }
.mc-select[data-feature-film="belyounech"] { --select-rgb: 83,164,161; }
.mc-select[data-feature-film="racks"] { --select-rgb: 177,61,49; }
.mc-select.is-active, .mc-select:hover { border-top-color: rgb(var(--select-rgb)); background: linear-gradient(120deg, rgba(var(--select-rgb), .2), rgba(var(--select-rgb), .045)); }
.mc-select-text small, .mc-select-duration { color: #b0bac2; }
.mc-select-art { flex-basis: 90px; }
.mc-select.is-active .mc-select-art { box-shadow: 0 0 20px rgba(var(--select-rgb), .13); }

/* SeekFree: technical blue, fine architectural lines, cool rim light. */
.mc-chapter-seekfree {
  --mc-red: #89cfff;
  background: radial-gradient(ellipse at 85% 48%, #214d7738, transparent 68%), linear-gradient(135deg, #091321, #080d15 75%);
  position: relative; isolation: isolate;
}
.mc-chapter-seekfree::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: -1; background: repeating-linear-gradient(90deg, transparent 0 119px, #89cfff07 119px 120px); mask-image: linear-gradient(transparent, #000 30%, transparent); }
.mc-chapter-seekfree h3 em { color: #89cfff; }
.mc-chapter-seekfree .mc-screen { border: 1px solid #89cfff38; box-shadow: 0 25px 90px #0006, 0 0 65px #357ebe0c; }

/* Belyounech: deep coastal teal and a soft sandstone wash. */
.mc-chapter-belyounech {
  --mc-red: #b4d4c9;
  background: radial-gradient(ellipse at 12% 35%, #3664634d, transparent 68%), radial-gradient(ellipse at 92% 95%, #b6956130, transparent 60%), linear-gradient(145deg, #0d2226, #101a1c);
}
.mc-chapter-belyounech h3 em { color: #d6c6a4; }
.mc-chapter-belyounech .mc-giant-number { color: #8ac5bc; opacity: .23; }
.mc-chapter-belyounech .mc-stage-ambient { opacity: .20; }
.mc-chapter-belyounech .mc-screen { border: 1px solid #c6d8bc40; box-shadow: 0 30px 80px #03161688; }
.mc-chapter-belyounech .mc-chapter-copy > p:not(.mc-kicker) { color: #b8c5c3; }
.mc-chapter-belyounech .mc-screen-play:hover { color: #0b191b; }

/* Server racks: brushed charcoal, a red side light, and harder industrial lines. */
.mc-chapter-racks {
  --mc-red: #ef8b77;
  background: linear-gradient(112deg, transparent 51%, #96352b0b 51.1%, transparent 72%), radial-gradient(ellipse at 12% 55%, #922d2a3d, transparent 60%), linear-gradient(135deg, #181519, #101215 68%);
}
.mc-chapter-racks h3 em { color: #ef8b77; }
.mc-chapter-racks .mc-giant-number { color: #d06758; opacity: .25; }
.mc-chapter-racks .mc-screen { border: 1px solid #ef8b7735; box-shadow: 0 30px 85px #0008, -15px 0 70px #a2292414; }
.mc-chapter-racks .mc-stage-ambient { opacity: .24; }
.mc-chapter .mc-skills span { border-color: #ffffff26; }
.mc-chapter .mc-screen-play { background: #080c12b3; }
.mc-chapter .mc-screen-play:hover { background: var(--mc-red); border-color: var(--mc-red); }
.mc-end { background: radial-gradient(ellipse at 20% 100%, #21415d36, transparent 65%), radial-gradient(ellipse at 95% 20%, #6b30352e, transparent 60%), #0d1016; }
@media (max-width: 600px) {
  .mc-selection { gap: 8px; }
  .mc-select { padding: 10px 8px 12px; }
  .mc-select-text strong { font-size: 13px; }
  .mc-cinema::after, .mc-case[data-featured-film="belyounech"] .mc-cinema::after, .mc-case[data-featured-film="racks"] .mc-cinema::after { background: linear-gradient(0deg, var(--film-ink) 0%, #05090d88 48%, transparent 85%); }
}
@media (prefers-reduced-motion: reduce) { .mc-film-atmospheres > span, .mc-select { transition: none; } }