.pure-prelude {
  --prelude-bg: #070706;
  --prelude-ink: #f4f0e6;
  --prelude-warm: #e3c98f;
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 42%, rgba(230, 205, 150, 0.075), transparent 20%),
    radial-gradient(circle at 50% 9%, rgba(255, 255, 255, 0.035), transparent 24%),
    linear-gradient(180deg, #050505, #0a0a09 64%, #050505);
  color: var(--prelude-ink);
  transition: opacity 1.1s ease, visibility 1.1s ease;
}

.prelude-complete .pure-prelude,
.pure-prelude.is-complete {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.prelude-complete .pure-prelude {
  display: none;
}

body.prelude-open {
  overflow: hidden;
}

.pure-prelude__skip,
.pure-prelude__enter {
  position: absolute;
  z-index: 3;
  min-width: 44px;
  min-height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.78);
  background: rgba(8, 8, 7, 0.34);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: none;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.pure-prelude__skip {
  top: max(18px, env(safe-area-inset-top));
  right: max(18px, env(safe-area-inset-right));
  padding: 0 16px;
}

.pure-prelude__enter {
  left: 50%;
  bottom: max(24px, env(safe-area-inset-bottom));
  padding: 0 22px;
  opacity: 0;
  transform: translateX(-50%) translateY(12px);
  animation: prelude-control-in 1s 6.3s forwards;
}

.pure-prelude__skip:hover,
.pure-prelude__enter:hover {
  border-color: rgba(255, 255, 255, 0.42);
  color: #fff;
}

.pure-prelude :focus-visible {
  outline: 2px solid var(--prelude-ink);
  outline-offset: 4px;
}

.pure-prelude__grain {
  position: absolute;
  inset: -35%;
  pointer-events: none;
  opacity: 0.07;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");
  animation: prelude-grain 0.8s steps(2) infinite;
}

.pure-prelude__haze {
  position: absolute;
  width: min(70vw, 1050px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(233, 213, 165, 0.09), rgba(233, 213, 165, 0.02) 35%, transparent 68%);
  filter: blur(60px);
  opacity: 0;
  animation: prelude-haze-in 2.4s 1.1s forwards;
}

.pure-prelude__particles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.pure-prelude__particle {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: rgba(255, 245, 217, 0.7);
  box-shadow: 0 0 8px rgba(255, 235, 190, 0.24);
  animation: prelude-float linear infinite;
}

.pure-prelude__stage {
  position: relative;
  display: grid;
  width: min(92vw, 1280px);
  height: min(82vh, 800px);
  place-items: center;
  perspective: 1200px;
}

.pure-prelude__source-logo {
  position: absolute;
  width: min(86vw, 1100px);
  height: auto;
  opacity: 0;
  pointer-events: none;
}

.pure-prelude__logo-shell {
  position: relative;
  width: min(86vw, 1100px);
  aspect-ratio: 16 / 9;
  transform: translateY(-1.5vh);
}

.pure-prelude__logo-layer,
.pure-prelude__reflection {
  position: absolute;
  inset: 0;
  background: url("/images/logo.png") center / contain no-repeat;
  pointer-events: none;
}

.pure-prelude__logo-shadow {
  opacity: 0;
  filter: blur(22px);
  transform: translateY(8%) scale(1.015);
  animation: prelude-shadow-in 1.8s 4.1s forwards;
}

.pure-prelude__logo-dim {
  opacity: 0;
  filter: brightness(0.72) sepia(0.25) saturate(0.55);
  animation: prelude-dim-in 1.1s 1.1s forwards;
}

.pure-prelude__logo-reveal {
  opacity: 0;
  filter: brightness(1.18) drop-shadow(0 0 18px rgba(225, 196, 132, 0.18));
  mask-image: linear-gradient(100deg, transparent 0%, transparent 42%, #000 49%, #000 53%, transparent 60%, transparent 100%);
  mask-size: 280% 100%;
  mask-position: 120% 0;
  animation: prelude-sweep 3.8s 1.35s cubic-bezier(0.21, 0.78, 0.22, 1) forwards;
}

.pure-prelude__logo-final {
  opacity: 0;
  filter: drop-shadow(0 0 14px rgba(230, 205, 150, 0.11));
  animation: prelude-final-in 1.6s 4.45s forwards, prelude-breathe 4s 6.2s ease-in-out infinite;
}

.pure-prelude__beam {
  position: absolute;
  top: -28%;
  left: -35%;
  width: 28%;
  height: 155%;
  background: linear-gradient(90deg, transparent, rgba(255, 241, 204, 0.025) 25%, rgba(255, 242, 209, 0.18) 48%, rgba(255, 255, 255, 0.34) 50%, rgba(255, 242, 209, 0.13) 53%, transparent 77%);
  filter: blur(12px);
  mix-blend-mode: screen;
  opacity: 0;
  transform: rotate(13deg);
  animation: prelude-beam 4.2s 1.2s cubic-bezier(0.18, 0.78, 0.18, 1) forwards;
}

.pure-prelude__floor {
  position: absolute;
  right: 8%;
  bottom: 4%;
  left: 8%;
  height: 25%;
  background: radial-gradient(ellipse at center, rgba(255, 244, 215, 0.11), rgba(221, 188, 119, 0.025) 38%, transparent 72%);
  filter: blur(18px);
  opacity: 0;
  transform: rotateX(67deg) scaleY(0.62);
  animation: prelude-floor-in 1.7s 4.2s forwards;
}

.pure-prelude__reflection {
  top: 76%;
  height: 42%;
  filter: blur(5px);
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.28), transparent 72%);
  opacity: 0;
  transform: scaleY(-0.62);
  animation: prelude-reflection-in 1.7s 4.45s forwards;
}

.pure-prelude__statement {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@keyframes prelude-control-in { to { opacity: 1; transform: translateX(-50%) translateY(0); } }
@keyframes prelude-grain { 25% { transform: translate(3%, -2%); } 50% { transform: translate(-2%, 3%); } 75% { transform: translate(2%, 2%); } }
@keyframes prelude-haze-in { to { opacity: 1; } }
@keyframes prelude-float { from { opacity: 0; transform: translate3d(0, 20vh, 0); } 18% { opacity: 0.45; } 76% { opacity: 0.18; } to { opacity: 0; transform: translate3d(22px, -115vh, 0); } }
@keyframes prelude-shadow-in { to { opacity: 0.18; } }
@keyframes prelude-dim-in { to { opacity: 0.18; } }
@keyframes prelude-sweep { 10% { opacity: 1; } to { opacity: 1; mask-position: -25% 0; } }
@keyframes prelude-final-in { to { opacity: 1; } }
@keyframes prelude-breathe { 50% { filter: drop-shadow(0 0 22px rgba(230, 205, 150, 0.16)); } }
@keyframes prelude-beam { 12% { opacity: 0.8; } 80% { opacity: 0.5; } to { left: 110%; opacity: 0; } }
@keyframes prelude-floor-in { to { opacity: 0.68; } }
@keyframes prelude-reflection-in { to { opacity: 0.13; } }

@media (max-width: 700px) {
  .pure-prelude__stage { width: 100vw; height: 82svh; }
  .pure-prelude__logo-shell { width: 94vw; transform: translateY(-3vh); }
  .pure-prelude__reflection { top: 72%; height: 35%; transform: scaleY(-0.52); }
  .pure-prelude__floor { right: 1%; bottom: 8%; left: 1%; }
}

@media (prefers-reduced-motion: reduce) {
  .pure-prelude *,
  .pure-prelude *::before,
  .pure-prelude *::after {
    animation: none !important;
    transition: none !important;
  }
  .pure-prelude__grain,
  .pure-prelude__particles,
  .pure-prelude__beam,
  .pure-prelude__reflection { display: none; }
  .pure-prelude__haze { opacity: 1; }
  .pure-prelude__logo-final,
  .pure-prelude__enter { opacity: 1; }
  .pure-prelude__enter { transform: translateX(-50%); }
}