@font-face {
  font-family: 'Cinema Anton';
  src: url('../assets/fonts/Anton-Regular.ttf') format('truetype');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

.cinema-ticket,
.cinema-ticket * { box-sizing: border-box; }

.cinema-ticket {
  --ticket-ink: #222;
  --ticket-paper: #f8f8f7;
  position: fixed;
  inset: 0;
  z-index: 100;
  overflow: hidden;
  isolation: isolate;
  background: #1d1d1d;
  color: var(--ticket-paper);
  font-family: Helvetica, Arial, sans-serif;
  overscroll-behavior: contain;
  transition: opacity .18s linear;
}

.cinema-ticket.is-entered { opacity: 0; pointer-events: none; visibility: hidden; }
.cinema-ticket__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: none; }
.cinema-ticket.has-webgl .cinema-ticket__canvas { display: block; }
.cinema-ticket.has-webgl .cinema-ticket__fallback { display: none; }

.cinema-ticket__fallback {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  padding: 28px;
}

.cinema-ticket__paper {
  position: relative;
  width: min(740px, 88vw);
  padding: 35px 40px;
  background: var(--ticket-paper);
  color: var(--ticket-ink);
  border-radius: 2px;
}
.cinema-ticket__paper p { margin: 0; }
.cinema-ticket__presenter { font-size: 11px; letter-spacing: .19em; }
.cinema-ticket__artist { margin: 20px 0 12px !important; font: 400 clamp(35px, 8vw, 78px)/.98 'Cinema Anton', Impact, sans-serif; }
.cinema-ticket__tour { font-size: 13px; letter-spacing: .13em; }
.cinema-ticket__venue { margin-top: 23px !important; font-size: 12px; letter-spacing: .035em; }
.cinema-ticket__date { margin-top: 7px !important; font-size: 12px; }

.cinema-ticket__choices {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(250px, 46vw);
  height: min(440px, 65svh);
  display: flex;
  flex-direction: column;
  color: var(--ticket-paper);
  background: var(--ticket-ink);
}
.cinema-ticket:not(.has-webgl) .cinema-ticket__fallback { opacity: .07; }
.cinema-ticket__choice {
  appearance: none;
  position: relative;
  width: 100%;
  height: 50%;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 14px;
  border: 0;
  border-radius: 0;
  font: inherit;
  color: inherit;
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
}
.cinema-ticket__choice + .cinema-ticket__choice { border-top: 1px dashed rgb(255 255 255 / .42); }
.cinema-ticket__choice:hover { background: var(--ticket-paper); color: var(--ticket-ink); }
.cinema-ticket__choice:focus-visible { outline: 2px solid white; outline-offset: 6px; z-index: 2; }
.cinema-ticket__choice[disabled] { cursor: default; }
.cinema-ticket__enter { font-size: 18px; letter-spacing: .15em; margin-bottom: 11px; }
.cinema-ticket__sound { font: 400 clamp(25px, 5vw, 42px)/1.02 'Cinema Anton', Impact, sans-serif; }
.cinema-ticket:lang(tr) .cinema-ticket__sound { line-height: 1.42; }

/* On WebGL these are real hit targets over the rendered surface. Their bounds
   follow the projected paper; opacity only affects ink, never keyboard focus. */
.cinema-ticket.has-webgl .cinema-ticket__choices {
  inset: 0;
  width: 100%;
  height: 100%;
  transform: none;
  background: none;
  pointer-events: none;
  display: block;
}
.cinema-ticket.has-webgl .cinema-ticket__choice {
  position: absolute;
  display: block;
  padding: 0;
  background: transparent;
  color: transparent;
  border: none;
  pointer-events: auto;
}
.cinema-ticket.has-webgl .cinema-ticket__choice span { opacity: 0; }
.cinema-ticket.has-webgl .cinema-ticket__choice[disabled] { pointer-events: none; }
.cinema-ticket.has-webgl .cinema-ticket__choice:focus-visible { outline: 2px solid white; outline-offset: 4px; }
.cinema-ticket.has-webgl:not(.is-ready) .cinema-ticket__choices { visibility: hidden; }

.cinema-ticket__caption {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: max(29px, env(safe-area-inset-bottom));
  text-align: center;
  font-size: 9px;
  line-height: 1.5;
  letter-spacing: .19em;
  opacity: .58;
  pointer-events: none;
}
.cinema-ticket__skip {
  position: absolute;
  bottom: 65px;
  left: 50%;
  transform: translateX(-50%);
  color: white;
  font-size: 11px;
  line-height: 1.6;
  text-decoration: underline;
  background: none;
  border: 0;
  padding: 8px;
  cursor: pointer;
  opacity: 0;
}
.cinema-ticket__skip:focus-visible { opacity: 1; outline: 2px solid white; outline-offset: 4px; }
.cinema-ticket.is-ready .cinema-ticket__skip { display: none; }
.cinema-ticket__status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.cinema-ticket__noscript { position: absolute; bottom: 75px; left: 10%; right: 10%; text-align: center; font-size: 14px; }
.cinema-ticket__noscript a { color: white; }

/* Demo only. The component's event is the handoff to the real cinematic scene. */
.ticket-demo { margin: 0; background: #050505; color: #fff; }
.demo-film { min-height: 100svh; padding: max(60px, 8vw); display: flex; flex-direction: column; justify-content: center; opacity: 0; }
.demo-film.is-visible { opacity: 1; transition: opacity .45s ease; }
.demo-film:focus { outline: none; }
.demo-film__eyebrow { font: 11px/1.5 Helvetica, Arial, sans-serif; letter-spacing: .18em; }
.demo-film h1 { font: 400 clamp(70px, 15vw, 230px)/.95 'Cinema Anton', Impact, sans-serif; letter-spacing: -.015em; margin: 20px 0 35px; }
.demo-film__note { font: 14px/1.7 Helvetica, Arial, sans-serif; color: #aaa; }
.demo-film__replay { align-self: flex-start; border: 1px solid #666; padding: 12px 18px; margin-top: 15px; background: none; color: #fff; cursor: pointer; }
.demo-film__replay:focus-visible { outline: 2px solid white; outline-offset: 4px; }

@media (max-width: 600px) {
  .cinema-ticket__caption { font-size: 8px; letter-spacing: .12em; bottom: max(20px, env(safe-area-inset-bottom)); }
  .cinema-ticket__paper { padding: 25px; }
  .demo-film { padding: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .cinema-ticket, .demo-film.is-visible { transition: none; }
}