/* HX-F shared motion & polish */

:root {
  --accent: #3868E8;
  --accent-soft: rgba(56, 104, 232, 0.14);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Header glass */
.header {
  transition: background-color 0.35s var(--ease-soft),
    box-shadow 0.35s var(--ease-soft),
    backdrop-filter 0.35s var(--ease-soft),
    -webkit-backdrop-filter 0.35s var(--ease-soft) !important;
}

.header.scrolled {
  background-color: rgba(255, 255, 255, 0.86) !important;
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 8px 28px rgba(32, 90, 190, 0.08) !important;
}

.logo img {
  transition: transform 0.35s var(--ease-out);
}

.logo:hover img {
  transform: scale(1.06);
}

.nav a {
  transition: color 0.25s var(--ease-soft), transform 0.25s var(--ease-soft) !important;
}

.nav a:hover {
  transform: translateY(-1px);
}

/* Hero entrance */
.hero-bg img,
.core-hero-bg img {
  transform: scale(1.06);
  transition: transform 1.8s var(--ease-out);
}

.hero.is-ready .hero-bg img,
.core-hero.is-ready .core-hero-bg img,
.section.hero.is-ready .hero-bg img {
  transform: scale(1);
}

/* Hero copy is always visible — never hide with opacity */
.hero-copy,
.core-hero-copy {
  opacity: 1 !important;
  transform: none !important;
}

/* Scroll reveal */
.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.85s var(--ease-out), transform 0.85s var(--ease-out);
  will-change: opacity, transform;
}

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

.reveal-left {
  opacity: 0;
  transform: translateX(-32px);
  transition: opacity 0.85s var(--ease-out), transform 0.85s var(--ease-out);
}

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

.reveal-scale {
  opacity: 0;
  transform: scale(0.94);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}

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

/* Stagger helpers via CSS vars */
.reveal-stagger > *.reveal,
.reveal-stagger > .reveal {
  transition-delay: calc(var(--i, 0) * 80ms);
}

/* Card / interactive polish */
.belief-card,
.stat-card,
.pillar-card,
.pillar-item,
.arch-card,
.framework-card,
.team-card,
.consensus-card,
.partner-item,
.map-item,
.contact-box {
  transition: transform 0.4s var(--ease-out),
    box-shadow 0.4s var(--ease-out),
    border-color 0.3s var(--ease-soft),
    background-color 0.3s var(--ease-soft) !important;
}

.belief-card:hover,
.stat-card:hover,
.pillar-item:hover .pillar-card,
.arch-card:hover,
.framework-card:hover,
.team-card:hover,
.consensus-card:hover,
.partner-item:hover,
.contact-box:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(56, 104, 232, 0.14);
}

/* Absolute diagram nodes: soft opacity only, keep layout stable */
.map-item:hover {
  transform: none;
  filter: brightness(1.03);
}

.pillar-item:hover .pillar-num,
.team-card:hover .team-arrow {
  transform: scale(1.08);
}

.pillar-num,
.team-arrow {
  transition: transform 0.35s var(--ease-out), background-color 0.3s ease;
}

.belief-card img,
.framework-card,
.partner-logo img {
  transition: transform 0.45s var(--ease-out);
}

.belief-card:hover img,
.partner-item:hover .partner-logo img {
  transform: scale(1.08) rotate(-2deg);
}

/* Stats emphasis */
.stat-card .num,
.stat-center .num,
.result-stats .num {
  font-variant-numeric: tabular-nums;
  transition: color 0.3s ease, transform 0.35s var(--ease-out);
}

.stat-card:hover .num,
.stat-center:hover .num {
  color: var(--accent);
  transform: scale(1.04);
}

/* Soft ambient pulse on accent squares if present */
.title_box_img1 {
  animation: softPulse 3.6s var(--ease-soft) infinite;
}

@keyframes softPulse {
  0%, 100% { opacity: 0.85; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.08); }
}

/* Side illustrations: gentle vertical float */
.about-art img,
.arch-illus img,
.content-illus img {
  animation: floatY 4.8s ease-in-out infinite;
  will-change: transform;
}

@keyframes floatY {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -16px, 0); }
}
.footer-text text,
.footer-col a {
  transition: color 0.25s ease, opacity 0.25s ease;
  cursor: pointer;
}

.footer-text text:hover,
.footer-col a:hover {
  color: #7EB3FF;
}

/* Mobile nav items soft entrance when opened */
.mobile-nav.show a {
  animation: navItemIn 0.4s var(--ease-out) both;
}

.mobile-nav.show a:nth-child(1) { animation-delay: 0.02s; }
.mobile-nav.show a:nth-child(2) { animation-delay: 0.05s; }
.mobile-nav.show a:nth-child(3) { animation-delay: 0.08s; }
.mobile-nav.show a:nth-child(4) { animation-delay: 0.11s; }
.mobile-nav.show a:nth-child(5) { animation-delay: 0.14s; }
.mobile-nav.show a:nth-child(6) { animation-delay: 0.17s; }
.mobile-nav.show a:nth-child(7) { animation-delay: 0.2s; }
.mobile-nav.show a:nth-child(8) { animation-delay: 0.23s; }
.mobile-nav.show a:nth-child(9) { animation-delay: 0.26s; }

@keyframes navItemIn {
  from { opacity: 0; transform: translateX(10px); }
  to { opacity: 1; transform: translateX(0); }
}

/* 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-left,
  .reveal-scale,
  .hero-copy,
  .core-hero-copy,
  .hero-bg img,
  .core-hero-bg img,
  .about-art img,
  .arch-illus img,
  .content-illus img {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}