/* ========================================================================== Tutsy ID — Animasi dekoratif (laser border + glow/sparkle trail) -------------------------------------------------------------------------- • Semua class ber-prefix "tutsy-" → tidak bentrok dengan CSS Nicepage (u-*). • Aktif hanya jika JS menambah class "tutsy-animations-on" ke . • Hormati prefers-reduced-motion (semua animasi dimatikan). ========================================================================== */ /* ========================================================================== A. LASER BORDER BERJALAN (searah jarum jam) Layer fixed menutupi viewport, di bawah widget WA (z-index 9990). ========================================================================== */ body.tutsy-animations-on .tutsy-laser-layer { position: fixed; inset: 0; z-index: 9989; /* di bawah WA widget 9990 */ pointer-events: none; /* tidak menghalangi klik */ overflow: hidden; } /* ---- Komet laser: garis tipis 3px x 220px, gradient pastel + glow ---- Komet 1 = ::before (pink → gold), Komet 2 = ::after (cyan → lavender). Posisi awal: tengah sisi atas (left:50%, top:0, margin men-center-kan). */ body.tutsy-animations-on .tutsy-laser-layer::before, body.tutsy-animations-on .tutsy-laser-layer::after { content: ""; position: absolute; left: 50%; top: 0; width: 220px; height: 3px; margin-left: -110px; /* center X di 50vw */ margin-top: -1.5px; /* center Y di tepi atas */ border-radius: 999px; background-repeat: no-repeat; will-change: transform; /* 3 animasi sekaligus: jalur laser (14s), geser glitter, kedip lembut */ animation-name: tutsyLaserPath, tutsyGlitterShift, tutsyGlitterPulse; animation-duration: 14s, 1.4s, 2.2s; animation-timing-function: linear, linear, ease-in-out; animation-iteration-count: infinite, infinite, infinite; animation-delay: 0s, 0s, 0s; } /* Komet 1 — pink → gold, dengan titik-titik sparkle (glitter) */ body.tutsy-animations-on .tutsy-laser-layer::before { background-image: radial-gradient(circle, rgba(255, 255, 255, 0.95) 0 1.5px, transparent 2.5px), radial-gradient(circle, rgba(255, 255, 255, 0.75) 0 1px, transparent 2px), linear-gradient(90deg, #E75480 0%, #F9A8D4 22%, #FDE68A 50%, #FFD6A5 76%, #E75480 100%); background-size: 60px 20px, 90px 30px, 300% 100%; background-position: 0 0, 0 0, 0% 0; box-shadow: 0 0 8px 1px rgba(231, 84, 128, 0.9), 0 0 26px 6px rgba(231, 84, 128, 0.55), 0 0 60px 16px rgba(253, 230, 138, 0.28); } /* Komet 2 — cyan → lavender; delay setengah durasi (mulai t = -7s) */ body.tutsy-animations-on .tutsy-laser-layer::after { background-image: radial-gradient(circle, rgba(255, 255, 255, 0.95) 0 1.5px, transparent 2.5px), radial-gradient(circle, rgba(255, 255, 255, 0.75) 0 1px, transparent 2px), linear-gradient(90deg, #67E8F9 0%, #A5F3FC 22%, #C4B5FD 55%, #DDD6FE 78%, #67E8F9 100%); background-size: 60px 20px, 90px 30px, 300% 100%; background-position: 0 0, 0 0, 0% 0; box-shadow: 0 0 8px 1px rgba(103, 232, 249, 0.9), 0 0 26px 6px rgba(103, 232, 249, 0.55), 0 0 60px 16px rgba(196, 181, 253, 0.3); animation-delay: -7s, 0s, 0s; /* mulai di tengah siklus → 2 komet selalu jalan */ } /* ---- Jalur laser searah jarum jam (loop 0%–50%, sisanya otomatis mirror). Rute: tengah atas → kanan atas → kanan bawah → kiri bawah → kiri atas → kembali tengah atas. Semua segmen linear; rotasi terjadi di pojok. */ @keyframes tutsyLaserPath { 0% { transform: translate(0, 0) rotate(0deg); } 10% { transform: translate(calc(50vw - 110px), 0) rotate(0deg); } 12.5% { transform: translate(calc(50vw - 110px), 0) rotate(90deg); } 22.5% { transform: translate(calc(50vw - 110px), calc(100vh - 110px)) rotate(90deg); } 25% { transform: translate(calc(50vw - 110px), calc(100vh - 110px)) rotate(180deg); } 35% { transform: translate(calc(-50vw + 110px), calc(100vh - 110px)) rotate(180deg); } 37.5% { transform: translate(calc(-50vw + 110px), calc(100vh - 110px)) rotate(270deg); } 47.5% { transform: translate(calc(-50vw + 110px), 0) rotate(270deg); } 50% { transform: translate(0, 0) rotate(360deg); } } /* Glitter: geser gradient (background-size 300%) + titik sparkle bergerak */ @keyframes tutsyGlitterShift { 0% { background-position: 0 0, 0 0, 0% 0; } 100% { background-position: 60px 0, 90px 0, 100% 0; } } /* Kedip lembut (opacity + brightness) */ @keyframes tutsyGlitterPulse { 0%, 100% { opacity: 1; filter: brightness(1); } 50% { opacity: 0.82; filter: brightness(1.3); } } /* ========================================================================== B. EFEK MOUSE (desktop only — JS tidak membuat elemen ini di layar sentuh) ========================================================================== */ /* ---- Glow lembut mengikuti kursor: radial-gradient pastel + blur ---- Posisi di-set via transform (translate3d) oleh JS → murah untuk GPU. */ body.tutsy-animations-on .tutsy-glow { position: fixed; left: 0; top: 0; width: 350px; height: 350px; margin: -175px 0 0 -175px; /* pusat elemen = posisi kursor */ z-index: 9988; pointer-events: none; border-radius: 50%; background: radial-gradient( circle, rgba(231, 84, 128, 0.4) 0%, rgba(103, 232, 249, 0.28) 32%, rgba(196, 181, 253, 0.14) 58%, transparent 72% ); filter: blur(18px); mix-blend-mode: screen; opacity: 0; /* hidden sampai mouse masuk viewport */ transform: translate3d(-9999px, -9999px, 0); transition: opacity 0.5s ease; will-change: transform; } body.tutsy-animations-on .tutsy-glow.tutsy-glow--visible { opacity: 0.3; /* efektif ±0.12 di pusat setelah blend */ } /* ---- Sparkle trail: partikel kecil yang di-spawn JS ---- Animasi pop (fade + naik + scale) 700ms via CSS — JS hanya spawn/hapus. */ body.tutsy-animations-on .tutsy-sparkle-layer { position: fixed; inset: 0; z-index: 9988; pointer-events: none; } body.tutsy-animations-on .tutsy-sparkle { position: absolute; width: 6px; height: 6px; border-radius: 50%; pointer-events: none; opacity: 0.95; will-change: transform, opacity; animation: tutsySparklePop 0.7s ease-out forwards; } body.tutsy-animations-on .tutsy-sparkle--star { border-radius: 0; clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); } @keyframes tutsySparklePop { 0% { opacity: 0.95; transform: translate3d(0, 0, 0) scale(0.6); } 100% { opacity: 0; transform: translate3d(var(--tutsy-drift-x, 0px), -16px, 0) scale(2.1); } } /* ========================================================================== AKSESIBILITAS & PERFORMA ========================================================================== */ /* Hormati prefers-reduced-motion: matikan SEMUA animasi dekoratif */ @media (prefers-reduced-motion: reduce) { body.tutsy-animations-on .tutsy-laser-layer, body.tutsy-animations-on .tutsy-glow, body.tutsy-animations-on .tutsy-sparkle-layer { display: none !important; } body.tutsy-animations-on .tutsy-laser-layer::before, body.tutsy-animations-on .tutsy-laser-layer::after { animation: none !important; } }