@layer components {
  .launch-screen {
    display: none;
  }

  @media (display-mode: standalone) {
    .launch-screen {
      position: fixed;
      inset: 0;
      z-index: 20;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: var(--space-2xs);
      min-block-size: 100dvh;
      padding:
        max(var(--space-xl), env(safe-area-inset-top))
        max(var(--space-l), env(safe-area-inset-right))
        max(var(--space-xl), env(safe-area-inset-bottom))
        max(var(--space-l), env(safe-area-inset-left));
      overflow: hidden;
      background:
        radial-gradient(circle at 50% 42%, color-mix(in oklch, var(--gold) 22%, transparent) 0 8rem, transparent 16rem),
        radial-gradient(circle at 12% 18%, color-mix(in oklch, var(--sage) 18%, transparent), transparent 12rem),
        radial-gradient(circle at 88% 82%, color-mix(in oklch, var(--paprika) 16%, transparent), transparent 14rem),
        var(--paper);
      color: var(--ink);
      opacity: 1;
      visibility: visible;
      transition: opacity 0.35s ease, visibility 0s 0.35s;

      &.is-ready {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
      }

      > strong {
        font-family: var(--font-display);
        font-size: var(--step-2);
        letter-spacing: -0.02em;
      }

      > span {
        color: var(--muted);
        font-size: var(--step-0);
      }
    }

    .launch-scene {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      inline-size: 12rem;
      block-size: 12rem;
      margin: 0 0 var(--space-s);

      .brand-mark {
        z-index: 1;
        inline-size: 7rem;
        block-size: 7rem;
        filter: drop-shadow(0 0.8rem 0.8rem color-mix(in oklch, var(--ink) 18%, transparent));
        animation: launch-bob 1.25s ease-in-out infinite alternate;
      }
    }

    .launch-plate {
      position: absolute;
      inset-inline: 2rem;
      inset-block-end: 1.2rem;
      block-size: 1.7rem;
      border: 0.35rem solid color-mix(in oklch, var(--cream) 75%, var(--mist));
      border-radius: 50%;
      background: var(--cream);
      box-shadow: 0 0.45rem 0.8rem color-mix(in oklch, var(--ink) 14%, transparent);
    }

    .launch-orbit {
      position: absolute;
      inset: 0;
      animation: launch-turn 5s linear infinite;

      span {
        position: absolute;
        inline-size: 1rem;
        block-size: 1rem;
        border-radius: 50%;
        box-shadow: 0 0.25rem 0.5rem color-mix(in oklch, var(--ink) 14%, transparent);

        &:nth-child(1) {
          inset-block-start: 1rem;
          inset-inline-start: 5.5rem;
          background: var(--paprika);
        }

        &:nth-child(2) {
          inset-block-start: 7.5rem;
          inset-inline-start: 0.8rem;
          background: var(--sage);
        }

        &:nth-child(3) {
          inset-block-start: 7.8rem;
          inset-inline-end: 0.7rem;
          background: var(--gold);
        }
      }
    }
  }

  @keyframes launch-bob {
    from { translate: 0 0; rotate: -2deg; }
    to { translate: 0 -0.7rem; rotate: 2deg; }
  }

  @keyframes launch-turn {
    to { rotate: 1turn; }
  }

  @media (prefers-reduced-motion: reduce) {
    .launch-scene .brand-mark,
    .launch-orbit {
      animation: none;
    }

    .launch-screen {
      transition-duration: 0.01s;
    }
  }
}