:root {
  color-scheme: dark;
  --icon-size: clamp(116px, 13vw, 168px);
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: #020202;
}

body {
  min-height: 100%;
  margin: 0;
  background: #020202;
}

.hero-stage {
  background-position: 50% 50%;
  background:
    radial-gradient(ellipse at 48% 50%, rgba(255, 255, 255, 0.045), transparent 22rem),
    radial-gradient(ellipse at 50% 56%, rgba(191, 84, 7, 0.08), transparent 25rem),
    linear-gradient(135deg, #000 0%, #030303 45%, #000 100%);
  animation: heroBreath 12s ease-in-out infinite alternate;
}

.hero-stage::before {
  position: absolute;
  inset: 0;
  z-index: -3;
  content: "";
  background:
    linear-gradient(105deg, transparent 0%, rgba(255, 255, 255, 0.032) 45%, transparent 58%),
    linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.014) 1px, transparent 1px);
  background-position: -30vw 0, 0 0, 0 0;
  background-size: 78vw 100%, 96px 96px, 96px 96px;
  mask-image: radial-gradient(ellipse at center, black 0%, transparent 74%);
  animation: luxurySweep 16s cubic-bezier(0.37, 0, 0.63, 1) infinite;
}

.hero-stage::after {
  position: absolute;
  inset: -18%;
  z-index: -2;
  pointer-events: none;
  content: "";
  opacity: 0.155;
  background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 140 140' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E"),
    radial-gradient(ellipse at center, rgba(255, 255, 255, 0.055), transparent 42%);
  background-size: 180px 180px, 100% 100%;
  mix-blend-mode: overlay;
  animation: grainDrift 8s steps(8) infinite;
}

.hero-ambient,
.hero-sheen,
.hero-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero-ambient {
  z-index: -2;
  background:
    radial-gradient(ellipse at 42% 48%, rgba(255, 255, 255, 0.038), transparent 27%),
    radial-gradient(ellipse at 58% 54%, rgba(191, 84, 7, 0.072), transparent 38%);
  filter: blur(22px);
  transform: scale(1.08);
  animation: ambientPulse 10s ease-in-out infinite alternate;
}

.hero-sheen {
  z-index: -1;
  background:
    linear-gradient(118deg, transparent 0%, transparent 40%, rgba(255, 255, 255, 0.045) 50%, transparent 60%, transparent 100%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 36%, rgba(255, 255, 255, 0.018));
  mix-blend-mode: screen;
  opacity: 0.28;
  animation: sheenFloat 14s ease-in-out infinite alternate;
}

.hero-vignette {
  z-index: 0;
  background:
    radial-gradient(circle at center, transparent 0%, rgba(0, 0, 0, 0.16) 50%, rgba(0, 0, 0, 0.78) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.26), transparent 34%, rgba(0, 0, 0, 0.32));
}

.hero-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(88vw, 1040px);
}

.brand-lockup {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(32px, 3.4vw, 44px);
  width: min(72vw, 780px);
  animation: brandEntrance 900ms cubic-bezier(0.16, 1, 0.3, 1) 120ms both;
}

.hero-content::before {
  position: absolute;
  inset: -36% -16%;
  z-index: -1;
  content: "";
  background:
    radial-gradient(ellipse at 34% 50%, rgba(191, 84, 7, 0.16), transparent 28%),
    radial-gradient(ellipse at 64% 50%, rgba(255, 255, 255, 0.075), transparent 34%);
  filter: blur(58px);
  opacity: 0.7;
}

.brand-icon {
  width: var(--icon-size);
  height: auto;
  flex: 0 0 auto;
  display: block;
  filter:
    drop-shadow(0 24px 42px rgba(0, 0, 0, 0.68))
    drop-shadow(0 0 36px rgba(191, 84, 7, 0.16));
}

.brand-wordmark {
  margin: 0;
  color: #fff;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(78px, 8.65vw, 124px);
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: 0;
  text-shadow:
    0 22px 52px rgba(0, 0, 0, 0.72),
    0 0 34px rgba(255, 255, 255, 0.08);
  white-space: nowrap;
}

.hero-subtext {
  width: min(920px, 92vw);
  margin: clamp(28px, 4vw, 40px) 0 0;
  color: rgba(255, 255, 255, 0.68);
  font-size: clamp(17px, 1.55vw, 22px);
  font-weight: 500;
  line-height: 1.42;
  letter-spacing: 0;
  text-align: center;
  text-wrap: balance;
  white-space: nowrap;
  text-shadow: 0 18px 42px rgba(0, 0, 0, 0.72);
  animation: subtextEntrance 780ms cubic-bezier(0.16, 1, 0.3, 1) 420ms both;
}

@keyframes heroBreath {
  0% {
    background-size: 100% 100%, 100% 100%, 100% 100%;
  }

  100% {
    background-size: 112% 112%, 108% 108%, 100% 100%;
  }
}

@keyframes ambientPulse {
  0% {
    opacity: 0.54;
    transform: translate3d(-1.6%, -1%, 0) scale(1.08);
  }

  100% {
    opacity: 0.86;
    transform: translate3d(1.4%, 1%, 0) scale(1.12);
  }
}

@keyframes sheenFloat {
  0% {
    transform: translate3d(-8%, 0, 0);
  }

  100% {
    transform: translate3d(8%, 0, 0);
  }
}

@keyframes luxurySweep {
  0%,
  38% {
    background-position: -70vw 0, 0 0, 0 0;
  }

  100% {
    background-position: 92vw 0, 0 0, 0 0;
  }
}

@keyframes grainDrift {
  0% {
    transform: translate3d(0, 0, 0);
  }

  20% {
    transform: translate3d(-1.2%, 0.8%, 0);
  }

  40% {
    transform: translate3d(1.1%, -1%, 0);
  }

  60% {
    transform: translate3d(-0.8%, -1.4%, 0);
  }

  80% {
    transform: translate3d(1.3%, 0.9%, 0);
  }

  100% {
    transform: translate3d(-1%, 1.1%, 0);
  }
}

@keyframes brandEntrance {
  0% {
    opacity: 0;
    filter: blur(8px);
    transform: translate3d(0, 18px, 0) scale(0.97);
  }

  60% {
    opacity: 1;
    filter: blur(0);
  }

  100% {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes subtextEntrance {
  0% {
    opacity: 0;
    filter: blur(6px);
    transform: translate3d(0, 12px, 0);
  }

  100% {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0);
  }
}

@media (max-width: 640px) {
  :root {
    --icon-size: clamp(82px, 24vw, 112px);
  }

  .hero-stage {
    background:
      radial-gradient(ellipse at 50% 48%, rgba(255, 255, 255, 0.052), transparent 13rem),
      radial-gradient(ellipse at 50% 55%, rgba(191, 84, 7, 0.09), transparent 16rem),
      linear-gradient(135deg, #000 0%, #030303 45%, #000 100%);
  }

  .hero-content {
    width: min(88vw, 460px);
  }

  .brand-lockup {
    flex-direction: column;
    gap: 24px;
    width: min(86vw, 430px);
  }

  .brand-wordmark {
    font-size: clamp(52px, 15vw, 76px);
  }

  .hero-subtext {
    margin-top: 26px;
    font-size: clamp(16px, 4.6vw, 19px);
    line-height: 1.48;
    white-space: normal;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-stage,
  .hero-stage::before,
  .hero-stage::after,
  .hero-ambient,
  .hero-sheen,
  .brand-lockup,
  .hero-subtext {
    animation: none;
  }
}