/* / — the landing page. Atmosphere first, then the person. BRIEF.md §7. */

/* ---------- 1. hero ---------- */
.hero {
  position: relative;
  height: calc(100svh - var(--nav-h));
  min-height: 560px;
  max-height: 1100px;
  padding-block: 0;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.hero__media, .hero__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}
.hero__media img { object-fit: cover; object-position: 50% 0%; }
/* The mark sits on the dark area below Lucas's head, right of his shirt —
   clear of his face and the decks. --mark-x/--mark-y are the mark's centre. */
.hero__content { position: absolute; inset: 0; pointer-events: none; }
.hero .hero-mark {
  position: absolute;
  left: var(--mark-x, 80%); top: var(--mark-y, 60%);
  transform: translate(-50%, -50%);
}
.hero .hero-mark img { width: min(34vw, 520px); }

/* LED sign: a delayed, stuttering switch-on, then an occasional flicker for
   as long as the page is open. Reduced motion (base.css) drops both, leaving it on. */
.hero .hero-mark img {
  filter: drop-shadow(0 0 6px rgb(255 120 60 / 0.55)) drop-shadow(0 0 18px rgb(255 120 60 / 0.3));
  animation:
    led-on 1100ms linear 700ms both,
    led-hum 9s linear 1800ms infinite;
}
@keyframes led-on {
  0%   { opacity: 0; }
  8%   { opacity: 0.9; }
  12%  { opacity: 0; }
  30%  { opacity: 0; }
  33%  { opacity: 1; }
  38%  { opacity: 0.15; }
  44%  { opacity: 0.8; }
  48%  { opacity: 0.1; }
  70%  { opacity: 0.1; }
  74%  { opacity: 1; }
  100% { opacity: 1; }
}
@keyframes led-hum {
  0%, 41%   { opacity: 1; }
  42%       { opacity: 0.45; }
  43%       { opacity: 1; }
  44%       { opacity: 0.7; }
  45%, 86%  { opacity: 1; }
  87%       { opacity: 0.3; }
  88%, 100% { opacity: 1; }
}
.hero__cue {
  position: absolute; left: 50%; bottom: var(--s-3);
  transform: translateX(-50%);
  color: var(--concrete-500); text-decoration: none;
}
.hero__cue::after {
  content: ""; display: block; margin: var(--s-1) auto 0;
  width: 2px; height: 16px; background: var(--concrete-500);
}
.hero__cue:hover { color: var(--coral); }
@media (max-width: 767px) {
  .hero__content { --mark-x: 78%; --mark-y: 55%; }
  .hero .hero-mark img { width: min(40vw, 320px); }
  .hero__media img { object-position: 50% 50%; }
}

/* ---------- 2. intro ---------- */
.home-intro__text {
  font-family: var(--font-display);
  font-size: clamp(24px, 3.2vw, 40px);
  line-height: 1.3;
  letter-spacing: -0.01em;
  max-width: 30ch;
}

/* ---------- 3. video band ---------- */
/* Three 9:16 clips. Desktop: one row across the full width, capped at 85% of the screen
   height (the clips crop top and bottom rather than overflow). Phones: a swipe row where
   the next clip peeks in from the right. The poster frame shows until each clip plays. */
.home-video__row {
  display: grid; grid-auto-flow: column; grid-auto-columns: 72vw; gap: var(--s-1);
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.home-video__row::-webkit-scrollbar { display: none; }
.home-video__clip { position: relative; scroll-snap-align: center; }
.home-video__media {
  width: 100%; height: auto; aspect-ratio: 9 / 16; max-height: 85svh;
  object-fit: cover; background: var(--void);
}
/* Venue label: light text on a soft fade into the footage, no box. */
.home-video__venue {
  position: absolute; inset: auto 0 0 0;
  padding: var(--s-5) var(--s-3) var(--s-3);
  background: linear-gradient(transparent, rgb(10 10 10 / 0.7));
  color: var(--ink-900);
  pointer-events: none;
}
@media (min-width: 768px) {
  .home-video__row { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; }
}

/* ---------- 4. latest music ---------- */
.home-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); }
.covers { list-style: none; padding: 0; display: grid; gap: var(--s-4) var(--s-3); }
@media (min-width: 768px) { .covers { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cover { display: grid; gap: var(--s-1); text-decoration: none; }
.cover__art { display: block; aspect-ratio: 1; background: var(--concrete-300); }
.cover__art img { width: 100%; height: 100%; object-fit: cover; }
.cover__title { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 700; line-height: 1.25; margin-top: var(--s-1); }
.cover:hover .cover__title { color: var(--coral); }
.cover:hover { color: inherit; }

/* ---------- 5. face reveal ---------- */
.home-face img { width: 100%; height: auto; max-height: 100svh; object-fit: cover; object-position: 60% 35%; }
@media (max-width: 767px) {
  .home-face img { height: 80svh; max-height: none; object-position: 62% 40%; }
}

/* ---------- 6. studios teaser ---------- */
.home-teaser__grid { display: grid; gap: var(--s-4); align-items: end; justify-items: start; }
@media (min-width: 900px) { .home-teaser__grid { grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-6); } }
.home-teaser__text {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.25;
  max-width: 28ch;
}