/* Oils & Aperture Gallery -- splash screen.
   Spec: docs/specs/splash-screen.md. Tokens: design-system/tokens/.

   No colour values are declared here. Everything comes from colors.css, and the
   two scales come from the --text-wordmark-splash / --text-entrance tokens,
   which carry their own 620px breakpoint. This file holds layout and state
   only, so "one composition at two scales" stays true by construction. */

.splash {
  position: fixed;
  inset: 0;
  z-index: 100;

  /* dvh, not vh -- mobile browser chrome crops vh, which would push the
     composition off centre exactly on the devices most likely to see it. */
  height: 100dvh;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  padding: 0 24px;
  background: var(--ground-dark);

  /* Exit only. Nothing on this screen fades in. */
  transition: opacity 240ms ease;
}

/* --- the lockup: logo and wordmark side by side at every width --- */

.splash__lockup {
  display: flex;
  align-items: center;
  gap: 16px;
}

.splash__logo {
  display: block;
  flex: none;
  width: 64px;
  height: 64px;
}

.splash__wordmark {
  font: var(--text-wordmark-splash);
  letter-spacing: var(--track-wordmark);
  text-transform: uppercase;
  color: var(--dark-ink);
  white-space: nowrap;

  /* Letter-spacing adds a trailing gap after the final E that renders as part
     of the wordmark's box. Left uncorrected the lockup sits visibly right of
     centre -- ~6px at 34px. Pull the phantom column back off. */
  margin-right: calc(var(--track-wordmark) * -1);
}

/* --- the entrance: label, arrow and hairline are one button --- */

.splash__entrance {
  /* Column so the hairline can span the label-plus-arrow row exactly. */
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  gap: 9px;

  margin-top: 40px;
  min-height: 44px;      /* the arrow alone is under the tap minimum */
  padding: 6px 0 0;

  border: 0;
  background: none;
  font: inherit;
  cursor: pointer;

  color: var(--dark-ink-muted);
  transition: color 240ms ease;
}

.splash__entrance[disabled] {
  cursor: default;
}

.splash__entrance:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
}

.splash__row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.splash__label {
  font: var(--text-entrance);
  letter-spacing: var(--track-entrance);
  text-transform: uppercase;
  color: inherit;

  /* Same trailing-gap correction as the wordmark, so the label and arrow
     stay optically centred as a pair. */
  margin-right: calc(var(--track-entrance) * -1);
}

.splash__arrow {
  flex: none;
  width: 21px;
  height: 21px;

  /* Space is held in both states; only opacity changes, so nothing reflows
     when the gallery becomes ready. */
  opacity: 0;
  transition: opacity 240ms ease;

  /* The SVG strokes with currentColor, so this is what colours it. It does
     not inherit the label's colour -- the arrow is --brand in both states. */
  color: var(--brand);
}

.splash__hairline {
  height: 1px;
  width: 100%;
  overflow: hidden;
  background: color-mix(in srgb, var(--dark-ink-muted) 28%, transparent);
}

.splash__fill {
  display: block;
  width: 0;
  height: 100%;
  background: var(--brand);
  transition: width 180ms linear;
}

/* --- ready --- */

.splash[data-state="ready"] .splash__entrance { color: var(--dark-ink); }
.splash[data-state="ready"] .splash__arrow    { opacity: 1; }

/* --- desktop: same composition, larger --- */

@media (min-width: 620px) {
  .splash          { padding: 0 56px; }
  .splash__lockup  { gap: 24px; }
  .splash__logo    { width: 120px; height: 120px; }
  .splash__arrow   { width: 22px; height: 22px; }
}

/* --- reduced motion: states change, they just don't tween --- */

@media (prefers-reduced-motion: reduce) {
  .splash,
  .splash__entrance,
  .splash__arrow,
  .splash__fill {
    transition: none;
  }
}

/* Announced to screen readers, never drawn. */
.splash__status {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}