/* ============================================================
   utp·partner – CSS zu den Elementor-Animationen
   Progressive Enhancement: greift nur, wenn JS läuft (body.utp-js).
   ============================================================ */

/* --- Hero: Canvas über der Sektion, Inhalt darüber --- */
.utp-hero { position: relative; }
.utp-hero-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 1;
}
.utp-hero > .elementor-container,
.utp-hero .elementor-container { position: relative; z-index: 2; }

/* Logo-Bühne (HTML-Widget) + statisches Fallback-Logo */
.utp-logo-stage {
  width: 100%; max-width: 420px;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  display: flex; align-items: center; justify-content: center;
}
.utp-logo-stage .utp-logo-fallback { max-width: 78%; height: auto; }
body.utp-logo-active .utp-logo-stage .utp-logo-fallback { display: none; }

/* Schreibmaschinen-Cursor */
.utp-tw-caret {
  display: inline-block;
  width: .06em; min-width: 2px; height: 1em;
  background: var(--rust, #A64005);
  margin-left: .04em; transform: translateY(.12em);
  animation: utpCaret 1s steps(1) infinite;
}
@keyframes utpCaret { 50% { opacity: 0; } }

/* --- Roter Maus-Punkt --- */
.utp-cursor-dot {
  position: fixed; left: 0; top: 0;
  width: 20px; height: 20px; margin: -10px 0 0 -10px;
  border-radius: 50%;
  background: var(--rust, #A64005);
  box-shadow: 0 4px 14px rgba(166,64,5,.4);
  z-index: 99999; pointer-events: none;
  opacity: 0; transition: opacity .3s ease;
  will-change: transform;
}
.utp-cursor-dot.show { opacity: 1; }
@media (hover: none), (pointer: coarse) { .utp-cursor-dot { display: none !important; } }

/* --- Header: hellgrau beim Scrollen --- */
header.site-header, .site-header { transition: background-color .3s ease, box-shadow .3s ease; }
header.site-header.utp-scrolled,
.site-header.utp-scrolled {
  background-color: rgba(237,234,229,.96) !important;
  box-shadow: 0 1px 0 rgba(7,8,12,.10);
}

/* --- Worum es geht: rollender Ball + gestaffeltes Aufdecken --- */
.utp-ball {
  position: absolute; top: -26px; left: 0;
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--amber, #F2AE2E);
  box-shadow: 0 10px 22px rgba(7,8,12,.16);
  z-index: 3; pointer-events: none;
  transform: translateX(-50%); will-change: transform;
}
/* Inhalte der Spalten zunächst verstecken – NUR wenn JS den Ball aufgebaut hat.
   Die 2px-Oberlinie der Spalte (utp-problem-col) bleibt sichtbar. */
body.utp-ball-ready #problem .utp-problem-col .elementor-widget {
  opacity: 0; transform: translateY(14px);
  transition: opacity .6s var(--ease, cubic-bezier(.22,1,.36,1)),
              transform .6s var(--ease, cubic-bezier(.22,1,.36,1));
}
body.utp-ball-ready #problem .utp-problem-col.utp-in .elementor-widget { opacity: 1; transform: none; }
body.utp-ball-ready #problem .utp-problem-col.utp-in .elementor-widget:nth-child(2) { transition-delay: .08s; }
body.utp-ball-ready #problem .utp-problem-col.utp-in .elementor-widget:nth-child(3) { transition-delay: .16s; }

/* --- Reduced Motion: alles sofort sichtbar, keine Effekte --- */
@media (prefers-reduced-motion: reduce) {
  .utp-cursor-dot, .utp-ball, .utp-tw-caret { display: none !important; }
  body.utp-ball-ready #problem .utp-problem-col .elementor-widget { opacity: 1 !important; transform: none !important; }
}

/* --- Mobil: Ball aus, Spalten volle Breite --- */
@media (max-width: 1024px) {
  .utp-ball { display: none; }
}