:root{--primary-bg: #F0F4F8;--secondary-bg: #FFFFFF;--tertiary-bg: #E4E9F0;--primary-accent: #0077B6;--secondary-accent: #FFA500;--accent-glow: rgba(0, 119, 182, .5);--text-primary: #0D1B2A;--text-secondary: #4A5568;--text-muted: #718096;--text-accent: #005A8D;--shadow-color: rgba(13, 27, 42, .1);--volumetric-light: rgba(0, 119, 182, .08);--duration-instant: .08s;--duration-quick: .25s;--duration-smooth: .5s;--duration-cinematic: 1s;--duration-epic: 2s;--duration-ultra: 4s;--ease-out-expo: cubic-bezier(.16, 1, .3, 1);--ease-in-out-quart: cubic-bezier(.76, 0, .24, 1);--ease-out-back: cubic-bezier(.34, 1.56, .64, 1);--ease-in-back: cubic-bezier(.36, 0, .66, -.56);--ease-cinematic: cubic-bezier(.25, .46, .45, .94);--ease-elastic: cubic-bezier(.68, -.55, .265, 1.55);--perspective-depth: 2500px;--canvas-height: 75vh;--canvas-max-height: 800px;--node-size: 320px;--node-depth: 150px;--orb-size: 200px;--font-size-hero: clamp(3.5rem, 10vw, 7rem);--font-size-title: clamp(2.5rem, 6vw, 5rem);--font-size-subtitle: clamp(1.4rem, 3.5vw, 2.5rem);--font-size-body: clamp(1.1rem, 2.5vw, 1.4rem);--font-size-small: clamp(.9rem, 2vw, 1.1rem);--blur-subtle: blur(3px);--blur-medium: blur(12px);--blur-heavy: blur(25px);--blur-extreme: blur(50px);--backdrop-blur: blur(50px) saturate(180%) brightness(1.1);--glass-effect: blur(20px) saturate(180%) brightness(1.1);--shadow-soft: 0 4px 20px var(--shadow-color);--shadow-medium: 0 8px 40px var(--shadow-color);--shadow-hard: 0 15px 60px rgba(0, 0, 0, .2);--shadow-extreme: 0 25px 100px rgba(0, 0, 0, .3);--glow-shadow: 0 0 30px var(--accent-glow)}.dark-mode{--primary-bg: #0D1B2A;--secondary-bg: #172A3A;--tertiary-bg: #223843;--primary-accent: #00A9FF;--secondary-accent: #FFB700;--accent-glow: rgba(0, 169, 255, .4);--text-primary: #F0F4F8;--text-secondary: #A9B4C2;--text-muted: #718096;--text-accent: #E4E9F0;--shadow-color: rgba(0, 0, 0, .4);--volumetric-light: rgba(0, 169, 255, .1)}*{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth;overflow-x:hidden}body{font-family:Tajawal,Poppins,sans-serif;line-height:1.6;background:var(--primary-bg);color:var(--text-primary);overflow-x:hidden;font-feature-settings:"liga" 1,"kern" 1;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;transition:background var(--duration-smooth),color var(--duration-smooth)}.audio-control-premium{position:absolute;top:2rem;right:2rem;width:70px;height:70px;border-radius:50%;background:linear-gradient(135deg,#ffffff1a,#ffffff0d);border:2px solid rgba(255,255,255,.2);color:var(--text-primary);cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:1000;backdrop-filter:var(--glass-effect);-webkit-backdrop-filter:var(--glass-effect);transition:all var(--duration-smooth) var(--ease-out-expo);box-shadow:var(--shadow-medium),inset 0 1px #fff3;overflow:hidden}.audio-control-premium:hover{transform:scale(1.1) rotate(5deg);border-color:#fff6;box-shadow:var(--shadow-hard),var(--glow-shadow)}.audio-control-premium:active{transform:scale(.95)}.audio-icon-container{position:relative;display:flex;align-items:center;justify-content:center}.audio-waves{position:absolute;left:-25px;display:flex;gap:3px;opacity:.8}.wave{width:3px;background:var(--primary-accent);border-radius:2px;animation:audioWave var(--duration-smooth) ease-in-out infinite alternate}.wave-1{height:8px;animation-delay:0s}.wave-2{height:12px;animation-delay:.1s}.wave-3{height:6px;animation-delay:.2s}@keyframes audioWave{0%{transform:scaleY(.3);opacity:.5}to{transform:scaleY(1);opacity:1}}.audio-speaker{font-size:1.5rem;z-index:2}.audio-ripple{position:absolute;top:50%;left:50%;width:100%;height:100%;border-radius:50%;background:radial-gradient(circle,var(--accent-glow) 0%,transparent 70%);transform:translate(-50%,-50%) scale(0);opacity:0;transition:all var(--duration-quick) ease-out}.audio-control-premium:active .audio-ripple{transform:translate(-50%,-50%) scale(2);opacity:1}.showcase-hook-premium{position:relative;min-height:100vh;background:radial-gradient(ellipse at 20% 10%,var(--volumetric-light) 0%,transparent 50%),radial-gradient(ellipse at 80% 90%,var(--volumetric-light) 0%,transparent 50%),radial-gradient(ellipse at center,var(--volumetric-light) 0%,transparent 70%),#124475;overflow:hidden;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:3rem 2rem;transition:background var(--duration-smooth)}.showcase-bg-effects{position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;z-index:1}.floating-orbs{position:absolute;width:100%;height:100%}.orb{position:absolute;border-radius:50%;background:radial-gradient(circle at 30% 30%,rgba(0,119,182,.15) 0%,rgb(182,102,0) 50%,transparent 100%);filter:blur(1px);animation:floatingOrb var(--duration-ultra) ease-in-out infinite}.dark-mode .orb{background:radial-gradient(circle at 30% 30%,rgba(0,169,255,.15) 0%,rgba(0,169,255,.05) 50%,transparent 100%)}.orb-1{width:150px;height:150px;top:10%;left:15%;animation-delay:0s;animation-duration:8s}.orb-2{width:200px;height:200px;top:60%;right:20%;animation-delay:1s;animation-duration:12s}.orb-3{width:100px;height:100px;bottom:20%;left:10%;animation-delay:2s;animation-duration:10s}.orb-4{width:120px;height:120px;top:30%;right:10%;animation-delay:3s;animation-duration:14s}.orb-5{width:80px;height:80px;bottom:40%;right:40%;animation-delay:4s;animation-duration:6s}@keyframes floatingOrb{0%,to{transform:translate(0) scale(1);opacity:.3}25%{transform:translate(20px,-30px) scale(1.1);opacity:.6}50%{transform:translate(-15px,-20px) scale(.9);opacity:.4}75%{transform:translate(10px,15px) scale(1.05);opacity:.7}}.geometric-patterns{position:absolute;width:100%;height:100%}.pattern{position:absolute;border:1px solid var(--primary-accent);opacity:.1;animation:rotatePattern var(--duration-ultra) linear infinite;transition:border-color var(--duration-smooth)}.pattern-1{width:300px;height:300px;top:20%;left:60%;border-radius:50%;animation-duration:20s}.pattern-2{width:200px;height:200px;bottom:30%;left:20%;transform:rotate(45deg);animation-duration:15s;animation-direction:reverse}.pattern-3{width:150px;height:150px;top:50%;right:30%;clip-path:polygon(50% 0%,0% 100%,100% 100%);animation-duration:25s}@keyframes rotatePattern{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.light-rays{position:absolute;width:100%;height:100%}.ray{position:absolute;background:linear-gradient(90deg,transparent 0%,rgb(215,95,8) 50%,transparent 100%);animation:lightRay var(--duration-ultra) ease-in-out infinite;transition:background var(--duration-smooth)}.ray-1{width:2px;height:100%;left:25%;animation-delay:0s;animation-duration:8s}.ray-2{width:1px;height:100%;right:35%;animation-delay:2s;animation-duration:12s}.ray-3{width:3px;height:100%;left:70%;animation-delay:4s;animation-duration:10s}@keyframes lightRay{0%,to{opacity:0;transform:translateY(-100%)}50%{opacity:1;transform:translateY(0)}}.showcase-header-container{position:relative;z-index:10;margin-bottom:4rem}.showcase-title-wrapper{position:relative;margin-bottom:2rem}.showcase-heading-premium{font-size:var(--font-size-hero);font-weight:800;letter-spacing:-.03em;text-align:center;position:relative;color:#D2921D;-webkit-background-clip:text;-webkit-text-fill-color:;background-clip:text;background-image:linear-gradient(135deg,var(--text-primary),var(--text-accent));animation:textGlowPremium var(--duration-cinematic) ease-in-out infinite alternate;transition:color var(--duration-smooth),background-image var(--duration-smooth)}@keyframes textGlowPremium{0%{filter:drop-shadow(0 0 15px var(--accent-glow));transform:translateY(0) scale(1)}to{filter:drop-shadow(0 0 30px var(--accent-glow));transform:translateY(-3px) scale(1.02)}}.heading-glow{position:absolute;top:50%;left:50%;width:120%;height:120%;background:radial-gradient(ellipse,var(--accent-glow) 0%,transparent 70%);transform:translate(-50%,-50%);animation:glowPulse var(--duration-epic) ease-in-out infinite;z-index:-1;transition:background var(--duration-smooth)}@keyframes glowPulse{0%,to{opacity:.3;transform:translate(-50%,-50%) scale(1)}50%{opacity:.7;transform:translate(-50%,-50%) scale(1.2)}}.heading-particles{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.particle{position:absolute;width:4px;height:4px;background:#b16006;border-radius:50%;animation:particleFloat var(--duration-epic) ease-in-out infinite;transition:background var(--duration-smooth)}.particle:nth-child(1){top:20%;left:10%;animation-delay:0s}.particle:nth-child(2){top:30%;right:15%;animation-delay:.5s}.particle:nth-child(3){bottom:25%;left:20%;animation-delay:1s}.particle:nth-child(4){bottom:35%;right:10%;animation-delay:1.5s}.particle:nth-child(5){top:50%;left:50%;animation-delay:2s}@keyframes particleFloat{0%,to{opacity:0;transform:translateY(0) scale(.5)}50%{opacity:1;transform:translateY(-20px) scale(1)}}.showcase-subtitle-wrapper{position:relative}.showcase-subheading-premium{font-size:var(--font-size-subtitle);font-weight:300;color:var(--text-muted);text-align:center;max-width:700px;margin:0 auto;position:relative;line-height:1.5;animation:fadeInUpPremium var(--duration-smooth) var(--ease-out-expo) .5s both;transition:color var(--duration-smooth)}@keyframes fadeInUpPremium{0%{opacity:0;transform:translateY(40px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.subtitle-underline{position:absolute;bottom:-10px;left:50%;width:0;height:2px;background:linear-gradient(90deg,transparent,var(--primary-accent),transparent);transform:translate(-50%);animation:underlineExpand var(--duration-cinematic) var(--ease-out-expo) 1s both;transition:background var(--duration-smooth)}@keyframes underlineExpand{0%{width:0}to{width:60%}}.showcase-wrapper-premium{position:relative;width:100%;height:var(--canvas-height);max-height:var(--canvas-max-height);perspective:var(--perspective-depth);perspective-origin:center center;z-index:5;border-radius:25px;overflow:hidden;background:radial-gradient(ellipse at center,#cc7b1208,#b75f02 70%),linear-gradient(135deg,#ffffff05,#ffffff03),var(--secondary-bg) linear-gradient(135deg,#ffffff05,#ffffff03),var(--secondary-bg);box-shadow:inset 0 0 120px var(--volumetric-light),var(--shadow-extreme),0 0 0 1px #ffffff1a;animation:canvasGlowPremium var(--duration-epic) ease-in-out infinite alternate;margin-top:-30px;transition:background var(--duration-smooth),box-shadow var(--duration-smooth)}@keyframes canvasGlowPremium{0%{box-shadow:inset 0 0 120px var(--volumetric-light),var(--shadow-extreme),0 0 0 1px #ffffff1a}to{box-shadow:inset 0 0 150px var(--volumetric-light),var(--shadow-extreme),0 0 0 1px #fff3}}.showcase-loading-premium{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;z-index:10}.loading-spinner{position:relative;width:120px;height:120px;margin:0 auto 2rem}.spinner-ring{position:absolute;border-radius:50%;border:2px solid transparent;animation:spinnerRotate var(--duration-cinematic) linear infinite}.ring-1{width:100%;height:100%;border-top-color:var(--primary-accent);animation-duration:1s}.ring-2{width:80%;height:80%;top:10%;left:10%;border-right-color:var(--secondary-accent);animation-duration:1.5s;animation-direction:reverse}.ring-3{width:60%;height:60%;top:20%;left:20%;border-bottom-color:var(--primary-accent);opacity:.6;animation-duration:2s}.spinner-core{position:absolute;top:50%;left:50%;width:20px;height:20px;background:var(--primary-accent);border-radius:50%;transform:translate(-50%,-50%);animation:coreGlow var(--duration-smooth) ease-in-out infinite alternate;transition:background var(--duration-smooth)}@keyframes spinnerRotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes coreGlow{0%{box-shadow:0 0 10px var(--accent-glow);transform:translate(-50%,-50%) scale(1)}to{box-shadow:0 0 20px var(--accent-glow);transform:translate(-50%,-50%) scale(1.2)}}.loading-text{margin-bottom:1.5rem}.loading-letter{font-size:var(--font-size-body);color:var(--text-secondary);animation:letterGlow var(--duration-smooth) ease-in-out infinite alternate;transition:color var(--duration-smooth)}@keyframes letterGlow{0%{opacity:.6;transform:translateY(0)}to{opacity:1;transform:translateY(-2px)}}.loading-progress{position:relative;width:200px;height:4px;background:#0000001a;border-radius:2px;margin:0 auto;overflow:hidden}.progress-bar{position:absolute;top:0;left:0;height:100%;background:linear-gradient(90deg,transparent 0%,var(--primary-accent) 50%,transparent 100%);border-radius:2px;animation:progressMove var(--duration-cinematic) ease-in-out infinite;transition:background var(--duration-smooth)}.progress-glow{position:absolute;top:-2px;left:0;width:100%;height:8px;background:linear-gradient(90deg,transparent 0%,var(--accent-glow) 50%,transparent 100%);border-radius:4px;animation:progressGlow var(--duration-cinematic) ease-in-out infinite;transition:background var(--duration-smooth)}@keyframes progressMove{0%{width:0%;left:0%}50%{width:100%;left:0%}to{width:0%;left:100%}}@keyframes progressGlow{0%,to{opacity:.3}50%{opacity:.8}}.showcase-canvas-container{position:relative;width:100%;height:100%}.showcase-canvas-premium{position:absolute;top:0;left:0;width:100%;height:100%;outline:none;cursor:grab;transition:cursor var(--duration-quick) ease;border-radius:20px}.showcase-canvas-premium:active{cursor:grabbing}.canvas-overlay-effects{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:2}.hover-indicator{position:absolute;width:60px;height:60px;opacity:0;transition:all var(--duration-quick) ease;transform:translate(-50%,-50%)}.indicator-ring{width:100%;height:100%;border:2px solid var(--primary-accent);border-radius:50%;animation:indicatorPulse var(--duration-smooth) ease-in-out infinite;transition:border-color var(--duration-smooth)}.indicator-pulse{position:absolute;top:50%;left:50%;width:20px;height:20px;background:var(--primary-accent);border-radius:50%;transform:translate(-50%,-50%);animation:pulseCore var(--duration-smooth) ease-in-out infinite alternate;transition:background var(--duration-smooth)}@keyframes indicatorPulse{0%,to{transform:scale(1);opacity:.6}50%{transform:scale(1.2);opacity:1}}@keyframes pulseCore{0%{transform:translate(-50%,-50%) scale(.8)}to{transform:translate(-50%,-50%) scale(1.2)}}.interaction-hints{position:absolute;bottom:20px;left:50%;transform:translate(-50%);display:flex;gap:2rem;opacity:.7;animation:hintsFloat var(--duration-epic) ease-in-out infinite}@keyframes hintsFloat{0%,to{transform:translate(-50%) translateY(0)}50%{transform:translate(-50%) translateY(-5px)}}.hint{display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;background:#ffffff1a;border-radius:20px;backdrop-filter:var(--blur-medium);-webkit-backdrop-filter:var(--blur-medium);border:1px solid rgba(255,255,255,.2)}.hint-icon{font-size:1.2rem;animation:iconBounce var(--duration-cinematic) ease-in-out infinite;color:var(--text-primary)}.hint-text{font-size:var(--font-size-small);color:#fff;white-space:nowrap}@keyframes iconBounce{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}.performance-indicators{position:absolute;top:20px;left:20px;display:flex;flex-direction:column;gap:1rem;z-index:3}.fps-counter,.quality-indicator{display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;background:#00000080;border-radius:15px;backdrop-filter:var(--blur-medium);-webkit-backdrop-filter:var(--blur-medium);border:1px solid rgba(255,255,255,.1);font-size:var(--font-size-small);color:var(--text-secondary)}.fps-value{color:#39ff14;font-weight:600;min-width:30px}.dark-mode .fps-value{color:#39ff14}.quality-dots{display:flex;gap:3px}.dot{width:6px;height:6px;border-radius:50%;background:#ffffff4d;transition:background var(--duration-quick) ease}.dot.active{background:var(--primary-accent);box-shadow:0 0 5px var(--primary-accent)}.showcase-controls-premium{position:absolute;bottom:5px;display:flex;flex-direction:row;gap:1rem;z-index:3}.control-group{display:flex;gap:.5rem}.control-btn{position:relative;display:flex;flex-direction:column;align-items:center;gap:.25rem;padding:.75rem;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:12px;color:var(--text-primary);cursor:pointer;transition:all var(--duration-quick) var(--ease-out-expo);backdrop-filter:var(--blur-medium);-webkit-backdrop-filter:var(--blur-medium);overflow:hidden}.control-btn:hover{background:#fff3;border-color:var(--primary-accent);transform:translateY(-2px);box-shadow:var(--shadow-medium)}.control-btn:active{transform:translateY(0)}.btn-icon{font-size:1.2rem;color:#B77E11;}.btn-label{font-size:.75rem;color:#fff;white-space:nowrap}.btn-ripple{position:absolute;top:50%;left:50%;width:0;height:0;background:var(--accent-glow);border-radius:50%;transform:translate(-50%,-50%);transition:all var(--duration-quick) ease-out}.control-btn:active .btn-ripple{width:100px;height:100px}.quality-controls{display:flex;align-items:center;gap:1rem;padding:1rem;background:#0000004d;border-radius:15px;backdrop-filter:var(--blur-medium);-webkit-backdrop-filter:var(--blur-medium);border:1px solid rgba(255,255,255,.1)}.quality-label{font-size:var(--font-size-small);color:var(--text-secondary);white-space:nowrap}.quality-slider{position:relative;width:100px}.slider{width:100%;height:4px;background:#fff3;border-radius:2px;outline:none;-moz-appearance:none;appearance:none;-webkit-appearance:none}.slider::-webkit-slider-thumb{-moz-appearance:none;appearance:none;-webkit-appearance:none;width:16px;height:16px;background:var(--primary-accent);border-radius:50%;cursor:pointer;box-shadow:0 0 10px var(--accent-glow);transition:background var(--duration-smooth)}.slider::-moz-range-thumb{width:16px;height:16px;background:var(--primary-accent);border-radius:50%;cursor:pointer;border:none;box-shadow:0 0 10px var(--accent-glow);transition:background var(--duration-smooth)}.showcase-status-bar{position:absolute;bottom:0;left:0;right:0;display:flex;justify-content:center;gap:2rem;padding:1rem;z-index:5}.status-item{display:flex;align-items:center;gap:.5rem;font-size:var(--font-size-small);color:var(--text-muted)}.status-icon{font-size:1rem;color:var(--text-muted);animation:statusGlow var(--duration-cinematic) ease-in-out infinite alternate}@keyframes statusGlow{0%{opacity:.6}to{opacity:1}}@media (max-width: 768px){.showcase-hook-premium{padding:2rem 1rem}.showcase-heading-premium,.showcase-subheading-premium{margin-top:-20px}.showcase-wrapper-premium{height:60vh;border-radius:20px}.interaction-hints{flex-direction:row;gap:1rem}.showcase-controls-premium{flex-direction:column;align-items:center;padding:10px;right:0;left:0}.control-group{margin:10px auto}.control-btn{padding:10px 35px;font-size:14px}.btn-icon{font-size:18px}.quality-controls{display:none}.quality-label{font-size:14px}.showcase-status-bar{flex-direction:column;gap:1rem;text-align:center}.audio-control-premium{top:1rem;right:1rem;width:60px;height:60px}}@media (max-width: 480px){.showcase-hook-premium{padding:1.5rem 1rem}.showcase-wrapper-premium{height:50vh;border-radius:15px}.performance-indicators{top:10px;left:10px;gap:.5rem;flex-direction:row}.fps-counter,.quality-indicator{padding:.25rem .5rem;font-size:.75rem}}.showcase-media-container{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;z-index:5}.showcase-media-item{position:absolute;width:80%;height:80%;max-width:600px;max-height:400px;border-radius:20px;overflow:hidden;cursor:pointer;transition:all var(--duration-smooth) var(--ease-out-expo);transform:translate(100%) scale(.8);opacity:.3}.showcase-media-item.active{transform:translate(0) scale(1);opacity:1;z-index:10}.media-container{position:relative;width:100%;height:100%;border-radius:20px;overflow:hidden;background:var(--secondary-bg);box-shadow:var(--shadow-hard);margin-top:-40px;transition:background var(--duration-smooth)}.media-content{width:100%;height:100%;object-fit:cover;transition:transform var(--duration-smooth) ease}.showcase-media-item:hover .media-content{transform:scale(1.05)}.media-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.3) 50%,rgba(0,0,0,.8) 100%);display:flex;flex-direction:column;justify-content:flex-end;padding:2rem;opacity:0;transition:opacity var(--duration-quick) ease}.showcase-media-item:hover .media-overlay{opacity:1}.media-info{margin-bottom:1rem}.media-title{font-size:var(--font-size-subtitle);font-weight:600;color:#C6CDD5;margin-bottom:.5rem;text-shadow:0 2px 10px rgba(0,0,0,.5)}.media-description{font-size:var(--font-size-body);color:#fff;line-height:1.4;text-shadow:0 1px 5px rgba(0,0,0,.5)}.media-actions{display:flex;gap:1rem}.media-btn{display:flex;align-items:center;gap:.5rem;padding:.75rem 1.5rem;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:25px;color:#fff;cursor:pointer;transition:all var(--duration-quick) var(--ease-out-expo);backdrop-filter:var(--blur-medium);-webkit-backdrop-filter:var(--blur-medium);font-size:var(--font-size-small)}.media-btn:hover{background:#fff3;border-color:var(--primary-accent);transform:translateY(-2px)}.media-btn:active{transform:translateY(0)}.media-glow{position:absolute;top:-2px;left:-2px;right:-2px;bottom:-2px;border-radius:22px;opacity:0;z-index:-1;filter:blur(10px);transition:opacity var(--duration-quick) ease;background:var(--primary-accent)}.showcase-media-item:hover .media-glow{opacity:.3}.media-modal{position:fixed;top:0;left:0;width:100%;height:100%;z-index:9999;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity var(--duration-smooth) ease,visibility var(--duration-smooth) ease}.media-modal.active{opacity:1;visibility:visible}.modal-backdrop{position:absolute;top:0;left:0;width:100%;height:100%;background:#000c;backdrop-filter:var(--blur-heavy);-webkit-backdrop-filter:var(--blur-heavy);z-index:1}.modal-content{position:relative;z-index:2;max-width:90vw;max-height:90vh;background:var(--tertiary-bg);border-radius:20px;overflow:hidden;box-shadow:var(--shadow-extreme);border:1px solid rgba(255,255,255,.1);transform:scale(.8) translateY(50px);opacity:0;transition:transform var(--duration-smooth) var(--ease-out-back),opacity var(--duration-smooth) ease,background var(--duration-smooth)}.media-modal.active .modal-content{transform:scale(1) translateY(0);opacity:1}.modal-close{position:absolute;top:1rem;right:1rem;width:40px;height:40px;border-radius:50%;background:#00000080;border:1px solid rgba(255,255,255,.2);color:var(--text-primary);font-size:1.5rem;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:10;transition:all var(--duration-quick) ease}.modal-close:hover{background:#000c;border-color:var(--primary-accent);transform:rotate(90deg)}.modal-media{width:100%;max-height:70vh;display:flex;align-items:center;justify-content:center;background:var(--primary-bg);transition:background var(--duration-smooth)}.modal-media img,.modal-media video{max-width:100%;max-height:100%;object-fit:contain}.modal-info{padding:2rem;background:var(--secondary-bg);text-align:center;transition:background var(--duration-smooth)}.modal-info h2{font-size:var(--font-size-subtitle);color:var(--text-primary);margin-bottom:1rem}.modal-info p{font-size:var(--font-size-body);color:var(--text-secondary);line-height:1.6}.media-tooltip{position:fixed;background:var(--tertiary-bg);border:1px solid rgba(255,255,255,.2);border-radius:10px;padding:1rem;max-width:300px;z-index:1000;transform:translate(-50%) translateY(-100%);box-shadow:var(--shadow-medium);backdrop-filter:var(--blur-medium);-webkit-backdrop-filter:var(--blur-medium);animation:tooltipFadeIn var(--duration-quick) ease;transition:background var(--duration-smooth)}@keyframes tooltipFadeIn{0%{opacity:0;transform:translate(-50%) translateY(-90%)}to{opacity:1;transform:translate(-50%) translateY(-100%)}}.media-tooltip h4{font-size:var(--font-size-body);color:var(--text-primary);margin-bottom:.5rem}.media-tooltip p{font-size:var(--font-size-small);color:var(--text-secondary);margin-bottom:.5rem}.media-tooltip small{font-size:.8rem;color:var(--text-muted)}.no-media-message{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;text-align:center;padding:2rem}.no-media-icon{font-size:4rem;margin-bottom:1rem;opacity:.5;color:var(--text-muted)}.no-media-message h3{font-size:var(--font-size-subtitle);color:var(--text-primary);margin-bottom:1rem}.no-media-message p{font-size:var(--font-size-body);color:var(--text-muted);margin-bottom:2rem}.retry-btn{padding:1rem 2rem;background:linear-gradient(135deg,var(--primary-accent) 0%,var(--secondary-accent) 100%);color:var(--secondary-bg);border:none;border-radius:25px;font-size:var(--font-size-body);font-weight:600;cursor:pointer;transition:all var(--duration-quick) var(--ease-out-expo);box-shadow:var(--shadow-medium)}.retry-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-hard)}.retry-btn:active{transform:translateY(0)}@media (max-width: 768px){.showcase-canvas-premium{margin-top:-60px}.showcase-media-item{width:90%;height:70%}.media-overlay{padding:1.5rem}.media-actions{flex-direction:column;gap:.5rem}.media-btn{justify-content:center;padding:.5rem 1rem}.modal-content{max-width:95vw;max-height:95vh}.modal-media{height:50vh}.modal-info{padding:1.5rem}}@media (max-width: 480px){.showcase-media-item{width:95%;height:60%}.media-overlay{padding:1rem}.media-title{font-size:var(--font-size-body)}.media-description{font-size:var(--font-size-small)}.modal-media{height:40vh}.modal-info{padding:1rem}.modal-info h2{font-size:var(--font-size-subtitle)}}