/**
 * File: assets/css/styles.css
 * Purpose: 全站样式（深色主题，借鉴 zodiamarkets 的极简风格）
 */

/* Root tokens */
:root{
  --bg:#ffffff;
  --surface:#f8f9fa;
  --muted:#6b7280;
  --text:#111827;
  --accent:#0ea5e9;
  --glass: rgba(0,0,0,0.04);
  --card:#ffffff;
  --radius:12px;
  --container-max:1100px;
  --gap:20px;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Base */
*{box-sizing:border-box}
html{
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}
html,body{height:100%}
body{
  margin:0;
  background: radial-gradient(1200px 600px at 10% 10%, rgba(96,165,250,0.08), transparent),
              linear-gradient(180deg, rgba(0,0,0,0.01), transparent),
              var(--bg);
  color:var(--text);
  font-size:16px;
  line-height:1.6;
  position:relative;
}

/* Subtle animated background gradient */
body::before {
  content: '';
  position: fixed;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at 50% 50%, rgba(96,165,250,0.05), transparent 50%);
  animation: subtleRotate 60s linear infinite;
  pointer-events: none;
  z-index: 0;
}

@keyframes subtleRotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Ensure content is above background animation */
.site-header,
main,
.site-footer {
  position: relative;
  z-index: 1;
}

/* Animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

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

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

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

@keyframes pulseGlow {
  0%, 100% {
    box-shadow: 0 0 20px rgba(125,211,252,0.1);
  }
  50% {
    box-shadow: 0 0 30px rgba(125,211,252,0.2);
  }
}

/* Scroll reveal utilities */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.animate-on-scroll.revealed {
  opacity: 1;
  transform: translateY(0);
}

.stagger-1 { transition-delay: 0.1s; }
.stagger-2 { transition-delay: 0.2s; }
.stagger-3 { transition-delay: 0.3s; }
.stagger-4 { transition-delay: 0.4s; }
.stagger-5 { transition-delay: 0.5s; }

/* Slide in animations for specific use */
.slide-in-left {
  animation: slideInLeft 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.slide-in-right {
  animation: slideInRight 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.scale-in {
  animation: scaleIn 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.fade-in-down {
  animation: fadeInDown 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Container */
.container{max-width:var(--container-max);margin:0 auto;padding:0 24px}

/* Header */
.site-header{
  position:sticky;
  top:0;
  z-index:40;
  background:linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0.9));
  backdrop-filter: blur(6px);
  border-bottom:1px solid rgba(0,0,0,0.08);
  animation: fadeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:18px 0}
.logo{
  text-decoration:none;
  display:flex;
  align-items:center;
  transition: opacity 0.3s ease;
}
.logo img{
  height:32px;
  display:block;
}
.logo:hover{
  opacity:0.8;
}
.nav{display:flex;gap:18px;align-items:center}
.nav-item{
  color:var(--muted);
  text-decoration:none;
  padding:8px 10px;
  border-radius:8px;
  font-weight:600;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-item:hover{
  color:var(--text);
  background:rgba(0,0,0,0.04);
}
.nav-item.active{
  color:var(--text);
  background:linear-gradient(90deg, rgba(14,165,233,0.1), rgba(96,165,250,0.08));
}
.cta{
  background:linear-gradient(90deg,#0ea5e9,#0284c7);
  color:#ffffff;
  padding:8px 14px;
  border-radius:10px;
  text-decoration:none;
  font-weight:700;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
  box-shadow: 0 2px 8px rgba(14,165,233,0.25);
}
.cta:hover{
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(14,165,233,0.4);
}
.nav-toggle{display:none;background:transparent;border:0;color:var(--text);font-size:20px}

/* Hero */
.hero{padding:64px 0}
.hero-grid{display:grid;grid-template-columns:1fr 480px;gap:40px;align-items:center}
.hero-left{
  animation: fadeInUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.hero-title{
  font-family:"Playfair Display", serif;
  font-size:48px;
  margin:0;
  color:var(--text);
  line-height:1.02;
  letter-spacing:-0.02em;
}
.hero-sub{
  color:var(--muted);
  margin-top:16px;
  max-width:56ch;
  animation: fadeInUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.15s backwards;
}
.hero-ctas{
  margin-top:22px;
  display:flex;
  gap:12px;
  animation: fadeInUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.3s backwards;
}
.hero-note{
  margin-top:12px;
  color:var(--muted);
  font-weight:600;
  animation: fadeIn 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.45s backwards;
}
.hero-right{
  display:flex;
  justify-content:center;
  animation: slideInRight 1s cubic-bezier(0.16, 1, 0.3, 1) 0.2s backwards;
}
.hero-image{
  width:100%;
  height:320px;
  object-fit:cover;
  border-radius:14px;
  box-shadow: 0 30px 60px rgba(0,0,0,0.15);
  border:1px solid rgba(0,0,0,0.08);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.5s ease;
}
.hero-image:hover{
  transform: scale(1.02);
  box-shadow: 0 40px 80px rgba(0,0,0,0.2);
}

/* Sections */
.section{padding:56px 0}
.section-title{
  font-family:"Playfair Display",serif;
  font-size:26px;
  margin-bottom:12px;
  color:var(--text);
  position:relative;
  display:inline-block;
}
.section-title::after{
  content: '';
  position: absolute;
  left: 0;
  bottom: -8px;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), transparent);
  transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.section-title.revealed::after{
  width: 60px;
}
.lead{font-size:18px;color:var(--muted);margin-bottom:18px}

/* Cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.cards.small-cards{grid-template-columns:repeat(3,1fr)}
.card{
  background:#ffffff;
  border-radius:12px;
  padding:20px;
  border:1px solid rgba(0,0,0,0.08);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.4s ease,
              border-color 0.4s ease;
}
.card:hover{
  transform:translateY(-6px);
  box-shadow:0 12px 32px rgba(0,0,0,0.12), 0 0 0 1px rgba(14,165,233,0.2);
  border-color:rgba(14,165,233,0.3);
}
.card h3{
  margin-top:0;
  color:var(--text);
  transition: color 0.3s ease;
}
.card:hover h3{
  color:var(--accent);
}
.card p{color:var(--muted)}
.card-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:12px;
  color:var(--accent);
  text-decoration:none;
  font-weight:700;
  transition: gap 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.card:hover .card-link{
  gap:10px;
}

/* Steps */
.steps{display:flex;gap:18px;margin-top:18px}
.step{
  background:linear-gradient(180deg, rgba(0,0,0,0.02), transparent);
  padding:18px;
  border-radius:12px;
  flex:1;
  border:1px solid rgba(0,0,0,0.06);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              background 0.4s ease,
              border-color 0.4s ease,
              box-shadow 0.4s ease;
}
.step:hover{
  transform:translateY(-4px);
  background:linear-gradient(180deg, rgba(14,165,233,0.06), rgba(96,165,250,0.04));
  border-color:rgba(14,165,233,0.25);
  box-shadow:0 8px 24px rgba(0,0,0,0.1), 0 0 0 1px rgba(14,165,233,0.15);
}
.step h4{
  transition: color 0.3s ease;
}
.step:hover h4{
  color:var(--accent);
}

/* Articles */
.articles{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.article{
  display:flex;
  flex-direction:column;
  overflow:hidden;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.article:hover{
  transform: translateY(-4px);
}
.article-img{
  width:100%;
  height:160px;
  object-fit:cover;
  border-radius:10px;
  margin-bottom:12px;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.5s ease;
}
.article:hover .article-img{
  transform: scale(1.05);
  box-shadow: 0 12px 32px rgba(0,0,0,0.15);
}
.article-body{padding:6px 0}

/* Team Cards */
.team-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  text-decoration:none;
  padding:24px 20px;
  border-radius:12px;
  background:#ffffff;
  border:1px solid rgba(0,0,0,0.08);
  transition:all .28s ease;
}
.team-card:hover{
  transform:translateY(-6px);
  background:linear-gradient(180deg, rgba(14,165,233,0.04), #ffffff);
  border-color:rgba(14,165,233,0.3);
  box-shadow:0 12px 32px rgba(0,0,0,0.12);
}
.team-photo-wrapper{
  width:140px;
  height:140px;
  border-radius:50%;
  overflow:hidden;
  margin-bottom:18px;
  border:2px solid rgba(14,165,233,0.15);
  transition:border-color .28s ease;
}
.team-card:hover .team-photo-wrapper{
  border-color:rgba(14,165,233,0.4);
}
.team-photo{
  width:100%;
  height:100%;
  object-fit:cover;
}
.team-name{
  margin:0 0 8px 0;
  font-size:20px;
  font-weight:700;
  color:var(--text);
}
.team-title{
  margin:0;
  font-size:14px;
  color:var(--muted);
  font-weight:500;
  line-height:1.4;
}

/* Forms */
.contact-form{display:grid;gap:12px;max-width:720px}
.contact-form label{display:flex;flex-direction:column;font-weight:600;color:var(--text)}
.contact-form input, .contact-form textarea, .contact-form select{
  margin-top:8px;padding:12px;border-radius:10px;border:1px solid rgba(0,0,0,0.15);background:#ffffff;color:var(--text);font-size:15px;
}
.form-actions{display:flex;gap:12px;margin-top:6px}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  border-radius:10px;
  text-decoration:none;
  border:1px solid transparent;
  cursor:pointer;
  font-weight:700;
  position:relative;
  overflow:hidden;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.3s ease;
}
.btn:hover{
  transform: translateY(-2px);
}
.btn-primary{
  background:linear-gradient(90deg,#0ea5e9,#0284c7);
  color:#ffffff;
  border-color:transparent;
  box-shadow: 0 4px 12px rgba(14,165,233,0.3);
}
.btn-primary:hover{
  box-shadow: 0 8px 24px rgba(14,165,233,0.4);
}
.btn-ghost{
  background:transparent;
  color:var(--text);
  border:1px solid rgba(0,0,0,0.15);
}
.btn-ghost:hover{
  background:rgba(0,0,0,0.04);
  border-color:rgba(14,165,233,0.3);
}

/* Footer */
.site-footer{
  border-top:1px solid rgba(0,0,0,0.08);
  padding:28px 0;
  margin-top:48px;
  background:transparent;
  opacity:0;
  animation: fadeIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.5s forwards;
}
.footer-inner{display:flex;justify-content:space-between;align-items:center}
.footer-inner a{
  color:var(--muted);
  text-decoration:none;
  transition: color 0.3s ease;
}
.footer-inner a:hover{
  color:var(--accent);
}
.muted{color:var(--muted)}
.small{font-size:13px}

/* Utilities */
.content-block{background:transparent;padding:12px 0}
.cta-row{margin-top:18px}

/* Page Title */
.page-title{font-family:"Playfair Display",serif;font-size:42px;margin:0 0 16px 0;color:var(--text)}

/* Page Images */
.page-visual-break {
  margin: 64px 0;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(0,0,0,0.12);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.5s ease;
}
.page-visual-break:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 60px rgba(0,0,0,0.15);
}
.page-visual-break img {
  width: 100%;
  height: 400px;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.page-visual-break:hover img {
  transform: scale(1.05);
}

/* Reduced motion support for accessibility */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  body::before {
    animation: none;
  }
}

/* Responsive */
@media (max-width:1000px){
  .hero-grid{grid-template-columns:1fr 1fr}
  .cards{grid-template-columns:1fr 1fr}
  .articles{grid-template-columns:1fr 1fr}

  /* Reduce animation complexity on tablets */
  body::before {
    animation-duration: 90s;
  }
}
@media (max-width:760px){
  .hero-grid{grid-template-columns:1fr;gap:20px}
  .hero-image{height:220px}
  .hero-title{font-size:36px !important}
  .hero-sub{font-size:16px !important}
  .hero-note{font-size:13px !important}
  .hero{min-height:100vh !important; padding:100px 0 120px 0 !important; background-attachment:scroll !important}
  .nav{display:none}
  .nav-toggle{display:block}
  .cards{grid-template-columns:1fr}
  .articles{grid-template-columns:1fr}
  .steps{flex-direction:column}
  .page-title{font-size:32px}
  .team-photo-wrapper{width:120px;height:120px}
  .team-name{font-size:18px}
  .team-title{font-size:13px}
  .page-visual-break img{height:280px}

  /* Disable background animation on mobile for performance */
  body::before {
    display: none;
  }
}