/* ============================================================
   LUMIX BAR — HOME
   One continuous Apple-style scroll: interactive 3D intro (experiencia.js)
   → full-bleed product shots → aplicada em casa → CTA.
   Extends base.css + lumix-experience.css. The LED light stays the only colour.
   ============================================================ */

/* ---------------- intro hand-off (home-only overrides) ----------------
   experiencia.js drives the fixed #stage + HUD for the first 1000vh. Once the
   gallery scrolls fully over it, JS pauses rendering and toggles .intro-done. */
.home .hud { opacity: var(--hud-fade, 1); will-change: opacity; }
.home #stage { transition: opacity 0.5s var(--ease); }

/* The fixed glass nav sits directly over the live WebGL canvas during the whole
   intro. A backdrop-filter there forces the browser to re-blur the animating
   canvas behind it EVERY rendered frame — a major source of scroll jank. On the
   home intro the nav is made solid (no backdrop-filter); every other page keeps
   the glass nav, since they have no full-screen live canvas underneath. */
.home .nav-pill {
  backdrop-filter: none; -webkit-backdrop-filter: none;
  background: rgba(8,8,10,0.9);
}

.home.intro-done #stage {
  opacity: 0; visibility: hidden;
  transition: opacity 0.5s var(--ease), visibility 0s 0.5s;
}
.home.intro-done .hud {
  opacity: 0 !important; visibility: hidden; pointer-events: none;
  transition: opacity 0.4s var(--ease), visibility 0s 0.4s;
}

/* the gallery rides above the fixed canvas and paints an opaque dark wipe over it */
.home-flow {
  position: relative; z-index: 2;
  background: #050506;                 /* covers the fixed WebGL stage as it rises */
}

/* ---------------- full-bleed shot section ---------------- */
.shot {
  position: relative;
  min-height: 100vh; min-height: 100svh;
  display: flex; align-items: flex-end;
  overflow: hidden;
  background: #050506;
}
.shot-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
/* the photo is taller than its frame so the parallax drift never reveals an edge */
.shot-media img {
  position: absolute; left: 0; top: -9%;
  width: 100%; height: 118%;
  object-fit: cover; object-position: center;
  will-change: transform;              /* compositor-only parallax */
}
/* under reduced-motion (no parallax) the photo sits flush in its frame */
@media (prefers-reduced-motion: reduce) {
  .shot-media img { top: 0; height: 100%; }
}
/* legibility scrim so captions never fight the photo */
.shot::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.34) 26%,
    rgba(0,0,0,0) 52%, rgba(0,0,0,0.18) 100%
  );
}
.shot--top { align-items: flex-start; }
.shot--top .shot-cap { margin-top: clamp(6rem, 12vh, 10rem); }

.shot-cap {
  position: relative; z-index: 2;
  width: min(100% - 3rem, var(--maxw));
  margin-inline: auto;
  padding-block: clamp(2.6rem, 6vh, 5rem);
  color: #fff;
}
.shot-tag {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-mono); font-size: 0.7rem;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(255,255,255,0.66); margin-bottom: 0.9rem;
}
.shot-tag::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; box-shadow: 0 0 10px currentColor;
}
.shot-cap h2 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.2rem, 1rem + 5vw, 5rem);
  letter-spacing: -0.04em; line-height: 0.98;
  max-width: 16ch;
  text-shadow: 0 2px 40px rgba(0,0,0,0.45);
}
.shot-cap p {
  margin-top: 1rem; max-width: 42ch;
  font-size: clamp(1.02rem, 0.96rem + 0.5vw, 1.35rem);
  line-height: 1.5; color: rgba(255,255,255,0.82);
  text-shadow: 0 1px 20px rgba(0,0,0,0.5);
}

/* ---------------- section intro (chapter title between phases) ---------------- */
.chapter {
  position: relative; z-index: 2;
  background: #050506; color: #fff;
  padding-block: clamp(6rem, 4rem + 10vw, 14rem);
  text-align: center;
}
.chapter .eyebrow { color: rgba(255,255,255,0.72); border-color: rgba(255,255,255,0.22); background: rgba(255,255,255,0.05); }
.chapter h2 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.6rem, 1rem + 7vw, 6.5rem);
  letter-spacing: -0.045em; line-height: 0.96;
  margin-top: 1.4rem; max-width: 18ch; margin-inline: auto;
}
.chapter p {
  margin: 1.4rem auto 0; max-width: 46ch;
  font-size: clamp(1.05rem, 0.95rem + 0.6vw, 1.4rem);
  line-height: 1.5; color: rgba(255,255,255,0.66);
}

/* ---------------- CTA ---------------- */
.home-cta {
  position: relative; z-index: 2;
  background: #050506; color: #fff;
  padding-block: clamp(7rem, 4rem + 12vw, 16rem);
  overflow: hidden;
}
.home-cta::before {                   /* faint LED pool of light behind the headline */
  content: ""; position: absolute; left: 50%; top: 38%;
  width: 70vw; height: 40vw; transform: translate(-50%, -50%);
  background: radial-gradient(50% 50% at 50% 50%, rgba(120,90,255,0.18), rgba(76,201,240,0.05) 45%, transparent 72%);
  filter: blur(30px); pointer-events: none; z-index: 0;
}
.home-cta .wrap { position: relative; z-index: 1; text-align: center; }
.home-cta h2 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.8rem, 1rem + 8vw, 7.5rem);
  letter-spacing: -0.05em; line-height: 0.94; max-width: 14ch; margin-inline: auto;
}
.home-cta p {
  margin: 1.6rem auto 2.6rem; max-width: 44ch;
  font-size: clamp(1.05rem, 0.95rem + 0.6vw, 1.4rem);
  color: rgba(255,255,255,0.66); line-height: 1.5;
}
.home-cta .cta-actions {
  display: flex; gap: 0.8rem; flex-wrap: wrap; justify-content: center;
}
.home-cta .btn-solid { background: #fff; color: #0a0a0a; }
.home-cta .btn-solid .btn-ico { background: #0a0a0a; color: #fff; }
.home-cta .btn-ghost { color: #fff; border-color: rgba(255,255,255,0.22); }
.home-cta .btn-ghost .btn-ico { background: #fff; color: #0a0a0a; }

/* deep-link row under the CTA (Explodir / Case / Guia keep their own pages) */
.cta-links {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.7rem;
  margin-top: 3rem;
}
.cta-links a {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.55rem 1.1rem; border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.16); background: rgba(255,255,255,0.04);
  font-size: 0.85rem; font-weight: 500; color: rgba(255,255,255,0.78);
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.cta-links a:hover { color: #fff; border-color: rgba(255,255,255,0.34); background: rgba(255,255,255,0.08); }
.cta-links a .mono { font-family: var(--font-mono); font-size: 0.7rem; color: rgba(255,255,255,0.4); }

/* footer sits inside the dark home flow */
.home-flow .foot { background: #050506; color: #fff; }
.home-flow .foot-grid { border-color: rgba(255,255,255,0.11); }
.home-flow .foot-links a { color: rgba(255,255,255,0.64); }
.home-flow .foot-links a:hover { color: #fff; }
.home-flow .foot-brand { color: #fff; }
.home-flow .foot-meta { color: rgba(255,255,255,0.4); }

/* ---------------- reveal for gallery captions (piggybacks common.js .reveal) ---------------- */
.shot-cap.reveal { transform: translateY(2.4rem); }

/* ---------------- responsive ---------------- */
@media (max-width: 760px) {
  .shot { min-height: 88vh; min-height: 88svh; }
  .shot-cap { padding-block: clamp(2rem, 5vh, 3.4rem); }
}

@media (prefers-reduced-motion: reduce) {
  .shot-media img { will-change: auto; }
  .home #stage, .home.intro-done #stage,
  .home .hud, .home.intro-done .hud { transition: none; }
}