/* splash.css — templates/splash.html, and nothing else.
 *
 * The signed-out front door. Loaded on top of admin.css (via _base.html), so
 * everything here is scoped under .splash rather than restyling the shell: a
 * bare `body` rule would reach thirty other pages that share it.
 *
 * Every colour is a token. The Framer draft's accent was #5EF7FD, which is
 * --ref-cyan — the Kicksrv wordmark's own colour — so this page needed no new
 * hue, and naming --acc means a future brand move carries it along. Its text
 * was #F0F0F0, close enough to --t-hi (#fff) over a photograph that the token
 * is the right call. See DESIGN.md §0 and CLAUDE.md §6.
 */

.splash {
  /* _base's <main> is .admin-main by default: a 1200px column with padding.
     This page is the viewport. */
  max-width: none;
  margin: 0;
  padding: 0;

  position: relative;
  z-index: 1;                 /* above .splash-hero, which is fixed at 0 */

  /* CENTRED AT EVERY WIDTH. This lived in the 768px query, so a phone fell
     through to the browser default and set the copy left while the wordmark
     above it was centred — two alignments in one column, on the one screen
     that is nearly all wordmark. The desktop rule was the right one; it was
     simply in the wrong place. */
  text-align: center;

  min-height: 100vh;
  /* svh, not vh, on the browsers that have it: mobile Safari's 100vh is the
     height WITHOUT its address bar, so a bottom-anchored line sits under the
     bar until the page is scrolled — and this page does not scroll. */
  min-height: 100svh;

  display: flex;
  flex-direction: column;

  /* PHONE: the draft does not pin its copy to the floor. The tagline sits at
     roughly half the screen, the ask below it, and the bottom fifth is left
     to the photograph. Laid out from the top so those two land where the
     draft puts them; the desktop rule below takes over at 768. */
  justify-content: flex-start;
  gap: 3vh;                   /* wordmark → copy: the draft's 25px at 812 */

  /* 1.75rem is the draft's 28px phone inset, held as the floor so the copy
     never crowds the edge on a narrow screen. */
  padding: 0 clamp(1.75rem, 6vw, 4rem) clamp(1.75rem, 5vh, 2.75rem);
}

/* Fixed rather than absolute so it fills the viewport regardless of what the
   flash block above adds to the flow. --screen-player behind it means the gap
   before a 54–274 KB photograph decodes is the app's dark, not white. */
.splash-hero {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  background: var(--screen-player);
}

/* The draft's own scrim, to its values — an earlier pass here invented a
   three-stop version to keep the type off the lit court line, before reading
   that the draft had already solved it. A linear wash to 80% black at the
   foot: the wordmark sits at 23% where it costs almost nothing, and the copy
   sits in the dark end. */
.splash::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(rgb(0 0 0 / 0) 0%, rgb(0 0 0 / 0.8) 100%);
}

/* Centred at both breakpoints, and now so is the copy under it — that used to
   read "the copy below switches alignment, this does not", which was true and
   was the bug. 285px on a phone and 462px on a 1280 desktop are the draft's,
   and 36vw is the line through them; the clamp holds each end flat. */
.splash-mark {
  align-self: center;
  width: clamp(285px, 36vw, 462px);
  height: auto;

  position: relative;
  z-index: 1;

  /* 176/720 desktop and 184/812 phone are both ~23% down. */
  margin-top: 23vh;
}

/* Positioned, and therefore above the scrim. Without this it is a static box
   inside .splash's stacking context, and a static box paints UNDER a
   positioned one at the same z-index however late it comes in the markup —
   so the type would sit behind the gradient meant to protect it. */
.splash-copy {
  position: relative;
  z-index: 1;

  /* The draft's two lines sit apart, not stacked: the tagline well above the
     ask — 180px at 812 on a phone, 91px at 735 on a desktop. Held in vh
     rather than pixels so the pair keeps its proportion on the screens
     between and either side of the two the draft was drawn at.

     This belongs HERE and not on .splash — the two lines are siblings inside
     this box, and .splash sees them as one flex item, so a gap up there
     separated the copy from nothing. */
  display: flex;
  flex-direction: column;
  gap: 18.5vh;
}

.splash-copy > * { margin: 0; }

/* 20px and 16px are the draft's, at both its breakpoints, and are kept rather
   than scaled up on desktop — the restraint is the design. */
.splash-line {
  font-family: var(--sans);
  font-size: 1.25rem;
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: -0.007em;
  color: var(--t-hi);
}

.splash-cta {
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--t-hi);
}

.splash-link {
  color: var(--acc);
  font-weight: 700;
  text-decoration: none;
  /* The draft's link is 16px of text, which is a 24px-tall tap target — under
     the 44px every mobile guideline asks for, and this is THE control on the
     page. The padding is negative-margined back out so the line reads exactly
     as drawn. */
  display: inline-block;
  padding: 0.625rem 0.5rem;
  margin: -0.625rem -0.5rem;
}

.splash-link:hover,
.splash-link:focus-visible { text-decoration: underline; }

.splash-link:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 2px;
  border-radius: 4px;
}

/* DESKTOP. Two changes at the draft's own breakpoint: the copy centres, and
   it returns to the floor — 571 and 668 of a 735-tall page is bottom-anchored
   in a way 426 and 606 of 812 is not. `margin-bottom: auto` on the wordmark
   eats the free space between, so the container never has to know how tall
   any of this is. */
@media (min-width: 768px) {
  .splash {
    justify-content: flex-end;
    gap: 1.5rem;              /* only ever between a flash block and the copy */
  }
  .splash-mark { margin-bottom: auto; }
  .splash-copy { gap: clamp(3.5rem, 11vh, 6rem); }
}

/* A LANDSCAPE PHONE is 375 wide and ~400 tall, so it takes the phone rules
   above — where 23vh + a 214px wordmark + 18.5vh between the lines is taller
   than the screen, and a page built never to scroll would scroll. The wordmark
   gives up its fixed floor and the copy closes up; nothing here is the design,
   it is the design surviving a viewport it was never drawn at. */
@media (max-width: 767px) and (max-height: 600px) {
  .splash { justify-content: flex-end; gap: 1rem; }
  .splash-mark {
    width: min(285px, 42vh);
    margin-top: 2vh;
    margin-bottom: auto;
  }
  .splash-copy { gap: 1.5rem; }
}