/* "Walk into the room": a scroll-driven story. The door opens, we walk in, the Controller lifts off the table, turns the
   receiver's screen on, and throws a slide to it. A door-opening clip and a room photo with the receiver's real screens fitted into the TV; story.js drives it. */

.story { position: relative; height: 520vh; padding: 0 !important; }
.story-pin { position: sticky; top: 0; height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr); gap: 40px;
  align-items: center; padding: 72px max(16px, calc((100vw - 1240px) / 2)) 24px; box-sizing: border-box; overflow: hidden; }

/* captions */
.story-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.story-steps li { position: relative; padding: 14px 0 14px 46px; color: var(--muted); transition: color 0.35s ease, opacity 0.35s ease; opacity: 0.55; }
.story-steps li::before { content: attr(data-n); position: absolute; left: 0; top: 12px; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; font: 700 14px/1 var(--display); border: 1.5px solid var(--line-strong); color: var(--muted); transition: all 0.35s ease; }
.story-steps b { display: block; font: 700 19px/1.25 var(--display); color: inherit; margin-bottom: 4px; }
.story-steps span { font-size: 15px; line-height: 1.5; }
.story-steps li.on { color: var(--ink); opacity: 1; }
.story-steps li.on::before { background: var(--brand); border-color: var(--brand); color: #fff; }
.story-steps li.done { opacity: 0.8; }
.story-steps li.done::before { border-color: var(--brand); color: var(--brand); }
.story-head .eyebrow { margin-bottom: 10px; }
.story-head h2 { margin: 0 0 22px; }

/* the stage: a 16:9 window onto the office */
.stage3 { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 22px; overflow: hidden; background: #1b1f27;
  box-shadow: 0 40px 80px -30px rgba(11, 18, 32, 0.55); isolation: isolate; }
.stage3 * { box-sizing: border-box; }

/* ---------------------------------------------------------------- the meeting room (photo) */
.room { position: absolute; inset: 0; transform-origin: 50% 43%; will-change: transform; background: #2a2b2d; }
.ph-room { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* The photo's TV (screen x 855-1128, y 410-566 of the 2000x1116 original, cropped at x 8). The receiver's screens sit exactly inside it. */
.r-display { position: absolute; left: 42.69%; top: 36.74%; width: 13.76%; height: 13.98%; transition: box-shadow 0.6s ease; }
.r-display .scr { position: relative; width: 100%; height: 100%; overflow: hidden; }
.r-display img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.r-display .glare { position: absolute; inset: 0; background: linear-gradient(115deg, rgba(255, 255, 255, 0.07), transparent 42%); pointer-events: none; }
.r-display .badge { position: absolute; right: 2.5%; top: 4%; padding: 0.4% 1.8%; border-radius: 999px; background: #22c47a; color: #04140b;
  font: 700 clamp(4px, 0.4vw, 7px)/1.4 var(--font); opacity: 0; transform: translateY(-6px); transition: all 0.3s ease; }
.r-display.lit { box-shadow: 0 0 40px 6px rgba(80, 140, 255, 0.28), 0 0 120px 30px rgba(80, 140, 255, 0.12); }
.r-display.arrived .badge { opacity: 1; transform: none; }
/* A video-call camera bar on top of the TV. */
.r-cam { position: absolute; left: 46.6%; top: 35.1%; width: 6%; height: 1.1%; border-radius: 999px; background: linear-gradient(#2c3036, #121417);
  box-shadow: 0 0.2vw 0.5vw -0.2vw rgba(0, 0, 0, 0.7); }
.r-cam::before { content: ""; position: absolute; left: 50%; top: 50%; height: 70%; aspect-ratio: 1; border-radius: 50%; translate: -50% -50%; background: radial-gradient(circle at 35% 35%, #6a7894, #07080b 62%); }
.r-cam::after { content: ""; position: absolute; right: 10%; top: 50%; height: 26%; aspect-ratio: 1; border-radius: 50%; translate: 0 -50%; background: #22c47a; }

/* ---------------------------------------------------------------- outside the door: footage of it opening, scrubbed by scrolling */
.entry { position: absolute; inset: 0; transform-origin: 50% 16%; will-change: transform, opacity; z-index: 8; }
.ph-door { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* The Room Booking Panel on the wall right of the door (a real panel screen); story.js keeps it on the wall as the camera moves in. */
.door-panel { position: absolute; left: 74%; top: 38%; width: 6%; height: auto; padding: 0.3%; border-radius: 10% / 12.5%; background: #111827; box-shadow: 0 0.4vw 1vw -0.3vw rgba(0, 0, 0, 0.5); will-change: left, top, width; }

/* ---------------------------------------------------------------- the Controller tablet */
.tab3 { position: absolute; left: 0; top: 0; width: 30%; aspect-ratio: 16 / 10.4; transform-origin: 50% 50%; will-change: transform; z-index: 5; }
.tab3-body { position: absolute; inset: 0; border-radius: 9% / 13%; background: #0b0e14; padding: 3.2%; box-shadow: 0 30px 40px -18px rgba(0, 0, 0, 0.6); }
.tab3.floating .tab3-body { animation: hover3 3.2s ease-in-out infinite; }
@keyframes hover3 { 0%, 100% { translate: 0 0; } 50% { translate: 0 -4%; } }
.tab3-scr { position: relative; width: 100%; height: 100%; border-radius: 6% / 9%; background: linear-gradient(#f6f8fd, #e9eef8); overflow: hidden; padding: 5% 6%; font-family: var(--font); }
.t3-bar { display: flex; align-items: center; gap: 4%; font: 800 clamp(6px, 0.85vw, 11px)/1 var(--display); letter-spacing: 0.1em; color: #0b1220; }
.t3-bar img { width: 7%; height: auto; border-radius: 3px; }
.t3-bar i { margin-left: auto; font: 600 clamp(5px, 0.7vw, 9px)/1 var(--font); letter-spacing: 0; font-style: normal; color: #1c2638; padding: 2% 4%; border-radius: 999px; background: #fff; border: 1px solid #dfe5f0; }
.t3-view { position: absolute; left: 6%; right: 6%; top: 24%; bottom: 8%; transition: opacity 0.35s ease, transform 0.35s ease; }
.t3-power { display: grid; place-items: center; align-content: center; gap: 8%; text-align: center; color: #1c2638; font: 600 clamp(6px, 0.8vw, 11px)/1.3 var(--font); }
.t3-power .btn3 { width: 30%; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 2px solid #dfe5f0; transition: all 0.3s ease; }
.t3-power .btn3 svg { width: 46%; height: 46%; stroke: #6b778c; transition: stroke 0.3s ease; }
.t3-power.pressed .btn3 { background: var(--brand); border-color: var(--brand); box-shadow: 0 0 0 6px rgba(31, 107, 255, 0.18); transform: scale(0.94); }
.t3-power.pressed .btn3 svg { stroke: #fff; }
.t3-files { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4%; align-content: center; opacity: 0; transform: translateY(8%); }
.t3-files figure { margin: 0; display: grid; gap: 6%; justify-items: center; padding: 6% 4%; border-radius: 10%; background: #fff; border: 1px solid #dfe5f0;
  font: 600 clamp(5px, 0.7vw, 10px)/1 var(--font); color: #1c2638; }
.t3-files img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 6%; }
.t3-files figure.pick { border-color: var(--brand); box-shadow: 0 0 0 2px rgba(31, 107, 255, 0.25); }
.tab3.files .t3-power { opacity: 0; transform: translateY(-8%); }
.tab3.files .t3-files { opacity: 1; transform: none; }

/* the file in flight */
.fly3 { position: absolute; left: 0; top: 0; width: 9%; aspect-ratio: 16 / 9; border-radius: 4px; border: 2px solid #fff; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
  background: center / cover no-repeat url("/assets/throw/slides-t.jpg"); opacity: 0; z-index: 6; will-change: transform, opacity; pointer-events: none; }
.trail3 { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; }

.scroll-hint { position: absolute; left: 50%; bottom: 3%; translate: -50% 0; z-index: 9; padding: 6px 12px; border-radius: 999px; background: rgba(11, 18, 32, 0.72); color: #fff;
  font: 600 12px/1 var(--font); transition: opacity 0.4s ease; }

@media (max-width: 900px) {
  .story { height: 560vh; }
  .story-pin { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; align-content: center; gap: 18px; padding-top: 70px; }
  .story-head h2 { font-size: 26px; margin-bottom: 8px; }
  .story-head .eyebrow, .story-head p { display: none; }
  .story-steps { order: 2; }
  .story-steps li { display: none; padding: 4px 0 4px 40px; opacity: 1; }
  .story-steps li.on { display: block; }
  .stage3 { order: 1; border-radius: 14px; width: min(100%, calc((100vh - 250px) * 16 / 9)); justify-self: center; }
}

/* Without motion: the story is told by the captions and the final scene, no scroll pinning. */
@media (prefers-reduced-motion: reduce) {
  .story { height: auto; }
  .story-pin { position: relative; height: auto; padding-top: 96px; padding-bottom: 96px; }
  .story-steps li { opacity: 1; color: var(--ink-2); display: block; }
  .scroll-hint { display: none; }
}