/* ============================================================================
   «ВТОРОЙ ШАНС» — закрытый кинопоказ. Лендинг фонда «Второй шанс» × «Новые люди».
   Кинопремьерная тёмная эстетика: чёрный фон, зерно, бирюзовый сигнальный
   акцент, коралловый CTA, дисплейный шрифт Maler + Golos Text.
   3 экрана: постер → о фильме → регистрация.
   ========================================================================== */

/* --- Локальный дисплейный шрифт ------------------------------------------- */
@font-face {
  font-family: 'Maler';
  src: url('../fonts/Maler/Maler.woff2') format('woff2'),
       url('../fonts/Maler/Maler.woff')  format('woff'),
       url('../fonts/Maler/Maler.ttf')   format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* --- Токены ---------------------------------------------------------------- */
:root {
  --bg:        #05090a;   /* база (постер) */
  --bg-2:      #070d0e;   /* база (о фильме / регистрация) */
  --ink:       #edf3f2;   /* основной текст */
  --ink-bright:#f4f9f8;   /* яркий текст / заголовки */
  --teal:      #35d6d8;   /* сигнальный акцент */
  --coral:     #e64452;   /* CTA */
  --coral-hi:  #f4606d;   /* CTA hover */

  --display: 'Maler', 'Golos Text', 'Helvetica Neue', Arial, sans-serif;
  --body:    'Golos Text', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  --maxw:   1760px;
  --gutter: clamp(24px, 4.4vw, 80px);
  --gap:    28px;
}

/* --- База ------------------------------------------------------------------ */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); overflow-x: hidden; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--ink); text-decoration: none; transition: color .25s ease; }
a:hover { color: var(--teal); }
img { display: block; }
input, button { font-family: inherit; }
input::placeholder { color: rgba(237,243,242,0.3); }
::selection { background: var(--teal); color: #04100f; }

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
.grid12 {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gap);
}
.kicker {
  font-size: 11px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: rgba(237,243,242,0.38);
}
.rule { width: 64px; height: 1px; background: var(--teal); }

/* --- Анимации -------------------------------------------------------------- */
@keyframes riseIn   { from { opacity: 0; transform: translateY(0.22em) } to { opacity: 1; transform: translateY(0) } }
@keyframes fadeIn   { from { opacity: 0 } to { opacity: 1 } }
@keyframes ticker   { from { transform: translate3d(0,0,0) } to { transform: translate3d(-50%,0,0) } }
@keyframes breathe  { 0%,100% { opacity: .45; transform: rotate(9deg) scale(1) } 50% { opacity: .8; transform: rotate(9deg) scale(1.06) } }
@keyframes mouseBob { 0%,100% { transform: translateY(0); opacity: .75 } 50% { transform: translateY(7px); opacity: 1 } }
@keyframes gateFlicker { 0%,100% { opacity: .5 } 12% { opacity: .72 } 26% { opacity: .44 } 41% { opacity: .66 } 58% { opacity: .48 } 73% { opacity: .7 } 88% { opacity: .52 } }
@keyframes lightSweep { 0% { transform: translateX(-40%) rotate(9deg); opacity: 0 } 18% { opacity: .5 } 82% { opacity: .5 } 100% { transform: translateX(140%) rotate(9deg); opacity: 0 } }
@keyframes moteA { 0% { transform: translate3d(0,12vh,0); opacity: 0 } 14% { opacity: .55 } 86% { opacity: .4 } 100% { transform: translate3d(3vw,-52vh,0); opacity: 0 } }
@keyframes moteB { 0% { transform: translate3d(0,16vh,0); opacity: 0 } 18% { opacity: .42 } 84% { opacity: .3 } 100% { transform: translate3d(-2.4vw,-58vh,0); opacity: 0 } }

/* --- Прогресс-бар + зерно + стики-бар -------------------------------------- */
.progress-track {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 80;
  background: rgba(237,243,242,0.08);
}
.progress-fill {
  height: 100%; width: 100%; transform: scaleX(0); transform-origin: 0 50%;
  background: var(--teal);
}
.grain {
  position: fixed; inset: 0; z-index: 70; pointer-events: none; opacity: 0.26;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='200'%20height='200'%3E%3Cfilter%20id='n'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.9'%20numOctaves='2'%20stitchTiles='stitch'/%3E%3C/filter%3E%3Crect%20width='200'%20height='200'%20filter='url%28%23n%29'%20opacity='0.6'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}
.topbar {
  position: fixed; top: 2px; left: 0; right: 0; z-index: 65;
  opacity: 0; pointer-events: none; transition: opacity .45s ease;
  background: rgba(5,9,10,0.72);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(237,243,242,0.1);
}
.topbar.is-visible { opacity: 1; pointer-events: auto; }
.topbar .grid12 { align-items: center; padding: 14px var(--gutter); }
.topbar-logos { grid-column: span 5; display: flex; align-items: center; gap: 20px; }
.topbar-logos img { width: auto; filter: brightness(0) invert(1); }
.topbar-title {
  grid-column: span 4;
  font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase;
  color: rgba(237,243,242,0.5);
}
.topbar-cta { grid-column: span 3; display: flex; justify-content: flex-end; }
.topbar-cta a {
  padding: 12px 26px; border: 1px solid var(--coral); color: var(--coral);
  font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  transition: background .25s, color .25s;
}
.topbar-cta a:hover { background: var(--coral); color: #fff; }
.logo-sep { display: block; width: 1px; background: rgba(237,243,242,0.2); }

/* --- Кнопка CTA (коралл) --------------------------------------------------- */
.btn-cta {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 19px 40px; background: var(--coral); color: #fff;
  font-size: 13px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  border: none; cursor: pointer;
  transition: background .25s ease, transform .25s ease, box-shadow .25s ease;
}
.btn-cta:hover {
  background: var(--coral-hi); color: #fff; transform: translateY(-2px);
  box-shadow: 0 18px 44px rgba(230,68,82,0.34);
}
.btn-cta span { font-size: 15px; line-height: 1; }

/* ============================================================================
   ЭКРАН 01 — ПОСТЕР
   ========================================================================== */
.hero {
  position: relative; min-height: calc(100svh - 44px);
  display: flex; flex-direction: column; overflow: hidden; background: var(--bg);
}
.hero-hall {
  position: absolute; inset: 0; pointer-events: none;
  background-image: url(../img/hall.png);
  background-size: cover; background-position: center 66%; opacity: 1;
  /* обесцвечиваем зал → чёрно-серые кресла лучше видны, без зелёного оттенка */
  filter: grayscale(1) contrast(1.05) brightness(1.08);
}
.hero-veil {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(5,9,10,0.34) 0%, rgba(5,9,10,0.1) 30%, rgba(5,9,10,0.7) 80%, rgba(5,9,10,0.97) 100%);
}
/* «Экран» в зале — рамка кадра */
.hero-screen {
  display: none;
  position: absolute; left: 50%; top: clamp(90px,15svh,190px); transform: translateX(-50%);
  width: min(78vw, 1180px); z-index: 1; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 18%, rgba(0,0,0,1) 100%);
          mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 18%, rgba(0,0,0,1) 100%);
}
.hero-screen-inner {
  position: relative; aspect-ratio: 2.39/1; background: #0b1416;
  background-image: url(../img/cinema-hero.webp);
  background-size: cover; background-position: center;
  box-shadow: 0 0 130px 26px rgba(120,190,200,0.1), inset 0 0 90px rgba(0,0,0,0.7);
  overflow: hidden;
}
.hero-screen-stripe {
  position: absolute; inset: 0; display: flex; align-items: flex-start; padding: 14px 16px;
  background: repeating-linear-gradient(135deg, rgba(237,243,242,0.05) 0 10px, rgba(237,243,242,0) 10px 21px);
}
.hero-screen-stripe span {
  font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; color: rgba(237,243,242,0.3);
}
.hero-screen-flick {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(0,0,0,0.35));
  animation: gateFlicker 9s ease-in-out infinite;
}
/* Свечения */
.hero-glow-a {
  position: absolute; top: -34%; left: 38%; width: 86vw; height: 160vh; transform: rotate(9deg);
  background: radial-gradient(closest-side, rgba(53,214,216,0.05), rgba(53,214,216,0) 70%);
  animation: breathe 16s ease-in-out infinite; pointer-events: none;
}
.hero-glow-b {
  position: absolute; top: -14%; left: 50%; width: 56vw; height: 132vh; transform: translateX(-50%);
  background: conic-gradient(from 178deg at 50% 0%, rgba(255,255,255,0) 0deg, rgba(255,255,255,0.07) 8deg, rgba(255,255,255,0) 16deg);
  filter: blur(4px); pointer-events: none;
}
.hero-glow-c {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(150% 100% at 50% 0%, rgba(255,255,255,0.04), rgba(0,0,0,0) 52%),
              radial-gradient(110% 90% at 50% 108%, rgba(53,214,216,0.035), rgba(0,0,0,0) 60%);
}
.hero-vignette {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(110% 95% at 50% 45%, rgba(0,0,0,0) 40%, rgba(0,0,0,0.35) 78%, rgba(0,0,0,0.72) 100%);
}

/* Верхняя строка: логотипы + «по приглашениям» */
.hero-top {
  position: relative; z-index: 4; align-items: center;
  width: 100%; margin: 0 auto; padding: 34px var(--gutter) 0; max-width: var(--maxw);
}
.hero-top-logos {
  grid-column: span 7; display: flex; align-items: center; gap: 22px;
  animation: fadeIn 1s ease .1s both;
}
.hero-top-logos img { width: auto; filter: brightness(0) invert(1); }
.hero-top-logos .logo-np-box {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  height: 70px;

}
.hero-top-logos .logo-np { height: 100%; }
.hero-top-logos .logo-2s { height: 35px; }
.hero-top-logos .project-logo {
  height: 30px;
  max-width: 184px;
  object-fit: contain;
  filter: none;
}
.hero-top-note {
  grid-column: span 5; display: flex; justify-content: flex-end; align-items: center; gap: 18px;
  animation: fadeIn 1s ease .1s both;
}
.hero-top-note .dash { width: 60px; height: 1px; background: rgba(237,243,242,0.25); }
.hero-top-note span:last-child {
  font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; color: rgba(237,243,242,0.5);
}

/* Нижняя композиция */
.hero-body {
  position: relative; z-index: 3; flex: 1;
  display: flex; flex-direction: column; justify-content: flex-end;
  max-width: var(--maxw); width: 100%; margin: 0 auto;
  padding: 0 var(--gutter) clamp(22px,3vh,40px);
}
.hero-halo {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(58% 46% at 50% 40%, rgba(53,214,216,0.08) 0%, rgba(53,214,216,0.04) 45%, rgba(53,214,216,0.015) 70%, rgba(53,214,216,0) 88%);
  animation: gateFlicker 9s ease-in-out infinite;
}
.hero-sweep {
  position: absolute; top: -20%; left: 0; width: 34vw; height: 150%; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.05) 45%, rgba(255,255,255,0.07) 55%, rgba(255,255,255,0) 100%);
  filter: blur(16px); animation: lightSweep 26s ease-in-out infinite;
}
.hero-motes { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.hero-motes span { position: absolute; border-radius: 50%; }
.hero-motes span:nth-child(1){ left:16%; bottom:8%;  width:4px; height:4px; background:rgba(255,255,255,0.85); filter:blur(1px);   animation:moteA 26s linear -2s infinite; }
.hero-motes span:nth-child(2){ left:28%; bottom:2%;  width:3px; height:3px; background:rgba(53,214,216,0.9);  filter:blur(1px);   animation:moteB 34s linear -9s infinite; }
.hero-motes span:nth-child(3){ left:41%; bottom:12%; width:2px; height:2px; background:rgba(255,255,255,0.7);  filter:blur(0.6px); animation:moteA 30s linear -16s infinite; }
.hero-motes span:nth-child(4){ left:54%; bottom:0%;  width:5px; height:5px; background:rgba(255,255,255,0.6);  filter:blur(1.6px); animation:moteB 38s linear -4s infinite; }
.hero-motes span:nth-child(5){ left:67%; bottom:10%; width:3px; height:3px; background:rgba(53,214,216,0.8);  filter:blur(1px);   animation:moteA 32s linear -21s infinite; }
.hero-motes span:nth-child(6){ left:79%; bottom:4%;  width:4px; height:4px; background:rgba(255,255,255,0.7);  filter:blur(1.2px); animation:moteB 29s linear -13s infinite; }
.hero-motes span:nth-child(7){ left:88%; bottom:14%; width:2px; height:2px; background:rgba(255,255,255,0.6);  filter:blur(0.6px); animation:moteA 36s linear -7s infinite; }

/* Фото каста (поясной портрет двух героев, привязан к низу героя, ~85vh) */
.hero-cast-img {
  position: absolute; left: 0; right: 0; bottom: 0; top: 0; z-index: 1; pointer-events: none;
}
.hero-cast-img div {
  position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  height: 100%; display: flex; align-items: flex-end;
}
.hero-cast-img img {
  position: relative; height: 85vh; width: auto; max-width: none;
  object-fit: contain; object-position: bottom center;
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 78%, rgba(0,0,0,0.65) 90%, rgba(0,0,0,0.28) 98%, rgba(0,0,0,0) 100%);
          mask-image: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 78%, rgba(0,0,0,0.65) 90%, rgba(0,0,0,0.28) 98%, rgba(0,0,0,0) 100%);
}
.hero-cast-fade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to top, black, transparent);
  left: 50%;
  bottom: 0;
  width: 100vw;
  transform: translateX(-50%);
}

/* Основной грид героя (лид + мета) */
.hero-main {
  position: relative; z-index: 4; align-items: end; flex: 1;
  padding-bottom: clamp(18px,2.4vh,34px);
}
.hero-lead {
  grid-column: 1 / span 4; display: flex; align-items: flex-start; gap: clamp(16px,1.7vw,28px);
  animation: riseIn 1s cubic-bezier(.16,1,.3,1) .18s both;
}
.hero-lead-copy {
  display: flex; flex-direction: column; gap: clamp(14px,2vh,22px);
  min-width: 0;
}
.hero-lead-tag { display: flex; align-items: center; gap: 14px; }
.hero-lead-tag .tick { width: 44px; height: 1px; background: var(--teal); }
.hero-lead-tag span:last-child {
  font-size: 11px; letter-spacing: 0.4em; text-transform: uppercase; color: var(--teal); font-weight: 500;
}
.hero-lead p {
  margin: 0; font-size: clamp(15px,1.15vw,18px); line-height: 1.5;
  color: rgba(237,243,242,0.72); text-wrap: pretty;
}
.hero-lead svg { display: block; animation: mouseBob 2.2s ease-in-out infinite; }

.hero-meta {
  grid-column: 9 / span 4; display: flex; flex-direction: column; align-items: flex-end;
  gap: clamp(16px,2.2vh,26px); text-align: right;
  animation: riseIn 1s cubic-bezier(.16,1,.3,1) .3s both;
}
.hero-date { font-family: var(--display); text-transform: uppercase; letter-spacing: 0.03em; line-height: 0.92; }
.hero-date .d1 { font-size: clamp(30px,3.4vw,58px); color: var(--teal); }
.hero-date .d2 { font-size: clamp(19px,1.3vw,25px); color: #04100f; margin-top: 8px; display: inline-block; background: var(--teal); padding: 2px 14px 4px; border-radius: 6px; }
.hero-meta-times {
  display: flex; flex-direction: column; gap: 4px;
  font-family: var(--display); text-transform: uppercase;
  letter-spacing: 0.06em; font-size: clamp(13px,1.25vw,17px);
  color: rgba(237,243,242,0.82);
}
.hero-meta-times b { color: var(--teal); font-weight: 700; }
.hero-meta-note {
  max-width: 260px; font-size: 10px; line-height: 1.6; letter-spacing: 0.16em;
  text-transform: uppercase; color: rgba(237,243,242,0.42);
}
.hero-meta-note a {
  color: rgba(237,243,242,0.62); text-decoration: none;
  border-bottom: 1px solid rgba(53,214,216,0.4); transition: color .2s, border-color .2s;
}
.hero-meta-note a:hover { color: var(--teal); border-color: var(--teal); }
.hero-meta-limit { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(237,243,242,0.4); }

/* Тайтл ВТОРОЙ ШАНС */
.hero-title { position: relative; z-index: 3; }
.hero-title svg {
  display: block; width: 100%; height: auto; overflow: visible;
  filter: drop-shadow(0 30px 90px rgba(0,0,0,0.7));
  animation: riseIn 1.1s cubic-bezier(.16,1,.3,1) .22s both;
}

/* Каст-строка (3 имени) */
.hero-cast {
  position: relative; z-index: 4; align-items: center;
  margin-top: clamp(14px,2vh,24px); padding-top: 16px;
  border-top: 1px solid rgba(237,243,242,0.14);
  animation: fadeIn 1.1s ease .85s both;
}
.hero-cast-grid {
  grid-column: 1 / span 12; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--gap);
}
.hero-cast-grid .c-name { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-bright); }
.hero-cast-grid .c-role { margin-top: 5px; font-size: 10px; line-height: 1.5; color: rgba(237,243,242,0.45); }
.hero-cast-grid > div:nth-child(2) { text-align: right; }

/* --- Бегущая строка ------------------------------------------------------- */
.ticker {
  position: relative; z-index: 6; height: 44px; display: flex; align-items: center; overflow: hidden;
  border-top: 1px solid rgba(237,243,242,0.1); border-bottom: 1px solid rgba(237,243,242,0.1);
  background: var(--teal);
}
.ticker-track { display: flex; width: max-content; line-height: 1; animation: ticker 34s linear infinite; }
.ticker-group {
  display: flex; align-items: center; gap: 44px; padding-right: 44px;
  font-family: var(--display); font-size: 24px; letter-spacing: 0.06em; text-transform: uppercase;
  color: #04100f; white-space: nowrap;
}

/* ============================================================================
   ЭКРАН 02 — О ФИЛЬМЕ
   ========================================================================== */
.about {
  position: relative; background: var(--bg-2);
  padding: clamp(76px,8vh,112px) 0 clamp(56px,6vh,86px);
  overflow: hidden;
}
.about-aura {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(5,9,10,0.24), rgba(5,9,10,0.78)),
    radial-gradient(52% 48% at 8% 10%, rgba(53,214,216,0.16) 0%, rgba(53,214,216,0) 72%),
    radial-gradient(42% 38% at 84% 28%, rgba(53,214,216,0.11) 0%, rgba(53,214,216,0) 76%),
    radial-gradient(54% 48% at 42% 92%, rgba(230,68,82,0.08) 0%, rgba(230,68,82,0) 74%);
}
.about-layout {
  position: relative;
  align-items: start;
  row-gap: clamp(22px,2.4vw,38px);
}
.about-head {
  grid-column: 1 / span 5;
  grid-row: 1;
  position: relative; z-index: 5;
  padding-top: clamp(6px,1vw,18px);
}
.about-head h2 {
  margin: 24px 0 0;
  font-family: var(--display); font-weight: 400;
  font-size: clamp(42px,4.8vw,82px); line-height: 0.86;
  letter-spacing: 0.01em; text-transform: uppercase;
  color: var(--ink-bright); text-wrap: balance;
}
.about-head h2 span,
.about-head h2 em { display: block; font-style: normal; }
.about-head h2 em { color: var(--teal); }
.about-head p {
  margin: clamp(20px,2.2vw,34px) 0 0;
  max-width: 470px;
  font-size: clamp(15px,1.05vw,17px);
  line-height: 1.62;
  color: rgba(237,243,242,0.7);
}
.about-head-img {
  position: absolute;
  left: clamp(-130px,-5vw,-74px);
  top: calc(100% + clamp(74px,7vw,110px));
  z-index: 1;
  width: min(840px,58vw);
  max-width: none;
  height: clamp(230px,24vw,360px);
  margin: 0;
  pointer-events: none;
  transform: rotate(-7deg);
}
.about-film-strip-left {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left center;
  opacity: .92;
  filter: drop-shadow(0 28px 72px rgba(0,0,0,0.68));
  transform: scale(1.78);
  transform-origin: 18% 50%;
}
.about-visual {
  grid-column: 6 / span 7;
  grid-row: 1;
  position: relative; z-index: 2;
  min-height: clamp(500px,41vw,640px);
  margin-top: 0;
}
.about-film-main {
  position: absolute; right: -6%; top: -8%;
  width: min(830px,57vw); height: auto;
  opacity: .9;
  filter: drop-shadow(0 34px 92px rgba(0,0,0,0.74));
  transform: rotate(-1.2deg);
  z-index: 1;
}
.about-deco-fragment {
  position: absolute; right: -10%; bottom: -18%;
  width: min(700px,46vw); height: auto;
  opacity: .3; transform: rotate(18deg);
  pointer-events: none;
  filter: blur(.15px) drop-shadow(0 26px 80px rgba(0,0,0,.6));
}
.about-deco-strip {
  position: absolute; right: -7%; top: 8%;
  width: min(320px,22vw); height: auto;
  opacity: .38; transform: rotate(13deg);
  pointer-events: none;
  filter: drop-shadow(0 28px 80px rgba(0,0,0,.62));
}
.about-points {
  grid-column: 7 / span 5;
  grid-row: 2;
  position: relative; z-index: 8;
  display: flex;
  flex-direction: column;
  gap: clamp(26px,3vw,42px);
  margin-top: clamp(-28px,-1.8vw,-12px);
  padding-left: 0;
}
.about-point {
  border-left: 3px solid rgba(53,214,216,0.72);
  padding-left: clamp(22px,2vw,34px);
}
.about-point h3 {
  margin: 0;
  font-size: clamp(20px,1.55vw,28px); line-height: 1.12;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--teal);
}
.about-point p {
  margin: 14px 0 0;
  max-width: 540px;
  font-size: clamp(17px,1.2vw,21px); line-height: 1.5;
  color: rgba(237,243,242,0.72);
}
.about-quote {
  grid-column: 1 / span 12;
  position: relative;
  z-index: 5;
  margin: clamp(38px,7vw,82px) 0 0;
  padding-top: 0;
  border-top: none;
}
.about-quote div {
  font-family: var(--display);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--ink-bright);
  text-wrap: balance;
}
.quote-over {
  display: block;
  font-size: clamp(38px,5vw,86px);
  line-height: .78;
  color: var(--ink-bright);
}
.quote-main {
  display: block;
  margin-top: -.16em;
  padding-left: clamp(88px,10vw,190px);
  font-size: clamp(58px,7.8vw,132px);
  line-height: .76;
  color: var(--teal);
}

/* ============================================================================
   ЭКРАН 03 — РЕГИСТРАЦИЯ
   ========================================================================== */
.reg {
  position: relative; background: var(--bg-2);
  padding: clamp(90px,11vh,150px) 0 clamp(50px,6vh,80px);
  border-top: 1px solid rgba(237,243,242,0.08); overflow: hidden;
}
.reg-glow {
  position: absolute; bottom: -40%; left: -10%; width: 60vw; height: 110vh; pointer-events: none;
  background: radial-gradient(closest-side, rgba(53,214,216,0.13), rgba(53,214,216,0) 70%);
}
.reg-grid { position: relative; }
.reg-head { grid-column: 1 / span 5; }
.reg-head h2 {
  margin: 26px 0 0; font-family: var(--display); font-weight: 400;
  font-size: clamp(36px,4.2vw,76px); line-height: 0.9; letter-spacing: 0.01em;
  text-transform: uppercase; color: var(--ink-bright);
}
.reg-head p {
  margin: 28px 0 0; max-width: 400px; font-size: clamp(15px,1.15vw,17px); line-height: 1.6;
  color: rgba(237,243,242,0.62);
}
.reg-head-logos { margin-top: clamp(36px,5vh,64px); display: flex; align-items: center; gap: 22px; }
.reg-head-logos img { width: auto; opacity: .72; filter: brightness(0) invert(1); }
.reg-form-col { grid-column: 7 / span 6; }

/* Форма */
.reg-form { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; }
.tf-field {
  display: block; padding: 22px 0 14px; border-bottom: 1px solid rgba(237,243,242,0.18);
}
.tf-field.col2 { grid-column: span 2; }
.tf-field.col1 { grid-column: span 1; }
.tf-label {
  display: block; font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase;
  color: rgba(237,243,242,0.4); margin-bottom: 10px;
}
.tf-field input {
  width: 100%; padding: 0; background: transparent; border: none;
  color: var(--ink); font-size: 18px; outline: none;
}
/* honeypot */
/* Honeypot: display:none, чтобы автозаполнение браузера (Chrome/Safari) НЕ вписывало
   в него данные профиля. Off-screen-поля (left:-9999px/opacity:0) автозаполнение
   заполняет — тогда сервер принимал заявку за бота и молча отбрасывал её.
   Наивные спам-боты заполняют все input по HTML, игнорируя CSS, — ловушка работает. */
.tf-hp {
  display: none !important;
}
/* согласие */
.tf-consent {
  grid-column: span 2; display: flex; align-items: flex-start; gap: 14px; margin-top: 26px;
  cursor: pointer; user-select: none;
}
.tf-consent input { position: absolute; opacity: 0; width: 0; height: 0; }
.tf-consent .box {
  flex: none; width: 20px; height: 20px; margin-top: 1px;
  border: 1px solid rgba(237,243,242,0.34); display: flex; align-items: center; justify-content: center;
}
.tf-consent .box::after {
  content: ''; width: 10px; height: 10px; background: var(--teal); transform: scale(0); transition: transform .15s ease;
}
.tf-consent input:checked + .box::after { transform: scale(1); }
.tf-consent input:focus-visible + .box { outline: 2px solid var(--teal); outline-offset: 2px; }
.tf-consent span.txt { font-size: 14px; line-height: 1.45; color: rgba(237,243,242,0.6); }
.tf-consent a { color: rgba(237,243,242,0.85); text-decoration: underline; }

.tf-error { grid-column: span 2; margin-top: 16px; font-size: 13px; line-height: 1.4; color: #ff8b6b; }

.reg-submit {
  grid-column: span 2; margin-top: 34px; padding: 24px 40px; background: var(--coral); border: none;
  color: #fff; font-size: 14px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  cursor: pointer; transition: background .25s ease, box-shadow .25s ease;
}
.reg-submit:hover { background: var(--coral-hi); box-shadow: 0 18px 44px rgba(230,68,82,0.3); }
.reg-submit:disabled { opacity: .5; cursor: not-allowed; }

/* Успех */
.reg-done {
  padding: clamp(40px,5vw,64px); border: 1px solid rgba(53,214,216,0.4); background: rgba(53,214,216,0.06);
}
.reg-done h3 {
  margin: 0 0 22px; font-family: var(--display); font-weight: 400;
  font-size: clamp(32px,3vw,48px); line-height: 1; text-transform: uppercase; color: var(--teal);
}
.reg-done p { margin: 0; font-size: 17px; line-height: 1.6; color: rgba(237,243,242,0.78); }
[hidden] { display: none !important; }

/* Подвал регистрации */
.reg-foot {
  position: relative; align-items: center;
  margin-top: clamp(70px,9vh,120px); padding-top: 26px;
  border-top: 1px solid rgba(237,243,242,0.1);
}
.reg-foot .f-left {
  grid-column: 1 / span 6; display: flex; flex-wrap: wrap;
  font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(237,243,242,0.34);
}
.reg-foot .f-left > span:not(:last-child)::after { content: " · "; white-space: pre; }
.reg-foot .f-right {
  grid-column: 9 / span 4; text-align: right; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(237,243,242,0.34);
}

/* --- Reveal-анимация ------------------------------------------------------- */
[data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1); }
[data-reveal].is-in { opacity: 1; transform: translateY(0); }

/* ============================================================================
   АДАПТИВ
   ========================================================================== */
@media (max-width: 1100px) {
  .hero-top-logos { grid-column: span 8; gap: 18px; }
  .hero-top-note { grid-column: span 4; }
  .hero-top-note .dash { width: 36px; }
  .hero-lead { grid-column: 1 / span 6; }
  .hero-meta { grid-column: 7 / span 6; }
  .about-head { grid-column: 1 / span 12; }
  .about-head p { max-width: 640px; }
  .about-head-img {
    left: clamp(-18px,4vw,42px);
    top: calc(100% + 42px);
    width: min(760px,82vw);
    height: clamp(190px,27vw,300px);
  }
  .about-film-strip-left { transform: scale(1.55); }
  .about-visual {
    grid-column: 1 / span 12;
    grid-row: auto;
    min-height: clamp(500px,58vw,680px);
    margin-top: 18px;
  }
  .about-film-main { right: -4%; top: 0; width: min(880px,88vw); }
  .about-points {
    grid-column: 1 / span 12;
    grid-row: auto;
    display: grid;
    margin-top: 18px;
    padding-left: 0;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: clamp(18px,2vw,28px);
  }
  .about-quote { grid-column: 1 / span 12; }
  .reg-head { grid-column: 1 / span 12; }
  .reg-form-col { grid-column: 1 / span 12; margin-top: 48px; }
}

@media (max-width: 720px) {
  :root { --gap: 16px; }
  .topbar-logos { grid-column: span 8; gap: 14px; }
  .topbar-title { display: none; }
  .topbar-cta { grid-column: span 4; }

  .hero { min-height: 0; }
  .hero-top { padding-top: 22px; }
  .hero-top-logos {
    grid-column: 1 / span 12;
    justify-content: center;
    gap: 12px;
  }
  .hero-top-logos .logo-np-box { height: 38px; padding: 7px 9px; border-radius: 9px; }
  .hero-top-logos .logo-2s { height: 27px; }
  .hero-top-logos .logo-sep { height: 22px !important; }
  .hero-top-logos .project-logo {
    height: 23px;
    max-width: 116px;
  }
  .hero-top-note { display: none; }

  .hero-body {
    flex: none;
    justify-content: flex-start;
    padding-top: 24px;
    padding-bottom: 18px;
  }
  .hero-main,
  .hero-meta {
    display: contents;
  }
  .hero-date {
    position: relative;
    z-index: 4;
    order: 1;
    margin-bottom: 10px;
    text-align: center;
  }
  .hero-date .d1 { font-size: 28px; }
  .hero-date .d2 { font-size: 21px; margin-top: 4px; }
  .hero-meta-times {
    position: relative;
    z-index: 4;
    order: 1;
    align-items: center;
    margin-bottom: 8px;
    font-size: 15px;
    text-align: center;
  }
  .hero-meta-note {
    position: relative;
    z-index: 4;
    order: 2;
    max-width: none;
    margin-bottom: 18px;
    font-size: 9px;
    line-height: 1.5;
    text-align: left;
  }
  .hero-lead {
    position: relative;
    z-index: 4;
    grid-column: 1 / -1;
    order: 3;
    justify-content: center;
    margin-bottom: 18px;
    text-align: center;
  }
  .hero-lead-copy { gap: 10px; }
  .hero-lead-tag { justify-content: center; }
  .hero-lead-tag .tick { display: none; }
  .hero-lead-tag span:last-child { font-size: 10px; }
  .hero-lead p { font-size: 14px; line-height: 1.45; }
  .hero-lead svg { display: none; }

  .hero-cast-img {
    position: relative;
    inset: auto;
    z-index: 3;
    order: 4;
    width: 100%;
    margin-bottom: 10px;
  }
  .hero-cast-img div {
    position: relative;
    left: auto;
    bottom: auto;
    transform: none;
    height: auto;
    display: block;
  }
  .hero-cast-img img {
    width: 100%;
    height: auto;
    max-width: min(560px, 57svh);
    margin: 0 auto;
    opacity: .9;
  }
  .hero-cast-fade { display: none; }

  .hero-title {
    order: 5;
    z-index: 4;
    margin-top: 4px;
  }
  .hero-cast {
    order: 6;
    width: 100%;
    margin-bottom: 20px;
  }

  .hero-cast-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
  .hero-cast-grid > div:nth-child(2) { text-align: right; }
  .hero-cast-grid .c-name { font-size: 11px; line-height: 1.25; }
  .hero-cast-grid .c-role { font-size: 9px; line-height: 1.4; }

  .hero-meta > .btn-cta,
  .hero-body > .btn-cta {
    position: relative;
    z-index: 4;
    order: 7;
    width: 100%;
    justify-content: center;
  }
  .hero-meta-limit {
    position: relative;
    z-index: 4;
    order: 8;
    align-self: center;
    margin-top: 12px;
    text-align: center;
  }

  @media (max-height: 760px) {
    .hero-body { padding-top: 18px; }
    .hero-meta-note { display: none; }
    .hero-lead { margin-bottom: 12px; }
    .hero-lead p { font-size: 13px; }
    .hero-cast-img img { width: 86%; }
    .hero-cast { margin-top: 8px; margin-bottom: 14px; padding-top: 12px; }
    .btn-cta {
      padding-top: 16px;
      padding-bottom: 16px;
      font-size: 11px;
    }
  }

  .ticker-group { font-size: 18px; gap: 30px; padding-right: 30px; }

  .about { padding-top: 72px; }
  .about-head h2 { font-size: clamp(34px,10.8vw,52px); }
  .about-head-img {
    position: relative;
    left: auto;
    top: auto;
    width: min(520px, 135vw);
    height: clamp(145px, 60vw, 190px);
    margin-top: 26px;
    margin-left: 19%;
    transform: rotate(-5.5deg);
  }
  .about-film-strip-left { transform: scale(1.42); }
  .about-visual {
    min-height: clamp(285px, 75vw, 340px);
    margin-top: -40px;
  }
  .about-film-main {
    right: -24%;
    top: -21px;
    width: min(560px,132vw);
  }
  .about-deco-fragment {
    right: -42%;
    bottom: -12%;
    width: min(430px,84vw);
    opacity: .2;
  }
  .about-deco-strip {
    right: -28%;
    top: 14%;
    width: min(230px,52vw);
    opacity: .22;
  }
  .about-points {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 24px;
  }
  .about-quote { margin-top: 44px; }
  .quote-over { font-size: clamp(34px,13vw,58px); }
  .quote-main {
    padding-left: 0;
    font-size: clamp(50px,17vw,76px);
  }

  .reg-form { grid-template-columns: 1fr; gap: 0; }
  .tf-field.col1, .tf-field.col2 { grid-column: 1 / -1; }
  .tf-consent, .reg-submit, .tf-error { grid-column: 1 / -1; }
  .reg-foot .f-left {
    grid-column: 1 / span 12;
    flex-direction: column;
    gap: 6px;
  }
  .reg-foot .f-left > span::after { display: none; }
  .reg-foot .f-right { grid-column: 1 / span 12; text-align: left; margin-top: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
  html { scroll-behavior: auto; }
  [data-reveal] { opacity: 1; transform: none; }
}