/* Firework shows: the list, the page of one show, and the scene with its
   controls. The editor is in fireworks-editor.css, its timeline in
   fireworks-timeline.css and fireworks-bars.css. */

@layer tokens {
  :root {
    /* A firework's bar: its flight, then its glow. */
    --fw-flight: oklch(72% 0.13 240deg);
    --fw-glow: oklch(80% 0.15 75deg);
    --fw-on-bar: var(--night-950);
    --fw-pin: oklch(70% 0.2 25deg);
    --fw-song: oklch(45% 0.1 150deg);
    --fw-panel: var(--night-900);
    --fw-selected: rgb(232 219 179 / 14%);
    --fw-head-size: 11rem;
    --fw-row-size: 2.5rem;
    --fw-panel-size: 20rem;
  }
}

@layer layout {
  /* Pages using the whole width: the show and its editor. */
  .page--wide .site-main,
  .page--app .site-main {
    max-inline-size: none;
  }

  /* The editor fills the window on large screens; it stacks and scrolls
     on small ones. */
  @media (width >= 64em) {
    .page--app {
      block-size: 100dvh;
    }

    .page--app .site-main {
      min-block-size: 0;
      padding-block: var(--space-3);
    }
  }
}

@layer components {
  /* The menu entry of a section that is not open yet. */
  .site-nav__soon {
    opacity: 0.45;
    cursor: default;
  }

  .fw-sprite {
    position: absolute;
  }

  .fw-status {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
  }

  .fw-status--problem {
    font-weight: 600;
    color: var(--color-danger);
  }

  /* The list of shows. */
  .fw-shows {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: var(--space-4);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .fw-shows__item {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
  }

  .fw-shows__name {
    font-size: var(--font-size-lg);
    overflow-wrap: anywhere;
  }

  /* The scene: a 16:9 canvas in a frame that scrolls once zoomed. */
  .fw-stage {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: var(--space-2);
    min-inline-size: 0;
    min-block-size: 0;

    &:fullscreen {
      padding: 0;
      background: var(--night-950);
    }
  }

  .fw-stage__view {
    display: grid;
    aspect-ratio: 16 / 9;
    max-block-size: 80dvh;
    overflow: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-control);
    background: var(--night-950);

    .fw-stage:fullscreen & {
      max-block-size: none;
      border: 0;
    }
  }

  .fw-stage__canvas {
    display: block;
    aspect-ratio: 16 / 9;
    margin: auto;

    /* Sideways drags reach the page (the launch handle, moving the zoomed
       scene); the browser keeps vertical scrolling and pinching. */
    touch-action: pan-y pinch-zoom;

    &[data-over="handle"] {
      cursor: ew-resize;
    }

    &[data-dragging="scene"] {
      cursor: grabbing;
    }
  }

  .fw-stage__tools,
  .fw-controls {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
  }

  .fw-stage__level {
    min-inline-size: 4rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
  }

  .fw-controls__seek {
    flex: 1;
    min-inline-size: 8rem;
    accent-color: var(--color-accent);
  }

  .fw-controls__time,
  .fw-timeline__time {
    font-variant-numeric: tabular-nums;
  }

  .fw-viewer {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }

  /* Play and pause: one sign at a time. */
  .fw-play {
    padding-inline: var(--space-3);
  }

  .fw-play__sign {
    font-size: 1.25rem;
  }

  .fw-play__sign--pause,
  .fw-play--playing .fw-play__sign--play {
    display: none;
  }

  .fw-play--playing .fw-play__sign--pause {
    display: inline-block;
  }
}