/* ============================================================================ LERA MOTION v2 — gerak otomatis untuk seluruh halaman leradigitalstore.com Dipasang dengan dua baris di : Tidak mengubah satu pun struktur HTML, warna, atau tata letak yang sudah ada. Semua gerak mati total bila perangkat meminta "kurangi gerak". ========================================================================== */ :root{ --lm-ez :cubic-bezier(.16,1,.3,1); /* kurva sinematik LERA */ --lm-ez2:cubic-bezier(.33,1,.68,1); /* kurva pendek untuk tombol */ --lm-op :1.05s; /* durasi kemunculan */ --lm-tr :1.25s; /* durasi geser */ } /* ========================================================================== 1. MUNCUL SAAT DIGULIR — reveal sinematik multi-arah ========================================================================== */ [data-lm]{ opacity:0; transition:opacity var(--lm-op) var(--lm-ez), transform var(--lm-tr) var(--lm-ez), filter var(--lm-tr) var(--lm-ez); } /* will-change hanya dipasang saat elemen sudah dekat layar, supaya HP tidak berat */ [data-lm].lm-arm:not(.lm-in){will-change:opacity,transform} [data-lm="up"] {transform:translate3d(0,34px,0)} [data-lm="rise"] {transform:translate3d(0,48px,0) scale(.988)} [data-lm="down"] {transform:translate3d(0,-26px,0)} [data-lm="left"] {transform:translate3d(-40px,0,0)} [data-lm="right"]{transform:translate3d(40px,0,0)} [data-lm="zoom"] {transform:translate3d(0,24px,0) scale(.962)} /* fokus lembut: sedikit buram lalu menajam — hanya untuk foto */ [data-lm="soft"] {transform:translate3d(0,20px,0) scale(1.035);filter:blur(9px)} [data-lm].lm-in{opacity:1;transform:none;filter:none} /* ========================================================================== 2. JUDUL UTAMA TERUNGKAP PER KATA ========================================================================== */ /* Memakai elemen khusus /, BUKAN , supaya aturan CSS lama seperti ".hero h1 span{color:...}" tidak ikut mewarnai pembungkus kata. */ lm-w{display:inline-block;overflow:hidden;vertical-align:bottom; padding-bottom:.09em;margin-bottom:-.09em;color:inherit;font:inherit} lm-w>lm-i{display:inline-block;color:inherit;font:inherit; opacity:0;transform:translate3d(0,108%,0); transition:transform 1.15s var(--lm-ez),opacity .8s var(--lm-ez)} .lm-head.lm-in lm-w>lm-i{opacity:1;transform:none} /* ========================================================================== 3. CAHAYA BERGERAK DI HERO (aurora berlapis + kilau berputar + butiran) ========================================================================== */ .lm-aurora{position:absolute;inset:-22% -12%;pointer-events:none;z-index:0; overflow:hidden;contain:paint} .lm-aurora i{position:absolute;display:block;border-radius:50%;filter:blur(64px)} .lm-aurora i:nth-child(1){width:54%;height:64%;left:57%;top:-20%;opacity:.55; background:radial-gradient(circle,rgba(37,99,235,.88),transparent 68%); animation:lmDrift1 23s ease-in-out infinite alternate} .lm-aurora i:nth-child(2){width:46%;height:56%;left:-10%;top:6%;opacity:.5; background:radial-gradient(circle,rgba(34,211,238,.5),transparent 68%); animation:lmDrift2 31s ease-in-out infinite alternate} .lm-aurora i:nth-child(3){width:40%;height:46%;left:22%;top:52%;opacity:.45; background:radial-gradient(circle,rgba(59,130,246,.55),transparent 70%); animation:lmDrift3 19s ease-in-out infinite alternate} .lm-aurora i:nth-child(4){width:30%;height:34%;left:70%;top:58%;opacity:.34; background:radial-gradient(circle,rgba(34,211,238,.45),transparent 72%); animation:lmDrift4 37s ease-in-out infinite alternate} .lm-aurora i:nth-child(5){width:26%;height:30%;left:34%;top:-14%;opacity:.3; background:radial-gradient(circle,rgba(59,130,246,.5),transparent 72%); animation:lmDrift5 27s ease-in-out infinite alternate} @keyframes lmDrift1{from{transform:translate3d(0,0,0) scale(1)} to{transform:translate3d(-9%,7%,0) scale(1.18)}} @keyframes lmDrift2{from{transform:translate3d(0,0,0) scale(1.07)}to{transform:translate3d(12%,-6%,0) scale(.92)}} @keyframes lmDrift3{from{transform:translate3d(0,0,0) scale(.93)} to{transform:translate3d(7%,-10%,0) scale(1.14)}} @keyframes lmDrift4{from{transform:translate3d(0,0,0) scale(1.1)} to{transform:translate3d(-13%,-8%,0)scale(.9)}} @keyframes lmDrift5{from{transform:translate3d(0,0,0) scale(.95)} to{transform:translate3d(9%,11%,0) scale(1.2)}} /* kilau berputar sangat pelan — memberi kesan kaca */ .lm-aurora u{position:absolute;left:50%;top:50%;width:165%;height:165%; transform:translate(-50%,-50%);border-radius:50%;opacity:.15;filter:blur(46px); background:conic-gradient(from 0deg,transparent 0deg,rgba(59,130,246,.62) 60deg, transparent 140deg,rgba(34,211,238,.5) 240deg,transparent 320deg); animation:lmSpin 52s linear infinite} @keyframes lmSpin{to{transform:translate(-50%,-50%) rotate(360deg)}} /* butiran halus supaya gradasi tidak terlihat "plastik" */ .lm-aurora s{position:absolute;inset:0;opacity:.055;text-decoration:none; background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")} .hero,.lm-hero{position:relative} .hero>*:not(.lm-aurora),.lm-hero>*:not(.lm-aurora){position:relative;z-index:1} /* ========================================================================== 4. GARIS PROGRES BACA ========================================================================== */ .lm-prog{position:fixed;top:0;left:0;width:100%;height:2.5px;z-index:200; transform:scaleX(0);transform-origin:0 50%;pointer-events:none; background:linear-gradient(90deg,#2563EB,#3B82F6 46%,#22D3EE); box-shadow:0 0 12px rgba(34,211,238,.5)} /* ========================================================================== 5. TITIK BRAND BERDENYUT ========================================================================== */ .lm-pulse{animation:lmPulse 2.8s ease-in-out infinite} @keyframes lmPulse{ 0%,100%{box-shadow:0 0 0 0 rgba(34,211,238,.45)} 70% {box-shadow:0 0 0 10px rgba(34,211,238,0)}} /* ========================================================================== 6. NAV SAAT DIGULIR ========================================================================== */ .nav{transition:box-shadow .45s var(--lm-ez),backdrop-filter .45s var(--lm-ez)} .nav.lm-stuck{box-shadow:0 8px 26px rgba(4,20,60,.3); -webkit-backdrop-filter:saturate(140%) blur(10px);backdrop-filter:saturate(140%) blur(10px)} /* ========================================================================== 7. ANGKA MENGHITUNG SENDIRI ========================================================================== */ .lm-count{font-variant-numeric:tabular-nums} /* ========================================================================== 8. KARTU & TOMBOL TERASA HIDUP ========================================================================== */ .panel,.product,.value,.card,.tk,.pk,.lg,.und,.mini>div{ transition:transform .45s var(--lm-ez),box-shadow .45s var(--lm-ez)} @media(hover:hover){ .panel:hover,.product:hover,.value:hover,.card:hover,.tk:hover,.lg:hover{ transform:translateY(-4px);box-shadow:0 20px 44px rgba(4,20,60,.14)} } .btn,.cta,.chip{transition:transform .2s var(--lm-ez2),filter .2s var(--lm-ez2), box-shadow .3s var(--lm-ez2),background-color .28s var(--lm-ez2),color .28s var(--lm-ez2)} .btn:active,.cta:active{transform:scale(.972)} /* kilau lembut melintas di tombol utama setiap ±8 detik */ .lm-sheen{position:relative;overflow:hidden;isolation:isolate} .lm-sheen::after{content:"";position:absolute;top:-30%;left:-150%;width:55%;height:160%; pointer-events:none;transform:skewX(-18deg); background:linear-gradient(100deg,transparent,rgba(255,255,255,.3),transparent); animation:lmSheen 8s ease-in-out infinite} @keyframes lmSheen{0%,74%{left:-150%}100%{left:180%}} /* ========================================================================== 9. HORMATI PENGATURAN PERANGKAT — matikan semuanya ========================================================================== */ @media(prefers-reduced-motion:reduce){ [data-lm]{opacity:1!important;transform:none!important;filter:none!important; transition:none!important;will-change:auto!important} lm-w>lm-i{opacity:1!important;transform:none!important;transition:none!important} .lm-aurora,.lm-prog{display:none!important} .lm-sheen::after{display:none!important} *{animation:none!important} }