/* ============================================================
   ticker.bullstory.io — animations.css v2.0
   키프레임 + 유틸리티 애니메이션 클래스 + 트랜지션 헬퍼

   의존성: tokens.css
   성능 규칙:
   - transform/opacity만 애니메이팅 (layout 트리거 금지)
   - will-change는 애니메이션 중인 요소에만 적용
   - 뷰포트당 will-change 10개 이하
   ============================================================ */


/* ============================================================
   0. @property 등록 — CSS Houdini
   conic-gradient 애니메이션을 위해 커스텀 프로퍼티 타입 선언
   ============================================================ */

@property --score-deg {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}


/* ============================================================
   1. 등장 키프레임 (Entrance)
   — 기본 ease-out: cubic-bezier(0.16, 1, 0.3, 1)
   — 이동 거리 ≤ 16px (다크 테마 모션 원칙)
   ============================================================ */

/* 페이드 인 (제자리 등장) */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* 페이드 인 + 위로 슬라이드 (기본 등장) */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 페이드 인 + 아래에서 위로 (큰 이동 — ≤16px 원칙 준수) */
@keyframes fadeUpLg {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 페이드 인 + 왼쪽에서 오른쪽 */
@keyframes fadeRight {
  from { opacity: 0; transform: translateX(-16px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* 페이드 인 + 오른쪽에서 왼쪽 */
@keyframes fadeLeft {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* 스케일 인 (모달, 드롭다운) */
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}

/* 스케일 인 + 위로 (토스트, 플로팅 바) */
@keyframes scaleUp {
  from { opacity: 0; transform: scale(0.95) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}


/* ============================================================
   2. 퇴장 키프레임 (Exit)
   — ease-in: cubic-bezier(0.55, 0, 1, 0.45)
   ============================================================ */

@keyframes fadeOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}

@keyframes fadeDown {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(12px); }
}

@keyframes scaleOut {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(0.95); }
}


/* ============================================================
   3. 반복 키프레임 (Looping)
   ============================================================ */

/* 미세 부유 (히어로 스크롤 힌트 등) */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

/* 글로우 펄스 (점수 게이지, CTA 강조) */
@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 20px var(--accent-border-subtle); }
  50%      { box-shadow: 0 0 30px var(--accent-border); }
}

/* 스피너 */
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* 카운트업 숫자 트랜지션용 — font-variant tabular */
@keyframes countReveal {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ============================================================
   4. 유틸리티 클래스 — 선언적 애니메이션 사용
   ============================================================ */

/* ── 등장 애니메이션 ── */
.anim-fade-in {
  animation: fadeIn 300ms var(--ease-out-expo) both;
}

.anim-fade-up {
  animation: fadeUp 400ms var(--ease-out-expo) both;
}

.anim-fade-up-lg {
  animation: fadeUpLg 500ms var(--ease-out-expo) both;
}

.anim-fade-right {
  animation: fadeRight 400ms var(--ease-out-expo) both;
}

.anim-fade-left {
  animation: fadeLeft 400ms var(--ease-out-expo) both;
}

.anim-scale-in {
  animation: scaleIn 250ms var(--ease-out-expo) both;
}

.anim-scale-up {
  animation: scaleUp 300ms var(--ease-out-expo) both;
}

/* ── 퇴장 애니메이션 ── */
.anim-fade-out {
  animation: fadeOut 200ms cubic-bezier(0.55, 0, 1, 0.45) both;
}

.anim-fade-down {
  animation: fadeDown 200ms cubic-bezier(0.55, 0, 1, 0.45) both;
}

.anim-scale-out {
  animation: scaleOut 200ms cubic-bezier(0.55, 0, 1, 0.45) both;
}

/* ── 반복 애니메이션 ── */
.anim-float {
  animation: float 3s var(--ease-smooth) infinite;
}

.anim-glow-pulse {
  animation: glowPulse 2s ease infinite;
}

.anim-spin {
  animation: spin 1s linear infinite;
}


/* ============================================================
   5. Stagger 딜레이 — CSS custom property 기반
   JS에서 --stagger-index를 설정하면 자동 딜레이
   예: style="--stagger-index: 0", style="--stagger-index: 1"
   ============================================================ */

[data-stagger] > * {
  animation-delay: calc(var(--stagger-index, 0) * 80ms);
}

/* 빠른 스태거 — 40ms 간격 */
[data-stagger="fast"] > * {
  animation-delay: calc(var(--stagger-index, 0) * 40ms);
}

/* 느린 스태거 — 120ms 간격 */
[data-stagger="slow"] > * {
  animation-delay: calc(var(--stagger-index, 0) * 120ms);
}


/* ============================================================
   6. 스켈레톤 → 콘텐츠 전환 (Skeleton Reveal)
   — fade-in + scale(0.98→1) 전환
   — min-height 유지로 CLS 방지
   ============================================================ */

/* 스켈레톤→콘텐츠 전환 전용 키프레임 */
@keyframes skeletonReveal {
  from {
    opacity: 0;
    transform: scale(0.98);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* 스켈레톤 페이드 아웃 → 콘텐츠 페이드 인 */
.skeleton-reveal {
  position: relative;
}

.skeleton-reveal .skeleton-placeholder {
  transition: opacity 200ms ease;
}

.skeleton-reveal.is-loaded .skeleton-placeholder {
  opacity: 0;
  position: absolute;
  pointer-events: none;
}

.skeleton-reveal .skeleton-content {
  opacity: 0;
  transform: scale(0.98);
}

.skeleton-reveal.is-loaded .skeleton-content {
  animation: skeletonReveal 400ms var(--ease-out-expo) both;
}


/* ============================================================
   7. 점수 게이지 Glow 효과
   — 점수 로드 완료 시 .is-revealed 추가
   — ring 애니메이션은 섹션 12에서 gaugeGlow로 통합 관리
   ============================================================ */

.score-gauge.is-revealed {
  animation: fadeUp 500ms var(--ease-out-expo) both;
}

/* .score-gauge__ring 애니메이션 → 섹션 12 (gaugeGlow) 참조 */


/* ============================================================
   8. 트랜지션 헬퍼 — hover/상태 변화용
   ============================================================ */

/* 카드 호버 lift — transform + shadow 동시 전환 */
.hover-lift {
  transition:
    transform var(--transition-smooth),
    box-shadow var(--transition-smooth);
  will-change: transform;
}

.hover-lift:hover {
  transform: translateY(-2px);
}

/* 버튼 프레스 — 미세 축소 */
.press-scale {
  transition: transform var(--transition-fast);
}

.press-scale:active {
  transform: scale(0.97);
}

/* 글로우 호버 — box-shadow 전환 */
.hover-glow {
  transition: box-shadow var(--transition-smooth);
}

.hover-glow:hover {
  box-shadow: var(--shadow-glow-accent);
}


/* ============================================================
   9. 성능 힌트 — GPU 가속 요소
   — 애니메이션 중인 요소에만 적용 (항상 적용 금지)
   ============================================================ */

.gpu-accelerated {
  will-change: transform;
  backface-visibility: hidden;
}

/* GSAP ScrollTrigger 대상 — 초기 상태 */
[data-animate] {
  will-change: transform, opacity;
}

/* 애니메이션 완료 후 will-change 해제 */
[data-animate].is-visible {
  will-change: auto;
}


/* ============================================================
   10. prefers-reduced-motion — 모든 애니메이션 비활성화
   (base.css에 전역 규칙 있으나, 유틸리티 클래스 보강)
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  /* 유틸리티 클래스 즉시 표시 */
  .anim-fade-in,
  .anim-fade-up,
  .anim-fade-up-lg,
  .anim-fade-right,
  .anim-fade-left,
  .anim-scale-in,
  .anim-scale-up {
    animation: none;
    opacity: 1;
    transform: none;
  }

  /* 반복 애니메이션 중지 */
  .anim-float,
  .anim-glow-pulse {
    animation: none;
  }

  /* hover 트랜지션 제거 */
  .hover-lift:hover {
    transform: none;
  }

  /* will-change 해제 */
  [data-animate],
  .gpu-accelerated {
    will-change: auto;
  }

  /* 스켈레톤 reveal 즉시 표시 */
  .skeleton-reveal .skeleton-content {
    transform: none;
  }

  .skeleton-reveal.is-loaded .skeleton-content {
    animation: none;
    opacity: 1;
    transform: none;
  }

  /* 점수 게이지 즉시 표시 — 섹션 19에서 확장 커버 */
  .score-gauge.is-revealed {
    animation: none;
    opacity: 1;
  }
}


/* ============================================================
   11. 라이트 테마 오버라이드
   — 글로우 효과 밝기 조정
   ============================================================ */

[data-theme="light"] .anim-glow-pulse {
  --glow-color: var(--accent-soft);
}
/* 점수 게이지 라이트 모드 오버라이드 → 섹션 20 (gaugeGlowLight) 참조 */

@keyframes glowPulseLight {
  0%, 100% { box-shadow: 0 0 20px var(--accent-soft); }
  50%      { box-shadow: 0 0 30px var(--accent-glow); }
}

[data-theme="light"] .anim-glow-pulse {
  animation-name: glowPulseLight;
}


/* ============================================================
   12. [B7] 점수 게이지 conic-gradient 채움 애니메이션
   — @property --score-deg 기반 전환
   — JS에서 --score-deg 설정 시 자동으로 0deg → target 전환
   — SVG stroke-dashoffset 방식과 병행 (report.css)
   ============================================================ */

/* conic-gradient 기반 게이지 링 — 채움 전환 */
.score-gauge__ring {
  transition: --score-deg 1.2s var(--ease-spring);
}

/* 점수 로드 완료 시 glow + 채움 동시 진행 */
.score-gauge.is-revealed .score-gauge__ring {
  animation: gaugeGlow 1.5s var(--ease-out-expo) 1;
}

/* 게이지 전용 글로우 — 채움 완료 시 미세 발광 후 소멸 */
@keyframes gaugeGlow {
  0%   { filter: drop-shadow(0 0 0 transparent); }
  40%  { filter: drop-shadow(0 0 12px var(--score-color, var(--accent-color))); }
  100% { filter: drop-shadow(0 0 4px var(--score-color, var(--accent-color))); }
}

/* 점수 숫자 카운트업 등장 — 게이지 채움과 동기화 */
.score-gauge.is-revealed .score-gauge__value {
  animation: countReveal 600ms var(--ease-out-expo) 200ms both;
}


/* ============================================================
   13. [B7] 글래스 카드 hover 트랜지션 통일
   — components.css .glass-card 기본 전환을 보강
   — 모든 glass-card 계열에 일관된 hover 동작 보장
   — ::before sheen 전환 + 60fps GPU 가속
   ============================================================ */

/* sheen(상단 빛줄기) hover 시 밝기 전환 */
.glass-card::before {
  transition: opacity var(--transition-smooth);
}

.glass-card:hover::before {
  opacity: 1;
}

/* 프리미엄 카드 sheen hover 강화 */
.glass-card--premium:hover::before {
  opacity: 0.9;
}

/* glass-card 호버 시 GPU 가속 (레이아웃 점프 방지) */
.glass-card {
  will-change: transform;
  backface-visibility: hidden;
}

/* 호버 완료 후 will-change 해제 — JS transitionend 없이 CSS만으로 */
.glass-card:not(:hover) {
  will-change: auto;
}

/* flat-card 호버에도 동일 sheen 동작 부여 */
.flat-card {
  will-change: transform;
  backface-visibility: hidden;
}

.flat-card:not(:hover) {
  will-change: auto;
}


/* ============================================================
   14. [B7] CTA 시머 최적화
   — components.css .btn--shimmer::after 보강
   — will-change + 시머 간 휴식 (3s 중 1.5s 이동 + 1.5s 정지)
   ============================================================ */

/* GPU 가속 힌트 */
.btn--shimmer::after {
  will-change: transform;
  backface-visibility: hidden;
}

/* 시머 간격 조정 — 50% 이동 + 50% 정지 */
@keyframes shimmerOptimized {
  0%       { transform: translateX(-100%) translateY(-100%); }
  35%      { transform: translateX(100%) translateY(100%); }
  35.01%,
  100%     { transform: translateX(-100%) translateY(-100%); }
}

/* 최적화된 시머를 사용하는 변형 (기존 shimmer와 공존) */
.btn--shimmer-slow::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent 40%,
    var(--shimmer-highlight) 50%,
    transparent 60%
  );
  animation: shimmerOptimized 4s ease-in-out infinite;
  pointer-events: none;
  will-change: transform;
}


/* ============================================================
   15. [C4] 테마 전환 트랜지션 — 300ms ease 표준화
   — tokens.css의 0.4s/0.3s 혼재를 300ms ease로 통일
   — animations.css가 tokens.css 이후 로드되므로 안전하게 오버라이드
   ============================================================ */

html.theme-transition,
html.theme-transition *,
html.theme-transition *::before,
html.theme-transition *::after {
  transition:
    background-color 300ms ease,
    color 300ms ease,
    border-color 300ms ease,
    box-shadow 300ms ease,
    fill 300ms ease,
    stroke 300ms ease !important;
}


/* ============================================================
   16. [C4] 스크롤 Reveal — IntersectionObserver 연동
   — 초기 상태: 투명 + 미세 이동
   — .is-visible 클래스 추가 시 등장 애니메이션 실행
   — 방향별 변형 제공
   ============================================================ */

/* 기본 reveal — 아래에서 위로 */
.scroll-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 500ms var(--ease-out-expo),
    transform 500ms var(--ease-out-expo);
}

.scroll-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* 왼쪽에서 오른쪽 */
.scroll-reveal--left {
  opacity: 0;
  transform: translateX(-16px);
  transition:
    opacity 500ms var(--ease-out-expo),
    transform 500ms var(--ease-out-expo);
}

.scroll-reveal--left.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* 오른쪽에서 왼쪽 */
.scroll-reveal--right {
  opacity: 0;
  transform: translateX(16px);
  transition:
    opacity 500ms var(--ease-out-expo),
    transform 500ms var(--ease-out-expo);
}

.scroll-reveal--right.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* 스케일 인 */
.scroll-reveal--scale {
  opacity: 0;
  transform: scale(0.95);
  transition:
    opacity 400ms var(--ease-out-expo),
    transform 400ms var(--ease-out-expo);
}

.scroll-reveal--scale.is-visible {
  opacity: 1;
  transform: scale(1);
}

/* 스크롤 reveal 스태거 딜레이 — --reveal-delay 커스텀 프로퍼티 */
.scroll-reveal[style*="--reveal-delay"] {
  transition-delay: var(--reveal-delay, 0ms);
}


/* ============================================================
   17. [C4] 모달 트랜지션 개선
   — components.css 기존 transition 위에 키프레임 기반 진입/퇴장 추가
   — 모바일 바텀시트 전환 정합성
   ============================================================ */

/* 모달 등장 — scaleIn + fadeIn 조합 */
@keyframes modalEnter {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.93);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

/* 모달 퇴장 */
@keyframes modalExit {
  from {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  to {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.93);
  }
}

/* 키프레임 모드 사용 시 (JS에서 .modal--animate-in / --animate-out 추가) */
.modal--animate-in {
  animation: modalEnter 300ms var(--ease-out-expo) both;
}

.modal--animate-out {
  animation: modalExit 200ms cubic-bezier(0.55, 0, 1, 0.45) both;
}

/* 모바일 바텀시트 진입/퇴장 키프레임 */
@keyframes bottomSheetEnter {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

@keyframes bottomSheetExit {
  from { transform: translateY(0); }
  to   { transform: translateY(100%); }
}

/* 768px 이하에서 모달 → 바텀시트 애니메이션 적용 */
@media (max-width: 768px) {
  .modal--animate-in {
    animation: bottomSheetEnter 350ms var(--ease-out-expo) both;
  }

  .modal--animate-out {
    animation: bottomSheetExit 250ms cubic-bezier(0.55, 0, 1, 0.45) both;
  }
}

/* 모달 배경 스크림 — 페이드만 */
.modal-backdrop {
  transition:
    opacity 300ms ease,
    visibility 300ms ease;
}


/* ============================================================
   18. [C4] 스켈레톤 시머 GPU 최적화
   — 기존 background-position 방식 대신 transform 기반 시머
   — .skeleton--gpu 클래스로 옵트인
   — 레이아웃 트리거 제거, compositing만 사용
   ============================================================ */

/* GPU 가속 스켈레톤 — pseudo-element transform 방식 */
.skeleton--gpu {
  position: relative;
  overflow: hidden;
  background: var(--skeleton-base);
  border-radius: var(--radius-xs);
  /* background-position 애니메이션 제거 */
  animation: none;
}

.skeleton--gpu::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--skeleton-highlight) 50%,
    transparent 100%
  );
  transform: translateX(-100%);
  animation: skeletonShimmerGpu 1.5s ease infinite;
  will-change: transform;
}

@keyframes skeletonShimmerGpu {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* skeleton--gpu 사이즈 변형 (기존 skeleton--line 등과 호환) */
.skeleton--gpu.skeleton--line {
  height: 14px;
  width: 100%;
}

.skeleton--gpu.skeleton--line-short {
  height: 14px;
  width: 60%;
}

.skeleton--gpu.skeleton--block {
  height: 80px;
  width: 100%;
}


/* ============================================================
   18-A. [Phase3] 모바일 2D fallback — 부유 orb 애니메이션
   — Three.js 대신 CSS-only로 부유 광원 효과 구현
   — 저사양 모바일 (cores ≤ 4, screen < 640px) 에서 활성화
   — transform + opacity만 사용 (layout 트리거 없음)
   ============================================================ */

/* orb 1 — 좌상단, 크고 느린 부유 궤적 */
@keyframes fallbackOrb1 {
  0%   { transform: translate(0, 0) scale(1);       opacity: 0.5; }
  25%  { transform: translate(30px, -20px) scale(1.05); opacity: 0.7; }
  50%  { transform: translate(-10px, 25px) scale(0.95); opacity: 0.4; }
  75%  { transform: translate(20px, 10px) scale(1.02);  opacity: 0.6; }
  100% { transform: translate(0, 0) scale(1);       opacity: 0.5; }
}

/* orb 2 — 우하단, 작고 빠른 부유 궤적 */
@keyframes fallbackOrb2 {
  0%   { transform: translate(0, 0) scale(1);        opacity: 0.4; }
  30%  { transform: translate(-25px, 15px) scale(1.08); opacity: 0.6; }
  60%  { transform: translate(15px, -20px) scale(0.92); opacity: 0.35; }
  100% { transform: translate(0, 0) scale(1);        opacity: 0.4; }
}


/* ============================================================
   18-B. [Organic] 반죽 모션 — blob/morph 유기적 애니메이션
   — prompties 디자인 시스템에서 이식
   — border-radius 변형 + scale 호흡으로 유기적 느낌 구현
   — 로딩 인디케이터, 히어로 장식 등에 활용
   ============================================================ */

/* 반죽(blob) 형태 변형 — border-radius 순환 */
@keyframes blobMorph {
  0%   { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
  50%  { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
  100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
}

/* 유기적 호흡 — scale + opacity 순환 */
@keyframes organicPulse {
  0%   { transform: scale(1);    opacity: 0.7; }
  50%  { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1);    opacity: 0.7; }
}

/* 유기적 등장 — scale + translateY + blur 복합 */
@keyframes organicReveal {
  0%   { opacity: 0; transform: scale(0.97) translateY(12px); filter: blur(6px); }
  100% { opacity: 1; transform: scale(1) translateY(0);       filter: blur(0); }
}

/* 선택 파동 — 클릭/탭 시 확산 효과 */
@keyframes selectionRipple {
  0%   { transform: scale(0); opacity: 0.4; }
  100% { transform: scale(3); opacity: 0; }
}

/* ── 반죽 blob 유틸리티 클래스 ── */
.anim-blob {
  animation: blobMorph var(--anim-blob-morph, 4s) ease-in-out infinite, organicPulse var(--anim-organic-pulse, 2s) ease-in-out infinite;
}

/* 유기적 등장 유틸리티 — result-stagger와 유사 */
.anim-organic-reveal {
  opacity: 0;
  transform: scale(0.97) translateY(12px);
  filter: blur(6px);
  animation: organicReveal var(--anim-organic-reveal, 400ms) var(--ease-out-expo) both;
  will-change: transform, opacity, filter;
}

/* 유기적 등장 스태거 — --result-i 인덱스 기반 딜레이 */
.anim-organic-stagger {
  opacity: 0;
  transform: scale(0.97) translateY(12px);
  filter: blur(6px);
  animation: organicReveal var(--anim-organic-reveal, 400ms) var(--ease-out-expo) both;
  animation-delay: calc(var(--result-i, 0) * var(--stagger-delay-result, 80ms));
  will-change: transform, opacity, filter;
}

/* 선택 파동 유틸리티 */
.anim-selection-ripple {
  position: absolute;
  border-radius: 50%;
  background: var(--accent-glow, var(--accent-border-subtle));
  pointer-events: none;
  animation: selectionRipple var(--anim-selection-ripple, 500ms) var(--ease-out-expo) forwards;
}


/* ============================================================
   19. [C4] prefers-reduced-motion 확장
   — 섹션 12~18 신규 애니메이션 대응
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  /* 점수 게이지 conic-gradient 전환 즉시 완료 */
  .score-gauge__ring {
    transition: none;
  }

  .score-gauge.is-revealed .score-gauge__ring {
    animation: none;
    filter: none;
  }

  .score-gauge.is-revealed .score-gauge__value {
    animation: none;
    opacity: 1;
  }

  /* CTA 시머 중지 */
  .btn--shimmer::after,
  .btn--shimmer-slow::after {
    animation: none;
    opacity: 0;
  }

  /* 글래스 카드 hover 전환 제거 */
  .glass-card,
  .flat-card {
    will-change: auto;
  }

  .glass-card:hover,
  .flat-card:hover {
    transform: none;
  }

  /* 테마 전환 즉시 */
  html.theme-transition,
  html.theme-transition *,
  html.theme-transition *::before,
  html.theme-transition *::after {
    transition: none !important;
  }

  /* 스크롤 reveal 즉시 표시 */
  .scroll-reveal,
  .scroll-reveal--left,
  .scroll-reveal--right,
  .scroll-reveal--scale {
    opacity: 1;
    transform: none;
    transition: none;
  }

  /* 모달 즉시 열림/닫힘 */
  .modal--animate-in,
  .modal--animate-out {
    animation: none;
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  /* GPU 스켈레톤 시머 중지 */
  .skeleton--gpu::after {
    animation: none;
    opacity: 0;
  }

  /* 반죽 모션 중지 */
  .anim-blob {
    animation: none;
    opacity: 1;
  }

  .anim-organic-reveal,
  .anim-organic-stagger {
    animation: none;
    opacity: 1;
    transform: none;
    filter: none;
  }

  .anim-selection-ripple {
    animation: none;
    opacity: 0;
  }

  /* 모바일 2D fallback orb — 애니메이션 중지 */
  .hero-fallback::before,
  .hero-fallback::after {
    animation: none;
  }
}


/* ============================================================
   20. [C4] 라이트 테마 — 신규 애니메이션 오버라이드
   ============================================================ */

/* 라이트 모드 게이지 글로우 — 강도 절제 */
[data-theme="light"] .score-gauge.is-revealed .score-gauge__ring {
  animation-name: gaugeGlowLight;
}

@keyframes gaugeGlowLight {
  0%   { filter: drop-shadow(0 0 0 transparent); }
  40%  { filter: drop-shadow(0 0 8px var(--score-color, var(--accent-color))); }
  100% { filter: drop-shadow(0 0 2px var(--score-color, var(--accent-color))); }
}