/* ClearGlass Inc. — Advanced Animation System */

.fade-up {
  opacity: 0;
  transform: translate3d(0, 50px, 0);
  transition: opacity 0.8s ease, transform 0.8s ease;
  will-change: opacity, transform;
}

.fade-up.animate-in {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.reveal-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  will-change: transform;
}

.reveal-card.is-revealed,
.reveal-card:hover {
  transform: translate3d(0, -10px, 0) scale(1.03);
}

.parallax {
  --cg-parallax-y: 0px;
  translate: 0 var(--cg-parallax-y);
  will-change: translate;
}

.mouse-parallax {
  --cg-mouse-x: 0px;
  --cg-mouse-y: 0px;
  translate: var(--cg-mouse-x) var(--cg-mouse-y);
  transition: translate 0.1s linear;
  will-change: translate;
}

.counter {
  font-variant-numeric: tabular-nums;
}

/* SVG motion primitives */
.animated-svg {
  --cg-svg-x: 0px;
  --cg-svg-y: 0px;
  opacity: 0;
  transform: translate3d(0, 50px, 0) translate3d(var(--cg-svg-x), var(--cg-svg-y), 0);
  transition:
    opacity var(--cg-svg-reveal-duration, 800ms) ease,
    transform var(--cg-svg-reveal-duration, 800ms) cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.animated-svg.svg-revealed {
  opacity: 1;
  transform: translate3d(var(--cg-svg-x), var(--cg-svg-y), 0);
}

.interactive-svg {
  --cg-svg-x: 0px;
  --cg-svg-y: 0px;
  translate: var(--cg-svg-x) var(--cg-svg-y);
  transition: translate 120ms linear;
  will-change: translate;
}

.svg-draw-path,
.draw-path {
  fill: none;
  vector-effect: non-scaling-stroke;
}

.data-flow {
  stroke-dasharray: 10;
  animation: clear-glass-svg-flow var(--cg-flow-duration, 1000ms) linear infinite;
  will-change: stroke-dashoffset;
}

.svg-rotate-group {
  transform-box: fill-box;
  transform-origin: center;
  animation: clear-glass-svg-rotate var(--cg-rotate-duration, 12000ms) linear infinite;
  animation-direction: var(--cg-rotate-direction, normal);
  will-change: transform;
}

.pulse-node {
  transform-box: fill-box;
  transform-origin: center;
  animation: clear-glass-svg-pulse var(--cg-node-duration, 2000ms) ease-in-out infinite;
  will-change: transform, opacity;
}

.svg-hoverable,
svg [data-svg-hover] {
  cursor: pointer;
  transition:
    stroke 300ms ease,
    fill 300ms ease,
    opacity 300ms ease,
    filter 300ms ease,
    transform 300ms ease;
  transform-box: fill-box;
  transform-origin: center;
}

.svg-hoverable:hover,
.svg-hoverable.svg-hover-active,
svg [data-svg-hover]:hover,
svg [data-svg-hover].svg-hover-active {
  stroke: var(--cg-svg-hover-stroke, #4dffff);
  fill: var(--cg-svg-hover-fill, currentColor);
  filter: drop-shadow(0 0 10px var(--cg-svg-glow, #00ffff));
}

.svg-hoverable[data-hover-scale],
svg [data-svg-hover][data-hover-scale] {
  transform: scale(var(--cg-svg-hover-scale, 1.06));
}

.svg-stroke {
  transition: stroke 300ms ease, stroke-width 300ms ease, filter 300ms ease;
}

.svg-fill {
  transition: fill 300ms ease, fill-opacity 300ms ease, filter 300ms ease;
}

@keyframes clear-glass-svg-flow {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: -20; }
}

@keyframes clear-glass-svg-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.7); opacity: 0.5; }
}

@keyframes clear-glass-svg-rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@media (hover: none), (pointer: coarse) {
  .reveal-card:hover {
    transform: none;
  }

  .svg-hoverable:hover,
  svg [data-svg-hover]:hover {
    filter: none;
  }

  .interactive-svg {
    translate: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fade-up {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .reveal-card,
  .reveal-card.is-revealed,
  .reveal-card:hover {
    transform: none !important;
    transition: none !important;
  }

  .parallax,
  .mouse-parallax {
    translate: none !important;
    transition: none !important;
  }

  .animated-svg,
  .animated-svg.svg-revealed,
  .interactive-svg {
    opacity: 1 !important;
    transform: none !important;
    translate: none !important;
    transition: none !important;
  }

  .data-flow,
  .svg-rotate-group,
  .pulse-node {
    animation: none !important;
  }

  .svg-hoverable,
  svg [data-svg-hover] {
    transition: none !important;
  }
}