/* =========================================================================
   The tray

   A pill of liquid glass, centred at the foot of the screen, that follows
   the reader down the page with the build so far: the model, then the
   cladding and the palette as colour dots with their names, then the
   delivery. Anything not yet chosen holds its place, dimmed, with an
   empty dot. Each part is a way back to where it is chosen — the
   cladding to the exteriors, the palette to the interiors, the model to
   the chooser — and the delivery goes on to My SOLUM. Every part but the
   model carries a dot: the finish's colour, the gold for the delivery,
   or an empty ring until it is chosen.

   It rises into place once the reader is past Choose your SOLUM and sinks
   away wherever My SOLUM or the form is on screen, or a scene fills the
   screen; and it rises for a moment wherever the reader is when a choice
   is locked in (src/js/ui/my-solum.js).
   ========================================================================= */

/* The layer the tray sits in: the whole screen, passing the pointer
   through to the page, so the tray keeps its place on the screen in it.
   While the tray is a tab it casts a shadow onto the card round its notch,
   to lift it off the card; the layer casts it, as the tab's own would be
   clipped away with its shape. (Only then: a layer with a filter is what
   the glass sees through, and over the pictures at the foot of the screen
   the tray's glass needs the page.) */
.tray-layer {
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  transition: filter 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.tray-layer:has(> .tray.is-docked.is-shown) {
  filter:
    drop-shadow(0 2px 4px rgb(0 0 0 / 0.6))
    drop-shadow(0 10px 24px rgb(0 0 0 / 0.8));
}

.tray {
  position: fixed;
  z-index: 40;
  pointer-events: auto;
  left: 50%;
  bottom: calc(var(--space-5) + var(--safe-bottom));
  display: flex;
  align-items: center;
  gap: 0;
  max-width: calc(100vw - 2 * var(--gutter-safe));
  padding: 0.35rem 0.5rem;
  border-radius: 999px;
  color: var(--c-ink);
  /* the page's glass (tokens.css, liquid glass), a touch more frosted for
     the tray, which passes over pictures */
  background: var(--glass-frost);
  -webkit-backdrop-filter: blur(28px) saturate(1.25) brightness(0.9);
  backdrop-filter: blur(28px) saturate(1.25) brightness(0.9);
  box-shadow: var(--glass-edge), var(--glass-shadow);

  /* out of sight until it is wanted */
  translate: -50% calc(100% + var(--space-6));
  opacity: 0;
  visibility: hidden;
  transition:
    translate 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.4s ease,
    visibility 0s linear 0.6s,
    border-color 0.3s ease;
}

.tray.is-shown {
  translate: -50% 0;
  opacity: 1;
  visibility: visible;
  transition:
    translate 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.4s ease,
    visibility 0s,
    border-color 0.3s ease;
}

/* ---- Settled over a card ----
   At rest on the exteriors', the interiors', the floor plan's or the way
   home's card, the tray sits in the band over the card instead of at the
   foot of the screen (src/js/ui/my-solum.js sets where, --tray-top, and
   its size there, --tray-scale), and catches a little of the card's
   colour, a soft wash low inside it, as glass over a lit surface would
   (--tray-glow).

   It comes and goes as the words under each card do (scene.css), in
   reverse: out of a blur, growing to its size as it comes up out of
   nothing; and on the way out drawn in a little, blurring as it fades. */
@property --tray-glow {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}

/* settled over the card, out of sight: drawn in, blurred and faded where
   it stood (the way out — the card is already moving away) */
.tray.is-docked {
  /* the colour chosen in the section beneath (the card's own), through
     the glass and pooled in its foot, as a toggle's lit pill has it */
  background:
    radial-gradient(85% 110% at 50% 140%,
      color-mix(in oklab, var(--tray-glow) 55%, transparent),
      transparent 80%),
    linear-gradient(180deg,
      color-mix(in oklab, var(--tray-glow) 10%, transparent),
      color-mix(in oklab, var(--tray-glow) 18%, transparent)),
    var(--glass-frost),
    /* over the page's black in its notch, as it always is here: solid
       black under the glass changes nothing seen, and gives the shadow
       it casts (.tray-layer) its full weight */
    #000;
  top: var(--tray-top, var(--space-5));
  bottom: auto;
  /* put by the same numbers as the notch (my-solum.js), not centred on
     its own, so the gap is even on both sides */
  left: var(--tab-left, 50%);
  scale: calc(var(--tray-scale, 1) * 0.88);
  translate: 0 0;
  filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  transition:
    scale 0.45s var(--ease-out),
    filter 0.45s ease,
    opacity 0.4s ease,
    visibility 0s linear 0.45s,
    border-color 0.3s ease,
    --tray-glow 0.9s var(--ease-out);
}

/* Over the card it is a tab, its sides slanting in to its foot to sit in
   the card's notch (my-solum.js sets the slant, --tab-run, and the notch to
   match); its parts kept clear of the slant. */
/* (.is-docked-size: its size as a tab, for my-solum.js to measure while
   it is elsewhere) */
.tray.is-docked,
.tray.is-docked-size {
  border-radius: 3px;
  /* slim: a tab in the card's edge, not a bar over it */
  padding-block: 0.15rem;
  padding-inline: calc(0.5rem + var(--tab-run, 0px));
}

.tray.is-docked .tray__item,
.tray.is-docked-size .tray__item {
  padding-block: 0.28rem;
}

/* its parts kept whole and centred while it grows or draws in to a new
   width (my-solum.js), cut evenly at both ends meanwhile */
.tray.is-docked {
  justify-content: center;
  overflow: hidden;
}

.tray.is-docked .tray__item {
  flex-shrink: 0;
}

/* its glass's light along its top and foot only: the rest of the glass's
   edge (tokens.css) is drawn round its box, a rectangle, which its slanted
   sides cut across */
.tray.is-docked {
  box-shadow:
    inset 0 1px 1.5px rgb(255 255 255 / 0.16),
    inset 0 -1px 1px rgb(255 255 255 / 0.025);
  clip-path: var(--tab-clip, polygon(0 0, 100% 0,
    calc(100% - var(--tab-run, 0px)) 100%, var(--tab-run, 0px) 100%));
}

/* the way in starts here: small, blurred and clear (placed at once, not
   animated) */
.tray.is-docked.is-tucked {
  visibility: visible;
  transition: none;
}

/* and comes up from there to its size, sharpening as it does */
.tray.is-docked.is-shown {
  scale: var(--tray-scale, 1);
  filter: none;
  opacity: 1;
  visibility: visible;
  transition:
    scale 0.75s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.6s ease,
    opacity 0.5s ease,
    border-color 0.3s ease,
    --tray-glow 0.9s var(--ease-out);
}

/* Under the pointer the tab lifts toward the reader, not out of its
   notch (moved or grown in a slanted notch, its gap would go uneven), so
   by light and shadow alone: its glass brightens, the light along its top
   edge comes up, and its shadow falls further and wider over the card */
@media (hover: hover) {
  .tray.is-docked.is-shown {
    transition:
      scale 0.75s cubic-bezier(0.22, 1, 0.36, 1),
      filter 0.45s cubic-bezier(0.22, 1, 0.36, 1),
      box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1),
      opacity 0.5s ease,
      border-color 0.3s ease,
      --tray-glow 0.9s var(--ease-out);
  }

  .tray.is-docked.is-shown:hover {
    filter: brightness(1.22);
    box-shadow:
      inset 0 1px 1.5px rgb(255 255 255 / 0.34),
      inset 0 -1px 1px rgb(255 255 255 / 0.05);
  }

  .tray-layer:has(> .tray.is-docked.is-shown:hover) {
    filter:
      drop-shadow(0 6px 8px rgb(0 0 0 / 0.7))
      drop-shadow(0 26px 46px rgb(0 0 0 / 0.95));
  }
}

/* ---- At the top of the screen ----
   Over the way home where it is not a card (without the scenes), whose
   foot has its own button and note, the tray sits at the top of the
   screen instead (my-solum.js, .is-top), and comes and goes there as it
   does over the cards. */
.tray.is-top:not(.is-docked) {
  /* where it sits over the cards, and its size there (my-solum.js) */
  top: var(--tray-top, calc(var(--space-5) + var(--safe-top)));
  bottom: auto;
  scale: calc(var(--tray-scale, 1) * 0.88);
  translate: -50% 0;
  filter: blur(8px);
  transition:
    scale 0.45s var(--ease-out),
    filter 0.45s ease,
    opacity 0.4s ease,
    visibility 0s linear 0.45s,
    border-color 0.3s ease;
}

.tray.is-top.is-shown:not(.is-docked) {
  scale: var(--tray-scale, 1);
  filter: none;
  transition:
    scale 0.75s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.6s ease,
    opacity 0.5s ease,
    visibility 0s,
    border-color 0.3s ease;
}

/* moved between the band and the foot of the screen while out of sight:
   at once, so it is never seen travelling */
.tray.is-moving {
  transition: none;
}

/* each part its own button: lit under the pointer */
@media (hover: hover) {
  .tray__item:hover {
    color: var(--c-white);
    background: rgb(255 255 255 / 0.08);
  }
}

.tray__item:focus-visible {
  outline: 1px solid var(--c-led-core);
  outline-offset: -2px;
}

/* ---- The items ---- */
.tray__item {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  white-space: nowrap;
  text-decoration: none;
  font-family: var(--font-mono);
  font-weight: 300;
  font-size: var(--fs-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-ink-4);
  transition: color 0.3s ease, background 0.3s ease;
}

/* a hairline between items */
.tray__item {
  position: relative;
}

.tray__item + .tray__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 25%;
  bottom: 25%;
  width: 1px;
  background: rgb(255 255 255 / 0.12);
}

.tray__item.is-chosen {
  color: var(--c-ink);
}

/* the model always names itself, a touch brighter even before it is
   chosen, since it is what the whole page is showing */
.tray__item--model {
  color: var(--c-ink-2);
}

/* the finish's colour, or an empty ring until there is one */
.tray__dot {
  flex: none;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  border: 1px dashed rgb(255 255 255 / 0.32);
  transition: background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}

.is-chosen .tray__dot {
  border: 0;
  background: var(--dot, var(--c-gold));
  box-shadow: 0 0 10px -1px var(--dot, var(--c-gold));
}


/* ---- Just chosen ----
   When a choice is locked in the tray rises for a moment, and the part
   just chosen brightens and its dot swells and glows once, in its own
   colour (the gold for the model and the delivery). */
.tray__item.is-just-chosen {
  color: var(--c-white);
}

@media (prefers-reduced-motion: no-preference) {
  .tray__item.is-just-chosen .tray__dot {
    animation: tray-chosen 1.4s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .tray__item--model.is-just-chosen {
    animation: tray-chosen-text 1.4s ease;
  }
}

@keyframes tray-chosen {
  0%   { scale: 1; box-shadow: 0 0 0 0 var(--dot, var(--c-gold)); }
  35%  { scale: 1.7; box-shadow: 0 0 16px 2px var(--dot, var(--c-gold)); }
  100% { scale: 1; box-shadow: 0 0 10px -1px var(--dot, var(--c-gold)); }
}

@keyframes tray-chosen-text {
  0%, 100% { text-shadow: none; }
  35%      { text-shadow: 0 0 14px rgb(214 179 106 / 0.8); }
}

/* ---- Phones: the model and the colours, the names left out ---- */
@media (max-width: 39.99rem) {
  .tray__item {
    padding: 0.45rem 0.65rem;
  }

  .tray__item:not(.tray__item--model) .tray__name {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .tray__item--delivery {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tray,
  .tray.is-shown {
    translate: -50% 0;
  }
}