/* The selected product owns one light color field. Nothing runs while idle.
   Registered colors blend on real app/world selection; source media stays intact. */
@property --atmosphere-a {
  syntax: "<color>";
  inherits: true;
  initial-value: #7945ed;
}
@property --atmosphere-b {
  syntax: "<color>";
  inherits: true;
  initial-value: #ef57ad;
}

:root {
  --atmosphere-a: #7945ed;
  --atmosphere-b: #ef57ad;
  --atmosphere-action-a: #5124b7;
  --atmosphere-action-b: #9c216b;
}

/* Studio and the full product share one light material, from identity to proof. */
:root,[data-product] {
  --workspace-paper:#eee8ff;
  --workspace-light:#ffd7ef;
  --workspace-surface:
    radial-gradient(ellipse 82% 72% at 100% 0,var(--workspace-light),transparent 78%),
    linear-gradient(140deg,#fffefc30,transparent 70%),var(--workspace-paper);
}
[data-product="aftertone"] { --workspace-paper:#ffe5f5; --workspace-light:#dbc9ff; }
[data-product="iosamp"] { --workspace-paper:#def4ff; --workspace-light:#e8d5ff; }
[data-product="edge"] { --workspace-paper:#e5f6ed; --workspace-light:#e8f2c4; }
[data-product="image"] { --workspace-paper:#fff0dd; --workspace-light:#ffdade; }
.app-panel[data-product="iosamp"]:has([data-app-view="experience"]:not([hidden]) .iosamp-workspace[data-selected-mode="metal"]) { --workspace-paper:#eff3d9; --workspace-light:#ffedc1; }
.app-panel[data-product="iosamp"]:has([data-app-view="experience"]:not([hidden]) .iosamp-workspace[data-selected-mode="audio"]) { --workspace-paper:#e2f0f3; --workspace-light:#f4e9d6; }

body {
  transition:
    --atmosphere-a .34s cubic-bezier(.22,.8,.24,1),
    --atmosphere-b .34s cubic-bezier(.22,.8,.24,1);
}

body[data-active-app="comfy"],
body[data-default-app="comfy-companion"]:not([data-active-app]) {
  --atmosphere-a: #7945ed;
  --atmosphere-b: #ef57ad;
}
body[data-active-app="aftertone"],
body[data-default-app="aftertone"]:not([data-active-app]) {
  --atmosphere-a: #e34ab8;
  --atmosphere-b: #7b43ec;
}
body[data-active-app="iosamp"],
body[data-default-app="iosamp"]:not([data-active-app]) {
  --atmosphere-a: #16bfd3;
  --atmosphere-b: #d84bdb;
}
body[data-active-app="edge"],
body[data-default-app="the-edge"]:not([data-active-app]) {
  --atmosphere-a: #19af97;
  --atmosphere-b: #b8d640;
}
body[data-active-app="image"],
body[data-default-app="image-studio"]:not([data-active-app]) {
  --atmosphere-a: #eea239;
  --atmosphere-b: #ee769c;
}

/* IOSAMP's recordings have distinct materials. These fields follow the
   existing selected mode, never sound level or purported live rendering.
   Hidden/revisited app modes cannot recolor the Studio or another product. */
body[data-active-app="iosamp"]:has(.app-panel[data-product="iosamp"]:not([hidden]) [data-app-view="experience"]:not([hidden]) .iosamp-workspace[data-selected-mode="metal"]) {
  --atmosphere-a: #b3c357;
  --atmosphere-b: #dfbf58;
}
body[data-active-app="iosamp"]:has(.app-panel[data-product="iosamp"]:not([hidden]) [data-app-view="experience"]:not([hidden]) .iosamp-workspace[data-selected-mode="audio"]) {
  --atmosphere-a: #88bfce;
  --atmosphere-b: #d8bd94;
}

/* One shared surface replaces the former flat canvas. Broad fields sit
   around the artwork; two white washes keep the identity and reading side
   quiet. There is no overlay on imagery, video, or native app captures. */
.app-canvas {
  background:
    linear-gradient(180deg,
      #fffefcf5 0,
      #fffefcdc 210px,
      #fffefc29 390px,
      #fffefc00 560px),
    linear-gradient(112deg,
      #fffefcde 0%,
      #fffefc85 32%,
      #fffefc00 65%),
    radial-gradient(ellipse 100% 62% at 94% 70%,
      color-mix(in srgb,var(--atmosphere-b) 42%,transparent) 0%,
      color-mix(in srgb,var(--atmosphere-b) 18%,transparent) 45%,
      transparent 76%),
    radial-gradient(ellipse 94% 64% at 16% 74%,
      color-mix(in srgb,var(--atmosphere-a) 44%,transparent) 0%,
      color-mix(in srgb,var(--atmosphere-a) 17%,transparent) 49%,
      transparent 78%),
    #fffefc;
}
.studio-view.studio-surface {
  background: transparent;
}

/* The collection uses the original brain's complete spectrum rather than
   inheriting one app's field before the visitor has chosen a workspace. */
body[data-active-app="studio"][data-studio-view="launch"] .app-canvas {
  background:
    radial-gradient(ellipse 60% 46% at 8% 40%,#31c8ff26,transparent 80%),
    radial-gradient(ellipse 62% 42% at 100% 24%,#ff9c492b,transparent 78%),
    radial-gradient(ellipse 76% 58% at 82% 88%,#ef57ad44,transparent 78%),
    radial-gradient(ellipse 76% 54% at 12% 88%,#7945ed3d,transparent 80%),
    #fffefc;
}

/* These endpoints are deliberately darker than the atmospheric colors.
   They keep white action text readable throughout each app's gradient. */
[data-product="comfy"] {
  --atmosphere-action-a: #5124b7;
  --atmosphere-action-b: #9c216b;
}
[data-product="aftertone"] {
  --atmosphere-action-a: #941d7a;
  --atmosphere-action-b: #4d29a8;
}
[data-product="iosamp"] {
  --atmosphere-action-a: #065f96;
  --atmosphere-action-b: #84288c;
}
[data-product="edge"] {
  --atmosphere-action-a: #075e50;
  --atmosphere-action-b: #3f641b;
}
[data-product="image"] {
  --atmosphere-action-a: #864014;
  --atmosphere-action-b: #8d2852;
}
.studio-product-action {
  background: linear-gradient(108deg,var(--atmosphere-action-a),var(--atmosphere-action-b));
  border-color: var(--atmosphere-action-a);
  color: #fff;
}

@media(width <768px) {
  /* Phones place text above the media rather than beside it. A horizontal
     wash would suppress almost the whole color field at this width. */
  .app-canvas {
    background:
      linear-gradient(180deg,
        #fffefcf2 0,
        #fffefcda 180px,
        #fffefc65 300px,
        #fffefc00 470px),
      radial-gradient(ellipse 110% 63% at 96% 73%,
        color-mix(in srgb,var(--atmosphere-b) 38%,transparent) 0%,
        color-mix(in srgb,var(--atmosphere-b) 15%,transparent) 49%,
        transparent 80%),
      radial-gradient(ellipse 110% 65% at 0% 72%,
        color-mix(in srgb,var(--atmosphere-a) 39%,transparent) 0%,
        color-mix(in srgb,var(--atmosphere-a) 14%,transparent) 50%,
        transparent 80%),
      #fffefc;
  }
}

@media(prefers-reduced-motion:reduce) {
  body { transition: none; }
}
body.motion-paused { transition: none; }