/* ============================================
   FLOCSS Architecture - Sticky Hero Animation
   
   1. Foundation - リセット、変数、ベース
   2. Layout     - 大枠レイアウト (l-)
   3. Object
      - Component - 再利用パーツ (c-)
      - Project   - プロジェクト固有 (p-)
      - Utility   - ヘルパー (u-)
   ============================================ */

/* ============================================
   Foundation
   - CSS Variables
   - Reset
   - Base Styles
   ============================================ */
:root {
  /* Colors */
  --color-bg: #fafafa;
  --color-bg-alt: #f5f5f5;
  --color-surface: #ffffff;
  --color-dark: #1a1a1a;
  --color-accent: #e53935;
  --color-muted: #6b6b6b;
  --color-gray: #5a5a5a;
  --color-border: rgba(0, 0, 0, 0.06);
  
  /* Typography */
  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'Noto Sans JP', sans-serif;
  
  /* Spacing */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  
  /* Layout */
  --hero-height: 100vh;
  --scroll-content-height: 150vh;
  
  /* Transition */
  --ease-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 0.3s;
  --duration-normal: 0.4s;
  --duration-slow: 0.8s;
  
  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
}

/* ============================================
   Layout (l-)
   - 大枠のレイアウト構造
   ============================================ */

/* 
 * l-hero-container
 * ヒーローセクション全体のコンテナ
 * sticky の有効範囲を定義
 */
.l-hero-container {
  position: relative;
  height: calc(var(--hero-height) + var(--scroll-content-height));
}

/*
 * l-hero
 * sticky ヒーローヘッダー本体
 */
.l-hero {
  position: sticky;
  top: 0;
  height: var(--hero-height);
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--color-bg);
  z-index: 100;
}

/*
 * l-hero__left / l-hero__right
 * ヒーローの左右分割
 */
.l-hero__left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: var(--space-2xl);
  background: var(--color-bg-alt);
  border-right: 1px solid var(--color-border);
  position: relative;
  overflow: hidden;
}

.l-hero__left::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(
    circle at 30% 40%,
    rgba(229, 57, 53, 0.03) 0%,
    transparent 50%
  );
  pointer-events: none;
}

.l-hero__right {
  position: relative;
  background: var(--color-surface);
  overflow: hidden;
}

/*
 * l-hero__scroll-area
 * スクロール可能領域のラッパー
 */
.l-hero__scroll-area {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: calc(var(--hero-height) + var(--scroll-content-height));
}

/* ============================================
   Component (c-)
   - 再利用可能な汎用コンポーネント
   ============================================ */

/*
 * c-scroll-indicator
 * スクロール促進インジケーター
 */
.c-scroll-indicator {
  position: fixed;
  bottom: var(--space-lg);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  z-index: 1000;
  opacity: 1;
  transition: opacity 0.5s var(--ease-smooth);
}

.c-scroll-indicator.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.c-scroll-indicator__text {
  font-family: var(--font-display);
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.c-scroll-indicator__arrow {
  width: 20px;
  height: 20px;
  border-right: 2px solid var(--color-accent);
  border-bottom: 2px solid var(--color-accent);
  transform: rotate(45deg);
  animation: c-scroll-indicator-bounce 2s infinite;
}

@keyframes c-scroll-indicator-bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: rotate(45deg) translateY(0);
  }
  40% {
    transform: rotate(45deg) translateY(-8px);
  }
  60% {
    transform: rotate(45deg) translateY(-4px);
  }
}

/*
 * c-debug-panel
 * デバッグ情報パネル
 */
.c-debug-panel {
  position: fixed;
  top: var(--space-sm);
  right: var(--space-sm);
  background: rgba(0, 0, 0, 0.85);
  color: #00ff88;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  font-family: 'Monaco', 'Consolas', monospace;
  font-size: 0.75rem;
  z-index: 9999;
  line-height: 1.8;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 255, 136, 0.2);
}

.c-debug-panel__title {
  color: white;
  font-weight: 600;
  margin-bottom: var(--space-xs);
  font-size: 0.8rem;
}

.c-debug-panel__row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-lg);
}

.c-debug-panel__label {
  color: rgba(255, 255, 255, 0.6);
}

.c-debug-panel__value {
  color: #00ff88;
  font-weight: 600;
}

.c-debug-panel__value.is-active {
  color: #ff6b6b;
}

/* ============================================
   State (is-)
   - 状態を表すクラス
   ============================================ */
.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.is-unpinned {
  /* ヒーロー解除時の追加スタイル用 */
}

/* ============================================
   Responsive
   ============================================ */
@media (max-width: 768px) {
  .l-hero {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }
  
  .l-hero__left {
    padding: var(--space-lg);
    min-height: 40vh;
  }
  
  .c-debug-panel {
    top: auto;
    bottom: 5rem;
    right: var(--space-sm);
    font-size: 0.65rem;
    padding: 0.75rem var(--space-sm);
  }
}