/* =================================================================
   UPBYTE® – ANIMATIONS & TRANSITIONS
   Visual Upgrade 2026 (Igloo-inspiriert)

   Inhalt wird in Phase 02 und Phase 04 befuellt.
   Dieses File ergaenzt ubx-architecture.css, ersetzt NICHTS.

   Breakpoints: Identisch mit ubx-architecture.css
   reduced-motion: Alle Animationen werden deaktiviert
   ================================================================= */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- Hero Particle Canvas --- */
.ubx-hero-particles-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
  opacity: 0.85;
  transition: opacity 0.1s linear;
}

/* Canvas hinter Hero-Content aber vor Body-Background */
.ubx-hero {
  position: relative;
  z-index: 1;
}

.ubx-hero-content {
  position: relative;
  z-index: 2;
}

/* --- Smooth Scroll --- */
html {
  scroll-behavior: smooth;
}

/* --- Text Glitch Pulse --- */
@keyframes ubx-glitch-pulse {
  0% { transform: translate(0); filter: none; }
  20% { transform: translate(2px, 0); filter: drop-shadow(-1px 0 #ff0040) drop-shadow(1px 0 #00c8f0); }
  40% { transform: translate(-1px, 1px); filter: drop-shadow(1px 0 #ff0040) drop-shadow(-1px 0 #00c8f0); }
  60% { transform: translate(1px, -1px); filter: drop-shadow(-1px 0 #00c8f0) drop-shadow(1px 0 #ff0040); }
  80% { transform: translate(-1px, 0); filter: drop-shadow(1px 0 #ff0040); }
  100% { transform: translate(0); filter: none; }
}

.ubx-glitch-active {
  animation: ubx-glitch-pulse 0.15s ease-in-out 1;
}

/* --- Scroll Progress Bar --- */
.ubx-scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: rgb(0, 200, 240);
  transform-origin: left;
  transform: scaleX(0);
  z-index: 9999;
  pointer-events: none;
}

/* --- Section Fade-In (globaler Soft-Reveal) --- */
.ubx-section {
  opacity: 1; /* Default sichtbar fuer No-JS */
}

/* --- FAQ Accordion verbessert --- */
.ubx-faq-item[open] .ubx-faq-answer {
  animation: ubx-faq-expand 0.35s ease forwards;
}

@keyframes ubx-faq-expand {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

.ubx-faq-item summary {
  cursor: pointer;
  transition: color 0.2s ease;
}

/* --- Process Line Fill --- */
.ubx-process-line-fill {
  transform-origin: top;
  transform: scaleY(0);
}

/* --- Plattform-Layer Animation --- */
.ubx-arch-layer {
  transition: opacity 0.4s ease, filter 0.4s ease, box-shadow 0.4s ease, transform 0.3s ease;
  cursor: pointer;
}

.ubx-arch-layer.ubx-layer-active {
  box-shadow: 0 0 20px rgba(0, 200, 240, 0.1);
}

/* SVG-Overlay fuer Verbindungslinien */
.ubx-arch-svg-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.ubx-arch-svg-overlay .ubx-arch-flow-path {
  fill: none;
  stroke: rgba(0, 200, 240, 0.4);
  stroke-width: 2;
  stroke-linecap: round;
}

.ubx-arch-svg-overlay .ubx-arch-flow-dot {
  fill: rgba(0, 200, 240, 0.8);
}

/* =================================================================
   MICRO-INTERACTIONS — Phase 04
   ================================================================= */

/* --- Card-Hover: Ausgangslage Cards --- */
.ubx-complexity-item {
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.ubx-complexity-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3), 0 0 20px rgba(0, 200, 240, 0.06);
}

/* --- Card-Hover: Projekt-Cards (Tilt via JS) --- */
.ubx-case {
  transition: transform 0.15s ease-out, box-shadow 0.3s ease;
  will-change: transform;
}

.ubx-case:hover {
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), 0 0 30px rgba(0, 200, 240, 0.08);
}

.ubx-case:hover .ubx-case-tag {
  background: rgba(0, 200, 240, 0.15);
  border-color: rgba(0, 200, 240, 0.3);
}

/* --- KPI-Balken: Animierte Fuellungen --- */
.ubx-case-layer-fill {
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.ubx-case.ubx-visible .ubx-case-layer-fill {
  transform: scaleX(var(--fill-scale, 0));
}

/* --- Service-Rows: Glasmorphism-Hover (Igloo-inspiriert) --- */
.ubx-service-row {
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
  border: 1px solid transparent;
  position: relative;
}

.ubx-service-row:hover {
  background: rgba(255, 255, 255, 0.02);
  border-color: rgba(0, 200, 240, 0.12);
  transform: scale(1.005) translateY(-1px);
}

/* Frost-Gradient am oberen Rand bei Hover */
.ubx-service-row::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.ubx-service-row:hover::before {
  opacity: 1;
}

/* Backdrop-Blur nur wenn der Browser es unterstuetzt */
@supports (backdrop-filter: blur(1px)) {
  .ubx-service-row:hover {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
}

/* --- Chromatische Aberration auf Service-Nummern --- */
.ubx-service-num {
  transition: text-shadow 0.15s ease;
}

.ubx-service-num.ubx-chromatic {
  text-shadow: -1px 0 rgba(255, 0, 64, 0.5), 1px 0 rgba(0, 200, 240, 0.5);
}

/* --- CTA-Buttons: Glow-Hover --- */
.ubx-btn--primary {
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.ubx-btn--primary:hover {
  transform: scale(1.02);
  box-shadow: 0 4px 20px rgba(0, 200, 240, 0.2);
}

.ubx-btn--primary:active {
  transform: scale(0.98);
}

.ubx-btn--outline {
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.ubx-btn--outline:hover {
  box-shadow: 0 0 15px rgba(0, 200, 240, 0.1);
  transform: scale(1.02);
}

.ubx-btn--outline:active {
  transform: scale(0.98);
}

/* --- Kontakt-Formular: Input-Focus-Glow --- */
.ubx-form .form-control {
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.ubx-form .form-control:focus {
  border-color: rgba(0, 200, 240, 0.5);
  box-shadow: 0 0 0 3px rgba(0, 200, 240, 0.1);
  outline: none;
}

.ubx-form label {
  transition: color 0.2s ease, transform 0.2s ease;
}

/* --- Architektur-Layer Hover --- */
.ubx-arch-layer:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 25px rgba(0, 200, 240, 0.12);
}

/* --- FAQ Accordion: Verbessertes Oeffnen/Schliessen --- */
.ubx-faq-item {
  transition: border-color 0.2s ease;
}

.ubx-faq-item[open] {
  border-color: rgba(0, 200, 240, 0.15);
}

.ubx-faq-item summary::after {
  transition: transform 0.3s ease;
}

.ubx-faq-item[open] summary::after {
  transform: rotate(180deg);
}

/* --- Kontakt-Methoden Hover --- */
.ubx-contact-method {
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.ubx-contact-method:hover {
  border-color: rgba(0, 200, 240, 0.2);
  transform: translateY(-1px);
}

/* --- Footer-Links Hover --- */
.ubx-footer-links a {
  transition: color 0.2s ease, transform 0.2s ease;
  display: inline-block;
}

.ubx-footer-links a:hover {
  color: rgb(0, 200, 240);
  transform: translateX(3px);
}

/* --- Navbar Active-Link Indicator --- */
.navbar-nav-upbyte .nav-link {
  position: relative;
  transition: color 0.2s ease;
}

.navbar-nav-upbyte .nav-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 50%;
  width: 0;
  height: 1px;
  background: rgb(0, 200, 240);
  transition: width 0.3s ease, left 0.3s ease;
}

.navbar-nav-upbyte .nav-link:hover::after {
  width: 100%;
  left: 0;
}