:root {
  --intro-bg: #000;
  --focus: #9aff28;
  --draw-duration: 1800ms;
}

* { box-sizing: border-box; }

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--intro-bg);
}

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.scene {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: var(--intro-bg);
}

.background {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

/*
  All transparent PNG elements were prepared on a 2048×1152 canvas.
  The canvas is fitted inside the viewport instead of being cropped.
  This keeps lower buttons and the main CTA fully visible in fullscreen.
*/
.stage-canvas {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(100vw, calc(100vh * 16 / 9));
  height: min(100vh, calc(100vw * 9 / 16));
  aspect-ratio: 16 / 9;
  transform: translate(-50%, -50%);
  overflow: visible;
}

.layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.layer-animated {
  opacity: 0;
  transform: scale(1);
  filter: none;
  clip-path: inset(0 0 0 0);
  transition:
    opacity 780ms ease,
    transform 960ms cubic-bezier(.2, .8, .2, 1),
    filter 780ms ease;
}

.layer-animated.is-visible,
.layer-animated.is-drawn {
  opacity: 1;
  transform: scale(1);
  filter: none;
  clip-path: inset(0 0 0 0);
}

/*
  Graffiti-style drawing imitation:
  - irregular clip-path edge instead of a clean left-to-right reveal;
  - small opacity flicker as if paint is sprayed unevenly;
  - blur/contrast settles into the final clean PNG.
*/
.graffiti-layer {
  clip-path: polygon(0 0, 0 0, 0 10%, 0 22%, 0 38%, 0 54%, 0 69%, 0 86%, 0 100%, 0 100%);
  filter: blur(2px) contrast(1.28) saturate(1.08);
}

.graffiti-layer.is-drawing {
  opacity: 1;
  animation:
    graffitiReveal var(--draw-duration) cubic-bezier(.17, .84, .44, 1) forwards,
    graffitiFlicker var(--draw-duration) steps(8, end) forwards,
    graffitiSettle var(--draw-duration) ease-out forwards;
}

.graffiti-layer.is-drawn,
.graffiti-layer.is-visible {
  opacity: 1;
  clip-path: inset(0 0 0 0);
  filter: none;
}

@keyframes graffitiReveal {
  0% {
    clip-path: polygon(0 0, 0 0, 0 10%, 0 22%, 0 38%, 0 54%, 0 69%, 0 86%, 0 100%, 0 100%);
  }
  9% {
    clip-path: polygon(0 0, 8% 0, 5% 9%, 10% 22%, 6% 37%, 11% 53%, 7% 70%, 12% 85%, 8% 100%, 0 100%);
  }
  18% {
    clip-path: polygon(0 0, 17% 0, 13% 10%, 20% 21%, 15% 39%, 22% 55%, 16% 68%, 23% 87%, 18% 100%, 0 100%);
  }
  31% {
    clip-path: polygon(0 0, 31% 0, 26% 8%, 34% 24%, 29% 38%, 36% 55%, 30% 71%, 38% 86%, 32% 100%, 0 100%);
  }
  44% {
    clip-path: polygon(0 0, 45% 0, 40% 11%, 48% 20%, 42% 39%, 50% 52%, 44% 70%, 52% 88%, 46% 100%, 0 100%);
  }
  58% {
    clip-path: polygon(0 0, 59% 0, 54% 9%, 62% 23%, 56% 36%, 64% 55%, 58% 69%, 66% 85%, 60% 100%, 0 100%);
  }
  72% {
    clip-path: polygon(0 0, 73% 0, 67% 10%, 76% 22%, 70% 38%, 78% 54%, 72% 70%, 80% 87%, 74% 100%, 0 100%);
  }
  86% {
    clip-path: polygon(0 0, 88% 0, 82% 8%, 91% 24%, 85% 40%, 93% 55%, 87% 69%, 95% 86%, 89% 100%, 0 100%);
  }
  100% {
    clip-path: polygon(0 0, 100% 0, 100% 10%, 100% 22%, 100% 38%, 100% 54%, 100% 69%, 100% 86%, 100% 100%, 0 100%);
  }
}

@keyframes graffitiFlicker {
  0% { opacity: .08; }
  12% { opacity: .34; }
  24% { opacity: .18; }
  38% { opacity: .62; }
  52% { opacity: .46; }
  68% { opacity: .82; }
  82% { opacity: .72; }
  100% { opacity: 1; }
}

@keyframes graffitiSettle {
  0% { filter: blur(2.8px) contrast(1.42) saturate(1.12); transform: scale(.992); }
  55% { filter: blur(1.2px) contrast(1.25) saturate(1.1); transform: scale(.997); }
  100% { filter: none; transform: scale(1); }
}

.hotspot {
  position: absolute;
  z-index: 20;
  display: none;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.hotspot.is-active {
  display: block;
}

.hotspot[hidden],
.hotspot:disabled {
  display: none !important;
  pointer-events: none;
  cursor: default;
}

.hotspot:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 4px;
}

/* Coordinates are based on real non-transparent PNG bounds in the 2048×1152 canvas. */
.hotspot-yes {
  left: 19.58%;
  top: 74.48%;
  width: 28.96%;
  height: 15.20%;
}

.hotspot-no {
  left: 53.81%;
  top: 72.74%;
  width: 22.17%;
  height: 19.02%;
}

.hotspot-name {
  left: 21.24%;
  top: 80.03%;
  width: 57.52%;
  height: 19.62%;
}

.hotspot-restart {
  left: 45.70%;
  top: 78.56%;
  width: 8.60%;
  height: 15.63%;
  border-radius: 50%;
}

.loader {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: #000;
  opacity: 1;
  transition: opacity 450ms ease, visibility 450ms ease;
  visibility: visible;
}

.loader.is-hidden {
  opacity: 0;
  visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .layer-animated,
  .graffiti-layer.is-drawing {
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
  }
}

/* Canvas spray renderer for the experimental graffiti version. */
.spray-canvas {
  position: absolute;
  inset: 0;
  z-index: 12;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  transition: opacity 160ms ease;
}

.spray-canvas.is-active {
  opacity: 1;
}

.layer-animated.is-spray-drawing {
  opacity: 0 !important;
  clip-path: none !important;
}