/* ==========================================================
   Hero animations — slow, looping, performance-friendly.
   Each Hero uses transform + opacity only (no layout thrash).
   Mouse parallax is layered on top via --mx / --my (range -1..1).
   Respects prefers-reduced-motion.
   ========================================================== */

:root {
  --mx: 0;
  --my: 0;
}

/* Default base translation set by JS-controlled vars */
.page-hero__bg, .hero-v2__bg { will-change: transform; }

/* Mouse parallax: bind layers via depth class */
.page-hero__bg .parallax-1,
.hero-v2__bg .parallax-1 { transform: translate3d(calc(var(--mx) * 6px), calc(var(--my) * 6px), 0); transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); }
.page-hero__bg .parallax-2,
.hero-v2__bg .parallax-2 { transform: translate3d(calc(var(--mx) * 14px), calc(var(--my) * 14px), 0); transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); }
.page-hero__bg .parallax-3,
.hero-v2__bg .parallax-3 { transform: translate3d(calc(var(--mx) * 24px), calc(var(--my) * 24px), 0); transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); }

/* ========== Home — sky/skyline ========== */
.skyline .accent { animation: pulse-stroke 4s ease-in-out infinite; }
@keyframes pulse-stroke { 0%, 100% { opacity: 0.3; } 50% { opacity: 0.7; } }

/* drifting dots in home hero */
.float-dot { animation: float-dot 10s ease-in-out infinite; }
.float-dot:nth-child(1) { animation-delay: 0s; }
.float-dot:nth-child(2) { animation-delay: 2.5s; }
.float-dot:nth-child(3) { animation-delay: 5s; }
.float-dot:nth-child(4) { animation-delay: 7.5s; }
@keyframes float-dot {
  0%, 100% { transform: translateY(0) translateX(0); opacity: 0.3; }
  50%      { transform: translateY(-18px) translateX(8px); opacity: 0.7; }
}

/* ========== Digital — growth curve ========== */
.page-hero--digital svg path[stroke="#B79268"] {
  stroke-dasharray: 2200;
  stroke-dashoffset: 2200;
  animation: draw-line 3.6s ease-out 0.4s forwards, line-pulse 6s ease-in-out 4s infinite;
}
@keyframes draw-line { to { stroke-dashoffset: 0; } }
@keyframes line-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }

.page-hero--digital svg circle {
  opacity: 0;
  animation: dot-pop 0.5s ease-out forwards;
}
.page-hero--digital svg circle:nth-of-type(1) { animation-delay: 0.6s; }
.page-hero--digital svg circle:nth-of-type(2) { animation-delay: 0.9s; }
.page-hero--digital svg circle:nth-of-type(3) { animation-delay: 1.2s; }
.page-hero--digital svg circle:nth-of-type(4) { animation-delay: 1.5s; }
.page-hero--digital svg circle:nth-of-type(5) { animation-delay: 1.8s; }
.page-hero--digital svg circle:nth-of-type(6) { animation-delay: 2.1s; }
.page-hero--digital svg circle:nth-of-type(7) { animation-delay: 2.4s; }
.page-hero--digital svg circle:nth-of-type(8) { animation-delay: 2.7s; }
.page-hero--digital svg circle:nth-of-type(9) { animation-delay: 3.0s; }
.page-hero--digital svg circle:nth-of-type(10) { animation-delay: 3.3s; transform-origin: center; animation-name: dot-pop-emphasis; animation-duration: 1s; }
@keyframes dot-pop { 0% { opacity: 0; transform: scale(0); transform-origin: center; transform-box: fill-box; } 60% { opacity: 1; transform: scale(1.15); } 100% { opacity: 1; transform: scale(1); } }
@keyframes dot-pop-emphasis { 0% { opacity: 0; transform: scale(0); transform-box: fill-box; transform-origin: center; } 60% { opacity: 1; transform: scale(1.2); } 100% { opacity: 1; transform: scale(1); } }

/* ========== Creator — KOL network ========== */
.page-hero--creator svg circle[r="56"], .page-hero--creator svg circle[r="44"] {
  transform-origin: center; transform-box: fill-box;
  animation: gentle-pulse 5s ease-in-out infinite;
}
@keyframes gentle-pulse { 0%, 100% { transform: scale(1); opacity: 0.85; } 50% { transform: scale(1.05); opacity: 1; } }

.page-hero--creator svg line {
  stroke-dasharray: 4 6;
  animation: dash-flow 6s linear infinite;
}
@keyframes dash-flow { to { stroke-dashoffset: -100; } }

/* ========== Hybrid — media mix icons ========== */
.page-hero--hybrid svg > g { transform-origin: center; transform-box: fill-box; animation: gentle-bob 6s ease-in-out infinite; }
.page-hero--hybrid svg > g:nth-of-type(2) { animation-delay: 0.8s; }
.page-hero--hybrid svg > g:nth-of-type(3) { animation-delay: 1.6s; }
.page-hero--hybrid svg > g:nth-of-type(4) { animation-delay: 2.4s; }
.page-hero--hybrid svg > g:nth-of-type(5) { animation-delay: 3.2s; }
@keyframes gentle-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* ========== Commerce — globe/route ========== */
.page-hero--commerce svg path[stroke-dasharray] {
  animation: dash-flow-fast 4s linear infinite;
}
@keyframes dash-flow-fast { to { stroke-dashoffset: -60; } }
.page-hero--commerce svg circle[r] {
  transform-origin: center; transform-box: fill-box;
  animation: gentle-pulse 4s ease-in-out infinite;
}

/* ========== About — JA·EN·ZH bridge ========== */
.page-hero--about svg text {
  opacity: 0; animation: fade-in-up 1s ease-out forwards;
}
.page-hero--about svg text:nth-of-type(1) { animation-delay: 0.3s; }
.page-hero--about svg text:nth-of-type(2) { animation-delay: 0.7s; }
.page-hero--about svg text:nth-of-type(3) { animation-delay: 1.1s; }
@keyframes fade-in-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* ========== Works — performance bars ========== */
.page-hero--works svg rect {
  transform-origin: bottom; transform-box: fill-box;
  animation: bar-grow 1.4s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  transform: scaleY(0);
}
.page-hero--works svg rect:nth-of-type(1) { animation-delay: 0.1s; }
.page-hero--works svg rect:nth-of-type(2) { animation-delay: 0.2s; }
.page-hero--works svg rect:nth-of-type(3) { animation-delay: 0.3s; }
.page-hero--works svg rect:nth-of-type(4) { animation-delay: 0.4s; }
.page-hero--works svg rect:nth-of-type(5) { animation-delay: 0.5s; }
.page-hero--works svg rect:nth-of-type(6) { animation-delay: 0.6s; }
.page-hero--works svg rect:nth-of-type(7) { animation-delay: 0.7s; }
.page-hero--works svg rect:nth-of-type(8) { animation-delay: 0.8s; }
@keyframes bar-grow { to { transform: scaleY(1); } }
.page-hero--works svg path {
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
  animation: draw-line 3s ease-out 1s forwards;
}

/* ========== Contact — bridge spans ========== */
.page-hero--contact svg path, .page-hero--contact svg line {
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
  animation: draw-line 4s ease-out forwards;
}
.page-hero--contact svg path:nth-of-type(2) { animation-delay: 0.4s; }
.page-hero--contact svg path:nth-of-type(3) { animation-delay: 0.8s; }
.page-hero--contact svg circle {
  transform-origin: center; transform-box: fill-box;
  animation: gentle-pulse 3s ease-in-out infinite;
  animation-delay: 2s;
}

/* ========== Universal subtle drift on hero __bg (DISABLED) ==========
.page-hero__bg::after, .hero-v2__bg::after { content: ""; }
*/

/* Reduced motion respect */
@media (prefers-reduced-motion: reduce) {
  .page-hero__bg *, .hero-v2__bg *, .float-dot { animation: none !important; transform: none !important; }
  .page-hero--digital svg path[stroke="#B79268"], .page-hero--works svg path, .page-hero--contact svg path, .page-hero--contact svg line {
    stroke-dashoffset: 0 !important;
  }
  .page-hero--works svg rect { transform: scaleY(1) !important; }
  .page-hero--digital svg circle { opacity: 1 !important; transform: none !important; }
}