*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  height: 100%;
  height: 100dvh;
  overflow: hidden;
  background: #ffb800;
  font-family: Arial, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ── CSS vars driven by animation.js ── */
.comp {
  --frame2: 0;
  --frame3: 0;
  --frame4: 0;
  --char-scale: 1;
  --char-tx: 0px;
  --char-ty: 0px;
  --char-pin-y: 0px;
  --char-rot: 0deg;
  --bg-white: 1;
  --bg-burst: 0;
  --bg-dark: 0;
  --char-f1: 1;
  --char-f2: 0;
  --char-glow: 0;
  --lightning: 0;
  --cta-buy: 0;
  --retail-p: 0;
  --retail-5: 0;
  --logo-visible: 0;
  --logo-parallax-x: 0px;
  --logo-parallax-y: 0px;
  --logo-parallax-rot: 0deg;
}

/* ── Stage & scaling ── */

.stage {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  height: 100dvh;
  overflow: hidden;
  background: transparent;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Полноэкранный фон (letterbox заполняется на всех форматах) */
.stage-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.stage-bg[hidden] {
  display: none !important;
}

.stage-bg__white {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: #fff;
  opacity: var(--bg-white, 0);
}

.stage-bg__burst {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: var(--bg-burst, 1);
}

.stage-bg__flip {
  width: 100%;
  height: 100%;
  transform-origin: center center;
}

.stage-bg[data-bg-variant="desktop"] .stage-bg__flip {
  transform: none;
}

.stage-bg[data-bg-variant="tablet"] .stage-bg__flip,
.stage-bg[data-bg-variant="mobile"] .stage-bg__flip {
  transform: rotate(180deg) scaleY(-1) scale(1.2);
}

.stage-bg__burst img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.stage-bg__dark {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: #00092c;
  opacity: var(--bg-dark, 0);
}

.comp {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  flex-shrink: 0;
  background: #fff;
  overflow: visible;
  will-change: transform;
  transform-origin: center center;
  /* жёстко фиксируем пропорции — никакого растягивания */
  max-width: none;
  max-height: none;
}

.comp--desktop {
  width: 1920px;
  height: 1080px;
  background: transparent;
  overflow: visible;
}

.comp--tablet {
  width: 1440px;
  height: 1080px;
  background: transparent;
  overflow: visible;
}

.comp--mobile {
  width: 1080px;
  height: 1920px;
  background: transparent;
  overflow: visible;
}

/* Фон рендерится через .stage-bg на весь viewport */
.comp--desktop .layer-bg-white,
.comp--desktop .layer-bg-burst,
.comp--desktop .layer-dark-overlay,
.comp--tablet .layer-bg-white,
.comp--tablet .layer-bg-burst,
.comp--tablet .layer-dark-overlay,
.comp--mobile .layer-bg-burst--mobile,
.comp--mobile .layer-dark-overlay--mobile {
  visibility: hidden;
}

/* ── Breakpoint visibility (fallback до JS; логика в animation.js) ── */

.stage[data-format="auto"] .comp {
  display: none;
}

@media (orientation: portrait) {
  .stage[data-format="auto"] .comp--mobile {
    display: block;
  }
}

@media (orientation: landscape) and (min-width: 1280px) {
  .stage[data-format="auto"] .comp--desktop {
    display: block;
  }
  .stage[data-format="auto"] .comp--mobile {
    display: none;
  }
}

@media (orientation: landscape) and (min-width: 1024px) and (max-width: 1279px) {
  .stage[data-format="auto"] .comp--tablet {
    display: block;
  }
  .stage[data-format="auto"] .comp--mobile {
    display: none;
  }
}

@media (orientation: landscape) and (max-width: 1023px) {
  .stage[data-format="auto"] .comp--mobile {
    display: block;
  }
}

.stage[data-format="desktop"] .comp--tablet,
.stage[data-format="desktop"] .comp--mobile {
  display: none;
}

.stage[data-format="desktop"] .comp--desktop {
  display: block;
}

.stage[data-format="tablet"] .comp--desktop,
.stage[data-format="tablet"] .comp--mobile {
  display: none;
}

.stage[data-format="tablet"] .comp--tablet {
  display: block;
}

.stage[data-format="mobile"] .comp--desktop,
.stage[data-format="mobile"] .comp--tablet {
  display: none;
}

.stage[data-format="mobile"] .comp--mobile {
  display: block;
}

/* ── Layers ── */

.layer {
  position: absolute;
  pointer-events: none;
}

.layer-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.layer-bg-white {
  inset: 0;
  z-index: 1;
  background: #fff;
  opacity: var(--bg-white);
}

.comp--tablet .layer-bg-white,
.comp--mobile .layer-bg-white {
  opacity: 0;
}

.crop {
  overflow: hidden;
}

.crop.layer-characters {
  overflow: visible;
}

.crop img {
  position: absolute;
  display: block;
  max-width: none;
}

/* ── Frame 2: background & atmosphere ── */

.layer-bg-burst {
  inset: 0;
  z-index: 2;
}

.comp--tablet .layer-bg-burst,
.comp--mobile .layer-bg-burst {
  opacity: 1;
}

.comp--desktop .layer-bg-burst {
  opacity: var(--bg-burst);
}

.layer-bg-burst__flip {
  width: 100%;
  height: 100%;
  transform: rotate(180deg) scaleY(-1);
}

.comp--tablet .layer-bg-burst {
  left: -153px;
  top: -1px;
  width: 2415px;
  height: 1358px;
  inset: auto;
}

.comp--mobile .layer-bg-burst--mobile {
  left: -635px;
  top: -1px;
  width: 3421px;
  height: 1924px;
  inset: auto;
}

.layer-dark-overlay {
  inset: 0;
  z-index: 3;
  background: rgba(0, 9, 44, 1);
  opacity: var(--bg-dark);
}

.layer-dark-overlay--tablet {
  inset: 0;
  width: auto;
  height: auto;
  transform: none;
}

.layer-dark-overlay--mobile {
  inset: 0;
  width: auto;
  height: auto;
  transform: none;
}

/* Lightning GIF */
.layer-lightning,
.layer-neon--mobile-f3 {
  z-index: 4;
  mix-blend-mode: color-dodge;
}

/* На десктопе/планшете фон «шторма» тёмный, а прямоугольные кропы гифки
   молнии при color-dodge подсвечивают весь свой бокс (виден прямоугольник
   за головой персонажа). screen поднимает только яркие разряды, а тёмный
   фон кадра гифки остаётся невидимым — рамка исчезает. Мобайл (эталон)
   оставляем на color-dodge. */
.comp--desktop .layer-lightning,
.comp--tablet .layer-lightning {
  mix-blend-mode: screen;
}

.layer-lightning {
  opacity: var(--lightning);
}

.layer-lightning--f2,
.layer-lightning--f3,
.layer-lightning--f4 {
  opacity: var(--lightning);
}

/* На планшете молнии кадров f3/f4 не должны светиться во время кадра 2 —
   иначе их прямоугольные кропы дают лишний бокс за головой. Показываем
   только молнию текущего кадра. */
.comp--tablet .layer-lightning--f2,
.comp--tablet .layer-lightning--f3,
.comp--tablet .layer-lightning--f4 {
  opacity: 0;
}
.comp--tablet[data-frame="2"] .layer-lightning--f2,
.comp--tablet[data-frame="3"] .layer-lightning--f3,
.comp--tablet[data-frame="4"] .layer-lightning--f4 {
  opacity: var(--lightning);
}

.layer-lightning img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.layer-lightning--desktop {
  inset: 0;
}

.layer-lightning--tablet-a {
  left: 208px;
  top: 4px;
  width: 1024px;
  height: 668px;
}

.layer-lightning--tablet-b {
  left: 208px;
  top: 361px;
  width: 1024px;
  height: 935px;
}

.layer-lightning__rotate {
  width: 100%;
  height: 100%;
  transform: rotate(90deg) scaleY(-1);
}

.layer-lightning__crop {
  width: 1024px;
  height: 668px;
  transform: rotate(-90deg);
  transform-origin: center center;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -512px;
  margin-top: -334px;
}

.layer-lightning__crop img {
  top: 0;
  left: -0.03%;
  width: 272.52%;
  height: 100%;
}

.layer-lightning__crop--b {
  width: 935px;
  height: 1024px;
  margin-left: -467px;
  margin-top: -512px;
}

.layer-lightning__crop--b img {
  left: -95.85%;
  width: 194.7%;
}

.layer-lightning--tablet-f3-a {
  left: 74px;
  top: 138px;
  width: 668px;
  height: 1024px;
}

.layer-lightning--tablet-f3-b {
  left: 431px;
  top: 0;
  width: 986px;
  height: 1080px;
}

.layer-lightning__flip-y {
  width: 100%;
  height: 100%;
  transform: scaleY(-1);
}

.layer-lightning__crop--f3a {
  width: 668px;
  height: 1024px;
  position: relative;
  margin: 0 auto;
}

.layer-lightning__crop--f3a img {
  top: 0;
  left: -0.03%;
  width: 272.52%;
  height: 100%;
}

.layer-lightning__crop--f3b {
  width: 986px;
  height: 1080px;
  position: relative;
  margin: 0 auto;
}

.layer-lightning__crop--f3b img {
  top: 0;
  left: -95.85%;
  width: 194.7%;
  height: 100%;
}

.layer-neon--mobile-f3 {
  left: 0;
  top: 4px;
  width: 1080px;
  height: 1920px;
}

.layer-neon__rotate {
  width: 1080px;
  height: 1920px;
  transform: rotate(90deg);
}

.layer-neon--mobile-f3 img {
  width: 1920px;
  height: 1080px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(-90deg);
  object-fit: cover;
}

.layer-lightning--mobile {
  left: 0;
  top: 4px;
  width: 1080px;
  height: 1920px;
}

.layer-lightning--mobile .layer-lightning__rotate {
  width: 1080px;
  height: 1920px;
  transform: rotate(90deg) scaleY(-1);
}

.layer-lightning--mobile img {
  width: 1920px;
  height: 1080px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(-90deg);
  object-fit: cover;
}

/* Neon — дубликат glow-слоя, скрыт (свечение через char-glow) */
.layer-neon--desktop,
.layer-neon--desktop-f4,
.layer-neon--tablet,
.layer-neon--mobile-f3 {
  display: none;
}

/* ── Characters ── */

.char-group {
  position: absolute;
  inset: 0;
  transform-origin: var(--char-origin-x) var(--char-origin-y);
  transform:
    translate(var(--char-tx), var(--char-ty))
    scale(var(--char-scale))
    rotate(var(--char-rot));
  will-change: transform;
  z-index: 8;
  overflow: visible;
}

.layer-characters {
  overflow: visible;
  inset: 0;
}

.layer-characters--f1 {
  opacity: var(--char-f1);
}

.layer-characters--f2-dark {
  opacity: var(--char-f2);
}

.layer-characters--f2-glow {
  opacity: var(--char-glow);
  mix-blend-mode: screen;
}

.layer-characters--f3 {
  display: none;
}

.comp--desktop .layer-characters--desktop {
  inset: 0;
}

/* Desktop + tablet — персонажи прижаты к левому верхнему углу композиции,
   высота 100% (верх/низ касаются), ширина по пропорции ассета. */
.comp--desktop .layer-characters--desktop img,
.comp--tablet .layer-characters--tablet img {
  top: 0;
  left: 0;
  height: 100%;
  width: auto;
  max-width: none;
  aspect-ratio: 1920 / 1080;
}

/* Tablet characters — inside char-group, fill box */
.comp--tablet .layer-characters--tablet {
  inset: 0;
}

/* Mobile characters */
.comp--mobile .layer-characters--mobile {
  inset: 0;
}

.comp--mobile .layer-characters--mobile img {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  object-position: bottom center;
}

/* ── Logo + parallax ── */

.wiggle-logo {
  transform:
    translate(var(--logo-parallax-x), var(--logo-parallax-y))
    rotate(var(--logo-parallax-rot));
  transition: none;
}

.comp--desktop .layer-logo--desktop {
  right: 0;
  left: auto;
  top: -80px;
  width: 671px;
  height: 568px;
  z-index: 10;
  opacity: var(--logo-visible);
  pointer-events: none;
}

.comp--desktop .layer-logo--desktop img {
  top: 0;
  left: -186.14%;
  width: 286.14%;
  height: 190.14%;
}

.comp--tablet .layer-logo--tablet {
  right: 0;
  left: auto;
  top: -70px;
  width: 587px;
  height: 497px;
  z-index: 10;
  opacity: var(--logo-visible);
}

.comp--tablet .layer-logo--tablet img {
  top: 0;
  /* EPIC в спрайте — правый сегмент; кроп прижимает к правому краю компа. */
  left: -186.14%;
  width: 286.14%;
  height: 190.14%;
}

.comp--mobile .layer-logo--mobile {
  left: 82px;
  top: -87px;
  width: 937px;
  height: 793px;
  z-index: 12;
  opacity: var(--logo-visible);
}

.comp--mobile .layer-logo--mobile img {
  top: 0;
  left: -186.14%;
  width: 286.14%;
  height: 190.14%;
}

/* ── AE-позиционирование: CTA try/buy + retail ── */

.layer-ae-mapped {
  position: absolute;
  pointer-events: none;
  overflow: visible;
  transform:
    translate(-50%, calc(-50% + var(--ae-bounce-y, 0px)))
    scale(calc(var(--ae-scale, 1) * var(--ae-bounce-scale, 1)))
    rotate(var(--ae-rot, 0deg));
  transform-origin: center center;
}

.layer-cta-try {
  --ae-bounce-y: var(--cta-try-bounce-y, 0px);
  --ae-bounce-scale: var(--cta-try-bounce-scale, 1);
}

.layer-retail-p {
  --ae-bounce-y: var(--retail-p-bounce-y, 0px);
  --ae-bounce-scale: var(--retail-p-bounce-scale, 1);
}

.layer-retail-5 {
  --ae-bounce-y: var(--retail-5-bounce-y, 0px);
  --ae-bounce-scale: var(--retail-5-bounce-scale, 1);
}

/* Спрайт CTA: обрезка без rotate (rotate только на retail) */
.layer-ae-mapped__crop {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.layer-ae-mapped__crop img,
.layer-retail-5 img,
.layer-retail-p img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
}

.layer-cta-buy {
  left: var(--cta-buy-left, 50%);
  top: var(--cta-buy-top, 50%);
  width: var(--cta-buy-w, 100px);
  height: var(--cta-buy-h, 100px);
  opacity: var(--cta-buy-op, 0);
  --ae-scale: var(--cta-buy-scale, 1);
  --ae-rot: var(--cta-buy-rot, 0deg);
  z-index: 11;
}

.layer-cta-buy img {
  position: absolute;
  width: var(--cta-buy-img-w, 100%);
  height: var(--cta-buy-img-h, 100%);
  left: var(--cta-buy-img-x, 0);
  top: var(--cta-buy-img-y, 0);
  max-width: none;
}

.layer-cta-try {
  left: var(--cta-try-left, 50%);
  top: var(--cta-try-top, 50%);
  width: var(--cta-try-w, 100px);
  height: var(--cta-try-h, 100px);
  opacity: var(--cta-try-op, 0);
  --ae-scale: var(--cta-try-scale, 1);
  --ae-rot: var(--cta-try-rot, 0deg);
  z-index: 11;
}

.layer-cta-try img {
  position: absolute;
  width: var(--cta-try-img-w, 100%);
  height: var(--cta-try-img-h, 100%);
  left: var(--cta-try-img-x, 0);
  top: var(--cta-try-img-y, 0);
  max-width: none;
}

.layer-retail-p {
  left: var(--retail-p-left, 50%);
  top: var(--retail-p-top, 50%);
  width: var(--retail-p-w, 100px);
  height: var(--retail-p-h, 100px);
  opacity: var(--retail-p-op, 0);
  --ae-scale: var(--retail-p-scale, 1);
  --ae-rot: var(--retail-p-rot, 0deg);
  z-index: 13;
}

.layer-retail-5 {
  left: var(--retail-5-left, 50%);
  top: var(--retail-5-top, 50%);
  width: var(--retail-5-w, 100px);
  height: var(--retail-5-h, 100px);
  opacity: var(--retail-5-op, 0);
  --ae-scale: var(--retail-5-scale, 1);
  --ae-rot: var(--retail-5-rot, 0deg);
  z-index: 12;
}

/* ── Format switcher ── */

.format-switch[hidden] {
  display: none !important;
}

.format-switch {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 4px;
  padding: 6px;
  background: rgba(0, 0, 0, 0.65);
  border-radius: 999px;
  backdrop-filter: blur(8px);
  z-index: 100;
}

.format-switch button {
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.55);
  font: 600 11px/1 Arial, sans-serif;
  padding: 8px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  white-space: nowrap;
}

.format-switch button:hover {
  color: #fff;
}

.format-switch button.is-active {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}

@media (max-width: 600px) {
  .format-switch {
    bottom: max(12px, env(safe-area-inset-bottom));
    max-width: calc(100vw - 24px);
    flex-wrap: wrap;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wiggle-logo {
    transform: none !important;
  }
}