/* ═══════════════════════════════════════════════════
   YUNSHAN PREMIUM ANIMATION SYSTEM v2
   Luxury-grade motion design for a charity foundation
   ═══════════════════════════════════════════════════ */

:root {
  --ease-expo:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-back:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --green-glow:  rgba(24, 120, 58, 0.35);
  --gold:        #c9a227;
}

/* ─────────────────────────────────────────────
   PAGE ENTRY — silk curtain wipe
   ───────────────────────────────────────────── */
.curtain {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  display: flex;
}
.curtain-panel {
  flex: 1;
  background: #0d4a22;
  transform-origin: top;
  transition: transform 0.9s var(--ease-expo);
}
.curtain-panel:nth-child(2) { transition-delay: 0.06s; }
.curtain-panel:nth-child(3) { transition-delay: 0.12s; }
.curtain-panel:nth-child(4) { transition-delay: 0.18s; }
.curtain-panel:nth-child(5) { transition-delay: 0.22s; }
.curtain.gone .curtain-panel { transform: scaleY(0); transform-origin: bottom; }

/* ─────────────────────────────────────────────
   SCROLL REVEAL ENGINE
   ───────────────────────────────────────────── */
[data-reveal] {
  opacity: 0;
  will-change: opacity, transform, filter;
  transition:
    opacity   0.75s var(--ease-expo),
    transform 0.75s var(--ease-expo),
    filter    0.6s  ease;
}
[data-reveal="up"]    { transform: translateY(48px); }
[data-reveal="down"]  { transform: translateY(-32px); }
[data-reveal="left"]  { transform: translateX(-56px); }
[data-reveal="right"] { transform: translateX(56px); }
[data-reveal="scale"] { transform: scale(0.86); filter: blur(4px); }
[data-reveal="fade"]  { transform: none; filter: blur(3px); }
[data-reveal="flip"]  { transform: perspective(600px) rotateX(18deg); filter: blur(2px); }

[data-reveal].revealed {
  opacity: 1;
  transform: none;
  filter: none;
}

[data-delay="80"]  { transition-delay: 0.08s; }
[data-delay="160"] { transition-delay: 0.16s; }
[data-delay="240"] { transition-delay: 0.24s; }
[data-delay="320"] { transition-delay: 0.32s; }
[data-delay="400"] { transition-delay: 0.40s; }
[data-delay="480"] { transition-delay: 0.48s; }
[data-delay="560"] { transition-delay: 0.56s; }
[data-delay="640"] { transition-delay: 0.64s; }

/* ─────────────────────────────────────────────
   HERO KEYFRAMES
   ───────────────────────────────────────────── */
@keyframes heroTitle {
  0%   { opacity:0; transform:translateY(42px) skewY(2deg); filter:blur(12px); }
  60%  { filter:blur(0); }
  100% { opacity:1; transform:none; }
}
@keyframes heroLine {
  0%   { opacity:0; transform:scaleX(0); }
  100% { opacity:1; transform:scaleX(1); }
}
@keyframes heroBadge {
  0%   { opacity:0; transform:translateY(-14px) scale(0.9); }
  100% { opacity:1; transform:none; }
}
@keyframes heroDesc {
  0%   { opacity:0; transform:translateY(22px); filter:blur(5px); }
  100% { opacity:1; transform:none; filter:blur(0); }
}
@keyframes heroSlogan {
  0%   { opacity:0; transform:scale(0.85) translateY(14px); filter:blur(3px); }
  100% { opacity:1; transform:none; filter:blur(0); }
}
@keyframes heroBtns {
  0%   { opacity:0; transform:translateY(20px); }
  100% { opacity:1; transform:none; }
}

/* Stats bar entry */
@keyframes statsIn {
  0%   { opacity:0; transform:translateY(100%); }
  100% { opacity:1; transform:none; }
}

/* Particle shimmer */
@keyframes particleShimmer {
  0%,100% { opacity:0.3; }
  50%     { opacity:0.8; }
}

/* Scroll indicator */
@keyframes scrollDrop {
  0%   { transform:translateY(0) scaleY(1); opacity:0.7; }
  60%  { transform:translateY(12px) scaleY(0.6); opacity:1; }
  100% { transform:translateY(20px) scaleY(0); opacity:0; }
}

/* Button micro-interaction */
@keyframes btnSweep {
  0%   { left:-80%; }
  100% { left:120%; }
}

/* Number tick */
@keyframes numTick {
  0%   { transform:translateY(8px); opacity:0; }
  100% { transform:none;            opacity:1; }
}

/* ─────────────────────────────────────────────
   HERO ELEMENT ANIMATIONS
   ───────────────────────────────────────────── */
.hero-eyebrow   { animation: heroBadge  0.7s var(--ease-expo)  0.1s both; }
.hero-new-cn    { animation: heroTitle  1.1s var(--ease-expo)  0.25s both; }
.hero-en-line   { animation: heroLine   0.7s var(--ease-expo)  0.7s both; transform-origin:left; }
.hero-new-en    { animation: heroDesc   0.8s var(--ease-expo)  0.55s both; }
.hero-desc-text { animation: heroDesc   0.9s var(--ease-expo)  0.7s both; }
.hero-new-slogan{ animation: heroSlogan 0.8s var(--ease-back)  0.9s both; }
.hero-new-btns  { animation: heroBtns   0.8s var(--ease-expo)  1.05s both; }

.hero-stats-inner { animation: statsIn 0.8s var(--ease-expo) 1.3s both; }

/* (Old orbit / hexagon logo system removed — hero now uses the
   emblem medallion defined inline in index.html.) */

/* ─────────────────────────────────────────────
   NAV
   ───────────────────────────────────────────── */
.site-nav {
  transition: background 0.4s ease, box-shadow 0.4s ease, backdrop-filter 0.4s ease;
}
.site-nav.scrolled {
  background: rgba(255,255,255,0.96) !important;
  backdrop-filter: blur(16px);
  box-shadow: 0 2px 32px rgba(0,0,0,0.1);
}
.nav-menu > li > a {
  position: relative;
  transition: color 0.25s ease;
}
.nav-menu > li > a::after {
  content: '';
  position: absolute;
  bottom: 0; left: 50%; right: 50%;
  height: 2px;
  background: var(--green);
  transition: left 0.3s var(--ease-expo), right 0.3s var(--ease-expo);
  border-radius: 1px;
}
.nav-menu > li > a:hover::after,
.nav-menu > li.active > a::after { left: 16px; right: 16px; }
.nav-menu > li.active > a { border-bottom: none !important; }

/* ─────────────────────────────────────────────
   BUTTONS — premium sweep
   ───────────────────────────────────────────── */
.btn-hero-white,
.btn-primary-green,
.btn-view-pdf,
.btn-outline-green {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.btn-hero-white::before,
.btn-primary-green::before,
.btn-view-pdf::before {
  content: '';
  position: absolute;
  top: 0; left: -80%;
  width: 50%; height: 100%;
  background: linear-gradient(90deg,
    transparent,
    rgba(255,255,255,0.28),
    transparent);
  transform: skewX(-20deg);
  transition: none;
}
.btn-hero-white:hover::before,
.btn-primary-green:hover::before,
.btn-view-pdf:hover::before {
  animation: btnSweep 0.5s ease forwards;
}

/* ─────────────────────────────────────────────
   CARDS & COMPONENTS
   ───────────────────────────────────────────── */

/* Mission cards */
.mission-card {
  border-radius: 10px;
  transition: background 0.3s ease, transform 0.4s var(--ease-back) !important;
  position: relative;
  overflow: hidden;
}
.mission-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0);
  border-radius: 10px;
  transition: background 0.3s ease;
}
.mission-card:hover { background: rgba(255,255,255,0.08); transform: translateY(-6px) !important; }

/* Business cards */
.bs-card {
  transition: transform 0.4s var(--ease-back), box-shadow 0.4s ease, border-color 0.3s ease !important;
  position: relative;
  overflow: hidden;
}
.bs-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--green), var(--green-light));
  transform: scaleX(0);
  transition: transform 0.35s var(--ease-expo);
  transform-origin: left;
}
.bs-card:hover::after { transform: scaleX(1); }
.bs-card:hover {
  transform: translateY(-10px) scale(1.02) !important;
  box-shadow: 0 20px 48px rgba(24,120,58,0.16) !important;
  border-color: rgba(24,120,58,0.18) !important;
}
.bs-card img {
  transition: transform 0.4s var(--ease-back) !important;
}
.bs-card:hover img { transform: scale(1.18) rotate(-5deg) !important; }

/* List cards */
.list-card {
  transition: transform 0.3s var(--ease-back), box-shadow 0.3s ease, border-color 0.25s ease !important;
  border-left: 3px solid transparent;
}
.list-card:hover {
  transform: translateX(6px) !important;
  border-left-color: var(--green) !important;
  box-shadow: 0 4px 20px rgba(24,120,58,0.1) !important;
}

/* Cert cards */
.cert-card {
  transition: transform 0.4s var(--ease-back), box-shadow 0.4s ease !important;
  position: relative;
}
.cert-card::after {
  content: '🔍 点击放大';
  position: absolute;
  inset: 0 0 auto 0;
  height: calc(100% - 42px);
  background: rgba(24,120,58,0);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  opacity: 0;
  transition: opacity 0.3s ease, background 0.3s ease;
  border-radius: 6px 6px 0 0;
}
.cert-card:hover::after {
  opacity: 1;
  background: rgba(24,120,58,0.42);
}
.cert-card:hover { transform: translateY(-6px) scale(1.01) !important; box-shadow: 0 16px 40px rgba(0,0,0,0.15) !important; }

/* Doc rows */
.doc-row {
  transition: transform 0.25s var(--ease-back), background 0.2s ease, border-color 0.2s ease !important;
}
.doc-row:hover { transform: translateX(8px) !important; }

/* Annual card */
.annual-card {
  transition: transform 0.35s var(--ease-back), box-shadow 0.35s ease !important;
}
.annual-card:hover { transform: translateY(-5px) !important; box-shadow: 0 12px 36px rgba(24,120,58,0.12) !important; }

/* Party cards */
.party-card {
  transition: transform 0.3s var(--ease-back), box-shadow 0.3s ease !important;
  overflow: hidden;
}
.party-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: #c0111f;
  transform: scaleY(0);
  transition: transform 0.3s var(--ease-expo);
  transform-origin: bottom;
}
.party-card:hover::before { transform: scaleY(1); }
.party-card:hover { transform: translateX(4px) !important; box-shadow: 0 6px 24px rgba(192,17,31,0.12) !important; }

/* Proj show cards */
.proj-show-card {
  transition: transform 0.4s var(--ease-back), box-shadow 0.4s ease !important;
}
.proj-show-card:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 20px 48px rgba(24,120,58,0.14) !important;
}

/* ─────────────────────────────────────────────
   SIDEBAR
   ───────────────────────────────────────────── */
.sidebar-menu a {
  transition: color 0.25s ease, padding-left 0.3s var(--ease-expo), background 0.25s ease !important;
  position: relative;
}
.sidebar-menu a::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0;
  background: var(--green-pale);
  transition: width 0.3s var(--ease-expo);
  z-index: -1;
}
.sidebar-menu a:hover::before,
.sidebar-menu a.active::before { width: 100%; }

/* ─────────────────────────────────────────────
   SECTION TITLE underline grow
   ───────────────────────────────────────────── */
.section-title,
.party-section-title {
  position: relative;
}

/* ─────────────────────────────────────────────
   IMAGE REVEAL
   ───────────────────────────────────────────── */
img[data-reveal] {
  filter: blur(8px) brightness(0.9);
  transition:
    opacity   0.9s var(--ease-expo),
    transform 0.9s var(--ease-expo),
    filter    0.9s ease !important;
}
img[data-reveal].revealed { filter: none; }

/* ─────────────────────────────────────────────
   PAGE BANNER
   ───────────────────────────────────────────── */
.page-banner-title { animation: heroTitle 0.9s var(--ease-expo) 0.15s both; }
.page-banner-sub   { animation: heroDesc  0.8s var(--ease-expo) 0.4s  both; }

/* ─────────────────────────────────────────────
   SCROLL TO TOP
   ───────────────────────────────────────────── */
.scroll-top-btn {
  position: fixed;
  bottom: 36px; right: 36px;
  width: 46px; height: 46px;
  background: var(--green);
  color: #fff;
  border: none; cursor: pointer;
  border-radius: 50%;
  font-size: 18px;
  box-shadow: 0 6px 24px var(--green-glow);
  opacity: 0;
  transform: translateY(16px) scale(0.7);
  transition: opacity 0.4s ease, transform 0.4s var(--ease-back), background 0.25s ease;
  z-index: 800;
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
}
.scroll-top-btn.visible { opacity: 1; transform: none; }
.scroll-top-btn:hover {
  background: var(--green-dark);
  transform: translateY(-4px) scale(1.08);
  box-shadow: 0 10px 32px var(--green-glow);
}

/* ─────────────────────────────────────────────
   GRADIENT TEXT utility
   ───────────────────────────────────────────── */
@keyframes gradShimmer {
  0%   { background-position: 0% center; }
  100% { background-position: 200% center; }
}
.gradient-text {
  background: linear-gradient(135deg, #18783a 0%, #45b984 45%, #18783a 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradShimmer 4s linear infinite;
}

/* ─────────────────────────────────────────────
   REDUCED MOTION
   ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; filter: none !important; }
}