/*
 * The arrival (src/web/join-scene.ts): the lit doorway every way in shares. Same contract as the Club explainer's sheet:
 *
 *   stage    a fixed 5:3 box in its own teal night, radius 18 (12 on a sheet), so nothing shifts and no pane colour sits behind it
 *   motion   the loop below starts from the night and runs only where the browser allows motion AND scripting is on (join-scene.js adds
 *            .is-playing while a stage is on screen and the tab is shown); reduced motion, Save-Data, Motion: Off and no scripting keep
 *            the still frame the markup draws (door open, lamp lit, the visitor at the door, both bubbles). Transform and opacity only.
 */

.pk-join-stage { position: relative; aspect-ratio: 5 / 3; overflow: hidden; border-radius: 18px; background: #0b1f1b; }
.pk-join-stage--sheet { border-radius: 12px; }
.pk-join-scene { display: block; width: 100%; height: 100%; }

/* The still frame: the door swung open (hinged on its left post), the eyelid up. */
.pk-join-stage .js-door { transform: scaleX(.14); transform-box: fill-box; transform-origin: 0% 50%; }
.pk-join-stage .js-lid { transform: scaleY(0); transform-box: fill-box; transform-origin: 50% 0; }
.pk-join-stage :is(.js-b, .js-house) { transform-box: fill-box; transform-origin: 50% 100%; }
.pk-join-stage .js-b { transform-origin: 50% 50%; }

@media (prefers-reduced-motion: no-preference) and (scripting: enabled) {
  .pk-join-stage { --js-play: paused; }
  .pk-join-stage.is-playing { --js-play: running; }

  .pk-join-stage .js-dusk { animation: pk-js-dusk 9s ease-in-out infinite both; }
  .pk-join-stage .js-lit { animation: pk-js-lit 9s ease-in-out infinite both; }
  .pk-join-stage .js-pulse { animation: pk-js-pulse 3s ease-in-out infinite; }
  .pk-join-stage .js-door { animation: pk-js-door 9s ease-in-out infinite both; }
  .pk-join-stage .js-lid { animation: pk-js-lid 9s ease-in-out infinite both; }
  .pk-join-stage .js-pupil { animation: pk-js-look 9s ease-in-out infinite both; }
  .pk-join-stage .js-house { animation: pk-js-nod 9s ease-in-out infinite both; }
  .pk-join-stage .js-p1 { animation: pk-js-p1 9s ease-in-out infinite both; }
  .pk-join-stage .js-bob1 { animation: pk-js-bob1 9s ease-in-out infinite both; }
  .pk-join-stage .js-b1 { animation: pk-js-b1 9s ease-out infinite both; }
  .pk-join-stage .js-b2 { animation: pk-js-b2 9s ease-out infinite both; }
  .pk-join-stage .js-float--a { animation: pk-js-float 3s ease-in-out infinite; }
  .pk-join-stage .js-float--b { animation: pk-js-float 3s ease-in-out -1.5s infinite; }
  .pk-join-stage .js-star--a { animation: pk-js-twinkle 3s ease-in-out infinite; }
  .pk-join-stage .js-star--b { animation: pk-js-twinkle 3s ease-in-out -1s infinite; }
  .pk-join-stage .js-star--c { animation: pk-js-twinkle 3s ease-in-out -2s infinite; }
  /* Last, so it wins the tie: every loop waits until the stage is on screen. */
  .pk-join-stage .js-scene * { animation-play-state: var(--js-play); }
}

/* Save-Data, Motion: Off and Reduce Motion show the still frame whatever else a browser or an extension tells the page. */
html[data-save="1"] .pk-join-stage .js-scene *, html.pk-save-data .pk-join-stage .js-scene *, html[data-motion="off"] .pk-join-stage .js-scene * { animation: none; }
@media (prefers-reduced-motion: reduce) { .pk-join-stage .js-scene * { animation: none; } }

/* Night, then the lamp warms as the door opens; the room goes dark again at the end so the loop closes on itself. */
@keyframes pk-js-dusk { 0%, 20% { opacity: .5; } 34%, 90% { opacity: 0; } 97%, 100% { opacity: .5; } }
@keyframes pk-js-lit { 0%, 24% { opacity: 0; } 34%, 90% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes pk-js-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .72; } }
@keyframes pk-js-twinkle { 0%, 100% { opacity: .3; } 50% { opacity: .95; } }
@keyframes pk-js-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

/* The door swings open when the visitor is there, and closes behind the night. */
@keyframes pk-js-door { 0%, 25% { transform: scaleX(1); } 33%, 92% { transform: scaleX(.14); } 98%, 100% { transform: scaleX(1); } }
/* The eye opens with the door, blinks once, and looks at the visitor, then up at the bubbles. */
@keyframes pk-js-lid { 0%, 26%, 58.5%, 97%, 100% { transform: scaleY(1); } 31%, 57%, 60%, 94% { transform: scaleY(0); } }
@keyframes pk-js-look { 0%, 30%, 94%, 100% { transform: translate(0, 0); } 34%, 46% { transform: translate(-6px, 2px); } 50%, 62% { transform: translate(-4px, -3px); } 66%, 88% { transform: translate(5px, -3px); } }
/* The house gives a small nod when the second bubble appears. */
@keyframes pk-js-nod { 0%, 52%, 60%, 100% { transform: translateY(0) scale(1, 1); } 55% { transform: translateY(3px) scale(1.02, .97); } 58% { transform: translateY(-2px) scale(.99, 1.01); } }

/* The visitor walks in from the left, bobbing on each step, and stands at the door until the room goes quiet. */
@keyframes pk-js-p1 { 0%, 4% { opacity: 0; transform: translateX(-170px); } 6% { opacity: 1; } 24%, 92% { opacity: 1; transform: translateX(0); } 97%, 100% { opacity: 0; transform: translateX(0); } }
@keyframes pk-js-bob1 { 0%, 4%, 9%, 14%, 19%, 24%, 100% { transform: translateY(0); } 6.5%, 11.5%, 16.5%, 21.5% { transform: translateY(-4px); } }

/* Two bubbles: the visitor says hello, the doorway answers. */
@keyframes pk-js-b1 { 0%, 38% { opacity: 0; transform: translate(18px, 40px) scale(.4); } 41% { opacity: 1; } 47%, 90% { opacity: 1; transform: translate(0, 0) scale(1); } 96%, 100% { opacity: 0; transform: translate(0, 0) scale(1); } }
@keyframes pk-js-b2 { 0%, 50% { opacity: 0; transform: translate(-30px, 30px) scale(.4); } 53% { opacity: 1; } 59%, 90% { opacity: 1; transform: translate(0, 0) scale(1); } 96%, 100% { opacity: 0; transform: translate(0, 0) scale(1); } }