/* =====================================================
   Canxin New Energy Technology — Animations
   ===================================================== */

/* ---- Keyframes ---- */
@keyframes fadeUp {
  from { opacity:0; transform:translateY(28px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes fadeIn {
  from { opacity:0; }
  to   { opacity:1; }
}
@keyframes fadeLeft {
  from { opacity:0; transform:translateX(28px); }
  to   { opacity:1; transform:translateX(0); }
}
@keyframes fadeRight {
  from { opacity:0; transform:translateX(-28px); }
  to   { opacity:1; transform:translateX(0); }
}
@keyframes scaleIn {
  from { opacity:0; transform:scale(.88); }
  to   { opacity:1; transform:scale(1); }
}
@keyframes scrollBounce {
  0%,100% { transform:translateY(0); opacity:1; }
  50%      { transform:translateY(12px); opacity:.4; }
}
@keyframes ticker {
  from { transform:translateX(0); }
  to   { transform:translateX(-50%); }
}
@keyframes preload {
  0%   { width:0; }
  60%  { width:75%; }
  100% { width:100%; }
}
@keyframes pulse {
  0%,100% { box-shadow:0 0 0 0 rgba(0,200,150,.4); }
  50%      { box-shadow:0 0 0 10px rgba(0,200,150,0); }
}
@keyframes rotateRay {
  from { transform:rotate(0deg); }
  to   { transform:rotate(360deg); }
}
@keyframes floatY {
  0%,100% { transform:translateY(0); }
  50%      { transform:translateY(-14px); }
}
@keyframes draw {
  from { stroke-dashoffset:1000; }
  to   { stroke-dashoffset:0; }
}
@keyframes shimmer {
  0%   { background-position:-200% 0; }
  100% { background-position:200% 0; }
}
@keyframes glowPulse {
  0%,100% { opacity:.4; }
  50%      { opacity:1; }
}
@keyframes countUp {
  from { opacity:0; transform:translateY(20px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes lineExpand {
  from { transform:scaleX(0); }
  to   { transform:scaleX(1); }
}
@keyframes bgSlide {
  0%   { background-position:0% 50%; }
  50%  { background-position:100% 50%; }
  100% { background-position:0% 50%; }
}
@keyframes borderGlow {
  0%,100% { border-color: rgba(0,200,150,.2); }
  50%      { border-color: rgba(0,200,150,.8); }
}

/* ---- Particle Canvas ---- */
#particle-canvas {
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
}

/* ---- Hero Animated Gradient BG ---- */
.hero__animated-bg {
  position:absolute;
  inset:0;
  z-index:0;
  background-size:400% 400%;
  animation:bgSlide 18s ease infinite;
}

/* ---- Float Animation ---- */
.float { animation:floatY 5s ease-in-out infinite; }
.float-delay-1 { animation-delay:1s; }
.float-delay-2 { animation-delay:2s; }

/* ---- Pulse Dot ---- */
.pulse-dot {
  width:10px; height:10px;
  border-radius:50%;
  background: var(--accent);
  animation:pulse 2.5s ease infinite;
}

/* ---- Line Animation ---- */
.anim-line {
  display:block;
  transform-origin:left;
  animation:lineExpand .8s var(--ease) forwards;
  animation-play-state:paused;
}
.anim-line.play { animation-play-state:running; }

/* ---- Shimmer Skeleton ---- */
.shimmer {
  background: linear-gradient(90deg, var(--surface) 25%, var(--bg-3) 50%, var(--surface) 75%);
  background-size:200% 100%;
  animation:shimmer 2s infinite;
}

/* ---- SVG Draw ---- */
.svg-draw {
  stroke-dasharray:1000;
  stroke-dashoffset:1000;
  animation:draw 2s var(--ease) forwards;
  animation-play-state:paused;
}
.svg-draw.play { animation-play-state:running; }

/* ---- Number Counter ---- */
.counter-wrap {
  overflow:hidden;
}
.counter-num {
  display:inline-block;
  animation:countUp .6s var(--ease) both;
  animation-play-state:paused;
}
.counter-num.play { animation-play-state:running; }

/* ---- Glow Ring ---- */
.glow-ring {
  position:relative;
}
.glow-ring::after {
  content:'';
  position:absolute;
  inset:-4px;
  border-radius:inherit;
  border:1px solid rgba(0,200,150,.4);
  animation:glowPulse 3s ease infinite;
  pointer-events:none;
}

/* ---- Rotating Icon ---- */
.rotate-slow { animation:rotateRay 20s linear infinite; }
.rotate-medium { animation:rotateRay 10s linear infinite; }

/* ---- Hover Tilt ---- */
.tilt {
  transition:transform .3s var(--ease);
  transform-style:preserve-3d;
  will-change:transform;
}

/* ---- Section Divider Wave ---- */
.wave-divider {
  position:absolute;
  bottom:-1px; left:0; right:0;
  overflow:hidden;
  line-height:0;
  z-index:2;
}
.wave-divider svg { display:block; width:100%; }

/* ---- Progress Bar ---- */
.progress-bar {
  height:3px;
  position:fixed;
  top:0; left:0;
  background:linear-gradient(to right, var(--accent), var(--gold));
  z-index:9998;
  width:0%;
  transition:width .1s linear;
  border-radius:0 2px 2px 0;
}

/* ---- Cursor Trail ---- */
.cursor-glow {
  position:fixed;
  width:300px; height:300px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(0,200,150,.04) 0%, transparent 70%);
  pointer-events:none;
  z-index:1;
  transform:translate(-50%,-50%);
  transition:left .12s ease, top .12s ease;
}

/* ---- Card Ripple ---- */
.ripple {
  position:absolute;
  border-radius:50%;
  background:rgba(0,200,150,.15);
  transform:scale(0);
  animation:rippleAnim .6s linear;
  pointer-events:none;
}
@keyframes rippleAnim {
  to { transform:scale(4); opacity:0; }
}

/* ---- Stagger Children ---- */
.stagger-children > * {
  opacity:0;
  transform:translateY(24px);
  transition:opacity .6s var(--ease), transform .6s var(--ease);
}
.stagger-children.visible > *:nth-child(1) { opacity:1; transform:none; transition-delay:.05s; }
.stagger-children.visible > *:nth-child(2) { opacity:1; transform:none; transition-delay:.15s; }
.stagger-children.visible > *:nth-child(3) { opacity:1; transform:none; transition-delay:.25s; }
.stagger-children.visible > *:nth-child(4) { opacity:1; transform:none; transition-delay:.35s; }
.stagger-children.visible > *:nth-child(5) { opacity:1; transform:none; transition-delay:.45s; }
.stagger-children.visible > *:nth-child(6) { opacity:1; transform:none; transition-delay:.55s; }
.stagger-children.visible > *:nth-child(7) { opacity:1; transform:none; transition-delay:.65s; }
.stagger-children.visible > *:nth-child(8) { opacity:1; transform:none; transition-delay:.75s; }
.stagger-children.visible > *:nth-child(9) { opacity:1; transform:none; transition-delay:.85s; }

/* ---- Underline Sweep ---- */
.underline-sweep {
  display:inline;
  background-image:linear-gradient(var(--accent), var(--accent));
  background-size:0% 2px;
  background-position:0 100%;
  background-repeat:no-repeat;
  transition:background-size .4s var(--ease);
  padding-bottom:2px;
}
.underline-sweep:hover { background-size:100% 2px; }

/* ---- Animated Grid ---- */
.grid-anim-bg {
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(0,200,150,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,200,150,.04) 1px, transparent 1px);
  background-size:60px 60px;
  mask-image:radial-gradient(ellipse at center, black 20%, transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse at center, black 20%, transparent 75%);
  pointer-events:none;
}

/* ---- Glow Text ---- */
.glow-text {
  text-shadow:0 0 30px rgba(0,200,150,.35);
}

/* ---- Slide-In Panel ---- */
.slide-panel {
  transform:translateX(-100%);
  transition:transform var(--t3) var(--ease);
}
.slide-panel.active { transform:translateX(0); }

/* ---- Image Reveal ---- */
.img-reveal {
  position:relative;
  overflow:hidden;
}
.img-reveal::after {
  content:'';
  position:absolute;
  inset:0;
  background: var(--bg);
  transform:scaleX(1);
  transform-origin:right;
  transition:transform 1s var(--ease);
}
.img-reveal.visible::after { transform:scaleX(0); }

/* ---- Accordion ---- */
.accordion-item { border-bottom:1px solid var(--border); }
.accordion-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:1.5rem 0;
  cursor:pointer;
  transition:color var(--t2);
}
.accordion-header:hover { color: var(--accent); }
.accordion-icon {
  width:24px; height:24px;
  border:1.5px solid var(--border-2);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  transition:border-color var(--t2), transform var(--t2), background var(--t2);
}
.accordion-item.open .accordion-icon {
  border-color: var(--accent);
  background:rgba(0,200,150,.1);
  transform:rotate(45deg);
}
.accordion-body { overflow:hidden; max-height:0; transition:max-height .5s var(--ease); }
.accordion-body-inner { padding-bottom:1.5rem; }
.accordion-body-inner p { color: var(--text-2); font-size:.9rem; max-width:none; }