/* ============================================================
   hero-3d.css — Three.js MacBook hero, scroll-driven camera orbit.
   Loaded only on landing pages. Compositor-only animations.
   Mobile (<768px) and prefers-reduced-motion fall back to static poster.
   ============================================================ */

/* Remove ALL grid backgrounds on the landing — body bp-grid + hero ambient-grid. */
.bp-grid { display: none; }
.hero-3d .ambient-grid { display: none; }

/* Align header inner container with the hero text (.hero-text-overlay padding
   0 6vw) so the "AVP AI" logo lines up vertically with "Скрининг…". */
.header .container {
  max-width: none;
  padding-left: 6vw;
  padding-right: 6vw;
}

.hero-3d {
  height: 250vh;
  position: relative;
  background: var(--color-bg-base, #000);
  /* Override legacy `.hero { overflow: hidden }` from styles.css —
     sticky child inside overflow:hidden ancestor is a browser no-op. */
  overflow: visible;
}
.hero-3d .hero-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  /* Clip MacBook bleed at the pin level, not the section level. */
  overflow: hidden;
  /* Isolate sticky pin layout so canvas resizes don't invalidate the document. */
  contain: layout paint;
}

/* 3D canvas + LCP poster — full-bleed background */
.hero-3d .hero-canvas-col {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.hero-3d #hero3dCanvas {
  width: 100%;
  height: 100%;
  display: block;
}

/* Pre-ready state: canvas invisible until Three.js paints first frame (no flash). */
.hero-3d:not(.three-ready) #hero3dCanvas { opacity: 0; }
.hero-3d.no-3d #hero3dCanvas { display: none; }

/* Mobile screenshot slideshow — hidden on desktop (3D canvas handles it). */
.hero-3d .hero-mobile-shot { display: none; }

/* Text overlay: vertically centered, left-aligned, on top of canvas */
.hero-3d .hero-text-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: clamp(10.5rem, 26vh, 16rem) 6vw 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  pointer-events: none;
}
.hero-3d .hero-text-overlay > * { pointer-events: auto; }

.hero-3d .hero-h1 {
  font-size: clamp(2.2rem, 4.5vw, 3.6rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: 700;
  color: #fff;
  max-width: 22ch;
  margin: 0 0 1.4rem;
  text-shadow: 0 2px 32px rgba(0, 0, 0, 0.75), 0 0 80px rgba(0, 0, 0, 0.5);
}
.hero-3d .hero-h1 .word {
  display: inline-block;
  will-change: transform, opacity;
  margin-right: 0.25em;
  /* opacity:1 / transform:none by default so the hero is readable even if
     GSAP or the GLB never load (slow CDN, blocked unpkg, etc.). The script
     does a `from()` entrance animation, not a `to()`. */
}
.hero-3d .hero-h1 .accent {
  color: var(--color-brand-500, #3b82f6);
}

.hero-3d .hero-sub {
  color: #cbd5e1;
  font-size: 1.05rem;
  line-height: 1.55;
  max-width: 46ch;
  margin: 0 0 2rem;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.8);
}

.hero-3d .hero-cta {
  box-shadow: 0 8px 28px rgba(59, 130, 246, 0.4);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
/* Shimmer sweep — a diagonal highlight slides left→right every few seconds
   to draw the eye. Compositor-only (transform), GPU-cheap. */
.hero-3d .hero-cta::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(255, 255, 255, 0.35) 50%,
    transparent 100%
  );
  transform: translateX(-180%) skewX(-18deg);
  animation: heroCtaShimmer 3.4s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}
@keyframes heroCtaShimmer {
  0%   { transform: translateX(-180%) skewX(-18deg); }
  /* sweep happens quickly in the first ~35%, then long pause until next loop */
  35%  { transform: translateX(260%) skewX(-18deg); }
  100% { transform: translateX(260%) skewX(-18deg); }
}

.hero-3d .ambient-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(59, 130, 246, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(59, 130, 246, 0.04) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1s ease;
  z-index: 0;
}
.hero-3d.three-ready .ambient-grid,
.hero-3d.no-3d .ambient-grid { opacity: 1; }

/* ---------- Mobile / no-3D fallback ---------- */
@media (max-width: 768px) {
  .hero-3d {
    height: auto;
    min-height: auto;            /* content height — no forced 100vh void below the mac */
  }
  .hero-3d .hero-pin {
    position: relative;
    height: auto;
    min-height: auto;
    display: flex;
    flex-direction: column;
    padding-bottom: 1.25rem;     /* small gap before the next section, not a black void */
  }
  /* Box for the pre-rendered MacBook image (no live canvas on mobile).
     aspect-ratio matches the laptop webp (1564x1203 ≈ 1.30) so object-fit:contain
     fills the box edge-to-edge with no side pillarbox / no bottom void — the
     MacBook is shown as large as the column allows. width is 100% (from the
     parent), height derives from the ratio. max-height guards very wide phones. */
  .hero-3d .hero-canvas-col {
    position: relative;
    width: 100%;
    aspect-ratio: 1564 / 1203;
    height: auto;
    max-height: 62vh;
    margin: 0;
    padding: 0;
    z-index: 1;
  }
  .hero-3d .hero-text-overlay {
    position: relative;
    padding: 4.5rem 6vw 1.5rem;
    justify-content: flex-start;
    order: -1;
  }
  .hero-3d .hero-h1 {
    font-size: clamp(1.9rem, 7vw, 2.6rem);
    max-width: 100%;
    text-shadow: none;
  }
  .hero-3d .hero-sub {
    font-size: 1rem;
    max-width: 100%;
    text-shadow: none;
  }
  /* No live 3D on mobile — the canvas is never used here. */
  .hero-3d #hero3dCanvas { display: none; }

  /* Pre-rendered MacBook image cycle = the mobile hero. High-res, crisp,
     transparent (~86 KB) instead of ~2.3 MB of Three.js/DRACO/GLB. Shown
     large with no device frame. Visible even if hero-3d.js never runs
     (first <img> has .on); JS only adds the 3s cross-fade cycle. */
  .hero-3d .hero-mobile-shot {
    display: block;
    position: absolute;
    inset: 0;
  }
  .hero-3d .hero-mobile-shot img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    opacity: 0;
    transition: opacity 0.6s ease;
  }
  .hero-3d .hero-mobile-shot img.on { opacity: 1; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero-3d .hero-h1 .word,
  .hero-3d .hero-sub,
  .hero-3d .hero-cta {
    opacity: 1 !important;
    transform: none !important;
  }
  .hero-3d .hero-cta::after { animation: none; display: none; }
}