/* =====================================================
   NTP WEALTH — site-motion.css (Advanced Motion & Hover)
   Full Version with Hero Section Layered Animations
   ===================================================== */

:root {
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --motion-duration: 0.85s;
}

/* ===== Micro-Interactions: Buttons & Cards Hover ===== */
.btn-red, .btn-gold {
  transition: transform 0.25s var(--ease-out-expo), 
              box-shadow 0.25s var(--ease-out-expo), 
              background 0.25s ease, 
              filter 0.25s ease !important;
}

.btn-red:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(200, 16, 46, 0.32);
}

.btn-gold:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(198, 164, 92, 0.35);
}

.pillar, .mcard, .team-vertical-card, .partner-card, .award {
  transition: transform 0.35s var(--ease-out-expo), 
              box-shadow 0.35s var(--ease-out-expo), 
              border-color 0.35s ease;
}

.pillar:hover, .mcard:hover, .award:hover {
  transform: translateY(-4px);
}

.team-vertical-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 36px rgba(7, 22, 48, 0.12);
}

.team-vertical-card .team-vertical-img img {
  transition: transform 0.6s var(--ease-out-expo);
}

.team-vertical-card:hover .team-vertical-img img {
  transform: scale(1.04);
}

.partner-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(7, 22, 48, 0.06);
  border-color: var(--gold);
}

/* ===== Hero Section Layered Motion (รูปที่ 1) ===== */

/* ข้อความฝั่งซ้ายเฟดขึ้น */
@keyframes heroFadeIn {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero .fade {
  animation: heroFadeIn 0.9s var(--ease-out-expo) forwards;
}

/* 1. เส้นแถบสีทองและสีแดง สไลด์จากล่างขึ้นบนแบบจางไปเข้ม */
@keyframes slashSlideUpGold {
  from {
    opacity: 0;
    transform: skewX(-8deg) translateY(70px);
  }
  to {
    opacity: 0.9;
    transform: skewX(-8deg) translateY(0);
  }
}

@keyframes slashSlideUpRed {
  from {
    opacity: 0;
    transform: skewX(-8deg) translateY(90px);
  }
  to {
    opacity: 1;
    transform: skewX(-8deg) translateY(0);
  }
}

.hero-photo .slash {
  animation: slashSlideUpGold 1s var(--ease-out-expo) 0.1s forwards;
  will-change: transform, opacity;
}

.hero-photo .slash.red {
  animation: slashSlideUpRed 1.1s var(--ease-out-expo) 0.2s forwards;
  will-change: transform, opacity;
}

/* 2. รูปถ่ายครอบครัว สไลด์จากซ้ายไปขวาแบบจางไปเข้ม */
@keyframes photoSlideRight {
  from {
    opacity: 0;
    transform: translateX(-36px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.hero-visual {
  animation: photoSlideRight 1s var(--ease-out-expo) 0.25s forwards;
  will-change: transform, opacity;
}

/* 3. แถบการ์ดสีขาวลอยนุ่มนวลตลอดเวลา */
@keyframes subtleFloat {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

.hero-card {
  animation: subtleFloat 5s ease-in-out infinite !important;
  will-change: transform;
}

/* ===== General Scroll Reveal Classes ===== */
.motion-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--motion-duration) var(--ease-out-expo), 
              transform var(--motion-duration) var(--ease-out-expo);
  will-change: opacity, transform;
}

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

.motion-reveal-left {
  opacity: 0;
  transform: translateX(-36px);
  transition: opacity var(--motion-duration) var(--ease-out-expo), 
              transform var(--motion-duration) var(--ease-out-expo);
}

.motion-reveal-right {
  opacity: 0;
  transform: translateX(36px);
  transition: opacity var(--motion-duration) var(--ease-out-expo), 
              transform var(--motion-duration) var(--ease-out-expo);
}

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

.motion-reveal-scale {
  opacity: 0;
  transform: scale(0.94);
  transition: opacity var(--motion-duration) var(--ease-out-expo), 
              transform var(--motion-duration) var(--ease-out-expo);
}

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

.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; }
.delay-5 { transition-delay: 0.5s; }