/* ═══════════════════════════════════════════════════
   ÜBERGÄNGE · WELLE 3 — Styles
   Basis-Klassen aus uebergaenge-demos.css. Hier nur die 10
   neuen Demo-Mechaniken + ihre Karten-Previews (prv-ue-*).
═══════════════════════════════════════════════════ */

/* ════════════ KARTEN-PREVIEWS ════════════ */

/* Coverflow */
.prv-ue-coverflow { perspective: 360px; }
.prv-ue-coverflow .pue-cf { position: absolute; top: 50%; left: 50%; width: 34px; height: 48px; margin: -24px 0 0 -17px; border-radius: 6px; background: linear-gradient(135deg, var(--blue), var(--green)); }
.prv-ue-coverflow .pue-cf-c { z-index: 3; animation: pueCfC 3.4s ease-in-out infinite; }
.prv-ue-coverflow .pue-cf-l { background: rgba(255, 255, 255, .18); transform: translateX(-30px) rotateY(45deg) scale(.85); z-index: 2; }
.prv-ue-coverflow .pue-cf-r { background: rgba(255, 255, 255, .12); transform: translateX(30px) rotateY(-45deg) scale(.85); z-index: 2; }
@keyframes pueCfC { 0%, 100% { transform: rotateY(-18deg) scale(1); } 50% { transform: rotateY(18deg) scale(1); } }

/* Pixel */
.prv-ue-pixel { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 4px; padding: 14px; }
.prv-ue-pixel span { border-radius: 3px; background: linear-gradient(135deg, var(--blue), var(--green)); animation: puePx 3s ease-in-out infinite; }
.prv-ue-pixel span:nth-child(2) { animation-delay: .5s; } .prv-ue-pixel span:nth-child(4) { animation-delay: .25s; } .prv-ue-pixel span:nth-child(6) { animation-delay: .7s; } .prv-ue-pixel span:nth-child(8) { animation-delay: .4s; } .prv-ue-pixel span:nth-child(9) { animation-delay: .6s; }
@keyframes puePx { 0%, 30% { opacity: 1; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(.4) translate(6px, -4px); } }

/* Conic */
.prv-ue-conic .pue-cn-disc { position: absolute; inset: 14px; border-radius: 50%; background: conic-gradient(from -90deg, var(--green), var(--blue), rgba(255, 255, 255, .1)); animation: pueCnSpin 3s linear infinite; }
.prv-ue-conic .pue-cn-hand { position: absolute; left: 50%; top: 22%; width: 2px; height: 28%; background: #fff; transform-origin: bottom center; box-shadow: 0 0 8px var(--green); animation: pueCnSpin 3s linear infinite; }
@keyframes pueCnSpin { to { transform: rotate(360deg); } }
.prv-ue-conic .pue-cn-disc { animation-name: pueCnDisc; } @keyframes pueCnDisc { to { transform: rotate(360deg); } }

/* Book */
.prv-ue-book { perspective: 420px; }
.prv-ue-book .pue-bk-back { position: absolute; inset: 12px; border-radius: 6px; background: linear-gradient(135deg, #1e293b, #334155); }
.prv-ue-book .pue-bk-leaf { position: absolute; inset: 12px; border-radius: 6px; background: linear-gradient(135deg, var(--blue), var(--green)); transform-origin: left center; animation: pueBk 3.4s ease-in-out infinite; }
@keyframes pueBk { 0%, 16% { transform: rotateY(0); } 70%, 100% { transform: rotateY(-155deg); } }

/* Elastic */
.prv-ue-elastic .pue-el { position: absolute; left: 18%; right: 18%; bottom: 16%; height: 46%; border-radius: 8px; background: linear-gradient(135deg, var(--blue), var(--green)); transform-origin: bottom center; animation: pueEl 2.8s cubic-bezier(.5, 1.6, .4, 1) infinite; }
@keyframes pueEl { 0%, 20% { transform: translateY(120%); } 55% { transform: translateY(-8%) scaleY(1.08); } 70%, 100% { transform: translateY(0) scaleY(1); } }

/* Focus */
.prv-ue-focus .pue-fc { position: absolute; inset: 16px; border-radius: 8px; }
.prv-ue-focus .pue-fc-b { background: linear-gradient(135deg, var(--green), var(--blue)); animation: pueFcB 3.2s ease-in-out infinite; }
.prv-ue-focus .pue-fc-a { background: linear-gradient(135deg, #64748b, #94a3b8); animation: pueFcA 3.2s ease-in-out infinite; }
@keyframes pueFcA { 0%, 35% { filter: blur(0); opacity: 1; } 70%, 100% { filter: blur(6px); opacity: 0; } }
@keyframes pueFcB { 0%, 35% { filter: blur(6px); opacity: 0; } 70%, 100% { filter: blur(0); opacity: 1; } }

/* Shutter */
.prv-ue-shutter { display: flex; gap: 2px; padding: 12px; }
.prv-ue-shutter span { flex: 1; border-radius: 3px; background: linear-gradient(135deg, var(--blue), var(--green)); animation: pueShUp 3s ease-in-out infinite; }
.prv-ue-shutter span:nth-child(even) { animation-name: pueShDown; }
@keyframes pueShUp { 0%, 20% { transform: translateY(0); } 70%, 100% { transform: translateY(-80%); } }
@keyframes pueShDown { 0%, 20% { transform: translateY(0); } 70%, 100% { transform: translateY(80%); } }

/* Counter */
.prv-ue-counter { display: flex; gap: 5px; padding: 10px; overflow: hidden; }
.prv-ue-counter .pue-co { flex: 1; border-radius: 4px; background: linear-gradient(180deg, var(--blue), var(--green), var(--blue)); height: 180%; }
.prv-ue-counter .pue-co-1 { animation: pueCoUp 3.4s ease-in-out infinite; }
.prv-ue-counter .pue-co-2 { animation: pueCoDown 3.4s ease-in-out infinite; background: linear-gradient(180deg, rgba(255, 255, 255, .25), rgba(255, 255, 255, .08)); }
.prv-ue-counter .pue-co-3 { animation: pueCoUp 3.4s ease-in-out infinite; }
@keyframes pueCoUp { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-44%); } }
@keyframes pueCoDown { 0%, 100% { transform: translateY(-44%); } 50% { transform: translateY(0); } }

/* Warp */
.prv-ue-warp .pue-wp { position: absolute; top: 50%; left: 50%; border-radius: 8px; background: linear-gradient(135deg, var(--blue), var(--green)); opacity: 0; }
.prv-ue-warp .pue-wp-1 { width: 30px; height: 22px; margin: -11px 0 0 -15px; animation: pueWp 2.6s ease-in infinite; }
.prv-ue-warp .pue-wp-2 { width: 30px; height: 22px; margin: -11px 0 0 -15px; animation: pueWp 2.6s ease-in infinite .85s; }
.prv-ue-warp .pue-wp-3 { width: 30px; height: 22px; margin: -11px 0 0 -15px; animation: pueWp 2.6s ease-in infinite 1.7s; }
@keyframes pueWp { 0% { transform: scale(.3); opacity: 0; filter: blur(6px); } 30% { opacity: 1; filter: blur(0); } 100% { transform: scale(3.4); opacity: 0; filter: blur(8px); } }

/* Wave */
.prv-ue-wave .pue-wv-base { position: absolute; inset: 0; background: linear-gradient(135deg, #1e293b, #334155); }
.prv-ue-wave .pue-wv-top { position: absolute; inset: 0; background: linear-gradient(135deg, var(--blue), var(--green)); -webkit-mask-image: radial-gradient(120% 18px at 0% 50%, transparent 0 50%, #000 51%); mask-image: radial-gradient(120% 18px at 0% 50%, transparent 0 50%, #000 51%); animation: pueWv 3.4s ease-in-out infinite; }
@keyframes pueWv { 0%, 12% { transform: translateX(0); } 70%, 100% { transform: translateX(102%); } }

/* ════════════ 21 · COVERFLOW ════════════ */
.demo-ue-coverflow .dm-ue-cf-scene { perspective: 1500px; }
.demo-ue-coverflow .dm-ue-cf-stage { position: absolute; inset: 0; transform-style: preserve-3d; }
.demo-ue-coverflow .dm-ue-cf-panel { position: absolute; left: 50%; top: 50%; width: 44%; height: 64%; margin: -32% 0 0 -22%; background-size: cover; background-position: center; border-radius: 16px; box-shadow: 0 30px 70px rgba(0, 0, 0, .6); border: 1px solid rgba(255, 255, 255, .1); will-change: transform; }
.demo-ue-coverflow .dm-ue-cf-num { position: absolute; left: 14px; bottom: 12px; font-family: 'Oswald', sans-serif; font-size: 1.4rem; color: #fff; text-shadow: 0 2px 12px rgba(0, 0, 0, .7); }

/* ════════════ 22 · PIXEL ════════════ */
.demo-ue-pixel .dm-ue-px-back { position: absolute; inset: 0; overflow: hidden; }
.demo-ue-pixel .dm-ue-px-grid { position: absolute; inset: 0; display: grid; }
.demo-ue-pixel .dm-ue-px-block { will-change: transform, opacity; }

/* ════════════ 23 · CONIC ════════════ */
.demo-ue-conic .dm-ue-cn-base, .demo-ue-conic .dm-ue-cn-top { position: absolute; inset: 0; overflow: hidden; }
.demo-ue-conic .dm-ue-cn-top { will-change: mask-image; }
.demo-ue-conic .dm-ue-cn-hand { position: absolute; left: calc(50% - 1.5px); top: 6%; height: 44%; width: 3px; transform-origin: bottom center; background: linear-gradient(180deg, var(--green), rgba(16, 185, 129, .2)); box-shadow: 0 0 16px var(--green); z-index: 5; pointer-events: none; }

/* ════════════ 24 · BOOK ════════════ */
.demo-ue-book .dm-ue-bk-scene { perspective: 1900px; perspective-origin: 0% 50%; }
.demo-ue-book .dm-ue-bk-back { position: absolute; inset: 0; overflow: hidden; z-index: 1; }
.demo-ue-book .dm-ue-bk-spine { position: absolute; left: 0; top: 0; width: 40px; height: 100%; z-index: 4; pointer-events: none; background: linear-gradient(90deg, rgba(0, 0, 0, .55), transparent); }
.demo-ue-book .dm-ue-bk-leaf { position: absolute; inset: 0; overflow: hidden; transform-origin: left center; z-index: 3; will-change: transform; box-shadow: 30px 0 70px rgba(0, 0, 0, .5); }
.demo-ue-book .dm-ue-bk-curl { position: absolute; inset: 0; z-index: 6; pointer-events: none; opacity: 0; background: linear-gradient(90deg, rgba(0, 0, 0, .6), transparent 30%, transparent 70%, rgba(255, 255, 255, .12)); }

/* ════════════ 25 · ELASTIC ════════════ */
.demo-ue-elastic .dm-ue-el-a { position: absolute; inset: 0; overflow: hidden; z-index: 1; }
.demo-ue-elastic .dm-ue-el-b { position: absolute; inset: 0; overflow: hidden; transform-origin: bottom center; z-index: 2; will-change: transform; box-shadow: 0 -20px 60px rgba(0, 0, 0, .5); }

/* ════════════ 26 · FOCUS ════════════ */
.demo-ue-focus .dm-ue-fc-b { position: absolute; inset: 0; overflow: hidden; z-index: 1; }
.demo-ue-focus .dm-ue-fc-a { position: absolute; inset: 0; overflow: hidden; z-index: 2; will-change: filter, opacity, transform; }
.demo-ue-focus .dm-ue-fc-ring { position: absolute; left: 50%; top: 50%; width: 120px; height: 120px; margin: -60px 0 0 -60px; z-index: 5; pointer-events: none; opacity: 0; border: 2px solid rgba(255, 255, 255, .7); border-radius: 8px; clip-path: polygon(0 0, 26% 0, 26% 8%, 8% 8%, 8% 26%, 0 26%, 0 0, 100% 0, 74% 0, 74% 8%, 92% 8%, 92% 26%, 100% 26%, 100% 100%, 74% 100%, 74% 92%, 92% 92%, 92% 74%, 100% 74%, 100% 100%, 0 100%, 26% 100%, 26% 92%, 8% 92%, 8% 74%, 0 74%); }

/* ════════════ 27 · SHUTTER ════════════ */
.demo-ue-shutter .dm-ue-sh-back { position: absolute; inset: 0; overflow: hidden; }
.demo-ue-shutter .dm-ue-sh-bars { position: absolute; inset: 0; }
.demo-ue-shutter .dm-ue-sh-bar { position: absolute; top: 0; height: 100%; overflow: hidden; will-change: transform; }

/* ════════════ 28 · COUNTER ════════════ */
.demo-ue-counter .dm-ue-co-stage { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; align-items: start; padding: 0; }
.demo-ue-counter .dm-ue-co-col { display: flex; flex-direction: column; gap: 12px; align-self: start; will-change: transform; }
.demo-ue-counter .dm-ue-co-card { width: 100%; aspect-ratio: 3 / 4; border-radius: 12px; background-size: cover; background-position: center; box-shadow: 0 16px 40px rgba(0, 0, 0, .45); }
.demo-ue-counter .dm-ue-co-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 6; pointer-events: none; mix-blend-mode: difference; }
.demo-ue-counter .dm-ue-co-overlay h2 { font-family: 'Oswald', sans-serif; text-transform: uppercase; font-size: clamp(2.4rem, 8vw, 5rem); color: #fff; letter-spacing: -.02em; }

/* ════════════ 29 · WARP ════════════ */
.demo-ue-warp .dm-ue-wp-scene { perspective: 900px; background: #04060c; }
.demo-ue-warp .dm-ue-wp-streaks { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .4; background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(255, 255, 255, .06) 0deg 2deg, transparent 2deg 8deg); }
.demo-ue-warp .dm-ue-wp-b { position: absolute; inset: 0; overflow: hidden; z-index: 2; will-change: transform, filter, opacity; }
.demo-ue-warp .dm-ue-wp-a { position: absolute; inset: 0; overflow: hidden; z-index: 3; will-change: transform, filter, opacity; }

/* ════════════ 30 · WAVE ════════════ */
.demo-ue-wave .dm-ue-wv-base, .demo-ue-wave .dm-ue-wv-top { position: absolute; inset: 0; overflow: hidden; }
.demo-ue-wave .dm-ue-wv-top { will-change: clip-path; }

/* ════════════ RESPONSIVE ════════════ */
@media (max-width: 720px) {
  .demo-ue-coverflow .dm-ue-cf-panel { width: 56%; height: 58%; margin: -29% 0 0 -28%; }
  .demo-ue-counter .dm-ue-co-stage { gap: 8px; }
}

/* ════════════ REDUCED MOTION ════════════ */
@media (prefers-reduced-motion: reduce) {
  .prv-ue [class^="pue-cf"], .prv-ue [class^="pue-cn"], .prv-ue [class^="pue-bk"], .prv-ue [class^="pue-el"], .prv-ue [class^="pue-fc"], .prv-ue [class^="pue-co"], .prv-ue [class^="pue-wp"], .prv-ue [class^="pue-wv"], .prv-ue-pixel span, .prv-ue-shutter span { animation: none !important; }
}