echoes/frontend/app/index.css

@import "@radix-ui/themes/styles.css";
@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --transition-duration: 150ms;
  --transition-easing: cubic-bezier(0.4, 0, 0.2, 1);
}

/* 基础过渡效果 */
.radix-themes {
  transition:
    background-color var(--transition-duration) var(--transition-easing),
    color var(--transition-duration) var(--transition-easing);
}

/* 基础布局样式 */
html, 
body {
  height: 100%;
}

/* Logo 动画 */
.animated-text {
  max-width: 100%;
  height: auto;
}

.animated-text path {
  fill: transparent;
  stroke: currentColor;
  stroke-width: 2;
  stroke-dasharray: var(--path-length);
  stroke-dashoffset: var(--path-length);
  animation: logo-anim 15s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  transform-origin: center;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@keyframes logo-anim {
  0% {
    stroke-dashoffset: var(--path-length);
    stroke-dasharray: var(--path-length) var(--path-length);
    fill: transparent;
    opacity: 0;
  }

  5% {
    opacity: 1;
    stroke-dashoffset: var(--path-length);
    stroke-dasharray: var(--path-length) var(--path-length);
  }

  50% {
    stroke-dashoffset: 0;
    stroke-dasharray: var(--path-length) var(--path-length);
    fill: transparent;
  }

  60%, 75% {
    stroke-dashoffset: 0;
    stroke-dasharray: var(--path-length) var(--path-length);
    fill: currentColor;
    opacity: 1;
  }

  85% {
    stroke-dashoffset: 0;
    stroke-dasharray: var(--path-length) var(--path-length);
    fill: transparent;
    opacity: 1;
  }

  95% {
    stroke-dashoffset: var(--path-length);
    stroke-dasharray: var(--path-length) var(--path-length);
    fill: transparent;
    opacity: 1;
  }

  100% {
    stroke-dashoffset: var(--path-length);
    stroke-dasharray: var(--path-length) var(--path-length);
    fill: transparent;
    opacity: 0;
  }
}

/* 确保在暗色模式下的颜色正确 */
@media (prefers-color-scheme: dark) {
  .animated-text path {
    stroke: currentColor;
  }
}



/* 先确保基本动画工作后再添加脉动效果 */
.root {
  fill: none;
  stroke: var(--accent-9);
  stroke-width: 1px;
  stroke-linecap: round;
  opacity: 0;
  stroke-dasharray: 50;
  stroke-dashoffset: 50;
  animation: rootGrow 0.8s ease-out forwards var(--delay);
}

@keyframes rootGrow {
  0% {
    opacity: 0;
    stroke-dashoffset: 50;
    stroke-width: 0.5px;
  }
  100% {
    opacity: 0.6;
    stroke-dashoffset: 0;
    stroke-width: 1px;
  }
}

@keyframes growPath {
  0% {
    stroke-dashoffset: 100%;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 0.6;
  }
}