/* Full-screen frame around a sealed interactive build
   (public/shared/_interactive_frame, interactive_frame_controller.js).
   Everything inside the iframe belongs to the build, not to this file. */
html.ixf-lock { overflow: hidden; }

/* grows out of the button that opened it, as a circle: a small disc scaled up
   (--bloom, set by the controller) so the GPU does it, with the bar and frame fading in on top */
.ixf { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; overflow: hidden; }
.ixf[hidden] { display: none; }
.ixf-bloom {
  position: absolute; left: var(--ox, 50%); top: var(--oy, 50%); width: 40px; height: 40px; margin: -20px 0 0 -20px;
  border-radius: 50%; background: #212121; transform: scale(0); transition: transform .6s cubic-bezier(.7, 0, .2, 1);
}
.ixf.is-open .ixf-bloom { transform: scale(var(--bloom, 120)); }
.ixf-bar, .ixf-stage { position: relative; opacity: 0; transition: opacity .15s ease-in; }
.ixf.is-open .ixf-bar, .ixf.is-open .ixf-stage { opacity: 1; transition: opacity .2s ease-out .4s; }
@media (prefers-reduced-motion: reduce) {
  .ixf-bloom { transition: none; }
  .ixf-bar, .ixf-stage, .ixf.is-open .ixf-bar, .ixf.is-open .ixf-stage { transition: opacity .2s linear; }
}
.ixf-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex: none;
  min-height: 52px; padding-inline: clamp(16px, 4vw, 32px); background: #212121; color: #ffffff;
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
}
.ixf-brand { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 700; font-size: 13px; line-height: 1; white-space: nowrap; }
.ixf-mark { width: 14px; height: 14px; border-radius: 60% 40% 55% 45% / 55% 45% 58% 42%; background: #ffffff; }
.ixf-exit {
  display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding-inline: 14px; border: 0; border-radius: 9999px;
  background: #ffffff; color: #212121; cursor: pointer; font: 600 13px/1 Inter, system-ui, sans-serif;
}
.ixf-exit:hover { background: #e4e4e4; }
.ixf-exit svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; }
.ixf-stage { position: relative; flex: 1; min-height: 0; background: #212121 center / cover no-repeat; }
.ixf-frame { display: block; width: 100%; height: 100%; border: 0; background: transparent; opacity: 0; transition: opacity .2s ease-out; }
.ixf-frame.is-loaded { opacity: 1; }