/* Lapisan "hidup" beranda situneo.my.id (A3, 5 Okt 2026) — diadaptasi dari compro (desain/situneo/compro-20261004/src/hidup.css).
   Semua gerak native (SVG + CSS); berhenti bila pengunjung memilih "kurangi gerak"; video hanya dimuat saat terlihat (beranda-hidup.js). */
:root { --hidup-emas: #D4AF37; }

/* ── Hero: motif kawung + cahaya pelan, perangkat melayang, HP 3D ── */
.hero { position: relative; isolation: isolate; overflow: hidden; }
.hidup-motif { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .9;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%23D4AF37' stroke-opacity='.2' stroke-width='1'%3E%3Cellipse cx='14' cy='14' rx='12.5' ry='6' transform='rotate(45 14 14)'/%3E%3Cellipse cx='42' cy='14' rx='12.5' ry='6' transform='rotate(-45 42 14)'/%3E%3Cellipse cx='14' cy='42' rx='12.5' ry='6' transform='rotate(-45 14 42)'/%3E%3Cellipse cx='42' cy='42' rx='12.5' ry='6' transform='rotate(45 42 42)'/%3E%3Ccircle cx='28' cy='28' r='2.4'/%3E%3Ccircle cx='0' cy='0' r='2.4'/%3E%3Ccircle cx='56' cy='0' r='2.4'/%3E%3Ccircle cx='0' cy='56' r='2.4'/%3E%3Ccircle cx='56' cy='56' r='2.4'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 62% 70% at 88% 40%, #000 0%, transparent 72%); mask-image: radial-gradient(ellipse 62% 70% at 88% 40%, #000 0%, transparent 72%); }
@media (max-width: 760px) { .hidup-motif { -webkit-mask-image: radial-gradient(ellipse 70% 60% at 100% 0%, #000 0%, transparent 72%); mask-image: radial-gradient(ellipse 70% 60% at 100% 0%, #000 0%, transparent 72%); opacity: .5; } }
.hidup-cahaya { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.hidup-cahaya i { position: absolute; width: 62vmax; height: 62vmax; border-radius: 50%; left: -24vmax; top: -34vmax;
  background: radial-gradient(circle, rgba(59, 110, 170, .30), rgba(59, 110, 170, 0) 62%); animation: hidup-hanyut 22s ease-in-out infinite alternate; }
.hidup-cahaya i + i { left: auto; right: -26vmax; top: 6vmax; background: radial-gradient(circle, rgba(212, 175, 55, .14), rgba(212, 175, 55, 0) 60%); animation-duration: 27s; animation-direction: alternate-reverse; }
@keyframes hidup-hanyut { to { transform: translate(9vmax, 7vmax) scale(1.12); } }
.hero .hero-grid { position: relative; z-index: 1; }
.sorot { position: relative; white-space: nowrap; font-style: normal; }
.sorot-garis { position: absolute; left: -2%; bottom: -.14em; width: 104%; height: .34em; overflow: visible; pointer-events: none; }
.sorot-garis path { fill: none; stroke: var(--hidup-emas); stroke-width: 5; stroke-linecap: round; vector-effect: non-scaling-stroke;
  stroke-dasharray: 100; stroke-dashoffset: 0; animation: hidup-garis 1.3s .5s cubic-bezier(.6, .1, .2, 1) both; }
@keyframes hidup-garis { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
.hero-perangkat { animation: hidup-melayang 7s ease-in-out infinite; }
.hero-perangkat .hp { transform: perspective(900px) rotateY(-14deg) rotateX(2deg); transform-origin: left center; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.hero-perangkat:hover .hp { transform: perspective(900px) rotateY(-3deg) translateY(-6px); }
@keyframes hidup-melayang { 0%, 100% { translate: 0 0; } 50% { translate: 0 -9px; } }

/* ── Divisi: ilustrasi bergerak di atas tiap kartu ── */
.ilus-wadah { margin: 0 0 16px; }
.ilus { display: block; width: 100%; height: auto; color: var(--warna); overflow: hidden; border-radius: 14px; background: rgba(255, 255, 255, .03); }
.ilus * { transform-box: fill-box; }
.ilus-melayang { animation: hidup-apung 6s ease-in-out infinite; }
.ilus-melayang.lambat { animation-duration: 8s; animation-delay: -3s; }
@keyframes hidup-apung { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.ilus-dev .baris { transform-origin: left center; animation: hidup-ketik 7s ease-in-out infinite; animation-delay: calc(var(--i) * .42s); }
@keyframes hidup-ketik { 0% { transform: scaleX(0); } 9%, 80% { transform: scaleX(1); } 90%, 100% { transform: scaleX(0); } }
.ilus-dev .kursor { animation: hidup-kedip 1s steps(1) infinite; }
@keyframes hidup-kedip { 50% { opacity: 0; } }
.ilus-kreatif .garis-gambar { stroke-dasharray: 100; stroke-dashoffset: 0; animation: hidup-gambar 6.5s ease-in-out infinite; }
@keyframes hidup-gambar { 0% { stroke-dashoffset: 100; } 38%, 84% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -100; } }
.ilus-kreatif .jangkar { animation: hidup-jangkar 6.5s ease infinite; }
@keyframes hidup-jangkar { 0%, 30% { opacity: 0; } 42%, 84% { opacity: 1; } 94%, 100% { opacity: 0; } }
.ilus-kreatif .contoh-warna { transform-origin: center; animation: hidup-pop 6.5s cubic-bezier(.3, 1.5, .5, 1) infinite; animation-delay: calc(var(--i) * .22s); }
@keyframes hidup-pop { 0%, 6% { transform: scale(0); } 14%, 86% { transform: scale(1); } 94%, 100% { transform: scale(0); } }
.ilus-digital .batang { transform-origin: bottom; animation: hidup-tumbuh 6s cubic-bezier(.3, .7, .2, 1) infinite; animation-delay: calc(var(--i) * .12s); }
@keyframes hidup-tumbuh { 0% { transform: scaleY(0); } 18%, 86% { transform: scaleY(1); } 96%, 100% { transform: scaleY(0); } }
.ilus-digital .tren { stroke-dasharray: 100; stroke-dashoffset: 0; animation: hidup-tren 6s ease infinite; }
@keyframes hidup-tren { 0%, 22% { stroke-dashoffset: 100; } 46%, 86% { stroke-dashoffset: 0; } 96%, 100% { stroke-dashoffset: 100; } }
.ilus-digital .titik-akhir { transform-origin: center; animation: hidup-titik 6s ease infinite; }
@keyframes hidup-titik { 0%, 44% { transform: scale(0); } 52%, 86% { transform: scale(1); } 94%, 100% { transform: scale(0); } }
.denyut { transform-origin: center; animation: hidup-denyut 2.6s ease-out infinite; }
@keyframes hidup-denyut { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(3); opacity: 0; } }
.ilus-serve .led { animation: hidup-led 2.2s steps(1) infinite; animation-delay: calc(var(--i) * -.37s); }
@keyframes hidup-led { 0%, 58% { opacity: 1; } 59%, 100% { opacity: .22; } }
.ilus-serve .aliran { animation: hidup-alir 1s linear infinite; }
@keyframes hidup-alir { to { stroke-dashoffset: -18; } }
.ilus-serve .perisai-denyut { transform-origin: center; animation: hidup-denyut-kecil 3s ease-out infinite; }
@keyframes hidup-denyut-kecil { 0% { transform: scale(1); opacity: .6; } 100% { transform: scale(1.5); opacity: 0; } }
/* diam sampai terlihat di layar (beranda-hidup.js menambah .tampak) */
.ilus:not(.tampak) *, .segel-resmi:not(.tampak) * { animation-play-state: paused !important; }

/* ── Karya Kami: tangkapan layar + HP 3D berisi rekaman layar asli ── */
.hidup-layar-wadah { position: relative; }
.hidup-layar { aspect-ratio: 16 / 10; background: rgba(15, 23, 42, .5); overflow: hidden; border-radius: var(--radius-lg, 16px) var(--radius-lg, 16px) 0 0; }
.hidup-layar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hidup-hp { position: absolute; right: 10px; bottom: -22px; width: 24%; min-width: 74px; max-width: 118px; z-index: 2;
  transform: perspective(900px) rotateY(-16deg) rotateX(3deg); transform-origin: left center; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.card:hover .hidup-hp { transform: perspective(900px) rotateY(-3deg) rotateX(0deg) translateY(-10px); }
.hp-bingkai { padding: 5px; border-radius: 20px; background: linear-gradient(145deg, #2A3446 0%, #0B1120 46%, #1C2433 100%);
  box-shadow: 0 22px 40px -14px rgba(2, 6, 23, .6), inset 0 0 0 1px rgba(255, 255, 255, .1), inset 0 0 0 2px rgba(0, 0, 0, .35); }
.hp-bingkai::before { content: ''; position: absolute; z-index: 2; top: 10px; left: 50%; width: 28%; height: 6px; translate: -50% 0; border-radius: 6px; background: #05080F; }
.hp-bingkai::after { content: ''; position: absolute; right: -2px; top: 22%; width: 3px; height: 13%; border-radius: 0 2px 2px 0; background: linear-gradient(#3A4558, #161D2B); }
.hp-kaca { position: absolute; inset: 5px; z-index: 1; border-radius: 15px; pointer-events: none; background: linear-gradient(125deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, 0) 30%); }
.hp-video { display: block; width: 100%; height: auto; aspect-ratio: 390 / 694; object-fit: cover; object-position: top; border-radius: 15px; background: #0B1120; }
.hidup-karya-isi { padding-top: 1.4rem !important; }

/* ── Segel resmi di "Yang Anda pegang" ── */
.seksi-pegang .container { position: relative; }
.segel-resmi { position: absolute; top: -26px; right: 8px; width: 118px; height: 118px; z-index: 2; filter: drop-shadow(0 14px 22px rgba(2, 6, 23, .28)); }
.segel-resmi-putar { transform-box: view-box; transform-origin: 100px 100px; animation: hidup-putar 36s linear infinite; }
@keyframes hidup-putar { to { transform: rotate(360deg); } }
/* HP: segel tidak lagi melayang di atas judul (5 Okt 2026: di layar 412 px segel menutupi akhir baris judul) — dipasang statis di kanan atas judul */
@media (max-width: 760px) { .segel-resmi { position: static; display: block; width: 72px; height: 72px; margin: 0 0 .6rem auto; } .hidup-hp { bottom: -14px; } }

@media (prefers-reduced-motion: reduce) {
  .hidup-cahaya i, .hero-perangkat, .sorot-garis path, .ilus *, .segel-resmi *, .denyut { animation: none !important; }
  .hero-perangkat .hp { transform: none; }
}