/* Specifications.
 *
 * The mirror ships this section; what is here is the Figma drawing's version of it — file
 * GAIALPデザイン, page "LP phase_2", node **593:143** (named `sec- Key Features` there, like
 * most of that file's frames). The table's contents are the design's eight rows rather than
 * the mirror's thirteen, and the rules below are the design's measures over the mirror's own.
 *
 * It also carries the page's one colour transition: the ground goes **white to purple** as
 * the section arrives, taking over from Connectivity's white above it. See "The handover"
 * at the foot of this file.
 */

/* ---- The table ------------------------------------------------------------------------- */

.specific-reveal {
  opacity: 0;
  filter: blur(12px);
  transform: translate3d(0, 34px, 0);
  will-change: opacity, filter, transform, clip-path;
  -webkit-clip-path: inset(18% 0 0 0);
  clip-path: inset(18% 0 0 0);
}

.specific-reveal.is-view {
  animation: specific-dissolve-up 960ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.specific-reveal--row:nth-of-type(1).is-view {
  animation-delay: 90ms;
}

.specific-reveal--row:nth-of-type(2).is-view {
  animation-delay: 140ms;
}

.specific-reveal--row:nth-of-type(3).is-view {
  animation-delay: 190ms;
}

.specific-reveal--row:nth-of-type(4).is-view {
  animation-delay: 240ms;
}

.specific-reveal--row:nth-of-type(5).is-view {
  animation-delay: 290ms;
}

.specific-reveal--row:nth-of-type(6).is-view {
  animation-delay: 340ms;
}

.specific-reveal--row:nth-of-type(7).is-view {
  animation-delay: 390ms;
}

.specific-reveal--row:nth-of-type(8).is-view {
  animation-delay: 440ms;
}

@keyframes specific-dissolve-up {
  0% {
    opacity: 0;
    filter: blur(12px);
    transform: translate3d(0, 34px, 0);
    -webkit-clip-path: inset(18% 0 0 0);
    clip-path: inset(18% 0 0 0);
  }
  100% {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0);
    -webkit-clip-path: inset(0 0 0 0);
    clip-path: inset(0 0 0 0);
  }
}

/* The design's row rhythm, which is not the mirror's: 14px under the text, a 1px rule, then
   24px of gap — rather than 24px of padding either side of the rule. `.specific dl` in
   top.css is a single class, so these win on load order. */
.specific dl {
  padding: 0 0 14px;
  border-bottom-color: #666;
}

.specific dl + dl {
  margin-top: 24px;
}

/* #f0f0f0 against the mirror's #d7d7d7 — the label is a shade brighter in the drawing, which
   matters on a ground this dark. The 360px column is the mirror's and the design's alike. */
.specific dl dt {
  color: #f0f0f0;
}

/* ---- The handover -------------------------------------------------------------------- */

/* Connectivity above is white and this section is purple, and the change between them is a
   colour transition on scroll rather than an edge: `js/specifications-scroll.js` writes
   `--spec-p`, 0 -> 1 across the section's arrival, and the white below is mixed out of the
   purple with it.
 *
 * **The white is a veil over the gradient, not a colour being interpolated.** The design's
 * ground is a two-stop linear-gradient, and there is no interpolating a gradient with a flat
 * colour in CSS; a full-coverage white layer stacked over it, fading out, gets there with one
 * declaration and no extra element.
 *
 * **The transition is on this section's own box, and that is the whole reason it works here.**
 * The general rule — learned building and removing the same effect on Connectivity — is that a
 * scroll colour transition has to be driven on something that already covers the screen,
 * because a section's box does not exist on screen until it has arrived. This one is the
 * exception that proves it: the box arrives *the same white as the section above it*, so its
 * arrival is invisible and only the colour is doing anything. Connectivity keeps its own solid
 * white throughout and is never touched, which is why its black copy is legible at every point
 * in the move — the thing that made the dark-to-white version impossible.
 *
 * The ramp runs from this section's top edge at the bottom of the screen to the same edge at
 * the top, so the boundary between the two whites is off-screen by the time the purple is
 * fully in and there is never a hard line to see arriving.
 */
.specific {
  /* 1 at rest, so with no script the section is simply purple — see README.md, "Ground
     rules": every default is the finished state. */
  --spec-white: calc(1 - var(--spec-p, 1));

  background: linear-gradient(
      rgba(255, 255, 255, var(--spec-white)),
      rgba(255, 255, 255, var(--spec-white))
    ),
    linear-gradient(135deg, #4c1953, #26215e);
}

/* The copy is white on purple, so for the first part of the move it would be white on white:
   present, invisible, and not something a reader should be able to select out of a blank
   panel. It is held back until the ground is dark enough to carry it, then arrives with the
   purple. Not a second animation — the same value, read later. */
.specific .l-inner {
  opacity: clamp(0, calc((var(--spec-p, 1) - 0.35) / 0.35), 1);
}

@media (prefers-reduced-motion: reduce) {
  .specific-reveal,
  .specific-reveal.is-view {
    opacity: 1;
    filter: none;
    transform: none;
    animation: none;
    -webkit-clip-path: none;
    clip-path: none;
  }
}