/* Preset drawer: the cog in the Header and the drawer it slides up over the
   Output scope. The oranges are Header-scoped, not shared tokens. Slides are
   transitions, not keyframes, so a click mid-slide reverses from where the
   drawer is. See docs/features/preset-drawer.md. */

#instrument > header {
  --orange: #E18A50; /* the drawer */
  --orange-deep: #AE6138; /* the cog's cell while the drawer is open */
  --drawer-slide: 320ms; /* drawer, ease-out */
  --cog-cell-slide: 200ms; /* cog cell background, done before the drawer */
  --cog-spin: 320ms; /* one turn of the cog */
  /* Where the drawer's top sits in the Output scope's cell: 50% covers the
     cog's half, as in the sketch; 0 would cover the whole cell. */
  --drawer-top: 50%;
  /* The drawer's background fades from this opacity at its top to solid at
     its bottom, so the Output scope shows through above the buttons. */
  --drawer-top-opacity: 90%;
}

/* The drawer clips to the Output scope's cell and draws over the scope.
   clip, not hidden: a hidden box can still be scrolled, and focusing a
   drawer button mid-slide would scroll the cell to bring it into view. */
.header-scope { overflow: clip; }

.preset-drawer {
  position: absolute;
  inset: var(--drawer-top) 0 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--orange) var(--drawer-top-opacity), transparent),
    var(--orange));
  border-top: 1px solid var(--orange); /* solid edge above the fade */
  color: var(--paper);
  transform: translateY(100%);
  visibility: hidden;
  /* Closing: slide, then hide, so its buttons leave the Tab order. */
  transition: transform var(--drawer-slide) ease-out, visibility 0s linear var(--drawer-slide);
}
/* Opening: show at once, then slide. */
.preset-drawer.open {
  transform: none;
  visibility: visible;
  transition-delay: 0s;
}

.preset-drawer-title {
  margin: 0;
  font-size: 1.5rem;
}

.preset-drawer-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.preset-drawer-buttons button {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.5rem;
  border: 0;
  border-radius: 3px;
  background: var(--orange-deep);
  color: var(--paper);
  font-family: var(--font-sans);
  font-size: 1rem;
  cursor: pointer;
}
.preset-drawer-buttons img { width: 1.2em; height: 1.2em; }
.preset-drawer-buttons button:hover span { text-decoration: underline; }
.preset-drawer-buttons button:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* The cog's cell: a deep orange background slides down from the top under
   the icon, and the cog turns once (clockwise open, counter-clockwise close). */
#presets {
  position: relative;
  overflow: hidden;
}
#presets::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--orange-deep);
  transform: translateY(-100%);
  transition: transform var(--cog-cell-slide) ease-out;
}
#presets[aria-expanded="true"]::before { transform: none; }
/* The cog asset is white: drawn black on the white cell while closed. */
#presets img {
  position: relative;
  filter: brightness(0);
  transition: transform var(--cog-spin) ease-in-out, filter var(--cog-cell-slide) ease-out;
}
#presets[aria-expanded="true"] img { transform: rotate(360deg); filter: none; }

/* Reduced motion: the drawer and the cell fade, and the cog does not spin. */
@media (prefers-reduced-motion: reduce) {
  .preset-drawer {
    transform: none;
    opacity: 0;
    transition: opacity var(--drawer-slide) ease-out, visibility 0s linear var(--drawer-slide);
  }
  .preset-drawer.open { opacity: 1; }
  #presets::before {
    transform: none;
    opacity: 0;
    transition: opacity var(--cog-cell-slide) ease-out;
  }
  #presets[aria-expanded="true"]::before { opacity: 1; }
  #presets img,
  #presets[aria-expanded="true"] img { transform: none; transition: filter var(--cog-cell-slide) ease-out; }
}