:root {
  --ink: #160818;
  --cream: #fff3df;
  --orange: #ff7a1a;
  --frame: #1b0d26;
  --u: min(1vw, 1.75vh);
  --head: 'Oswald', 'Arial Narrow', Impact, sans-serif;
  --display: 'Alumni Sans', 'Oswald', Impact, sans-serif;
  --wide: 'Unbounded', 'Arial Black', sans-serif;
  --body: 'Manrope', system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--ink); color: var(--cream); font: 16px/1.5 var(--body); overflow-x: hidden; }
img { -webkit-user-drag: none; user-select: none; }

/* ============ HERO ============ */
.hero { position: relative; width: 100%; height: 100vh; height: 100svh; min-height: 600px; overflow: hidden; background: var(--frame); isolation: isolate; }

.hero__loader { position: absolute; inset: 0; z-index: 50; display: grid; place-items: center; background: var(--ink); font: 900 24px var(--wide); letter-spacing: .04em; pointer-events: none; }
.hero__loader b { color: var(--orange); }
.hero__loader span { animation: pulse 1s ease-in-out infinite alternate; }
@keyframes pulse { from { opacity: .35; } to { opacity: 1; } }

/* ---- фаза 1: сцена ---- */
.scene { position: absolute; inset: 0; z-index: 1; }
.scene__bg { position: absolute; inset: -4%; background: #f7a35a url('assets/scene/bg.webp') center 60% / cover no-repeat; will-change: transform; }
.scene__shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(40, 8, 50, .55) 0%, rgba(40, 8, 50, .25) 38%, transparent 60%), linear-gradient(0deg, rgba(30, 6, 40, .55), transparent 30%); }
.actor { position: absolute; will-change: transform; }
.actor img { display: block; width: 100%; height: 100%; object-fit: contain; }
.actor--courier { left: 44%; bottom: 0; height: 94%; aspect-ratio: 673 / 1200; z-index: 1; }
.actor--courier img { object-position: bottom; filter: drop-shadow(0 20px 30px rgba(40, 0, 40, .35)); }
.actor--girl { left: 63%; bottom: 0; height: 86%; aspect-ratio: 558 / 1200; z-index: 2; }
.actor--girl img { object-position: bottom; filter: drop-shadow(0 20px 30px rgba(40, 0, 40, .35)); }
.actor--car { left: 39%; bottom: -6%; width: 56%; aspect-ratio: 1300 / 775; z-index: 3; cursor: pointer; }
.actor--car img { filter: drop-shadow(0 30px 30px rgba(20, 0, 30, .55)); }
.car__light { position: absolute; width: 16%; aspect-ratio: 1; border-radius: 50%; opacity: 0; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(circle, rgba(255, 245, 220, 1) 0, rgba(255, 220, 160, .55) 22%, transparent 62%); }
.car__light--l { left: 1%; top: 26%; }
.car__light--r { left: 32%; top: 27%; }

/* ---- фаза 2: плитка ---- */
.mosaic { position: absolute; inset: 0; z-index: 2; visibility: hidden; background: var(--frame); --gap: 0px; }
.mosaic.is-on { visibility: visible; }
.tile { position: absolute; }
.tile__in { position: absolute; inset: var(--gap); overflow: hidden; background: #2a1036; transition: filter .25s; }
.tile:hover .tile__in { filter: brightness(1.12) saturate(1.1); }
.tile__layer { position: absolute; inset: 0; overflow: hidden; will-change: transform; }
.tile__img { position: absolute; inset: 0; background-repeat: no-repeat; background-size: cover; transform-origin: var(--o, 50% 50%); animation: kb var(--kb, 10s) ease-in-out infinite alternate; }
@keyframes kb { from { transform: scale(var(--z, 1)); } to { transform: scale(calc(var(--z, 1) * 1.09)) translate(var(--dx, 1%), var(--dy, -1%)); } }
.tile__seam { position: absolute; inset: 0; background-repeat: no-repeat; }
.tile__cut { position: absolute; left: 50%; bottom: 0; height: 104%; width: auto; max-width: none; translate: -50% 0; filter: drop-shadow(0 10px 18px rgba(30, 0, 40, .45)); }
.tile__cut--car { height: auto; width: 118%; bottom: -12%; }
.tile__sign {
  position: absolute; left: 8%; bottom: 8%; padding: .5em .8em .45em; background: #120812; color: #ffd60a;
  font: 900 calc(var(--u) * .95) / 1 var(--wide); letter-spacing: .02em; text-transform: uppercase; white-space: nowrap;
  box-shadow: .18em .2em 0 #ffd60a;
}
.tile__prize { position: absolute; inset: 0; display: grid; place-items: center; background: radial-gradient(70% 70% at 50% 45%, #ff5fa0, #7b2bd0 60%, #2a0f4a); }
.tile__prize .box, .tile__prize .phone { position: relative; inset: auto; height: 62%; width: auto; aspect-ratio: .8; }
.tile__prize .phone { aspect-ratio: .52; rotate: 10deg; }

/* PS5 / iPhone, нарисованные кодом (в плитке с призом) */
.box { border-radius: 6%; overflow: hidden; background: linear-gradient(135deg, #3d78ff, #1238c9 60%, #0b237f); padding: 4%; box-shadow: 0 0 0 1px rgba(255, 255, 255, .35) inset, 0 .6em 1.4em rgba(20, 0, 60, .55); font-size: calc(var(--u) * .7); }
.box__top { height: 15%; background: #f4f4f8; display: flex; align-items: center; padding-left: 8%; color: #111; font: 700 1.5em/1 var(--body); }
.box__art { position: relative; height: 85%; overflow: hidden; background: linear-gradient(180deg, rgba(60, 10, 90, .1), rgba(255, 60, 140, .35) 60%, rgba(40, 0, 60, .8)), url('assets/scene/bg-sm.webp') 30% 60% / cover; }
.box__logo { position: absolute; left: 0; right: 0; top: 30%; text-align: center; font: 900 2.4em/.85 var(--display); color: #fff; text-shadow: 0 .08em 0 #3a0b45; }
.box__logo b { display: block; font-size: 2.2em; background: linear-gradient(180deg, #ff9bd2, #ff3d8b 45%, #6a7bff); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; }
.phone { border-radius: 16% / 8%; background: linear-gradient(120deg, #fdfdff 0%, #d7d9e2 35%, #f7f7fb 55%, #b9bcc8 100%); box-shadow: 0 0 0 2px #8d909c inset, 0 0 0 3.5px #e9eaf0 inset, 0 .8em 1.6em rgba(20, 0, 60, .55); }
.phone__cam { position: absolute; left: 12%; top: 6%; width: 34%; height: 34%; border-radius: 30%; background: linear-gradient(135deg, #f2f2f6, #c9cbd4); box-shadow: 0 0 0 1px #9da0ab; }
.phone__cam i { position: absolute; left: 14%; width: 72%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #5a5f8a 0 12%, #0d0e16 30%, #000 62%, #3b3d48 66%, #d9dbe2 72%); }
.phone__cam i:first-child { top: 4%; } .phone__cam i:last-child { bottom: 4%; }

/* ---- оффер (как логотип GTA) ---- */
.offer-wrap { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: flex-start; padding: 0 0 0 4%; pointer-events: none; }
.offer-wrap.is-center { justify-content: center; padding: 0; }
.offer {
  position: relative; pointer-events: auto;
  width: calc(var(--u) * 46); display: flex; flex-direction: column; align-items: center; text-align: center; will-change: transform;
}
.offer::before {
  content: ''; position: absolute; inset: -18% -22%; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .8s;
  background: radial-gradient(closest-side, rgba(22, 6, 32, .82), rgba(22, 6, 32, .5) 60%, transparent);
}
.offer-wrap.is-center .offer::before { opacity: 1; }
.logo { margin: 0; display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * .5); font-family: var(--wide); font-weight: 900; text-transform: uppercase; line-height: .92; letter-spacing: -.01em; }
.lg { position: relative; display: block; white-space: nowrap; }
.lg .ch { display: inline-block; will-change: transform; }
.lg--solid { font-size: calc(var(--u) * 4.2); color: #fff; text-shadow: .045em .06em 0 #1a0620, 0 0 .4em rgba(20, 0, 30, .5); }
.lg--big { font-size: calc(var(--u) * 8.2); line-height: .86; }
/* глитч: два цветных дубля строки режутся полосами */
.lg--solid::before, .lg--solid::after {
  content: attr(data-t); position: absolute; inset: 0; pointer-events: none; opacity: 0; text-shadow: none;
}
.lg--solid::before { color: #ff2bd6; }
.lg--solid::after { color: #00e5ff; }
.lg--solid.is-glitch::before { opacity: .9; animation: gl1 .32s steps(2) 1; }
.lg--solid.is-glitch::after { opacity: .9; animation: gl2 .32s steps(2) 1; }
@keyframes gl1 { 0% { clip-path: inset(10% 0 60% 0); transform: translate(-.06em, 0); } 50% { clip-path: inset(55% 0 20% 0); transform: translate(.05em, 0); } 100% { clip-path: inset(80% 0 5% 0); transform: translate(-.03em, 0); } }
@keyframes gl2 { 0% { clip-path: inset(65% 0 10% 0); transform: translate(.06em, 0); } 50% { clip-path: inset(20% 0 55% 0); transform: translate(-.05em, 0); } 100% { clip-path: inset(5% 0 80% 0); transform: translate(.03em, 0); } }

/* наклейка */
.lg--sticker { font-size: calc(var(--u) * 3.9); margin: calc(var(--u) * .4) 0; }
.lg--sticker b {
  position: relative; display: inline-block; padding: .14em .42em .1em; font-weight: 900; color: #120812; text-transform: none;
  background: #ffd60a; border: .06em solid #120812; border-radius: .08em;
  box-shadow: .1em .12em 0 #120812, 0 .4em 1em rgba(20, 0, 30, .45);
}
.lg--sticker b { overflow: hidden; }
.lg--sticker b::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 45%; background: linear-gradient(110deg, transparent, rgba(255, 255, 255, .7) 50%, transparent); transform: translateX(-120%); animation: sheen 3.4s ease-in-out 2.5s infinite; mix-blend-mode: soft-light; pointer-events: none; }
@keyframes sheen { 0%, 60% { transform: translateX(-120%); } 100% { transform: translateX(260%); } }

/* контурное слово (SVG рисуется в JS) */
.lg--outline { font-size: calc(var(--u) * 5.8); height: .95em; }
.lg--outline svg { display: block; height: 100%; width: auto; overflow: visible; filter: drop-shadow(.04em .05em 0 rgba(26, 6, 32, .9)); }
.lg--outline text { font-family: var(--wide); font-weight: 900; fill: none; stroke-linejoin: round; }
.lg--outline .o1 { stroke: #fff; stroke-width: 7; }
.lg--outline .o2 { stroke: #2a0b33; stroke-width: 2.6; }

/* полоска «опасно» над логотипом */
.hazard { display: flex; align-items: center; gap: .6em; width: 100%; margin-bottom: calc(var(--u) * 1); font: 700 calc(var(--u) * .85) / 1 var(--wide); letter-spacing: .04em; color: #ffd60a; }
.hazard i { flex: 1; height: 1.6em; background: repeating-linear-gradient(-45deg, #ffd60a 0 .6em, #120812 .6em 1.2em); box-shadow: 0 0 0 2px #120812; border-radius: 2px; }
.hazard span { padding: .45em .8em; background: #120812; white-space: nowrap; }

/* ленты */
.tape { position: absolute; z-index: 4; left: -10%; width: 120%; height: calc(var(--u) * 3); display: flex; align-items: center; overflow: hidden; pointer-events: none;
  background: #ffd60a; color: #120812; box-shadow: 0 .4em 1.2em rgba(10, 0, 20, .5); border-block: calc(var(--u) * .35) solid #120812; visibility: hidden; }
.tape--a { bottom: 1.5%; rotate: -2deg; }
.tape--b { top: 12%; rotate: 4deg; background: #120812; color: #ffd60a; border-color: #ffd60a; }
.tape--stripes { bottom: 24%; left: -6%; width: 30%; rotate: 9deg; height: calc(var(--u) * 2); background: repeating-linear-gradient(-45deg, #ffd60a 0 calc(var(--u) * 1.2), #120812 calc(var(--u) * 1.2) calc(var(--u) * 2.4)); animation: stripes 1.2s linear infinite; }
@keyframes stripes { to { background-position: calc(var(--u) * 3.4) 0; } }
.tape__track { display: flex; white-space: nowrap; animation: marquee 18s linear infinite; font: 900 calc(var(--u) * 1.35) / 1 var(--wide); letter-spacing: .04em; }
.tape--b .tape__track { animation-direction: reverse; animation-duration: 22s; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* HUD видоискателя */
.hud { position: absolute; inset: 14px; z-index: 7; pointer-events: none; font: 700 10px/1 var(--wide); letter-spacing: .06em; color: #fff; text-shadow: 0 1px 4px rgba(0, 0, 0, .7); }
.hud__c { position: absolute; width: 34px; height: 34px; border: 3px solid rgba(255, 255, 255, .9); }
.hud__c--tl { left: 0; top: 0; border-right: 0; border-bottom: 0; }
.hud__c--tr { right: 0; top: 0; border-left: 0; border-bottom: 0; }
.hud__c--bl { left: 0; bottom: 0; border-right: 0; border-top: 0; }
.hud__c--br { right: 0; bottom: 0; border-left: 0; border-top: 0; }
.hud__rec { position: absolute; left: 46px; bottom: 10px; display: flex; align-items: center; gap: 8px; }
.hud__rec b { width: 10px; height: 10px; border-radius: 50%; background: #ff2b3a; box-shadow: 0 0 8px #ff2b3a; animation: rec 1s steps(1) infinite; }
.hud__rec em { font-style: normal; font-variant-numeric: tabular-nums; }
@keyframes rec { 50% { opacity: .15; } }
.hud__meta { position: absolute; right: 46px; bottom: 10px; }

.sub { margin: calc(var(--u) * 1.4) 0 0; font: 700 calc(var(--u) * 1.6) / 1.25 var(--body); color: #fff; text-shadow: 0 2px 0 #1f0626, 0 0 14px rgba(20, 0, 30, .9); }
.cta {
  position: relative; margin-top: calc(var(--u) * 2); display: inline-flex; align-items: center; gap: .8em; padding: 1em 1.8em .95em; border-radius: .2em; overflow: hidden;
  font: 900 calc(var(--u) * 1.3) / 1 var(--wide); letter-spacing: .01em; text-transform: uppercase; color: #120812; text-decoration: none;
  background: #ffd60a; border: .14em solid #120812; box-shadow: .22em .26em 0 #120812; will-change: transform; transition: box-shadow .15s, translate .15s;
}
.cta:hover { box-shadow: .12em .14em 0 #120812; translate: .1em .12em; }
.cta svg { width: 1.3em; height: 1.3em; transition: transform .25s; }
.cta:hover svg { transform: translateX(.3em); }
.cta::after { content: ''; position: absolute; top: 0; bottom: 0; width: 40%; left: 0; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .65), transparent); transform: translateX(-150%); animation: shine 3.2s ease-in-out 1s infinite; pointer-events: none; }
@keyframes shine { 0%, 62% { transform: translateX(-150%); } 100% { transform: translateX(330%); } }

.countdown { margin-top: calc(var(--u) * 1.8); display: flex; align-items: center; gap: .8em; font: 700 calc(var(--u) * .95) / 1 var(--wide); text-transform: uppercase; letter-spacing: .04em; color: #fff; text-shadow: 0 2px 10px rgba(40, 0, 50, .9); }
.countdown__cells { display: inline-flex; align-items: baseline; gap: .2em; }
.countdown b { display: inline-block; min-width: 1.9em; padding: .35em .3em; border-radius: .2em; background: #120812; color: #fff; font-size: 1.3em; text-align: center; font-variant-numeric: tabular-nums; box-shadow: 0 0 0 1px rgba(255, 255, 255, .15) inset; }
.countdown i { font-style: normal; opacity: .8; }

/* ---- спонсоры ---- */
.sponsors { margin-top: calc(var(--u) * 1.6); display: flex; align-items: center; gap: calc(var(--u) * .9); }
.sponsors__label { font: 700 calc(var(--u) * .8) / 1.15 var(--wide); text-transform: uppercase; letter-spacing: .04em; color: #fff; text-align: right; white-space: nowrap; flex: none; text-shadow: 0 2px 8px rgba(20, 0, 30, .9); }
.sp { width: calc(var(--u) * 4.6); height: auto; display: block; filter: drop-shadow(.15em .2em 0 rgba(18, 8, 18, .85)); cursor: pointer; will-change: transform; }
.tile__sponsor { position: absolute; inset: 0; display: grid; place-items: center; background: var(--c, #4a12a8); }
.tile__sponsor img { width: min(62%, 70vh); max-height: 78%; object-fit: contain; filter: drop-shadow(0 .6em 1.2em rgba(10, 0, 20, .45)); }
.tile__sponsor::before { content: 'СПОНСОР РОЗЫГРЫША'; position: absolute; left: 8%; top: 8%; padding: .5em .8em .45em; background: #120812; color: #ffd60a; font: 900 calc(var(--u) * .8) / 1 var(--wide); box-shadow: .18em .2em 0 #ffd60a; }

/* ---- эффекты ---- */
.fx-vignette { position: absolute; inset: 0; z-index: 6; pointer-events: none; background: radial-gradient(130% 100% at 50% 45%, transparent 65%, rgba(10, 0, 16, .35) 100%); }
.fx-flash { position: absolute; inset: 0; z-index: 8; pointer-events: none; background: #fff; opacity: 0; }

/* ---- навигация ---- */
.nav { position: absolute; top: 0; left: 0; right: 0; z-index: 10; display: flex; align-items: center; gap: 32px; padding: 20px 32px; }
.nav__logo { font: 900 18px var(--wide); letter-spacing: .02em; color: var(--cream); text-decoration: none; text-shadow: 0 2px 10px rgba(0, 0, 0, .6); }
.nav__logo b { color: #ffd60a; font-weight: 900; }
.nav__links { margin-left: auto; display: flex; gap: 32px; }
.nav__links a { font: 700 13px var(--wide); letter-spacing: .04em; text-transform: uppercase; color: #fff; text-decoration: none; text-shadow: 0 2px 10px rgba(0, 0, 0, .7); position: relative; }
.nav__links a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -5px; height: 3px; background: #ffd60a; transform: scaleX(0); transition: transform .25s; transform-origin: left; }
.nav__links a:hover::after { transform: scaleX(1); }
.sound { display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px 9px 12px; border-radius: 999px; cursor: pointer; border: 0; background: rgba(18, 8, 18, .7); color: #fff; font: 700 11px var(--wide); letter-spacing: .04em; text-transform: uppercase; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .25) inset; position: relative; }
.sound::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 1.5px #ffd60a inset, 0 0 16px rgba(255, 214, 10, .5); opacity: 0; animation: soundCall 1.6s ease-in-out infinite; pointer-events: none; }
.sound[aria-pressed="true"] { box-shadow: 0 0 0 1.5px #ffd60a inset; }
.sound[aria-pressed="true"]::after { animation: none; }
@keyframes soundCall { 50% { opacity: 1; } }
.sound__bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.sound__bars i { width: 3px; height: 3px; border-radius: 2px; background: currentColor; }
.sound[aria-pressed="true"] .sound__bars i { animation: eq .9s ease-in-out infinite alternate; }
.sound[aria-pressed="true"] .sound__bars i:nth-child(2) { animation-delay: -.3s; }
.sound[aria-pressed="true"] .sound__bars i:nth-child(3) { animation-delay: -.6s; }
.sound[aria-pressed="true"] .sound__bars i:nth-child(4) { animation-delay: -.15s; }
@keyframes eq { from { height: 3px; } to { height: 14px; } }

/* общие для других экранов */
.char { display: block; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .3s; }
.char.is-loaded { opacity: 1; }
@keyframes twinkle { from { opacity: .15; } to { opacity: 1; } }
@keyframes sway { from { transform: rotate(calc(var(--a, 1.2deg) * -1)); } to { transform: rotate(var(--a, 1.2deg)); } }
.foot { padding: 28px 16px; text-align: center; font-size: 12px; color: rgba(255, 243, 223, .45); background: var(--ink); }

/* ============ портрет / телефоны ============ */
@media (max-aspect-ratio: 4/5) {
  :root { --u: min(2.05vw, 1.12vh); }
  .scene__bg { background-image: url('assets/scene/bg-tall.webp'); background-position: 50% 100%; }
  .scene__shade { background: linear-gradient(180deg, rgba(30, 6, 36, .6), rgba(30, 6, 36, .15) 45%, transparent 60%), linear-gradient(0deg, rgba(30, 6, 40, .5), transparent 25%); }
  .nav { padding: 14px 16px; gap: 12px; }
  .nav__logo { font-size: 15px; }
  .nav__links { display: none; }
  .sound { margin-left: auto; padding: 7px 11px 7px 9px; font-size: 10px; }

  .offer-wrap { align-items: flex-start; justify-content: center; padding: calc(64px + 2vh) 0 0; }
  .offer-wrap.is-center { align-items: center; padding: 0; }
  .offer { width: 88%; }
  .offer::before { inset: -8% -6%; border-radius: 6px; background: rgba(18, 8, 18, .82); }
  .hazard { display: none; }
  .logo { gap: calc(var(--u) * .35); }
  .lg--solid { font-size: calc(var(--u) * 3.6); }
  .lg--big { font-size: calc(var(--u) * 7.2); }
  .lg--sticker { font-size: calc(var(--u) * 3.4); margin: calc(var(--u) * .3) 0; }
  .lg--outline { font-size: calc(var(--u) * 5); }
  .sub { font-size: calc(var(--u) * 1.75); margin-top: calc(var(--u) * 1.2); }
  .cta { font-size: calc(var(--u) * 1.5); margin-top: calc(var(--u) * 1.6); }
  .countdown { font-size: calc(var(--u) * 1.05); margin-top: calc(var(--u) * 1.5); }
  .sponsors { margin-top: calc(var(--u) * 1.4); }
  .sp { width: calc(var(--u) * 5.2); }
  .sponsors__label { font-size: calc(var(--u) * .95); }
  .tile__sponsor::before { font-size: calc(var(--u) * 1); }

  .actor--courier { left: -6%; height: 46%; }
  .actor--girl { left: auto; right: -4%; height: 42%; }
  .actor--car { left: 6%; width: 88%; bottom: -3%; }

  .tape--b, .tape--stripes, .hud__meta { display: none; }
  .tape { height: calc(var(--u) * 3.2); }
  .tape--a { bottom: 2.5%; rotate: -3deg; }
  .tape__track { font-size: calc(var(--u) * 1.4); }
  .hud { inset: 8px; font-size: 9px; }
  .hud__c { width: 20px; height: 20px; border-width: 2px; }
  .hud__rec { left: 28px; bottom: 5px; }
  .tile__sign { font-size: calc(var(--u) * 1.15); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01s !important; }
}

/* производительность: всё, что вне экрана, не анимируется */
.is-off, .is-off *, .is-off *::before, .is-off *::after { animation-play-state: paused !important; }