:root {
  --black: #040404;
  --silver: #d9d9d2;
  --gold-1: #8f6a2a;
  --gold-2: #f2cc77;
  --gold-3: #c1933f;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  background: var(--black);
  color: #ffffff;
  overflow: hidden;
}

body {
  font-family: "Montserrat", "Segoe UI", sans-serif;
}

.stage {
  position: relative;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(circle at 28% 42%, rgba(255, 214, 122, 0.08), transparent 45%),
    radial-gradient(circle at 72% 58%, rgba(188, 188, 188, 0.08), transparent 50%),
    var(--black);
}

.vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, transparent 40%, rgba(0, 0, 0, 0.82) 100%);
  pointer-events: none;
}

.grain {
  position: absolute;
  inset: -50%;
  opacity: 0.14;
  background-image: radial-gradient(#fff 0.4px, transparent 0.4px);
  background-size: 4px 4px;
  animation: grainShift 1.1s steps(2, end) infinite;
  pointer-events: none;
}

.skip-intro {
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 60;
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.28);
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  backdrop-filter: blur(2px);
  transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease;
}

.skip-intro:hover,
.skip-intro:focus-visible {
  border-color: rgba(242, 204, 119, 0.7);
  background: rgba(20, 20, 20, 0.56);
  color: #fff4d4;
}

.sequence {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  animation: cue var(--duration) linear forwards;
  animation-delay: var(--delay);
  pointer-events: none;
}

.seq-title {
  animation-name: holdFast;
  pointer-events: auto;
  overflow: hidden;
}

.title-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.particles-gold,
.particles-silver {
  position: absolute;
  inset: 0;
  opacity: 0;
  animation: particlesOn 700ms ease-out forwards;
  animation-delay: calc(var(--delay) + 0.18s);
}

.particles-gold {
  background-image:
    radial-gradient(circle at 18% 56%, rgba(242, 204, 119, 0.42) 0 1px, transparent 1.8px),
    radial-gradient(circle at 42% 30%, rgba(255, 228, 157, 0.5) 0 1.2px, transparent 2.2px),
    radial-gradient(circle at 74% 62%, rgba(224, 170, 74, 0.4) 0 1px, transparent 1.9px),
    radial-gradient(circle at 86% 40%, rgba(255, 236, 189, 0.36) 0 1.2px, transparent 2px);
  background-size: 230px 230px, 260px 260px, 210px 210px, 280px 280px;
  animation-name: particlesOn, particlesDriftGold;
  animation-duration: 700ms, 9.8s;
  animation-timing-function: ease-out, linear;
  animation-fill-mode: forwards, none;
  animation-iteration-count: 1, infinite;
  animation-delay: calc(var(--delay) + 0.18s), calc(var(--delay) + 0.88s);
}

.particles-silver {
  background-image:
    radial-gradient(circle at 24% 26%, rgba(225, 225, 225, 0.4) 0 1.1px, transparent 2px),
    radial-gradient(circle at 58% 72%, rgba(245, 245, 245, 0.38) 0 1px, transparent 1.8px),
    radial-gradient(circle at 78% 34%, rgba(214, 214, 214, 0.32) 0 1.1px, transparent 2px),
    radial-gradient(circle at 36% 66%, rgba(255, 255, 255, 0.3) 0 1px, transparent 2px);
  background-size: 270px 270px, 230px 230px, 300px 300px, 250px 250px;
  animation-name: particlesOn, particlesDriftSilver;
  animation-duration: 700ms, 11.2s;
  animation-timing-function: ease-out, linear;
  animation-fill-mode: forwards, none;
  animation-iteration-count: 1, infinite;
  animation-delay: calc(var(--delay) + 0.18s), calc(var(--delay) + 0.88s);
}

.brolab-mark {
  width: clamp(120px, 24vw, 240px);
  max-width: 46vw;
  height: auto;
  display: block;
  filter:
    drop-shadow(0 0 14px rgba(255, 255, 255, 0.34))
    drop-shadow(0 0 28px rgba(242, 204, 119, 0.2));
  opacity: 0.94;
  animation: logoPulse 2.4s ease-in-out infinite;
}

.amazon-wordmark {
  position: relative;
  display: inline-block;
  line-height: 1;
  padding: 0 6px 20px;
  opacity: 0;
  animation: distroItemIn 500ms ease-out forwards;
  animation-delay: 560ms;
}

.distribution-block {
  display: grid;
  justify-items: center;
  gap: 14px;
  padding: 0 16px;
}

.distribution-label {
  margin: 0;
  font-family: "Cinzel", Georgia, serif;
  font-size: clamp(0.95rem, 2.1vw, 1.35rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ece8dd;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.16);
  opacity: 0;
  animation: distroItemIn 420ms ease-out forwards;
  animation-delay: 120ms;
}

.amazon-text {
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(2.1rem, 7vw, 4.6rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #f4f4f2;
  text-transform: uppercase;
  text-shadow:
    0 0 10px rgba(255, 255, 255, 0.24),
    0 0 30px rgba(255, 153, 0, 0.1);
}

.amazon-smile {
  position: absolute;
  left: 12%;
  bottom: 0;
  width: 76%;
  height: 14px;
  border-bottom: 6px solid #ff9900;
  border-radius: 0 0 120px 120px;
}

.amazon-smile::after {
  content: "";
  position: absolute;
  right: -4px;
  top: 4px;
  border-left: 12px solid #ff9900;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  transform: rotate(-16deg);
}

.cinema-card {
  margin: 0;
  font-family: "Cinzel", Georgia, serif;
  font-size: clamp(1rem, 2.1vw, 1.7rem);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  text-align: center;
  color: #f0f0ea;
  text-shadow: 0 0 12px rgba(255, 255, 255, 0.18);
  padding: 0 24px;
}

.first-scene {
  width: 94vw;
  height: 66vh;
  object-fit: contain;
  object-position: center;
  border-radius: 2px;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.08),
    0 20px 55px rgba(0, 0, 0, 0.7);
}

.title {
  margin: 0 18px;
  max-width: 95vw;
  text-align: center;
  font-family: "Cinzel", Georgia, serif;
  font-weight: 500;
  font-size: clamp(1.9rem, 6.1vw, 6.2rem);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--silver);
  text-shadow:
    0 0 6px rgba(255, 255, 255, 0.25),
    0 0 24px rgba(242, 204, 119, 0.16);
}

.title::after {
  content: "";
  display: block;
  width: min(620px, 90%);
  margin: 20px auto 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-2), transparent);
}

.title {
  background: linear-gradient(120deg, var(--silver) 10%, #fdf7db 45%, var(--gold-2) 72%, var(--gold-1) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: 0;
  clip-path: inset(0 0 0 100%);
  animation: titleReveal 1.05s ease-out forwards;
  animation-delay: calc(var(--delay) + 0.1s);
  position: relative;
  z-index: 1;
}

.enter-link {
  display: inline-block;
  margin-top: 36px;
  padding: 12px 28px;
  border: 1px solid rgba(242, 204, 119, 0.48);
  color: #f5efdd;
  text-decoration: none;
  letter-spacing: 0.14em;
  font-size: 0.8rem;
  text-transform: uppercase;
  transition: background-color 180ms ease, box-shadow 180ms ease;
  position: relative;
  z-index: 1;
}

.enter-link:hover,
.enter-link:focus-visible {
  background: rgba(242, 204, 119, 0.12);
  box-shadow: 0 0 24px rgba(242, 204, 119, 0.2);
}

@keyframes cue {
  0% { opacity: 0; }
  13% { opacity: 1; }
  74% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes holdFast {
  0% { opacity: 0; }
  0.08% { opacity: 1; }
  100% { opacity: 1; }
}

@keyframes titleReveal {
  0% {
    opacity: 0;
    clip-path: inset(0 0 0 100%);
    filter: brightness(0.75);
  }
  45% {
    opacity: 1;
    clip-path: inset(0 0 0 42%);
    filter: brightness(1.02);
  }
  100% {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    filter: brightness(1.12);
  }
}

@keyframes distroItemIn {
  0% {
    opacity: 0;
    transform: translateY(8px);
    filter: blur(2px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

@keyframes particlesOn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes particlesDriftGold {
  0% { transform: translateX(0) translateY(0); }
  50% { transform: translateX(-1.4%) translateY(-1%); }
  100% { transform: translateX(0.8%) translateY(0.8%); }
}

@keyframes particlesDriftSilver {
  0% { transform: translateX(0) translateY(0); }
  50% { transform: translateX(1.2%) translateY(0.8%); }
  100% { transform: translateX(-0.9%) translateY(-0.8%); }
}

@keyframes logoPulse {
  0%, 100% { transform: scale(0.98); opacity: 0.9; }
  50% { transform: scale(1.03); opacity: 1; }
}

@keyframes grainShift {
  0% { transform: translate(0, 0); }
  25% { transform: translate(10%, -12%); }
  50% { transform: translate(-12%, 9%); }
  75% { transform: translate(8%, 6%); }
  100% { transform: translate(0, 0); }
}

@media (max-width: 700px) {
  .brolab-mark {
    width: clamp(96px, 30vw, 150px);
    max-width: 40vw;
  }

  .skip-intro {
    top: 10px;
    right: 10px;
    padding: 7px 10px;
    font-size: 0.68rem;
  }

  .cinema-card {
    letter-spacing: 0.13em;
    font-size: clamp(0.88rem, 4.1vw, 1.05rem);
  }

  .first-scene {
    width: 96vw;
    height: 62vh;
  }

  .enter-link {
    margin-top: 26px;
    padding: 11px 20px;
  }
}

@media (min-width: 701px) {
  .first-scene {
    width: min(86vw, 1080px);
    height: min(74vh, 700px);
  }
}