/* Legacy layout and paint share one cascade layer. Theme recipes own opt-in appearance. */
@layer legacy {
  /* Artwork moves beneath stationary controls. No floating imitation scenery. */
  .menu-scene-host {
    isolation: isolate;
  }
  .menu-scene {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    background:
      radial-gradient(ellipse at 76% 35%, var(--scene-accent, #83dae7), transparent 65%),
      var(--scene-ink, #080e18);
    contain: paint;
  }
  .menu-scene-host > :not(.menu-scene) {
    position: relative;
    z-index: 1;
  }
  /* Frame the supplied poster's drone panels; its promotional copy stays outside
   the live menu. Both the original bytes and the official colors are preserved. */
  [data-menu-scene='droneaid-nl-community'] .menu-scene {
    background: linear-gradient(145deg, #202775, #2935a4);
  }
  [data-menu-scene='droneaid-nl-community'] .menu-scene-art-plane {
    clip-path: inset(7.8% 5% 8.5% 50.7%);
  }
  .menu-scene::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
      linear-gradient(
        90deg,
        rgb(5 10 20 / 94%) 0%,
        rgb(5 10 20 / 75%) 28%,
        rgb(5 10 20 / 22%) 63%,
        rgb(5 10 20 / 8%)
      ),
      linear-gradient(0deg, rgb(5 10 20 / 65%), transparent 30%);
  }
  [data-menu-scene='droneaid-nl-community'] .menu-scene::after {
    background:
      linear-gradient(90deg, rgb(10 12 14 / 84%), rgb(10 12 14 / 60%) 33%, transparent 69%),
      linear-gradient(0deg, rgb(10 12 14 / 58%), transparent 22%);
  }
  .menu-scene-art-plane {
    position: absolute;
    inset: 0;
    transform-origin: center;
  }
  .menu-scene-route {
    position: absolute;
    left: var(--scene-route-left, 48%);
    top: var(--scene-route-top, 5%);
    width: var(--scene-route-width, 50%);
    aspect-ratio: 1;
    z-index: 1;
    color: var(--scene-accent, #83dae7);
    opacity: var(--scene-route-opacity, 0.5);
    mix-blend-mode: screen;
    filter: drop-shadow(0 0 12px color-mix(in srgb, currentcolor 28%, transparent));
  }
  .menu-scene-route::before {
    content: '';
    position: absolute;
    inset: 7%;
    background-image:
      linear-gradient(color-mix(in srgb, currentcolor 12%, transparent) 1px, transparent 1px),
      linear-gradient(90deg, color-mix(in srgb, currentcolor 12%, transparent) 1px, transparent 1px);
    background-size: 8.333% 8.333%;
    mask-image: radial-gradient(circle, #000 18%, transparent 72%);
  }
  .menu-scene-route svg {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
  }
  .menu-scene-route-territory {
    fill: currentcolor;
    opacity: 0;
    animation: menu-route-fill 16s linear infinite;
  }
  .menu-scene-route-ghost {
    stroke: currentcolor;
    stroke-width: 1;
    stroke-linejoin: round;
    opacity: 0.24;
  }
  .menu-scene-route-trail {
    stroke: color-mix(in srgb, currentcolor 82%, white);
    stroke-width: 3;
    stroke-linejoin: round;
    stroke-dasharray: 100;
    animation: menu-route-trace 16s linear infinite;
  }
  .menu-scene-route-player {
    fill: white;
    offset-rotate: 0deg;
    filter: drop-shadow(0 0 7px currentcolor);
    animation: menu-route-player 16s linear infinite;
  }
  .menu-scene-route-node {
    fill: currentcolor;
    opacity: 0.9;
  }
  .menu-scene-route-pulse {
    transform-box: fill-box;
    transform-origin: center;
    animation: menu-route-pulse 2.4s ease-in-out infinite;
  }
  .menu-scene:not([data-loaded='true']) .menu-scene-route {
    opacity: 0;
  }
  .menu-scene[data-motion='off'] .menu-scene-route * {
    animation: none;
  }
  .menu-scene[data-motion='off'] .menu-scene-route-player {
    display: none;
  }
  .menu-scene[data-motion='off'] .menu-scene-route-territory {
    opacity: 0.06;
  }
  .menu-scene-art,
  .menu-scene-art-motion,
  .menu-scene-reception {
    display: block;
    width: 100%;
    height: 100%;
  }
  .menu-scene-art {
    object-fit: cover;
    object-position: var(--scene-focal, 68% 50%);
    opacity: 0;
  }
  .menu-scene-art-motion,
  .menu-scene-reception {
    position: absolute;
    inset: 0;
  }
  .menu-scene[data-loaded='true'] .menu-scene-art {
    opacity: 1;
  }
  /* One camera owner for every still, even when WebGL animates selected picture regions. */
  .menu-scene[data-loaded='true'][data-motion='on'] .menu-scene-art-plane {
    animation: menu-art-settle 6s cubic-bezier(0.2, 0.65, 0.3, 1) both;
  }
  .menu-scene[data-loaded='true'][data-motion='on'][data-renderer='webgl'] .menu-scene-art {
    visibility: hidden;
  }
  .menu-scene-art-motion[hidden],
  .menu-scene-reception[hidden],
  .menu-scene:not([data-loaded='true']) .menu-scene-reception,
  .menu-scene[data-motion='off'] .menu-scene-reception,
  .menu-scene:not([data-loaded='true']) .menu-scene-art-motion,
  .menu-scene[data-motion='off'] .menu-scene-art-motion {
    display: none;
  }
  .menu-scene-signal {
    position: absolute;
    inset: 0;
    background: url('./art/menu-scenes/analog-noise-atlas.png') 0 0 / 400% 100% no-repeat;
    mix-blend-mode: soft-light;
    opacity: var(--scene-signal-opacity, 0.03);
    animation: menu-signal-frames 1s step-end infinite;
  }
  .menu-scene[data-running='false'] *,
  .menu-scene[data-running='false'] *::before,
  .menu-scene[data-running='false'] *::after {
    animation-play-state: paused !important;
  }
  .menu-scene:not([data-loaded='true']) .menu-scene-signal,
  .menu-scene[data-motion='off'] .menu-scene-signal {
    display: none;
    animation: none;
  }
  @keyframes menu-art-settle {
    from {
      transform: scale(1);
    }
    to {
      transform: scale(1.035);
    }
  }
  @keyframes menu-signal-frames {
    0%,
    100% {
      background-position: 0 0;
    }
    25% {
      background-position: 33.333333% 0;
    }
    50% {
      background-position: 66.666667% 0;
    }
    75% {
      background-position: 100% 0;
    }
  }
  @keyframes menu-route-trace {
    0% {
      stroke-dashoffset: 100;
      opacity: 0.18;
    }
    70%,
    88% {
      stroke-dashoffset: 0;
      opacity: 1;
    }
    100% {
      stroke-dashoffset: 0;
      opacity: 0.12;
    }
  }
  @keyframes menu-route-player {
    0% {
      offset-distance: 0%;
      opacity: 0;
    }
    4%,
    88% {
      opacity: 1;
    }
    70%,
    100% {
      offset-distance: 100%;
    }
    100% {
      opacity: 0;
    }
  }
  @keyframes menu-route-fill {
    0%,
    64% {
      opacity: 0;
    }
    74%,
    88% {
      opacity: 0.1;
    }
    100% {
      opacity: 0;
    }
  }
  @keyframes menu-route-pulse {
    50% {
      transform: scale(1.8);
      opacity: 0.28;
    }
  }
  @media (orientation: portrait) {
    .menu-scene-route {
      left: var(--scene-route-portrait-left, 28%);
      top: var(--scene-route-portrait-top, 3%);
      width: var(--scene-route-portrait-width, 71%);
    }
    .menu-scene::after {
      background: linear-gradient(
        0deg,
        rgb(5 10 20 / 94%) 0%,
        rgb(5 10 20 / 73%) 35%,
        rgb(5 10 20 / 23%) 80%
      );
    }
    [data-menu-scene='droneaid-nl-community'] .menu-scene::after {
      background: linear-gradient(
        0deg,
        rgb(10 12 14 / 86%),
        rgb(10 12 14 / 66%) 48%,
        rgb(10 12 14 / 15%)
      );
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .menu-scene .menu-scene-signal,
    .menu-scene .menu-scene-reception,
    .menu-scene .menu-scene-art-motion {
      display: none;
      animation: none;
    }
    .menu-scene[data-loaded='true'] .menu-scene-art {
      visibility: visible;
    }
    .menu-scene .menu-scene-art-plane {
      animation: none !important;
      transform: none;
    }
    .menu-scene .menu-scene-route * {
      animation: none !important;
    }
    .menu-scene .menu-scene-route-player {
      display: none;
    }
    .menu-scene .menu-scene-route-territory {
      opacity: 0.06;
    }
  }
}