/* ==========================================================================
   INTERDATA MKT&TI — NUA.center + DataMedic v2 + 21st.dev High-Impact Motion
   Preserves 100% of original texts, fonts (Sora / Manrope), and layout
   ========================================================================== */

/* 1. Top Scroll Progress Bar (21st.dev Scroll Progress) */
#interdata-scroll-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  z-index: 9999;
  pointer-events: none;
  background: linear-gradient(90deg, #ff6705 0%, #ff8a00 50%, #ffd166 100%);
  transform-origin: 0% 50%;
  transform: scaleX(0);
  box-shadow: 0 0 16px rgba(255, 138, 0, 0.9), 0 0 4px rgba(255, 255, 255, 0.6);
}

/* 2. 21st.dev Text Block Reveal Wrapper (DataMedic v2 Curtain Wipe) */
.block-reveal-wrapper {
  position: relative;
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: 0.04em;
}

.block-reveal-curtain {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  transform: scaleX(0);
  transform-origin: left center;
  border-radius: 3px;
}

/* 3. 21st.dev BlurTextAnimation Spans (NUA.center 3D Blur -> Focus) */
.interdata-blur-word {
  display: inline-block;
  will-change: filter, transform, opacity;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

/* 4. NUA.center + DataMedic v2 Glowing Aura & Laser Sweep Cards (Dark Surfaces) */
.interdata-spotlight-card {
  position: relative !important;
  overflow: hidden !important;
  --mouse-x: 50%;
  --mouse-y: 50%;
  --spotlight-rgb: 255, 138, 0;
  --spotlight-hex: #ff8a00;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.4s ease,
              box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Radial cursor-tracking spotlight */
.interdata-spotlight-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.4s ease;
  background: radial-gradient(
    520px circle at var(--mouse-x) var(--mouse-y),
    rgba(var(--spotlight-rgb), 0.18),
    transparent 45%
  );
}

/* Top Laser Beam (NUA Ecosystem style) */
.interdata-card-laser {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2.5px;
  background: linear-gradient(90deg, transparent, var(--spotlight-hex), transparent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 10;
  pointer-events: none;
  box-shadow: 0 0 14px var(--spotlight-hex);
}

/* Diagonal Glass Shimmer Sweep (NUA Ecosystem style) */
.interdata-card-sweep {
  position: absolute;
  top: 0;
  left: -160%;
  width: 140%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.07) 50%,
    transparent 100%
  );
  transform: skewX(-20deg);
  transition: left 1.05s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 2;
  pointer-events: none;
}

/* Giant Background Watermark Number (NUA 01, 02, 03, 04) */
.interdata-card-watermark {
  position: absolute;
  right: -4%;
  bottom: -6%;
  font-family: "Sora", sans-serif;
  font-size: 7.5rem;
  font-weight: 700;
  line-height: 1;
  color: rgba(var(--spotlight-rgb), 0);
  transform: translateY(24px) scale(0.9);
  transition: color 0.65s ease, transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 0;
  pointer-events: none;
  user-select: none;
}

.interdata-spotlight-card:hover {
  transform: translateY(-9px) scale(1.014) !important;
  border-color: rgba(var(--spotlight-rgb), 0.75) !important;
  box-shadow:
    0 0 0 1.5px rgba(var(--spotlight-rgb), 0.55),
    0 16px 38px -6px rgba(0, 0, 0, 0.75),
    0 24px 60px -12px rgba(var(--spotlight-rgb), 0.35),
    0 0 45px -8px rgba(var(--spotlight-rgb), 0.25) !important;
  z-index: 10;
}

.interdata-spotlight-card:hover::before {
  opacity: 1;
}

.interdata-spotlight-card:hover .interdata-card-laser {
  transform: scaleX(1);
}

.interdata-spotlight-card:hover .interdata-card-sweep {
  left: 130%;
}

.interdata-spotlight-card:hover .interdata-card-watermark {
  color: rgba(var(--spotlight-rgb), 0.075);
  transform: translateY(0) scale(1.06);
}

/* 5. Light Paper Cards (Section 01 & Section 04) NUA Lift + Warm Glow */
.interdata-spotlight-light {
  position: relative !important;
  overflow: hidden !important;
  --mouse-x: 50%;
  --mouse-y: 50%;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.4s ease,
              box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.interdata-spotlight-light::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.35s ease;
  background: radial-gradient(
    420px circle at var(--mouse-x) var(--mouse-y),
    rgba(255, 138, 0, 0.11),
    transparent 50%
  );
}

.interdata-spotlight-light:hover {
  transform: translateY(-7px) scale(1.012) !important;
  border-color: rgba(255, 138, 0, 0.65) !important;
  box-shadow:
    0 0 0 1.5px rgba(255, 138, 0, 0.35),
    0 18px 36px -8px rgba(194, 65, 12, 0.16),
    0 0 32px -6px rgba(255, 138, 0, 0.2) !important;
  z-index: 5;
}

.interdata-spotlight-light:hover::before {
  opacity: 1;
}

.interdata-spotlight-light:hover .interdata-card-laser {
  transform: scaleX(1);
}

.interdata-spotlight-light:hover .interdata-card-watermark {
  color: rgba(194, 65, 12, 0.065);
  transform: translateY(0) scale(1.05);
}

/* 6. Specular Shimmer Beam on .btn-metal & Neon Lift on .btn-outline */
.btn-metal {
  position: relative;
  overflow: hidden;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.35s ease !important;
}

.btn-metal:hover {
  transform: translateY(-2px) scale(1.03) !important;
  box-shadow: 0 12px 30px -6px rgba(255, 138, 0, 0.45),
              0 0 20px rgba(255, 255, 255, 0.25) !important;
}

.btn-metal::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -60%;
  width: 45%;
  height: 200%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.75) 50%,
    transparent 100%
  );
  transform: rotate(25deg);
  animation: interdataBtnShimmer 4s infinite cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

@keyframes interdataBtnShimmer {
  0% {
    left: -60%;
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  35%, 100% {
    left: 135%;
    opacity: 0;
  }
}

.btn-outline {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.35s ease,
              box-shadow 0.35s ease !important;
}

.btn-outline:hover {
  transform: translateY(-2px) scale(1.02) !important;
  border-color: #ff8a00 !important;
  box-shadow: 0 0 26px rgba(255, 138, 0, 0.32) !important;
}

/* 7. Section 03 Architecture Diagram Live Flowing Energy Beams */
.interdata-arch-hub {
  animation: interdataHubPulse 3s ease-in-out infinite;
}

@keyframes interdataHubPulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(255, 138, 0, 0.5), 0 0 25px rgba(255, 138, 0, 0.35);
  }
  50% {
    box-shadow: 0 0 0 10px rgba(255, 138, 0, 0), 0 0 42px rgba(255, 138, 0, 0.65);
  }
}

.interdata-energy-line {
  position: relative;
  overflow: hidden;
  width: 2px !important;
  background: rgba(255, 255, 255, 0.14) !important;
}

.interdata-energy-line::after {
  content: "";
  position: absolute;
  top: -100%;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, transparent, #ff8a00, #ffffff);
  animation: interdataEnergyDrop 1.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes interdataEnergyDrop {
  0% {
    top: -100%;
  }
  100% {
    top: 100%;
  }
}

.interdata-arch-node {
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.45s ease,
              box-shadow 0.45s ease !important;
}

.interdata-arch-node.interdata-arch-node-active,
.interdata-arch-node:hover {
  transform: translateY(-4px) scale(1.04);
  border-color: rgba(var(--node-rgb, 255, 138, 0), 0.75) !important;
  box-shadow: 0 0 24px rgba(var(--node-rgb, 255, 138, 0), 0.35) !important;
}

/* 8. Section 04 Scrubbed Laser Timeline Line & Active Badges */
.interdata-timeline-laser {
  position: absolute;
  top: 8px;
  bottom: 0;
  left: 15px;
  width: 2px;
  background: linear-gradient(180deg, #ff6705 0%, #ff8a00 65%, #ffd166 100%);
  box-shadow: 0 0 12px rgba(255, 138, 0, 0.85);
  transform-origin: top center;
  transform: scaleY(0);
  z-index: 2;
  pointer-events: none;
}

@media (min-width: 640px) {
  .interdata-timeline-laser {
    left: 19px;
  }
}

.interdata-step-badge {
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.45s ease,
              background-color 0.45s ease,
              color 0.45s ease !important;
}

.interdata-step-badge.interdata-step-active {
  transform: scale(1.14);
  background-color: #ff8a00 !important;
  color: #141416 !important;
  box-shadow: 0 0 0 5px rgba(255, 138, 0, 0.25),
              0 0 24px rgba(255, 138, 0, 0.75) !important;
}

/* 9. Modular Ecosystem List Items Hover Shift */
.interdata-module-row {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              color 0.35s ease !important;
  cursor: default;
}

.interdata-module-row:hover {
  transform: translateX(8px);
}

.interdata-module-row:hover span:first-child {
  color: #ff8a00 !important;
  text-shadow: 0 0 14px rgba(255, 138, 0, 0.45);
}

/* 10. Grayscale-to-Color Image Transition Support */
.interdata-color-scrub-img {
  will-change: filter, transform;
}