/* ============================================================
   ΤΗΛΕΜΑΤΙΚΗ ICT — Signature visuals
   Three.js hero mount + poster fallback, aurora gradients,
   draw-on-scroll SVG diagram styles.
   ============================================================ */

/* ---- Hero 3D mount ---- */
[data-hero-3d] {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.hero-3d-canvas {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
}

/* Poster fallback: static network SVG, hidden once WebGL mounts */
.hero-3d-poster {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.5;
}
.hero-3d-poster svg { width: min(88%, 1100px); height: auto; }
.hero-3d-live .hero-3d-poster { display: none; }

/* ============================================================
   Aurora — slow ambient gradient drift (Stripe-adjacent, but
   restrained and strictly in-brand: navy + cyan only).
   Two blurred radial blobs on transform-only loops.
   ============================================================ */
.aurora {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.aurora::before,
.aurora::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 55vw;
  height: 55vw;
  min-width: 480px;
  min-height: 480px;
  border-radius: 50%;
  filter: blur(90px);
  will-change: transform;
  pointer-events: none;
}
.aurora::before {
  left: -12%;
  top: -28%;
  background: radial-gradient(circle at 40% 40%, rgba(91, 196, 236, 0.16), transparent 62%);
  animation: auroraA 26s ease-in-out infinite alternate;
}
.aurora::after {
  right: -18%;
  bottom: -34%;
  background: radial-gradient(circle at 60% 60%, rgba(42, 98, 190, 0.20), transparent 62%);
  animation: auroraB 22s ease-in-out infinite alternate;
}
/* Light-surface variant: even quieter */
.aurora--light::before { background: radial-gradient(circle at 40% 40%, rgba(91, 196, 236, 0.10), transparent 62%); }
.aurora--light::after  { background: radial-gradient(circle at 60% 60%, rgba(27, 77, 160, 0.07), transparent 62%); }

@keyframes auroraA {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(9%, 12%, 0) scale(1.18); }
}
@keyframes auroraB {
  from { transform: translate3d(0, 0, 0) scale(1.12); }
  to   { transform: translate3d(-10%, -9%, 0) scale(0.94); }
}
@media (prefers-reduced-motion: reduce) {
  .aurora::before, .aurora::after { animation: none; }
}

/* ============================================================
   Draw-on-scroll SVG diagrams
   Strokes get measured & animated by motion.js (initDrawSVG).
   Labels fade in after the linework.
   ============================================================ */
.diagram { color: var(--text-numeral); }
.diagram svg { width: 100%; height: auto; }
.diagram .diagram-label {
  font-family: var(--font-body);
  font-size: 12.5px;
  fill: var(--text-muted);
  letter-spacing: 0.04em;
}
.diagram .diagram-label--strong { fill: var(--text-title); font-weight: 600; }
.tm-motion .diagram [data-draw-label] { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .tm-motion .diagram [data-draw-label] { opacity: 1; }
}