/* Ramone body-shop cutscene — staged wheel-gun spray, film subtitles */

.ramone-paint-desat {
  filter: grayscale(1) saturate(0) contrast(0.92) brightness(0.96);
  transition: filter 0.7s cubic-bezier(0.22, 0.75, 0.28, 1);
}

.ramone-paint-desat.ramone-paint-wet {
  filter: none;
  animation: ramone-wet-shine 0.85s ease-out;
}

@keyframes ramone-wet-shine {
  0% {
    filter: grayscale(0.35) saturate(0.7) brightness(1.08);
  }
  55% {
    filter: saturate(1.15) brightness(1.06);
  }
  100% {
    filter: none;
  }
}

body.ramone-paint-bw {
  background: #d8d8d4 !important;
}

.ramone-paint {
  position: fixed;
  inset: 0;
  z-index: 5100;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.ramone-paint--active {
  opacity: 1;
}

.ramone-paint--exiting {
  opacity: 0;
}

/* —— Ramone owns the corner —— */
.ramone-paint__car {
  position: absolute;
  left: -22%;
  bottom: -8%;
  width: min(780px, 78vw);
  height: auto;
  filter: drop-shadow(0 18px 26px rgba(0, 0, 0, 0.32));
  transform: translate3d(-125%, 0, 0);
  will-change: transform;
  z-index: 3;
}

.ramone-paint__car--in {
  animation: ramone-drive-in 1.45s cubic-bezier(0.16, 0.72, 0.24, 1) forwards;
}

.ramone-paint__car--look {
  animation: ramone-look 1.1s ease-in-out;
}

.ramone-paint__car--spray {
  animation: ramone-spray-bob 0.9s ease-in-out;
}

.ramone-paint__car--out {
  animation: ramone-drive-off 1.3s cubic-bezier(0.5, 0.02, 0.86, 0.42) forwards;
}

@keyframes ramone-drive-in {
  0% {
    transform: translate3d(-125%, 0, 0);
  }
  72% {
    transform: translate3d(4%, 0, 0) rotate(-1.2deg);
  }
  86% {
    transform: translate3d(-1.5%, 1.2%, 0) rotate(0.8deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
}

@keyframes ramone-look {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  35% {
    transform: translate3d(0, -2.5%, 0) rotate(-1.6deg);
  }
  70% {
    transform: translate3d(0, 0.6%, 0) rotate(0.6deg);
  }
}

@keyframes ramone-spray-bob {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  40% {
    transform: translate3d(1.2%, -1.4%, 0) rotate(-1.2deg);
  }
  70% {
    transform: translate3d(-0.6%, 0.8%, 0) rotate(0.8deg);
  }
}

@keyframes ramone-drive-off {
  0% {
    transform: translate3d(0, 0, 0);
  }
  14% {
    transform: translate3d(-3%, 1%, 0) rotate(2deg);
  }
  100% {
    transform: translate3d(145%, 0, 0) rotate(0deg);
  }
}

/* —— Wheel-mounted paint gun (House of Body Art style) —— */
.ramone-paint__gun {
  position: absolute;
  left: 0;
  top: 0;
  width: 132px;
  height: 78px;
  opacity: 0;
  z-index: 6;
  transform: translate3d(-40px, 0, 0) scale(0.85);
  transition: opacity 0.2s ease;
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.45));
  will-change: transform, opacity;
}

.ramone-paint__gun--on {
  opacity: 1;
}

.ramone-paint__gun-body {
  position: absolute;
  left: 26px;
  top: 26px;
  width: 72px;
  height: 28px;
  border-radius: 14px;
  background: linear-gradient(180deg, #f7f7f7 0%, #c0c0c0 45%, #6e6e6e 100%);
  border: 2px solid #2a2a2a;
}

.ramone-paint__gun-body::before {
  content: '';
  position: absolute;
  left: -18px;
  top: 4px;
  width: 22px;
  height: 20px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #eee, #444 70%);
  border: 2px solid #222;
}

.ramone-paint__gun-cup {
  position: absolute;
  left: 46px;
  top: 2px;
  width: 30px;
  height: 24px;
  border-radius: 5px 5px 10px 10px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.75), transparent 40%),
    linear-gradient(90deg, #2ecc71 0%, #3498db 45%, #e74c3c 100%);
  border: 2px solid #333;
  box-shadow: inset 0 -5px 0 rgba(0, 0, 0, 0.15);
}

.ramone-paint__gun-nozzle {
  position: absolute;
  right: 4px;
  top: 32px;
  width: 26px;
  height: 14px;
  border-radius: 0 8px 8px 0;
  background: linear-gradient(180deg, #eee, #555);
  border: 2px solid #222;
}

.ramone-paint__gun-nozzle::after {
  content: '';
  position: absolute;
  right: -5px;
  top: 3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #111;
}

/* —— Soft spray mist plume (not a full-page dump) —— */
.ramone-paint__mist {
  position: absolute;
  width: 220px;
  height: 140px;
  margin-left: -20px;
  margin-top: -70px;
  border-radius: 50%;
  opacity: 0;
  z-index: 4;
  pointer-events: none;
  mix-blend-mode: screen;
  filter: blur(6px);
  will-change: transform, opacity;
  background:
    radial-gradient(circle at 22% 50%, rgba(255, 255, 255, 0.9), transparent 42%),
    radial-gradient(circle at 48% 36%, rgba(180, 90, 255, 0.45), transparent 55%),
    radial-gradient(circle at 52% 62%, rgba(255, 110, 190, 0.38), transparent 58%),
    radial-gradient(circle at 70% 48%, rgba(90, 200, 255, 0.35), transparent 60%),
    radial-gradient(circle at 40% 55%, rgba(255, 220, 80, 0.28), transparent 62%);
}

.ramone-paint__mist--spray {
  animation: ramone-mist-pass 0.95s ease-out forwards;
}

@keyframes ramone-mist-pass {
  0% {
    opacity: 0;
    transform: scale(0.4) translateX(0);
  }
  12% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(1.55) translateX(var(--rp-pass, 280px));
  }
}

/* —— Film subtitles —— */
.ramone-paint__subs {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 2.75rem 1.25rem 2.1rem;
  text-align: center;
  z-index: 5;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(0, 0, 0, 0.18) 35%,
    rgba(0, 0, 0, 0.55) 100%
  );
  pointer-events: none;
}

.ramone-paint__sub {
  margin: 0 auto;
  max-width: min(44rem, 90vw);
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: clamp(1.15rem, 2.6vw, 1.9rem);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.01em;
  color: #fff;
  text-wrap: balance;
  opacity: 0;
  transform: translate3d(0, 10px, 0);
  transition:
    opacity 0.4s ease,
    transform 0.45s cubic-bezier(0.22, 0.8, 0.28, 1);
  text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.85),
    0 2px 8px rgba(0, 0, 0, 0.75);
}

.ramone-paint__sub--show {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.ramone-paint__layers {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.ramone-paint__particles {
  z-index: 4;
}

.ramone-paint__sparkles {
  z-index: 6;
}

.ramone-paint__particle {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50% 50% 55% 45%;
  opacity: 0;
  background: #b24dff;
  animation: ramone-particle-drop 1.1s ease-in forwards;
}

.ramone-paint__particle:nth-child(3n) {
  width: 5px;
  height: 5px;
  background: #ff6ab0;
}

.ramone-paint__particle:nth-child(3n + 1) {
  background: #5ac8ff;
}

.ramone-paint__particle:nth-child(4n) {
  width: 4px;
  height: 4px;
  background: #ffd24a;
}

@keyframes ramone-particle-drop {
  0% {
    opacity: 0.95;
    transform: translate3d(0, 0, 0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate3d(-18px, 90px, 0) scale(0.35);
  }
}

.ramone-paint__sparkle {
  position: absolute;
  width: 10px;
  height: 10px;
  opacity: 0;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, #ffe9a8 42%, transparent 72%);
  animation: ramone-sparkle 0.9s ease-out forwards;
}

@keyframes ramone-sparkle {
  0% {
    opacity: 0;
    transform: scale(0.2);
  }
  35% {
    opacity: 1;
    transform: scale(1.3);
  }
  100% {
    opacity: 0;
    transform: scale(0.45);
  }
}

@media (max-width: 640px) {
  .ramone-paint__car {
    width: min(420px, 92vw);
    left: -28%;
    bottom: -4%;
  }

  .ramone-paint__gun {
    width: 108px;
    height: 64px;
  }

  .ramone-paint__subs {
    padding: 2.2rem 0.9rem 1.4rem;
  }

  .ramone-paint__sub {
    font-size: clamp(1rem, 4.2vw, 1.25rem);
  }

  .ramone-paint__mist {
    width: 170px;
    height: 110px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ramone-paint,
  .ramone-paint *,
  .ramone-paint-desat {
    animation: none !important;
    transition: none !important;
    filter: none !important;
  }
}

html[data-a11y-motion='reduce'] .ramone-paint,
html[data-a11y-motion='reduce'] .ramone-paint *,
html[data-a11y-motion='reduce'] .ramone-paint-desat {
  animation: none !important;
  transition: none !important;
  filter: none !important;
}