/* ===== КЕЙС «COMEDY CLUB PRODUCTION × ТНТ» =====
   Зимняя советская сказка — как в самом скетче «Демис и Марина»: синий вечер, снег, тёплый свет окон,
   ламповый телевизор; красный Comedy — акцентом. Макет шириной 1440: размеры — calc(N * var(--k)).
   Оживляет js/case-comedy.js (снег, тёплый свет за мышью, видео в экране телевизора). */

.cc-page {
  /* — настройки — */
  --w-night: #0d1626;        /* зимний вечер */
  --w-deep: #16233a;         /* сумерки повыше */
  --w-warm: #ffcf8a;         /* тёплый свет окна / фонаря */
  --w-snow: #eef4ff;         /* снег */
  --cc-red: #e3262e;         /* красный Comedy */
  --cc-dim: #93a0b8;         /* второстепенный текст */

  background: var(--w-night);
  color: #fff;
}
.cc { container-type: inline-size; overflow-x: clip; }
.cc > section { --k: calc(100cqw / 1440); position: relative; }

.cc-label { margin: 0; font-weight: 500; font-size: calc(12 * var(--k)); letter-spacing: 0.3em; text-transform: uppercase; color: var(--w-warm); }
.cc-text { max-width: calc(780 * var(--k)); margin: 0; font-weight: 300; font-size: calc(15 * var(--k)); line-height: 1.6; color: #dfe6f2; }
.cc-text--big { font-weight: 400; font-size: calc(24 * var(--k)); line-height: 1.45; color: #fff; }
.cc-text b { font-weight: 700; }
.cc-text a { color: #fff; text-decoration: underline; text-decoration-color: var(--cc-red); text-underline-offset: 0.18em; text-decoration-thickness: 2px; }
.cc-text a:hover { color: var(--w-warm); }

.cc-back {
  position: fixed; top: 20px; left: 20px; z-index: 60;
  padding: 8px 18px;
  border: 1px solid rgba(255, 207, 138, 0.6);
  background: rgba(13, 22, 38, 0.7);
  color: #fff;
  font-weight: 500; font-size: 14px;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}
.cc-back:hover { background: var(--w-warm); color: var(--w-night); }

/* =====================================================================
   1. ОБЛОЖКА
   ===================================================================== */
.cc-hero {
  height: max(100vh, calc(760 * var(--k)));
  overflow: hidden;
  background:
    radial-gradient(ellipse 70% 45% at 50% 105%, rgba(255, 207, 138, 0.16), transparent 70%),  /* тёплое зарево снизу */
    linear-gradient(180deg, #0a1120 0%, var(--w-deep) 55%, #1d2c46 100%);
}
/* вечерний двор — фоном, чуть плывёт за мышью; слева притемнён под текст */
.cc-hero__yard {
  position: absolute; inset: -3%; width: 106%; height: 106%; object-fit: cover; z-index: 0;
  filter: brightness(0.62) saturate(0.85);
  translate: var(--yx, 0px) var(--yy, 0px);
  will-change: translate;
}
.cc-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(10, 17, 32, 0.92) 0%, rgba(10, 17, 32, 0.55) 45%, rgba(10, 17, 32, 0.15) 100%);
}

/* тёплый свет, как от фонаря, — следует за мышью */
.cc-glow {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: radial-gradient(circle calc(360 * var(--k)) at var(--gx, 30%) var(--gy, 40%), rgba(255, 207, 138, 0.22), rgba(255, 190, 110, 0.06) 45%, transparent 70%);
  mix-blend-mode: screen;
}
.cc-hero__in {
  position: absolute; z-index: 3;
  left: calc(110 * var(--k)); top: calc(120 * var(--k));
  width: calc(600 * var(--k));
}
.cc-hero__logo { display: block; width: calc(400 * var(--k)); height: auto; margin-left: calc(-14 * var(--k)); filter: drop-shadow(0 calc(16 * var(--k)) calc(30 * var(--k)) rgba(227, 38, 46, 0.35)); }
.cc-hero__title { margin: calc(22 * var(--k)) 0 0; font-weight: 800; font-size: calc(38 * var(--k)); line-height: 1.1; text-transform: uppercase; }
.cc-chips { display: flex; flex-wrap: wrap; gap: calc(10 * var(--k)); margin: calc(24 * var(--k)) 0 0; padding: 0; list-style: none; }
.cc-chips li { padding: calc(7 * var(--k)) calc(16 * var(--k)); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: calc(30 * var(--k)); font-size: calc(13 * var(--k)); }
.cc-chips li:last-child { border-color: var(--cc-red); background: var(--cc-red); }

/* телевизор в сугробе: картинка во всю ширину по низу обложки, экран прозрачный, под ним — видео */
.cc-tv {
  position: absolute; z-index: 2;
  left: 0; right: 0; bottom: calc(-20 * var(--k));
  width: 100%;
  aspect-ratio: 2172 / 724;
}
.cc-tv__body { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
/* экран: видео под перспективу (matrix3d в js), блеклые цвета лампового ТВ, строки, шум, бегущая полоса */
.cc-tv__screen { position: absolute; left: 0; top: 0; z-index: 1; overflow: hidden; transform-origin: 0 0; border-radius: 6%; background: #111; }
.cc-tv__screen video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.55) sepia(0.25) contrast(1.15) brightness(0.92) blur(0.4px); animation: cc-flicker 0.12s steps(2) infinite; }
@keyframes cc-flicker { 50% { opacity: 0.94; } }
.cc-tv__lines, .cc-tv__noise, .cc-tv__roll { position: absolute; inset: 0; pointer-events: none; }
.cc-tv__lines { background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.28) 0 2px, transparent 2px 4px); }
.cc-tv__noise {
  inset: -50%;
  opacity: 0.16;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: cc-noise 0.3s steps(3) infinite;
}
@keyframes cc-noise { 33% { transform: translate(-6%, 4%); } 66% { transform: translate(5%, -6%); } }
.cc-tv__roll { /* светлая полоса медленно ползёт по экрану, как на старом ТВ, + виньетка кинескопа */
  background:
    radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(0, 0, 0, 0.55) 100%),
    linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.08) 48%, rgba(255, 255, 255, 0.16) 50%, rgba(255, 255, 255, 0.08) 52%, transparent 100%) 0 0 / 100% 300% no-repeat;
  animation: cc-roll 7s linear infinite;
}
@keyframes cc-roll { from { background-position: 0 0, 0 150%; } to { background-position: 0 0, 0 -150%; } }

/* снег — поверх всего на обложке */
.cc-snow { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; }

/* мягкий переход обложки в следующий блок — «сугроб» светом */
.cc-hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: calc(140 * var(--k)); z-index: 3; pointer-events: none;
  background: linear-gradient(transparent, var(--w-night));
}

/* вертикальный экран (телефон): текст обложки крупнее, телевизор — крупным планом справа */
@media (max-aspect-ratio: 4 / 5) {
  .cc > .cc-hero { --k: calc(100cqw / 640); }  /* масштаб обложки: 640 вместо 1440 */
  .cc-hero__in { left: calc(40 * var(--k)); top: calc(120 * var(--k)); width: calc(560 * var(--k)); }
  .cc-tv { width: 260%; left: -150%; right: auto; }  /* картинка шире экрана, видна её правая часть с телевизором */
}

/* =====================================================================
   НИЖЕ ОБЛОЖКИ — спокойная колонка по центру, много воздуха, без плашек
   ===================================================================== */
.cc > section:not(.cc-hero) { max-width: calc(900 * var(--k)); margin: 0 auto; padding: calc(70 * var(--k)) 0; }
.cc > section:not(.cc-hero) .cc-label { margin-bottom: calc(18 * var(--k)); }

/* 2. контекст */
.cc-brief { padding-top: calc(120 * var(--k)) !important; }
.cc-row { display: block; }

/* 3. как мы работали — одной строкой */
.cc-flow { margin: 0; font-weight: 300; font-size: calc(16 * var(--k)); line-height: 1.7; color: #c9d2e3; }
.cc-flow i { font-style: normal; color: var(--w-warm); margin: 0 0.3em; }
.cc-flow b { font-weight: 600; color: #fff; }

/* 4. результат — чистый плеер */
.cc-result .cc-text--big { margin: 0 0 calc(30 * var(--k)); }
.cc-film { position: relative; display: block; width: calc(660 * var(--k)); aspect-ratio: 4 / 3; padding: 0; border: 0; overflow: hidden; border-radius: calc(12 * var(--k)); background: #000; cursor: pointer; }
.cc-film img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s cubic-bezier(.2, .7, .3, 1); }
.cc-film:hover img { transform: scale(1.03); }
.cc-play { position: absolute; left: 50%; top: 50%; width: calc(80 * var(--k)); height: calc(80 * var(--k)); translate: -50% -50%; border-radius: 50%; background: rgba(255, 255, 255, 0.92); transition: scale 0.3s cubic-bezier(.3, 1.6, .5, 1), background 0.3s; }
.cc-play::after { content: ""; position: absolute; left: 40%; top: 30%; border-left: calc(25 * var(--k)) solid var(--w-night); border-block: calc(16 * var(--k)) solid transparent; }
.cc-film:hover .cc-play { scale: 1.1; background: var(--cc-red); }
.cc-film:hover .cc-play::after { border-left-color: #fff; }
.cc-film__cap { margin: calc(12 * var(--k)) 0 0; font-size: calc(12 * var(--k)); color: var(--cc-dim); }

/* 5. авторская группа — небольшие портреты в ряд */
.cc-team__row { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(20 * var(--k)); margin: 0; padding: 0; list-style: none; }
.cc-person { position: relative; }
.cc-person img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; filter: grayscale(1) contrast(1.05) brightness(0.9); transition: filter 0.4s; }
.cc-person:hover img { filter: grayscale(0); }
.cc-person b { display: block; margin-top: calc(14 * var(--k)); font-weight: 500; font-size: calc(14 * var(--k)); text-align: center; }
.cc-person span { display: block; font-size: calc(11 * var(--k)); color: var(--cc-dim); text-align: center; }
.cc-person--me img { filter: none; outline: calc(2 * var(--k)) solid var(--w-warm); outline-offset: calc(4 * var(--k)); }
.cc-person--me i { position: absolute; top: 0; right: 0; padding: calc(3 * var(--k)) calc(9 * var(--k)); border-radius: calc(20 * var(--k)); background: var(--cc-red); font-style: normal; font-weight: 600; font-size: calc(10 * var(--k)); }

/* 6. моя роль — список с тонкими разделителями */
.cc-role { padding-bottom: calc(140 * var(--k)) !important; }
.cc-list { margin: 0; padding: 0; list-style: none; }
.cc-list li { display: grid; grid-template-columns: calc(180 * var(--k)) 1fr; gap: calc(30 * var(--k)); padding: calc(18 * var(--k)) 0; border-top: 1px solid rgba(255, 255, 255, 0.1); }
.cc-list li:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.cc-list b { font-weight: 600; font-size: calc(15 * var(--k)); color: var(--w-warm); }
.cc-list span { font-weight: 300; font-size: calc(15 * var(--k)); line-height: 1.55; color: #dfe6f2; }
.cc-end { display: inline-block; margin-top: calc(50 * var(--k)); font-size: calc(13 * var(--k)); color: var(--cc-dim); text-decoration: none; transition: color 0.2s; }
.cc-end:hover { color: var(--w-warm); }

/* =====================================================================
   КИНОРЕЖИМ И ПОЯВЛЕНИЕ
   ===================================================================== */
.cc-cinema { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; background: rgba(5, 9, 18, 0.94); }
.cc-cinema[hidden] { display: none; }
.cc-cinema__box { width: min(90vw, 160vh); }
.cc-cinema__title { margin: 0 0 10px; color: var(--w-warm); font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: 0.08em; }
.cc-cinema video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #000; }
.cc-cinema__close { position: absolute; top: 20px; right: 24px; border: 0; background: none; color: #fff; font-size: 34px; line-height: 1; cursor: pointer; }

.cc-reveal { opacity: 0; transform: translateY(calc(26 * var(--k))); transition: opacity 0.6s ease, transform 0.7s cubic-bezier(.2, .7, .3, 1); }
.cc-reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .cc-reveal { opacity: 1; transform: none; transition: none; }
  .cc-tv__screen video, .cc-tv__noise, .cc-tv__roll { animation: none; }
}