/*
 * Four-card intro (section 3). This file holds the STATIC layout used without JS and with
 * prefers-reduced-motion: a grid of faces with their section names. The animated scene
 * (html.intro-animated) is added in F2-03.
 */

.intro { background: transparent; } /* the parchment ground shows through (K-39) */

/* Home sections below the intro are skipped until they near the viewport. Before intro.js pins
   the scene the page is short, so their lazy images (announcement covers, album thumbs) would
   otherwise be fetched alongside the hero logo, the LCP image (performance pass, 2026-10-20). */
.intro ~ .section { content-visibility: auto; contain-intrinsic-size: auto 32rem; }

.intro__stage {
  max-width: calc(var(--max-width) + 2 * var(--space-gutter));
  margin-inline: auto;
  padding: var(--space-section) var(--space-gutter);
  text-align: center;
}

.intro__hero { max-width: 44rem; margin: 0 auto var(--space-section); }
.intro__title { color: var(--color-ink); }

/* Club logo as the hero (decision K-36). Sized by height so its lettering stays legible (K-38);
   the shadow is a filter that follows its outline. */
.intro__title--logo { margin: 0; line-height: 0; }
.intro__logo {
  width: auto;
  height: clamp(220px, 62vw, 340px);
  margin-inline: auto;
  border-radius: 0;
  filter: var(--shadow-logo);
}

/* ---------- Static grid ---------- */

.intro__deck {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-card) var(--space-element);
  max-width: 64rem;
  margin-inline: auto;
}
@media (min-width: 768px) {
  .intro__deck { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.intro-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-element);
  color: var(--color-ink);
  text-decoration: none;
}

.intro-card__inner {
  position: relative;
  display: block;
  width: 100%;
  max-width: 240px;
  aspect-ratio: 5 / 7;
}

.intro-card__face { position: absolute; inset: 0; display: block; }
.intro-card__face img { width: 100%; height: 100%; object-fit: contain; border-radius: 0; }

/* Static mode shows faces only. */
.intro-card__face--back { display: none; }

/* Cards are physical objects: the only place a shadow is allowed (section 2.5). drop-shadow follows the rounded corners. */
.intro-card__face--front { filter: drop-shadow(0 8px 16px color-mix(in srgb, var(--color-ink) 18%, transparent)); transition: transform 0.2s ease; }
.intro-card:hover .intro-card__face--front { transform: translateY(-4px); }

.intro-card__label {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  border-bottom: 1px solid transparent;
}
.intro-card:hover .intro-card__label, .intro-card:focus-visible .intro-card__label { border-bottom-color: var(--color-hover-border); }

.intro__cta { margin-top: var(--space-section); }

/* ---------- Placeholder when artwork is missing ---------- */

.card-placeholder {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-s);
  border: 1px solid var(--color-rule);
  border-radius: calc(var(--radius) * 4);
  background: var(--color-surface-warm);
  color: var(--color-ink);
}
.card-placeholder--back { background: var(--color-ink); border-color: var(--color-ink); }
.card-placeholder__index {
  position: absolute; top: 0.6rem; left: 0.75rem;
  display: flex; flex-direction: column; align-items: center; line-height: 1.05;
  font-family: var(--font-display); font-size: 1.6rem;
}
.card-placeholder__name { font-size: var(--text-small); font-weight: var(--weight-medium); letter-spacing: var(--tracking-heading); text-transform: uppercase; }
.card-placeholder--heart, .card-placeholder--diamond { color: var(--color-accent-deep); }

/* Plate and lift exist only for the animated scene. */
.intro-card__plate, .intro-card__lift { display: none; }

/* ==========================================================================
   Animated scene (added by intro.js when motion is allowed).
   Cards are absolutely positioned in the deck; intro.js drives only transform and opacity.
   ========================================================================== */

.intro--animated .intro__stage {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  height: calc(100vh - var(--header-height));
  height: calc(100svh - var(--header-height));
  max-width: none;
  padding-block: var(--intro-pad-top) var(--space-element);
  overflow: hidden;
}
.intro--animated .intro__hero { margin-bottom: 0; }
/* Logo first (K-38). Cards keep their full size; while they move they may pass over the logo. */
.intro--animated {
  --intro-logo-h: clamp(160px, 30vh, 340px);
  --intro-pad-top: clamp(1.5rem, 4vh, var(--space-section));
  --intro-cta-bottom: clamp(1rem, 3vh, 2rem);
  /* The deck area reaches up under the logo, so the larger cards stay clear of the CTA and the viewport bottom. */
  --intro-deck-lift: 8vh;
}
.intro--animated .intro__logo { height: var(--intro-logo-h); }

.intro--animated .intro__deck {
  margin-top: calc(-1 * var(--intro-deck-lift));
  display: block;
  position: relative;
  max-width: var(--max-width);
  width: 100%;
  margin-inline: auto;
  perspective: 1600px;
}

.intro--animated .intro-card {
  --card-w: clamp(140px, 15vw, 220px);
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--card-w);
  margin-left: calc(var(--card-w) / -2);
  margin-top: calc(var(--card-w) * -0.7);
  display: block;
  pointer-events: none; /* clickable only while the section names are showing */
}
.intro--animated .intro__deck.is-clickable .intro-card { pointer-events: auto; cursor: pointer; }

.intro--animated .intro-card__inner {
  max-width: none;
  transform-style: preserve-3d;
}
.intro--animated .intro-card__face {
  display: block;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  filter: drop-shadow(0 10px 18px color-mix(in srgb, var(--color-ink) 20%, transparent));
  transition: none;
}
.intro--animated .intro-card__face--back { transform: rotateY(180deg); }
/* Where the animated scene will run, the deck opens backs up, so the (lazy) face images are held
   back until intro.js adds .intro--faces (after the hero logo, the LCP image, has painted, or on the
   first scroll). A media query rather than .intro--animated: it applies from the first style pass,
   before the browser looks at lazy images. Without JS or with reduced motion the static grid loads
   its faces as usual. The aspect ratio keeps the card's size while its content is skipped. */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .intro:not(.intro--faces) .intro-card__face--front { content-visibility: hidden; aspect-ratio: 320 / 445; }
}
.intro--animated .intro-card:hover .intro-card__face--front { transform: none; }

/* Outer label stays in the DOM for assistive tech; the plate on the card back is the visible one. */
.intro--animated .intro-card__label {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

.intro--animated .intro-card__plate {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 0.5em;
  padding: 0.55em 0.9em;
  background: var(--color-canvas);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius);
  color: var(--color-ink);
  font-size: clamp(0.62rem, 0.55rem + 0.25vw, 0.75rem);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0; /* revealed during the flip phase */
}
.intro--animated .intro__deck.is-clickable .intro-card:hover .intro-card__plate,
.intro--animated .intro-card:focus-visible .intro-card__plate { border-color: var(--color-hover-border); }

/* Slam shadow: a rounded box under the ♣2 whose opacity is animated (intro cards may cast shadows). */
.intro--animated .intro-card__lift {
  display: block;
  position: absolute; inset: 0;
  border-radius: 4.7% / 3.4%;
  box-shadow: var(--shadow-intro-slam);
  opacity: 0;
  transform: translateZ(-1px);
}

.intro--animated .intro__cta {
  position: absolute;
  left: 50%; bottom: var(--intro-cta-bottom);
  transform: translateX(-50%);
  white-space: nowrap; /* left: 50% would otherwise cap its width at half the stage */
  margin: 0;
  opacity: 0;
  pointer-events: none;
}
.intro--animated .intro__cta.is-visible { pointer-events: auto; }

/* Narrow screens: 2×2 deal (decision K-18). Cards sized so two rows fit under the hero. */
@media (max-width: 767.98px) {
  .intro--animated .intro__stage { padding-block: var(--space-element); }
  .intro--animated .intro__hero .display { font-size: clamp(1.9rem, 8vw, 2.4rem); }
  /* Logo first (K-38): about 60% of the width; the 2×2 cards may reach up over its lower edge. */
  .intro--animated { --intro-logo-h: min(64vw, 34svh, 260px); --intro-deck-lift: 8svh; }
  .intro--animated .intro__logo { height: var(--intro-logo-h); }
  .intro--animated .intro-card {
    /* Two rows (2 × 1.4 × width) must fit the deck area, including the lift under the logo. */
    --card-w: min(38vw, calc((100svh - var(--header-height) - 2 * var(--space-element) - var(--intro-logo-h) + var(--intro-deck-lift) - 1.5rem) / 2.8), 180px);
  }
  .intro--animated .intro-card__plate { padding: 0.45em 0.6em; font-size: 0.6rem; gap: 0.35em; }
  .intro--animated .intro__cta { bottom: clamp(1rem, 4svh, 2rem); }
}