/*!
 * ═══════════════════════════════════════════════════════════════════
 * 📦 Satz Blocks — section-scroll-effects (v1.0.0)
 * ═══════════════════════════════════════════════════════════════════
 *
 * Home 페이지 섹션 간 스크롤 전환 효과
 * - Hero Shrink & Dim: (1) 섹션 축소 + 어두워짐
 * - Parallax BG Fade: (2) 섹션 배경 → #0a0a0a 페이드
 *
 * slug: section-scroll-effects
 * domain: scroll-animation
 * path: clients/OFFBEAT-STUDIO/02-pages/Home/section-scroll-effects
 * engine: gsap
 * plugins: [ScrollTrigger]
 *
 * ═══════════════════════════════════════════════════════════════════
 * 🎯 Webflow Designer — 필수 설정
 * ═══════════════════════════════════════════════════════════════════
 *
 * ┌─────────────────────────────────────────────────────────────────┐
 * │ 1️⃣ Hero Dim Overlay 추가                                        │
 * └─────────────────────────────────────────────────────────────────┘
 *
 * 📍 대상: offbeat-hero-landing_section 내부
 *
 * Designer → Div Block 추가 → Settings:
 * ┌──────────────────────────────────────┐
 * │ Class: offbeat-hero-landing_dim-overlay │
 * │ Attribute: data-satz="hero-dim-overlay" │
 * └──────────────────────────────────────┘
 *
 * ┌─────────────────────────────────────────────────────────────────┐
 * │ 2️⃣ Parallax Fade Overlay 추가                                   │
 * └─────────────────────────────────────────────────────────────────┘
 *
 * 📍 대상: studio-home-parallax 내부
 *
 * Designer → Div Block 추가 → Settings:
 * ┌──────────────────────────────────────┐
 * │ Class: studio-home-parallax__fade-overlay │
 * │ Attribute: data-satz="parallax-fade-overlay" │
 * └──────────────────────────────────────┘
 *
 */

/* ─────────────────────────────────────────────────────────────
   Effect 1: Hero Dim Overlay
   - 섹션이 스크롤 아웃될 때 어두워지는 오버레이
   ───────────────────────────────────────────────────────────── */
.offbeat-hero-landing_dim-overlay {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  background-color: #0a0a0a;
  opacity: 0;
  pointer-events: none;
  /* GPU 가속 */
  will-change: opacity;
}

/* ─────────────────────────────────────────────────────────────
   Effect 2: Parallax Fade Overlay
   - 섹션 끝에서 배경이 #0a0a0a로 페이드되는 그라디언트
   ───────────────────────────────────────────────────────────── */
.studio-home-parallax__fade-overlay {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  /* bg(1) < content(2) < fade-overlay(3) */
  background: linear-gradient(to top, rgba(10, 10, 10, 1) 0%, rgba(10, 10, 10, 0.4) 100%);
  opacity: 0;
  pointer-events: none;
  /* GPU 가속 */
  will-change: opacity;
}

/* ─────────────────────────────────────────────────────────────
   Hero Section - transform-origin for scale effect
   ───────────────────────────────────────────────────────────── */
.offbeat-hero-landing_section {
  transform-origin: center center;
  /* GPU 가속 */
  will-change: transform;
}

/* ─────────────────────────────────────────────────────────────
   Reduce Motion 대응
   ───────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {

  .offbeat-hero-landing_dim-overlay,
  .studio-home-parallax__fade-overlay {
    opacity: 0 !important;
  }

  .offbeat-hero-landing_section {
    transform: none !important;
  }
}