:root {
  --night: #050509;
  --night-deep: #010103;
  --ember: #f26f25;
  --ember-core: #ffbe6f;
  --fog: rgba(151, 159, 166, 0.12);
  --fog-strong: rgba(188, 195, 202, 0.22);
  --text: rgba(238, 228, 206, 0.88);
}

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

body {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: #000;
  color: var(--text);
  min-height: 100vh;
  display: flex;
  align-items: stretch;
  justify-content: center;
  overflow-x: hidden;
}

body::before,
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  display: none;
}

body::before {
  background: radial-gradient(circle at 22% 18%, rgba(245, 112, 42, 0.24), transparent 45%),
    radial-gradient(circle at 78% 20%, rgba(255, 172, 66, 0.18), transparent 48%);
  filter: blur(80px);
  opacity: 0.55;
  animation: aurora-shift 28s ease-in-out infinite alternate;
}

body::after {
  background-image: radial-gradient(rgba(255, 255, 255, 0.4) 1px, transparent 0);
  background-size: 140px 140px;
  background-position: 0 0, 70px 70px;
  opacity: 0.35;
  animation: twinkle 22s linear infinite;
}

.scene {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 2rem clamp(1rem, 3vw, 3rem);
  display: flex;
  flex-direction: column;
  gap: clamp(3rem, 6vw, 6rem);
}

.scene__header {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  text-transform: uppercase;
  letter-spacing: 0.35em;
}

.scene__brand {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  font-size: clamp(0.85rem, 1vw + 0.5rem, 1.15rem);
}

.scene__monogram {
  display: grid;
  place-content: center;
  width: clamp(3rem, 8vw, 4rem);
  aspect-ratio: 1;
  border-radius: 1.5rem 0.25rem;
  border: 1px solid rgba(245, 240, 233, 0.22);
  font-family: 'Cinzel', serif;
  font-size: clamp(1.35rem, 2vw + 0.5rem, 2rem);
  color: rgba(245, 228, 186, 0.9);
  box-shadow: 0 0 25px rgba(242, 111, 37, 0.32);
  background: linear-gradient(145deg, rgba(10, 6, 12, 0.85), rgba(18, 10, 16, 0.65));
  padding: 0.5rem;
  overflow: hidden;
}

.scene__monogram-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: brightness(0.95) contrast(1.1);
}

.scene__name {
  font-family: 'Cinzel', serif;
  letter-spacing: 0.45em;
  font-weight: 600;
  color: rgba(244, 214, 144, 0.92);
}

.scene__contact {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.85rem 2.6rem;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(181, 48, 28, 0.85), rgba(255, 98, 0, 0.65));
  color: #080308;
  font-weight: 600;
  letter-spacing: 0.35em;
  text-decoration: none;
  transition: transform 0.4s ease, box-shadow 0.4s ease, background 0.4s ease;
  text-transform: uppercase;
  overflow: hidden;
}

.scene__contact::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.45), transparent 55%);
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.scene__contact:hover,
.scene__contact:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 12px 45px rgba(181, 48, 28, 0.4);
}

.scene__contact:hover::after,
.scene__contact:focus-visible::after {
  opacity: 0.85;
}

.scene__tagline {
  font-family: 'Cinzel', serif !important;
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  font-weight: 600;
  letter-spacing: 0.45em;
  color: rgba(244, 214, 144, 0.92);
  text-align: center;
  text-transform: uppercase;
  position: fixed;
  top: clamp(9rem, 17vh, 13rem);
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  width: auto;
  margin: 0;
  display: flex;
  gap: 1rem;
}

.scene__tagline-word {
  display: inline-block;
}

@media (max-width: 720px) {
  .scene__tagline {
    flex-direction: column;
    gap: 0.5rem;
    top: clamp(10rem, 18vh, 14rem);
  }
}

.scene__contact--centered {
  position: fixed;
  bottom: clamp(2rem, 5vw, 3.5rem);
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
}

.scene__contact--centered:hover,
.scene__contact--centered:focus-visible {
  transform: translateX(-50%) scale(1.08);
  box-shadow: 0 0 45px rgba(242, 111, 37, 0.6), 0 0 25px rgba(255, 190, 111, 0.4);
}

.scene__contact--centered:active {
  transform: translateX(-50%) scale(1.05);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.scene__stage {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  isolation: isolate;
  background: linear-gradient(180deg, rgba(5, 4, 10, 0.9), rgba(2, 1, 5, 0.98));
}

.stage__sky {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(12, 10, 24, 0.95) 0%, rgba(4, 3, 9, 0.8) 55%, rgba(2, 1, 5, 0.95) 100%);
  opacity: 0.9;
}

.stage__stars {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.6) 1px, transparent 0);
  background-size: 120px 120px;
  opacity: 0.45;
  animation: star-glimmer 24s linear infinite;
}

.stage__aurora {
  position: absolute;
  inset: 8% 25% 40% 25%;
  background: radial-gradient(circle, rgba(225, 132, 58, 0.4) 0%, rgba(124, 50, 23, 0.22) 45%, transparent 75%);
  filter: blur(22px);
  opacity: 0.8;
  animation: aurora-pulse 16s ease-in-out infinite;
}

.stage__monolith {
  position: absolute;
  bottom: 16%;
  left: 50%;
  transform: translateX(-50%);
  width: clamp(220px, 25vw, 320px);
  height: clamp(380px, 42vw, 560px);
  background: linear-gradient(180deg, rgba(22, 18, 28, 0.1), rgba(0, 0, 0, 0.92)),
    linear-gradient(110deg, rgba(180, 172, 160, 0.12), transparent 55%),
    linear-gradient(250deg, rgba(160, 152, 140, 0.12), transparent 60%);
  border-radius: 160px 160px 40px 40px;
  overflow: hidden;
  box-shadow: inset 0 -40px 120px rgba(0, 0, 0, 0.92), 0 45px 120px rgba(0, 0, 0, 0.78);
}

.stage__monolith::before {
  content: '';
  position: absolute;
  inset: 12% 18% 8% 18%;
  background: radial-gradient(circle at 50% 10%, rgba(255, 190, 111, 0.85), rgba(242, 111, 37, 0.8) 32%, rgba(33, 9, 2, 0.92) 55%, rgba(0, 0, 0, 0.98) 65%);
  filter: blur(2px);
  clip-path: polygon(50% 0%, 88% 18%, 88% 100%, 12% 100%, 12% 18%);
  animation: core-flicker 6s ease-in-out infinite;
}

.stage__monolith::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(12, 7, 9, 0.15), rgba(0, 0, 0, 0.85));
  mix-blend-mode: multiply;
}

.stage__glow {
  position: absolute;
  bottom: 22%;
  left: 50%;
  transform: translateX(-50%);
  width: clamp(320px, 38vw, 520px);
  height: clamp(140px, 20vw, 220px);
  background: radial-gradient(circle at 50% 100%, rgba(242, 111, 37, 0.55), transparent 68%);
  filter: blur(48px);
  opacity: 0.65;
  animation: glow-pulse 8s ease-in-out infinite;
}

.stage__ember {
  position: absolute;
  bottom: 18%;
  left: 50%;
  transform: translateX(-50%);
  width: clamp(120px, 15vw, 200px);
  height: clamp(70px, 12vw, 140px);
  background: radial-gradient(circle, rgba(255, 190, 111, 0.65) 0%, rgba(242, 111, 37, 0.5) 45%, rgba(116, 34, 6, 0.1) 75%, transparent 85%);
  filter: blur(24px);
  animation: ember-float 12s ease-in-out infinite;
}

.stage__ground {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 120%;
  height: 38%;
  background:
    radial-gradient(circle at 50% 0%, rgba(242, 111, 37, 0.28), transparent 65%),
    radial-gradient(circle at 20% 65%, rgba(36, 21, 9, 0.6), transparent 70%),
    radial-gradient(circle at 80% 70%, rgba(28, 16, 6, 0.6), transparent 70%),
    linear-gradient(180deg, rgba(17, 12, 8, 0.9) 0%, rgba(6, 4, 4, 0.95) 60%, rgba(2, 2, 3, 0.98) 100%);
  clip-path: ellipse(70% 65% at 50% 100%);
  overflow: hidden;
  box-shadow: inset 0 40px 120px rgba(0, 0, 0, 0.95);
}

.stage__ground::before {
  content: '';
  position: absolute;
  inset: 15% 18% 18% 18%;
  background-image:
    radial-gradient(circle at 20% 25%, rgba(95, 69, 40, 0.35) 0%, transparent 55%),
    radial-gradient(circle at 65% 30%, rgba(82, 58, 34, 0.3) 0%, transparent 52%),
    radial-gradient(circle at 40% 60%, rgba(77, 52, 29, 0.3) 0%, transparent 58%);
  mix-blend-mode: screen;
  opacity: 0.35;
  animation: ground-shift 26s ease-in-out infinite alternate;
}

.stage__ground::after {
  content: '';
  position: absolute;
  inset: 6% 12% 12% 12%;
  background-image: linear-gradient(115deg, rgba(12, 8, 5, 0.6) 46%, transparent 48%),
    linear-gradient(85deg, rgba(14, 9, 6, 0.65) 47%, transparent 49%),
    linear-gradient(65deg, rgba(10, 6, 4, 0.6) 49%, transparent 50%);
  opacity: 0.4;
  filter: blur(2px);
  mix-blend-mode: overlay;
}

.stage__fog {
  position: absolute;
  left: -10%;
  width: 120%;
  height: 45%;
  background: radial-gradient(circle at 20% 60%, var(--fog), transparent 75%),
    radial-gradient(circle at 80% 55%, var(--fog-strong), transparent 75%),
    radial-gradient(circle at 45% 50%, rgba(255, 255, 255, 0.08), transparent 78%);
  filter: blur(28px);
  opacity: 0.9;
  mix-blend-mode: screen;
  animation: fog-drift 32s linear infinite;
}

.stage__fog--near {
  bottom: -6%;
  animation-duration: 38s;
  animation-direction: alternate;
}

.stage__fog--far {
  bottom: 12%;
  opacity: 0.58;
  filter: blur(40px);
  animation-duration: 58s;
}

@keyframes aurora-shift {
  0% {
    transform: translate3d(-4%, -2%, 0) scale(1.05);
  }
  100% {
    transform: translate3d(4%, 3%, 0) scale(1.08);
  }
}

@keyframes twinkle {
  0% {
    opacity: 0.25;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 0.3;
  }
}

@keyframes star-glimmer {
  0% {
    opacity: 0.2;
    transform: translate3d(0, 0, 0);
  }
  50% {
    opacity: 0.4;
  }
  100% {
    opacity: 0.25;
    transform: translate3d(-3%, -2%, 0);
  }
}

@keyframes aurora-pulse {
  0% {
    transform: scale(0.92);
    opacity: 0.65;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.9;
  }
  100% {
    transform: scale(0.96);
    opacity: 0.7;
  }
}

@keyframes core-flicker {
  0%,
  100% {
    filter: blur(2px);
    opacity: 0.92;
  }
  40% {
    filter: blur(3px);
    opacity: 0.82;
  }
  55% {
    filter: blur(2.5px);
    opacity: 0.95;
  }
  70% {
    filter: blur(2px);
    opacity: 0.88;
  }
}

@keyframes fog-drift {
  0% {
    transform: translateX(0) scale(1.05);
    opacity: 0.78;
  }
  50% {
    transform: translateX(6%) scale(1.08);
    opacity: 0.95;
  }
  100% {
    transform: translateX(-5%) scale(1.03);
    opacity: 0.78;
  }
}

@keyframes glow-pulse {
  0%,
  100% {
    opacity: 0.6;
    transform: translateX(-50%) scale(0.98);
  }
  50% {
    opacity: 0.85;
    transform: translateX(-50%) scale(1.04);
  }
}

@keyframes ember-float {
  0% {
    transform: translate(-50%, 0) scale(0.92);
    opacity: 0.75;
  }
  45% {
    transform: translate(-48%, -4%) scale(1.05);
    opacity: 0.92;
  }
  100% {
    transform: translate(-51%, 2%) scale(0.98);
    opacity: 0.78;
  }
}

@keyframes ground-shift {
  0% {
    transform: translate3d(-1%, 0, 0) scale(1.02);
  }
  100% {
    transform: translate3d(1%, 0, 0) scale(1.04);
  }
}

@media (max-width: 720px) {
  .scene {
    padding-top: 1.5rem;
    gap: 3rem;
  }

  .scene__header {
    flex-direction: column;
    align-items: flex-start;
    letter-spacing: 0.3em;
  }

  .scene__contact {
    align-self: flex-start;
    padding: 0.75rem 2.2rem;
    letter-spacing: 0.3em;
  }

  .scene__stage {
    aspect-ratio: 3 / 4;
    border-radius: 2.5rem;
  }

  .stage__monolith {
    width: clamp(200px, 55vw, 260px);
    height: clamp(360px, 70vw, 420px);
  }
}