/* =====================================================================
   SOFTWARE HUB IT — "IT BACKGROUND ANIMATION" LAYER (v4 — enhanced)
   -----------------------------------------------------------------
   Load AFTER style.css and premium-multicolor-theme.css:
     <link rel="stylesheet" href="/assets/css/style.css">
     <link rel="stylesheet" href="/assets/css/premium-multicolor-theme.css">
     <link rel="stylesheet" href="/assets/css/it-animations.css">
   And add this before </body>:
     <script src="/assets/js/it-animations.js"></script>

   ACTIVE SECTIONS (only these receive the full animation layer):
     • .hot-update
     • .why-us

   All other sections (about, services, tech, pricing, contact, faq,
   process) have decorative animations disabled.
   ===================================================================== */

:root {
  --it-circuit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.4'%3E%3Cpath d='M12 12h34v34M74 12v46h46M22 82h24v34M82 70h36v24M58 104h24M12 60h14v14'/%3E%3C/g%3E%3Cg fill='%23000'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Ccircle cx='74' cy='58' r='3'/%3E%3Ccircle cx='120' cy='58' r='3'/%3E%3Ccircle cx='46' cy='116' r='3'/%3E%3Ccircle cx='82' cy='94' r='3'/%3E%3Ccircle cx='118' cy='94' r='3'/%3E%3C/g%3E%3C/svg%3E");
  --it-circuit-lg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cg fill='none' stroke='%23000' stroke-width='1'%3E%3Cpath d='M20 20h60v60h80M220 20v80h-40M20 220h50v-50M200 240h40v-60M120 130h60M40 160v50'/%3E%3C/g%3E%3Cg fill='%23000'%3E%3Ccircle cx='20' cy='20' r='2.5'/%3E%3Ccircle cx='80' cy='80' r='2.5'/%3E%3Ccircle cx='220' cy='100' r='2.5'/%3E%3Ccircle cx='200' cy='180' r='2.5'/%3E%3Ccircle cx='40' cy='210' r='2.5'/%3E%3C/g%3E%3C/svg%3E");
  --it-grad: linear-gradient(120deg, #2563EB, #7C3AED, #F43F5E, #F59E0B, #10B981);
  --it-icon-color: #2563EB;
  --it-c1: #2563EB;
  --it-c2: #7C3AED;
  --it-c3: #F43F5E;
  --it-c4: #F59E0B;
  --it-c5: #10B981;
}

/* =====================================================================
   1. Positioning context — ONLY active sections
===================================================================== */
.hot-update,
.why-us {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  contain: layout paint;
}

.hot-update > .container,
.why-us > .container {
  position: relative;
  z-index: 1;
}

/* =====================================================================
   2. Reveal-on-scroll (optional)
===================================================================== */
.hot-update,
.why-us {
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.it-reveal-ready {
  opacity: 0;
  transform: translateY(18px);
}

.it-reveal-ready.it-in-view {
  opacity: 1;
  transform: translateY(0);
}

/* =====================================================================
   3. Cursor-reactive spotlight
===================================================================== */
.hot-update,
.why-us {
  --mx: 50%;
  --my: 40%;
}

.hot-update > .it-spotlight,
.why-us > .it-spotlight {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(
    320px circle at var(--mx) var(--my),
    rgba(37, 99, 235, 0.08),
    transparent 70%
  );
  transition: background-position 0.25s ease;
}

/* =====================================================================
   4. Circuit-board pattern (two layers)
===================================================================== */
.hot-update::before,
.why-us::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.05;
  pointer-events: none;
  mask-image: var(--it-circuit);
  -webkit-mask-image: var(--it-circuit);
  mask-repeat: repeat;
  -webkit-mask-repeat: repeat;
  mask-size: 140px 140px;
  -webkit-mask-size: 140px 140px;
  background: var(--it-grad);
  background-size: 300% 300%;
  animation: itCircuitDrift 26s linear infinite;
  will-change: background-position;
}

.hot-update::after,
.why-us::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.035;
  pointer-events: none;
  mask-image: var(--it-circuit-lg);
  -webkit-mask-image: var(--it-circuit-lg);
  mask-repeat: repeat;
  -webkit-mask-repeat: repeat;
  mask-size: 260px 260px;
  -webkit-mask-size: 260px 260px;
  background: currentColor;
  color: #0f172a;
  animation: itCircuitPulse 9s ease-in-out infinite;
}

@keyframes itCircuitDrift {
  0%   { background-position: 0% 0%; }
  100% { background-position: 100% 100%; }
}

@keyframes itCircuitPulse {
  0%, 100% { opacity: 0.03; }
  50%      { opacity: 0.06; }
}

/* =====================================================================
   5. Traveling data-pulse dots
===================================================================== */
.hot-update,
.why-us {
  background-image:
    radial-gradient(3px 3px at 0% 0%, var(--it-c1), transparent 60%),
    radial-gradient(3px 3px at 0% 0%, var(--it-c3), transparent 60%),
    radial-gradient(3px 3px at 0% 0%, var(--it-c5), transparent 60%);
  background-repeat: no-repeat;
  background-size: 6px 6px;
  background-position: -10% 110%, -30% 130%, -50% 150%;
  animation: itDataPulse 6s linear infinite;
}

@keyframes itDataPulse {
  0% {
    background-position: -10% 110%, -30% 130%, -50% 150%;
    opacity: 0;
  }
  8%  { opacity: 0.5; }
  92% { opacity: 0.5; }
  100% {
    background-position: 110% -10%, 130% -30%, 150% -50%;
    opacity: 0;
  }
}

/* =====================================================================
   6. Optional dark-section variant
===================================================================== */
.it-on-dark .it-float-icon {
  opacity: 0.16;
  filter: brightness(1.6);
}

.it-on-dark::before {
  mix-blend-mode: screen;
}

/* =====================================================================
   7. Matrix canvas + scanline
===================================================================== */
.it-matrix-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  mask-image: radial-gradient(ellipse at center, #000 55%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 55%, transparent 100%);
}

.it-scanline {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(37, 99, 235, 0.06) 45%,
    transparent 100%
  );
  background-size: 100% 220%;
  animation: itScanSweep 7s linear infinite;
}

@keyframes itScanSweep {
  0%   { background-position: 0 -120%; }
  100% { background-position: 0 120%; }
}

/* =====================================================================
   8. Floating tech icons
===================================================================== */
.it-float-icon {
  --ix: 10px;
  --iy: -22px;
  --dur: 9s;
  --delay: 0s;
  position: absolute;
  font-size: 20px;
  opacity: 0.10;
  z-index: 0;
  color: var(--it-icon-color);
  pointer-events: none;
  animation: itFloatIcon var(--dur) ease-in-out infinite;
  animation-delay: var(--delay);
  will-change: transform, opacity;
}

@keyframes itFloatIcon {
  0%, 100% {
    transform: translate(0, 0) rotate(0deg);
    opacity: 0.08;
    filter: drop-shadow(0 0 0 currentColor);
  }
  50% {
    transform: translate(calc(var(--ix) * 0.3), var(--iy)) rotate(6deg);
    opacity: 0.18;
    filter: drop-shadow(0 0 6px currentColor);
  }
}

/* 5-color cycle */
.it-float-icon:nth-of-type(5n+1) { color: var(--it-c1); }
.it-float-icon:nth-of-type(5n+2) { color: var(--it-c2); }
.it-float-icon:nth-of-type(5n+3) { color: var(--it-c3); }
.it-float-icon:nth-of-type(5n+4) { color: var(--it-c4); }
.it-float-icon:nth-of-type(5n+5) { color: var(--it-c5); }

/* Faster float on section hover */
.hot-update:hover .it-float-icon,
.why-us:hover .it-float-icon {
  animation-duration: calc(var(--dur) * 0.6);
}

/* =====================================================================
   9. Code chips
===================================================================== */
.it-code-chip {
  --ix: 10px;
  --iy: -22px;
  --dur: 10s;
  --delay: 0s;
  position: absolute;
  z-index: 0;
  pointer-events: none;
  font-family: 'Fira Code', 'Consolas', 'Menlo', monospace;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.3px;
  padding: 3px 8px;
  border-radius: 5px;
  color: var(--it-icon-color);
  background: color-mix(in srgb, var(--it-icon-color) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--it-icon-color) 25%, transparent);
  opacity: 0.14;
  white-space: nowrap;
  animation: itFloatIcon var(--dur) ease-in-out infinite;
  animation-delay: var(--delay);
  will-change: transform, opacity;
}

.it-code-chip:nth-of-type(5n+1) {
  color: var(--it-c1);
  background: color-mix(in srgb, var(--it-c1) 10%, transparent);
  border-color: color-mix(in srgb, var(--it-c1) 25%, transparent);
}
.it-code-chip:nth-of-type(5n+2) {
  color: var(--it-c2);
  background: color-mix(in srgb, var(--it-c2) 10%, transparent);
  border-color: color-mix(in srgb, var(--it-c2) 25%, transparent);
}
.it-code-chip:nth-of-type(5n+3) {
  color: var(--it-c3);
  background: color-mix(in srgb, var(--it-c3) 10%, transparent);
  border-color: color-mix(in srgb, var(--it-c3) 25%, transparent);
}
.it-code-chip:nth-of-type(5n+4) {
  color: var(--it-c4);
  background: color-mix(in srgb, var(--it-c4) 10%, transparent);
  border-color: color-mix(in srgb, var(--it-c4) 25%, transparent);
}
.it-code-chip:nth-of-type(5n+5) {
  color: var(--it-c5);
  background: color-mix(in srgb, var(--it-c5) 10%, transparent);
  border-color: color-mix(in srgb, var(--it-c5) 25%, transparent);
}

/* =====================================================================
   10. Decorative terminal window
===================================================================== */
.it-terminal {
  position: absolute;
  z-index: 0;
  width: min(260px, 70%);
  pointer-events: none;
  opacity: 0.16;
  border-radius: 10px;
  overflow: hidden;
  background: #0f172a;
  box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.5);
  transform: rotate(-3deg);
  animation: itTerminalFloat 12s ease-in-out infinite;
}

.it-terminal-bar {
  display: flex;
  gap: 6px;
  padding: 8px 10px;
  background: #1e293b;
}

.it-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.it-dot-r { background: #F43F5E; }
.it-dot-y { background: #F59E0B; }
.it-dot-g { background: #10B981; }

.it-terminal-body {
  padding: 10px 12px 14px;
  font-family: 'Fira Code', 'Consolas', 'Menlo', monospace;
  font-size: 11px;
  line-height: 1.6;
  color: #cbd5e1;
}

.it-terminal-body p {
  margin: 0;
  white-space: pre;
}

.it-tk-kw  { color: #7C3AED; }
.it-tk-fn  { color: #2563EB; }
.it-tk-str { color: #10B981; }

@keyframes itTerminalFloat {
  0%, 100% { transform: rotate(-3deg) translateY(0); }
  50%      { transform: rotate(-1deg) translateY(-14px); }
}

/* =====================================================================
   11. Typing cursor accent
===================================================================== */
.it-typing-cursor {
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 4px;
  background: currentColor;
  vertical-align: -2px;
  animation: itCursorBlink 1s step-end infinite;
}

@keyframes itCursorBlink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0; }
}

/* =====================================================================
   12. Card hover (safe even if used outside active sections)
===================================================================== */
.service-card,
.price-card,
.faq-item {
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.service-card:hover,
.price-card:hover,
.faq-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px -12px rgba(37, 99, 235, 0.28);
}

/* =====================================================================
   13. Reduced motion
===================================================================== */
@media (prefers-reduced-motion: reduce) {
  .hot-update::before,
  .why-us::before,
  .hot-update::after,
  .why-us::after,
  .it-scanline,
  .hot-update,
  .why-us {
    animation: none !important;
  }

  .it-float-icon,
  .it-code-chip {
    animation: none !important;
    transform: none !important;
    filter: none !important;
  }

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

  .it-terminal {
    animation: none !important;
    transform: rotate(0deg) !important;
  }

  .hot-update,
  .why-us {
    transition: none !important;
  }

  .it-reveal-ready {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* =====================================================================
   14. Small screens
===================================================================== */
@media (max-width: 768px) {
  .it-float-icon {
    font-size: 16px;
  }

  .it-float-icon:nth-child(3n) {
    display: none;
  }

  .hot-update::after,
  .why-us::after {
    mask-size: 180px 180px;
    -webkit-mask-size: 180px 180px;
  }

  .it-scanline {
    animation-duration: 10s;
  }

  .hot-update,
  .why-us {
    animation-duration: 9s;
  }

  .service-card:hover,
  .price-card:hover,
  .faq-item:hover {
    transform: none;
  }

  .it-terminal {
    display: none;
  }

  .it-code-chip {
    font-size: 11px;
    padding: 2px 6px;
  }
}

@media (max-width: 480px) {
  .hot-update::before,
  .why-us::before {
    animation-duration: 40s;
  }

  .it-matrix-canvas {
    opacity: 0.6;
  }
}

/* =====================================================================
   15. Print — strip all decoration
===================================================================== */
@media print {
  .hot-update::before,
  .why-us::before,
  .hot-update::after,
  .why-us::after,
  .it-matrix-canvas,
  .it-scanline,
  .it-float-icon,
  .it-spotlight,
  .it-typing-cursor,
  .it-code-chip,
  .it-terminal {
    display: none !important;
  }

  .hot-update,
  .why-us {
    background-image: none !important;
    animation: none !important;
  }
}