/* ==========================================
   Welcome Explorer V12 Final
   animation.css
   東大附中小學部｜全站動畫
========================================== */

/* ==========================================
   首頁淡入動畫（V12 Official）
========================================== */

.fade-up{
  opacity:0;
  transform:translateY(28px);
  will-change:opacity, transform;
}

.fade-up.show{
  opacity:1;
  transform:translateY(0);
  animation:fadeUp .9s ease forwards;
}

.fade-delay-1{ animation-delay:.18s; }
.fade-delay-2{ animation-delay:.36s; }
.fade-delay-3{ animation-delay:.54s; }
.fade-delay-4{ animation-delay:.72s; }

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



/* --------- 卡片浮起 --------- */

.feature-card,
.story-card,
.date-card,
.event-card,
.notice-card,
.activity-preview-card{
  transition:transform .35s ease, box-shadow .35s ease;
}

.feature-card:hover,
.story-card:hover,
.date-card:hover,
.event-card:hover,
.activity-preview-card:hover{
  transform:translateY(-8px);
  box-shadow:0 18px 40px rgba(20,83,45,.12);
}

.story-card:hover img{
  transform:scale(1.05);
}


/* --------- Hero 按鈕動畫 --------- */

.btn{
  transition:
    background .25s ease,
    color .25s ease,
    transform .25s ease,
    box-shadow .25s ease;
}

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

.btn.primary:hover{
  box-shadow:0 12px 24px rgba(20,83,45,.25);
}

/* --------- 時間軸動畫（捲動觸發） --------- */

.timeline .time-item{
  opacity:0;
  transform:translateX(-20px);
  will-change:opacity, transform;
}

.timeline .time-item.show{
  opacity:1;
  transform:translateX(0);
  animation:timelineShow .8s ease forwards;
}

.time-item:nth-child(1){ animation-delay:.1s; }
.time-item:nth-child(2){ animation-delay:.25s; }
.time-item:nth-child(3){ animation-delay:.4s; }
.time-item:nth-child(4){ animation-delay:.55s; }
.time-item:nth-child(5){ animation-delay:.7s;}

@keyframes timelineShow{
  from{
    opacity:0;
    transform:translateX(-20px);
  }
  to{
    opacity:1;
    transform:translateX(0);
  }
}

/* --------- 手機版減少動畫 --------- */

@media (max-width:768px){

  *{
    animation-duration:.6s !important;
    transition-duration:.25s !important;
  }

}

@media (prefers-reduced-motion: reduce){

  *{
    animation:none !important;
    transition:none !important;
    scroll-behavior:auto !important;
  }

}