:root {
  --bg: #000000;
  --gold-1: #7a5716;
  --gold-2: #b78a2c;
  --gold-3: #e4c76c;
  --gold-4: #fff3bf;
  --gold-5: #8d6820;
  --glow: rgba(228, 199, 108, 0.34);
  --banner-width: min(94vw, 1500px);
  --banner-ratio: 2560 / 1440;
  --enter-speed: .9s;
  --reveal-speed: 1.05s;
  --shine-speed: 3.35s;
  --pulse-speed: 3.4s;
}

* { box-sizing: border-box; }

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

body {
  display: grid;
  place-items: center;
  padding: clamp(14px, 3vw, 30px);
  background:
    radial-gradient(circle at 30% 50%, rgba(228,199,108,.09), transparent 24%),
    radial-gradient(circle at 74% 45%, rgba(255,243,191,.06), transparent 22%),
    linear-gradient(180deg, #040404 0%, #000000 100%);
  overflow-x: hidden;
  overflow-y: auto;
  font-family: Arial, Helvetica, sans-serif;
}

.banner-shell {
  width: 100%;
  min-height: min(68vh, 560px);
  display: grid;
  place-items: center;
}

.wrap {
  width: var(--banner-width);
  aspect-ratio: var(--banner-ratio);
  position: relative;
  margin-inline: auto;
  isolation: isolate;
}

.wrap::before {
  content: "";
  position: absolute;
  inset: -10% -4%;
  background:
    radial-gradient(circle at 50% 55%, rgba(255,243,191,.08), transparent 24%),
    radial-gradient(circle at 76% 45%, rgba(228,199,108,.08), transparent 16%);
  filter: blur(22px);
  opacity: 0;
  transform: scale(.985);
  transition: opacity .6s ease, transform .6s ease;
  pointer-events: none;
  z-index: 0;
}

.wrap.in-view::before {
  opacity: 1;
  transform: scale(1);
}

svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
  position: relative;
  z-index: 1;
}

.logo-fill {
  color: url(#goldGradient);
  filter: url(#goldGlow);
  opacity: 0;
  transform: translateY(10px) scale(.992);
}

.wrap.in-view .logo-fill {
  animation:
    settle var(--enter-speed) cubic-bezier(.22,.9,.16,1) .08s forwards,
    pulse var(--pulse-speed) ease-in-out 1s infinite;
}

.logo-fill path {
  fill: url(#goldGradient) !important;
}

.reveal-rect {
  transform-box: fill-box;
  transform-origin: left center;
  transform: scaleX(0);
}

.wrap.in-view .reveal-rect {
  animation: reveal var(--reveal-speed) cubic-bezier(.22,.9,.16,1) .16s forwards;
}

.shine {
  opacity: 0;
  mix-blend-mode: screen;
}

.wrap.in-view .shine {
  opacity: .9;
  animation: shineMove var(--shine-speed) linear .85s infinite;
}

.outline {
  opacity: 0;
}

.wrap.in-view .outline {
  animation: outlineIn .7s ease .35s forwards;
}

.outline path {
  fill: none !important;
  stroke: rgba(255, 239, 176, .28);
  stroke-width: 1.6;
  vector-effect: non-scaling-stroke;
}

.spark {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 58%, rgba(255,243,191,.12), transparent 7%),
    radial-gradient(circle at 82% 43%, rgba(255,243,191,.08), transparent 8%);
  opacity: 0;
  z-index: 2;
}

.wrap.in-view .spark {
  animation: sparkIn .9s ease .55s forwards;
}

@keyframes reveal {
  to { transform: scaleX(1); }
}

@keyframes settle {
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes outlineIn {
  to { opacity: 1; }
}

@keyframes sparkIn {
  to { opacity: 1; }
}

@keyframes shineMove {
  0% { transform: translateX(-48%); }
  100% { transform: translateX(122%); }
}

@keyframes pulse {
  0%, 100% { filter: url(#goldGlow); }
  50% { filter: url(#goldGlowStrong); }
}

@media (max-width: 1100px) {
  .wrap {
    width: min(96vw, 1280px);
  }
}

@media (max-width: 700px) {
  body {
    padding: 12px;
  }

  .banner-shell {
    min-height: min(46vh, 360px);
  }

  .wrap {
    width: 97vw;
  }

  .wrap::before {
    inset: -8% -2%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wrap::before,
  .logo-fill,
  .reveal-rect,
  .shine,
  .outline,
  .spark {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}