/** * Weltwechsel-Animation — Produktion (alexlamberti.ch). */ /* ── Overlay ── */ .welten-world-switch { position: fixed; inset: 0; z-index: 2147483645; display: grid; place-items: center; overflow: hidden; pointer-events: none; opacity: 0; visibility: hidden; transform: translateZ(0); backface-visibility: hidden; transition: opacity var(--wws-enter-duration, 420ms) cubic-bezier(0.22, 1, 0.36, 1), visibility var(--wws-enter-duration, 420ms) cubic-bezier(0.22, 1, 0.36, 1); will-change: opacity; } .welten-world-switch.is-entering, .welten-world-switch.is-exiting { opacity: 1; visibility: visible; pointer-events: all; } /* Blickdichter Cover-Zustand ab dem allerersten Paint (synchron per JS gesetzt, bevor der Browser layouten kann) — verhindert das Fade-von-0-Sichtfenster, in dem das darunterliegende Frame (oft Multiversum) kurz durchscheint. */ .welten-world-switch.is-covered { opacity: 1 !important; visibility: visible !important; pointer-events: all !important; transition: none !important; } .welten-world-switch.is-exiting { opacity: 0; transition-duration: var(--wws-exit-duration, 400ms); transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } .welten-world-switch__bg, .welten-world-switch__fx, .welten-world-switch__wipe, .welten-world-switch__canvas { position: absolute; inset: 0; pointer-events: none; } .welten-world-switch__canvas { z-index: 3; width: 100%; height: 100%; opacity: 1; } .welten-world-switch[data-world="nexora"] .welten-world-switch__canvas { filter: saturate(1.15); } .welten-world-switch[data-world="vertex"] .welten-world-switch__canvas { filter: saturate(0.85) contrast(1.05); } .welten-world-switch[data-world="freiraum"] .welten-world-switch__canvas { filter: saturate(1.12) contrast(1.04); opacity: 1; z-index: 4; background: transparent; } .welten-world-switch[data-world="freiraum"].wws-staged.is-entering .welten-world-switch__bg { opacity: 1; animation: wwsFreiraumBgPulse 2.8s ease-in-out infinite alternate; filter: saturate(1.28) brightness(1.06); } .welten-world-switch[data-world="freiraum"].wws-staged .welten-world-switch__fx { opacity: 0; pointer-events: none; } .welten-world-switch.wws-staged:not([data-world="vertex"]) .welten-world-switch__wipe { display: none; } .welten-world-switch[data-world="vertex"].wws-staged .welten-world-switch__wipe { display: none; } .welten-world-switch[data-world="vertex"].wws-staged.is-entering .wws-pro-wipe--white { display: block; animation: wwsProWipe var(--wws-pro-wipe-duration, 312ms) cubic-bezier(0.55, 0, 0.25, 1) forwards; } .welten-world-switch[data-world="vertex"].wws-staged.is-entering .wws-pro-wipe--black { display: block; animation: wwsProWipe var(--wws-pro-wipe-duration, 312ms) cubic-bezier(0.55, 0, 0.25, 1) var(--wws-pro-wipe-delay, 296ms) forwards; } .welten-world-switch[data-world="vertex"].wws-staged .welten-world-switch__canvas { display: none; } .welten-world-switch[data-world="vertex"].wws-staged .welten-world-switch__bg { background: #0a0a0a !important; transition: background-color 320ms cubic-bezier(0.4, 0, 0.2, 1); } .welten-world-switch[data-world="vertex"].wws-staged.wws--pro-white-bg .welten-world-switch__bg { background: #ffffff !important; } .welten-world-switch[data-world="vertex"].wws-staged.wws--pro-black-bg .welten-world-switch__bg { background: #0a0a0a !important; } .welten-world-switch[data-world="freiraum"].wws-staged .welten-world-switch__bg { background: radial-gradient(ellipse 88% 68% at 20% 16%, rgba(255, 47, 146, 0.12), transparent 50%), radial-gradient(ellipse 78% 58% at 80% 22%, rgba(0, 217, 196, 0.1), transparent 48%), radial-gradient(ellipse 72% 54% at 50% 84%, rgba(255, 155, 55, 0.08), transparent 46%), radial-gradient(ellipse 64% 48% at 70% 56%, rgba(155, 107, 255, 0.09), transparent 44%), linear-gradient(158deg, #12081a 0%, #1a0c22 40%, #140a1c 68%, #0e0614 100%) !important; } .welten-world-switch[data-world="freiraum"].wws-staged .welten-world-switch__fx .wws-orb, .welten-world-switch[data-world="freiraum"].wws-staged .welten-world-switch__fx .wws-splash { display: none !important; } .welten-world-switch[data-world="freiraum"].wws-staged .welten-world-switch__fx { display: block; pointer-events: none; } .welten-world-switch__content { position: relative; z-index: 4; text-align: center; padding: 24px; max-width: min(92vw, 480px); transform: translateY(8px) scale(0.94); opacity: 0; transition: transform var(--wws-title-fade-in, 300ms) cubic-bezier(0.22, 1, 0.36, 1), opacity var(--wws-title-fade-in, 300ms) ease; will-change: transform, opacity; } .welten-world-switch.is-entering .welten-world-switch__content { transform: translateY(0) scale(1); opacity: 1; } /* Gestaffelte Welten: Text erst nach Animation */ .welten-world-switch.wws-staged.is-entering .welten-world-switch__content { opacity: 0 !important; visibility: hidden; transform: scale(0.88); transition: none; } .welten-world-switch.wws-staged.wws--title-reveal .welten-world-switch__content { visibility: visible; opacity: 1 !important; transform: translateY(0) scale(1); transition: opacity var(--wws-title-fade-in, 300ms) cubic-bezier(0.22, 1, 0.36, 1), transform var(--wws-title-fade-in, 300ms) cubic-bezier(0.22, 1, 0.36, 1); } .welten-world-switch.wws-staged.wws--title-reveal .welten-world-switch__title { animation: wwsUnifiedTitleBorn var(--wws-title-fade-in, 300ms) cubic-bezier(0.22, 1, 0.36, 1) both; } @keyframes wwsUnifiedTitleBorn { 0% { opacity: 0; letter-spacing: 0.2em; filter: blur(8px); transform: scale(0.92); } 100% { opacity: 1; letter-spacing: 0.08em; filter: blur(0); transform: scale(1); } } .welten-world-switch.wws-staged.wws--title-reveal .welten-world-switch__kicker, .welten-world-switch.wws-staged.wws--title-reveal .welten-world-switch__sub, .welten-world-switch.wws-staged.wws--title-reveal .welten-world-switch__bar { animation: wwsFadeUp var(--wws-title-fade-in, 300ms) cubic-bezier(0.22, 1, 0.36, 1) 0.05s both; } .welten-world-switch[data-world="vertex"].wws-staged.wws--title-reveal .welten-world-switch__content { transition: opacity var(--wws-title-fade-in, 300ms) ease, transform var(--wws-title-fade-in, 300ms) ease; transform: none; } .welten-world-switch[data-world="vertex"].wws--title-reveal .welten-world-switch__title { animation: wwsUnifiedTitleBorn var(--wws-title-fade-in, 300ms) cubic-bezier(0.22, 1, 0.36, 1) both; opacity: 1; filter: none; letter-spacing: 0.14em; text-shadow: none; } .welten-world-switch[data-world="freiraum"].wws--title-reveal .welten-world-switch__content { z-index: 6; transition: opacity var(--wws-title-fade-in, 120ms) ease, transform var(--wws-title-fade-in, 120ms) ease; transform: none; } /* FREIRAUM-Titel: einfach erscheinen wie PROFESSIONAL, ohne Extra-Animation */ .welten-world-switch[data-world="freiraum"].wws--title-reveal .welten-world-switch__title { animation: none !important; opacity: 1; transform: none; background: linear-gradient(135deg, #ffe08a 0%, #ffd166 42%, #ff9b37 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; filter: drop-shadow(0 4px 16px rgba(255, 209, 102, 0.35)); letter-spacing: 0.1em; text-shadow: none; } .welten-world-switch[data-world="freiraum"].wws--title-reveal .welten-world-switch__kicker, .welten-world-switch[data-world="freiraum"].wws--title-reveal .welten-world-switch__sub, .welten-world-switch[data-world="freiraum"].wws--title-reveal .welten-world-switch__bar { animation: none !important; } .welten-world-switch[data-world="freiraum"].wws--title-reveal .welten-world-switch__sub { color: #4a3558 !important; } @keyframes wwsNexoraTitleBorn { 0% { opacity: 0; letter-spacing: 0.45em; filter: blur(12px); text-shadow: 0 0 80px rgba(101, 217, 255, 1); } 45% { opacity: 1; filter: blur(2px); text-shadow: 0 0 48px rgba(101, 217, 255, 0.9), 0 0 96px rgba(0, 140, 255, 0.5); } 100% { opacity: 1; letter-spacing: 0.08em; filter: blur(0); text-shadow: 0 0 24px rgba(101, 217, 255, 0.65), 0 0 64px rgba(0, 140, 255, 0.35); } } @keyframes wwsVertexTitleBorn { 0% { opacity: 0; letter-spacing: 0.42em; filter: blur(12px); text-shadow: 0 0 72px rgba(255, 255, 255, 0.95), 0 0 48px rgba(180, 180, 180, 0.55); } 45% { opacity: 1; filter: blur(2px); text-shadow: 0 0 36px rgba(255, 255, 255, 0.65), 0 0 24px rgba(120, 120, 120, 0.35); } 100% { opacity: 1; letter-spacing: 0.14em; filter: blur(0); text-shadow: none; } } @keyframes wwsFreiraumTitleBorn { 0% { opacity: 0; letter-spacing: 0.28em; filter: blur(12px) drop-shadow(0 0 28px rgba(255, 216, 106, 0.65)); transform: scale(0.9); } 28% { opacity: 1; letter-spacing: 0.1em; filter: blur(0) drop-shadow(0 6px 24px rgba(255, 209, 102, 0.5)); transform: scale(1.04); } 100% { opacity: 1; letter-spacing: 0.08em; filter: blur(0) drop-shadow(0 6px 24px rgba(255, 209, 102, 0.45)); transform: scale(1); } } @keyframes wwsFadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } .welten-world-switch.is-exiting .welten-world-switch__content { transform: translateY(-6px) scale(0.98); opacity: 0; transition-duration: var(--wws-title-fade-out, 300ms); } .welten-world-switch__kicker { margin: 0 0 0.65rem; font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; opacity: 0.72; } .welten-world-switch__title { margin: 0; font-size: clamp(2rem, 9vw, 3.2rem); line-height: 1; letter-spacing: 0.08em; font-weight: 800; } .welten-world-switch__sub { margin: 0.85rem 0 0; font-size: clamp(0.82rem, 2.5vw, 0.95rem); letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.78; } .welten-world-switch__bar { margin: clamp(1.25rem, 4vw, 1.75rem) auto 0; width: min(220px, 62vw); height: 3px; border-radius: 99px; overflow: hidden; background: rgba(255, 255, 255, 0.12); } .welten-world-switch__bar span { display: block; height: 100%; width: 0; border-radius: inherit; animation: wwsBarFill 0.72s cubic-bezier(0.22, 1, 0.36, 1) forwards; } @keyframes wwsBarFill { to { width: 100%; } } /* ── NEXORA — virtuell, neural, bewegt ── */ .welten-world-switch[data-world="nexora"] .welten-world-switch__bg { background: radial-gradient(ellipse 90% 70% at 50% 38%, rgba(112, 60, 255, 0.28), transparent 58%), radial-gradient(ellipse 65% 50% at 62% 62%, rgba(13, 240, 197, 0.14), transparent 55%), radial-gradient(ellipse 70% 55% at 50% 42%, rgba(0, 163, 255, 0.26), transparent 62%), linear-gradient(180deg, #02060f 0%, #050810 38%, #0b1220 68%, #02060f 100%); animation: wwsNexoraBgShift 4.5s ease-in-out infinite alternate; } .welten-world-switch[data-world="nexora"] .welten-world-switch__fx { z-index: 1; background-image: linear-gradient(rgba(101, 217, 255, 0.16) 1px, transparent 1px), linear-gradient(90deg, rgba(101, 217, 255, 0.16) 1px, transparent 1px), linear-gradient(rgba(112, 60, 255, 0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(112, 60, 255, 0.08) 1px, transparent 1px); background-size: 44px 44px, 44px 44px, 88px 88px, 88px 88px; mask-image: radial-gradient(ellipse 82% 72% at 50% 48%, black 12%, transparent 76%); animation: wwsNexoraGrid 5s linear infinite; } .welten-world-switch[data-world="nexora"] .wws-scanlines { position: absolute; inset: 0; z-index: 3; pointer-events: none; background: repeating-linear-gradient( 180deg, transparent 0, transparent 3px, rgba(101, 217, 255, 0.04) 3px, rgba(101, 217, 255, 0.04) 4px ); animation: wwsScanDrift 2.2s linear infinite; opacity: 0.65; } .welten-world-switch[data-world="nexora"] .wws-nexora-core { position: absolute; left: 50%; top: 42%; width: min(340px, 72vw); height: min(340px, 72vw); transform: translate(-50%, -50%); z-index: 1; pointer-events: none; } .welten-world-switch[data-world="nexora"] .wws-nexora-ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(101, 217, 255, 0.35); box-shadow: 0 0 24px rgba(101, 217, 255, 0.25), inset 0 0 40px rgba(0, 140, 255, 0.08); } .welten-world-switch[data-world="nexora"] .wws-nexora-ring--1 { animation: wwsRingSpin 6s linear infinite; } .welten-world-switch[data-world="nexora"] .wws-nexora-ring--2 { inset: 14%; border-color: rgba(112, 60, 255, 0.42); animation: wwsRingSpin 9s linear infinite reverse; } .welten-world-switch[data-world="nexora"] .wws-nexora-ring--3 { inset: 28%; border-color: rgba(13, 240, 197, 0.38); animation: wwsRingSpin 12s linear infinite; } .welten-world-switch[data-world="nexora"] .wws-nexora-ring--1::before, .welten-world-switch[data-world="nexora"] .wws-nexora-ring--2::before { content: ""; position: absolute; width: 8px; height: 8px; border-radius: 50%; background: #65d9ff; box-shadow: 0 0 16px #65d9ff, 0 0 32px rgba(101, 217, 255, 0.6); top: -4px; left: 50%; transform: translateX(-50%); } .welten-world-switch[data-world="nexora"] .wws-nexora-ring--2::before { background: #703cff; box-shadow: 0 0 16px #703cff; top: auto; bottom: -4px; } .welten-world-switch[data-world="nexora"] .wws-data-beam { position: absolute; width: 2px; height: 40%; top: -20%; background: linear-gradient(180deg, transparent, rgba(101, 217, 255, 0.85), transparent); filter: blur(0.5px); animation: wwsDataBeam 2.4s ease-in-out infinite; opacity: 0.7; } .welten-world-switch[data-world="nexora"] .wws-data-beam--1 { left: 18%; animation-delay: 0s; } .welten-world-switch[data-world="nexora"] .wws-data-beam--2 { left: 42%; animation-delay: 0.6s; height: 55%; } .welten-world-switch[data-world="nexora"] .wws-data-beam--3 { left: 68%; animation-delay: 1.1s; } .welten-world-switch[data-world="nexora"] .wws-data-beam--4 { left: 86%; animation-delay: 0.3s; height: 48%; } .welten-world-switch[data-world="nexora"].wws-staged .welten-world-switch__content { display: none !important; } .welten-world-switch[data-world="nexora"] .welten-world-switch__content { z-index: 5; } .welten-world-switch[data-world="nexora"] .welten-world-switch__kicker { color: rgba(13, 240, 197, 0.9); animation: wwsNexoraFlicker 3s ease-in-out infinite; } .welten-world-switch[data-world="nexora"] .welten-world-switch__sub { color: rgba(180, 230, 255, 0.88); } .welten-world-switch[data-world="nexora"].wws--title-reveal .welten-world-switch__title { color: #fff; text-shadow: 0 0 12px rgba(101, 217, 255, 0.9), 0 0 36px rgba(0, 140, 255, 0.55), 0 0 72px rgba(112, 60, 255, 0.35); animation: wwsUnifiedTitleBorn var(--wws-title-fade-in, 300ms) cubic-bezier(0.22, 1, 0.36, 1) both; position: relative; } .welten-world-switch[data-world="nexora"] .welten-world-switch__title::after { content: attr(data-text); position: absolute; left: 0; right: 0; top: 0; color: rgba(101, 217, 255, 0.45); clip-path: inset(0 0 55% 0); animation: wwsNexoraGlitch 2.8s steps(2, end) infinite; pointer-events: none; } .welten-world-switch[data-world="nexora"] .welten-world-switch__title { position: relative; } .welten-world-switch[data-world="nexora"] .welten-world-switch__bar { box-shadow: 0 0 20px rgba(101, 217, 255, 0.25); } .welten-world-switch[data-world="nexora"] .welten-world-switch__bar span { background: linear-gradient(90deg, #008cff, #65d9ff, #703cff, #0df0c5, #008cff); background-size: 200% 100%; box-shadow: 0 0 22px rgba(101, 217, 255, 0.65); animation: wwsBarFill 0.85s cubic-bezier(0.22, 1, 0.36, 1) forwards, wwsNexoraBarShine 1.2s linear infinite; } @keyframes wwsNexoraBgShift { from { filter: hue-rotate(0deg) brightness(1); } to { filter: hue-rotate(12deg) brightness(1.08); } } @keyframes wwsNexoraGrid { from { background-position: 0 0, 0 0, 0 0, 0 0; } to { background-position: 44px 44px, 44px 44px, 88px 88px, 88px 88px; } } @keyframes wwsScanDrift { from { transform: translateY(0); } to { transform: translateY(8px); } } @keyframes wwsRingSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes wwsDataBeam { 0% { transform: translateY(-10%) scaleY(0.6); opacity: 0.2; } 45% { opacity: 0.95; } 100% { transform: translateY(130%) scaleY(1); opacity: 0; } } @keyframes wwsNexoraTitleGlow { from { letter-spacing: 0.06em; filter: brightness(1); } to { letter-spacing: 0.12em; filter: brightness(1.12); } } @keyframes wwsNexoraGlitch { 0%, 92%, 100% { transform: translate(0); opacity: 0; } 93% { transform: translate(-3px, 1px); opacity: 0.7; } 95% { transform: translate(2px, -1px); opacity: 0.5; } 97% { transform: translate(-1px, 0); opacity: 0.35; } } @keyframes wwsNexoraFlicker { 0%, 100% { opacity: 0.85; } 50% { opacity: 1; } 52% { opacity: 0.65; } 54% { opacity: 1; } } @keyframes wwsNexoraBarShine { from { background-position: 0% 50%; } to { background-position: 200% 50%; } } /* ── PROFESSIONAL ── */ .welten-world-switch[data-world="vertex"] .welten-world-switch__bg { background: linear-gradient(165deg, #ffffff 0%, #f4f2ee 42%, #e8e8e8 100%); } .welten-world-switch[data-world="vertex"] .welten-world-switch__wipe { transform-origin: left center; transform: scaleX(0); } .welten-world-switch[data-world="vertex"] .wws-pro-wipe--white { background: #ffffff; z-index: 2; } .welten-world-switch[data-world="vertex"] .wws-pro-wipe--black { background: #0a0a0a; z-index: 3; } .welten-world-switch[data-world="vertex"].is-exiting .wws-pro-wipe--black { transform-origin: right center; animation: wwsProWipeOut var(--wws-title-fade-out, 300ms) cubic-bezier(0.65, 0, 0.35, 1) forwards; } .welten-world-switch[data-world="vertex"].is-exiting .wws-pro-wipe--white { display: none; } .welten-world-switch[data-world="vertex"] .welten-world-switch__fx::before, .welten-world-switch[data-world="vertex"] .welten-world-switch__fx::after { content: ""; position: absolute; left: 8%; right: 8%; height: 1px; background: rgba(0, 0, 0, 0.12); } .welten-world-switch[data-world="vertex"] .welten-world-switch__fx::before { top: 22%; } .welten-world-switch[data-world="vertex"] .welten-world-switch__fx::after { bottom: 22%; } .welten-world-switch[data-world="vertex"] .welten-world-switch__kicker { color: rgba(17, 17, 17, 0.55); } .welten-world-switch[data-world="vertex"] .welten-world-switch__title { color: #111; letter-spacing: 0.14em; font-weight: 700; } .welten-world-switch[data-world="vertex"] .welten-world-switch__sub { color: rgba(17, 17, 17, 0.62); } .welten-world-switch[data-world="vertex"] .welten-world-switch__bar { background: rgba(0, 0, 0, 0.08); } .welten-world-switch[data-world="vertex"] .welten-world-switch__bar span { background: #111; } @keyframes wwsProWipe { to { transform: scaleX(1); } } @keyframes wwsProWipeOut { from { transform: scaleX(1); } to { transform: scaleX(0); } } .welten-world-switch[data-world="vertex"] .welten-world-switch__content { transition: color 0.25s ease; } .welten-world-switch[data-world="vertex"].wws--dark-text .welten-world-switch__title { color: #fff !important; text-shadow: none; } .welten-world-switch[data-world="vertex"].wws--title-reveal.wws--dark-text .welten-world-switch__title, .welten-world-switch[data-world="vertex"].wws--title-reveal .welten-world-switch__title { color: #fff !important; } .welten-world-switch[data-world="nexora"] .welten-world-switch__canvas { z-index: 5; } .welten-world-switch[data-world="nexora"].wws--title-reveal .welten-world-switch__content { z-index: 6; } /* ── FREIRAUM — farbig, lebendig, kreativ ── */ .welten-world-switch[data-world="general"] .welten-world-switch__canvas { opacity: 1; } .welten-world-switch[data-world="general"].wws-staged .welten-world-switch__bg { background: radial-gradient(ellipse 80% 60% at 50% 40%, rgba(155, 107, 255, 0.35) 0%, transparent 55%), radial-gradient(ellipse 60% 50% at 30% 70%, rgba(255, 89, 178, 0.28) 0%, transparent 50%), radial-gradient(ellipse 55% 45% at 75% 25%, rgba(94, 196, 255, 0.25) 0%, transparent 48%), linear-gradient(160deg, #05070d 0%, #12081f 35%, #1a0a2e 65%, #05070d 100%); } .welten-world-switch[data-world="general"].wws-staged .welten-world-switch__fx { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; } .welten-world-switch[data-world="general"].wws-staged .welten-world-switch__fx::before, .welten-world-switch[data-world="general"].wws-staged .welten-world-switch__fx::after { content: ""; position: absolute; left: 50%; top: 42%; width: min(68vw, 400px); height: min(68vw, 400px); transform: translate(-50%, -50%); border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.18); pointer-events: none; } .welten-world-switch[data-world="general"].wws-staged .welten-world-switch__fx::before { animation: wwsGeneralPortal var(--wws-effect-duration, 800ms) ease-out forwards; box-shadow: 0 0 60px rgba(255, 89, 178, 0.35), inset 0 0 40px rgba(94, 196, 255, 0.15); } .welten-world-switch[data-world="general"].wws-staged .welten-world-switch__fx::after { width: min(52vw, 300px); height: min(52vw, 300px); border-color: rgba(94, 196, 255, 0.35); animation: wwsGeneralPortalInner var(--wws-effect-duration, 800ms) ease-out 0.08s forwards; } .welten-world-switch[data-world="general"].wws--title-reveal .welten-world-switch__title { background: linear-gradient( 120deg, #5ec4ff 0%, #9b6bff 22%, #ff59b2 48%, #ff9b37 72%, #ffd86a 100% ); background-size: 220% 220%; -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 8px 28px rgba(255, 89, 178, 0.4)); animation: wwsMultiversumTitleBorn var(--wws-title-fade-in, 520ms) cubic-bezier(0.18, 1, 0.32, 1) both, wwsGeneralTitleShift 2.4s ease-in-out infinite alternate; } @keyframes wwsMultiversumTitleBorn { 0% { opacity: 0; letter-spacing: 0.42em; filter: blur(16px) drop-shadow(0 0 48px rgba(255, 255, 255, 0.95)); transform: scale(0.84); } 40% { opacity: 0.85; letter-spacing: 0.22em; filter: blur(6px) drop-shadow(0 0 32px rgba(255, 89, 178, 0.75)); transform: scale(1.04); } 100% { opacity: 1; letter-spacing: 0.08em; filter: blur(0) drop-shadow(0 8px 28px rgba(255, 89, 178, 0.4)); transform: scale(1); } } @keyframes wwsGeneralPortal { 0% { transform: translate(-50%, -50%) scale(0.12); opacity: 0; } 40% { opacity: 0.55; } 72% { opacity: 1; } 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.88; } } @keyframes wwsGeneralPortalInner { 0% { transform: translate(-50%, -50%) scale(0.08); opacity: 0; } 45% { opacity: 0.65; } 78% { opacity: 1; } 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.74; } } @keyframes wwsGeneralTitleShift { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } } .welten-world-switch[data-world="freiraum"] .welten-world-switch__bg { background: radial-gradient(ellipse 85% 65% at 18% 22%, rgba(255, 47, 146, 0.22), transparent 50%), radial-gradient(ellipse 75% 58% at 82% 20%, rgba(0, 217, 196, 0.16), transparent 48%), radial-gradient(ellipse 70% 55% at 55% 78%, rgba(255, 155, 55, 0.14), transparent 46%), radial-gradient(ellipse 62% 48% at 72% 62%, rgba(155, 107, 255, 0.18), transparent 44%), linear-gradient(148deg, #0c0612 0%, #160a20 42%, #12081a 100%); animation: wwsFreiraumBgPulse 3.6s ease-in-out infinite alternate; } .welten-world-switch[data-world="freiraum"] .welten-world-switch__fx { z-index: 1; } .welten-world-switch[data-world="freiraum"] .welten-world-switch__fx .wws-orb { position: absolute; border-radius: 50%; filter: blur(36px); opacity: 0.82; mix-blend-mode: screen; } .welten-world-switch[data-world="freiraum"] .wws-orb--1 { width: 48vw; height: 48vw; max-width: 320px; max-height: 320px; left: -12%; top: 10%; background: #ff7a00; animation: wwsOrbDrift1 2.4s ease-in-out infinite alternate; } .welten-world-switch[data-world="freiraum"] .wws-orb--2 { width: 40vw; height: 40vw; max-width: 270px; max-height: 270px; right: -10%; top: 22%; background: #ff2f92; animation: wwsOrbDrift2 2.8s ease-in-out infinite alternate; } .welten-world-switch[data-world="freiraum"] .wws-orb--3 { width: 44vw; height: 44vw; max-width: 300px; max-height: 300px; left: 22%; bottom: 2%; background: #ffc400; animation: wwsOrbDrift3 3.1s ease-in-out infinite alternate; } .welten-world-switch[data-world="freiraum"] .wws-orb--4 { width: 32vw; height: 32vw; max-width: 210px; max-height: 210px; right: 18%; bottom: 12%; background: #1db7ff; animation: wwsOrbDrift1 2.6s ease-in-out infinite alternate-reverse; } .welten-world-switch[data-world="freiraum"] .wws-orb--5 { width: 26vw; height: 26vw; max-width: 170px; max-height: 170px; left: 48%; top: 48%; background: #7b4dff; animation: wwsOrbDrift2 2.2s ease-in-out infinite alternate; } .welten-world-switch[data-world="freiraum"] .wws-orb--6 { width: 22vw; height: 22vw; max-width: 150px; max-height: 150px; right: 42%; top: 8%; background: #ff8bbd; animation: wwsOrbDrift3 2.5s ease-in-out infinite alternate-reverse; } .welten-world-switch[data-world="freiraum"] .wws-splash { position: absolute; z-index: 1; opacity: 0.55; mix-blend-mode: screen; filter: blur(1px); } .welten-world-switch[data-world="freiraum"] .wws-splash--1 { width: 28vw; height: 22vw; max-width: 200px; max-height: 160px; left: 8%; top: 55%; background: radial-gradient(ellipse, #ff7a00 0%, transparent 68%); border-radius: 62% 38% 58% 42% / 48% 52% 44% 56%; animation: wwsSplashSpin 5.5s linear infinite; } .welten-world-switch[data-world="freiraum"] .wws-splash--2 { width: 32vw; height: 26vw; max-width: 230px; max-height: 180px; right: 6%; top: 48%; background: radial-gradient(ellipse, #ff2f92 0%, transparent 70%); border-radius: 44% 56% 38% 62% / 55% 45% 60% 40%; animation: wwsSplashSpin 7s linear infinite reverse; } .welten-world-switch[data-world="freiraum"] .wws-splash--3 { width: 24vw; height: 30vw; max-width: 180px; max-height: 200px; left: 38%; top: 12%; background: radial-gradient(ellipse, #1db7ff 0%, transparent 72%); border-radius: 48% 52% 62% 38% / 42% 58% 46% 54%; animation: wwsSplashSpin 6.2s linear infinite; } .welten-world-switch[data-world="freiraum"] .wws-splash--4 { width: 20vw; height: 20vw; max-width: 140px; max-height: 140px; right: 30%; bottom: 8%; background: radial-gradient(ellipse, #ffc400 0%, transparent 65%); border-radius: 55% 45% 50% 50% / 60% 40% 55% 45%; animation: wwsSplashSpin 4.8s linear infinite reverse; } .welten-world-switch[data-world="freiraum"] .welten-world-switch__content { z-index: 5; } .welten-world-switch[data-world="freiraum"] .welten-world-switch__kicker { color: rgba(255, 248, 239, 0.88); animation: wwsFreiraumKicker 2s ease-in-out infinite alternate; } .welten-world-switch[data-world="freiraum"] .welten-world-switch__title { background: linear-gradient(135deg, #ffe08a 0%, #ffd166 42%, #ff9b37 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; filter: drop-shadow(0 6px 24px rgba(255, 209, 102, 0.45)); letter-spacing: 0.08em; font-weight: 800; } .welten-world-switch[data-world="freiraum"] .welten-world-switch__sub { color: rgba(255, 248, 239, 0.9); } .welten-world-switch[data-world="freiraum"] .welten-world-switch__bar { background: rgba(255, 255, 255, 0.18); height: 4px; } .welten-world-switch[data-world="freiraum"] .welten-world-switch__bar span { background: linear-gradient(90deg, #ff7a00, #ff2f92, #ffc400, #1db7ff, #7b4dff, #ff7a00); background-size: 250% 100%; animation: wwsBarFill 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards, wwsFreiraumBarFlow 1.4s linear infinite; box-shadow: 0 0 16px rgba(255, 111, 174, 0.5); } @keyframes wwsFreiraumBgPulse { from { transform: scale(1); filter: saturate(1); } to { transform: scale(1.04); filter: saturate(1.2); } } @keyframes wwsOrbDrift1 { from { transform: translate(0, 0) scale(1) rotate(0deg); } to { transform: translate(28px, -22px) scale(1.14) rotate(12deg); } } @keyframes wwsOrbDrift2 { from { transform: translate(0, 0) scale(1); } to { transform: translate(-24px, 18px) scale(1.1) rotate(-10deg); } } @keyframes wwsOrbDrift3 { from { transform: translate(0, 0) scale(1); } to { transform: translate(16px, 26px) scale(1.12) rotate(8deg); } } @keyframes wwsSplashSpin { from { transform: rotate(0deg) scale(1); } to { transform: rotate(360deg) scale(1.08); } } @keyframes wwsFreiraumTitleShift { from { background-position: 0% 50%; letter-spacing: 0.04em; } to { background-position: 100% 50%; letter-spacing: 0.1em; } } @keyframes wwsFreiraumKicker { from { opacity: 0.72; transform: translateY(0); } to { opacity: 1; transform: translateY(-2px); } } @keyframes wwsFreiraumBarFlow { from { background-position: 0% 50%; } to { background-position: 250% 50%; } } html.welten-world-switch-lock { overflow: hidden; } html.welten-world-switch-lock body { overflow: hidden; } html.welten-world-switch-lock .mv4-bar, html.welten-world-switch-lock .mv4-bar button, html.welten-world-switch-lock .mv4-flag { pointer-events: auto !important; touch-action: manipulation; position: relative; z-index: 2147483647 !important; } /* Mobile & Tablet: Safe-Area, kompaktere Typo */ @media (max-width: 1024px) { .welten-world-switch__content { padding: calc(16px + env(safe-area-inset-top, 0px)) 16px calc(16px + env(safe-area-inset-bottom, 0px)); max-width: min(94vw, 420px); } .welten-world-switch__canvas { opacity: 0.94; } .welten-world-switch__title { font-size: clamp(1.65rem, 8.5vw, 2.6rem); letter-spacing: 0.06em; } .welten-world-switch__kicker { font-size: 0.65rem; letter-spacing: 0.18em; } .welten-world-switch__sub { font-size: clamp(0.75rem, 2.2vw, 0.88rem); letter-spacing: 0.1em; } } @media (max-width: 640px) { .welten-world-switch__title { font-size: clamp(1.45rem, 9.5vw, 2.2rem); letter-spacing: 0.04em; } .welten-world-switch__bar { width: min(180px, 70vw); } .welten-world-switch[data-world="freiraum"] .wws-orb, .welten-world-switch[data-world="freiraum"] .wws-splash { opacity: 0.85; } } @media (prefers-reduced-motion: reduce) { .welten-world-switch, .welten-world-switch__content, .welten-world-switch__fx, .welten-world-switch__wipe, .welten-world-switch__bar span, .wws-nexora-ring, .wws-data-beam, .wws-scanlines, .wws-orb, .wws-splash { animation: none !important; transition-duration: 0.01ms !important; } .welten-world-switch__canvas { display: none; } .welten-world-switch__bar span { width: 100%; } }