/* ═══════════════════════════════════════════════════
   MODERNEAST Design System — Animations
   滾動觸發動畫 + hover 效果 + 質感動態
   ═══════════════════════════════════════════════════ */

/* ── Base Animation Classes ── */
.animate { opacity: 0; }
.animate.visible {
  animation-duration: var(--duration-slow);
  animation-fill-mode: both;
  animation-timing-function: var(--ease-out);
}

/* ── Scroll-triggered Animations ── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-40px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-40px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(40px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(.95); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.fadeInUp.visible { animation-name: fadeInUp; }
.fadeInDown.visible { animation-name: fadeInDown; }
.fadeInLeft.visible { animation-name: fadeInLeft; }
.fadeInRight.visible { animation-name: fadeInRight; }
.scaleIn.visible { animation-name: scaleIn; }
.fadeIn.visible { animation-name: fadeIn; }

/* ── Stagger Delays ── */
.delay-1 { animation-delay: .1s; }
.delay-2 { animation-delay: .2s; }
.delay-3 { animation-delay: .3s; }
.delay-4 { animation-delay: .4s; }
.delay-5 { animation-delay: .5s; }
.delay-6 { animation-delay: .6s; }

/* ── Reveal Wipe — 塗料刷牆效果 ── */
@keyframes revealWipe {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}
@keyframes revealWipeRight {
  from { clip-path: inset(0 0 0 100%); }
  to { clip-path: inset(0 0 0 0); }
}
.revealWipe.visible {
  animation-name: revealWipe;
  animation-duration: 1s;
}
.revealWipeRight.visible {
  animation-name: revealWipeRight;
  animation-duration: 1s;
}

/* ── Texture Zoom — hover 時材質放大 ── */
.textureZoom {
  overflow: hidden;
}
.textureZoom img,
.textureZoom .zoom-target {
  transition: transform var(--duration-slow) var(--ease-out);
}
.textureZoom:hover img,
.textureZoom:hover .zoom-target {
  transform: scale(1.05);
}

/* ── Stagger Grid — 網格逐項淡入 ── */
.staggerGrid > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out);
}
.staggerGrid.visible > * {
  opacity: 1;
  transform: translateY(0);
}
/* JS handles per-child delay via style.transitionDelay */

/* ── Color Shift — 色號卡片 hover 漸變 ── */
.colorShift {
  transition: background-color .6s, transform var(--duration-fast), box-shadow var(--duration-fast);
}
.colorShift:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

/* ── Parallax Drift — 視差微移 ── */
.parallaxDrift {
  will-change: transform;
  transition: transform .1s linear;
}

/* ── Hero Slide ── */
.hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.hero-slide.active {
  opacity: 1;
}

/* ── Hero Dots ── */
.hero-dots {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 3;
}
.hero-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .3);
  cursor: pointer;
  transition: all var(--duration-fast);
}
.hero-dot.active {
  background: var(--accent);
  width: 24px;
  border-radius: 4px;
}

/* ── Blur-up Image Loading ── */
.blur-up {
  filter: blur(20px);
  transition: filter .6s;
}
.blur-up.loaded {
  filter: blur(0);
}

/* ── Lightbox Overlay ── */
.lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .9);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-normal);
}
.lightbox-overlay.active {
  opacity: 1;
  pointer-events: all;
}
.lightbox-overlay img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
}
.lightbox-close {
  position: absolute;
  top: 20px;
  right: 20px;
  color: #fff;
  font-size: 32px;
  cursor: pointer;
  z-index: 1001;
}

/* ── Reduce Motion ── */
@media (prefers-reduced-motion: reduce) {
  .animate { opacity: 1; }
  .animate.visible { animation: none; }
  .staggerGrid > * { opacity: 1; transform: none; transition: none; }
  .textureZoom img,
  .textureZoom .zoom-target { transition: none; }
  .hero-slide { transition: none; }
}