/* =========================================
   AVRASYA LOJİSTİK — animations.css
   ========================================= */

/* --- Keyframes --- */

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.4; transform: scale(0.7); }
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-14px); }
}

/* ===== Moving Scene: Van Drive ===== */
@keyframes van-drive {
  0%     { transform: translateX(0)     scaleX(1);  }
  20%    { transform: translateX(0)     scaleX(1);  }
  44.9%  { transform: translateX(350px) scaleX(1);  }
  45%    { transform: translateX(350px) scaleX(-1); }
  70%    { transform: translateX(350px) scaleX(-1); }
  95%    { transform: translateX(0)     scaleX(-1); }
  95.1%  { transform: translateX(0)     scaleX(1);  }
  100%   { transform: translateX(0)     scaleX(1);  }
}

@keyframes van-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-2px); }
}

/* ===== Moving Scene: Wheel Spin ===== */
@keyframes wheel-roll {
  0%, 20%   { transform: rotate(0deg); }
  45%       { transform: rotate(720deg); }
  70%       { transform: rotate(720deg); }
  95%       { transform: rotate(1440deg); }
  100%      { transform: rotate(1440deg); }
}

/* ===== Moving Scene: Loading Items (left house → van) ===== */
@keyframes load-item-1 {
  0%, 2%    { transform: translate(82px, 242px) rotate(0deg);   opacity: 0; }
  5%        { transform: translate(80px, 216px) rotate(-8deg);  opacity: 1; }
  13%       { transform: translate(112px, 202px) rotate(-4deg); opacity: 1; }
  18%       { transform: translate(140px, 222px) rotate(0deg);  opacity: 0.8; }
  22%       { transform: translate(140px, 238px) rotate(0deg);  opacity: 0; }
  100%      { transform: translate(82px, 242px) rotate(0deg);   opacity: 0; }
}
@keyframes load-item-2 {
  0%, 7%    { transform: translate(90px, 246px) rotate(0deg);   opacity: 0; }
  10%       { transform: translate(88px, 220px) rotate(10deg);  opacity: 1; }
  16%       { transform: translate(125px, 204px) rotate(5deg);  opacity: 1; }
  21%       { transform: translate(144px, 226px) rotate(0deg);  opacity: 0.8; }
  25%       { transform: translate(142px, 242px) rotate(0deg);  opacity: 0; }
  100%      { transform: translate(90px, 246px) rotate(0deg);   opacity: 0; }
}
@keyframes load-item-3 {
  0%, 11%   { transform: translate(76px, 240px) rotate(0deg);   opacity: 0; }
  14%       { transform: translate(74px, 212px) rotate(-12deg); opacity: 1; }
  19%       { transform: translate(132px, 199px) rotate(-6deg); opacity: 1; }
  24%       { transform: translate(142px, 232px) rotate(0deg);  opacity: 0.8; }
  28%       { transform: translate(140px, 246px) rotate(0deg);  opacity: 0; }
  100%      { transform: translate(76px, 240px) rotate(0deg);   opacity: 0; }
}

/* ===== Moving Scene: Unloading Items (van cargo back after flip x≈624 → right house) ===== */
@keyframes unload-item-1 {
  0%, 46%   { transform: translate(622px, 242px) rotate(0deg);  opacity: 0; }
  50%       { transform: translate(620px, 214px) rotate(8deg);  opacity: 1; }
  57%       { transform: translate(605px, 200px) rotate(4deg);  opacity: 1; }
  63%       { transform: translate(612px, 228px) rotate(0deg);  opacity: 0.8; }
  67%       { transform: translate(614px, 244px) rotate(0deg);  opacity: 0; }
  100%      { transform: translate(622px, 242px) rotate(0deg);  opacity: 0; }
}
@keyframes unload-item-2 {
  0%, 51%   { transform: translate(626px, 240px) rotate(0deg);   opacity: 0; }
  55%       { transform: translate(624px, 212px) rotate(-10deg); opacity: 1; }
  61%       { transform: translate(610px, 202px) rotate(-5deg);  opacity: 1; }
  67%       { transform: translate(618px, 230px) rotate(0deg);   opacity: 0.8; }
  71%       { transform: translate(618px, 246px) rotate(0deg);   opacity: 0; }
  100%      { transform: translate(626px, 240px) rotate(0deg);   opacity: 0; }
}
@keyframes unload-item-3 {
  0%, 56%   { transform: translate(618px, 246px) rotate(0deg);  opacity: 0; }
  59%       { transform: translate(616px, 216px) rotate(12deg); opacity: 1; }
  65%       { transform: translate(602px, 204px) rotate(6deg);  opacity: 1; }
  70%       { transform: translate(608px, 234px) rotate(0deg);  opacity: 0.8; }
  74%       { transform: translate(610px, 248px) rotate(0deg);  opacity: 0; }
  100%      { transform: translate(618px, 246px) rotate(0deg);  opacity: 0; }
}

/* ===== Moving Scene: Door Open ===== */
@keyframes door-open-left {
  0%, 2%   { transform: scaleX(1); transform-origin: left center; }
  8%, 24%  { transform: scaleX(0.3); transform-origin: left center; }
  30%      { transform: scaleX(1); transform-origin: left center; }
  100%     { transform: scaleX(1); transform-origin: left center; }
}
@keyframes door-open-right {
  0%, 48%  { transform: scaleX(1); transform-origin: right center; }
  54%, 72% { transform: scaleX(0.3); transform-origin: right center; }
  78%      { transform: scaleX(1); transform-origin: right center; }
  100%     { transform: scaleX(1); transform-origin: right center; }
}

/* ===== Moving Scene: Right House Lights On ===== */
@keyframes window-glow {
  0%, 46%  { opacity: 0; }
  52%      { opacity: 0.5; }
  55%, 80% { opacity: 0.45; }
  88%      { opacity: 0.1; }
  92%, 100%{ opacity: 0; }
}
@keyframes door-glow-on {
  0%, 48%  { opacity: 0; }
  54%      { opacity: 0.25; }
  58%, 78% { opacity: 0.2; }
  86%      { opacity: 0.05; }
  92%, 100%{ opacity: 0; }
}
@keyframes tv-appear {
  0%, 46%   { opacity: 0; }
  52%       { opacity: 0.9; }
  55%, 80%  { opacity: 0.9; }
  88%       { opacity: 0.2; }
  92%, 100% { opacity: 0; }
}
@keyframes tv-flicker {
  0%, 46%   { opacity: 0; }
  52%       { opacity: 0.6; }
  54%       { opacity: 0.3; }
  56%       { opacity: 0.7; }
  58%       { opacity: 0.4; }
  60%       { opacity: 0.65; }
  63%       { opacity: 0.35; }
  66%       { opacity: 0.7; }
  69%       { opacity: 0.45; }
  72%       { opacity: 0.6; }
  75%       { opacity: 0.3; }
  78%       { opacity: 0.55; }
  80%       { opacity: 0.5; }
  88%       { opacity: 0.1; }
  92%, 100% { opacity: 0; }
}
@keyframes lamp-on {
  0%, 46%   { opacity: 0; }
  50%       { opacity: 0.3; }
  52%       { opacity: 0.85; }
  55%, 80%  { opacity: 0.8; }
  88%       { opacity: 0.15; }
  92%, 100% { opacity: 0; }
}
@keyframes lamp-glow-pulse {
  0%, 46%   { opacity: 0; }
  52%       { opacity: 0.35; }
  60%       { opacity: 0.25; }
  68%       { opacity: 0.35; }
  76%       { opacity: 0.25; }
  80%       { opacity: 0.3; }
  88%       { opacity: 0.05; }
  92%, 100% { opacity: 0; }
}

/* ===== Moving Scene: Exhaust Puffs ===== */
@keyframes exhaust-puff {
  0%, 20%    { opacity: 0; }
  22%        { opacity: 0.6; }
  45%        { opacity: 0; }
  70%        { opacity: 0; }
  72%        { opacity: 0.6; }
  95%        { opacity: 0; }
  100%       { opacity: 0; }
}

/* ===== Moving Scene: Stars Twinkle ===== */
@keyframes twinkle {
  0%, 100% { opacity: 0.2; }
  50%      { opacity: 0.8; }
}

@keyframes scroll-wheel {
  0%   { transform: translateY(0); opacity: 1; }
  60%  { transform: translateY(12px); opacity: 0; }
  61%  { transform: translateY(-4px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0);    }
}

@keyframes fade-in-down {
  from { opacity: 0; transform: translateY(-30px); }
  to   { opacity: 1; transform: translateY(0);     }
}

@keyframes fade-in-left {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0);     }
}

@keyframes fade-in-right {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0);    }
}

@keyframes scale-in {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1);    }
}

@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}

@keyframes gradient-shift {
  0%   { background-position: 0%   50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0%   50%; }
}

@keyframes ripple {
  0%   { transform: scale(0); opacity: 0.6; }
  100% { transform: scale(2.5); opacity: 0; }
}

@keyframes page-load {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

/* --- Page Load --- */
body {
  animation: page-load 0.4s ease forwards;
}

/* --- Moving Scene Animations --- */
.moving-scene {
  animation: fade-in-right 0.9s cubic-bezier(0.4, 0, 0.2, 1) 0.3s backwards;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.van-group {
  animation: van-drive 12s cubic-bezier(0.4, 0, 0.2, 1) 1.5s infinite;
  -webkit-transform-box: fill-box;
  transform-box: fill-box;
  transform-origin: center;
  will-change: transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.van-wheel-g {
  animation: wheel-roll 12s linear 1.5s infinite;
  transform-origin: center;
  -webkit-transform-box: fill-box;
  transform-box: fill-box;
  will-change: transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Van shadow (dynamic scale while moving) */
.van-shadow {
  animation: van-shadow-anim 12s ease 1.5s infinite;
  -webkit-transform-box: fill-box;
  transform-box: fill-box;
  transform-origin: center;
}
@keyframes van-shadow-anim {
  0%, 20%  { transform: scaleX(1);    opacity: 0.8; }
  21%      { transform: scaleX(1.15); opacity: 1;   }
  44%      { transform: scaleX(1.15); opacity: 1;   }
  45%      { transform: scaleX(1);    opacity: 0.8; }
  70%      { transform: scaleX(1);    opacity: 0.8; }
  71%      { transform: scaleX(1.15); opacity: 1;   }
  94%      { transform: scaleX(1.15); opacity: 1;   }
  95%      { transform: scaleX(1);    opacity: 0.8; }
  100%     { transform: scaleX(1);    opacity: 0.8; }
}

/* Van body suspension (slight bounce while moving) */
.van-body {
  animation: van-suspension 12s ease 1.5s infinite;
}
@keyframes van-suspension {
  0%,  20%  { transform: translateY(0); }
  21%       { transform: translateY(-2px); }
  23%       { transform: translateY(1px); }
  25%       { transform: translateY(-1.5px); }
  28%       { transform: translateY(0.8px); }
  32%       { transform: translateY(-0.6px); }
  36%       { transform: translateY(0.3px); }
  40%       { transform: translateY(-0.3px); }
  44%       { transform: translateY(0); }
  44.9%     { transform: translateY(0); }
  45%       { transform: translateY(-2px); }
  47%       { transform: translateY(1.5px); }
  49%       { transform: translateY(-1px); }
  52%       { transform: translateY(0.5px); }
  55%       { transform: translateY(0); }
  70%       { transform: translateY(0); }
  71%       { transform: translateY(-2px); }
  73%       { transform: translateY(1px); }
  75%       { transform: translateY(-1.5px); }
  78%       { transform: translateY(0.8px); }
  82%       { transform: translateY(-0.6px); }
  86%       { transform: translateY(0.3px); }
  90%       { transform: translateY(-0.3px); }
  94%       { transform: translateY(0); }
  94.9%     { transform: translateY(0); }
  95%       { transform: translateY(-2px); }
  97%       { transform: translateY(1.5px); }
  99%       { transform: translateY(-0.8px); }
  100%      { transform: translateY(0); }
}

/* Van headlight beam */
.van-headlight-beam {
  animation: van-headlight 12s ease 1.5s infinite;
}
@keyframes van-headlight {
  0%, 20%  { opacity: 0; }
  21%      { opacity: 1; }
  44%      { opacity: 1; }
  45%      { opacity: 0; }
  70%      { opacity: 0; }
  71%      { opacity: 1; }
  94%      { opacity: 1; }
  95%      { opacity: 0; }
  100%     { opacity: 0; }
}

/* Individual exhaust puffs (rise and fade) */
@keyframes exhaust-smoke-1 {
  0%, 20%  { opacity: 0;   transform: translate(0, 0) scale(1); }
  21%      { opacity: 0.9; transform: translate(0, 0) scale(1); }
  28%      { opacity: 0.5; transform: translate(-3px, -8px) scale(1.5); }
  35%      { opacity: 0;   transform: translate(-6px, -16px) scale(2); }
  44%      { opacity: 0;   transform: translate(0, 0) scale(1); }
  45%, 70% { opacity: 0;   transform: translate(0, 0) scale(1); }
  71%      { opacity: 0.9; transform: translate(0, 0) scale(1); }
  78%      { opacity: 0.5; transform: translate(-3px, -8px) scale(1.5); }
  85%      { opacity: 0;   transform: translate(-6px, -16px) scale(2); }
  94%      { opacity: 0;   transform: translate(0, 0) scale(1); }
  100%     { opacity: 0;   transform: translate(0, 0) scale(1); }
}
@keyframes exhaust-smoke-2 {
  0%, 20%  { opacity: 0;   transform: translate(0, 0) scale(1); }
  24%      { opacity: 0.7; transform: translate(0, 0) scale(1); }
  31%      { opacity: 0.4; transform: translate(-4px, -10px) scale(1.6); }
  39%      { opacity: 0;   transform: translate(-8px, -20px) scale(2.2); }
  44%      { opacity: 0;   transform: translate(0, 0) scale(1); }
  45%, 70% { opacity: 0;   transform: translate(0, 0) scale(1); }
  74%      { opacity: 0.7; transform: translate(0, 0) scale(1); }
  81%      { opacity: 0.4; transform: translate(-4px, -10px) scale(1.6); }
  89%      { opacity: 0;   transform: translate(-8px, -20px) scale(2.2); }
  94%      { opacity: 0;   transform: translate(0, 0) scale(1); }
  100%     { opacity: 0;   transform: translate(0, 0) scale(1); }
}
@keyframes exhaust-smoke-3 {
  0%, 20%  { opacity: 0;   transform: translate(0, 0) scale(1); }
  27%      { opacity: 0.5; transform: translate(0, 0) scale(1); }
  35%      { opacity: 0.3; transform: translate(-5px, -12px) scale(1.7); }
  44%      { opacity: 0;   transform: translate(-10px, -24px) scale(2.4); }
  45%, 70% { opacity: 0;   transform: translate(0, 0) scale(1); }
  77%      { opacity: 0.5; transform: translate(0, 0) scale(1); }
  85%      { opacity: 0.3; transform: translate(-5px, -12px) scale(1.7); }
  94%      { opacity: 0;   transform: translate(-10px, -24px) scale(2.4); }
  100%     { opacity: 0;   transform: translate(0, 0) scale(1); }
}
.exhaust-1 {
  animation: exhaust-smoke-1 12s ease 1.5s infinite;
  -webkit-transform-box: fill-box;
  transform-box: fill-box;
  transform-origin: center;
}
.exhaust-2 {
  animation: exhaust-smoke-2 12s ease 1.5s infinite;
  -webkit-transform-box: fill-box;
  transform-box: fill-box;
  transform-origin: center;
}
.exhaust-3 {
  animation: exhaust-smoke-3 12s ease 1.5s infinite;
  -webkit-transform-box: fill-box;
  transform-box: fill-box;
  transform-origin: center;
}

/* Road dashes move with van */
.road-dashes {
  animation: road-move 12s linear 1.5s infinite;
}
@keyframes road-move {
  0%    { stroke-dashoffset: 0; }
  20%   { stroke-dashoffset: 0; }
  45%   { stroke-dashoffset: -270; }
  70%   { stroke-dashoffset: -270; }
  95%   { stroke-dashoffset: 0; }
  100%  { stroke-dashoffset: 0; }
}
.door-left {
  animation: door-open-left 12s ease 1.5s infinite;
  transform-origin: left center;
}
.door-right {
  animation: door-open-right 12s ease 1.5s infinite;
  transform-origin: right center;
}
.load-item-1  { animation: load-item-1 12s ease-in-out 1.5s infinite; }
.load-item-2  { animation: load-item-2 12s ease-in-out 1.5s infinite; }
.load-item-3  { animation: load-item-3 12s ease-in-out 1.5s infinite; }
.unload-item-1 { animation: unload-item-1 12s ease-in-out 1.5s infinite; }
.unload-item-2 { animation: unload-item-2 12s ease-in-out 1.5s infinite; }
.unload-item-3 { animation: unload-item-3 12s ease-in-out 1.5s infinite; }

/* Right house interior lights */
.window-glow-r1  { animation: window-glow 12s ease 1.5s infinite; }
.window-glow-r2  { animation: window-glow 12s ease 1.5s infinite; }
.door-glow-right { animation: door-glow-on 12s ease 1.5s infinite; }
.tv-inside rect  { animation: tv-appear 12s ease 1.5s infinite; }
.tv-screen       { animation: tv-flicker 12s ease 1.5s infinite !important; }
.lamp-stand      { animation: lamp-on 12s ease 1.5s infinite; }
.lamp-shade      { animation: lamp-on 12s ease 1.5s infinite; }
.lamp-glow       { animation: lamp-glow-pulse 12s ease 1.5s infinite; }

/* Left house window glows (lit at start, fade as family moves out) */
.window-glow-l1,
.window-glow-l2  { animation: window-glow-left 12s ease 1.5s infinite; }
@keyframes window-glow-left {
  0%    { opacity: 0.45; }
  16%   { opacity: 0.45; }
  30%   { opacity: 0.15; }
  44%   { opacity: 0; }
  94%   { opacity: 0; }
  100%  { opacity: 0.45; }
}

.moving-svg circle[cx="150"],
.moving-svg circle[cx="450"],
.moving-svg circle[cx="620"] {
  animation: twinkle 3s ease-in-out infinite;
}
.moving-svg circle[cx="300"],
.moving-svg circle[cx="550"] {
  animation: twinkle 4s ease-in-out 1s infinite;
}
.moving-svg circle[cx="350"],
.moving-svg circle[cx="80"] {
  animation: twinkle 5s ease-in-out 2s infinite;
}

.hero-text .hero-badge {
  animation: fade-in-down 0.7s cubic-bezier(0.4, 0, 0.2, 1) 0.1s backwards;
}
.hero-text .hero-title {
  animation: fade-in-up 0.7s cubic-bezier(0.4, 0, 0.2, 1) 0.25s backwards;
}
.hero-text .hero-subtitle {
  animation: fade-in-up 0.7s cubic-bezier(0.4, 0, 0.2, 1) 0.4s backwards;
}
.hero-text .hero-buttons {
  animation: fade-in-up 0.7s cubic-bezier(0.4, 0, 0.2, 1) 0.55s backwards;
}
.hero-visual {
  animation: fade-in-right 0.9s cubic-bezier(0.4, 0, 0.2, 1) 0.5s backwards;
}
.hero-stat-badges {
  animation: fade-in-up 0.7s cubic-bezier(0.4, 0, 0.2, 1) 0.9s backwards;
}

/* --- Scroll Reveal --- */
.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.65s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.65s cubic-bezier(0.4, 0, 0.2, 1);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.65s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.65s cubic-bezier(0.4, 0, 0.2, 1);
}
.reveal-left.visible {
  opacity: 1;
  transform: translateX(0);
}

.reveal-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.65s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.65s cubic-bezier(0.4, 0, 0.2, 1);
}
.reveal-right.visible {
  opacity: 1;
  transform: translateX(0);
}

.reveal-scale {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.reveal-scale.visible {
  opacity: 1;
  transform: scale(1);
}

/* Staggered children */
.stagger-children > * {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.55s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}
.stagger-children.visible > *:nth-child(1) { opacity: 1; transform: none; transition-delay: 0ms;   }
.stagger-children.visible > *:nth-child(2) { opacity: 1; transform: none; transition-delay: 80ms;  }
.stagger-children.visible > *:nth-child(3) { opacity: 1; transform: none; transition-delay: 160ms; }
.stagger-children.visible > *:nth-child(4) { opacity: 1; transform: none; transition-delay: 240ms; }
.stagger-children.visible > *:nth-child(5) { opacity: 1; transform: none; transition-delay: 320ms; }
.stagger-children.visible > *:nth-child(6) { opacity: 1; transform: none; transition-delay: 400ms; }

/* Delay helpers */
.delay-100 { transition-delay: 100ms !important; }
.delay-200 { transition-delay: 200ms !important; }
.delay-300 { transition-delay: 300ms !important; }
.delay-400 { transition-delay: 400ms !important; }
.delay-500 { transition-delay: 500ms !important; }

/* --- Stat Numbers --- */
.stat-number {
  transition: color 0.3s;
}

/* --- Pulsing ring on hero badge --- */
.hero-badge::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 100px;
  border: 1px solid rgba(244,162,39,0.2);
  animation: ripple 2.5s ease-out infinite;
  pointer-events: none;
}

/* --- Gradient text for hero title highlight --- */
.highlight {
  background: linear-gradient(90deg, var(--accent) 0%, var(--secondary) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 3s linear infinite;
}

/* --- Navbar logo pulse on load --- */
.logo-mark {
  animation: scale-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s backwards;
}

/* --- Card hover glow --- */
.service-card-back {
  position: relative;
  overflow: hidden;
}
.service-card-back::after {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(244,162,39,0.12) 0%, transparent 60%);
  animation: float 6s ease-in-out infinite;
  pointer-events: none;
}

/* --- Why card stagger --- */
.why-grid { }
.why-card:nth-child(1) { transition-delay: 0ms !important; }
.why-card:nth-child(2) { transition-delay: 80ms !important; }
.why-card:nth-child(3) { transition-delay: 160ms !important; }
.why-card:nth-child(4) { transition-delay: 240ms !important; }

/* --- Timeline animation --- */
.timeline-item .timeline-content {
  opacity: 0;
  transform: translateX(-24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.timeline-item:nth-child(even) .timeline-content {
  transform: translateX(24px);
}
.timeline-item.visible .timeline-content {
  opacity: 1;
  transform: translateX(0);
}
.timeline-dot {
  transition: transform 0.4s ease, box-shadow 0.4s;
}
.timeline-item:hover .timeline-dot {
  transform: scale(1.4);
  box-shadow: 0 0 0 6px rgba(244,162,39,0.25);
}

/* --- Page hero text --- */
.page-hero .section-badge {
  animation: fade-in-down 0.6s ease 0.1s backwards;
}
.page-hero h1 {
  animation: fade-in-up 0.7s ease 0.2s backwards;
}
.page-hero p {
  animation: fade-in-up 0.7s ease 0.35s backwards;
}

/* --- Reduce motion --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal, .reveal-left, .reveal-right, .reveal-scale { opacity: 1; transform: none; }
  .stagger-children > * { opacity: 1; transform: none; }
}