/**
 * Case Study In-Flow Reveal Styles
 * Updated: Oct 22, 2025
 * 
 * Hybrid scrolling architecture:
 * - Normal sections use simulated scrolling (wheel → transform)
 * - Case-reveal sections use native scrolling (overflow-y: auto)
 * 
 * Fixes applied:
 * 1. CSS layout override for case-reveal sections
 * 2. Visibility toggle for reveal container
 * 3. Native scroll support
 */

/* ============================================
   SECTION LAYOUT OVERRIDE (Fix 1)
   ============================================ */

/**
 * Override layout for case-reveal sections to enable native scrolling
 * Treat the section as its own viewport while keeping stacking intact
 */
.content-section[data-type="case-reveal"] {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  max-width: 100vw !important;
  height: 100vh !important;
  max-height: 100vh !important;
  min-height: 100vh !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  z-index: 1 !important;
}

/**
 * Terminal frame within case-reveal should not constrain height
 */
.content-section[data-type="case-reveal"] .terminal-frame {
  width: 100% !important;
  max-width: 100% !important;
  padding: 5vh 6vw !important;
  box-sizing: border-box !important;
}

/**
 * Content wrapper for case-reveal sections
 */
.content-section[data-type="case-reveal"] .content-wrapper {
  width: 100% !important;
  max-width: 100% !important;
}

.content-section[data-type="case-reveal"].case-reveal-content-hidden .content-wrapper {
  display: none !important;
}

.content-section[data-type="case-reveal"].case-reveal-content-hidden .terminal-frame {
  padding: 0 !important;
}

.content-section[data-type="case-reveal"].case-reveal-content-hidden .case-study-reveal-container {
  margin-top: 0 !important;
}

/* ============================================
   CASE STUDY REVEAL CONTAINER
   ============================================ */

/**
 * Container for all media sections in a case study
 * Height is calculated as 300vh per media item
 * Hidden by default, shown when .active class is added (Fix 3)
 */
.case-study-reveal-container {
  position: relative;
  width: 100%;
  display: none; /* Hidden until content panel completes */
  /* Height set dynamically by JS: mediaCount * 300vh */
}

/**
 * Show reveal container when active
 */
.case-study-reveal-container.active {
  display: block;
  width: 100%;
  flex: 1 1 auto;
}

/* ============================================
   MEDIA SECTION (One per image/video)
   ============================================ */

/**
 * Individual media section - 300vh tall to allow scroll reveal
 */
.case-study-media-section {
  position: relative;
  width: 100%;
  height: 300vh;
}

/* ============================================
   STICKY WRAPPER
   ============================================ */

/**
 * Sticky wrapper that stays in viewport while section scrolls
 */
.case-study-media-wrapper {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  z-index: 1;
}

/* ============================================
   MEDIA BACKGROUND (Image or Video)
   ============================================ */

/**
 * Background layer showing the actual image/video
 */
.case-study-media-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/**
 * Video element styling
 */
.case-study-media-background video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

/* ============================================
   ASCII CANVAS OVERLAY
   ============================================ */

/**
 * ASCII canvas that sits on top of the media
 * Clips away from bottom as user scrolls
 */
.case-study-ascii-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  /* clip-path set dynamically by JS based on scroll progress */
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */

/**
 * Mobile: Reduce section height for faster reveals
 */
@media (max-width: 768px) {
  .case-study-media-section {
    height: 250vh; /* Shorter on mobile */
  }
}

/**
 * Tablet: Medium height
 */
@media (min-width: 769px) and (max-width: 1024px) {
  .case-study-media-section {
    height: 275vh;
  }
}

/* ============================================
   COMPATIBILITY WITH EXISTING STYLES
   ============================================ */

/**
 * Ensure case-reveal sections don't conflict with normal sections
 */
.content-section.active .case-study-reveal-container {
  /* Allow the container to be visible */
  display: block;
}

/**
 * Ensure content wrapper doesn't interfere
 */
.content-section .content-wrapper + .case-study-reveal-container {
  margin-top: 2rem;
}

/* ============================================
   PERFORMANCE OPTIMIZATIONS
   ============================================ */

/**
 * Use GPU acceleration for smooth animations
 */
.case-study-media-wrapper,
.case-study-media-background,
.case-study-ascii-canvas {
  will-change: transform, clip-path;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/**
 * Smooth clip-path transitions
 */
.case-study-ascii-canvas {
  transition: clip-path 0.1s linear;
}

/* ============================================
   DEBUG HELPERS (Remove in production)
   ============================================ */

/**
 * Uncomment to visualize section boundaries
 */
/*
.case-study-media-section {
  border: 2px solid red;
}

.case-study-media-wrapper {
  border: 2px solid blue;
}
*/