/* Chromatic surfaces for Overview and the AI Agents catalog. */
@media (forced-colors: none) {
  :is(#overviewClasico, #aagLayout) {
    --dt-showcase-teal: color-mix(in oklab, var(--dt-cyan) 58%, var(--dt-success));
    --dt-showcase-violet: color-mix(in oklab, var(--dt-blue) 68%, var(--dt-coral));
    --dt-showcase-edge: color-mix(in srgb, var(--dt-showcase-teal) 29%, var(--dt-border-strong));
    --dt-showcase-depth: 0 12px 24px -21px color-mix(in srgb, var(--dt-blue) 47%, var(--dt-text));
    --dt-showcase-header: linear-gradient(118deg,
      transparent 12%,
      color-mix(in srgb, var(--dt-showcase-teal) 9%, transparent) 57%,
      color-mix(in srgb, var(--dt-showcase-violet) 16%, transparent) 100%);
    --dt-showcase-card: linear-gradient(135deg,
      color-mix(in srgb, var(--dt-cyan) 9%, transparent),
      transparent 58%,
      color-mix(in srgb, var(--dt-showcase-violet) 8%, transparent));
    --dt-showcase-flow: linear-gradient(123deg,
      transparent 8%,
      color-mix(in srgb, var(--dt-showcase-teal) 24%, transparent) 31%,
      color-mix(in srgb, var(--dt-cyan) 13%, transparent) 46%,
      color-mix(in srgb, var(--dt-showcase-violet) 26%, transparent) 67%,
      transparent 93%);
  }

  #overviewClasico #elArchHomeStage,
  #overviewClasico #elArchUsageStage .el-stage-header,
  #aagLayout .aag-main > .aag-header {
    background-image: var(--dt-showcase-header);
    border-color: var(--dt-showcase-edge);
  }

  #overviewClasico .el-v4-studio-bento > .el-v4-grain-frame {
    background-image: linear-gradient(128deg,
      var(--dt-showcase-teal),
      var(--dt-blue) 55%,
      var(--dt-showcase-violet) 84%,
      color-mix(in srgb, var(--dt-showcase-violet) 72%, var(--dt-text)));
  }

  #overviewClasico #elArchHomeStage .ovd-template-preview,
  #overviewClasico .el-v4-studio-bento > .el-v4-card,
  #aagLayout #aagCreateCard {
    background-image: var(--dt-showcase-card);
    border-color: var(--dt-showcase-edge);
    box-shadow: var(--dt-showcase-depth);
  }

  #overviewClasico .ovd-template-studio .ovd-solution-list [aria-pressed="true"],
  #aagLayout #aagBrowseGrid .aag-btpl-card.is-selected {
    background-image: var(--dt-showcase-card);
    border-color: color-mix(in srgb, var(--dt-blue) 43%, var(--dt-border-strong));
  }

  #aagLayout #aagBrowseTemplatesStage,
  #aagLayout #aagLiveDock {
    border-color: var(--dt-showcase-edge);
    box-shadow: var(--dt-showcase-depth);
  }

  #aagLayout #aagBrowseTemplatesStage .aag-browse-right__bar,
  #aagLayout #aagLiveDock .aag-live-dock__head {
    background-image: var(--dt-showcase-header);
  }

  #overviewClasico #elArchUsageStage .el-stage-header,
  #overviewClasico .ovd-ai-visual,
  #aagLayout #aagBrowseTemplatesStage > .aag-browse-right {
    isolation: isolate;
  }

  /* Only the gradient layer moves. Text, dotted canvases, and the orb are
     independent of it, and the gradient stays inside the existing frame. */
  #overviewClasico #elArchUsageStage .el-stage-header::after,
  #overviewClasico .ovd-ai-visual::after,
  #aagLayout #aagBrowseTemplatesStage > .aag-browse-right::after {
    content: "";
    position: absolute;
    inset: 4% 9%;
    z-index: -1;
    pointer-events: none;
    background: var(--dt-showcase-flow);
    mask-image: linear-gradient(90deg, transparent, #000 13%, #000 87%, transparent),
      linear-gradient(180deg, transparent, #000 15%, #000 85%, transparent);
    mask-composite: intersect;
    opacity: .8;
  }

  @media (prefers-reduced-motion: no-preference) {
    #overviewClasico #elArchUsageStage .el-stage-header::after,
    #overviewClasico .ovd-ai-visual::after,
    #aagLayout #aagBrowseTemplatesStage > .aag-browse-right::after {
      animation: dtShowcaseGradientDrift 10s ease-in-out infinite alternate;
    }

  }
}

@keyframes dtShowcaseGradientDrift {
  from { transform: translate3d(-9%, -3%, 0); opacity: .52; }
  to { transform: translate3d(9%, 3%, 0); opacity: .96; }
}