/* ------------------------------------------------
   Polaroid wall hover — subtle shift
   ------------------------------------------------ */

.asset--polaroid-wall-1,
.asset--polaroid-wall-2,
.asset--polaroid-wall-3,
.asset--polaroid-wall-4 {
  pointer-events: auto;
  cursor: grab;
  touch-action: none;
}

.asset--polaroid-wall-1.is-dragging,
.asset--polaroid-wall-2.is-dragging,
.asset--polaroid-wall-3.is-dragging,
.asset--polaroid-wall-4.is-dragging {
  transition: none;
}

.asset.is-axis-draggable {
  cursor: grab;
  touch-action: none;
  transition: transform 90ms ease-out;
}

.asset.is-axis-draggable.is-dragging {
  cursor: grabbing;
  transition: none;
}

.asset.is-axis-draggable.is-settling {
  transition:
    transform var(--drag-settle-out-ms, 140ms) cubic-bezier(0.22, 1, 0.36, 1);
}

.asset--new-yorker {
  transition: transform 180ms ease;
}

.asset--new-yorker.is-hovered {
  transform: translate3d(-6px, -4px, 0) rotate(-2deg);
}

.asset--new-yorker.is-pressed {
  transition: transform 70ms ease-out;
  transform: translate3d(-12px, -6px, 0) rotate(-3.5deg) scale(1.01);
}

.asset--new-yorker.is-settling {
  transition: transform 90ms cubic-bezier(0.22, 1, 0.36, 1);
  transform: translate3d(-3px, -2px, 0) rotate(-0.8deg);
}

/* ------------------------------------------------
   CRT flicker
   ------------------------------------------------ */

@keyframes monitor-flicker {
  0%   { opacity: 1; filter: brightness(1); }
  8%   { opacity: 0.55; filter: brightness(1.7); }
  16%  { opacity: 1; filter: brightness(1.05); }
  28%  { opacity: 0.72; filter: brightness(1.35); }
  38%  { opacity: 1; filter: brightness(1); }
  52%  { opacity: 0.4; filter: brightness(1.95); }
  62%  { opacity: 0.95; filter: brightness(1.15); }
  76%  { opacity: 0.6; filter: brightness(1.45); }
  100% { opacity: 1; filter: brightness(1); }
}

.monitor-hotspot.is-flickering {
  animation: monitor-flicker 0.5s steps(1) forwards;
}

@keyframes monitor-press {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }

  35% {
    transform: translate3d(-4px, 5px, 0) rotate(-0.8deg);
  }

  68% {
    transform: translate3d(-2px, 2px, 0) rotate(-0.3deg);
  }

  100% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
}

.monitor-hotspot.is-pressed-axis {
  animation: monitor-press 0.24s cubic-bezier(0.22, 1, 0.36, 1);
  transform-origin: 50% 90%;
}

/* ------------------------------------------------
   Letter rustle
   ------------------------------------------------ */

@keyframes letter-rustle {
  0%   { transform: rotate(0deg) translateY(0); }
  20%  { transform: rotate(-1deg) translateY(-0.6%); }
  40%  { transform: rotate(0.7deg) translateY(-1%); }
  60%  { transform: rotate(-0.3deg) translateY(-0.6%); }
  80%  { transform: rotate(0.15deg) translateY(-0.2%); }
  100% { transform: rotate(0deg) translateY(0); }
}

@keyframes letter-present {
  0%   { transform: translateY(0) scale(1); }
  100% { transform: translateY(-16%) scale(1.03); }
}

@keyframes letter-press {
  0%   { transform: translateY(0) scale(1); }
  40%  { transform: translateY(3%) scale(0.97); }
  100% { transform: translateY(-16%) scale(1.03); }
}

.typewriter__letter.is-rustling {
  animation: letter-rustle 0.6s ease-out;
}

.typewriter__letter.is-presenting {
  animation: letter-present 0.32s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.typewriter__letter.is-pressing {
  animation: letter-press 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}