/* CCAA 42차 | 첫 화면의 움직임을 느리고 자연스럽게
   41차 스크롤 효과는 그대로 유지하고 배너·날씨에만 적용. */

/* 별도로 남아 있던 0.7초짜리 heroEnter 효과를 대체. */
@media (prefers-reduced-motion: no-preference) {
  #main > .hero .hero-copy {
    animation: ccaa-hero-soft-enter 1600ms cubic-bezier(.18,.56,.25,1) both !important;
    backface-visibility: hidden;
  }
  /* 사진은 위치 이동 없이 아주 천천히 선명해집니다. */
  #main > .hero .hero-image {
    animation: ccaa-hero-image-fade 1800ms cubic-bezier(.2,.58,.3,1) both;
  }
  #main > .hero .hero-badge {
    animation: ccaa-hero-badge-fade 1450ms 220ms ease-out both;
  }
}
@keyframes ccaa-hero-soft-enter {
  from { opacity: 0; transform: translate3d(0,12px,0); }
  to { opacity: 1; transform: translate3d(0,0,0); }
}
@keyframes ccaa-hero-image-fade {
  from { opacity: .66; }
  to { opacity: 1; }
}
@keyframes ccaa-hero-badge-fade {
  from { opacity: .35; }
  to { opacity: 1; }
}

/* 외부 WeatherWidget.io가 iframe을 삽입하고 로딩할 때의 급작스러운 등장 완화.
   JS가 정상적으로 시작했을 때만 클래스를 추가해 비활성 JS에서도 콘텐츠가 보입니다. */
@media (min-width: 651px) and (prefers-reduced-motion: no-preference) {
  html.ccaa-weather-intro-ready #main .weather-showcase .quick-weather {
    opacity: 0;
    translate: 0 7px;
    transition:
      opacity 1550ms cubic-bezier(.19,.64,.29,1),
      translate 1700ms cubic-bezier(.2,.58,.32,1);
  }
  html.ccaa-weather-intro-ready #main .weather-showcase .quick-weather.ccaa-weather-visible {
    opacity: 1;
    translate: 0 0;
  }
}
/* 모바일 기존 SVG 구름 애니메이션은 동일한 2px 거리만 12초에 걸쳐 이동. */
@media (max-width: 650px) and (prefers-reduced-motion: no-preference) {
  #main .weather-showcase .ccaa-mobile-weather .mobile-weather-icon svg {
    animation: ccaa-gentle-cloud-float 12s cubic-bezier(.42,0,.58,1) infinite !important;
    will-change: transform;
  }
}
@keyframes ccaa-gentle-cloud-float {
  0%,100% { transform: translate3d(0,0,0); }
  50% { transform: translate3d(0,-2px,0); }
}
@media (prefers-reduced-motion: reduce) {
  #main > .hero .hero-copy,
  #main > .hero .hero-image,
  #main > .hero .hero-badge,
  #main .weather-showcase .ccaa-mobile-weather .mobile-weather-icon svg {
    animation: none !important;
  }
  html.ccaa-weather-intro-ready #main .weather-showcase .quick-weather {
    opacity: 1 !important;
    translate: none !important;
    transition: none !important;
  }
}