/* MarketFace — home page (index.html) only.
   Full-screen scroll-driven "scenes". Loaded after styles.css and ONLY on
   the home page, so the shared styles and the doc pages are untouched.

   Everything here is written to be fully readable with NO JavaScript:
   scenes are just stacked full-height sections, images and text visible,
   captions in normal flow. animations.js layers the pin/scrub motion on top
   for users who allow motion. */

/* —— Scene scaffold ————————————————————————————————————————— */

.scene {
  position: relative;
  min-height: 100svh;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

.scene-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--bg-elev); /* shown until the image loads — never white */
}

.scene-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* a touch oversized so scaling/parallax never exposes an edge */
  transform: scale(1.05);
  transform-origin: center;
  filter: saturate(0.92) contrast(1.04) brightness(0.92);
  will-change: transform;
}

/* Dark wash so the type stays readable over any image */
.scene-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(10,13,16,0.55) 0%, rgba(10,13,16,0.35) 35%, rgba(10,13,16,0.92) 100%),
    radial-gradient(ellipse 80% 70% at 25% 45%, rgba(10,13,16,0.45), transparent 70%);
}
.scene-veil--center {
  background:
    linear-gradient(180deg, rgba(10,13,16,0.80) 0%, rgba(10,13,16,0.55) 50%, rgba(10,13,16,0.88) 100%),
    radial-gradient(ellipse 70% 60% at 50% 50%, rgba(10,13,16,0.25), transparent 75%);
}

.scene-content,
.scene-captions {
  position: relative;
  z-index: 2;
  width: 100%;
}

/* —— Scene 1: hero ——————————————————————————————————————————— */

.scene-hero .eyebrow { margin-bottom: 22px; }

.scene-hero h1 {
  font-size: clamp(2.8rem, 8vw, 6rem);
  line-height: 1.02;
  max-width: 18ch;
  margin-bottom: 0.4em;
}

.scene-hero .lead {
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  color: var(--text);
  max-width: 52ch;
  text-shadow: 0 1px 30px rgba(0,0,0,0.5);
}

/* Scroll hint pinned bottom-centre of the hero */
.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 30px;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.scroll-cue-line {
  width: 1px;
  height: 42px;
  background: linear-gradient(to bottom, var(--text-muted), transparent);
}

/* —— Ticker band (full-width marquee between scenes) —————————— */

.ticker-band {
  position: relative;
  z-index: 4;
  background: var(--bg-elev);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
.ticker-band .ticker {
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 16px var(--gutter);
  font-size: 0.86rem;
}

/* —— Scene 2: showcase ——————————————————————————————————————— */

.scene-showcase { align-items: center; }

.scene-captions { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }

/* No-JS / reduced-motion fallback: captions simply stack and read normally. */
.cap { max-width: 30ch; padding: 28px 0; }
.cap + .cap { border-top: 1px solid var(--border); }

.cap-idx {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  color: var(--up);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: 16px;
}
.scene-showcase h2 {
  font-size: clamp(2.1rem, 5.5vw, 4rem);
  line-height: 1.05;
  margin: 0 0 0.4em;
  max-width: 16ch;
}
.scene-showcase .cap p {
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  color: var(--text-muted);
  margin: 0;
  max-width: 42ch;
}

/* When animations.js takes over it adds .is-stacked: every caption is laid
   into the same grid cell and centred so they can cross-fade in place. */
.scene-captions.is-stacked {
  display: grid;
  align-content: center;
  min-height: 100vh;
}
.scene-captions.is-stacked .cap {
  grid-area: 1 / 1;
  max-width: 38ch;
  padding: 0;
  border: 0;
}

/* —— Feature detail section —————————————————————————————————— */

.features-section { padding-top: clamp(80px, 12vw, 140px); }