/* ═══════════════════════════════════════════════════════════════
   LAYOUT.CSS - Core Structure
   PMVW Landing Page - Phase 1 POC

   Layer Structure:
   z-index: 1 → Living room (fixed, zooms on scroll)
   z-index: 2 → TV screen mask (fixed, clips content, fades in)
   ═══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────
   ZOOM SCROLL SPACER
   Creates scroll space for zoom animation
   ───────────────────────────────────────── */
.zoom-scroll {
  height: 200vh; /* 100vh for zoom + 100vh buffer for content viewing */
  pointer-events: none;
}

/* ─────────────────────────────────────────
   LIVING ROOM - Fixed Background Layer
   Zooms toward TV center on scroll
   ───────────────────────────────────────── */
.living-room {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* Transform origin set to TV center (calculated from TV bounds) */
  /* TV center X = 50% (centered horizontally) */
  /* TV center Y = higher value = zoom ends with TV higher in viewport */
  transform-origin: 50% 6%;
  will-change: transform, filter;
  /* NO CSS transitions - JavaScript handles all animation via RAF */
}

.living-room__image {
  width: 100%;
  height: 100%;
  object-fit: fill; /* Stretch to fill - ensures TV position is consistent */
}

/* ─────────────────────────────────────────
   TV HERO FIXED - Separate layer, NOT blurred
   Scales with living room but positioned independently
   ───────────────────────────────────────── */
.tv-hero-fixed {
  position: fixed;
  inset: 0;
  z-index: 1; /* Same layer as living room */
  pointer-events: none;
  /* MUST match living-room transform-origin exactly */
  transform-origin: 50% 6%;
  will-change: transform, opacity;
  /* NO CSS transitions - JavaScript handles all animation via RAF */
}

.tv-hero-fixed__image {
  /* Uses UNZOOMED bounds - where TV appears at scale 1 */
  position: absolute;
  top: var(--tv-unzoomed-top);
  left: var(--tv-unzoomed-left);
  width: var(--tv-unzoomed-width);
  height: var(--tv-unzoomed-height);
  object-fit: cover;
}

/* Hide when TV content is visible */
.tv-hero-fixed--hidden {
  opacity: 0;
}

/* ─────────────────────────────────────────
   TV SCREEN - Masked Scrollable Area
   Hidden initially, fades in after zoom
   ───────────────────────────────────────── */
.tv-screen {
  position: fixed;
  top: var(--tv-top);
  left: var(--tv-left);
  width: var(--tv-width);
  height: var(--tv-height);
  z-index: 2;
  overflow: hidden; /* CRITICAL: Clips content to TV bounds */
  opacity: 0; /* Hidden during zoom */
  pointer-events: none; /* Disable interaction during zoom */
  will-change: opacity;
  /* transition: opacity 0.3s ease-out; */
}

/* State when zoom is complete */
.tv-screen--visible {
  opacity: 1;
  pointer-events: auto;
}

.tv-screen__content {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch; /* iOS momentum scrolling */

  /* Scroll snap - sections anchor automatically */
  scroll-snap-type: y mandatory;

  /* Subtle scrollbar styling */
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
}

/* Webkit scrollbar (Chrome, Safari, Edge) */
.tv-screen__content::-webkit-scrollbar {
  width: 4px;
}

.tv-screen__content::-webkit-scrollbar-track {
  background: transparent;
}

.tv-screen__content::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 2px;
}

.tv-screen__content::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25);
}