:root {
  color-scheme: dark;
  --vh: 1vh;
  --stage-height: calc(var(--vh) * 100);
  --creative-ratio: 784 / 1168;
  --creative-ratio-value: 0.6712328767;
  --page-max-width: 784px;
  --page-bg: #0f1116;
  background: #0f1116;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: var(--stage-height);
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  min-height: var(--stage-height);
  background:
    radial-gradient(circle at 50% 0%, rgba(81, 95, 123, 0.32), transparent 34rem),
    var(--page-bg);
  font-family:
    Arial,
    "Helvetica Neue",
    Helvetica,
    sans-serif;
}

body::before {
  position: fixed;
  inset: -20%;
  pointer-events: none;
  content: "";
  background:
    radial-gradient(circle at 22% 24%, rgba(255, 41, 215, 0.2), transparent 22rem),
    radial-gradient(circle at 76% 16%, rgba(78, 152, 255, 0.2), transparent 24rem),
    radial-gradient(circle at 50% 82%, rgba(255, 132, 27, 0.12), transparent 25rem);
  filter: blur(12px);
  opacity: 0.92;
  animation: ambientGlow 7s ease-in-out infinite alternate;
}

.landing {
  position: fixed;
  inset: 0;
  width: 100%;
  height: var(--stage-height);
  min-height: var(--stage-height);
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom)
    env(safe-area-inset-left);
}

.creative {
  position: relative;
  width: min(100vw, calc(var(--stage-height) * var(--creative-ratio-value)), var(--page-max-width));
  aspect-ratio: var(--creative-ratio);
  overflow: hidden;
  background: #17191f;
  box-shadow: 0 24px 72px rgba(0, 0, 0, 0.44);
  isolation: isolate;
  animation: posterFloat 5.6s ease-in-out infinite;
}

.creative__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
  animation: imageBreath 6.4s ease-in-out infinite;
}

.fx,
.shine {
  position: absolute;
  pointer-events: none;
  z-index: 2;
}

.fx {
  border-radius: 999px;
  mix-blend-mode: screen;
  filter: blur(18px);
}

.fx--top {
  top: -5%;
  left: 10%;
  width: 78%;
  height: 22%;
  background: linear-gradient(90deg, rgba(255, 34, 217, 0.34), rgba(73, 172, 255, 0.32));
  opacity: 0.7;
  animation: neonDrift 4.8s ease-in-out infinite alternate;
}

.fx--bottom {
  right: -14%;
  bottom: 10%;
  width: 50%;
  height: 24%;
  background: rgba(255, 134, 37, 0.18);
  opacity: 0.75;
  animation: warmPulse 3.8s ease-in-out infinite;
}

.shine {
  inset: 0;
  background: linear-gradient(
    110deg,
    transparent 0%,
    transparent 38%,
    rgba(255, 255, 255, 0.14) 47%,
    transparent 58%,
    transparent 100%
  );
  mix-blend-mode: soft-light;
  transform: translateX(-120%);
  animation: pageShine 4.8s ease-in-out infinite;
}

.hotspot {
  position: absolute;
  left: 4.1%;
  width: 26.4%;
  height: 8.9%;
  border-radius: 18px;
  outline-offset: 4px;
  z-index: 3;
  -webkit-tap-highlight-color: rgba(255, 151, 53, 0.22);
}

.hotspot:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.92);
}

.hotspot--website {
  top: 42.6%;
}

.hotspot--ios {
  top: 54.1%;
}

.hotspot--android {
  top: 65.5%;
}

@media (max-width: 480px) {
  body {
    background: var(--page-bg);
  }

  .creative {
    width: min(100vw, calc(var(--stage-height) * var(--creative-ratio-value)));
    box-shadow: none;
  }
}

@media (max-height: 640px) and (orientation: portrait) {
  .fx {
    filter: blur(14px);
  }

  .shine {
    opacity: 0.72;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
  }
}

@keyframes ambientGlow {
  from {
    transform: translate3d(-1.5%, -1%, 0) scale(1);
  }

  to {
    transform: translate3d(1.5%, 1%, 0) scale(1.04);
  }
}

@keyframes posterFloat {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-6px);
  }
}

@keyframes imageBreath {
  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.012);
  }
}

@keyframes neonDrift {
  from {
    transform: translate3d(-3%, 0, 0) scaleX(0.96);
    opacity: 0.48;
  }

  to {
    transform: translate3d(4%, 2%, 0) scaleX(1.04);
    opacity: 0.82;
  }
}

@keyframes warmPulse {
  0%,
  100% {
    transform: scale(0.95);
    opacity: 0.36;
  }

  50% {
    transform: scale(1.12);
    opacity: 0.78;
  }
}

@keyframes pageShine {
  0%,
  42% {
    transform: translateX(-120%);
  }

  72%,
  100% {
    transform: translateX(120%);
  }
}