/* ========================================================================== Pokémon Legenden Z‑A — custom.dev.css Author: Dein Copilot Date: 2025-10-19 09:18 Description: - Optimierte, kommentierte Dev-Styles im strukturierten Block-Stil - Bootstrap-kompatibel (keine globalen Resets, selektor-spezifisch) - Gleiche Logik wie bisher, aufgeräumt & ohne doppelte Keyframes - Mobile/iPhone Fixes (Safe-Area, Icon-Alignment) - Barrierefreiheit: prefers-reduced-motion ========================================================================== */ /* ========================================================================== 1) THEME VARIABLES -------------------------------------------------------------------------- */ :root { /* Primärfarben */ --accent: #7e4bdc; --accent2: #56e4ff; /* Glows & Schatten */ --glow-soft: 0 0 10px rgba(86,228,255,0.25); --glow-strong: 0 0 22px rgba(86,228,255,0.45); --shadow-card: 0 0 18px rgba(86,228,255,0.08); /* Oberflächen */ --glass-bg: rgba(10,12,28,.55); --glass-bg-strong: rgba(10,12,28,.75); /* Rounding */ --radius-md: 12px; --radius-lg: 14px; /* Scan & Holo */ --scan-c1: rgba(86,228,255,0.25); --scan-c2: rgba(126,75,220,0.25); /* Toolbar */ --toolbar-bg: rgba(20, 24, 45, 0.35); --toolbar-border: rgba(255, 255, 255, 0.08); /* iOS notch / safe area */ --safe-right: env(safe-area-inset-right, 0px); } /* ========================================================================== 2) BASE LAYOUT / UTILITIES -------------------------------------------------------------------------- */ html, body { background: #000; overscroll-behavior: none; } body { background: radial-gradient(1200px 600px at 50% -10%, #0e1024, #05060f 60%, #000 100%) fixed; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .gradient-text { background: linear-gradient(90deg, var(--accent), var(--accent2)); -webkit-background-clip: text; background-clip: text; color: transparent; } /* Glass helper (e.g., navbar) */ .glass-blur { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); background: var(--glass-bg); border-bottom: 1px solid rgba(255,255,255,.08); } /* Performance hint for complex components */ *, *::before, *::after { backface-visibility: hidden; } /* ========================================================================== 3) BADGES (Pokémon Typen) -------------------------------------------------------------------------- */ .badge-type { border: 1px solid rgba(255,255,255,.2); } .badge-normal { background: linear-gradient(90deg, #c6c6a7, #bfbf8c); } .badge-kampf { background: linear-gradient(90deg, #c03028, #ff4b4b); } .badge-flug { background: linear-gradient(90deg, #a9d3ff, #7fb2ff); } .badge-gift { background: linear-gradient(90deg, #b255d3, #7e4bdc); } .badge-boden { background: linear-gradient(90deg, #e2bf65, #d9a441); } .badge-gestein{ background: linear-gradient(90deg, #b8a038, #e0c068); } .badge-kaefer { background: linear-gradient(90deg, #a8b820, #d8e030); } .badge-geist { background: linear-gradient(90deg, #705898, #a087c9); } .badge-stahl { background: linear-gradient(90deg, #b8b8d0, #cfd2e0); } .badge-feuer { background: linear-gradient(90deg, #ff7a45, #ff3d3d); } .badge-wasser { background: linear-gradient(90deg, #4db6ff, #2aa6ff); } .badge-pflanze{ background: linear-gradient(90deg, #6bdc6b, #2fbf71); } .badge-elektro{ background: linear-gradient(90deg, #ffd43b, #ffb100); } .badge-psycho { background: linear-gradient(90deg, #f85888, #ff5db1); } .badge-eis { background: linear-gradient(90deg, #98d8d8, #7dd7ff); } .badge-drache { background: linear-gradient(90deg, #7038f8, #9b55ff); } .badge-unlicht{ background: linear-gradient(90deg, #705848, #9a7360); } .badge-fee { background: linear-gradient(90deg, #ee99ac, #ffb6d9); } /* ========================================================================== 4) BRAND / NAVBAR -------------------------------------------------------------------------- */ .navbar-brand { display: flex; align-items: center; gap: .2rem !important; padding: .25rem 0; } @media (max-width: 768px) { .navbar-brand { gap: .1rem !important; } } .brand-logo { height: 60px; width: auto; object-fit: contain; display: block; filter: drop-shadow(0 0 10px rgba(126, 75, 220, 0.7)) drop-shadow(0 0 18px rgba(86, 228, 255, 0.6)); transition: transform .25s ease, filter .25s ease; } .navbar-brand:hover .brand-logo { transform: scale(1.08); filter: drop-shadow(0 0 20px rgba(86, 228, 255, 0.9)) drop-shadow(0 0 28px rgba(126, 75, 220, 0.8)); } .brand-text { font-size: 1.55rem; letter-spacing: .02rem; line-height: 1; background: linear-gradient(90deg, var(--accent), var(--accent2)); -webkit-background-clip: text; background-clip: text; color: transparent; user-select: none; } @media (max-width: 768px) { .brand-logo { height: 48px; } .brand-text { font-size: 1.3rem; } } .navbar-nav .nav-link { position:relative; color:rgba(255,255,255,.8); font-weight:500; transition: color .25s ease, transform .25s ease; padding:.5rem .8rem; } .navbar-nav .nav-link:hover, .navbar-nav .nav-link:focus { color: var(--accent2); transform: translateY(-1px); text-shadow: 0 0 6px var(--accent2), 0 0 12px var(--accent); } .navbar-nav .nav-link.active { color: var(--accent); text-shadow: 0 0 10px var(--accent), 0 0 20px var(--accent2); } .navbar-nav .nav-link::after { content:''; position:absolute; left:0; bottom:0; width:0%; height:2px; background: linear-gradient(90deg, var(--accent), var(--accent2)); box-shadow: 0 0 8px var(--accent2); transition: width .3s ease; border-radius:2px; } .navbar-nav .nav-link:hover::after, .navbar-nav .nav-link.active::after { width:100%; } @media (max-width:768px){ .navbar-nav .nav-link { padding:.6rem 1rem; font-size:1.05rem; } } /* ========================================================================== 5) PORTAL LOADER (ZA) -------------------------------------------------------------------------- */ #page-loader { position: fixed; inset: 0; width:100%; height:100dvh; min-height:100svh; background: radial-gradient(circle at center, #06071a 0%, #000 90%); display:flex; align-items:center; justify-content:center; z-index: 9999; overflow:hidden; transition: opacity .8s ease, visibility .8s ease, background 1s ease; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); overscroll-behavior: none; touch-action: none; --loader-brightness: 1; filter: brightness(var(--loader-brightness)); } #page-loader.hidden { opacity:0; visibility:hidden; pointer-events:none; } #page-loader.active { background: radial-gradient(circle at center, rgba(30, 40, 90, 1) 0%, #000 90%); } #page-loader.glass-active{ --loader-brightness:.8; background: radial-gradient(circle at center, #040416 0%, #000 90%); -webkit-backdrop-filter: blur(24px) brightness(0.9); backdrop-filter: blur(24px) brightness(0.9); } .loader-logo img { height:110px; width:auto; animation: spinPortal 2.6s ease-in-out infinite, hueShift 6s linear infinite; filter: drop-shadow(0 0 12px rgba(126, 75, 220, 0.8)) drop-shadow(0 0 28px rgba(86, 228, 255, 0.8)); transition: transform .4s ease, filter .4s ease; } #page-loader::before { content:""; position:absolute; inset:0; background: radial-gradient(circle at 50% 50%, rgba(86,228,255,0.25) 0%, rgba(126,75,220,0.15) 30%, transparent 80%); opacity:0; transform: scale(.8); transition: opacity .6s ease, transform 1s ease; pointer-events:none; } #page-loader.portal-anim::before { opacity:1; transform: scale(2.2); } #page-loader.portal-anim .loader-logo img { animation: spinPortal 1.8s ease-in-out infinite, hueShift 4s linear infinite, portalZoom .8s ease forwards; } #page-loader.entry-anim { opacity:1; visibility:visible; background: radial-gradient(circle at center, #06071a 0%, #000 90%); animation: portalEntryBg .9s ease forwards; } #page-loader.entry-anim .loader-logo img { animation: portalEntryLogo .9s ease forwards, hueShift 4s linear infinite; } #page-loader.entry-anim::before { opacity:.6; transform: scale(2.5); animation: portalEntryWave .9s ease forwards; } /* ========================================================================== 6) AURORA CARDS (generic) — .card-glass -------------------------------------------------------------------------- */ .card-glass { position: relative; border-radius: var(--radius-md); overflow:hidden; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12); box-shadow: var(--shadow-card); transition: transform .3s ease, box-shadow .3s ease, filter .3s ease; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); perspective: 1000px; transform-style: preserve-3d; will-change: transform, box-shadow, filter; } .card-glass::before { content:""; position:absolute; inset:-2px; z-index:0; border-radius:inherit; background: linear-gradient(120deg, var(--accent), var(--accent2), var(--accent), #fff, var(--accent2), var(--accent)); background-size: 300% 300%; animation: cardAurora 12s linear infinite; opacity:.25; filter: blur(8px); } .card-glass::after { content:""; position:absolute; inset:0; border-radius:inherit; z-index:1; background: radial-gradient(circle at 30% 30%, rgba(126,75,220,0.08), rgba(86,228,255,0.05), transparent 70%); } .card-glass > * { position:relative; z-index:2; } .card-glass:hover { transform: translateY(-4px) scale(1.02); box-shadow: 0 0 25px rgba(126,75,220,0.4), 0 0 50px rgba(86,228,255,0.25); } .card-glass:hover::before { opacity:.45; filter: blur(6px); } /* Scroll-Reveal (Klasse wird per JS gesetzt) */ .card-glass.revealed { animation: auroraReveal 1.4s ease-out forwards; } /* ========================================================================== 7) POKÉDEX CARDS — .card-dex + Scan/Holo -------------------------------------------------------------------------- */ .card-dex { position:relative; padding:1.2rem; border-radius: var(--radius-lg); background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); box-shadow: var(--shadow-card); overflow:hidden; transition: all .4s ease; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .card-dex:hover { transform: translateY(-4px) scale(1.02); box-shadow: 0 0 25px rgba(86,228,255,0.2), 0 0 40px rgba(126,75,220,0.2); } /* Bildbereich */ .dex-img-wrap { background: radial-gradient(circle at 50% 30%, rgba(126,75,220,0.15), rgba(86,228,255,0.1)); border-radius:10px; overflow:hidden; aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; transition: transform .3s ease; } .dex-img { max-width:100%; max-height:100%; filter: drop-shadow(0 0 12px rgba(86,228,255,0.5)); transition: transform .4s ease, filter .4s ease, opacity .4s ease, filter .4s ease; opacity:0; transform: scale(.92); filter: blur(6px) brightness(.6); } .card-dex:hover .dex-img { transform: scale(1.08); filter: drop-shadow(0 0 20px rgba(126,75,220,0.8)); } /* Scan-Overlay (über allem) */ .card-dex::after { content:""; position:absolute; top:-100%; left:0; width:100%; height:120%; background: linear-gradient(to bottom, rgba(86,228,255,0) 0%, var(--scan-c1) 40%, var(--scan-c2) 60%, rgba(126,75,220,0) 100%); opacity:0; pointer-events:none; transform: translateY(-100%); z-index:5; } /* Inhalte unter das Overlay legen */ .card-dex > *, .dex-img, .dex-img-wrap { position:relative; z-index:2; } /* Auto-Scan (per JS: .auto-scan 1x beim Sichtkontakt) */ .card-dex:hover::after, .card-dex.auto-scan::after { opacity:1; animation: scanSweep 1.4s cubic-bezier(.45,0,.55,1) forwards; } /* Sichtbarkeit nach Materialize (per JS Klasse .za-seen) */ .dex-img.za-seen { opacity:1 !important; transform: scale(1) !important; filter: blur(0) brightness(1) !important; transition: opacity .6s ease, transform .6s ease, filter .6s ease; } /* === Dual Holo-Scan Layer === */ .card-dex .dual-scan { position: absolute; top: -100%; left: 0; width: 100%; height: 120%; background: linear-gradient( to bottom, rgba(86,228,255,0) 0%, rgba(86,228,255,0.25) 40%, rgba(126,75,220,0.25) 60%, rgba(126,75,220,0) 100% ); opacity: 0; pointer-events: none; z-index: 6; } /* Zweiter Lichtstrahl mit leicht versetztem Farbton */ .card-dex .dual-scan::after { content: ""; position: absolute; top: -100%; left: 0; width: 100%; height: 120%; background: linear-gradient( to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.18) 50%, rgba(255,255,255,0) 100% ); mix-blend-mode: screen; opacity: 0; } /* Aktiviert durch JS */ .card-dex .dual-scan.active { opacity: 1; animation: dualScanSweep 1.6s cubic-bezier(0.45, 0, 0.55, 1) forwards; } .card-dex .dual-scan.active::after { opacity: 1; animation: dualScanSweep 1.8s cubic-bezier(0.45, 0, 0.55, 1) forwards; } /* === Modul 4: Mikroskopisches Scan-Grid === */ .card-dex .scan-grid { position: absolute; inset: 0; background-image: linear-gradient(90deg, rgba(126,75,220,0.07) 1px, transparent 1px), linear-gradient(0deg, rgba(86,228,255,0.07) 1px, transparent 1px); background-size: 6px 6px; /* feines Raster */ mix-blend-mode: overlay; opacity: 0; transform: scale(1.02); pointer-events: none; z-index: 4; /* unter Scan-Licht, über Bild */ } /* Aktiviert beim Scan */ .card-dex.auto-scan .scan-grid { opacity: 0.6; animation: scanGridShift 1.6s linear forwards; } /* --- Separater Analyse-Balken (eigenes Kind) --- */ .card-dex .scan-bar{ position:absolute; bottom:0; left:0; height:3px; width:0; border-radius:2px; background: linear-gradient(90deg, var(--accent), var(--accent2), var(--accent)); box-shadow: 0 0 10px var(--accent2), 0 0 25px var(--accent); opacity:0; z-index:6; /* über Content, unter Menüleisten */ pointer-events:none; } /* Aktiv bei Hover & Auto-Scan */ .card-dex:hover .scan-bar, .card-dex.auto-scan .scan-bar{ opacity:1; animation: scanBar 1.4s ease-out forwards; } /* ========================================================================== 15) POKÉDEX MODULE 5 — SPAWN / MATERIALIZE EFFECT -------------------------------------------------------------------------- */ /* Karten erscheinen mit Energie-Impulse beim ersten Sichtkontakt */ .card-dex.za-materialize { opacity: 0; transform: scale(0.92); filter: blur(8px) brightness(0.6); animation: dexMaterialize 1.2s cubic-bezier(.22,1,.36,1) forwards; } /* --- Keyframes --- */ @keyframes dexMaterialize { 0% { opacity: 0; transform: scale(0.8); filter: blur(12px) brightness(0.4); box-shadow: 0 0 0 rgba(0,0,0,0); } 30% { opacity: 1; transform: scale(1.05); filter: blur(4px) brightness(1.4); box-shadow: 0 0 25px rgba(126,75,220,0.3), 0 0 40px rgba(86,228,255,0.25); } 70% { transform: scale(0.98); filter: blur(1px) brightness(1.1); } 100% { opacity: 1; transform: scale(1); filter: blur(0) brightness(1); box-shadow: var(--shadow-card); } } /* ========================================================================== 7b) POKÉDEX MODULE 3 — TYPBASIERTE AURA (OPTIMIERTE VERSION) -------------------------------------------------------------------------- */ /* Typfarben */ .card-dex[data-type*="Feuer"] { --aura1:#ff6b4a; --aura2:#ff3d3d; } .card-dex[data-type*="Wasser"] { --aura1:#4db6ff; --aura2:#2aa6ff; } .card-dex[data-type*="Pflanze"] { --aura1:#6bdc6b; --aura2:#2fbf71; } .card-dex[data-type*="Elektro"] { --aura1:#ffd43b; --aura2:#ffb100; } .card-dex[data-type*="Gift"] { --aura1:#b255d3; --aura2:#7e4bdc; } .card-dex[data-type*="Flug"] { --aura1:#a9d3ff; --aura2:#7fb2ff; } .card-dex[data-type*="Eis"] { --aura1:#98d8d8; --aura2:#7dd7ff; } .card-dex[data-type*="Drache"] { --aura1:#7038f8; --aura2:#9b55ff; } .card-dex[data-type*="Unlicht"] { --aura1:#705848; --aura2:#9a7360; } .card-dex[data-type*="Fee"] { --aura1:#ee99ac; --aura2:#ffb6d9; } .card-dex[data-type*="Gestein"] { --aura1:#b8a038; --aura2:#e0c068; } .card-dex[data-type*="Boden"] { --aura1:#e2bf65; --aura2:#d9a441; } .card-dex[data-type*="Stahl"] { --aura1:#b8b8d0; --aura2:#cfd2e0; } .card-dex[data-type*="Käfer"] { --aura1:#a8b820; --aura2:#d8e030; } .card-dex[data-type*="Geist"] { --aura1:#705898; --aura2:#a087c9; } .card-dex[data-type*="Kampf"] { --aura1:#c03028; --aura2:#ff4b4b; } .card-dex[data-type*="Normal"] { --aura1:#c6c6a7; --aura2:#bfbf8c; } .card-dex[data-type*="Psycho"] { --aura1:#f85888; --aura2:#ff5db1; } /* Fallback */ .card-dex { --aura1: var(--accent); --aura2: var(--accent2); position: relative; z-index: 1; } /* === Typbasierte Aura – korrigierte Version === */ .card-dex::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; background: radial-gradient(circle at 50% 50%, var(--aura1), var(--aura2)); opacity: 0.18; filter: blur(20px); mix-blend-mode: screen; z-index: 1; /* unterhalb Bild, oberhalb Hintergrund */ animation: auraPulse 5.8s ease-in-out infinite; transition: opacity .4s ease, filter .4s ease; } /* Hover & Scan-Verstärkung */ .card-dex:hover::before, .card-dex.auto-scan::before { opacity: 0.35; filter: blur(28px); animation: auraBoost 1.4s ease-out forwards, auraPulse 5.8s ease-in-out infinite 1.4s; } /* Safari-spezifisches GPU-Tuning */ @supports (-webkit-touch-callout: none) { .card-dex::before { box-shadow: 0 0 20px var(--aura1), 0 0 40px var(--aura2); filter: none; } .card-dex.auto-scan::before { box-shadow: 0 0 40px var(--aura1), 0 0 70px var(--aura2); } .card-dex .scan-grid { transform: translateZ(0); will-change: opacity, background-position; } } /* ========================================================================== 8) POKÉDEX TOOLBAR — Suche + Filter -------------------------------------------------------------------------- */ .pokedex-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; justify-content: space-between; padding: 1rem 1.2rem; margin-bottom: 2rem; border-radius: var(--radius-lg); background: var(--toolbar-bg); border: 1px solid var(--toolbar-border); box-shadow: var(--shadow-card); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); position: relative; overflow: visible !important; z-index: 1 !important; } .pokedex-toolbar::before { content:""; position:absolute; inset:0; z-index:0; filter: blur(14px); background: linear-gradient(120deg, var(--accent), var(--accent2), var(--accent)); background-size:200% 200%; opacity:.1; animation: auroraShift 10s linear infinite; } .pokedex-toolbar > * { position:relative; z-index:2; } /* Suchfeld */ .search-wrap { position:relative; display:flex; align-items:center; justify-content:center; } .search-wrap input { width:260px; padding:.55rem 2.6rem .55rem .9rem; border-radius:10px; border:1px solid rgba(255,255,255,.1); background: rgba(10,12,28,.55); color:#fff; font-size:.95rem; transition: all .3s ease; box-shadow: inset 0 0 10px rgba(86,228,255,0.05); } .search-wrap input::placeholder { color: rgba(200,200,255,.5); } .search-wrap input:focus { outline:none; border-color: var(--accent2); box-shadow: 0 0 12px rgba(86,228,255,.4); } /* Scan-Icon (rechts im Input) — iPhone/Safe-Area aware */ .scan-icon { position:absolute; top:50%; right: calc(0.85rem + var(--safe-right)); transform: translateY(-52%); display:flex; align-items:center; justify-content:center; width:22px; height:22px; pointer-events:none; overflow:visible; } .scan-icon svg { width:20px; height:20px; stroke: var(--accent2); stroke-width: 2; fill: none; opacity:.8; animation: scanGlow 4s ease-in-out infinite; filter: drop-shadow(0 0 4px rgba(86,228,255,.6)); transition: transform .3s ease, opacity .3s ease; transform-origin: center; } .search-wrap input:focus + .scan-icon svg { transform: scale(1.1); opacity:1; filter: drop-shadow(0 0 10px rgba(126,75,220,.9)) drop-shadow(0 0 18px rgba(86,228,255,.8)); } /* Laser-Sweep beim Tippen (per JS: .typing) */ .search-wrap::before { content:""; position:absolute; inset:0; border-radius:10px; background: linear-gradient(120deg, transparent 10%, rgba(86,228,255,.2) 45%, rgba(126,75,220,.25) 55%, transparent 90%); opacity:0; transform: translateX(-150%) rotate(3deg); filter: blur(8px); pointer-events:none; transition: opacity .3s ease; } .search-wrap.typing::before { opacity:1; animation: sweepField .7s ease-out forwards; } .scan-icon::after { content:""; position:absolute; inset:-30%; background: linear-gradient(120deg, transparent 10%, rgba(86,228,255,.9) 45%, rgba(126,75,220,.9) 55%, transparent 90%); opacity:0; transform: translateX(-150%) rotate(15deg); filter: blur(4px); border-radius:50%; pointer-events:none; } .search-wrap.typing .scan-icon::after { opacity:1; animation: sweepLaser .6s ease-out forwards; } /* ========================================================================== 9) FOOTER -------------------------------------------------------------------------- */ .footer-neo { position:relative; background: linear-gradient(180deg, rgba(8,10,28,.95) 0%, rgba(0,0,0,1) 100%); overflow:hidden; } .footer-glow-line { position:absolute; top:0; left:0; width:100%; height:3px; background: linear-gradient(90deg, var(--accent), var(--accent2), var(--accent)); background-size:300% 100%; animation: aurora-bar 8s linear infinite; box-shadow: 0 0 20px rgba(86,228,255,.8), 0 0 40px rgba(126,75,220,.7); } .social-links { display:flex; justify-content:center; gap:1rem; } .social-link { color: rgba(255,255,255,.8); font-size:1.5rem; transition: transform .25s ease, color .25s ease, text-shadow .25s ease; } .social-link:hover { color: var(--accent2); transform: translateY(-3px); text-shadow: 0 0 6px var(--accent2), 0 0 12px var(--accent); } /* ========================================================================== 10) KEYFRAMES (zentralisiert, keine Duplikate) -------------------------------------------------------------------------- */ @keyframes cardAurora { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @keyframes cardPulse { 0%,100% { box-shadow: 0 0 15px rgba(86,228,255,0.1); } 50% { box-shadow: 0 0 30px rgba(126,75,220,0.25); } } @keyframes auroraReveal { 0% { opacity:0; transform: scale(.92); box-shadow: 0 0 0 rgba(86,228,255,0); filter: brightness(.6) blur(2px); } 40% { opacity:1; transform: scale(1.02); box-shadow: 0 0 20px rgba(126,75,220,0.5), 0 0 40px rgba(86,228,255,0.4); filter: brightness(1.2); } 100% { opacity:1; transform: scale(1); box-shadow: 0 0 15px rgba(86,228,255,0.1), inset 0 0 12px rgba(126,75,220,0.05); filter: brightness(1); } } @keyframes scanSweep { 0% { transform: translateY(-100%); opacity:.6; } 50% { opacity:1; } 100% { transform: translateY(100%); opacity:0; } } @keyframes scanBar { 0% { width:0%; opacity:.4; box-shadow: 0 0 10px var(--accent2); } 50% { width:80%; opacity:1; box-shadow: 0 0 20px var(--accent2), 0 0 40px var(--accent); } 100% { width:100%; opacity:0; box-shadow: 0 0 0 rgba(0,0,0,0); } } @keyframes scanGlow { 0%,100% { filter: drop-shadow(0 0 4px rgba(86,228,255,.5)) drop-shadow(0 0 8px rgba(126,75,220,.4)); transform: scale(1); } 50% { filter: drop-shadow(0 0 10px rgba(86,228,255,.9)) drop-shadow(0 0 20px rgba(126,75,220,.8)); transform: scale(1.05); } } /* Bewegung der Scans */ @keyframes dualScanSweep { 0% { transform: translateY(-100%); opacity: 0.6; } 50% { opacity: 1; } 100% { transform: translateY(100%); opacity: 0; } } @keyframes sweepLaser { 0% { opacity:0; transform: translateX(-150%) rotate(15deg); } 30% { opacity:1; transform: translateX(0%) rotate(15deg); } 100% { opacity:0; transform: translateX(150%) rotate(15deg); } } @keyframes scanGridShift { 0% { background-position: 0 0; opacity: .2; } 25% { background-position: 12px 8px; opacity: .45; } 50% { background-position: 24px 16px; opacity: .6; } 100% { background-position: 48px 32px; opacity: 0; } } @keyframes sweepField { 0% { opacity:0; transform: translateX(-150%) rotate(3deg); } 25% { opacity:1; transform: translateX(-50%) rotate(3deg); } 75% { opacity:1; transform: translateX(50%) rotate(3deg); } 100% { opacity:0; transform: translateX(150%) rotate(3deg); } } @keyframes hueShift { 0% { filter: hue-rotate(0deg) drop-shadow(0 0 10px rgba(126,75,220,0.7)); } 50% { filter: hue-rotate(180deg) drop-shadow(0 0 20px rgba(86,228,255,0.8)); } 100% { filter: hue-rotate(360deg) drop-shadow(0 0 10px rgba(126,75,220,0.7)); } } @keyframes spinPortal { 0% { transform: scale(1) rotate(0deg); } 25% { transform: scale(1.05) rotate(90deg); } 50% { transform: scale(1.15) rotate(180deg); } 75% { transform: scale(1.05) rotate(270deg); } 100% { transform: scale(1) rotate(360deg); } } @keyframes portalZoom { 0% { transform: scale(1) rotate(0deg); opacity:1; } 70% { transform: scale(1.3) rotate(160deg); opacity: .9; } 100% { transform: scale(1.5) rotate(360deg); opacity:0; } } @keyframes portalEntryBg { 0% { opacity:1; background: radial-gradient(circle at center, #0b0e2a 0%, #000 90%); } 50% { opacity:.85; background: radial-gradient(circle at center, #040418 0%, #000 90%); } 100% { opacity:0; background: radial-gradient(circle at center, #000 0%, #000 90%); } } @keyframes portalEntryLogo { 0% { transform: scale(1.4) rotate(0deg); opacity:1; } 50% { transform: scale(0.9) rotate(180deg); opacity:0.7; } 100% { transform: scale(0.6) rotate(360deg); opacity:0; } } @keyframes portalEntryWave { 0% { opacity:0.6; transform: scale(2.2); } 100% { opacity:0; transform: scale(0.8); } } @keyframes aurora-bar { 0% { background-position: 0% 0; } 50% { background-position: 100% 0; } 100% { background-position: 0% 0; } } /* ========================================================================== 11) REDUCED MOTION (A11Y) -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } .card-glass:hover, .card-dex:hover { transform: none !important; } } /* ========================================================================== 12) SMALL DEVICE POLISH -------------------------------------------------------------------------- */ @media (max-width: 480px) { /* Mehr Platz im Input rechts für iOS-Icon/Safe-Area */ .search-wrap input { padding-right: calc(2.8rem + var(--safe-right)); } /* Subtilere Schatten für alte mobile GPUs */ .card-dex, .pokedex-toolbar { box-shadow: 0 0 12px rgba(86,228,255,0.06); } } /* ========================================================================== 13) POKÉDEX SYNC SCAN ENHANCEMENTS -------------------------------------------------------------------------- */ /* Holo-Fade nach Scan – sanftes Nachleuchten */ .card-dex.auto-scan::before { opacity: 0.35; animation: auraBoost 1.4s ease-out forwards, auraPulse 4s ease-in-out infinite 1.4s; transition: opacity 0.6s ease; } .card-dex:not(.auto-scan)::before { opacity: 0; transition: opacity 1.2s ease; } /* Analyse-Balken mit leichtem Nachglühen */ @keyframes scanBar { 0% { width: 0%; opacity: 0.4; box-shadow: 0 0 10px var(--accent2); } 50% { width: 80%; opacity: 1; box-shadow: 0 0 20px var(--accent2), 0 0 40px var(--accent); } 90% { width: 100%; opacity: 0.6; box-shadow: 0 0 12px var(--accent2); } 100% { width: 100%; opacity: 0; box-shadow: none; } } /* ========================================================================== 14) POKÉDEX ANALYSE HUD (Modul 2) -------------------------------------------------------------------------- */ .hud-overlay { position: absolute; inset: 0; z-index: 7; pointer-events: none; opacity: 0; transition: opacity .3s ease; } .hud-overlay.active { opacity: 1; } .hud-lines { position: absolute; inset: 0; background-image: repeating-linear-gradient(90deg, rgba(86,228,255,0.08) 0px, rgba(86,228,255,0.08) 1px, transparent 2px, transparent 16px ); animation: hudLinesMove 1.8s linear infinite; mix-blend-mode: screen; } .hud-data { position: absolute; bottom: 6px; right: 8px; font-family: "Courier New", monospace; font-size: 0.65rem; color: rgba(86,228,255,0.85); text-shadow: 0 0 4px rgba(126,75,220,0.8); display: flex; flex-direction: column; gap: 2px; opacity: 0; transform: scale(0.9); transition: opacity .3s ease, transform .3s ease; } .hud-overlay.active .hud-data { opacity: 1; transform: scale(1); animation: hudBlink 1.4s steps(2) infinite; } .hud-num { display: block; letter-spacing: 0.05rem; } @keyframes hudLinesMove { 0% { background-position: 0 0; } 100% { background-position: 16px 0; } } @keyframes hudBlink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0.6; } } @keyframes auraPulse { 0%,100% { opacity: 0.18; filter: blur(18px); } 50% { opacity: 0.33; filter: blur(25px); } } @keyframes auroraShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @keyframes auraBoost { 0% { opacity: 0.0; filter: blur(30px) brightness(1.4); } 30% { opacity: 0.5; filter: blur(20px) brightness(1.8); } 60% { opacity: 0.35; filter: blur(25px) brightness(1.6); } 100% { opacity: 0.18; filter: blur(20px) brightness(1); } } /* ========================================================================== 16) POKÉDEX MODULE 6 — ARC IMPULSE EFFECT (Mini-Funken) -------------------------------------------------------------------------- */ .card-dex .arc-container { position: absolute; inset: 0; pointer-events: none; overflow: visible; z-index: 8; } .card-dex .arc { position: absolute; width: 1.5px; height: 40px; background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, var(--accent2) 40%, var(--accent) 60%, rgba(255,255,255,0) 100%); filter: drop-shadow(0 0 8px var(--accent2)); opacity: 0; transform: rotate(var(--rot, 0deg)) scaleY(0.6); transform-origin: center; animation: arcZap 0.4s ease-out forwards; } @keyframes arcZap { 0% { opacity: 0; transform: scaleY(0.3) rotate(var(--rot)); } 30% { opacity: 1; transform: scaleY(1.1) rotate(var(--rot)); } 100% { opacity: 0; transform: scaleY(0) rotate(var(--rot)); } } /* ========================================================================== 17) ARC IMPULSE – Typbasierte Farb-Synchronisierung -------------------------------------------------------------------------- */ .card-dex[data-type*="Feuer"] .arc { --accent:#ff3d3d; --accent2:#ffb199; } .card-dex[data-type*="Wasser"] .arc { --accent:#2aa6ff; --accent2:#6ed6ff; } .card-dex[data-type*="Pflanze"] .arc { --accent:#2fbf71; --accent2:#8aff94; } .card-dex[data-type*="Elektro"] .arc { --accent:#ffd43b; --accent2:#fff39a; } .card-dex[data-type*="Gift"] .arc { --accent:#b255d3; --accent2:#d999ff; } .card-dex[data-type*="Eis"] .arc { --accent:#7dd7ff; --accent2:#c9ffff; } .card-dex[data-type*="Drache"] .arc { --accent:#7038f8; --accent2:#9b55ff; } .card-dex[data-type*="Unlicht"] .arc { --accent:#705848; --accent2:#9a7360; } .card-dex[data-type*="Fee"] .arc { --accent:#ee99ac; --accent2:#ffb6d9; } .card-dex[data-type*="Kampf"] .arc { --accent:#ff4b4b; --accent2:#ff9d9d; } .card-dex[data-type*="Normal"] .arc { --accent:#c6c6a7; --accent2:#f0f0cf; } .card-dex[data-type*="Psycho"] .arc { --accent:#ff5db1; --accent2:#ffa4d9; } /* ========================================================================== 18) ARC IMPULSE — iOS Visibility Boost (Safari Patch) -------------------------------------------------------------------------- */ @supports (-webkit-touch-callout: none) { .card-dex .arc { width: 2px; height: 48px; opacity: 0; filter: drop-shadow(0 0 8px var(--accent2)) drop-shadow(0 0 14px var(--accent)) brightness(1.2); mix-blend-mode: screen; animation: arcZapBoost 0.8s ease-out forwards; animation-name: arcZapBoost !important; } } /* Allgemeine Verbesserung auch für Desktop */ .card-dex .arc { transition: opacity .2s ease, transform .3s ease; } /* ========================================================================== 19) SAFARI VISIBILITY FIX — ARC GPU-RENDER PATCH -------------------------------------------------------------------------- */ @supports (-webkit-touch-callout: none) { /* Sichtbarkeits-Boost & GPU-Layer */ .card-dex .arc { will-change: transform, opacity; transform: translateZ(0) scaleY(0.6) rotate(var(--rot)); background: linear-gradient(to bottom, rgba(255,255,255,0.05) 0%, var(--accent2) 40%, var(--accent) 60%, rgba(255,255,255,0.05) 100%); mix-blend-mode: screen; opacity: 0.9; filter: drop-shadow(0 0 10px var(--accent2)) drop-shadow(0 0 18px var(--accent)) brightness(1.3); animation: arcZapBoost 0.9s ease-out forwards; } /* Safari blendet kleine Elemente manchmal sofort aus → stabilisieren */ .card-dex.za-seen .arc { opacity: 0.9; transition: opacity .4s ease-out, transform .4s ease-out; } /* Optional: Arc-Container etwas größer, damit nichts abgeschnitten wird */ .card-dex .arc-container { overflow: visible !important; transform: translateZ(0); } } @keyframes arcZapBoost { 0% { opacity: 0; transform: scaleY(0.3) rotate(var(--rot)); } 25% { opacity: 1; transform: scaleY(1.2) rotate(var(--rot)); } 60% { opacity: .9; filter: brightness(1.4) drop-shadow(0 0 16px var(--accent2)); } 100% { opacity: 0; transform: scaleY(0) rotate(var(--rot)); filter: brightness(1); } } /* ========================================================================== 404 PORTAL — FINAL + PARTICLES VERSION -------------------------------------------------------------------------- Enthält: - Portal-Ring + Kern - Warp Entry / Exit - Scan-Linie + Reflex - Glitch-Textanimation - Split-Partikel (neue Ergänzung) - iOS-zentriertes Layout ========================================================================== */ .error-portal { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; align-items: center; overflow: hidden; position: relative; z-index: 1; } .error-portal::before { content: ""; position: absolute; inset: 0; background-image: repeating-linear-gradient( 0deg, rgba(86,228,255,0.04) 0px, rgba(86,228,255,0.04) 1px, transparent 2px, transparent 8px ); animation: scanLinesMove 2s linear infinite; opacity: .25; z-index: 0; } /* --- PORTAL STRUKTUR --- */ .portal-wrap { position: relative; display: inline-block; perspective: 1000px; filter: drop-shadow(0 0 25px rgba(126,75,220,0.6)) drop-shadow(0 0 45px rgba(86,228,255,0.5)); } /* --- Split-Partikel (neu) --- */ .portal-particles { position: absolute; inset: 0; overflow: visible; z-index: 2; pointer-events: none; } /* === Portal Particles – Weicher & ruhiger Energiefluss === */ .portal-particles::before, .portal-particles::after { content: ""; position: absolute; left: 50%; top: 50%; width: 100%; height: 100%; transform: translate(-50%, -50%) scale(1); background-image: radial-gradient(circle, rgba(86,228,255,0.25) 0%, transparent 70%), radial-gradient(circle, rgba(126,75,220,0.22) 0%, transparent 70%); background-size: 2.2px 2.2px, 1.6px 1.6px; background-position: center center; background-repeat: repeat; opacity: 0.35; filter: blur(1.2px) brightness(0.9); mix-blend-mode: screen; animation: particleFloatSoft 8s ease-in-out infinite; pointer-events: none; } .portal-particles::after { opacity: 0.5; filter: blur(1.6px) brightness(1); animation: particleFloatSoft 10s ease-in-out infinite 2s; } /* iOS / Safari Optimierung */ @supports (-webkit-touch-callout: none) { .portal-particles::before, .portal-particles::after { opacity: 0.45; filter: blur(1px) brightness(1.05); background-size: 2px 2px, 1.5px 1.5px; -webkit-transform: translate(-50%, -50%) scale(1) translateZ(0); animation-timing-function: ease-in-out; } } /* Neue Keyframes für sanften, langsamen Energiefluss */ @keyframes particleFloatSoft { 0% { background-position: 50% 60%, 52% 62%; opacity: 0.2; transform: translate(-50%, -50%) scale(1); filter: blur(1px); } 25% { opacity: 0.45; transform: translate(-50%, -51%) scale(1.03); } 50% { background-position: 48% 48%, 54% 50%; opacity: 0.55; filter: blur(1.2px); } 75% { background-position: 50% 40%, 52% 42%; opacity: 0.4; transform: translate(-50%, -52%) scale(1.05); } 100% { background-position: 50% 60%, 52% 62%; opacity: 0.25; transform: translate(-50%, -50%) scale(1); filter: blur(1px); } } .error-portal.warp-entry .portal-particles::before, .error-portal.warp-entry .portal-particles::after { animation-play-state: running; opacity: 1; } .error-portal.warp-exit .portal-particles::before, .error-portal.warp-exit .portal-particles::after { animation: particleCollapse 1.2s ease-in-out forwards; } @keyframes particleCollapse { 0% { opacity: 1; transform: scale(1); filter: blur(1px); } 100% { opacity: 0; transform: scale(0.4); filter: blur(6px); } } /* === PORTAL FLOATING LIGHTS (aktive Partikel) === */ .portal-lights { position: absolute; inset: -40px; overflow: visible; pointer-events: none; z-index: 3; } .portal-lights::before, .portal-lights::after { content: ""; position: absolute; width: 100%; height: 100%; background-image: radial-gradient(circle at 20% 80%, rgba(126,75,220,0.9) 0%, transparent 70%), radial-gradient(circle at 80% 40%, rgba(86,228,255,0.8) 0%, transparent 70%), radial-gradient(circle at 60% 70%, rgba(255,255,255,0.5) 0%, transparent 70%), radial-gradient(circle at 30% 20%, rgba(126,75,220,0.7) 0%, transparent 70%); background-repeat: no-repeat; background-size: 8px 8px, 6px 6px, 4px 4px, 10px 10px; mix-blend-mode: screen; opacity: 0.75; animation: lightFloat 8s ease-in-out infinite alternate; } .portal-lights::after { filter: blur(2px) brightness(1.2); opacity: 0.5; animation: lightFloat2 10s ease-in-out infinite alternate-reverse; } @keyframes lightFloat { 0% { transform: translate3d(-10px, 10px, 0) scale(1); background-position: 20% 80%, 80% 40%, 60% 70%, 30% 20%; } 50% { transform: translate3d(10px, -10px, 20px) scale(1.05); background-position: 25% 70%, 75% 45%, 65% 65%, 35% 25%; } 100% { transform: translate3d(-5px, 15px, -20px) scale(1); background-position: 18% 90%, 85% 50%, 58% 80%, 28% 15%; } } @keyframes lightFloat2 { 0% { transform: translate3d(15px, -10px, 0) scale(1.1); } 50% { transform: translate3d(-15px, 10px, 15px) scale(1); } 100% { transform: translate3d(10px, -15px, -15px) scale(1.05); } } /* --- Aktiv nur während Warp --- */ .error-portal.warp-entry .portal-lights, .error-portal.warp-exit .portal-lights { opacity: 1; animation: fadeInLights 1.2s ease-out forwards; } @keyframes fadeInLights { 0% { opacity: 0; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1); } } /* --- Portal-Elemente --- */ .portal-ring { position: absolute; inset: -60px; border-radius: 50%; background: conic-gradient( from 0deg, rgba(86,228,255,0.2), rgba(126,75,220,0.3), rgba(86,228,255,0.25), rgba(126,75,220,0.2), rgba(86,228,255,0.3) ); animation: portalRotate 6s linear infinite; filter: blur(25px); z-index: 0; } .portal-core { position: absolute; inset: -20px; border-radius: 50%; background: radial-gradient( circle at 50% 50%, rgba(86,228,255,0.4), rgba(126,75,220,0.25), transparent 70% ); filter: blur(16px); animation: portalPulse 4s ease-in-out infinite; z-index: 1; } /* --- 404 Zahl --- */ .error-code { position: relative; z-index: 3; font-size: clamp(5rem, 15vw, 13rem); font-weight: 800; letter-spacing: 0.05em; color: #fff; mix-blend-mode: screen; text-shadow: 0 0 20px rgba(86,228,255,0.8), 0 0 40px rgba(126,75,220,0.8); overflow: hidden; } .error-code::after { content: ""; position: absolute; top: -120%; left: 0; width: 100%; height: 140%; background: linear-gradient( to bottom, rgba(255,255,255,0) 0%, rgba(86,228,255,0.25) 45%, rgba(126,75,220,0.25) 55%, rgba(255,255,255,0) 100% ); mix-blend-mode: screen; opacity: 0; pointer-events: none; filter: blur(6px); } /* --- Glitch-Effekt --- */ .error-code.glitch { text-shadow: 0 0 20px rgba(86,228,255,0.9), 2px 0 rgba(126,75,220,0.8), -2px 0 rgba(86,228,255,0.8); transform: skewX(2deg); filter: brightness(1.4); } .error-code.glitch::before { content: ""; position: absolute; inset: -10px; background: radial-gradient(circle, rgba(255,255,255,0.4), transparent 70%); mix-blend-mode: screen; animation: glitchBurst 0.3s ease-out; } @keyframes glitchBurst { 0% { opacity: 1; transform: scale(0.8); filter: blur(4px); } 100% { opacity: 0; transform: scale(2); filter: blur(12px); } } /* --- Scan-Linie --- */ .scan-line { position: absolute; top: -120%; left: 0; width: 100%; height: 140%; background: linear-gradient( to bottom, rgba(86,228,255,0) 0%, rgba(86,228,255,0.4) 40%, rgba(126,75,220,0.4) 60%, rgba(126,75,220,0) 100% ); mix-blend-mode: screen; opacity: 0; pointer-events: none; z-index: 10; } /* --- Text & Button --- */ .error-title { font-size: 1.7rem; font-weight: 600; } .error-text { color: rgba(255,255,255,0.75); max-width: 420px; margin: 0 auto; line-height: 1.6; } .btn-glass { display: inline-block; padding: .6rem 1.4rem; border-radius: 10px; border: 1px solid rgba(255,255,255,0.15); color: #fff; text-decoration: none; backdrop-filter: blur(12px); background: rgba(20,25,45,0.45); box-shadow: 0 0 20px rgba(86,228,255,0.15); transition: all .3s ease; } .btn-glass:hover { box-shadow: 0 0 25px rgba(86,228,255,0.4), 0 0 45px rgba(126,75,220,0.3); transform: translateY(-2px); } /* --- Aktivierungen --- */ .error-portal.warp-entry .scan-line { opacity: 1; animation: scanLineSweep 0.9s cubic-bezier(.45,0,.55,1) 0.35s forwards; } .error-portal.warp-entry .error-code::after { opacity: 1; animation: codeReflectSweep 0.9s cubic-bezier(.45,0,.55,1) 0.35s forwards; } .error-portal.warp-entry { animation: warpIntroBg 1.4s ease-out forwards; } .error-portal.warp-entry .portal-ring { animation: portalEntryRing 1.4s cubic-bezier(.45,0,.55,1) forwards; } .error-portal.warp-entry .portal-core { animation: portalEntryCore 1.6s cubic-bezier(.45,0,.55,1) forwards; } .error-portal.warp-entry .error-code { animation: codeEntry 1.2s cubic-bezier(.45,0,.55,1) 0.5s forwards; opacity: 0; } .error-portal.warp-entry .error-title, .error-portal.warp-entry .error-text, .error-portal.warp-entry .btn-glass { animation: fadeUp 1s ease-out 1s forwards; opacity: 0; } .error-portal.warp-exit { animation: warpFade 1.2s ease-in-out forwards; } .error-portal.warp-exit .portal-ring { animation: portalCollapse 1.2s cubic-bezier(.65,0,.45,1) forwards; } .error-portal.warp-exit .portal-core { animation: portalCoreCollapse 1.2s cubic-bezier(.65,0,.45,1) forwards; } .error-portal.warp-exit .error-code { animation: codeFadeOut .8s ease-out forwards; } .error-portal.warp-exit .error-title, .error-portal.warp-exit .error-text, .error-portal.warp-exit .btn-glass { animation: fadeDown .6s ease-out forwards; } /* --- GPU OPTIMIERUNG --- */ .portal-wrap, .scan-line, .portal-ring, .portal-core { will-change: transform, opacity; } /* --- KEYFRAMES --- */ @keyframes portalRotate { 0% {transform: rotate(0);}100%{transform: rotate(360deg);} } @keyframes portalPulse { 0%,100%{opacity:.6;transform:scale(1);}50%{opacity:1;transform:scale(1.08);} } @keyframes warpIntroBg {0%{opacity:0;transform:scale(1.2);filter:blur(8px);}50%{opacity:.8;transform:scale(1.05);filter:blur(4px);}100%{opacity:1;transform:scale(1);filter:blur(0);} } @keyframes portalEntryRing {0%{transform:scale(0) rotate(0);opacity:0;}40%{transform:scale(1.2) rotate(180deg);opacity:1;}100%{transform:scale(1) rotate(360deg);} } @keyframes portalEntryCore {0%{opacity:0;transform:scale(0);filter:blur(10px);}60%{opacity:1;transform:scale(1.1);}100%{opacity:1;transform:scale(1);} } @keyframes scanLineSweep {0%{transform:translateY(-120%);opacity:.3;}20%,60%{opacity:1;}100%{transform:translateY(120%);opacity:0;} } @keyframes codeReflectSweep {0%{transform:translateY(-120%);opacity:.4;}20%,60%{opacity:1;}100%{transform:translateY(120%);opacity:0;} } @keyframes warpFade {0%{opacity:1;}60%{opacity:.8;transform:scale(0.9);}100%{opacity:0;transform:scale(0.4);} } @keyframes portalCollapse {0%{transform:scale(1);opacity:1;}100%{transform:scale(0);opacity:0;} } @keyframes portalCoreCollapse {0%{opacity:1;transform:scale(1);}100%{opacity:0;transform:scale(0);} } @keyframes codeEntry {0%{opacity:0;transform:scale(0.8) translateY(20px);}60%{opacity:1;transform:scale(1.05);}100%{opacity:1;transform:scale(1);} } @keyframes codeFadeOut {0%{opacity:1;}100%{opacity:0;transform:scale(0.7);} } @keyframes fadeUp {0%{opacity:0;transform:translateY(30px);}100%{opacity:1;transform:translateY(0);} } @keyframes fadeDown {0%{opacity:1;}100%{opacity:0;transform:translateY(40px);} } @keyframes scanLinesMove {0%{background-position:0 0;}100%{background-position:0 8px;} } #dex-feedback { position: relative; text-align: center; font-size: 0.95rem; margin-top: 0.6rem; margin-bottom: 0.8rem; color: rgba(255, 255, 255, .85); text-shadow: 0 0 8px rgba(126, 75, 220, .45), 0 0 16px rgba(86, 228, 255, .4); opacity: 0; transform: translateY(-6px) scale(0.98); transition: opacity .5s ease, transform .5s ease, margin-bottom .5s ease; pointer-events: none; letter-spacing: 0.02em; } #dex-feedback:empty { margin-bottom: 0; } #dex-feedback.show { opacity: 1; transform: translateY(0) scale(1); animation: feedbackPulse 1.2s ease-out, feedbackGlow 1.1s ease-out; } /* === Scan-Lichtband über Text (holografischer Effekt) === */ #dex-feedback.scan-pulse { position: relative; font-weight: 500; letter-spacing: 0.03em; background: linear-gradient( 90deg, #56e4ff 0%, #7e4bdc 25%, #56e4ff 50%, #a184ff 75%, #56e4ff 100% ); background-size: 300% 100%; -webkit-background-clip: text; color: #7ee0ff; -webkit-text-fill-color: rgba(255, 255, 255, 0.85); text-shadow: 0 0 10px rgba(126, 75, 220, 0.5), 0 0 20px rgba(86, 228, 255, 0.5); animation: scanPulse 1s ease-in-out infinite, holoShift 4s linear infinite, scanSweep 2.2s linear infinite; } #dex-feedback.scan-pulse::after { content: ""; position: absolute; inset: 0; background: linear-gradient( 90deg, transparent 0%, rgba(255, 255, 255, 0.25) 45%, rgba(86, 228, 255, 0.3) 50%, rgba(255, 255, 255, 0.25) 55%, transparent 100% ); background-size: 250% 100%; mix-blend-mode: screen; opacity: 0.7; animation: laserSweep 2.6s linear infinite; } @keyframes laserSweep { 0% { background-position: 250% 0; opacity: 0.4; } 50% { opacity: 0.9; } 100% { background-position: -250% 0; opacity: 0.4; } } #dex-feedback.error { color: #ff4b4b; text-shadow: 0 0 8px rgba(255, 75, 75, 0.8), 0 0 20px rgba(255, 100, 100, 0.6); animation: errorFlash 0.45s ease-in-out, errorShake 0.25s ease-in-out; } #dex-feedback:not(.error):not(:empty) { color: #7ee0ff; text-shadow: 0 0 8px rgba(86, 228, 255, 0.5), 0 0 16px rgba(126, 75, 220, 0.4); } #dex-feedback.error::after { content: ""; position: absolute; left: 50%; top: 50%; width: 100%; height: 100%; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(255, 90, 120, 0.35) 0%, transparent 70%); filter: blur(8px); opacity: 0; animation: errorFlash 0.4s ease-out; } #dex-feedback.fade-out { animation: feedbackFadeOut 0.6s ease forwards; } @keyframes errorFlash { 0%, 100% { text-shadow: 0 0 6px rgba(255,75,75,0.7), 0 0 12px rgba(255,100,100,0.5); filter: brightness(1); } 30% { text-shadow: 0 0 22px rgba(255,100,100,1), 0 0 35px rgba(255,0,0,0.9); filter: brightness(1.5); } 60% { text-shadow: 0 0 10px rgba(255,100,100,0.7), 0 0 20px rgba(255,0,0,0.6); filter: brightness(1.2); } } /* Leichtes elektrisches Zittern */ @keyframes errorShake { 0% { transform: translate(0, 0); } 25% { transform: translate(-1px, 1px); } 50% { transform: translate(2px, -1px); } 75% { transform: translate(-2px, 1px); } 100% { transform: translate(0, 0); } } @keyframes scanPulse { 0%, 100% { opacity: .6; filter: brightness(1); } 50% { opacity: 1; filter: brightness(1.4); } } /* Farbverlauf gleitet sanft durch */ @keyframes holoShift { 0% { background-position: 0% 50%; filter: hue-rotate(0deg); } 50% { background-position: 100% 50%; filter: hue-rotate(45deg); } 100% { background-position: 0% 50%; filter: hue-rotate(0deg); } } /* Sanfter Lauf des Lichtbands */ @keyframes scanSweep { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* sanfter Scan-Impuls */ @keyframes feedbackPulse { 0% { text-shadow: 0 0 0px rgba(126,75,220,0), 0 0 0px rgba(86,228,255,0); transform: translateY(-3px) scale(0.98); } 25% { text-shadow: 0 0 12px rgba(126,75,220,.8), 0 0 22px rgba(86,228,255,.8); transform: translateY(0) scale(1.02); } 100% { text-shadow: 0 0 8px rgba(126,75,220,.45), 0 0 16px rgba(86,228,255,.4); transform: translateY(0) scale(1); } } @keyframes feedbackGlow { 0% { text-shadow: 0 0 0px rgba(126,75,220,0), 0 0 0px rgba(86,228,255,0); filter: brightness(1); } 20% { text-shadow: 0 0 15px rgba(126,75,220,.9), 0 0 28px rgba(86,228,255,.9); filter: brightness(1.4); } 60% { text-shadow: 0 0 10px rgba(126,75,220,.6), 0 0 18px rgba(86,228,255,.6); filter: brightness(1.2); } 100% { text-shadow: 0 0 8px rgba(126,75,220,.45), 0 0 16px rgba(86,228,255,.4); filter: brightness(1); } } @keyframes feedbackFadeOut { 0% { opacity: 1; transform: translateY(0) scale(1); } 100% { opacity: 0; transform: translateY(-12px) scale(0.96); } } .pkb-spinner { width: 18px; height: 18px; display: inline-block; vertical-align: -3px; margin-right: 6px; border-radius: 50%; background: linear-gradient(to bottom, #ff0000 50%, #ffffff 50%); border: 2px solid #000; position: relative; animation: pkbSpin 0.7s linear infinite; } .pkb-spinner::before { content: ""; position: absolute; inset: 5px; background: #fff; border-radius: 50%; border: 2px solid #000; } @keyframes pkbSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .scan-text { letter-spacing: 0.02em; } .hl { color: #fff; text-shadow: 0 0 8px #56e4ff, 0 0 18px #7e4bdc; font-weight: 600; } #dex-feedback.pulse { animation: pulseGlow .4s ease-in-out; } @keyframes pulseGlow { 0% { transform: scale(1); } 50% { transform: scale(1.12); } 100% { transform: scale(1); } } /* iOS Safari: gezielte GPU-Promotion statt auf */ @supports (-webkit-touch-callout: none) { .card-dex, .dex-img, .pokedex-toolbar, /*.navbar,*/ .glass-blur { transform: translateZ(0); will-change: transform; } } .pagination .page-link { color: var(--accent2); background: rgba(10, 12, 28, .55); border: 1px solid rgba(255, 255, 255, .08); backdrop-filter: blur(10px); border-radius: 10px; margin: 0 .25rem; transition: .25s ease; } .pagination .page-link:hover { color: #fff; border-color: var(--accent2); transform: translateY(-2px) scale(1.05); box-shadow: 0 0 12px rgba(86, 228, 255, .45), 0 0 22px rgba(126, 75, 220, .4); } .pagination .page-item.active .page-link { background: linear-gradient(90deg, var(--accent), var(--accent2)); border-color: var(--accent2); color: #fff; font-weight: 600; } .pagination .page-item.disabled .page-link { opacity: .25; pointer-events: none; } .type-badges { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; max-width: 220px; } .type-badges button { font-size: 0.85rem; border: none; cursor: pointer; transition: all .25s ease; padding: .35rem .6rem; border-radius: 8px; color: #fff; text-shadow: 0 0 6px rgba(0, 0, 0, 0.3); } .type-badges button.active { box-shadow: 0 0 12px rgba(86, 228, 255, .5), 0 0 25px rgba(126, 75, 220, .4); transform: scale(1.08); outline: 2px solid rgba(255, 255, 255, .25); } .type-badges button.disabled { opacity: .5; cursor: not-allowed; } @supports (-webkit-touch-callout: none) { .type-badges button { -webkit-tap-highlight-color: transparent; transform: translateZ(0); } } /* === Neon Glass Container für Typen-Auswahl (wie altes