.intro {
  position: fixed;
  inset: 0;
  z-index: 1000;
  overflow: hidden;
  background: #000000;
}

.intro__wall {
  position: absolute;
  inset: 0;
  transform-origin: center 42%;
}

.intro__paint {
  position: absolute;
  top: 38%;
  left: 50%;
  width: min(70vw, 760px);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.can {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(130px, 20vw, 220px);
  transition: transform 0.12s var(--ease-cinema);
  filter: drop-shadow(0 18px 30px rgba(0,0,0,0.6));
}
.can img { width: 100%; height: auto; }

/* shake animation, triggered by adding .can--shake (Task 5) */
@keyframes can-shake {
  0%, 100% { transform: translate(-50%, -50%) rotate(0); }
  20% { transform: translate(-58%, -50%) rotate(-7deg); }
  50% { transform: translate(-42%, -50%) rotate(7deg); }
  80% { transform: translate(-54%, -50%) rotate(-4deg); }
}
.can--shake { animation: can-shake 0.32s ease-in-out; }

/* tilt while spraying (Task 6) */
.can--spraying { transform: translate(-50%, -50%) rotate(-18deg) translateY(-10px); transition: transform 0.25s var(--ease-cinema); }

.intro__hint {
  position: absolute;
  top: calc(50% + clamp(95px, 13vw, 150px));
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.85rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--bone-dim);
  animation: hint-pulse 2s ease-in-out infinite;
}
@keyframes hint-pulse { 0%,100% { opacity: 0.4; } 50% { opacity: 1; } }

.intro__skip {
  position: absolute;
  top: var(--s-3);
  right: var(--s-3);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bone-dim);
  opacity: 0.6;
}
.intro__skip:hover { opacity: 1; }

/* overspray dots flicked off the painting edge (Task 6) */
.overspray {
  position: absolute;
  border-radius: 50%;
  background: var(--bone);
  opacity: 0.5;
  transform: translate(-50%, -50%);
  pointer-events: none;
  animation: overspray-fade 0.9s ease-out forwards;
}
@keyframes overspray-fade { to { opacity: 0; transform: translate(-50%, -50%) scale(0.4); } }

/* camera pull-back (Task 7) */
.intro--pullback .intro__wall { transform: scale(0.42) translateY(-6%); transition: transform 1.1s var(--ease-cinema); }
.intro--pullback .intro__paint { opacity: 0; transition: opacity 0.6s ease; }
.intro--pullback .can { opacity: 0; transition: opacity 0.4s ease; }

/* hidden state used to remove the layer after the ritual (Task 7) */
.intro--gone { opacity: 0; visibility: hidden; transition: opacity 0.8s ease; }