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

:root {
  --gold:       #C8972A;
  --gold-light: #E8BC5A;
  --gold-pale:  #F5DFA0;
  --cream:      #FAF3E0;
  --charcoal:   #1A1008;
  --ember:      #D44E0A;
}

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  background: #0A0603;
  font-family: 'Cormorant', Georgia, serif;
}

#stage {
  position: relative;
  width: 100vw; height: 100vh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  overflow: hidden;
}

/* Static background — no animation */
.bg {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 40%,
    #1E0A04 0%, #0A0603 60%, #000 100%);
  z-index: 0;
}

/* Glow: opacity-only pulse — cheapest possible animation */
.mask-glow {
  position: absolute;
  width: 380px; height: 380px;
  top: 50%; left: 50%;
  margin-top: -190px; margin-left: -190px;
  background: radial-gradient(circle,
    rgba(200,151,42,0.14) 0%, rgba(155,28,28,0.07) 40%, transparent 70%);
  border-radius: 50%;
  z-index: 2;
  animation: pulse-opacity 3s ease-in-out infinite alternate;
  will-change: opacity;
}
@keyframes pulse-opacity {
  from { opacity: 0.45; }
  to   { opacity: 1; }
}

/* Decorative lines */
.rule {
  position: absolute; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg,
    transparent 0%, var(--gold) 30%,
    var(--gold-light) 50%, var(--gold) 70%, transparent 100%);
  opacity: 0;
  animation: fade-in 0.6s ease forwards;
  z-index: 5;
}
.rule-top    { top: 14%;    animation-delay: 1.0s; }
.rule-bottom { bottom: 14%; animation-delay: 1.1s; }

/* Corner ornaments */
.corner {
  position: absolute; width: 44px; height: 44px;
  z-index: 5; opacity: 0;
  animation: fade-in 0.5s ease forwards;
  animation-delay: 1.2s;
}
.corner svg { width: 100%; height: 100%; }
.corner--tl { top: 18px;    left: 18px; }
.corner--tr { top: 18px;    right: 18px;  transform: scaleX(-1); }
.corner--bl { bottom: 18px; left: 18px;   transform: scaleY(-1); }
.corner--br { bottom: 18px; right: 18px;  transform: scale(-1,-1); }

/* Content */
.content {
  position: relative; z-index: 10;
  display: flex; flex-direction: column;
  align-items: center;
  width: 100%; max-width: 800px;
  padding: 0 20px;
}

.eyebrow {
  font-family: 'Cinzel', serif;
  font-size: clamp(9px, 2.5vw, 12px);
  letter-spacing: 0.35em; color: var(--gold);
  text-transform: uppercase;
  opacity: 0; margin-bottom: 14px;
  animation: slide-up 0.6s ease forwards;
  animation-delay: 0.1s;
  will-change: opacity, transform;
}

.title-wrap {
  text-align: center; opacity: 0; margin-bottom: 6px;
  animation: slide-up 0.65s ease forwards;
  animation-delay: 0.25s;
  will-change: opacity, transform;
}
.title-main {
  font-family: 'Cinzel', serif;
  font-size: clamp(38px, 9vw, 86px);
  font-weight: 900; color: var(--cream);
  line-height: 0.95; letter-spacing: 0.03em;
  /* Static shadow only — never animate text-shadow */
  text-shadow: 0 2px 6px rgba(0,0,0,0.8);
}
.title-main span {
  background: linear-gradient(135deg,
    var(--gold-pale) 0%, var(--gold-light) 40%, var(--gold) 70%, var(--ember) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.title-year {
  font-family: 'Cinzel', serif;
  font-size: clamp(20px, 5vw, 48px);
  font-weight: 400; color: var(--gold);
  letter-spacing: 0.25em; display: block;
  margin-top: 4px; opacity: 0.85;
}

/* Mask — float is transform only, drop-shadow is STATIC */
.mask-container {
  position: relative;
  width: clamp(130px, 30vw, 210px);
  aspect-ratio: 1;
  margin: clamp(12px, 3vh, 26px) auto;
  opacity: 0;
  animation: slide-up 0.7s cubic-bezier(0.16,1,0.3,1) forwards;
  animation-delay: 0.45s;
  z-index: 3;
  will-change: opacity, transform;
}
.mask-container img {
  width: 100%; height: 100%;
  object-fit: contain;
  /* Static filter — applied once, never re-computed during animation */
  filter: drop-shadow(0 0 18px rgba(200,151,42,0.4));
  animation: float 4.5s ease-in-out infinite;
  will-change: transform;
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}

.tagline {
  font-family: 'Cormorant', serif; font-style: italic;
  font-size: clamp(13px, 2.5vw, 19px);
  color: var(--gold-pale);
  opacity: 0; text-align: center;
  margin-bottom: 8px; letter-spacing: 0.06em;
  animation: fade-in 0.6s ease forwards;
  animation-delay: 0.85s;
  will-change: opacity;
}

.ornament-divider {
  display: flex; align-items: center; gap: 10px;
  opacity: 0; margin: 7px 0 16px;
  animation: fade-in 0.5s ease forwards;
  animation-delay: 0.98s;
  will-change: opacity;
}
.ornament-divider .line {
  width: 64px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold));
}
.ornament-divider .line.r {
  background: linear-gradient(90deg, var(--gold), transparent);
}
.ornament-divider .gem {
  width: 7px; height: 7px;
  background: var(--gold); transform: rotate(45deg); flex-shrink: 0;
}

.ticket-badge {
  font-family: 'Cinzel', serif;
  font-size: clamp(10px, 1.8vw, 13px);
  letter-spacing: 0.28em; padding: 7px 22px;
  border: 1px solid rgba(200,151,42,0.32);
  color: var(--gold-light);
  background: rgba(200,151,42,0.05);
  text-transform: uppercase;
  opacity: 0; margin-bottom: 24px;
  animation: fade-in 0.5s ease forwards;
  animation-delay: 1.1s;
  will-change: opacity;
}
.ticket-badge strong { color: var(--gold-pale); font-weight: 700; }

.enter-btn {
  font-family: 'Cinzel', serif;
  font-size: clamp(11px, 1.8vw, 14px);
  font-weight: 700; letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--charcoal);
  background: linear-gradient(135deg,
    var(--gold-pale) 0%, var(--gold-light) 40%, var(--gold) 100%);
  border: none; cursor: pointer;
  padding: 14px 46px;
  clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
  opacity: 0;
  animation: fade-in 0.5s ease forwards;
  animation-delay: 1.3s;
  /* Only transform transition — no box-shadow (expensive) */
  transition: transform 0.15s ease;
  text-decoration: none; display: inline-block;
  will-change: opacity, transform;
}
.enter-btn:active { transform: scale(0.96); }

/* Progress bar */
.progress-wrap {
  position: absolute;
  bottom: 24px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  z-index: 10; opacity: 0;
  animation: fade-in 0.5s ease forwards;
  animation-delay: 1.6s;
}
.progress-label {
  font-family: 'Cormorant', serif; font-style: italic;
  font-size: 11px; letter-spacing: 0.2em;
  color: rgba(200,151,42,0.4); text-transform: uppercase;
}
.progress-track {
  width: 170px; height: 2px;
  background: rgba(200,151,42,0.1);
  position: relative; overflow: hidden;
}
.progress-fill {
  position: absolute; top: 0; left: 0; bottom: 0;
  background: var(--gold); width: 0%;
  animation: fill-bar 120s linear forwards;
  animation-delay: 1.6s;
}
@keyframes fill-bar { to { width: 100%; } }

/* Skip link */
.skip-hint {
  position: absolute; bottom: 24px; right: 20px;
  font-family: 'Cormorant', serif; font-style: italic;
  font-size: 11px; letter-spacing: 0.15em;
  color: rgba(200,151,42,0.28); z-index: 10;
  opacity: 0; animation: fade-in 0.5s ease forwards;
  animation-delay: 1.9s; cursor: pointer;
  text-transform: uppercase; text-decoration: none;
}

/* Shared keyframes */
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes slide-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
body.fadeout { animation: fadeout 0.55s ease forwards; }
@keyframes fadeout { to { opacity: 0; } }

/* Particles — 8 only, transform+opacity only */
.particle {
  position: absolute; border-radius: 50%;
  background: var(--gold); pointer-events: none;
  z-index: 4; opacity: 0;
  animation: rise linear infinite;
  will-change: transform, opacity;
}
@keyframes rise {
  0%   { opacity: 0;   transform: translateY(0); }
  20%  { opacity: 0.6; }
  80%  { opacity: 0.25; }
  100% { opacity: 0;   transform: translateY(-90px); }
}

@media (max-width: 480px) {
  .rule-top { top: 10%; } .rule-bottom { bottom: 10%; }
  .corner { width: 30px; height: 30px; }
  .corner--tl,.corner--tr { top: 12px; }
  .corner--bl,.corner--br { bottom: 12px; }
  .corner--tl,.corner--bl { left: 12px; }
  .corner--tr,.corner--br { right: 12px; }
}