/* Wave 3a — Wheel Awakening (cold-open) scene-specific styles.
 * Scoped under .hh-root per Wave 1 risk #5.
 * Pickups + CTA position themselves in logical 800x450 coords inside
 * .hh-interactives (the Scene scaffold's overlay layer).
 */

.hh-root .hh-scene-wheel-awakening {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* The base .hh-interactives layer sits at z-prop (15), creating a
 * stacking context BELOW Bob (engine writes inline z = foot-y, ~442).
 * Pickups inside that layer can never render above Bob no matter their
 * own z-index. Raise the wrapper itself for the cold-open so the spawn
 * overlap doesn't bury the acorn / backpack. */
.hh-root [data-hh-scene="wheel-awakening"] .hh-interactives {
  z-index: 1000;
}

.hh-root .hh-cold-open-pickup {
  position: absolute;
  display: block;
  padding: 0;
  margin: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  pointer-events: auto;
  image-rendering: pixelated;
  /* The engine writes Bob's z-index inline based on his foot-y (logical
   * coords go up to ~450), so we need a value larger than any foot-y
   * the engine will ever produce to keep the cold-open pickups in front
   * of Bob even when his spawn rect overlaps them. */
  z-index: 1000;
}

.hh-root .hh-cold-open-pickup img {
  width: 100%;
  height: 100%;
  display: block;
  image-rendering: pixelated;
  pointer-events: none;
}

.hh-root .hh-cold-open-pickup:focus-visible {
  outline: 2px solid var(--hh-color-acorn);
  outline-offset: 4px;
}

/* Acorn glow — the "power source" canon (PRD §0.13). */
.hh-root .hh-cold-open-acorn {
  animation: hh-acorn-bob 1800ms ease-in-out infinite;
}

.hh-root .hh-cold-open-glow {
  position: absolute;
  inset: -40%;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--hh-color-acorn) 70%, transparent) 0%,
    transparent 70%
  );
  pointer-events: none;
  animation: hh-acorn-glow 1800ms ease-in-out infinite;
  z-index: -1;
}

@keyframes hh-acorn-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}

@keyframes hh-acorn-glow {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50%      { opacity: 0.85; transform: scale(1.15); }
}

/* Backpack fades in after acorn cutscene. */
.hh-root .hh-cold-open-backpack {
  animation: hh-backpack-arrive 600ms ease-out both,
             hh-backpack-bob 2200ms ease-in-out 600ms infinite;
}

@keyframes hh-backpack-arrive {
  0%   { opacity: 0; transform: translateY(-12px) scale(0.6); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes hh-backpack-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}

/* "Step Off the Wheel →" CTA — bottom-center, sits ABOVE the logical
 * stage so it's readable even when stage scale shrinks on small screens. */
.hh-root .hh-cold-open-cta {
  position: absolute;
  left: 50%;
  bottom: clamp(16px, 6vh, 48px);
  transform: translateX(-50%);
  padding: var(--hh-space-3) var(--hh-space-6);
  background: var(--hh-color-acorn);
  color: var(--hh-color-deep);
  border: 3px solid var(--hh-color-deep);
  border-radius: 4px;
  font-family: var(--hh-font-display);
  font-size: clamp(10px, 2.4vw, 14px);
  letter-spacing: 0.04em;
  cursor: pointer;
  pointer-events: auto;
  z-index: var(--hh-z-hud);
  box-shadow: 0 4px 0 var(--hh-color-deep), 0 0 24px
    color-mix(in srgb, var(--hh-color-acorn) 60%, transparent);
  animation: hh-cta-pulse 1400ms ease-in-out infinite;
}

.hh-root .hh-cold-open-cta:hover,
.hh-root .hh-cold-open-cta:focus-visible {
  background: var(--hh-color-cream);
  outline: none;
}

@keyframes hh-cta-pulse {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(-2px); }
}

/* Dial-up cutscene caption — narrator beat in Bob's voice. */
.hh-root .hh-cold-open-cutscene {
  position: absolute;
  left: 50%;
  top: 18%;
  transform: translateX(-50%);
  padding: var(--hh-space-3) var(--hh-space-4);
  background: var(--hh-color-scrim);
  color: var(--hh-color-cream);
  font-family: var(--hh-font-display);
  font-size: clamp(8px, 1.8vw, 11px);
  letter-spacing: 0.06em;
  text-align: center;
  border-radius: 2px;
  z-index: var(--hh-z-cutscene);
  pointer-events: none;
  animation: hh-cutscene-fade 280ms ease-out both;
}

.hh-root .hh-cold-open-cutscene-line {
  display: inline-block;
}

@keyframes hh-cutscene-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .hh-root .hh-cold-open-acorn,
  .hh-root .hh-cold-open-glow,
  .hh-root .hh-cold-open-backpack,
  .hh-root .hh-cold-open-cta {
    animation: none;
  }
}