/* * Gerak tema Clay (LEX-246) -- diadaptasi dari bahasa gerak gensflo.com * (diukur 25 Okt 2026 dari CSS berandanya): satu easing pegas untuk semua, * kartu naik + miring sedikit dengan ikon bergoyang, tombol mengembang saat * di-hover dan "terpencet" saat ditekan, chip/lencana melompat kecil, hiasan * melayang pelan. * * Dimuat di SEMUA halaman Clay, sesudah phase1..4 (base.html). * - Efek hover hanya untuk perangkat yang benar-benar punya hover * (`hover: hover` + `pointer: fine`). Di HP, `:hover` menempel sesudah * disentuh; kartu yang tetap miring sesudah ditap terlihat seperti rusak. * Di HP yang ada hanya umpan balik tekan (`:active`). * - `prefers-reduced-motion` di style.css sudah memotong semua durasi animasi * dan transisi; `floaty` dimatikan lagi di bawah supaya tidak tersisa satu * bingkai pun. */ :root { --clay-pegas: cubic-bezier(.34, 1.56, .64, 1); --clay-angkat: 0 26px 44px rgba(89, 66, 112, .2), inset 0 2px 0 rgba(255, 255, 255, .7); } @keyframes clay-goyang { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(9deg) scale(1.12); } 40% { transform: rotate(-9deg); } 60% { transform: rotate(6deg) scale(1.06); } 80% { transform: rotate(-3deg); } } @keyframes clay-melayang { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } /* ---- Transisi dasar: semuanya memakai pegas yang sama ---- */ .clay-button, .header-cta, .hero-cta, .clay-card, .experience-card, .destination-card, .step-card, .testimonial, .icon-button, .clay-action, .favorite-btn, .menu-toggle, .clay-pill, .card-badge, .visual-tag, .filter-tab, .eyebrow, .brand-mark, .hero-story-chip, .hero-cta-chip, .category-icon img, .step-icon, .step-icon img, .field-icon, .testimonial-user > span, .site-footer a, .feature-list li { transition: transform .32s var(--clay-pegas), box-shadow .3s ease, background-color .2s ease, color .2s ease, filter .2s ease; } /* ---- Tekan (semua perangkat, termasuk HP) ---- */ .clay-button:active, .header-cta:active { transform: translateY(3px) scale(.97); filter: saturate(.95); } .icon-button:active, .clay-action:active, .favorite-btn:active, .menu-toggle:active { transform: scale(.88); } .category-card:active, .experience-card:active, .destination-card:active { transform: scale(.985); } /* ---- Hiasan melayang ---- */ .hero-blob { animation: clay-melayang 7s ease-in-out infinite; } .hero-blob--mint { animation-delay: -3.5s; } @media (hover: hover) and (pointer: fine) { /* Tombol mengembang. */ .clay-button:hover, .header-cta:hover { transform: translateY(-3px) scale(1.03); } .hero-cta:hover { transform: translateY(-3px) scale(1.02); } /* Kartu naik + miring tipis; ikonnya bergoyang. Kartu yang sangat lebar (ajakan pesan, ringkasan ulasan, hero) tidak dimiringkan -- blok selebar layar yang berputar terlihat goyah, bukan hidup. */ .category-card:hover, .step-card:hover { transform: translateY(-10px) rotate(-1.2deg); box-shadow: var(--clay-angkat); } .experience-card:hover { transform: translateY(-8px) rotate(-.8deg); box-shadow: var(--clay-angkat); } .destination-card:hover { transform: translateY(-6px) rotate(.6deg); } .testimonial:hover { transform: translateY(-4px); } .category-card:hover .category-icon img, .step-card:hover .step-icon img, .testimonial:hover .testimonial-user > span { animation: clay-goyang .6s ease; } /* Tombol bulat, chip, lencana. */ .icon-button:hover, .clay-action:hover { transform: translateY(-2px) rotate(10deg); } .favorite-btn:hover { animation: clay-goyang .6s ease; } .clay-pill:hover, .card-badge:hover, .visual-tag:hover, .eyebrow:hover { transform: translateY(-3px) scale(1.04); } .filter-tab:not(.is-active):hover { transform: translateY(-2px); } .hero-story:hover .hero-story-chip { transform: scale(1.14); } .field-icon:hover, .search-field:hover .field-icon { transform: rotate(-8deg) scale(1.08); } /* Merek dan tautan. */ .brand:hover .brand-mark { transform: rotate(-3deg) scale(1.05); } .site-footer a:hover { transform: translateX(4px); } .feature-list li:hover { transform: translateX(4px); } } /* * ---- Putaran 2 (25 Okt): semua elemen yang bisa diklik tapi belum bergerak ---- * Dipetakan dari seluruh /