/* ============================================================
   Case-Study (#case-study .case) — Holographic Instrument-Panel-Chrome.
   Rotierende Holo-Conic-Edge + Dark-Glass + HUD-Ecken + Shimmer +
   animierte Dimension-Bars (fill + scan). Bestehender Inhalt (Score-
   Vergleich, Before/After, PDF-CTA) bleibt vollständig erhalten.
   Scoped #case-study (überschreibt cards.css-Frame für .case).
   ============================================================ */
@property --holo-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }

#case-study .case {
  position: relative;
  isolation: isolate;
  background: transparent;
  border: 0;
  border-radius: 24px;
  box-shadow:
    0 32px 80px rgba(0, 0, 0, 0.55),
    0 12px 32px rgba(139, 92, 246, 0.16),
    0 4px 12px rgba(255, 61, 129, 0.06);
}
#case-study .case::before {
  content: '';
  position: absolute; inset: -1.5px;
  border-radius: 25.5px; z-index: -3;
  background: conic-gradient(from var(--holo-angle),
    var(--color-s), var(--color-e), var(--color-a), var(--color-k), var(--color-t), var(--color-s));
  animation: holo-spin 22s linear infinite;
  filter: blur(0.5px) saturate(1.05);
  opacity: 0.62;
}
#case-study .case::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: 24px; z-index: -2;
  background:
    radial-gradient(60% 100% at 0% 0%, rgba(139, 92, 246, 0.10), transparent 60%),
    radial-gradient(80% 100% at 100% 100%, rgba(255, 61, 129, 0.08), transparent 65%),
    linear-gradient(160deg, rgba(15, 11, 38, 0.96) 0%, rgba(11, 8, 32, 0.94) 60%, rgba(20, 10, 36, 0.92) 100%);
}
@keyframes holo-spin { to { --holo-angle: 360deg; } }

/* HUD-Eckklammern */
#case-study .case__corners { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
#case-study .case__corners i {
  position: absolute; width: 16px; height: 16px;
  border-color: rgba(240, 238, 230, 0.28); border-style: solid; border-width: 0;
}
#case-study .case__corners i.tl { top: 12px; left: 12px; border-top-width: 1px; border-left-width: 1px; }
#case-study .case__corners i.tr { top: 12px; right: 12px; border-top-width: 1px; border-right-width: 1px; }
#case-study .case__corners i.bl { bottom: 12px; left: 12px; border-bottom-width: 1px; border-left-width: 1px; }
#case-study .case__corners i.br { bottom: 12px; right: 12px; border-bottom-width: 1px; border-right-width: 1px; }

/* Travelling Shimmer */
#case-study .case__shimmer { position: absolute; inset: 0; border-radius: 24px; overflow: hidden; pointer-events: none; z-index: 1; }
#case-study .case__shimmer::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 32%;
  transform: translateX(-180%) skewX(-22deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.06) 50%, transparent);
  animation: case-shimmer 10s ease-in-out infinite; mix-blend-mode: overlay;
}
@keyframes case-shimmer {
  0% { transform: translateX(-180%) skewX(-22deg); }
  55%, 100% { transform: translateX(360%) skewX(-22deg); }
}

/* Inhalt über den Chrome-Ebenen */
#case-study .case-head,
#case-study .case-compare,
#case-study .case-grid,
#case-study .case-ba,
#case-study .case-pdf-cta { position: relative; z-index: 3; }

/* Animierte Dimension-Bars (fill 0→target + Scan-Highlight) */
#case-study .case-dim-bar { position: relative; overflow: hidden; }
#case-study .case-dim-fill {
  transform: scaleX(0); transform-origin: left;
  animation: case-bar-grow 1.2s var(--ease-apple) forwards;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.12);
}
#case-study .case-grid .case-dim:nth-child(1) .case-dim-fill { animation-delay: 0.30s; }
#case-study .case-grid .case-dim:nth-child(2) .case-dim-fill { animation-delay: 0.42s; }
#case-study .case-grid .case-dim:nth-child(3) .case-dim-fill { animation-delay: 0.54s; }
#case-study .case-grid .case-dim:nth-child(4) .case-dim-fill { animation-delay: 0.66s; }
#case-study .case-grid .case-dim:nth-child(5) .case-dim-fill { animation-delay: 0.78s; }
#case-study .case-dim-fill::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 30%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  animation: case-bar-scan 4s linear infinite;
}
@keyframes case-bar-grow { to { transform: scaleX(1); } }
@keyframes case-bar-scan { 0% { transform: translateX(-100%); } 100% { transform: translateX(420%); } }

@media (prefers-reduced-motion: reduce) {
  #case-study .case::before, #case-study .case__shimmer::before,
  #case-study .case-dim-fill, #case-study .case-dim-fill::after { animation: none; }
  #case-study .case-dim-fill { transform: scaleX(1); }
}