/* ── Landing — the front door at ballcrap.com ──────────────── */
/* A vertical scroll, one screen per section: the hero (logo, tagline, play
   buttons) top and bottom, with the old intro/tutorial copy revealing one
   slide per screen of scroll in between (IntersectionObserver in landing.js
   adds --visible as each section enters the viewport). */

.landing-scroll {
  /* Its own scroll container rather than relying on the body/viewport to
     propagate scrolling — body's global `overflow-x: hidden` (variables.css)
     resolves body's overflow-y to `auto` too as a CSS side-effect, which can
     leave body owning the scrollbox in a way wheel events don't reliably
     reach. Filling exactly one viewport height and scrolling itself sidesteps
     that entirely. */
  height: 100dvh;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  display: flex; flex-direction: column;
  /* Slide-by-slide, and consistently so: `mandatory` guarantees every scroll
     gesture comes to rest on a section boundary. `proximity` only snapped
     when the gesture happened to stop near a boundary already, so the page
     landed cleanly on some scrolls and mid-section on others — the exact
     "sometimes it lands perfectly, sometimes not" complaint. `mandatory`
     still lets a fast fling travel through several sections; it only
     controls where the scroll settles, not each tick along the way
     (`scroll-snap-stop` is left at its default `normal`, so nothing is
     forced to stop on every section). */
  scroll-snap-type: y mandatory;
}

.landing__section {
  min-height: 100dvh;
  width: 100%;
  box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 48px 24px;
  text-align: center;
  scroll-snap-align: start;
}

/* Slides (and the closing hero) start hidden and rise into place as the
   viewport reaches them — the top hero is exempt, it's what's on screen at
   load and uses its own immediate entrance animation below instead. */
.landing__section--slide,
.landing__section--hero[data-reveal] {
  opacity: 0; transform: translateY(36px);
  transition: opacity 700ms ease, transform 700ms ease;
}
.landing__section--visible { opacity: 1 !important; transform: translateY(0) !important; }

/* ── Hero content (logo, wordmark, tagline, play row) ────────── */
.landing__hero {
  display: flex; flex-direction: column; align-items: center; gap: 18px;
}

.landing__logo {
  width: min(220px, 46vw);
}
.landing__section--hero:first-child .landing__logo {
  animation: landing-logo-in 1100ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.landing__logo img {
  width: 100%; height: auto; display: block;
  filter: drop-shadow(0 0 24px rgba(255, 200, 0, 0.35));
}

@keyframes landing-logo-in {
  0%   { opacity: 0; transform: scale(0.55) rotate(-24deg); }
  55%  { opacity: 1; }
  70%  { transform: scale(1.06) rotate(3deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

.landing__wordmark {
  font-family: var(--font-logo, var(--font-main));
  font-size: clamp(1.6rem, 8vw, 2.4rem);
  color: var(--text-gold); letter-spacing: 0.04em;
  text-shadow: 0 0 24px rgba(255, 200, 0, 0.45);
}
.landing__tagline {
  font-family: var(--font-main); font-size: 0.5rem;
  color: var(--text-secondary); letter-spacing: 0.08em;
  text-transform: uppercase;
}
.landing__section--hero:first-child .landing__wordmark { animation: landing-fade-up 500ms ease-out 200ms both; }
.landing__section--hero:first-child .landing__tagline  { animation: landing-fade-up 500ms ease-out 350ms both; }
.landing__section--hero:first-child .landing__play      { animation: landing-fade-up 500ms ease-out 650ms both; }
.landing__section--hero:first-child .landing__buttons   { animation: landing-fade-up 500ms ease-out 750ms both; }

@keyframes landing-fade-up {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Slide copy — same scale as the in-game tutorial/opening-scene text ── */
.landing__slide-eyebrow {
  font-family: var(--font-main); font-size: 0.4rem;
  color: var(--text-secondary); letter-spacing: 0.22em; text-transform: uppercase;
  font-variant: small-caps;
  margin-bottom: 16px;
}
.landing__slide-body {
  font-family: var(--font-main); font-size: 1.0rem; font-weight: bold;
  color: var(--text-gold); line-height: 1.65;
  max-width: 640px;
}
.landing__slide-mood {
  font-family: var(--font-main); font-size: 1.0rem;
  color: var(--text-gold); line-height: 1.8;
  max-width: 640px;
}

/* ── "Scroll" hint under the top hero ─────────────────────────── */
/* The rock chip — same coin used as the in-game "rock" marker
   (web/css/field.css .rock-chip / .rock) — doubles as the scroll cue here,
   bouncing downward to point the way.

   Split across two elements on purpose: the outer `.landing__scroll-hint`
   only ever fades in opacity, and the inner `.landing__scroll-hint-bounce`
   only ever animates its own transform. Both animating `transform` on the
   same element (the entrance fade's translateY and the bounce's translateY)
   fought over which one "won" once the bounce's delay elapsed, which could
   visibly glitch/blank the element depending on the browser — this is not
   theoretical CSS composition, it was reproduced by hand. Keeping the two
   effects on separate elements makes the conflict impossible.

   In normal flow (not `position: absolute` anchored to the section's own
   bottom edge) so it's always directly under the buttons and never clipped
   or overlapped on a shorter window/viewport — a fixed-offset absolute hint
   inside a `min-height: 100dvh` section put it at real risk of landing
   outside the visible area on anything shorter than the design's target
   height. */
.landing__scroll-hint {
  margin-top: 24px;
  cursor: pointer;
  opacity: 0;
  animation: landing-fade-in 500ms ease-out 950ms forwards;
}
@keyframes landing-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.landing__scroll-hint-bounce {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  animation: scroll-hint-bounce 1.8s ease-in-out 1.5s infinite;
}
@keyframes scroll-hint-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(10px); }
}

.landing__scroll-hint-label {
  font-family: var(--font-main); font-size: 0.46rem;
  color: var(--text-secondary); letter-spacing: 0.2em; text-transform: uppercase;
}
.landing__scroll-hint-chip {
  width: 52px; height: 52px;
  image-rendering: pixelated;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,0.8));
}

/* ── Play choice / buttons ───────────────────────────────────── */
.landing__play {
  font-family: var(--font-logo, var(--font-main)); font-size: 0.9rem;
  color: var(--text-gold); letter-spacing: 0.04em;
  text-shadow: 0 0 18px rgba(255, 200, 0, 0.45);
}

.landing__buttons {
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: center;
}

.landing__btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 190px; padding: 12px 24px;
  border: 2px solid #000; border-radius: 3px;
  box-shadow: 4px 4px 0 #000;
  font-family: var(--font-main); cursor: pointer;
  text-decoration: none; text-align: center;
  transition: transform 0.05s, box-shadow 0.05s;
}
.landing__btn:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 #000; }

.landing__btn--apple { background: #000; color: #fff; border-color: #444; }
.landing__btn--web   { background: var(--accent-green); color: #fff; }

/* Not a native `disabled` button — it still needs to receive a click so it
   can toast "Coming soon". aria-disabled communicates the state instead. */
.landing__btn--web[aria-disabled="true"] {
  background: var(--panel-bg); color: var(--text-secondary);
  border-color: #333; box-shadow: 4px 4px 0 #000;
  cursor: not-allowed;
}
.landing__btn--web[aria-disabled="true"]:active { transform: none; box-shadow: 4px 4px 0 #000; }

.landing__btn-sub  { font-size: 0.36rem; opacity: 0.75; letter-spacing: 0.04em; }
.landing__btn-main { font-size: 0.62rem; font-weight: bold; letter-spacing: 0.02em; }

/* ── Footer (closing hero only) ──────────────────────────────── */
.landing__footer {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--font-main); font-size: 0.36rem;
  color: var(--text-secondary);
  margin-top: 8px;
}
.landing__privacy { color: var(--text-secondary); text-decoration: underline; }
.landing__privacy:hover { color: var(--text-gold); }

/* ── Toast — same pill as the in-game .result-display, fixed to the
   viewport so it reads the same regardless of scroll position ───────── */
.landing__toast {
  position: fixed; left: 50%; bottom: 32px; transform: translateX(-50%);
  text-align: center; padding: 8px 14px; font-size: 0.5rem; font-weight: bold;
  border-radius: 2px; display: none;
  background: var(--panel-bg); border: 2px solid var(--panel-border);
  box-shadow: 4px 4px 0 #000; color: var(--text-gold);
  z-index: 10;
}
.landing__toast--visible { display: block; }

/* ── Short viewports (landscape phones — the project's actual mobile
   target, docs/design/ux-flow.md) ───────────────────────────────────
   The hero (logo + wordmark + tagline + play row + buttons + scroll hint)
   is tall enough that on anything under ~520px of height it no longer fits
   one screen — with scroll-snap-align: start, content that overflows its
   own section doesn't get clipped, it just pushes the scroll hint out of
   reach below the fold, indistinguishable from "gone" to a visitor who
   never sees it. Shrink the whole stack down rather than letting the
   section grow past one viewport. */
@media (max-height: 520px) {
  .landing__hero { gap: 8px; }
  .landing__section { padding: 20px 24px; }
  .landing__logo { width: min(96px, 22vw); }
  .landing__wordmark { font-size: clamp(1rem, 6vw, 1.4rem); }
  .landing__tagline { font-size: 0.4rem; }
  .landing__play { font-size: 0.7rem; }
  .landing__buttons { gap: 8px; }
  .landing__btn { min-width: 150px; padding: 8px 16px; }
  .landing__scroll-hint { margin-top: 8px; }
  .landing__scroll-hint-chip { width: 32px; height: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  .landing__section--slide,
  .landing__section--hero[data-reveal],
  .landing__logo, .landing__wordmark, .landing__tagline,
  .landing__play, .landing__buttons, .landing__scroll-hint {
    animation: none !important; transition: none !important;
    opacity: 1 !important; transform: none !important;
  }
}