/* Local Calendly-inspired environments: color → moving graphic → one stable UI.
   Palette and shape motion come from the accepted design-system revision 5.
   Graphic timings are our own; no Calendly assets or animation code are used. */
.ambient-scene {
  --ambient-base: #d9e7fc;
  --ambient-a: #73a2d9;
  --ambient-b: #b7e6ed;
  --ambient-c: #c8bef4;
  --ambient-d: #fcfbf8;
  --ambient-ink: #4775b5;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  place-items: center;
  min-width: 0;
  background: var(--ambient-base);
  border-radius: var(--radius-stage-mobile, 24px);
}
.ambient-field, .ambient-graphic {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.ambient-field { z-index: 0; overflow: hidden; border-radius: inherit; }
.ambient-blob {
  position: absolute;
  display: block;
  width: 78%;
  height: 74%;
  border-radius: 42% 58% 63% 37% / 50% 38% 62% 50%;
  filter: blur(38px);
  animation: ambient-orbit 18s ease-in-out -5s infinite alternate;
  animation-play-state: paused;
}
.ambient-blob:nth-child(1) { left: -28%; top: -22%; background: var(--ambient-a); }
.ambient-blob:nth-child(2) { right: -30%; top: 0; height: 92%; background: var(--ambient-b); animation-duration: 22s; animation-delay: -11s; animation-direction: alternate-reverse; }
.ambient-blob:nth-child(3) { left: -6%; bottom: -46%; width: 102%; background: var(--ambient-c); animation-duration: 16s; animation-delay: -8s; }
.ambient-blob:nth-child(4) { left: 20%; top: -30%; height: 64%; background: var(--ambient-d); animation-duration: 24s; animation-delay: -16s; animation-direction: alternate-reverse; }
.ambient-blob:nth-child(5) { right: -28%; bottom: -32%; width: 64%; height: 64%; background: var(--ambient-d); opacity: .7; animation-duration: 20s; animation-delay: -3s; }
.ambient-graphic { z-index: 1; color: #fff; opacity: .2; }
.ambient-shape { fill: currentColor; }
.ambient-track { animation: geometry-horizontal var(--geometry-duration) linear var(--geometry-delay) infinite; animation-play-state: paused; }
.ambient-track--y { animation-name: geometry-vertical; }
.ambient-scene.is-ambient-active :is(.ambient-blob, .ambient-track) { animation-play-state: running; }
.ambient-scene > .product-film { position: relative; z-index: 2; width: 100%; border: 6px solid #ffffffb8; box-shadow: 0 16px 40px #173e6526, 0 2px 5px #173e650d; background: #ffffff80; }
.ambient-scene .film-picture { border-radius: 9px; }
.ambient-scene.editor-stage { display: block; padding: 72px 64px; border-radius: var(--radius-stage, 40px); }
.ambient-scene .editor-shell { z-index: 2; }
.ambient-scene.feature-media { width: 100%; max-width: 560px; height: auto; min-height: 0; aspect-ratio: 680 / 630; padding: 52px 30px; align-self: center; justify-self: center; }
.ambient-scene.feature-media .product-film { margin: 0; }
.ambient-scene.feature-media .film-picture { aspect-ratio: 680 / 590; }
.ambient-scene.footnote-media { padding: 52px 32px; }
.ambient-scene.export-media { height: auto; min-height: 0; padding: 56px 32px; }

/* Each scene retains its approved light placement underneath the broad geometry. */
[data-ambient="editor"] { --ambient-a: #73a2d9; --ambient-b: #9ac7db; --ambient-c: #c8bef4; }
[data-ambient="sources"] { --ambient-base: #d1ecea; --ambient-a: #7bb9c6; --ambient-b: #c9eedc; --ambient-c: #79aabb; --ambient-d: #f0f7e9; --ambient-ink: #377f85; }
[data-ambient="figures"] { --ambient-base: #eddae8; --ambient-a: #c8bef4; --ambient-b: #9fc8ed; --ambient-c: #eba9d2; --ambient-d: #fff2e9; --ambient-ink: #8866ad; }
[data-ambient="contents"] { --ambient-base: #e2ebcc; --ambient-a: #bedc95; --ambient-b: #b7e6ed; --ambient-c: #9ac7bd; --ambient-d: #f5f6dc; --ambient-ink: #5d856e; }
[data-ambient="footnote"] { --ambient-base: #e7e0f4; --ambient-a: #c8bef4; --ambient-b: #d2e8fa; --ambient-c: #eba9d2; --ambient-d: #fff2e9; --ambient-ink: #8e68aa; }
[data-ambient="export"] { --ambient-base: #d9ecec; --ambient-a: #9ac7db; --ambient-b: #b7e6ed; --ambient-c: #c8bef4; --ambient-d: #fff2de; --ambient-ink: #528d9b; }

/* The outer tab environment is also made of moving fields, rather than a flat wash. */
.feature-wash { overflow: hidden; }
.feature-wash::before, .feature-wash::after { content: ''; position: absolute; width: 84%; height: 115%; border-radius: 43% 57% 62% 38%; filter: blur(46px); animation: ambient-orbit 22s ease-in-out -9s infinite alternate; animation-play-state: paused; }
.feature-wash::before { left: -26%; top: -35%; background: #73a2d9; }
.feature-wash::after { right: -24%; bottom: -48%; background: #c8bef4; animation-duration: 18s; animation-delay: -13s; animation-direction: alternate-reverse; }
.wash-sources::before { background: #72c4cd; }.wash-sources::after { background: #c9eedc; }
.wash-figures::before { background: #c8bef4; }.wash-figures::after { background: #efb4d8; }
.wash-contents::before { background: #bedc95; }.wash-contents::after { background: #b7e6ed; }
.feature-stage.is-ambient-active[data-active-feature="0"] .wash-format::before,
.feature-stage.is-ambient-active[data-active-feature="0"] .wash-format::after,
.feature-stage.is-ambient-active[data-active-feature="1"] .wash-sources::before,
.feature-stage.is-ambient-active[data-active-feature="1"] .wash-sources::after,
.feature-stage.is-ambient-active[data-active-feature="2"] .wash-figures::before,
.feature-stage.is-ambient-active[data-active-feature="2"] .wash-figures::after,
.feature-stage.is-ambient-active[data-active-feature="3"] .wash-contents::before,
.feature-stage.is-ambient-active[data-active-feature="3"] .wash-contents::after { animation-play-state: running; }

@keyframes ambient-orbit { 0% { transform: translate(-14%, 9%) rotate(-16deg) scale(1.06); } 50% { transform: translate(6%, -12%) rotate(5deg) scale(1.14); } 100% { transform: translate(16%, 7%) rotate(20deg) scale(1.04); } }
@keyframes geometry-horizontal { from { transform: translateX(0); } to { transform: translateX(var(--geometry-step)); } }
@keyframes geometry-vertical { from { transform: translateY(0); } to { transform: translateY(var(--geometry-step)); } }

@media (max-width: 999px) {
  .ambient-scene.editor-stage { padding: 50px 36px; }
  .ambient-scene.feature-media { max-width: 560px; }
  /* Keep the existing menu's fading field inside narrow page gutters. */
  .add-orbit { inset-inline: 0; }
}
@media (max-width: 760px) {
  .ambient-scene.editor-stage { padding: 34px 14px; border-radius: var(--radius-stage-mobile, 24px); }
  .ambient-scene.feature-media { padding: 32px 16px; aspect-ratio: 680 / 650; border-radius: 18px; }
  .ambient-scene.footnote-media, .ambient-scene.export-media { padding: 36px 18px; border-radius: 22px; }
  .ambient-scene > .product-film { border-width: 4px; }
  .ambient-blob { filter: blur(26px); }
}
@media (prefers-reduced-motion: reduce) {
  .ambient-scene :is(.ambient-blob, .ambient-track),
  .feature-wash::before, .feature-wash::after { animation: none !important; }
}