:root {
  --gold: #d2a34f;
  --gold-light: #f0d28b;
  --paper: #e9d7a7;
  --ink: #402214;
  --green: #213d25;
  --red: #4d1919;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  width: 100%;
  min-height: 100%;
  background: #040302;
}

body {
  min-height: 100vh;
  overflow: hidden;
  font-family: Georgia, "Times New Roman", serif;
}

button { font: inherit; }

.experience {
  position: relative;
  width: 100vw;
  height: 100vh;
  min-height: 560px;
  overflow: hidden;
  background: #040302;
  isolation: isolate;
}

.stage-art {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  background: #040302;
  user-select: none;
  -webkit-user-drag: none;
}

.stage-dim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: rgba(0, 0, 0, 0);
  transition: background 900ms ease;
}

.golden-glow {
  position: absolute;
  left: 50%;
  top: 61%;
  z-index: 2;
  width: min(36vw, 540px);
  height: min(24vw, 350px);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  filter: blur(18px);
  background: radial-gradient(ellipse, rgba(255,219,125,.86), rgba(234,158,48,.24) 48%, transparent 74%);
  transition: opacity 1000ms ease;
}

.dust {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  background-image:
    radial-gradient(circle, rgba(255,230,170,.75) 0 1px, transparent 1.6px),
    radial-gradient(circle, rgba(255,230,170,.4) 0 1px, transparent 1.5px);
  background-size: 110px 110px, 170px 170px;
  background-position: 18px 12px, 70px 88px;
  mask-image: linear-gradient(to bottom, transparent 5%, black 25%, black 76%, transparent 95%);
  transition: opacity 900ms ease;
  animation: drift 16s linear infinite;
}

.open-hit-area {
  position: absolute;
  left: 50%;
  top: 86%;
  z-index: 5;
  width: min(34vw, 520px);
  height: min(9vw, 116px);
  transform: translate(-50%, -50%);
  cursor: pointer;
  border: 0;
  border-radius: 18px;
  background: transparent;
  -webkit-tap-highlight-color: transparent;
}

.open-hit-area:focus {
  outline: 3px solid rgba(240,210,139,.7);
  outline-offset: 5px;
}

.ticket-scene {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: grid;
  place-items: center;
  pointer-events: none;
  opacity: 0;
}

.ticket {
  position: absolute;
  left: 50%;
  top: 63%;
  width: min(36vw, 470px);
  min-width: 290px;
  aspect-ratio: 1.45;
  padding: clamp(24px, 4vw, 48px);
  transform: translate(-50%, 110%) scale(.82);
  opacity: 0;
  text-align: center;
  color: var(--ink);
  background:
    radial-gradient(circle at 25% 20%, rgba(255,255,255,.22), transparent 28%),
    linear-gradient(135deg, #f1dfb4, #d8bd7f);
  border: 2px solid #755126;
  box-shadow:
    0 26px 50px rgba(0,0,0,.72),
    inset 0 0 0 7px rgba(113,73,28,.18),
    inset 0 0 35px rgba(79,43,14,.18);
  clip-path: polygon(
    2% 0, 98% 0, 98% 4%, 100% 6%, 98% 8%, 100% 10%, 98% 12%,
    100% 14%, 98% 16%, 100% 18%, 98% 20%, 100% 22%, 98% 24%,
    100% 26%, 98% 28%, 100% 30%, 98% 32%, 100% 34%, 98% 36%,
    100% 38%, 98% 40%, 100% 42%, 98% 44%, 100% 46%, 98% 48%,
    100% 50%, 98% 52%, 100% 54%, 98% 56%, 100% 58%, 98% 60%,
    100% 62%, 98% 64%, 100% 66%, 98% 68%, 100% 70%, 98% 72%,
    100% 74%, 98% 76%, 100% 78%, 98% 80%, 100% 82%, 98% 84%,
    100% 86%, 98% 88%, 100% 90%, 98% 92%, 100% 94%, 98% 96%,
    98% 100%, 2% 100%, 2% 96%, 0 94%, 2% 92%, 0 90%, 2% 88%,
    0 86%, 2% 84%, 0 82%, 2% 80%, 0 78%, 2% 76%, 0 74%,
    2% 72%, 0 70%, 2% 68%, 0 66%, 2% 64%, 0 62%, 2% 60%,
    0 58%, 2% 56%, 0 54%, 2% 52%, 0 50%, 2% 48%, 0 46%,
    2% 44%, 0 42%, 2% 40%, 0 38%, 2% 36%, 0 34%, 2% 32%,
    0 30%, 2% 28%, 0 26%, 2% 24%, 0 22%, 2% 20%, 0 18%,
    2% 16%, 0 14%, 2% 12%, 0 10%, 2% 8%, 0 6%, 2% 4%
  );
}

.ticket::before {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(103,62,22,.72);
  pointer-events: none;
}

.ticket-kicker {
  position: relative;
  z-index: 1;
  font: 700 clamp(.66rem, 1.4vw, .9rem)/1.2 Arial, sans-serif;
  letter-spacing: .15em;
}

.ticket-rule {
  position: relative;
  z-index: 1;
  width: 66%;
  height: 1px;
  margin: 18px auto;
  background: rgba(75,38,15,.55);
}

.movie-title {
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: clamp(1.5rem, 3.7vw, 3.35rem);
  line-height: 1.02;
  font-weight: 700;
  text-transform: uppercase;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
  text-wrap: balance;
  max-width: 94%;
  margin-inline: auto;
}

.movie-title.title-medium { font-size: clamp(1.25rem, 3.15vw, 2.75rem); }
.movie-title.title-long { font-size: clamp(1.02rem, 2.45vw, 2.15rem); line-height: 1.08; }
.movie-title.title-very-long { font-size: clamp(.86rem, 2vw, 1.72rem); line-height: 1.1; }

.movie-year {
  position: relative;
  z-index: 1;
  margin: 18px 0 0;
  font-size: clamp(1.35rem, 3vw, 2.25rem);
  font-weight: 700;
}

.ticket-cat {
  position: relative;
  z-index: 1;
  margin: 16px auto 0;
  width: 26px;
  height: 26px;
  color: transparent;
  border: 1px solid rgba(69,34,12,.65);
  border-radius: 50%;
}

.fate-actions {
  position: absolute;
  left: 50%;
  top: 87%;
  display: flex;
  gap: 18px;
  transform: translate(-50%, 30px);
  opacity: 0;
}

.fate-button, .small-button {
  min-width: 170px;
  padding: 14px 20px;
  color: #f4dfaa;
  border: 1px solid var(--gold);
  background: rgba(19,13,7,.94);
  letter-spacing: .08em;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(0,0,0,.5);
  transition: transform 160ms ease, filter 160ms ease;
}

.fate-button:hover, .small-button:hover { filter: brightness(1.18); transform: translateY(-2px); }
.fate-button.accept { background: rgba(28,59,35,.96); }
.fate-button.tempt { background: rgba(78,25,25,.96); }

.final-scene {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: grid;
  place-content: center;
  justify-items: center;
  text-align: center;
  color: #f3dfad;
  opacity: 0;
  pointer-events: none;
  background: rgba(3,2,1,.74);
  backdrop-filter: blur(3px);
}

.final-kicker {
  margin: 0 0 22px;
  font: 700 .78rem/1 Arial, sans-serif;
  letter-spacing: .28em;
  color: var(--gold);
}

.final-scene h2 {
  max-width: min(820px, 88vw);
  margin: 0;
  font-size: clamp(2.2rem, 7vw, 6.2rem);
  line-height: .95;
  text-transform: uppercase;
}

.final-scene > p:not(.final-kicker) {
  margin: 18px 0 32px;
  font-size: clamp(1.6rem, 4vw, 3rem);
}

.small-button { margin: 7px; }
.small-button.secondary { opacity: .78; }

.status {
  position: absolute;
  left: 50%;
  bottom: 1rem;
  z-index: 10;
  transform: translateX(-50%);
  margin: 0;
  color: rgba(243,223,173,.78);
  font: 700 .72rem/1.2 Arial, sans-serif;
  letter-spacing: .2em;
  text-transform: uppercase;
}

/* State animation */
.experience.revealing .stage-dim { background: rgba(0,0,0,.28); }
.experience.revealing .golden-glow { opacity: 1; }
.experience.revealing .dust { opacity: .52; }
.experience.revealing .open-hit-area { pointer-events: none; }

.experience.revealing .ticket-scene {
  opacity: 1;
  pointer-events: auto;
}

.experience.revealing .ticket {
  animation: ticketRise 3.2s cubic-bezier(.18,.82,.18,1) forwards;
}

.experience.revealing .fate-actions {
  animation: actionsIn .65s ease 4.05s forwards;
}

.experience.final .ticket-scene { opacity: 0; pointer-events: none; }
.experience.final .final-scene {
  opacity: 1;
  pointer-events: auto;
  transition: opacity .7s ease;
}

.experience.tempering .ticket {
  animation: ticketDrop .8s ease forwards;
}

@keyframes ticketRise {
  0%   { transform: translate(-50%, 110%) scale(.82); opacity: 0; }
  18%  { opacity: 1; }
  68%  { transform: translate(-50%, -44%) scale(.96); opacity: 1; }
  78%  { transform: translate(-50%, -44%) scale(.96); opacity: 1; }
  100% { transform: translate(-50%, -58%) scale(1); opacity: 1; }
}

@keyframes actionsIn {
  from { opacity: 0; transform: translate(-50%, 30px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

@keyframes ticketDrop {
  from { transform: translate(-50%, -58%) scale(1); opacity: 1; }
  to   { transform: translate(-50%, 115%) scale(.82); opacity: 0; }
}

@keyframes drift {
  from { transform: translateY(0); }
  to   { transform: translateY(-120px); }
}

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

@media (max-width: 760px) {
  .stage-art {
    object-fit: cover;
  }

  .open-hit-area {
    top: 86%;
    width: 64vw;
    height: 10vh;
  }

  .ticket {
    width: min(78vw, 440px);
    min-width: 0;
  }

  .fate-actions {
    top: 86%;
    width: 92vw;
    gap: 10px;
  }

  .fate-button {
    min-width: 0;
    flex: 1;
    font-size: .78rem;
  }
}

@media (max-height: 690px) {
  .ticket { width: min(31vw, 390px); }
  .fate-actions { top: 88%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-delay: 0ms !important;
    transition-duration: .01ms !important;
  }
}


.fate-actions.single-action { justify-content: center; }
.fate-actions.single-action .accept { min-width: 230px; }
.fate-actions.single-action .tempt { display: none; }
.fate-actions.actions-hidden { opacity: 0 !important; pointer-events: none; animation: none !important; }