:root {
  --bg: #03060d;
  --logo-width: min(42vw, 540px);
  --logo-width-mobile: min(68vw, 360px);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  background: var(--bg);
  overflow: hidden;
  font-family: Inter, Arial, Helvetica, sans-serif;
}

body {
  color: #fff;
}

.landing {
  position: relative;
  width: 100%;
  height: 100dvh;
  min-height: 100vh;
  isolation: isolate;
}

.scene,
.scene::before,
.scene::after,
.base-overlay,
.strobe-flash,
.vignette {
  position: absolute;
  inset: 0;
}

.bg-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 44%;
  filter: brightness(0.50) saturate(1.05) contrast(1.02);
  transform: scale(1.018);
  animation: bgStrobe 8.5s infinite;
  will-change: filter;
}

.base-overlay {
  background:
    radial-gradient(circle at 50% 54%, rgba(71, 126, 255, 0.16), rgba(0, 0, 0, 0) 36%),
    linear-gradient(to bottom, rgba(0,0,0,0.34), rgba(0,0,0,0.18) 24%, rgba(0,0,0,0.52));
}

.strobe-flash {
  background:
    radial-gradient(circle at 50% 54%, rgba(255,255,255,0.14), rgba(255,255,255,0.05) 22%, rgba(255,255,255,0) 48%),
    linear-gradient(to bottom, rgba(255,255,255,0.02), rgba(255,255,255,0));
  mix-blend-mode: screen;
  opacity: 0;
  animation: flashPulse 8.5s infinite;
  will-change: opacity;
}

.vignette {
  box-shadow: inset 0 0 220px rgba(0,0,0,0.38), inset 0 -110px 180px rgba(0,0,0,0.40);
  pointer-events: none;
}

.brand-block {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: var(--logo-width);
  aspect-ratio: 2173 / 724;
  pointer-events: none;
}

.logo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.logo-main {
  opacity: 0.97;
  filter:
    brightness(1.08)
    drop-shadow(0 1px 0 rgba(255,255,255,0.22))
    drop-shadow(0 10px 32px rgba(0,0,0,0.55))
    drop-shadow(0 0 14px rgba(255,255,255,0.05));
}

.logo-emboss {
  opacity: 0.28;
  transform: translate(1px, 2px);
  filter: blur(0.4px) brightness(0.52) contrast(1.15);
  mix-blend-mode: multiply;
}

@keyframes bgStrobe {
  0%, 8%, 19%, 34%, 57%, 70%, 100% {
    filter: brightness(0.50) saturate(1.05) contrast(1.02);
  }
  1.2% {
    filter: brightness(0.93) saturate(1.1) contrast(1.03);
  }
  1.9% {
    filter: brightness(0.55) saturate(1.06) contrast(1.02);
  }
  9.2% {
    filter: brightness(0.84) saturate(1.08) contrast(1.03);
  }
  10.1% {
    filter: brightness(0.52) saturate(1.05) contrast(1.02);
  }
  20.4% {
    filter: brightness(0.98) saturate(1.11) contrast(1.03);
  }
  21.0% {
    filter: brightness(0.60) saturate(1.06) contrast(1.02);
  }
  35.6% {
    filter: brightness(0.86) saturate(1.08) contrast(1.03);
  }
  36.2% {
    filter: brightness(0.53) saturate(1.05) contrast(1.02);
  }
  58.6% {
    filter: brightness(0.90) saturate(1.08) contrast(1.03);
  }
  59.4% {
    filter: brightness(0.52) saturate(1.05) contrast(1.02);
  }
  71.3% {
    filter: brightness(0.82) saturate(1.07) contrast(1.03);
  }
  72.0% {
    filter: brightness(0.50) saturate(1.05) contrast(1.02);
  }
}

@keyframes flashPulse {
  0%, 8%, 19%, 34%, 57%, 70%, 100% {
    opacity: 0;
  }
  1.2% {
    opacity: 0.14;
  }
  1.9% {
    opacity: 0.02;
  }
  9.2% {
    opacity: 0.11;
  }
  10.1% {
    opacity: 0.015;
  }
  20.4% {
    opacity: 0.17;
  }
  21.0% {
    opacity: 0.025;
  }
  35.6% {
    opacity: 0.10;
  }
  36.2% {
    opacity: 0.015;
  }
  58.6% {
    opacity: 0.12;
  }
  59.4% {
    opacity: 0.018;
  }
  71.3% {
    opacity: 0.09;
  }
  72.0% {
    opacity: 0.015;
  }
}

@media (max-width: 1100px) {
  .bg-image {
    object-position: 50% 42%;
  }
  .brand-block {
    width: min(48vw, 460px);
  }
}

@media (max-width: 768px) {
  .bg-image {
    object-position: 50% 38%;
    transform: scale(1.02);
  }
  .brand-block {
    width: var(--logo-width-mobile);
    top: 13vh;
    transform: translateX(-50%);
  }
  .vignette {
    box-shadow: inset 0 0 120px rgba(0,0,0,0.28), inset 0 -80px 120px rgba(0,0,0,0.34);
  }
}

@media (max-width: 480px) {
  .bg-image {
    object-position: 50% 34%;
  }
  .brand-block {
    width: min(72vw, 320px);
    top: 9vh;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bg-image,
  .strobe-flash {
    animation: none;
  }
  .bg-image {
    filter: brightness(0.66) saturate(1.05) contrast(1.02);
  }
}