/* Homepage sequence: hero → zoom into the monitor → ten beats → zoom back out → hero loop.
   The default rules are the stacked page (phones, reduced motion, no JavaScript). main.js sets
   data-mode="zoom" on .zoom only when the viewport is 768px or wider and motion is allowed; every
   zoom-mode rule is scoped to that attribute inside the same media condition, so nothing below
   depends on JavaScript to fall back. */

.zoom { position: relative; --beat-h: 100svh; --caption-gap: clamp(1.25rem, 2.4vw, 2.5rem); --page-gutter: clamp(1.25rem, 4vw, 4rem); }
.zoom__stage { position: relative; }
.zoom__track { position: relative; }
.zoom__spacer { height: 0; }

/* LCD players and the placeholder live inside .hero__lcd (geometry in styles.css). */
.lcd__player { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; background: #0a0d11; opacity: 0; transition: opacity .4s var(--ease); }
.lcd__player.is-live { z-index: 2; opacity: 1; }
.lcd__player[hidden] { display: none; }
.lcd__placeholder { position: absolute; inset: 0; z-index: 3; display: grid; place-content: center; gap: .35em; padding: 6%; text-align: center; background: radial-gradient(ellipse at 50% 42%, #151b22 0%, #0a0d11 72%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); color: var(--color-muted); }
.lcd__placeholder[hidden] { display: none; }
.lcd__placeholder-title { margin: 0; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(1rem, 1.6vw, 1.6rem); font-weight: 400; line-height: 1.15; letter-spacing: -.02em; color: #dfe5ea; }
.lcd__placeholder-note { margin: 0; font-size: clamp(.55rem, .65vw, .7rem); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--color-accent-hover); }

/* Stacked beats: figure first, caption below, ordinary document flow. */
.beat { position: relative; max-width: 64rem; margin: 0 auto; padding: var(--space-7) var(--page-gutter) 0; display: flex; flex-direction: column; }
.beat:last-of-type { padding-bottom: var(--space-7); }
.beat__inline { order: -1; margin: 0 0 var(--space-4); }
.beat__inline video, .beat__placeholder { width: 100%; aspect-ratio: 16 / 9; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: radial-gradient(ellipse at 50% 42%, #151b22 0%, #0a0d11 72%); }
.beat__placeholder { display: grid; place-items: center; color: var(--color-muted); font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.beat__index { margin: 0 0 .55rem; color: var(--color-accent-hover); font-size: .75rem; font-weight: 700; letter-spacing: .14em; }
.beat__caption h2 { margin: 0 0 .5rem; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(1.4rem, 2.4vw, 2.6rem); font-weight: 400; line-height: 1.1; letter-spacing: -.02em; text-wrap: balance; }
.beat__caption p:not(.beat__index) { max-width: 60ch; margin: 0; color: #c5ced6; font-size: clamp(.95rem, 1.1vw, 1.15rem); line-height: 1.5; }
.beat__caption a { display: inline-block; margin-top: .85rem; color: var(--color-accent-hover); font-weight: 650; text-decoration-thickness: 1px; text-underline-offset: .25em; }
.beat__caption a:hover, .beat__caption a:focus-visible { color: var(--color-text); }
.zoom__spacer--out { max-width: 64rem; margin: 0 auto; padding: 0 var(--page-gutter) var(--space-6); }
.hero-end-anchor { position: absolute; width: 1px; height: 1px; overflow: hidden; pointer-events: none; }

/* In the animated loop, the footer is part of both identical hero endpoints and fades away during the
   demonstration. The finite stacked/reduced-motion/no-JavaScript page keeps its ordinary flow footer. */
.homepage-loop-active > .site-footer { position: fixed; z-index: 9; inset: auto 0 0; width: 100%; max-width: none; padding: .7rem max(2rem, 5.8vw); border: 0; background: linear-gradient(0deg, rgba(8, 10, 13, .78), transparent); opacity: 0; pointer-events: none; transition: opacity .2s var(--ease); }
.homepage-loop-active.homepage-loop-resting > .site-footer { opacity: 1; pointer-events: auto; }

@media (min-width: 768px) and (max-height: 700px) {
  .homepage-loop-active > .site-footer { padding-top: .35rem; padding-bottom: .35rem; }
}

@media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
  .zoom[data-mode="zoom"] .zoom__stage { position: sticky; top: 0; height: 100svh; overflow: hidden; }
  .zoom[data-mode="zoom"] .hero { height: 100%; }
  /* The track floats over the sticky stage; only the caption cards take pointer events. */
  .zoom[data-mode="zoom"] .zoom__track { position: relative; z-index: 1; pointer-events: none; }
  .zoom[data-mode="zoom"] .zoom__spacer { height: 120svh; }
  .zoom[data-mode="zoom"] .zoom__spacer--out { position: relative; max-width: none; margin: 0; padding: 0; }
  .zoom[data-mode="zoom"] .beat { height: var(--beat-h); max-width: none; margin: 0; padding: 0 0 var(--caption-gap) var(--caption-gap); display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; }
  .zoom[data-mode="zoom"] .beat__inline { display: none; }
  /* The caption rides in with its beat, holds at the bottom-left while the beat owns the viewport, and
     fades (--exit, from main.js) as the next card takes its place. */
  .zoom[data-mode="zoom"] .beat__caption { position: sticky; bottom: var(--caption-gap); max-width: 36ch; padding: 1.2rem 1.5rem 1.35rem; border: 1px solid rgba(255, 255, 255, .1); border-radius: var(--radius-md); background: rgba(8, 10, 13, .74); -webkit-backdrop-filter: blur(18px) saturate(1.25); backdrop-filter: blur(18px) saturate(1.25); box-shadow: 0 1.25rem 3rem rgba(0, 0, 0, .45); opacity: calc(1 - var(--exit, 0)); pointer-events: auto; }
  .zoom[data-mode="zoom"] .beat__caption p:not(.beat__index) { font-size: clamp(.95rem, 1.05vw, 1.1rem); }
  /* The document header scrolls away during the demonstration, then fades back in with the closing hero. */
  .site-header.is-returning { position: fixed; opacity: var(--hero-return-fade, 0); pointer-events: none; }
  .site-header.is-returning.is-returned { pointer-events: auto; }
}