/* Crystal SVG stroke draw-on animation */
@keyframes crystal-draw {
  from {
    stroke-dashoffset: var(--path-length);
  }
  to {
    stroke-dashoffset: 0;
  }
}

.crystal-svg path,
.crystal-svg line,
.crystal-svg polygon {
  fill: none;
  stroke: var(--q-stroke-strong);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: var(--path-length);
  stroke-dashoffset: var(--path-length);
  animation: crystal-draw var(--dur-entrance) var(--q-ease-out) forwards;
}

/* Stagger each facet */
.crystal-svg .facet-1 { animation-delay: 0ms; }
.crystal-svg .facet-2 { animation-delay: 80ms; }
.crystal-svg .facet-3 { animation-delay: 160ms; }
.crystal-svg .facet-4 { animation-delay: 240ms; }
.crystal-svg .facet-5 { animation-delay: 320ms; }
.crystal-svg .facet-6 { animation-delay: 400ms; }
.crystal-svg .facet-7 { animation-delay: 480ms; }

/* Gentle floating for hero crystal */
@keyframes crystal-float {
  0%, 100% { transform: translateY(0) rotate3d(0, 1, 0, 0deg); }
  50% { transform: translateY(-8px) rotate3d(0, 1, 0, 3deg); }
}

.crystal-svg.animated {
  animation: crystal-float 6s var(--q-ease-in-out) infinite;
  animation-delay: 800ms;
}

/* Navbar scroll state */
.navbar.scrolled {
  background: rgba(250, 250, 250, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--q-stroke);
}

[data-theme="dark"] .navbar.scrolled,
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .navbar.scrolled {
    background: rgba(10, 10, 20, 0.85);
  }
}

/* Showcase typing cursor */
@keyframes blink-cursor {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.typing-cursor {
  display: inline-block;
  width: 2px;
  height: 1.2em;
  background: var(--q-crystal);
  margin-left: 2px;
  vertical-align: text-bottom;
  animation: blink-cursor 1s steps(1) infinite;
}

/* Stagger reveal children */
.stagger-children > * {
  opacity: 0;
  transform: translateY(16px);
}

.stagger-children.is-visible > *:nth-child(1) { transition-delay: 0ms; }
.stagger-children.is-visible > *:nth-child(2) { transition-delay: 80ms; }
.stagger-children.is-visible > *:nth-child(3) { transition-delay: 160ms; }
.stagger-children.is-visible > *:nth-child(4) { transition-delay: 240ms; }
.stagger-children.is-visible > *:nth-child(5) { transition-delay: 320ms; }
.stagger-children.is-visible > *:nth-child(6) { transition-delay: 400ms; }

.stagger-children.is-visible > * {
  opacity: 1;
  transform: translateY(0);
  transition: opacity var(--dur-standard) var(--q-ease-out),
              transform var(--dur-standard) var(--q-ease-out);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .crystal-svg path,
  .crystal-svg line,
  .crystal-svg polygon {
    stroke-dashoffset: 0 !important;
    animation: none !important;
  }

  .crystal-svg.animated {
    animation: none !important;
  }

  .typing-cursor {
    animation: none !important;
    opacity: 1;
  }
}