/* ==========================================================================
   WREN — pages/home.css
   Load veil, hero morph, latest release, next-show strip, request teaser,
   mailing list.
   ========================================================================== */

/* ---- Page-load sequence (CSS-driven so a JS failure can't trap the page;
       hero-morph.js only adds skip + cleanup). Total ≤ 2s. ---------------- */
.load-veil {
  position: fixed;
  inset: 0;
  z-index: var(--z-loader);
  background: var(--tunnel);
  display: flex;
  align-items: center;
  pointer-events: none;
  animation: veil-fade 0.5s var(--ease-house) 1.1s forwards;
}

.load-veil__line {
  width: 100%;
  height: 2px;
  background: var(--sodium);
  transform: scaleX(0);
  transform-origin: left;
  animation: veil-line 0.7s var(--ease-house) 0.15s forwards;
}

@keyframes veil-line {
  to { transform: scaleX(1); }
}

@keyframes veil-fade {
  to { opacity: 0; visibility: hidden; }
}

/* Hero copy rises after the line draw (skipping the veil fast-forwards it) */
.hero-morph__overlay > * {
  opacity: 0;
  animation: hero-rise 0.7s var(--ease-house) forwards;
}

.hero-morph__overlay > :nth-child(1) { animation-delay: 1.0s; }
.hero-morph__overlay > :nth-child(2) { animation-delay: 1.12s; }
.hero-morph__overlay > :nth-child(3) { animation-delay: 1.24s; }

.veil-done .hero-morph__overlay > * { animation-delay: 0s; }

@keyframes hero-rise {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .load-veil { display: none; }
  .hero-morph__overlay > * { animation: none; opacity: 1; }
}

/* ---- Hero morph ---------------------------------------------------------- */
/* Default (no JS / reduced motion): static stacked layout — hero viewport,
   grid in normal flow below. .is-armed switches to the pinned overlay. */

.hero-morph__stage {
  position: relative;
}

.hero-morph__hero {
  position: relative;
  height: 100svh;
  overflow: hidden;
}

.hero-morph__hero .ph,
.hero-morph__hero .ph__media {
  position: absolute;
  inset: 0;
  height: 100%;
  aspect-ratio: auto;
}

.hero-morph__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--gutter);
  padding-bottom: max(var(--gutter), 6vh);
  background: linear-gradient(to top, rgba(17, 17, 19, 0.82) 0%, rgba(17, 17, 19, 0.25) 45%, transparent 70%);
  pointer-events: none;
}

.hero-wordmark {
  font-size: var(--text-hero);
  font-stretch: var(--display-stretch);
  letter-spacing: 0.12em;
  color: var(--tile);
  line-height: 1;
}

.hero-tag {
  font-size: clamp(1.1rem, 2.4vw, 1.5rem);
  font-style: italic;
  color: var(--tile);
  margin-top: var(--space-3);
}

.hero-scroll {
  margin-top: var(--space-4);
  color: var(--concrete);
}

.hero-morph__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
  width: min(88vw, 80vh);
  margin: var(--space-5) auto;
}

.hero-morph__caption {
  text-align: center;
  padding-bottom: var(--space-4);
}

/* Armed: grid + caption become overlays inside the pinned stage */
.hero-morph.is-armed .hero-morph__stage {
  height: 100svh;
  overflow: clip;
}

.hero-morph.is-armed .hero-morph__hero {
  position: absolute;
  inset: 0;
  height: auto;
  z-index: 2;
  will-change: transform, clip-path, opacity;
}

.hero-morph.is-armed .hero-morph__grid {
  position: absolute;
  inset: 0;
  margin: auto;
  z-index: 1;
  height: min(88vw, 80vh);
}

.hero-morph.is-armed .hero-morph__grid > * {
  will-change: transform, opacity;
}

.hero-morph.is-armed .hero-morph__caption {
  position: absolute;
  bottom: var(--space-3);
  left: 0;
  right: 0;
  z-index: 1;
  padding-bottom: 0;
}

@media (max-width: 767px) {
  .hero-morph__grid,
  .hero-morph.is-armed .hero-morph__grid {
    width: min(92vw, 68vh);
  }

  .hero-morph.is-armed .hero-morph__grid {
    height: min(92vw, 68vh);
  }
}

/* ---- Shared section rhythm ------------------------------------------------ */
.home-section {
  padding-block: var(--space-6);
}

/* ---- Latest release ------------------------------------------------------- */
.latest {
  display: grid;
  grid-template-columns: minmax(260px, 420px) 1fr;
  gap: var(--space-5);
  align-items: start;
}

.latest__title {
  font-size: var(--text-xl);
  margin-block: var(--space-2) var(--space-3);
}

.latest__blurb {
  font-size: var(--text-ed);
  color: var(--tile-dim);
  margin-bottom: var(--space-4);
}

.player-slot {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  border: 1px solid var(--concrete-dim);
  background: var(--tunnel-lift);
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-4);
}

/* Real phase: replace .player-slot innards with the streaming embed.
   .player-slot__btn lives in components.css (shared with music cards). */

.player-slot__track {
  flex: 1;
  height: 22px;
}

.stream-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
}

.stream-links a {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  text-transform: uppercase;
}

@media (max-width: 820px) {
  .latest {
    grid-template-columns: 1fr;
  }

  .latest__cover {
    max-width: 340px;
  }
}

/* ---- Next show strip ------------------------------------------------------- */
.next-show {
  border-block: 1px solid var(--sodium);
  background: color-mix(in srgb, var(--sodium) 6%, var(--tunnel));
}

.next-show__row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding-block: var(--space-4);
}

.next-show__label {
  color: var(--sodium);
}

.next-show__date {
  color: var(--tile);
  font-weight: 700;
}

.next-show__venue {
  font-family: var(--font-display);
  font-stretch: var(--display-stretch);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-sign);
  font-size: var(--text-lg);
}

.next-show__row .btn {
  margin-left: auto;
}

@media (max-width: 720px) {
  .next-show__row .btn {
    margin-left: 0;
  }
}

/* ---- Request Line teaser ----------------------------------------------------- */
.teaser {
  display: grid;
  grid-template-columns: 1fr minmax(280px, 480px);
  gap: var(--space-5);
  align-items: center;
}

.teaser__pitch {
  font-size: clamp(1.5rem, 3.2vw, 2.25rem);
  font-family: var(--font-editorial);
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.25;
  margin-bottom: var(--space-4);
}

.teaser__tiers {
  display: grid;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.teaser__tier {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  border-bottom: 1px solid var(--concrete-dim);
  padding-bottom: var(--space-2);
  max-width: 34rem;
}

.teaser__tier-price {
  color: var(--sodium);
}

@media (max-width: 900px) {
  .teaser {
    grid-template-columns: 1fr;
  }
}

/* ---- Mailing list ---------------------------------------------------------------- */
.mailing {
  max-width: 42rem;
}

.mailing__heading {
  font-size: var(--text-xl);
  margin-bottom: var(--space-3);
}

.mailing__copy {
  margin-bottom: var(--space-4);
  color: var(--tile-dim);
}

.mailing .mini-list-form .field {
  flex: 1 1 260px;
}