/* =========================================================
   DIGITAL.LIVOERA.COM — EXTRA LAYER
   Ditulis terpisah dari style.css utama (yang dipakai bareng
   livoera.com) supaya animasi & komponen khusus microsite ini
   nggak numpang di file yang dipakai situs lain.
   ========================================================= */

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition-duration:.001ms !important; }
}

/* ---------- HERO ORBS ---------- */
.hero-orbs{ position:absolute; inset:0; overflow:hidden; z-index:0; pointer-events:none; }
.orb{ position:absolute; border-radius:50%; filter:blur(70px); opacity:.18; animation:orbFloat 18s cubic-bezier(.37,0,.63,1) infinite; will-change:transform; }
.orb-1{ width:260px; height:260px; background:var(--tech); top:-60px; left:-60px; animation-delay:0s; }
.orb-2{ width:200px; height:200px; background:var(--craft); top:40px; right:-40px; animation-delay:-6s; }
.orb-3{ width:160px; height:160px; background:var(--gold); bottom:-70px; left:35%; animation-delay:-12s; }
@keyframes orbFloat{ 0%,100%{ transform:translate3d(0,0,0); } 50%{ transform:translate3d(6px,-8px,0); } }
.page-hero{ position:relative; overflow:hidden; }
.page-hero .container-narrow{ position:relative; z-index:1; }

/* ---------- FLOATING CHIPS ---------- */
.floating-chips{ display:flex; gap:10px; flex-wrap:wrap; margin-top:26px; position:relative; z-index:1; }
.f-chip{ background:var(--paper); border:1.5px solid var(--line); padding:8px 16px; border-radius:999px; font-size:13.5px; font-weight:600; box-shadow:var(--shadow-sm); display:inline-flex; align-items:center; gap:6px; animation:chipBob 7s cubic-bezier(.37,0,.63,1) infinite; will-change:transform; }
.f-chip:nth-child(2){ animation-delay:-2.3s; }
.f-chip:nth-child(3){ animation-delay:-4.6s; }
@keyframes chipBob{ 0%,100%{ transform:translate3d(0,0,0); } 50%{ transform:translate3d(0,-3px,0); } }

/* ---------- TECH MARQUEE ---------- */
.marquee{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.marquee-track{ display:flex; gap:14px; width:max-content; animation:marqueScroll 42s linear infinite; will-change:transform; }
.marquee:hover .marquee-track{ animation-play-state:paused; }
@keyframes marqueScroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ---------- HOVER LIFT (kartu layanan & studi kasus) ---------- */
.card.tech, .card.craft{ transition:transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s cubic-bezier(.22,1,.36,1); }
.card.tech:hover, .card.craft:hover{ transform:translateY(-4px); box-shadow:0 16px 30px rgba(31,92,107,.10); }
.card .icon{ transition:transform .3s cubic-bezier(.22,1,.36,1); }
.card:hover .icon{ transform:scale(1.06); }

/* ---------- SHOWCASE: PHONE FRAMES ---------- */
.showcase-rail{ display:flex; gap:34px; justify-content:center; flex-wrap:wrap; padding:20px 0 10px; }
.phone{ width:196px; background:#161616; border-radius:34px; padding:9px; box-shadow:0 20px 40px rgba(20,20,20,.2); position:relative; animation:phoneFloat 9s cubic-bezier(.37,0,.63,1) infinite; will-change:transform; }
.phone::before{ content:''; position:absolute; top:20px; left:50%; transform:translateX(-50%); width:52px; height:6px; border-radius:4px; background:#000; z-index:2; }
.phone:nth-child(1){ --rot:-1.2deg; animation-delay:0s; }
.phone:nth-child(2){ --rot:.8deg; animation-delay:-2.25s; }
.phone:nth-child(3){ --rot:-.8deg; animation-delay:-4.5s; }
.phone:nth-child(4){ --rot:1.2deg; animation-delay:-6.75s; }
.phone:hover{ animation-play-state:paused; }
@keyframes phoneFloat{ 0%,100%{ transform:translate3d(0,0,0) rotate(var(--rot)); } 50%{ transform:translate3d(0,-5px,0) rotate(var(--rot)); } }
.phone-screen{ background:#fff; border-radius:26px; overflow:hidden; height:360px; display:flex; flex-direction:column; padding-top:26px; }

.mock-nav{ height:26px; margin:0 14px 10px; border-radius:6px; display:flex; align-items:center; gap:5px; padding:0 8px; }
.mock-dot{ width:6px; height:6px; border-radius:50%; }
.mock-block{ border-radius:8px; margin:0 14px 8px; }
.mock-line{ height:8px; border-radius:5px; margin:0 14px 7px; }
.mock-btn{ height:20px; width:70px; border-radius:999px; margin:6px 14px 0; }
.mock-grid{ display:grid; grid-template-columns:1fr 1fr; gap:6px; margin:0 14px; }
.mock-grid .mock-block{ margin:0; aspect-ratio:1/1; }
.mock-chat{ margin:6px 14px; padding:7px 10px; border-radius:12px; font-size:0; max-width:70%; }

.showcase-caption{ text-align:center; margin-top:10px; font-size:13px; font-weight:600; color:var(--ink-soft); }
.showcase-note{ text-align:center; font-size:12.5px; color:var(--ink-soft); opacity:.8; max-width:520px; margin:22px auto 0; }

@media (max-width:900px){
  .showcase-rail{ gap:20px; }
  .phone{ width:150px; }
  .phone-screen{ height:280px; }
}