/* ================================================================ DISKOMINFO — Lapisan 3D & Aksen Gerak Canvas WebGL (hero) · fallback statis · aksen ringan (CSS/2D) Dipasang setelah diskominfo-design.css ================================================================ */ /* ---------------------------------------------------------------- CANVAS GENERIK #hero-canvas distyle di design.css (canvas WebGL utama). .dk-accent-canvas: canvas 2D ringan untuk aksen section. ---------------------------------------------------------------- */ .dk-accent-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 1s ease; } .dk-accent-canvas.dk-3d-ready { opacity: 1; } /* Pastikan konten section duduk di atas canvas aksen */ .dk-has-accent { position: relative; } .dk-has-accent > .container, .dk-has-accent > .dk-section-inner { position: relative; z-index: 1; } /* ---------------------------------------------------------------- AKSEN GRADIENT-MESH (CSS murni — "3D-feel" tanpa WebGL) Dipakai di section layanan/berita/sosial sebagai latar. ---------------------------------------------------------------- */ .dk-mesh { position: absolute; inset: -10% -5%; z-index: 0; pointer-events: none; background: radial-gradient(420px circle at 18% 25%, rgba(239,68,68,0.16), transparent 55%), radial-gradient(460px circle at 82% 70%, rgba(251,191,36,0.12), transparent 55%); filter: blur(20px); animation: dkMeshDrift 18s ease-in-out infinite alternate; } @keyframes dkMeshDrift { 0% { transform: translate3d(0, 0, 0) scale(1); } 100% { transform: translate3d(2%, -2%, 0) scale(1.06); } } /* ---------------------------------------------------------------- TILT 3D (kartu) — JS menambah rotasi via custom property ---------------------------------------------------------------- */ .dk-tilt { transform-style: preserve-3d; transition: transform .25s cubic-bezier(.4,0,.2,1); will-change: transform; } .dk-tilt-inner { transform: translateZ(28px); } /* Aktif hanya pada perangkat hover + pointer halus (desktop) */ @media (hover: none), (pointer: coarse) { .dk-tilt { transform: none !important; } } /* ---------------------------------------------------------------- STATE: 3D DINONAKTIFKAN Ditambahkan ke oleh diskominfo-3d.js bila guard gagal (reduced-motion / mobile / save-data / low-memory / no-webgl). Semua aksen gerak dimatikan; fallback statis ditampilkan. ---------------------------------------------------------------- */ html.dk-no-3d #hero-canvas, html.dk-no-3d .dk-accent-canvas { display: none !important; } html.dk-no-3d .dk-mesh { animation: none; } html.dk-no-3d .dk-tilt { transform: none !important; } /* Saat 3D mati, kembalikan gambar hero ke opasitas penuh sebagai poster */ html.dk-no-3d #hero-slider .hero-slide img { opacity: 0.7; } /* ---------------------------------------------------------------- HORMATI prefers-reduced-motion (lapisan kedua, selain JS guard) ---------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { #hero-canvas, .dk-accent-canvas { display: none !important; } .dk-mesh { animation: none; } .dk-tilt { transform: none !important; } #hero-slider .hero-slide img { opacity: 0.7; } }