/* =============================================================
   喜图文化 — 动感展示模板样式
   视差滚动 · 玻璃拟态 · 渐变动画 · 浮动粒子 · 滚动揭示
   ============================================================= */

/* ─── Keyframes ─── */
@keyframes dyn-float-1 { 0%,100%{transform:translateY(0) rotate(0deg)} 50%{transform:translateY(-30px) rotate(5deg)} }
@keyframes dyn-float-2 { 0%,100%{transform:translateY(0) rotate(0deg) scale(1)} 50%{transform:translateY(-20px) rotate(-3deg) scale(1.05)} }
@keyframes dyn-float-3 { 0%,100%{transform:translate(0,0)} 33%{transform:translate(15px,-25px)} 66%{transform:translate(-10px,-40px)} }
@keyframes dyn-float-4 { 0%,100%{transform:translateY(0) rotate(0deg)} 50%{transform:translateY(-35px) rotate(-8deg)} }
@keyframes dyn-float-5 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-20px,-15px) scale(1.08)} }
@keyframes dyn-float-ring { 0%,100%{transform:translate(-50%,-50%) rotate(0deg)} 100%{transform:translate(-50%,-50%) rotate(360deg)} }

@keyframes dyn-pulse { 0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(26,86,219,.4)} 50%{opacity:.85;box-shadow:0 0 0 10px rgba(26,86,219,0)} }
@keyframes dyn-glow-shift { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
@keyframes dyn-marquee { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
@keyframes dyn-scroll-bounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(8px)} }
@keyframes dyn-fadeInUp { from{opacity:0;transform:translateY(40px)} to{opacity:1;transform:translateY(0)} }
@keyframes dyn-fadeInLeft { from{opacity:0;transform:translateX(-40px)} to{opacity:1;transform:translateX(0)} }
@keyframes dyn-fadeInRight { from{opacity:0;transform:translateX(40px)} to{opacity:1;transform:translateX(0)} }
@keyframes dyn-scaleIn { from{opacity:0;transform:scale(0.85)} to{opacity:1;transform:scale(1)} }
@keyframes dyn-shimmer { 0%{background-position:-200% 0} 100%{background-position:200% 0} }
@keyframes dyn-glow-pulse { 0%,100%{opacity:0} 50%{opacity:1} }

/* ─── Canvas Particles ─── */
.dyn-canvas {
  position:fixed;top:0;left:0;width:100%;height:100%;
  pointer-events:none;z-index:0;
}

/* ─── Reveal ─── */
[data-reveal] { opacity:0; transition: all .8s cubic-bezier(.25,.46,.45,.94); }
[data-reveal="fade-up"].revealed { animation: dyn-fadeInUp .8s cubic-bezier(.25,.46,.45,.94) forwards; }
[data-reveal="fade-left"].revealed { animation: dyn-fadeInLeft .8s cubic-bezier(.25,.46,.45,.94) forwards; }
[data-reveal="fade-right"].revealed { animation: dyn-fadeInRight .8s cubic-bezier(.25,.46,.45,.94) forwards; }
[data-reveal="scale-in"].revealed { animation: dyn-scaleIn .6s cubic-bezier(.34,1.56,.64,1) forwards; }

/* ─── Hero ─── */
.dyn-hero {
  position:relative;min-height:100vh;min-height:100svh;
  display:flex;align-items:center;overflow:hidden;
  padding-block:120px var(--space-16);
  isolation:isolate;
}
.dyn-hero-bg { position:absolute;inset:0;z-index:-2; }
.dyn-hero-bg-image {
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  opacity:.2;
}
.dyn-hero-overlay {
  position:absolute;inset:0;
  background:linear-gradient(180deg,
    rgba(30,64,175,.75) 0%,
    rgba(59,130,246,.25) 40%,
    rgba(147,197,253,.15) 70%,
    var(--color-bg) 100%
  );
}
.dyn-hero-grid {
  position:relative;z-index:2;
  display:grid;grid-template-columns:1fr;gap:var(--space-12);
  align-items:center;
}
.dyn-hero-text { color:white; }
.dyn-hero-text h1 {
  font-size:clamp(2.2rem,5vw,4.5rem);
  font-weight:800;line-height:1.08;margin-bottom:var(--space-6);
}
.dyn-gradient-text {
  background:linear-gradient(135deg,#60a5fa,#a78bfa,#fbbf24);
  background-size:200% auto;
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
  animation:dyn-glow-shift 3s ease infinite;
}

.dyn-badge {
  display:inline-flex;align-items:center;gap:6px;
  font-size:.8rem;font-weight:600;
  background:rgba(255,255,255,.1);color:rgba(255,255,255,.9);
  padding:.45rem 1rem;border-radius:100px;
  border:1px solid rgba(255,255,255,.15);
  backdrop-filter:blur(10px);
  margin-bottom:var(--space-6);
}
.dyn-badge-pulse { animation:dyn-pulse 2.5s ease infinite; }

.dyn-hero-desc {
  font-size:var(--text-lg);color:rgba(255,255,255,.7);
  max-width:36rem;line-height:1.8;margin-bottom:var(--space-8);
}
.dyn-accent { color:#fbbf24;font-weight:600; }
.dyn-number { font-weight:800;font-size:1.1em;color:#60a5fa; }

.dyn-hero-buttons { display:flex;flex-wrap:wrap;gap:var(--space-4); }

/* ─── Buttons ─── */
.dyn-btn {
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.85rem 1.75rem;
  font-size:1rem;font-weight:600;line-height:1;
  border-radius:var(--radius-lg);border:2px solid transparent;
  cursor:pointer;text-decoration:none;
  transition:all .25s cubic-bezier(.4,0,.2,1);
}
.dyn-btn-primary {
  background:linear-gradient(135deg,var(--color-primary),#7c3aed);
  color:white;box-shadow:0 4px 20px rgba(26,86,219,.35);
}
.dyn-btn-primary:hover {
  transform:translateY(-2px);
  box-shadow:0 8px 30px rgba(26,86,219,.5);
}
.dyn-btn-glass {
  background:rgba(255,255,255,.1);color:white;
  border-color:rgba(255,255,255,.25);
  backdrop-filter:blur(10px);
}
.dyn-btn-glass:hover {
  background:rgba(255,255,255,.2);
  border-color:rgba(255,255,255,.4);
  transform:translateY(-2px);
}
.dyn-btn-light {
  background:white;color:var(--color-primary);
  box-shadow:0 4px 20px rgba(0,0,0,.15);
}
.dyn-btn-light:hover {
  transform:translateY(-2px);
  box-shadow:0 8px 30px rgba(0,0,0,.25);
}
.dyn-btn-ghost-light {
  background:transparent;color:rgba(255,255,255,.9);
  border-color:rgba(255,255,255,.3);
}
.dyn-btn-ghost-light:hover {
  background:rgba(255,255,255,.1);
  border-color:rgba(255,255,255,.5);
}

/* ─── Floating Shapes ─── */
.dyn-floating-shapes { position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none; }
.dyn-shape {
  position:absolute;border-radius:50%;
  background:linear-gradient(135deg,var(--color-primary),#7c3aed);
  opacity:.15;filter:blur(40px);
}
.dyn-shape-1 { width:400px;height:400px;top:-10%;right:-5%; animation:dyn-float-1 8s ease-in-out infinite; }
.dyn-shape-2 { width:250px;height:250px;top:40%;left:-5%; background:linear-gradient(135deg,#c6a962,#fbbf24); animation:dyn-float-2 10s ease-in-out infinite; }
.dyn-shape-3 { width:300px;height:300px;bottom:10%;right:20%; background:linear-gradient(135deg,#059669,#34d399); animation:dyn-float-3 12s ease-in-out infinite; }
.dyn-shape-4 { width:180px;height:180px;top:20%;left:50%; background:linear-gradient(135deg,#7c3aed,#a78bfa); animation:dyn-float-4 9s ease-in-out infinite; }
.dyn-shape-5 { width:150px;height:150px;bottom:30%;left:30%; background:linear-gradient(135deg,#f59e0b,#fbbf24); animation:dyn-float-5 11s ease-in-out infinite; }
.dyn-shape-ring {
  width:500px;height:500px;top:50%;left:50%;
  background:transparent;
  border:1px solid rgba(255,255,255,.06);
  border-radius:50%;filter:none;opacity:1;
  animation:dyn-float-ring 20s linear infinite;
}

/* ─── Hero Visual ─── */
.dyn-hero-visual { position:relative; display:flex;justify-content:center;align-items:center; }
.dyn-hero-card {
  position:relative;z-index:2;width:100%;max-width:480px;
}
.dyn-hero-card-inner {
  position:relative;border-radius:var(--radius-2xl);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 25px 60px rgba(0,0,0,.3);
  background:linear-gradient(135deg,rgba(30,64,175,.3),rgba(124,58,237,.2));
  backdrop-filter:blur(10px);
}
.dyn-hero-img { width:100%;height:auto;display:block;mix-blend-mode:lighten; }
.dyn-hero-card-glow {
  position:absolute;inset:0;
  background:radial-gradient(circle at 30% 30%,rgba(96,165,250,.25) 0%,transparent 60%);
  animation:dyn-glow-pulse 3s ease-in-out infinite;
}

/* Float stat cards */
.dyn-stat-float {
  position:absolute;z-index:5;
  background:rgba(15,23,42,.9);
  backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.15);
  border-radius:var(--radius-lg);
  padding:.75rem 1.25rem;text-align:center;
  box-shadow:0 10px 30px rgba(0,0,0,.3);
}
.dyn-stat-float-1 { top:-15px;right:-20px; }
.dyn-stat-float-2 { bottom:15%;left:-30px; }
.dyn-stat-float-3 { bottom:-15px;right:-10px; }
.dyn-stat-float-num {
  display:block;font-size:1.5rem;font-weight:800;
  background:linear-gradient(135deg,#60a5fa,#fbbf24);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
}
.dyn-stat-float-label { font-size:.75rem;color:rgba(255,255,255,.6);white-space:nowrap; }

/* ─── Scroll hint ─── */
.dyn-scroll-hint {
  position:absolute;bottom:40px;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:4px;
  color:rgba(255,255,255,.4);font-size:.75rem;
  z-index:2;
}
.dyn-scroll-hint svg { animation:dyn-scroll-bounce 1.5s ease-in-out infinite; }

/* ─── Marquee ─── */
.dyn-trust-marquee {
  position:relative;z-index:2;
  background:var(--color-bg);
  border-bottom:1px solid var(--color-border);
  padding-block:var(--space-5);overflow:hidden;
}
.dyn-marquee-track { overflow:hidden; }
.dyn-marquee-inner {
  display:flex;gap:var(--space-10);width:max-content;
  animation:dyn-marquee 25s linear infinite;
}
.dyn-marquee-inner:hover { animation-play-state:paused; }
.dyn-marquee-item {
  font-size:.9rem;font-weight:600;color:var(--color-text-light);
  white-space:nowrap;transition:color .2s;cursor:default;
}
.dyn-marquee-item:hover { color:var(--color-primary); }

/* ─── Services (Glass Cards) ─── */
.dyn-services {
  position:relative;padding-block:var(--space-24);
  background:var(--color-bg-dark);
  overflow:hidden;isolation:isolate;
}
.dyn-section-bg {
  position:absolute;inset:0;z-index:0;
  background-size:cover;background-position:center;
  opacity:.06;
}
.dyn-section-header {
  text-align:center;max-width:40rem;margin:0 auto var(--space-16);
  position:relative;z-index:1;
}
.dyn-section-header h2 {
  font-size:clamp(1.8rem,3.5vw,2.8rem);
  color:white;margin-bottom:var(--space-4);
}
.dyn-section-header p { color:rgba(255,255,255,.55);font-size:var(--text-lg); }
.dyn-section-tag {
  display:inline-block;font-size:.8rem;font-weight:600;
  color:#60a5fa;letter-spacing:.08em;
  margin-bottom:var(--space-4);
}
.dyn-gradient-text-inline {
  background:linear-gradient(135deg,#60a5fa,#a78bfa,#fbbf24);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
}

.dyn-services-grid {
  position:relative;z-index:1;
  display:grid;grid-template-columns:1fr;gap:var(--space-8);
}
.dyn-service-glass {
  position:relative;padding:var(--space-10);
  background:linear-gradient(135deg,rgba(255,255,255,.04),rgba(255,255,255,.01));
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius-2xl);
  backdrop-filter:blur(20px);
  transition:all .4s cubic-bezier(.4,0,.2,1);
  overflow:hidden;
}
.dyn-service-glass::before {
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);
}
.dyn-service-glass:hover {
  transform:translateY(-6px);
  border-color:rgba(255,255,255,.15);
  box-shadow:0 20px 50px rgba(0,0,0,.3);
}
.dyn-service-glass-icon {
  width:56px;height:56px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,rgba(26,86,219,.3),rgba(124,58,237,.2));
  border-radius:var(--radius-lg);color:#60a5fa;margin-bottom:var(--space-6);
  border:1px solid rgba(255,255,255,.06);
}
.dyn-service-glass h3 { color:white;margin-bottom:var(--space-3);font-size:var(--text-xl); }
.dyn-service-glass p { color:rgba(255,255,255,.55);line-height:1.7;margin-bottom:var(--space-4); }
.dyn-service-glass-tags {
  display:flex;flex-wrap:wrap;gap:6px;
}
.dyn-service-glass-tags span {
  font-size:.72rem;padding:.25rem .7rem;
  background:rgba(255,255,255,.06);color:rgba(255,255,255,.5);
  border-radius:100px;border:1px solid rgba(255,255,255,.06);
}
.dyn-service-glass-glow {
  position:absolute;width:200px;height:200px;border-radius:50%;
  background:radial-gradient(circle,rgba(26,86,219,.15) 0%,transparent 70%);
  top:-50%;right:-20%;
  transition:all .5s;pointer-events:none;
}
.dyn-service-glass:hover .dyn-service-glass-glow {
  top:-20%;right:-10%;width:250px;height:250px;
}

/* ─── Stats ─── */
.dyn-stats {
  position:relative;padding-block:var(--space-24);
  background:linear-gradient(180deg,var(--color-bg-dark) 0%,#111827 100%);
  overflow:hidden;
}
.dyn-stats-grid {
  position:relative;z-index:1;
  display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-8);
  text-align:center;
}
.dyn-stat-block {
  padding:var(--space-8);border-radius:var(--radius-xl);
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.05);
  transition:all .3s;
}
.dyn-stat-block:hover {
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.1);
  transform:translateY(-2px);
}
.dyn-stat-icon {
  width:48px;height:48px;margin:0 auto var(--space-4);
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;color:#60a5fa;
  background:rgba(96,165,250,.1);
}
.dyn-stat-value {
  font-size:clamp(2rem,4vw,3.5rem);font-weight:800;
  background:linear-gradient(135deg,white,#60a5fa);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;line-height:1;
}
.dyn-stat-suffix { font-size:.6em; }
.dyn-stat-label {
  display:block;margin-top:var(--space-2);
  color:rgba(255,255,255,.4);font-size:.9rem;
}
.dyn-network-decor {
  position:absolute;bottom:0;right:0;width:500px;height:500px;
  opacity:.08;background-size:contain;background-repeat:no-repeat;
  background-position:bottom right;pointer-events:none;z-index:0;
}

/* ─── Cases ─── */
.dyn-cases {
  padding-block:var(--space-24);
  background:var(--color-bg);
}
.dyn-cases .dyn-section-header h2 { color:var(--color-text); }
.dyn-cases .dyn-section-header p { color:var(--color-text-muted); }

.dyn-cases-tabs {
  display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-3);
  margin-bottom:var(--space-12);
}
.dyn-tab {
  padding:.5rem 1.25rem;font-size:.85rem;font-weight:500;
  background:transparent;color:var(--color-text-muted);
  border:1px solid var(--color-border);border-radius:100px;
  cursor:pointer;transition:all .25s;
}
.dyn-tab:hover { color:var(--color-primary);border-color:var(--color-primary-light); }
.dyn-tab.active {
  background:var(--color-primary);color:white;
  border-color:var(--color-primary);
}

.dyn-cases-grid {
  display:grid;grid-template-columns:1fr;gap:var(--space-6);
}
.dyn-case-card {
  position:relative;border-radius:var(--radius-xl);
  padding:var(--space-8);
  background:var(--color-bg-alt);
  border:1px solid var(--color-border);
  overflow:hidden;cursor:pointer;
  transition:all .35s cubic-bezier(.4,0,.2,1);
}
.dyn-case-card:hover {
  transform:translateY(-4px);
  box-shadow:0 15px 40px rgba(0,0,0,.1);
  border-color:var(--color-primary-light);
}
.dyn-case-card-bg {
  position:absolute;inset:0;
  background:linear-gradient(135deg,var(--color-primary-light),transparent);
  opacity:0;transition:opacity .35s;
}
.dyn-case-card:hover .dyn-case-card-bg { opacity:.5; }
.dyn-case-card-content { position:relative;z-index:1; }
.dyn-case-tag {
  display:inline-block;font-size:.7rem;font-weight:600;padding:.2rem .7rem;
  background:var(--color-primary-light);color:var(--color-primary);
  border-radius:100px;margin-bottom:var(--space-3);
}
.dyn-case-client {
  font-size:.85rem;color:var(--color-primary);font-weight:600;
  margin-bottom:var(--space-2);
}
.dyn-case-card h4 { font-size:var(--text-lg);margin-bottom:var(--space-2); }
.dyn-case-card p { color:var(--color-text-muted);font-size:.9rem;line-height:1.7; }
.dyn-case-card-hover {
  position:absolute;bottom:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--color-primary),#7c3aed);
  transform:scaleX(0);transition:transform .35s;transform-origin:left;
}
.dyn-case-card:hover .dyn-case-card-hover { transform:scaleX(1); }

.dyn-case-card[data-category].dyn-hidden { display:none; }

/* ─── Why Us Timeline ─── */
.dyn-whyus { padding-block:var(--space-24);background:var(--color-bg); }
.dyn-timeline {
  position:relative;max-width:800px;margin:0 auto;
}
.dyn-timeline-line {
  position:absolute;top:0;bottom:0;left:28px;width:2px;
  background:linear-gradient(180deg,var(--color-primary),#7c3aed,transparent);
}
.dyn-timeline-item {
  position:relative;padding-left:70px;margin-bottom:var(--space-12);
}
.dyn-timeline-right { padding-left:0;padding-right:70px;text-align:right; }
.dyn-timeline-dot {
  position:absolute;left:14px;top:0;
  width:32px;height:32px;border-radius:50%;
  background:linear-gradient(135deg,var(--color-primary),#7c3aed);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 6px var(--color-primary-light);
  z-index:1;
}
.dyn-timeline-right .dyn-timeline-dot { left:auto;right:14px; }
.dyn-timeline-dot span {
  font-size:.65rem;font-weight:700;color:white;
}
.dyn-timeline-card {
  background:var(--color-bg-alt);padding:var(--space-6);
  border-radius:var(--radius-xl);border:1px solid var(--color-border);
  transition:all .3s;
}
.dyn-timeline-card:hover {
  box-shadow:var(--shadow-md);
  border-color:var(--color-primary-light);
}
.dyn-timeline-card h3 { margin-bottom:var(--space-2); }
.dyn-timeline-card p { color:var(--color-text-muted);font-size:.9rem;line-height:1.7; }

@media(min-width:768px){
  .dyn-timeline-line { left:50%;transform:translateX(-50%); }
  .dyn-timeline-item { padding-left:0;width:50%;margin-bottom:var(--space-16); }
  .dyn-timeline-item:not(.dyn-timeline-right) { padding-right:60px; }
  .dyn-timeline-right { margin-left:50%;padding-left:60px;padding-right:0;text-align:left; }
  .dyn-timeline-dot { left:auto;right:-16px; }
  .dyn-timeline-right .dyn-timeline-dot { left:-16px;right:auto; }
}

/* ─── CTA ─── */
.dyn-cta { padding-block:var(--space-24); }
.dyn-cta-wrapper {
  position:relative;text-align:center;
  padding:var(--space-16) var(--space-8);
  background:linear-gradient(135deg,#0f172a 0%,#1e3a8a 50%,#7c3aed 100%);
  background-size:200% auto;animation:dyn-glow-shift 4s ease infinite;
  border-radius:var(--radius-2xl);
  overflow:hidden;isolation:isolate;
}
.dyn-cta-shapes { position:absolute;inset:0;pointer-events:none; }
.dyn-cta-shape-1 {
  position:absolute;width:300px;height:300px;border-radius:50%;
  background:rgba(255,255,255,.03);top:-20%;right:-10%;
}
.dyn-cta-shape-2 {
  position:absolute;width:200px;height:200px;border-radius:50%;
  background:rgba(251,191,36,.06);bottom:-10%;left:-5%;
}
.dyn-cta-shape-3 {
  position:absolute;width:150px;height:150px;border-radius:50%;
  border:1px solid rgba(255,255,255,.08);top:40%;left:20%;
}
.dyn-cta-wrapper h2 {
  position:relative;z-index:1;color:white;
  font-size:clamp(1.8rem,4vw,2.8rem);
  margin-bottom:var(--space-4);
}
.dyn-cta-wrapper p {
  position:relative;z-index:1;color:rgba(255,255,255,.7);
  font-size:var(--text-lg);max-width:34rem;margin:0 auto var(--space-8);
}
.dyn-cta-highlight { color:#fbbf24; }
.dyn-cta-buttons {
  position:relative;z-index:1;
  display:flex;justify-content:center;flex-wrap:wrap;gap:var(--space-4);
}

/* ─── Responsive ─── */
@media(min-width:768px){
  .dyn-hero-grid { grid-template-columns:1fr 1fr; }
  .dyn-services-grid { grid-template-columns:repeat(3,1fr); }
  .dyn-stats-grid { grid-template-columns:repeat(4,1fr); }
  .dyn-cases-grid { grid-template-columns:repeat(2,1fr); }
}
@media(min-width:1024px){
  .dyn-cases-grid { grid-template-columns:repeat(3,1fr); }
}
@media(max-width:767px){
  .dyn-stat-float-1 { top:-10px;right:0; }
  .dyn-stat-float-2 { bottom:5%;left:0; }
  .dyn-stat-float-3 { bottom:-10px;right:0; }
  .dyn-stat-float { padding:.5rem .75rem; }
  .dyn-stat-float-num { font-size:1.2rem; }
}