/* ===================================================================
   ALPHA FARM ĐÀ LẠT — ANIMATION & MOTION SYSTEM
   Scroll Reveals · Micro-interactions · Mobile Touch UX · Parallax
   =================================================================== */

/* ─── SCROLL PROGRESS BAR ──────────────────────────────────────── */
.scroll-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 2.5px;
  background: linear-gradient(90deg, var(--green-mid), var(--gold), var(--green-light));
  z-index: 9999;
  transition: width 0.1s linear;
  border-radius: 0 2px 2px 0;
}

/* ─── PAGE ENTRANCE — HERO CINEMATIC SEQUENCE ──────────────────── */
@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes heroFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

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

@keyframes heroScaleIn {
  from { opacity: 0; transform: scale(0.9) translateY(20px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* Hero Text stagger with delays */
.hero-entrance-active .eyebrow {
  animation: heroSlideRight 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both;
}

.hero-entrance-active .hero-headline {
  animation: heroFadeUp 0.85s cubic-bezier(0.16, 1, 0.3, 1) 0.35s both;
}

.hero-entrance-active .hero-intro {
  animation: heroFadeUp 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.55s both;
}

.hero-entrance-active .hero-actions {
  animation: heroFadeUp 0.65s cubic-bezier(0.16, 1, 0.3, 1) 0.72s both;
}

.hero-entrance-active .hero-stats-row {
  animation: heroFadeUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.9s both;
}

.hero-entrance-active .hero-visual-art {
  animation: heroScaleIn 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.45s both;
}

.hero-entrance-active .hero-bg-media img {
  animation: heroFadeIn 1.2s ease 0s both;
}

/* ─── SCROLL REVEAL — BASE STATES ─────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.reveal-left {
  transform: translateX(-40px);
}

.reveal.reveal-right {
  transform: translateX(40px);
}

.reveal.reveal-scale {
  transform: scale(0.92) translateY(20px);
}

.reveal.reveal-fade {
  transform: none;
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Stagger children */
.stagger-reveal .reveal:nth-child(1)  { transition-delay: 0.05s; }
.stagger-reveal .reveal:nth-child(2)  { transition-delay: 0.13s; }
.stagger-reveal .reveal:nth-child(3)  { transition-delay: 0.21s; }
.stagger-reveal .reveal:nth-child(4)  { transition-delay: 0.29s; }
.stagger-reveal .reveal:nth-child(5)  { transition-delay: 0.37s; }
.stagger-reveal .reveal:nth-child(6)  { transition-delay: 0.45s; }
.stagger-reveal .reveal:nth-child(7)  { transition-delay: 0.53s; }
.stagger-reveal .reveal:nth-child(8)  { transition-delay: 0.61s; }

/* ─── ENHANCED MICRO-ANIMATIONS ────────────────────────────────── */

/* Capability cards */
.cap-card {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.3s ease !important;
}

.cap-card:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 20px 50px rgba(27, 58, 45, 0.18) !important;
}

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

.cap-img-wrapper img {
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Value cards */
.value-card {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.3s ease,
              box-shadow 0.35s ease !important;
}

.value-card:hover {
  transform: translateY(-5px) !important;
  border-color: rgba(200, 168, 75, 0.5) !important;
  box-shadow: 0 12px 35px rgba(200, 168, 75, 0.12) !important;
}

/* Vision/Mission cards */
.vm-card {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              background 0.3s ease,
              border-color 0.3s ease !important;
}

.vm-card:hover {
  transform: translateY(-6px) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(200, 168, 75, 0.4) !important;
}

/* Facility cards */
.facility-card {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.4s ease !important;
}

.facility-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.25) !important;
}

/* Project portfolio cards */
.project-item {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.4s ease !important;
}

.project-item:hover {
  transform: translateY(-10px) !important;
  box-shadow: 0 24px 60px rgba(27, 58, 45, 0.25) !important;
}

.project-item:hover .project-img-box img,
.project-item:hover .project-img-wrapper img {
  transform: scale(1.06);
}

.project-img-box img,
.project-img-wrapper img {
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Partner logos */
.partner-logo {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.3s ease,
              filter 0.3s ease !important;
}

.partner-logo:hover {
  transform: scale(1.08) !important;
  opacity: 1 !important;
  filter: grayscale(0%) !important;
}

/* CTA cards */
.cta-card {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.4s ease !important;
}

.cta-card:hover {
  transform: translateY(-8px) scale(1.01) !important;
  box-shadow: 0 30px 65px rgba(27, 58, 45, 0.3) !important;
}

/* ─── GOLD TEXT SHIMMER ─────────────────────────────────────────── */
@keyframes goldShimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

.gold-shimmer {
  background: linear-gradient(
    90deg,
    var(--gold) 0%,
    var(--gold-light) 30%,
    #fff8dc 50%,
    var(--gold-light) 70%,
    var(--gold) 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: goldShimmer 3.5s linear infinite;
}

/* ─── FLOATING ACTION BUTTONS — ENHANCED ──────────────────────── */
@keyframes fabBounceIn {
  0%   { opacity: 0; transform: scale(0.4) translateY(20px); }
  60%  { transform: scale(1.12) translateY(-4px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes fabPulseGlow {
  0%, 100% { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); }
  50%       { box-shadow: 0 4px 28px rgba(0, 104, 255, 0.5); }
}

.fab-btn {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.3s ease,
              background 0.25s ease !important;
}

.fab-btn:hover {
  transform: translateY(-4px) scale(1.08) !important;
}

.fab-zalo {
  animation: fabPulseGlow 2.5s ease-in-out infinite;
}

.fab-zalo:hover {
  animation: none;
  box-shadow: 0 8px 30px rgba(0, 104, 255, 0.55) !important;
}

@keyframes topBtnPulse {
  0%, 100% { box-shadow: 0 4px 15px rgba(27, 58, 45, 0.25); }
  50%       { box-shadow: 0 4px 25px rgba(27, 58, 45, 0.45); }
}

.fab-top.show {
  animation: fabBounceIn 0.45s cubic-bezier(0.16, 1, 0.3, 1) both,
             topBtnPulse 2.5s ease-in-out 0.5s infinite;
}

/* ─── GOLD DIVIDER — ANIMATED GROW ────────────────────────────── */
.gold-divider {
  height: 2px;
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
  border-radius: 2px;
  margin: 24px 0;
  transform-origin: left center;
  transform: scaleX(0);
  opacity: 0;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.2s,
              opacity 0.5s ease 0.2s;
  width: 48px;
}

.gold-divider.center {
  width: 60px;
  margin: 20px auto;
  transform-origin: center center;
}

.gold-divider.is-visible {
  transform: scaleX(1);
  opacity: 1;
}

/* ─── MILESTONE TIMELINE DOTS — PING PULSE ────────────────────── */
@keyframes dotPing {
  0%   { transform: scale(1); opacity: 1; }
  75%  { transform: scale(2.5); opacity: 0; }
  100% { transform: scale(2.5); opacity: 0; }
}

.milestone-item.is-visible .milestone-dot::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: var(--gold);
  animation: dotPing 1.8s ease-out 0.3s 1;
}

/* ─── HEADER ENTRANCE ──────────────────────────────────────────── */
@keyframes headerDropIn {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

.site-header {
  animation: headerDropIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
}

/* ─── LIGHTBOX — ENHANCED ENTER ────────────────────────────────── */
@keyframes lightboxEnter {
  from { opacity: 0; transform: scale(0.94) translateY(20px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.lightbox-modal.open .lightbox-inner {
  animation: lightboxEnter 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* ─── PORTFOLIO FILTER ANIMATION ──────────────────────────────── */
@keyframes filterItemAppear {
  from { opacity: 0; transform: scale(0.92) translateY(16px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.project-item.filter-appear {
  animation: filterItemAppear 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* ─── MOBILE DRAWER — STAGGER LINKS ────────────────────────────── */
@keyframes drawerLinkIn {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}

.mobile-drawer.open .drawer-nav a {
  animation: drawerLinkIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.mobile-drawer.open .drawer-nav a:nth-child(1) { animation-delay: 0.08s; }
.mobile-drawer.open .drawer-nav a:nth-child(2) { animation-delay: 0.14s; }
.mobile-drawer.open .drawer-nav a:nth-child(3) { animation-delay: 0.20s; }
.mobile-drawer.open .drawer-nav a:nth-child(4) { animation-delay: 0.26s; }
.mobile-drawer.open .drawer-nav a:nth-child(5) { animation-delay: 0.32s; }

/* ─── IMAGE SMOOTH LOAD ─────────────────────────────────────────── */
@keyframes imgFadeIn {
  from { opacity: 0.5; filter: blur(3px); }
  to   { opacity: 1; filter: blur(0); }
}

img.img-loaded {
  animation: imgFadeIn 0.5s ease both;
}

/* ─── CONCEPT BADGE FLASH ──────────────────────────────────────── */
@keyframes badgeFlash {
  0%   { background: rgba(200, 168, 75, 0.15); }
  50%  { background: rgba(200, 168, 75, 0.35); }
  100% { background: rgba(200, 168, 75, 0.15); }
}

.hero-concept-counter.updating {
  animation: badgeFlash 0.4s ease;
}

/* ─── MOBILE — TOUCH FEEDBACK ──────────────────────────────────── */
@media (hover: none) and (pointer: coarse) {
  .cap-card:hover,
  .value-card:hover,
  .facility-card:hover,
  .project-item:hover,
  .cta-card:hover,
  .vm-card:hover,
  .fab-btn:hover {
    transform: none !important;
  }

  .cap-card:active { transform: scale(0.98) !important; transition: transform 0.15s ease !important; }
  .project-item:active { transform: scale(0.97) !important; transition: transform 0.15s ease !important; }
  .btn:active { transform: scale(0.96) !important; }
  .fab-btn { min-width: 52px; min-height: 52px; }
}

/* ─── MOBILE LAYOUT IMPROVEMENTS ──────────────────────────────── */
@media (max-width: 960px) {
  .hero-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 32px !important;
  }

  .hero-text-block { order: 2; }

  .hero-visual-art {
    order: 1;
    width: 100%;
    min-height: 300px !important;
  }

  .hero-art-subject {
    max-width: 100% !important;
    aspect-ratio: 4 / 3 !important;
  }
}

@media (max-width: 768px) {
  section { padding: 60px 0 !important; }

  #hero {
    padding-top: calc(var(--header-height) + 16px) !important;
    padding-bottom: 40px !important;
    min-height: auto !important;
  }

  .hero-actions { gap: 12px; }

  .hero-actions .btn {
    flex: 1;
    min-width: 0;
    text-align: center;
    padding: 12px 16px;
    font-size: 0.8rem;
  }

  .story-portrait-frame { height: 300px !important; }

  .testimonial-quote-body { font-size: 1.05rem; }

  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }

  .estimator-result-card {
    position: static !important;
    top: auto !important;
  }
}

@media (max-width: 480px) {
  .hero-stats-row {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px 12px !important;
    padding-top: 24px !important;
  }

  .hero-concept-title { font-size: 0.9rem !important; }

  .hero-switch-btn span { display: none; }

  .hero-switch-btn { padding: 8px 10px !important; }

  .filter-bar { flex-wrap: wrap; gap: 8px !important; }

  .filter-btn {
    font-size: 0.76rem !important;
    padding: 7px 14px !important;
  }

  .partners-logo-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ─── PREFERS-REDUCED-MOTION ───────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .reveal,
  .reveal.reveal-left,
  .reveal.reveal-right,
  .reveal.reveal-scale {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .gold-divider {
    transform: scaleX(1) !important;
    opacity: 1 !important;
    transition: none !important;
  }
}