/* =========================================================================
   TechVero — Animation & 3D layer
   -------------------------------------------------------------------------
   Scroll reveals, 3D tilt, parallax, marquee and keyframes.
   All effects degrade gracefully and respect prefers-reduced-motion.
   ========================================================================= */

/* ---------- Scroll reveal (initial hidden states) ---------- */
[data-reveal] {
  opacity: 0;
  transition: opacity .8s var(--tv-ease), transform .8s var(--tv-ease);
  will-change: opacity, transform;
}
[data-reveal="up"]    { transform: translateY(38px); }
[data-reveal="fade"]  { transform: none; }
[data-reveal="scale"] { transform: scale(.92); }
[data-reveal="left"]  { transform: translateX(-46px); }
[data-reveal="right"] { transform: translateX(46px); }

/* Revealed state (added by JS / IntersectionObserver) */
[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* ---------- 3D tilt cards ---------- */
.tv-tilt {
  transform-style: preserve-3d;
  transition: transform .25s var(--tv-ease);
  will-change: transform;
}
/* The depth is applied inline by JS via custom properties */
.tv-tilt[data-tilt] {
  transform: perspective(900px) rotateX(var(--tv-rx, 0deg)) rotateY(var(--tv-ry, 0deg)) translateZ(0);
}

/* Subtle constant float for the hero dashboard when idle */
.tv-hero__visual .tv-dash { animation: tv-float 7s ease-in-out infinite; }
.tv-hero__visual .tv-dash:hover { animation-play-state: paused; }

/* ---------- Keyframes ---------- */
@keyframes tv-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}

@keyframes tv-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(22,192,138,.55); }
  70%  { box-shadow: 0 0 0 9px rgba(22,192,138,0); }
  100% { box-shadow: 0 0 0 0 rgba(22,192,138,0); }
}

@keyframes tv-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@keyframes tv-rise {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}

/* Stagger helper used by reveal groups */
[data-reveal-delay] { transition-delay: var(--tv-delay, 0ms); }

/* ---------- Reduced motion: turn everything calm ---------- */
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .tv-tilt[data-tilt] { transform: none !important; }
  .tv-hero__visual .tv-dash { animation: none !important; }
  .tv-marquee__track { animation: none !important; }
  .tv-dash__live i { animation: none !important; }
  .tv-orb { display: none; }
}

/* ---------- Touch devices: disable tilt (no hover) ---------- */
@media (hover: none) {
  .tv-tilt[data-tilt] { transform: none !important; }
}