@font-face {
  font-family: "Cera Pro";
  src: url("fonts/CeraPro-Bold.woff") format("woff"),
       url("fonts/CeraPro-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

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

html,
body {
  margin: 0;
  height: 100%;
}

body {
  background: #d80022;
  font-family: "Cera Pro", Arial, sans-serif;
  overflow: hidden;
}

/*
 * Макет 1920×1080 (десктоп) и 375×640 (мобайл).
 * --u — один пиксель макета; все элементы позиционируются от центра экрана
 * в координатах макета, поэтому композиция масштабируется целиком.
 */
.stage {
  --u: min(100vw / 1920, 100svh / 1080);
  --cx: 960;
  --cy: 540;
  position: relative;
  width: 100%;
  height: 100svh;
  overflow: hidden;
}

.stage > * {
  position: absolute;
  left: calc(50% + (var(--x) - var(--cx)) * var(--u));
  top: calc(50% + (var(--y) - var(--cy)) * var(--u));
  width: calc(var(--w) * var(--u));
  margin: 0;
}

.bg { pointer-events: none; user-select: none; will-change: transform; }
.bg--mobile { display: none; }

.bg--red.bg--desktop   { --x: 1104;  --y: -713; --w: 1709; }
.bg--black.bg--desktop { --x: -1073; --y: 506;  --w: 1709; }

/* Фигуры по краям медленно «дышат» — смещаются наружу и обратно */
.bg--red   { animation: drift-red 9s ease-in-out infinite alternate; }
.bg--black { animation: drift-black 11s ease-in-out infinite alternate; }

@keyframes drift-red {
  from { transform: translate(0, 0) rotate(0deg); }
  to   { transform: translate(calc(40 * var(--u)), calc(-30 * var(--u))) rotate(1.5deg); }
}

@keyframes drift-black {
  from { transform: translate(0, 0) rotate(0deg); }
  to   { transform: translate(calc(-40 * var(--u)), calc(30 * var(--u))) rotate(-1.5deg); }
}

.logo  { --x: 812; --y: 212; --w: 307; }
.bonus { --x: 664; --y: 343; --w: 596; }
.bonus img { display: block; width: 100%; }

.btn {
  --x: 806; --y: 811; --w: 320; --h: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(var(--h) * var(--u));
  border-radius: calc(var(--h) / 2 * var(--u));
  background: #000;
  color: #fff;
  font-weight: 700;
  font-size: calc(48 * var(--u));
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform .2s ease, background-color .2s ease;
  animation: btn-pulse 1.6s ease-in-out infinite;
}

/* Расходящееся кольцо вокруг кнопки */
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 0 rgba(255, 255, 255, .55);
  animation: btn-ring 1.6s ease-out infinite;
  pointer-events: none;
}

@keyframes btn-pulse {
  0%, 100% { scale: 1; }
  50%      { scale: 1.06; }
}

@keyframes btn-ring {
  0%   { box-shadow: 0 0 0 0 rgba(255, 255, 255, .55); }
  100% { box-shadow: 0 0 0 calc(22 * var(--u)) rgba(255, 255, 255, 0); }
}

.btn:hover { background: #1c1c1c; transform: scale(1.04); animation-play-state: paused; }
.btn:active { transform: scale(.98); }
.btn:focus-visible { outline: calc(4 * var(--u)) solid #fff; outline-offset: calc(4 * var(--u)); }

/* Мобайл — портретная ориентация */
@media (max-aspect-ratio: 1/1) {
  body { background: #e80024; }

  .stage {
    --u: min(100vw / 375, 100svh / 640);
    --cx: 187.5;
    --cy: 320;
  }

  .bg--desktop { display: none; }
  .bg--mobile  { display: block; }

  .bg--red.bg--mobile   { --x: 39;   --y: -257; --w: 660; }
  .bg--black.bg--mobile { --x: -399; --y: 486;  --w: 660; }

  .logo  { --x: 100; --y: 96;  --w: 183; }
  .bonus { --x: 9;   --y: 173; --w: 358; }
  .btn   { --x: 102; --y: 448; --w: 180; --h: 45; font-size: calc(27 * var(--u)); }
}

@media (prefers-reduced-motion: reduce) {
  .bg,
  .btn,
  .btn::after { animation: none; }
}