/* ═══════════════════════════════════════════════════
   ÜBERGÄNGE · WELLE 2 — Styles
   Basis-Klassen (.dm-ue-pin/.dm-ue-stage/.dm-ue-scene-*/.dm-ue-intro/
   .dm-ue-note/.prv-ue …) kommen aus uebergaenge-demos.css.
   Hier nur die 10 neuen Demo-Mechaniken + ihre Karten-Previews.
═══════════════════════════════════════════════════ */

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

/* 11 · Vorhang-Türen */
.prv-ue-doors .pue-door { position: absolute; top: 10px; bottom: 10px; width: 36%; background: linear-gradient(135deg, var(--blue), var(--green)); }
.prv-ue-doors .pue-door-l { left: 14%; border-radius: 6px 0 0 6px; animation: pueDoorL 3.2s ease-in-out infinite; }
.prv-ue-doors .pue-door-r { right: 14%; border-radius: 0 6px 6px 0; animation: pueDoorR 3.2s ease-in-out infinite; }
.prv-ue-doors .pue-door-seam { position: absolute; left: 50%; top: 10px; bottom: 10px; width: 2px; transform: translateX(-50%); background: rgba(255, 255, 255, .7); box-shadow: 0 0 10px var(--green); }
@keyframes pueDoorL { 0%, 20% { transform: translateX(0); } 70%, 100% { transform: translateX(-42%); } }
@keyframes pueDoorR { 0%, 20% { transform: translateX(0); } 70%, 100% { transform: translateX(42%); } }

/* 12 · Geschwindigkeits-Skew */
.prv-ue-skew { display: flex; flex-direction: column; gap: 6px; justify-content: center; align-items: center; }
.prv-ue-skew .pue-skew-c { width: 58%; height: 16px; border-radius: 5px; background: linear-gradient(135deg, var(--blue), var(--green)); transform-origin: center; animation: pueSkew 2.6s ease-in-out infinite; }
.prv-ue-skew .pue-skew-c:nth-child(2) { background: rgba(255, 255, 255, .25); animation-delay: .08s; }
.prv-ue-skew .pue-skew-c:nth-child(3) { animation-delay: .16s; }
@keyframes pueSkew { 0%, 100% { transform: skewY(0) scaleY(1); } 35% { transform: skewY(-9deg) scaleY(1.18); } 70% { transform: skewY(3deg) scaleY(.96); } }

/* 13 · Typo-Maske */
.prv-ue-textmask { display: flex; align-items: center; justify-content: center; }
.prv-ue-textmask .pue-tm-word { font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 58px; line-height: 1; background: linear-gradient(135deg, var(--blue), var(--green)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: pueTm 3.2s cubic-bezier(.5, 0, .2, 1) infinite; }
@keyframes pueTm { 0%, 14% { transform: scale(1); } 70%, 100% { transform: scale(2.4); } }

/* 14 · Kachel-Flip */
.prv-ue-mosaic { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 4px; padding: 12px; perspective: 320px; }
.prv-ue-mosaic span { border-radius: 4px; background: linear-gradient(135deg, var(--blue), var(--green)); transform-style: preserve-3d; animation: pueMosaic 3.4s ease-in-out infinite; }
.prv-ue-mosaic span:nth-child(1) { animation-delay: 0s; }
.prv-ue-mosaic span:nth-child(2), .prv-ue-mosaic span:nth-child(4) { animation-delay: .15s; }
.prv-ue-mosaic span:nth-child(3), .prv-ue-mosaic span:nth-child(5), .prv-ue-mosaic span:nth-child(7) { animation-delay: .3s; }
.prv-ue-mosaic span:nth-child(6), .prv-ue-mosaic span:nth-child(8) { animation-delay: .45s; }
.prv-ue-mosaic span:nth-child(9) { animation-delay: .6s; }
@keyframes pueMosaic { 0%, 30% { transform: rotateY(0); background: rgba(255, 255, 255, .22); } 65%, 100% { transform: rotateY(180deg); background: linear-gradient(135deg, var(--blue), var(--green)); } }

/* 15 · Schichten-Parallax */
.prv-ue-depth .pue-dp { position: absolute; border-radius: 8px; }
.prv-ue-depth .pue-dp-3 { inset: 8px; background: rgba(255, 255, 255, .08); animation: pueDp 3.6s ease-in-out infinite; }
.prv-ue-depth .pue-dp-2 { left: 18%; right: 30%; top: 28%; bottom: 24%; background: rgba(255, 255, 255, .2); animation: pueDp 3.6s ease-in-out infinite .2s; }
.prv-ue-depth .pue-dp-1 { left: 40%; right: 14%; top: 40%; bottom: 14%; background: linear-gradient(135deg, var(--blue), var(--green)); animation: pueDp 3.6s ease-in-out infinite .4s; }
@keyframes pueDp { 0%, 100% { transform: translateY(7px); } 50% { transform: translateY(-7px); } }

/* 16 · Tür-Scharnier 3D */
.prv-ue-hinge { perspective: 360px; }
.prv-ue-hinge .pue-hinge-back { position: absolute; inset: 10px; border-radius: 8px; background: linear-gradient(135deg, #1e293b, #334155); }
.prv-ue-hinge .pue-hinge-door { position: absolute; inset: 10px; border-radius: 8px; background: linear-gradient(135deg, var(--blue), var(--green)); transform-origin: left center; animation: pueHinge 3.4s ease-in-out infinite; }
@keyframes pueHinge { 0%, 16% { transform: rotateY(0); } 70%, 100% { transform: rotateY(-78deg); } }

/* 17 · Glitch / RGB-Split */
.prv-ue-glitch .pue-gl { position: absolute; inset: 16px; border-radius: 6px; mix-blend-mode: screen; }
.prv-ue-glitch .pue-gl-m { background: linear-gradient(135deg, #64748b, #94a3b8); mix-blend-mode: normal; }
.prv-ue-glitch .pue-gl-r { background: #ff2d55; animation: pueGlR 1.8s steps(2, end) infinite; }
.prv-ue-glitch .pue-gl-c { background: #00e5ff; animation: pueGlC 1.8s steps(2, end) infinite; }
@keyframes pueGlR { 0%, 60%, 100% { transform: translate(0, 0); opacity: .55; } 70% { transform: translate(6px, -3px); opacity: .9; } 80% { transform: translate(-4px, 2px); } }
@keyframes pueGlC { 0%, 60%, 100% { transform: translate(0, 0); opacity: .55; } 70% { transform: translate(-6px, 3px); opacity: .9; } 80% { transform: translate(4px, -2px); } }

/* 18 · Origami-Falt */
.prv-ue-fold { display: flex; flex-direction: column; padding: 12px; gap: 2px; perspective: 300px; }
.prv-ue-fold span { flex: 1; background: linear-gradient(135deg, var(--blue), var(--green)); }
.prv-ue-fold span:nth-child(odd) { transform-origin: top center; animation: pueFoldA 3.2s ease-in-out infinite; }
.prv-ue-fold span:nth-child(even) { transform-origin: bottom center; animation: pueFoldB 3.2s ease-in-out infinite; }
@keyframes pueFoldA { 0%, 18% { transform: rotateX(0); } 70%, 100% { transform: rotateX(-62deg); } }
@keyframes pueFoldB { 0%, 18% { transform: rotateX(0); } 70%, 100% { transform: rotateX(62deg); } }

/* 19 · 3D-Tiefen-Tunnel */
.prv-ue-tunnel .pue-tn { position: absolute; top: 50%; left: 50%; border: 2px solid var(--green); border-radius: 8px; transform: translate(-50%, -50%); opacity: 0; }
.prv-ue-tunnel .pue-tn-1 { width: 26px; height: 18px; animation: pueTn 2.8s linear infinite; }
.prv-ue-tunnel .pue-tn-2 { width: 26px; height: 18px; border-color: var(--blue); animation: pueTn 2.8s linear infinite .9s; }
.prv-ue-tunnel .pue-tn-3 { width: 26px; height: 18px; animation: pueTn 2.8s linear infinite 1.8s; }
@keyframes pueTn { 0% { transform: translate(-50%, -50%) scale(.5); opacity: 0; } 25% { opacity: 1; } 100% { transform: translate(-50%, -50%) scale(4.2); opacity: 0; } }

/* 20 · Kinetische Typo */
.prv-ue-kinetic { display: flex; flex-direction: column; justify-content: center; gap: 4px; overflow: hidden; }
.prv-ue-kinetic .pue-kt { font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 24px; line-height: 1; white-space: nowrap; text-transform: uppercase; }
.prv-ue-kinetic .pue-kt-1 { color: #fff; animation: pueKt1 3s linear infinite; }
.prv-ue-kinetic .pue-kt-2 { color: transparent; -webkit-text-stroke: 1px var(--green); margin-left: 30px; animation: pueKt2 3s linear infinite; }
@keyframes pueKt1 { 0% { transform: translateX(-30%); } 100% { transform: translateX(10%); } }
@keyframes pueKt2 { 0% { transform: translateX(20%); } 100% { transform: translateX(-25%); } }

/* ════════════ 11 · VORHANG-TÜREN ════════════ */
.demo-ue-doors .dm-ue-doors-base { position: absolute; inset: 0; overflow: hidden; z-index: 1; will-change: transform; }
.demo-ue-doors .dm-ue-doors-leaf { position: absolute; top: 0; height: 100%; width: 50%; overflow: hidden; z-index: 2; will-change: transform; }
.demo-ue-doors .dm-ue-doors-left { left: 0; }
.demo-ue-doors .dm-ue-doors-right { right: 0; }
.demo-ue-doors .dm-ue-doors-img { position: absolute; top: 0; height: 100%; width: 200%; background-size: cover; background-position: center; }
.demo-ue-doors .dm-ue-doors-left .dm-ue-doors-img { left: 0; }
.demo-ue-doors .dm-ue-doors-right .dm-ue-doors-img { right: 0; }
.demo-ue-doors .dm-ue-doors-seam { position: absolute; left: 50%; top: 0; width: 2px; height: 100%; transform: translateX(-50%); background: linear-gradient(180deg, transparent, var(--green), transparent); box-shadow: 0 0 22px var(--green); z-index: 3; }

/* ════════════ 12 · GESCHWINDIGKEITS-SKEW ════════════ */
.demo-ue-skew .dm-ue-skew-track { position: absolute; left: 0; right: 0; top: 0; margin: 0 auto; width: min(82%, 560px); display: flex; flex-direction: column; gap: 20px; padding: 12vh 0; will-change: transform; }
.demo-ue-skew .dm-ue-skew-card { position: relative; height: 46vh; border-radius: 18px; overflow: hidden; box-shadow: 0 22px 60px rgba(0, 0, 0, .55); }
.demo-ue-skew .dm-ue-skew-img { position: absolute; inset: 0; background-size: cover; background-position: center; }
.demo-ue-skew .dm-ue-skew-num { position: absolute; left: 18px; bottom: 14px; font-family: 'Oswald', sans-serif; font-size: 2.4rem; color: #fff; text-shadow: 0 2px 18px rgba(0, 0, 0, .6); }
.demo-ue-skew .dm-ue-skew-read { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 20; display: flex; align-items: center; gap: 8px; background: rgba(5, 8, 15, .72); border: 1px solid rgba(16, 185, 129, .3); border-radius: 999px; padding: 6px 14px; font-family: 'Menlo', monospace; font-size: .8rem; color: var(--green); }
.demo-ue-skew .dm-ue-skew-read-lbl { font-family: 'Montserrat', sans-serif; font-size: .56rem; letter-spacing: .18em; text-transform: uppercase; color: rgba(255, 255, 255, .5); }

/* ════════════ 13 · TYPO-MASKE ════════════ */
.demo-ue-textmask .dm-ue-textmask-stage { background: #04060c; }
.demo-ue-textmask .dm-ue-textmask-full { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; z-index: 2; }
.demo-ue-textmask .dm-ue-textmask-word { position: absolute; inset: 0; margin: 0; display: flex; align-items: center; justify-content: center; font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 17vw; letter-spacing: -.04em; background-size: cover; background-position: center; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; z-index: 3; will-change: transform, opacity; }
.demo-ue-textmask .dm-ue-textmask-final { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; opacity: 0; z-index: 4; background: linear-gradient(180deg, rgba(4, 6, 12, .2), rgba(4, 6, 12, .66)); }
.demo-ue-textmask .dm-ue-textmask-final h3 { font-family: 'Oswald', sans-serif; text-transform: uppercase; font-size: clamp(1.8rem, 5vw, 3rem); }

/* ════════════ 14 · KACHEL-FLIP ════════════ */
.demo-ue-mosaic .dm-ue-mosaic-grid { position: absolute; inset: 0; display: grid; gap: 2px; perspective: 1400px; background: #04060c; }
.demo-ue-mosaic .dm-ue-mosaic-tile { position: relative; transform-style: preserve-3d; will-change: transform; }
.demo-ue-mosaic .dm-ue-mosaic-face { position: absolute; inset: 0; backface-visibility: hidden; }
.demo-ue-mosaic .dm-ue-mosaic-back { transform: rotateY(180deg); }

/* ════════════ 15 · SCHICHTEN-PARALLAX ════════════ */
.demo-ue-depth .dm-ue-depth-stage { background: #05080f; }
.demo-ue-depth .dm-ue-depth-stage::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5, 8, 15, .25), rgba(5, 8, 15, .55)); z-index: 1; pointer-events: none; }
.demo-ue-depth .dm-ue-depth-bg { position: absolute; inset: -10%; background-size: cover; background-position: center; z-index: 0; will-change: transform; }
.demo-ue-depth .dm-ue-depth-title { position: absolute; left: 0; right: 0; top: 32%; text-align: center; margin: 0; font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 13vw; letter-spacing: .05em; color: rgba(255, 255, 255, .07); z-index: 2; will-change: transform; }
.demo-ue-depth .dm-ue-depth-card { position: absolute; border-radius: 14px; background-size: cover; background-position: center; box-shadow: 0 26px 64px rgba(0, 0, 0, .55); z-index: 3; will-change: transform; }
.demo-ue-depth .dm-ue-depth-c1 { width: 42%; height: 46%; left: 8%; top: 24%; }
.demo-ue-depth .dm-ue-depth-c2 { width: 34%; height: 40%; right: 9%; bottom: 14%; }
.demo-ue-depth .dm-ue-depth-vignette { position: absolute; inset: -22%; z-index: 4; pointer-events: none; box-shadow: inset 0 0 160px 50px rgba(5, 8, 15, .85); will-change: transform; }

/* ════════════ 16 · TÜR-SCHARNIER 3D ════════════ */
.demo-ue-hinge .dm-ue-hinge-scene { perspective: 1700px; perspective-origin: 28% 50%; }
.demo-ue-hinge .dm-ue-hinge-back { position: absolute; inset: 0; overflow: hidden; z-index: 1; }
.demo-ue-hinge .dm-ue-hinge-door { position: absolute; inset: 0; overflow: hidden; transform-origin: left center; backface-visibility: hidden; z-index: 2; will-change: transform; box-shadow: 50px 0 90px rgba(0, 0, 0, .55); }
.demo-ue-hinge .dm-ue-hinge-shadow { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .85)); opacity: 0; z-index: 5; }

/* ════════════ 17 · GLITCH / RGB-SPLIT ════════════ */
.demo-ue-glitch .dm-ue-glitch-base { position: absolute; inset: 0; overflow: hidden; z-index: 1; }
.demo-ue-glitch .dm-ue-glitch-top { position: absolute; inset: 0; overflow: hidden; z-index: 2; will-change: opacity; }
.demo-ue-glitch .dm-ue-glitch-main { position: absolute; inset: 0; background-size: cover; background-position: center; }
.demo-ue-glitch .dm-ue-glitch-ch { position: absolute; inset: 0; background-size: cover; background-position: center; mix-blend-mode: screen; opacity: 0; will-change: transform; }
.demo-ue-glitch .dm-ue-glitch-r { filter: brightness(1.1) sepia(1) saturate(7) hue-rotate(-22deg); }
.demo-ue-glitch .dm-ue-glitch-c { filter: brightness(1.1) sepia(1) saturate(7) hue-rotate(140deg); }
.demo-ue-glitch .dm-ue-glitch-slice { position: absolute; left: 0; width: 100%; background-size: 100% 600%; opacity: 0; will-change: transform; }
.demo-ue-glitch .dm-ue-glitch-scan { position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .16) 0 2px, transparent 2px 4px); mix-blend-mode: overlay; pointer-events: none; }

/* ════════════ 18 · ORIGAMI-FALT ════════════ */
.demo-ue-fold .dm-ue-fold-scene { perspective: 1500px; }
.demo-ue-fold .dm-ue-fold-back { position: absolute; inset: 0; overflow: hidden; z-index: 1; }
.demo-ue-fold .dm-ue-fold-stack { position: absolute; inset: 0; display: flex; flex-direction: column; transform-style: preserve-3d; transform-origin: top center; z-index: 2; will-change: transform, opacity; }
.demo-ue-fold .dm-ue-fold-strip { flex: 1; background-size: 100% 600%; backface-visibility: hidden; will-change: transform; box-shadow: 0 1px 0 rgba(0, 0, 0, .35), 0 -1px 0 rgba(255, 255, 255, .04); }

/* ════════════ 19 · 3D-TIEFEN-TUNNEL ════════════ */
.demo-ue-tunnel .dm-ue-tunnel-scene { perspective: 900px; perspective-origin: 50% 50%; background: #04060c; }
.demo-ue-tunnel .dm-ue-tunnel-cam { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform; }
.demo-ue-tunnel .dm-ue-tunnel-panel { position: absolute; left: 50%; top: 50%; width: 56%; height: 60%; background-size: cover; background-position: center; border: 3px solid rgba(255, 255, 255, .14); border-radius: 12px; box-shadow: 0 30px 80px rgba(0, 0, 0, .6); will-change: opacity; }
.demo-ue-tunnel .dm-ue-tunnel-num { position: absolute; left: 14px; top: 10px; font-family: 'Oswald', sans-serif; font-size: 1.6rem; color: #fff; text-shadow: 0 2px 14px rgba(0, 0, 0, .7); }

/* ════════════ 20 · KINETISCHE TYPO ════════════ */
.demo-ue-kinetic .dm-ue-kinetic-panel { position: absolute; inset: 0; overflow: hidden; z-index: 2; will-change: transform; }
.demo-ue-kinetic .dm-ue-kinetic-bridge { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 1vh; pointer-events: none; opacity: 0; z-index: 5; mix-blend-mode: difference; }
.demo-ue-kinetic .dm-ue-kinetic-row { white-space: nowrap; font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 9vw; line-height: 1.04; text-transform: uppercase; color: #fff; will-change: transform; }
.demo-ue-kinetic .dm-ue-kinetic-rev { color: transparent; -webkit-text-stroke: 1.5px rgba(255, 255, 255, .85); }

/* ════════════ RESPONSIVE ════════════ */
@media (max-width: 720px) {
  .demo-ue-skew .dm-ue-skew-card { height: 40vh; }
  .demo-ue-textmask .dm-ue-textmask-word { font-size: 26vw; }
}

/* ════════════ REDUCED MOTION ════════════ */
@media (prefers-reduced-motion: reduce) {
  .prv-ue [class^="pue-"], .prv-ue [class*=" pue-"] { animation: none !important; }
  .prv-ue-doors .pue-door-l { transform: translateX(-30%); }
  .prv-ue-doors .pue-door-r { transform: translateX(30%); }
  .prv-ue-hinge .pue-hinge-door { transform: rotateY(-52deg); }
}