/* ============================================================ RIPPLE — loader.css Loading Screen + Custom Cursor Tambahkan di ============================================================ */ /* ── CUSTOM CURSOR ───────────────────────────────────────── */ *, *::before, *::after { cursor: none !important; } .cursor-dot { position: fixed; top: 0; left: 0; width: 8px; height: 8px; background: #f3701e; border-radius: 50%; pointer-events: none; z-index: 99999; transform: translate(-50%, -50%); transition: transform 0.08s ease, background 0.2s ease, width 0.2s ease, height 0.2s ease; box-shadow: 0 0 10px rgba(243, 112, 30, 0.8), 0 0 20px rgba(243, 112, 30, 0.4); will-change: transform; } .cursor-ring { position: fixed; top: 0; left: 0; width: 36px; height: 36px; border: 1.5px solid rgba(243, 112, 30, 0.55); border-radius: 50%; pointer-events: none; z-index: 99998; transform: translate(-50%, -50%); transition: transform 0.14s ease, width 0.25s ease, height 0.25s ease, opacity 0.25s ease, border-color 0.25s ease; will-change: transform; } .cursor-ripple { position: fixed; top: 0; left: 0; width: 60px; height: 60px; border: 1px solid rgba(243, 112, 30, 0.2); border-radius: 50%; pointer-events: none; z-index: 99997; transform: translate(-50%, -50%); transition: transform 0.28s ease; will-change: transform; } /* Cursor hover states — triggered via JS class on body */ body.cursor-hover .cursor-dot { width: 12px; height: 12px; background: #B83A2D; box-shadow: 0 0 16px rgba(184, 58, 45, 0.9), 0 0 32px rgba(184, 58, 45, 0.5); } body.cursor-hover .cursor-ring { width: 52px; height: 52px; border-color: rgba(243, 112, 30, 0.8); } body.cursor-hover .cursor-ripple { width: 80px; height: 80px; border-color: rgba(243, 112, 30, 0.12); } body.cursor-click .cursor-dot { width: 5px; height: 5px; box-shadow: 0 0 20px rgba(243, 112, 30, 1); } body.cursor-click .cursor-ring { width: 48px; height: 48px; opacity: 0.4; } /* ── CLICK BURST ─────────────────────────────────────────── */ .cursor-burst { position: fixed; pointer-events: none; z-index: 99996; transform: translate(-50%, -50%); } .cursor-burst circle { animation: burstExpand 0.55s ease-out forwards; } @keyframes burstExpand { 0% { r: 4; opacity: 0.9; } 100% { r: 28; opacity: 0; } } /* ── LOADER OVERLAY ──────────────────────────────────────── */ #ripple-loader { position: fixed; inset: 0; background: #060910; z-index: 90000; display: flex; flex-direction: column; align-items: center; justify-content: center; transition: opacity 0.7s ease, visibility 0.7s ease; overflow: hidden; } #ripple-loader.fade-out { opacity: 0; visibility: hidden; } /* Radial ambient glow behind the animation */ #ripple-loader::before { content: ""; position: absolute; width: 500px; height: 500px; background: radial-gradient(circle, rgba(243,112,30,0.07) 0%, transparent 70%); border-radius: 50%; animation: loaderGlowPulse 3s ease-in-out infinite; } @keyframes loaderGlowPulse { 0%, 100% { transform: scale(1); opacity: 0.6; } 50% { transform: scale(1.3); opacity: 1; } } /* ── SVG RIPPLE RINGS ────────────────────────────────────── */ .loader-svg { position: relative; z-index: 2; margin-bottom: 40px; } .loader-ring { fill: none; stroke-linecap: round; transform-origin: center; } .loader-ring-1 { stroke: #f3701e; stroke-width: 1.5; animation: loaderRingExpand 2.4s ease-out infinite; } .loader-ring-2 { stroke: #f3701e; stroke-width: 1; animation: loaderRingExpand 2.4s ease-out 0.6s infinite; } .loader-ring-3 { stroke: rgba(243, 112, 30, 0.4); stroke-width: 0.8; animation: loaderRingExpand 2.4s ease-out 1.2s infinite; } .loader-ring-4 { stroke: rgba(243, 112, 30, 0.2); stroke-width: 0.5; animation: loaderRingExpand 2.4s ease-out 1.8s infinite; } @keyframes loaderRingExpand { 0% { r: 8; opacity: 1; stroke-width: inherit; } 70% { opacity: 0.4; } 100% { r: 95; opacity: 0; } } .loader-center-dot { fill: #f3701e; filter: drop-shadow(0 0 8px #f3701e) drop-shadow(0 0 20px rgba(243,112,30,0.6)); animation: loaderDotPulse 1.2s ease-in-out infinite; } @keyframes loaderDotPulse { 0%, 100% { r: 5; opacity: 1; } 50% { r: 7; opacity: 0.7; } } /* Rotating dashed orbit */ .loader-orbit { fill: none; stroke: rgba(243, 112, 30, 0.18); stroke-width: 0.8; stroke-dasharray: 4 8; animation: loaderOrbitSpin 8s linear infinite; transform-origin: center; } @keyframes loaderOrbitSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .loader-orbit-dot { fill: rgba(243, 112, 30, 0.6); animation: loaderOrbitSpin 8s linear infinite; transform-origin: 100px 100px; /* center of SVG */ } /* ── LOADER TEXT ─────────────────────────────────────────── */ .loader-wordmark { font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 8px; color: #f3701e; text-transform: uppercase; opacity: 0; animation: loaderWordmarkIn 0.6s ease forwards 0.3s; position: relative; z-index: 2; text-shadow: 0 0 20px rgba(243,112,30,0.5); } @keyframes loaderWordmarkIn { from { opacity: 0; letter-spacing: 16px; } to { opacity: 1; letter-spacing: 8px; } } .loader-tagline { font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 400; letter-spacing: 2.5px; color: rgba(232, 216, 201, 0.35); text-transform: uppercase; margin-top: 10px; opacity: 0; animation: loaderFadeIn 0.5s ease forwards 0.8s; position: relative; z-index: 2; } @keyframes loaderFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } /* ── PROGRESS BAR ────────────────────────────────────────── */ .loader-progress-wrap { position: absolute; bottom: 48px; left: 50%; transform: translateX(-50%); width: 180px; z-index: 2; } .loader-progress-bar { width: 100%; height: 1px; background: rgba(243, 112, 30, 0.12); border-radius: 2px; overflow: hidden; margin-bottom: 12px; } .loader-progress-fill { height: 100%; width: 0%; background: linear-gradient(90deg, #B83A2D, #f3701e); border-radius: 2px; box-shadow: 0 0 8px rgba(243, 112, 30, 0.6); transition: width 0.08s linear; } .loader-progress-pct { font-family: 'Inter', sans-serif; font-size: 10px; letter-spacing: 3px; color: rgba(243, 112, 30, 0.4); text-align: center; } /* Corner decorations */ .loader-corner { position: absolute; width: 20px; height: 20px; opacity: 0.25; } .loader-corner-tl { top: 28px; left: 28px; border-top: 1px solid #f3701e; border-left: 1px solid #f3701e; } .loader-corner-tr { top: 28px; right: 28px; border-top: 1px solid #f3701e; border-right: 1px solid #f3701e; } .loader-corner-bl { bottom: 28px; left: 28px; border-bottom: 1px solid #f3701e; border-left: 1px solid #f3701e; } .loader-corner-br { bottom: 28px; right: 28px; border-bottom: 1px solid #f3701e; border-right: 1px solid #f3701e; } /* ── SCROLL PROGRESS BAR (top of page) ──────────────────── */ #scroll-progress { position: fixed; top: 0; left: 0; height: 2px; width: 0%; background: linear-gradient(90deg, #B83A2D, #f3701e, #f5a623); z-index: 9999; transition: width 0.1s linear; box-shadow: 0 0 8px rgba(243, 112, 30, 0.6), 0 0 16px rgba(243, 112, 30, 0.3); }