/* ===============================
   animate.css
   data-anim 기반 스크롤 애니메이션
   전 섹션 공통 사용
================================ */

/* 대기 상태 */
[data-anim] {
  opacity:0;
  visibility:hidden;
  will-change:opacity, transform;
}

/* tab-btn은 visibility 예외 — 클릭 인터랙션 유지 */
.tab-btn[data-anim] {visibility:visible;}

/* 실행 공통 */
[data-anim].is-animated {
  animation-fill-mode:both;
  animation-duration:1s;
  animation-timing-function:cubic-bezier(0.16, 1, 0.3, 1);
  opacity:1;
  visibility:visible;
}


/* ============================
   기본 이동형
============================ */

/* 아래서 위로 */
[data-anim="fade-up"].is-animated {
  animation-name:animFadeUp;
  animation-duration:1.1s;
  animation-timing-function:cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes animFadeUp {
  from {opacity:0; transform:translateY(40px) scale(0.98);}
  to   {opacity:1; transform:translateY(0)    scale(1);}
}

/* 위서 아래로 - 마스크 reveal */
[data-anim="fade-down"].is-animated {
  animation-name:animFadeDown;
  animation-duration:1.1s;
  animation-timing-function:cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes animFadeDown {
  from {opacity:0; transform:translateY(-32px) scale(0.97);}
  to   {opacity:1; transform:translateY(0)     scale(1);}
}

/* 왼쪽서 */
[data-anim="fade-right"].is-animated {
  animation-name:animFadeRight;
  animation-duration:1s;
  animation-timing-function:cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes animFadeRight {
  from {opacity:0; transform:translateX(-32px);}
  to   {opacity:1; transform:translateX(0);}
}

/* 오른쪽서 */
[data-anim="fade-left"].is-animated {
  animation-name:animFadeLeft;
  animation-duration:1s;
  animation-timing-function:cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes animFadeLeft {
  from {opacity:0; transform:translateX(32px);}
  to   {opacity:1; transform:translateX(0);}
}

/* 순수 페이드 - 로고용 고급 스케일 */
[data-anim="fade"].is-animated {
  animation-name:animFadeLogo;
  animation-duration:1.6s;
  animation-timing-function:cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes animFadeLogo {
  from {opacity:0; transform:scale(0.88) translateY(16px); filter:blur(4px);}
  60%  {filter:blur(0);}
  to   {opacity:1; transform:scale(1)    translateY(0);    filter:blur(0);}
}


/* ============================
   임팩트형 — 땅! 튀는 효과
============================ */

/* 위에서 떨어지며 바운스 */
[data-anim="drop"].is-animated {
  animation-name:animDrop;
  animation-duration:0.7s;
  animation-timing-function:cubic-bezier(0.36, 0.07, 0.19, 0.97);
}
@keyframes animDrop {
  0%   {opacity:0; transform:translateY(-60px) scaleY(1.1);}
  55%  {opacity:1; transform:translateY(8px)   scaleY(0.95);}
  75%  {           transform:translateY(-4px)  scaleY(1.02);}
  90%  {           transform:translateY(2px)   scaleY(0.99);}
  100% {opacity:1; transform:translateY(0)     scaleY(1);}
}

/* 아래서 튀어오르며 바운스 */
[data-anim="pop-up"].is-animated {
  animation-name:animPopUp;
  animation-duration:0.75s;
  animation-timing-function:cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes animPopUp {
  from {opacity:0; transform:translateY(60px) scale(0.85);}
  to   {opacity:1; transform:translateY(0)    scale(1);}
}

/* 크게서 쿵 - 줌아웃 랜딩 */
[data-anim="zoom-out"].is-animated {
  animation-name:animZoomOut;
  animation-duration:0.65s;
  animation-timing-function:cubic-bezier(0.34, 1.4, 0.64, 1);
}
@keyframes animZoomOut {
  from {opacity:0; transform:scale(1.35);}
  60%  {opacity:1; transform:scale(0.96);}
  80%  {           transform:scale(1.02);}
  to   {opacity:1; transform:scale(1);}
}

/* 작아지면서 땅! 확정 착지 */
[data-anim="zoom-in"].is-animated {
  animation-name:animZoomIn;
  animation-duration:0.7s;
  animation-timing-function:cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes animZoomIn {
  from {opacity:0; transform:scale(0.6);}
  65%  {opacity:1; transform:scale(1.06);}
  82%  {           transform:scale(0.97);}
  to   {opacity:1; transform:scale(1);}
}


/* ============================
   에코 / 잔향형
============================ */

/* 글자 울림 - 좌우 흔들며 정착 */
[data-anim="shake-in"].is-animated {
  animation-name:animShakeIn;
  animation-duration:0.8s;
  animation-timing-function:ease-out;
}
@keyframes animShakeIn {
  0%   {opacity:0; transform:translateX(-40px);}
  40%  {opacity:1; transform:translateX(12px);}
  60%  {           transform:translateX(-7px);}
  75%  {           transform:translateX(4px);}
  88%  {           transform:translateX(-2px);}
  100% {opacity:1; transform:translateX(0);}
}

/* 오른쪽 에코 */
[data-anim="shake-in-r"].is-animated {
  animation-name:animShakeInR;
  animation-duration:0.8s;
  animation-timing-function:ease-out;
}
@keyframes animShakeInR {
  0%   {opacity:0; transform:translateX(40px);}
  40%  {opacity:1; transform:translateX(-12px);}
  60%  {           transform:translateX(7px);}
  75%  {           transform:translateX(-4px);}
  88%  {           transform:translateX(2px);}
  100% {opacity:1; transform:translateX(0);}
}

/* 진동 페이드인 - 타이틀 임팩트 */
[data-anim="vibrate"].is-animated {
  animation-name:animVibrate;
  animation-duration:0.9s;
  animation-timing-function:ease-out;
}
@keyframes animVibrate {
  0%   {opacity:0; transform:scale(1.2) translateY(-20px);}
  30%  {opacity:1; transform:scale(0.95) translateY(5px);}
  50%  {           transform:scale(1.04) translateY(-3px);}
  68%  {           transform:scale(0.98) translateY(2px);}
  82%  {           transform:scale(1.01) translateY(-1px);}
  100% {opacity:1; transform:scale(1)   translateY(0);}
}

/* 빛이 터지며 등장 - 중요 포인트용 */
[data-anim="burst"].is-animated {
  animation-name:animBurst;
  animation-duration:0.6s;
  animation-timing-function:cubic-bezier(0.22, 0.61, 0.36, 1);
}
@keyframes animBurst {
  0%   {opacity:0; transform:scale(0.5);}
  50%  {opacity:1; transform:scale(1.12);}
  75%  {           transform:scale(0.95);}
  100% {opacity:1; transform:scale(1);}
}

/* 회전하며 등장 */
[data-anim="flip-in"].is-animated {
  animation-name:animFlipIn;
  animation-duration:0.7s;
  animation-timing-function:cubic-bezier(0.34, 1.3, 0.64, 1);
}
@keyframes animFlipIn {
  from {opacity:0; transform:rotateX(-80deg) translateY(30px); transform-style:preserve-3d;}
  to   {opacity:1; transform:rotateX(0deg)   translateY(0);    transform-style:preserve-3d;}
}


/* ============================
   clip-path 슬라이드 인
   (main08 col 전용 — JS로 is-visible 제어)
============================ */

/* clip-path 기본 대기 상태는 main.css에서 직접 처리
   animate.css는 data-anim 기반 요소만 제어 */


/* ============================
   col 배경 도입 전용
============================ */

/* col01 : 왼쪽에서 슬라이드+페이드 */
[data-anim="col-slide-left"].is-animated {
  animation-name:animColSlideLeft;
  animation-duration:1.2s;
  animation-timing-function:cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes animColSlideLeft {
  0%   {opacity:0; transform:translateX(-100%) scaleX(1.04);}
  70%  {opacity:1; transform:translateX(0)     scaleX(1);}
  100% {opacity:1; transform:translateX(0)     scaleX(1);}
}

/* col03 : 오른쪽에서 슬라이드+페이드 */
[data-anim="col-slide-right"].is-animated {
  animation-name:animColSlideRight;
  animation-duration:1.2s;
  animation-timing-function:cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes animColSlideRight {
  0%   {opacity:0; transform:translateX(100%) scaleX(1.04);}
  70%  {opacity:1; transform:translateX(0)    scaleX(1);}
  100% {opacity:1; transform:translateX(0)    scaleX(1);}
}


/* ============================
   음식 이미지 전용
============================ */

[data-anim="food-up"].is-animated {
  animation-name:animFoodUp;
  animation-duration:1.1s;
  animation-timing-function:cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes animFoodUp {
  from {opacity:0; transform:translateY(-6%) translateY(100px);}
  to   {opacity:1; transform:translateY(-6%);}
}

[data-anim="food-left"].is-animated {
  animation-name:animFoodLeft;
  animation-duration:1.1s;
  animation-timing-function:cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes animFoodLeft {
  from {opacity:0; transform:translateX(32%) translateY(8%) translateX(-100px);}
  to   {opacity:1; transform:translateX(32%) translateY(8%);}
}

[data-anim="food-right"].is-animated {
  animation-name:animFoodRight;
  animation-duration:1.1s;
  animation-timing-function:cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes animFoodRight {
  from {opacity:0; transform:translateX(-32%) translateY(8%) translateX(100px);}
  to   {opacity:1; transform:translateX(-32%) translateY(8%);}
}


/* ============================
   prefers-reduced-motion
============================ */
@media (prefers-reduced-motion:reduce) {
  [data-anim]             {opacity:1;}
  [data-anim].is-animated {animation:none;}
}