/* ============================================================
   hero-scene.css — 3D Scene di .scene-host + hero fragmen logo
   Hook: 3 (scene parallax), 9 (scene entrance), 10 (ambient mesh glow),
         13 (cursor glow), P5 (hero fragmen logo), + rotasi lambat ring.
   Scene sekarang tinggal di section .scene-host (big-msg) — markup
   kontrak (di dalam section .scene-host, sebelum .scene-content):
   <div class="hero-scene" aria-hidden="true">
     <div class="scene-layer" data-depth="0.05">… ring …</div>
     <div class="scene-layer" data-depth="0.12">… kartu logo …</div>
     <div class="scene-layer" data-depth="0.22">… orb …</div>
     <div class="scene-layer ambient-layer" data-depth="0.03">… 3 blob .amb …</div>
   </div>
   <div class="hero-glow" aria-hidden="true"></div>
   Hero punya sistem sendiri: .hero-frags (fragmen SVG + canvas partikel).
   Catatan arsitektur:
   - premium.js menulis transform (rotateX/rotateY + translate depth)
     pada .hero-scene dan tiap .scene-layer via rAF+lerp, jadi CSS
     TIDAK menaruh transition/animation transform pada kedua elemen itu.
     Entrance Hook 9 karena itu hanya menganimasikan opacity.
   - Animasi idle float di-CSS-kan pada elemen dalam (.scene-ring,
     .scene-card, .scene-orb) supaya tidak bentrok dengan transform JS;
     rotasi ring ditaruh satu level lebih dalam lagi (pada <svg>).
   ============================================================ */

/* --- Panggung 3D (scene sekarang tinggal di section .scene-host) --- */
.scene-host{
  position:relative;
  perspective:1200px;
  perspective-origin:50% 40%;
}

.hero-scene{
  position:absolute;
  inset:0;
  z-index:0;                  /* di bawah .scene-content (z-index:1) */
  pointer-events:none;
  transform-style:preserve-3d;
  will-change:transform;
}

/* --- Hook 9 (scene): entrance sinematik — fade masuk setelah body.loaded.
   Sengaja HANYA opacity: premium.js menulis inline transform pada
   .hero-scene (rotateX/rotateY parallax), jadi transform/scale di sini
   akan langsung ditimpa JS dan menimbulkan loncatan. Opacity tidak
   pernah disentuh JS, jadi aman. --- */
.hero-scene{
  opacity:0;
  transition:opacity 1.2s cubic-bezier(0.22,1,0.36,1) 0.15s;
}
body.loaded .hero-scene{opacity:1}

/* Konten host selalu di atas scene */
.scene-content{position:relative;z-index:1}

/* ============================================================
   Hero fragmen logo — chaotic → structure (Hook P5, premium.js)
   Markup: .hero-frags > svg#ikavia-frags (16 .svg-fragment)
   + canvas#frag-particles. JS menulis inline transform/opacity
   per fragmen; state default CSS = logo UTUH statis (dipakai
   saat JS nonaktif / reduced-motion / mobile).
   ============================================================ */
.hero-frags{
  position:fixed;         /* tetap di layar selama scroll — perakitan terlihat sampai bawah */
  top:50%;
  right:-4%;
  height:92vh;
  aspect-ratio:681/861;
  transform:translateY(-50%);
  pointer-events:none;
  z-index:0;              /* di balik konten (section dibuat transparan di premium.css) */
}
.hero-frags svg{width:100%;height:100%;display:block;overflow:visible}
.svg-fragment{
  transform-box:fill-box;
  transform-origin:center;
  opacity:.13;              /* watermark tipis saat utuh (default statis) */
  will-change:transform,opacity;
}
.frag-particles{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  clip-path:url(#stemClip);
  -webkit-clip-path:url(#stemClip);
}

.scene-layer{
  position:absolute;
  transform-style:preserve-3d;
  will-change:transform;
}

/* --- Posisi default per layer (dipetakan dari data-depth kontrak) --- */

/* Ring besar — kanan-atas, sebagian keluar tepi (hero overflow:hidden) */
.scene-layer[data-depth="0.05"]{
  top:-12%;
  right:-14%;
  width:min(58vw,680px);
  aspect-ratio:1;
}

/* Kartu glass logo — kanan-tengah, sebagian keluar tepi agar tidak
   menutupi teks hero yang rata tengah */
.scene-layer[data-depth="0.12"]{
  top:38%;
  right:-2.5%;
  width:min(21vw,250px);
}

/* Layar menengah: dorong lebih keluar tepi & redupkan supaya teks tetap jelas */
@media (max-width:1100px){
  .scene-layer[data-depth="0.12"]{
    right:-7%;
    opacity:0.6;
  }
}

/* Orb tersebar — layer penuh, orb diposisikan sendiri di dalamnya */
.scene-layer[data-depth="0.22"]{
  inset:0;
}

/* --- Elemen visual pendukung (dipakai markup SVG agent lain) --- */

/* Cincin/outline besar: stroke hairline + glow lembut */
.scene-ring{
  width:100%;
  height:100%;
  display:block;
  color:var(--ink);
  filter:drop-shadow(0 32px 72px rgba(17,17,17,0.11));
  animation:scene-float-a 9s cubic-bezier(0.45,0,0.55,1) infinite;
}
/* (d) Rotasi lambat ditaruh pada <svg> di dalamnya, BUKAN pada .scene-ring
   itu sendiri — .scene-ring sudah memakai animation scene-float-a (transform),
   dan dua animasi transform pada elemen yang sama tidak berkomposisi
   (yang terakhir menang total). */
.scene-ring svg{
  width:100%;
  height:100%;
  display:block;
  transform-origin:center;
  transform-box:fill-box;
  animation:ring-spin 75s linear infinite;
}
@keyframes ring-spin{
  from{transform:rotate(0deg)}
  to{transform:rotate(360deg)}
}
.scene-ring .ring-stroke{stroke:rgba(0,0,0,0.06);stroke-opacity:0.9}
.scene-ring .ring-glow{stroke:rgba(17,17,17,0.15);stroke-opacity:0.65}

/* Kartu glass pembungkus logo */
.scene-card{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:28px;
  background:linear-gradient(150deg,rgba(255,255,255,0.82) 0%,rgba(255,255,255,0.58) 45%,rgba(245,245,247,0.62) 100%);
  -webkit-backdrop-filter:blur(24px) saturate(1.6);
  backdrop-filter:blur(24px) saturate(1.6);
  border:1px solid var(--hairline);
  border-radius:var(--r-lg);
  box-shadow:0 2px 4px rgba(29,29,31,0.04),
             0 16px 40px rgba(29,29,31,0.10),
             0 40px 80px rgba(17,17,17,0.10),
             inset 0 1px 0 rgba(255,255,255,0.85),
             inset 0 0 0 1px rgba(255,255,255,0.38);
  animation:scene-float-b 7s cubic-bezier(0.45,0,0.55,1) -2s infinite;
}
.scene-card img,
.scene-card svg{width:100%;height:auto;display:block}

/* Orb/chip kecil: bola kaca — highlight kiri-atas, accent tengah-bawah */
.scene-orb{
  position:absolute;
  width:var(--orb-size,56px);
  height:var(--orb-size,56px);
  border-radius:50%;
  background:radial-gradient(circle at 32% 28%,rgba(255,255,255,0.95) 0%,rgba(255,255,255,0.28) 18%,var(--accent) 55%,var(--accent-3) 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.45),
             inset -4px -6px 14px rgba(29,29,31,0.12),
             0 4px 10px rgba(17,17,17,0.12),
             0 18px 40px rgba(17,17,17,0.24);
  animation:scene-float-c 6s cubic-bezier(0.45,0,0.55,1) -1s infinite,
            scene-glow-pulse 6s ease-in-out -1s infinite;
}
.scene-orb::before{           /* glow ambient lembut di belakang orb */
  content:'';
  position:absolute;
  inset:-80%;
  border-radius:50%;
  background:radial-gradient(circle,rgba(17,17,17,0.28) 0%,rgba(80,80,80,0.09) 48%,transparent 72%);
  filter:blur(16px);
  z-index:-1;
}

/* Penempatan orb di dalam layer (mendukung sampai 3 orb); tiap orb sedikit
   divariasikan warna accent-nya agar tidak seragam */
.scene-orb:nth-of-type(1){--orb-size:64px;top:18%;left:14%}
.scene-orb:nth-of-type(2){--orb-size:40px;top:58%;left:6%;animation-delay:-3s,-3s;
  background:radial-gradient(circle at 32% 28%,rgba(255,255,255,0.92) 0%,rgba(255,255,255,0.24) 20%,var(--accent-2) 58%,var(--accent) 100%)}
.scene-orb:nth-of-type(3){--orb-size:28px;top:74%;right:22%;animation-delay:-4.5s,-4.5s;
  background:radial-gradient(circle at 32% 28%,rgba(255,255,255,0.92) 0%,rgba(255,255,255,0.22) 22%,var(--accent-3) 58%,var(--accent) 100%)}

/* ============================================================
   Hook 10 — Ambient mesh glow
   Markup (dipasang agent lain di dalam .hero-scene):
   <div class="scene-layer ambient-layer" data-depth="0.03">
     <span class="amb a1"></span><span class="amb a2"></span><span class="amb a3"></span>
   </div>
   - .ambient-layer ikut sistem parallax data-depth yang ada
     (premium.js menulis transform pada .scene-layer; blob .amb
     adalah anak, jadi drift-nya tidak bentrok dengan JS).
   - Warna sangat lembut dari palette accent; blur besar.
   ============================================================ */
.ambient-layer{
  inset:0;                    /* layer penuh, blob diposisikan sendiri */
}

.amb{
  position:absolute;
  border-radius:50%;
  filter:blur(100px);
  mix-blend-mode:multiply;   /* menyatu sebagai tint lembut di atas bg putih */
  pointer-events:none;
  animation:amb-drift 22s ease-in-out infinite alternate;
}

.amb.a1{                      /* kiri-atas */
  width:52vw;
  height:52vw;
  top:-18%;
  left:-14%;
  background:rgba(17,17,17,0.07);
  animation-duration:22s;
}
.amb.a2{                      /* kanan-tengah */
  width:44vw;
  height:44vw;
  top:22%;
  right:-12%;
  background:rgba(80,80,80,0.06);
  animation-duration:26s;
  animation-delay:-8s;
}
.amb.a3{                      /* bawah */
  width:55vw;
  height:55vw;
  bottom:-26%;
  left:18%;
  background:rgba(150,150,150,0.08);
  animation-duration:18s;
  animation-delay:-14s;
}

@keyframes amb-drift{
  from{transform:translate3d(-40px,-24px,0)}
  to{transform:translate3d(40px,28px,0)}
}

/* ============================================================
   Hook 13 — Cursor glow
   Markup (dipasang agent lain di dalam .hero, sebelum .container):
   <div class="hero-glow" aria-hidden="true"></div>
   - Titik tengah elemen ada di (0,0) via margin negatif, sehingga JS
     cukup menulis transform:translate3d(x,y,0) di posisi kursor (lerp).
   - z-index:0 → di bawah .hero .container (z-index:1).
   ============================================================ */
.hero-glow{
  position:absolute;
  top:0;
  left:0;
  width:500px;
  height:500px;
  margin:-250px 0 0 -250px; /* pusatkan pada titik (0,0) */
  transform:translate3d(var(--gx,0px),var(--gy,0px),0); /* posisi dari premium.js */
  border-radius:50%;
  background:radial-gradient(circle,rgba(17,17,17,0.14) 0%,rgba(17,17,17,0.06) 32%,rgba(80,80,80,0.03) 54%,transparent 74%);
  filter:blur(70px);
  pointer-events:none;
  opacity:0.55;
  will-change:transform;
  z-index:0;
}

/* --- Idle float & glow pulse (transform/opacity saja, GPU-safe) --- */
@keyframes scene-float-a{
  0%,100%{transform:translate3d(0,0,0) rotate(0deg)}
  50%{transform:translate3d(0,-12px,0) rotate(2deg)}
}
@keyframes scene-float-b{
  0%,100%{transform:translate3d(0,0,0)}
  50%{transform:translate3d(0,-10px,0)}
}
@keyframes scene-float-c{
  0%,100%{transform:translate3d(0,0,0)}
  50%{transform:translate3d(0,-8px,0)}
}
@keyframes scene-glow-pulse{
  0%,100%{opacity:0.85}
  50%{opacity:1}
}

/* --- Mobile & pointer kasar: layer 3D (ring/kartu/orb) disembunyikan,
      hero tetap rapi. Pengecualian Hook 10: ambient mesh boleh tampil
      statis & lebih redup (tanpa drift, tanpa parallax — JS parallax
      sudah di-guard pointer:fine). Hook 13 cursor glow dimatikan. --- */
@media (max-width:767px), (pointer:coarse){
  .hero-scene .scene-layer:not(.ambient-layer){display:none}
  .ambient-layer .amb{
    animation:none;
    opacity:0.6;
  }
  .hero-glow{display:none}
  .hero-frags{right:-35%}
  .frag-particles{display:none}
}

/* --- Reduced motion: semua animasi mati; entrance scene langsung
      tampil tanpa transisi; cursor glow disembunyikan. Rotasi/parallax
      JS sudah di-guard di premium.js --- */
@media (prefers-reduced-motion:reduce){
  .scene-ring,
  .scene-ring svg,
  .scene-card,
  .scene-orb,
  .amb{
    animation:none;
  }
  .hero-scene{
    opacity:1;
    transition:none;
  }
  .hero-glow{display:none}
  .frag-particles{display:none}
}