/** * Diesel Studio webx — ortak GTA-tarzı ambient arka plan * Sayfa: + js/ambient-bg.js */ html { min-height: 100%; background-color: #040406; } body.has-ambient-bg { --bg-deep: #020203; background-color: var(--bg-deep); min-height: 100vh; min-height: 100dvh; } /* * İçerik ambient üstünde kalsın. * header ve .toasts hariç: fixed/sticky + z-index sayfa CSS'inde kalmalı; * aksi halde main ile aynı z-index'te DOM sırasıyla main header'ın üstüne binip * mobilde hamburger tıklanmaz. Üstteki boşluk da header'ın fixed yerine relative * sayılması + body padding-top birleşiminden oluşuyordu. */ body.has-ambient-bg > *:not(.ambient-bg):not(header):not(script):not(.toasts):not(#profile-card-modal) { position: relative; z-index: 1; } /* GTA V intro benzeri: bulanık renkli ışık lekeleri (sabit tam ekran) */ .ambient-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; background: radial-gradient(ellipse 100% 80% at 50% 50%, #0a0c14 0%, #020203 55%, #010102 100%); } .ambient-bg__parallax { position: absolute; inset: 0; width: 100%; height: 100%; will-change: transform; transform: translate3d(0, 0, 0); } .ambient-mesh { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; opacity: 0.42; mix-blend-mode: soft-light; } .ambient-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; opacity: 0.38; display: block; } .ambient-blob { position: absolute; border-radius: 50%; filter: blur(56px); opacity: 0.5; mix-blend-mode: screen; will-change: transform, opacity; z-index: 2; } .ambient-grain { position: absolute; inset: 0; z-index: 10; opacity: 0.045; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E"); background-size: 200px 200px; pointer-events: none; } .ambient-vignette { position: absolute; inset: 0; z-index: 11; pointer-events: none; background: radial-gradient(ellipse 85% 75% at 50% 42%, transparent 22%, rgba(0, 0, 0, 0.35) 100%); box-shadow: inset 0 0 min(120px, 18vw) rgba(0, 0, 0, 0.55); } .ambient-blob--tiny { filter: blur(40px); opacity: 0.42; } .ambient-blob--small { filter: blur(48px); opacity: 0.46; } .ambient-blob--1 { width: min(38vw, 340px); height: min(38vw, 340px); left: -8%; top: 20%; background: radial-gradient(circle at 40% 40%, rgba(180, 220, 210, 0.9), rgba(40, 120, 130, 0.35) 45%, transparent 70%); animation: ambient-drift-a 19.5s ease-in-out infinite; } .ambient-blob--2 { width: min(44vw, 400px); height: min(34vw, 300px); right: -12%; top: -5%; background: radial-gradient(circle at 50% 50%, rgba(120, 40, 55, 0.85), rgba(60, 15, 25, 0.4) 50%, transparent 68%); animation: ambient-drift-b 22.5s ease-in-out infinite; animation-delay: -3.6s; } .ambient-blob--3 { width: min(42vw, 380px); height: min(32vw, 280px); left: 24%; bottom: -10%; background: radial-gradient(circle at 45% 45%, rgba(255, 160, 120, 0.75), rgba(200, 80, 60, 0.35) 48%, transparent 72%); animation: ambient-drift-c 21s ease-in-out infinite; animation-delay: -7.5s; } .ambient-blob--4 { width: min(28vw, 260px); height: min(28vw, 260px); right: 10%; bottom: 14%; background: radial-gradient(circle at 50% 50%, rgba(90, 70, 140, 0.55), rgba(40, 25, 80, 0.3) 55%, transparent 75%); animation: ambient-drift-d 24s ease-in-out infinite; animation-delay: -10.5s; } .ambient-blob--5 { width: min(32vw, 280px); height: min(28vw, 240px); left: 40%; top: -6%; background: radial-gradient(circle at 50% 50%, rgba(100, 130, 200, 0.45), rgba(30, 45, 90, 0.25) 50%, transparent 70%); animation: ambient-drift-e 16.5s ease-in-out infinite; animation-delay: -1.8s; } .ambient-blob--6 { width: min(34vw, 300px); height: min(26vw, 220px); left: -3%; bottom: 30%; background: radial-gradient(circle at 50% 50%, rgba(220, 200, 100, 0.35), rgba(100, 80, 30, 0.2) 55%, transparent 72%); animation: ambient-drift-f 25.5s ease-in-out infinite; animation-delay: -12s; } .ambient-blob--7 { width: min(22vw, 190px); height: min(22vw, 190px); left: 55%; top: 42%; background: radial-gradient(circle at 50% 50%, rgba(255, 140, 90, 0.55), rgba(180, 60, 40, 0.25) 50%, transparent 72%); animation: ambient-drift-g 21.6s ease-in-out infinite; animation-delay: -5.1s; } .ambient-blob--8 { width: min(14vw, 120px); height: min(14vw, 120px); right: 22%; top: 55%; background: radial-gradient(circle at 50% 50%, rgba(160, 210, 220, 0.5), rgba(50, 100, 120, 0.22) 55%, transparent 75%); animation: ambient-drift-h 18.6s ease-in-out infinite; animation-delay: -9s; } .ambient-blob--9 { width: min(30vw, 250px); height: min(24vw, 200px); left: 8%; bottom: 8%; background: radial-gradient(circle at 50% 50%, rgba(130, 90, 180, 0.45), rgba(50, 30, 90, 0.22) 52%, transparent 74%); animation: ambient-drift-i 22.8s ease-in-out infinite; animation-delay: -13.8s; } .ambient-blob--10 { width: min(18vw, 150px); height: min(18vw, 150px); right: 35%; top: 22%; background: radial-gradient(circle at 50% 50%, rgba(255, 200, 80, 0.4), rgba(140, 90, 20, 0.18) 55%, transparent 76%); animation: ambient-drift-j 20.4s ease-in-out infinite; animation-delay: -2.7s; } @keyframes ambient-drift-a { 0%, 100% { transform: translate(0, 0) scale(0.82); opacity: 0.4; } 25% { transform: translate(22vw, -14vh) scale(1.12); opacity: 0.55; } 50% { transform: translate(32vw, 10vh) scale(1.28); opacity: 0.62; } 75% { transform: translate(-10vw, 18vh) scale(0.9); opacity: 0.48; } } @keyframes ambient-drift-b { 0%, 100% { transform: translate(0, 0) scale(0.85); opacity: 0.38; } 25% { transform: translate(-28vw, 8vh) scale(1.2); opacity: 0.52; } 50% { transform: translate(-12vw, 22vh) scale(1.32); opacity: 0.58; } 75% { transform: translate(18vw, -12vh) scale(0.92); opacity: 0.45; } } @keyframes ambient-drift-c { 0%, 100% { transform: translate(0, 0) scale(0.8); opacity: 0.42; } 25% { transform: translate(18vw, 16vh) scale(1.22); opacity: 0.58; } 50% { transform: translate(-22vw, 12vh) scale(1.3); opacity: 0.65; } 75% { transform: translate(8vw, -20vh) scale(0.88); opacity: 0.48; } } @keyframes ambient-drift-d { 0%, 100% { transform: translate(0, 0) scale(0.88); opacity: 0.35; } 25% { transform: translate(-20vw, -16vh) scale(1.18); opacity: 0.48; } 50% { transform: translate(24vw, -8vh) scale(1.35); opacity: 0.55; } 75% { transform: translate(10vw, 20vh) scale(0.95); opacity: 0.42; } } @keyframes ambient-drift-e { 0%, 100% { transform: translate(0, 0) scale(0.78); opacity: 0.32; } 25% { transform: translate(14vw, -22vh) scale(1.25); opacity: 0.48; } 50% { transform: translate(-18vw, 6vh) scale(1.38); opacity: 0.52; } 75% { transform: translate(6vw, 20vh) scale(0.85); opacity: 0.4; } } @keyframes ambient-drift-f { 0%, 100% { transform: translate(0, 0) scale(0.84); opacity: 0.3; } 25% { transform: translate(-24vw, 14vh) scale(1.1); opacity: 0.42; } 50% { transform: translate(16vw, 18vh) scale(1.25); opacity: 0.48; } 75% { transform: translate(22vw, -14vh) scale(0.9); opacity: 0.38; } } @keyframes ambient-drift-g { 0%, 100% { transform: translate(0, 0) scale(0.88); opacity: 0.42; } 25% { transform: translate(26vw, 6vh) scale(1.08); opacity: 0.52; } 50% { transform: translate(-8vw, -18vh) scale(1.2); opacity: 0.55; } 75% { transform: translate(-20vw, 14vh) scale(0.92); opacity: 0.45; } } @keyframes ambient-drift-h { 0%, 100% { transform: translate(0, 0) scale(0.9); opacity: 0.38; } 25% { transform: translate(-16vw, -12vh) scale(1.05); opacity: 0.48; } 50% { transform: translate(20vw, 16vh) scale(1.15); opacity: 0.52; } 75% { transform: translate(12vw, -20vh) scale(0.95); opacity: 0.42; } } @keyframes ambient-drift-i { 0%, 100% { transform: translate(0, 0) scale(0.85); opacity: 0.36; } 25% { transform: translate(24vw, -10vh) scale(1.12); opacity: 0.5; } 50% { transform: translate(-14vw, 20vh) scale(1.22); opacity: 0.54; } 75% { transform: translate(-22vw, -8vh) scale(0.9); opacity: 0.4; } } @keyframes ambient-drift-j { 0%, 100% { transform: translate(0, 0) scale(0.86); opacity: 0.34; } 25% { transform: translate(-18vw, 18vh) scale(1.1); opacity: 0.46; } 50% { transform: translate(22vw, 4vh) scale(1.18); opacity: 0.5; } 75% { transform: translate(4vw, -16vh) scale(0.94); opacity: 0.4; } } @media (prefers-reduced-motion: reduce) { .ambient-blob { animation: none !important; } .ambient-canvas { display: none !important; } .ambient-bg__parallax { transform: none !important; } } @media (max-width: 640px) { .ambient-blob { filter: blur(44px); opacity: 0.4; } .ambient-blob--tiny { filter: blur(32px); } .ambient-blob--small { filter: blur(38px); } }