/* ========================================
   几何形态交互动画元素系统
   整合自页面创意设计项目
   ======================================== */

:root {
  /* 几何元素色彩系统 */
  --geo-primary: #6366f1;
  --geo-secondary: #8b5cf6;
  --geo-accent: #ec4899;
  --geo-cyan: #06b6d4;
  --geo-amber: #f59e0b;
  --geo-emerald: #10b981;
  
  /* 几何渐变 */
  --geo-gradient-1: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #ec4899 100%);
  --geo-gradient-2: linear-gradient(45deg, #06b6d4, #6366f1);
  --geo-gradient-3: linear-gradient(90deg, #f59e0b, #ec4899);
  --geo-gradient-4: radial-gradient(circle, #6366f1, #8b5cf6);
  
  /* 几何尺寸系统 */
  --geo-size-xs: 8px;
  --geo-size-sm: 16px;
  --geo-size-md: 24px;
  --geo-size-lg: 32px;
  --geo-size-xl: 48px;
  --geo-size-2xl: 64px;
  
  /* 动画时长 */
  --geo-duration-fast: 200ms;
  --geo-duration-normal: 400ms;
  --geo-duration-slow: 800ms;
  --geo-duration-slower: 1200ms;
  
  /* 缓动函数 */
  --geo-ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
  --geo-ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
  --geo-ease-elastic: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --geo-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ========================================
   1. 旋转立方体 - Rotating Cube
   ======================================== */
.geo-cube {
  width: var(--geo-size-xl);
  height: var(--geo-size-xl);
  position: relative;
  transform-style: preserve-3d;
  animation: geo-cube-rotate 8s var(--geo-ease-in-out) infinite;
  cursor: pointer;
  transition: transform var(--geo-duration-normal) var(--geo-ease-out);
}

.geo-cube:hover {
  transform: scale(1.2) rotateX(180deg) rotateY(180deg);
}

.geo-cube__face {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 2px solid var(--geo-primary);
  background: rgba(99, 102, 241, 0.1);
  backface-visibility: visible;
  transition: all var(--geo-duration-normal) var(--geo-ease-out);
}

.geo-cube:hover .geo-cube__face {
  background: rgba(99, 102, 241, 0.2);
  border-color: var(--geo-accent);
}

.geo-cube__face--front  { transform: rotateY(0deg) translateZ(calc(var(--geo-size-xl) / 2)); }
.geo-cube__face--back   { transform: rotateY(180deg) translateZ(calc(var(--geo-size-xl) / 2)); }
.geo-cube__face--right  { transform: rotateY(90deg) translateZ(calc(var(--geo-size-xl) / 2)); }
.geo-cube__face--left   { transform: rotateY(-90deg) translateZ(calc(var(--geo-size-xl) / 2)); }
.geo-cube__face--top    { transform: rotateX(90deg) translateZ(calc(var(--geo-size-xl) / 2)); }
.geo-cube__face--bottom { transform: rotateX(-90deg) translateZ(calc(var(--geo-size-xl) / 2)); }

@keyframes geo-cube-rotate {
  0%   { transform: rotateX(0deg) rotateY(0deg); }
  100% { transform: rotateX(360deg) rotateY(360deg); }
}

/* ========================================
   2. 脉冲圆环 - Pulsing Rings
   ======================================== */
.geo-rings {
  width: var(--geo-size-2xl);
  height: var(--geo-size-2xl);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.geo-rings__ring {
  position: absolute;
  border-radius: 50%;
  border: 2px solid var(--geo-primary);
  opacity: 0;
  animation: geo-rings-pulse 2s var(--geo-ease-out) infinite;
}

.geo-rings__ring:nth-child(1) {
  width: 100%;
  height: 100%;
  animation-delay: 0s;
}

.geo-rings__ring:nth-child(2) {
  width: 70%;
  height: 70%;
  animation-delay: 0.3s;
  border-color: var(--geo-secondary);
}

.geo-rings__ring:nth-child(3) {
  width: 40%;
  height: 40%;
  animation-delay: 0.6s;
  border-color: var(--geo-accent);
}

.geo-rings:hover .geo-rings__ring {
  animation-duration: 1s;
}

@keyframes geo-rings-pulse {
  0% {
    transform: scale(0.5);
    opacity: 1;
  }
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}

/* ========================================
   3. 变形多边形 - Morphing Polygon
   ======================================== */
.geo-morph {
  width: var(--geo-size-2xl);
  height: var(--geo-size-2xl);
  position: relative;
  cursor: pointer;
}

.geo-morph__shape {
  width: 100%;
  height: 100%;
  background: var(--geo-gradient-1);
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  animation: geo-morph-shape 4s var(--geo-ease-in-out) infinite;
  transition: all var(--geo-duration-slow) var(--geo-ease-out);
}

.geo-morph:hover .geo-morph__shape {
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
  transform: rotate(180deg) scale(1.1);
}

.geo-morph:hover {
  filter: drop-shadow(0 10px 20px rgba(99, 102, 241, 0.4));
}

@keyframes geo-morph-shape {
  0%, 100% {
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  }
  25% {
    clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
  }
  50% {
    clip-path: polygon(50% 0%, 95% 38%, 76% 100%, 24% 100%, 5% 38%);
  }
  75% {
    clip-path: polygon(50% 0%, 100% 25%, 75% 100%, 25% 100%, 0% 25%);
  }
}

/* ========================================
   4. 螺旋粒子 - Spiral Particles
   ======================================== */
.geo-spiral {
  width: var(--geo-size-2xl);
  height: var(--geo-size-2xl);
  position: relative;
  transform-style: preserve-3d;
  cursor: pointer;
}

.geo-spiral__particle {
  position: absolute;
  width: 8px;
  height: 8px;
  background: var(--geo-gradient-2);
  border-radius: 50%;
  animation: geo-spiral-orbit 3s var(--geo-ease-in-out) infinite;
}

.geo-spiral__particle:nth-child(1) { --orbit-delay: 0s; --start-angle: 0deg; }
.geo-spiral__particle:nth-child(2) { --orbit-delay: 0.2s; --start-angle: 72deg; }
.geo-spiral__particle:nth-child(3) { --orbit-delay: 0.4s; --start-angle: 144deg; }
.geo-spiral__particle:nth-child(4) { --orbit-delay: 0.6s; --start-angle: 216deg; }
.geo-spiral__particle:nth-child(5) { --orbit-delay: 0.8s; --start-angle: 288deg; }

.geo-spiral__particle {
  animation-delay: var(--orbit-delay);
}

.geo-spiral:hover .geo-spiral__particle {
  animation-duration: 1.5s;
}

.geo-spiral:hover {
  transform: rotateX(30deg);
}

@keyframes geo-spiral-orbit {
  0% {
    transform: rotate(var(--start-angle)) translateX(24px) rotate(0deg);
    opacity: 0.3;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: rotate(calc(var(--start-angle) + 360deg)) translateX(24px) rotate(-360deg);
    opacity: 0.3;
  }
}

/* ========================================
   5. 分形三角形 - Fractal Triangles
   ======================================== */
.geo-fractal {
  width: var(--geo-size-2xl);
  height: var(--geo-size-2xl);
  position: relative;
  cursor: pointer;
}

.geo-fractal__triangle {
  position: absolute;
  width: 0;
  height: 0;
  border-left: calc(var(--geo-size-xl) / 2) solid transparent;
  border-right: calc(var(--geo-size-xl) / 2) solid transparent;
  border-bottom: var(--geo-size-xl) solid var(--geo-primary);
  transition: all var(--geo-duration-slow) var(--geo-ease-bounce);
}

.geo-fractal__triangle--1 {
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  border-bottom-color: var(--geo-primary);
}

.geo-fractal__triangle--2 {
  bottom: 0;
  left: 0;
  transform: rotate(-60deg);
  border-bottom-color: var(--geo-secondary);
}

.geo-fractal__triangle--3 {
  bottom: 0;
  right: 0;
  transform: rotate(60deg);
  border-bottom-color: var(--geo-accent);
}

.geo-fractal:hover .geo-fractal__triangle {
  transform: scale(0.8) rotate(180deg);
  opacity: 0.5;
}

.geo-fractal:hover .geo-fractal__triangle--2 {
  transform: rotate(120deg) translateX(-10px);
}

.geo-fractal:hover .geo-fractal__triangle--3 {
  transform: rotate(-120deg) translateX(10px);
}

/* ========================================
   6. 波浪网格 - Wave Grid
   ======================================== */
.geo-wave-grid {
  width: calc(var(--geo-size-2xl) * 2);
  height: calc(var(--geo-size-2xl) * 2);
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 4px;
  cursor: pointer;
  overflow: hidden;
}

.geo-wave-grid__cell {
  background: linear-gradient(135deg, var(--geo-primary), var(--geo-secondary));
  border-radius: 4px;
  opacity: 0.6;
  transform: scale(0.9);
  animation: geo-wave-cell 2s var(--geo-ease-in-out) infinite;
  animation-delay: calc((var(--cell-index, 0) % 4 + Math.floor(var(--cell-index, 0) / 4)) * 0.1s);
}

.geo-wave-grid:hover .geo-wave-grid__cell {
  animation-duration: 0.5s;
  background: var(--geo-gradient-3);
}

.geo-wave-grid:hover {
  filter: drop-shadow(0 0 20px rgba(245, 158, 11, 0.5));
}

@keyframes geo-wave-cell {
  0%, 100% {
    transform: scale(0.8);
    opacity: 0.4;
  }
  50% {
    transform: scale(1);
    opacity: 0.8;
  }
}

/* ========================================
   7. 轨道原子 - Orbital Atom
   ======================================== */
.geo-atom {
  width: var(--geo-size-2xl);
  height: var(--geo-size-2xl);
  position: relative;
  transform-style: preserve-3d;
  cursor: pointer;
}

.geo-atom__nucleus {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  background: var(--geo-gradient-1);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 20px rgba(99, 102, 241, 0.6);
  animation: geo-nucleus-pulse 2s var(--geo-ease-in-out) infinite;
}

.geo-atom__orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  border: 2px solid rgba(99, 102, 241, 0.3);
  border-radius: 50%;
  transform-style: preserve-3d;
}

.geo-atom__orbit--1 {
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%) rotateX(70deg);
  animation: geo-orbit-rotate-1 4s linear infinite;
}

.geo-atom__orbit--2 {
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%) rotateX(70deg) rotateY(60deg);
  animation: geo-orbit-rotate-2 4s linear infinite;
}

.geo-atom__orbit--3 {
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%) rotateX(70deg) rotateY(-60deg);
  animation: geo-orbit-rotate-3 4s linear infinite;
}

.geo-atom__electron {
  position: absolute;
  width: 8px;
  height: 8px;
  background: var(--geo-accent);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--geo-accent);
}

.geo-atom__orbit--1 .geo-atom__electron {
  animation: geo-electron-1 2s linear infinite;
}

.geo-atom__orbit--2 .geo-atom__electron {
  animation: geo-electron-2 2s linear infinite;
}

.geo-atom__orbit--3 .geo-atom__electron {
  animation: geo-electron-3 2s linear infinite;
}

.geo-atom:hover .geo-atom__nucleus {
  animation-duration: 0.5s;
}

.geo-atom:hover .geo-atom__electron {
  animation-duration: 0.5s;
}

@keyframes geo-nucleus-pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  50% { transform: translate(-50%, -50%) scale(1.2); opacity: 0.8; }
}

@keyframes geo-orbit-rotate-1 { to { transform: translate(-50%, -50%) rotateX(70deg) rotateZ(360deg); } }
@keyframes geo-orbit-rotate-2 { to { transform: translate(-50%, -50%) rotateX(70deg) rotateY(60deg) rotateZ(360deg); } }
@keyframes geo-orbit-rotate-3 { to { transform: translate(-50%, -50%) rotateX(70deg) rotateY(-60deg) rotateZ(360deg); } }

@keyframes geo-electron-1 {
  0% { transform: rotate(0deg) translateX(50px) rotate(0deg); }
  100% { transform: rotate(360deg) translateX(50px) rotate(-360deg); }
}
@keyframes geo-electron-2 {
  0% { transform: rotate(120deg) translateX(50px) rotate(0deg); }
  100% { transform: rotate(480deg) translateX(50px) rotate(-360deg); }
}
@keyframes geo-electron-3 {
  0% { transform: rotate(240deg) translateX(50px) rotate(0deg); }
  100% { transform: rotate(600deg) translateX(50px) rotate(-360deg); }
}

/* ========================================
   8. 响应式适配
   ======================================== */
@media (max-width: 768px) {
  :root {
    --geo-size-xl: 40px;
    --geo-size-2xl: 56px;
  }
  
  .geo-wave-grid {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
  }
}

/* ========================================
   9. 性能优化类
   ======================================== */
.geo-will-change {
  will-change: transform, opacity;
}

.geo-contain-strict {
  contain: strict;
  isolation: isolate;
}

/* ========================================
   10. 无障碍支持
   ======================================== */
@media (prefers-reduced-motion: reduce) {
  .geo-cube,
  .geo-rings__ring,
  .geo-morph__shape,
  .geo-spiral__particle,
  .geo-wave-grid__cell,
  .geo-atom__nucleus,
  .geo-atom__electron {
    animation: none !important;
    transition: none !important;
  }
}

/* 焦点样式 */
.geo-cube:focus,
.geo-rings:focus,
.geo-morph:focus,
.geo-spiral:focus,
.geo-fractal:focus,
.geo-wave-grid:focus,
.geo-atom:focus {
  outline: 3px solid var(--geo-primary);
  outline-offset: 4px;
}