/* Hero sketch scene: the boss asks for the photos, the tech snaps them,
   the parachute delivers them. Everything is scoped under .fdh-. */
.fdh-scene {
  position: relative; width: 100%; max-width: 560px; margin: 0 auto;
  aspect-ratio: 740 / 490; border-radius: 24px; overflow: hidden;
  background: #101317; container-type: inline-size;
  box-shadow: 0 24px 60px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.06);
  isolation: isolate;
  --fdh-crop: wide;
}
/* Phones: a tighter, taller crop (hero-scene.js picks it from this aspect ratio). */
@media (max-width: 600px) { .fdh-scene { aspect-ratio: 604 / 486; border-radius: 20px; --fdh-crop: tight; } }
.fdh-stage { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.fdh-chute { position: absolute; left: 0; top: 0; pointer-events: none; opacity: 0; max-width: none; }
.fdh-bubble {
  position: absolute; left: 0; top: 0; max-width: 64%; box-sizing: border-box;
  padding: .6em .85em; border-radius: 14px;
  background: rgba(19,22,29,.94); color: #f4f5f7; border: 1px solid rgba(246,164,0,.45);
  font-weight: 600; font-size: clamp(12px, 3.4cqw, 15px); line-height: 1.3; text-align: left;
  box-shadow: 0 8px 24px rgba(0,0,0,.55); pointer-events: none;
  opacity: 0; transform: translateY(6px); transition: opacity .25s, transform .25s;
  overflow-wrap: normal;
}
.fdh-bubble::after {
  content: ''; position: absolute; bottom: -7px; left: var(--tail, 22px);
  width: 12px; height: 12px; background: rgba(19,22,29,.94);
  border-right: 1px solid rgba(246,164,0,.45); border-bottom: 1px solid rgba(246,164,0,.45);
  transform: rotate(45deg);
}
.fdh-bubble.on { opacity: 1; transform: none; }
/* Pause / play: a quiet glass button in the corner with a 44px target. */
.fdh-pause {
  position: absolute; right: 6px; bottom: 6px; width: 44px; height: 44px; padding: 0; margin: 0;
  display: grid; place-items: center; border: 0; background: none; cursor: pointer; color: #f4f5f7;
  -webkit-tap-highlight-color: transparent;
}
.fdh-pause::before {
  content: ''; position: absolute; inset: 6px; border-radius: 50%;
  background: rgba(19,22,29,.62); border: 1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: border-color .2s;
}
.fdh-pause:hover::before, .fdh-pause:focus-visible::before { border-color: rgba(246,164,0,.7); }
.fdh-pause:focus-visible { outline: none; }
.fdh-pause[hidden] { display: none; }
.fdh-pause svg { position: relative; width: 14px; height: 14px; }
.fdh-pause .fdh-ico-play { display: none; }
.fdh-pause.is-paused .fdh-ico-play { display: block; }
.fdh-pause.is-paused .fdh-ico-pause { display: none; }
@media (prefers-reduced-motion: reduce) {
  .fdh-bubble, .fdh-pause { display: none; }
}