/* ===========================================================
   Vosss — vector hero scenes (js/hero-vector.js)
   Replaces the paper-collage canvas. Each page gets its own scene,
   picked with data-collage="…" on the old <canvas id="hero3d">:
     home        the build: a site assembles, then goes live
     layanan     a glowing circuit board linking the four services
     proyek      a live operations dashboard (kasir, gudang, distribusi)
     portofolio  a deck of templates that fans out and gets re-coloured
     kontak      a WhatsApp-style chat that ends in a booked consultation
     blog        an editor page writing itself
   Timed scenes restart from JS (.hv-run / .hv-out). Ambient loops run
   on their own. Everything pauses off-screen and stays on the final
   frame for visitors who prefer reduced motion.
=========================================================== */
body.v3 .hero-v2.has-vector .hero-chip,
body.v3 .hero-v2.has-vector .hero-3d-canvas{ display: none; }
body.v3 .hero-v2.has-vector .hero-layout{ position: relative; z-index: 1; }

.hv-stage{
  position: absolute; z-index: 0; pointer-events: none;
  top: 72px; bottom: 24px;
  right: max(8px, calc((100vw - 1320px) / 2));
  width: min(54vw, 760px);
  display: flex; align-items: center; justify-content: center;
}
.home-v2 .hv-stage{ width: min(41vw, 620px); right: max(12px, calc((100vw - 1320px) / 2 - 10px)); }
.page-hero-v2 .hv-stage{ top: 24px; bottom: 8px; width: min(40vw, 600px); }
@media (min-width: 901px){
  body.v3 .page-hero-v2.has-vector .hero-layout{ min-height: 540px; }
}
.hv-stage svg{ width: 100%; height: 100%; max-height: 640px; overflow: visible; display: block; }
.hv-stage svg *{ transform-box: fill-box; }
.hv-stage text{ font-family: "Plus Jakarta Sans", system-ui, sans-serif; }

/* readability veil on the text side */
body.v3 .hero-v2.has-vector::before{
  content:""; position:absolute; inset:0; z-index: 0; pointer-events:none;
  background: linear-gradient(90deg, rgba(7,11,24,.9) 0%, rgba(7,11,24,.6) 36%, rgba(7,11,24,0) 58%);
}

@media (max-width: 1100px){
  .hv-stage, .home-v2 .hv-stage{ width: 46vw; opacity: .9; }
}
@media (max-width: 900px){
  body.v3 .hero-v2.has-vector::before{ display: none; }
  body.v3 .hero-v2.has-vector #hero3dAnchor{ display: none; }
  .hv-stage, .page-hero-v2 .hv-stage{
    position: relative; inset: auto; width: 100%; height: 320px;
    margin: -24px auto 24px; padding: 0 16px; opacity: 1;
  }
}
@media (max-width: 480px){
  .hv-stage, .page-hero-v2 .hv-stage{ height: 260px; }
}

/* ---------- shared timeline primitives (run once per cycle) ---------- */
.hv-run .t-draw{ stroke-dasharray: 1; stroke-dashoffset: 1; animation: hvDraw var(--t, .9s) cubic-bezier(.65,0,.35,1) var(--d, 0s) both; }
.hv-run .t-pop{ transform-origin: center; animation: hvPop .55s cubic-bezier(.34,1.56,.64,1) var(--d, 0s) both; }
.hv-run .t-grow{ transform-origin: left center; animation: hvGrow var(--t, .5s) cubic-bezier(.2,.8,.2,1) var(--d, 0s) both; }
.hv-run .t-rise{ transform-origin: center bottom; animation: hvRise var(--t, .7s) cubic-bezier(.2,.8,.2,1) var(--d, 0s) both; }
.hv-run .t-up{ animation: hvUp .6s cubic-bezier(.2,.8,.2,1) var(--d, 0s) both; }
.hv-run .t-fade{ animation: hvFade var(--t, .5s) ease var(--d, 0s) both; }
.hv-run .t-blip{ transform-origin: center; animation: hvBlip var(--t, 1s) ease var(--d, 0s) both; }
.hv-run .t-ring{ transform-origin: center; animation: hvRing .8s ease-out var(--d, 0s) both; }
.hv-scene{ transition: opacity .6s ease; }
.hv-out .hv-scene{ opacity: 0; }

@keyframes hvDraw{ to{ stroke-dashoffset: 0; } }
@keyframes hvPop{ from{ opacity: 0; transform: scale(.55); } to{ opacity: 1; transform: scale(1); } }
@keyframes hvGrow{ from{ transform: scaleX(0); } to{ transform: scaleX(1); } }
@keyframes hvRise{ from{ transform: scaleY(0); } to{ transform: scaleY(1); } }
@keyframes hvUp{ from{ opacity: 0; transform: translateY(26px); } to{ opacity: 1; transform: none; } }
@keyframes hvFade{ from{ opacity: 0; } to{ opacity: 1; } }
@keyframes hvBlip{ 0%{ opacity: 0; } 12%,82%{ opacity: 1; } 100%{ opacity: 0; } }
@keyframes hvRing{ 0%{ opacity: .9; transform: scale(.2); } 100%{ opacity: 0; transform: scale(2.4); } }

/* ---------- ambient loops ---------- */
.hv-caret{ animation: hvCaret 1s steps(1) infinite; }
@keyframes hvCaret{ 50%{ opacity: 0; } }
.hv-float{ animation: hvFloat 6s ease-in-out infinite; }
.hv-float.f2{ animation-delay: -2s; } .hv-float.f3{ animation-delay: -4s; }
@keyframes hvFloat{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-10px); } }
.hv-pulse{ transform-origin: center; animation: hvPulse 2.4s ease-out infinite; }
.hv-pulse.p2{ animation-delay: 1.2s; }
@keyframes hvPulse{ 0%{ opacity: .8; transform: scale(.3); } 100%{ opacity: 0; transform: scale(1.8); } }
.hv-glow{ animation: hvGlow 3s ease-in-out infinite; }
@keyframes hvGlow{ 0%,100%{ opacity: .55; } 50%{ opacity: 1; } }
.hv-spin{ transform-origin: center; animation: hvSpin 18s linear infinite; }
@keyframes hvSpin{ to{ transform: rotate(360deg); } }

/* ---------- home: the cursor that presses Publish ---------- */
.hv-run .hv-cursor{ animation: hvCursor 1.5s cubic-bezier(.45,0,.2,1) var(--d, 0s) both; }
@keyframes hvCursor{
  0%{ opacity: 0; transform: translate(150px, 420px); }
  15%{ opacity: 1; }
  75%{ transform: translate(0, 0); }
  85%{ transform: translate(0, 0) scale(.86); }
  100%{ opacity: 1; transform: translate(0, 0) scale(1); }
}
.hv-run .hv-press{ transform-origin: center; animation: hvPress .3s ease var(--d, 0s) both; }
@keyframes hvPress{ 50%{ transform: scale(.9); } 100%{ transform: scale(1); } }

/* ---------- proyek: values the script updates ---------- */
.hv-bar{ transform-origin: center bottom; transition: transform .9s cubic-bezier(.2,.8,.2,1); }
.hv-chip-swap{ transition: opacity .35s ease; }
.hv-side-hl{ transition: transform .6s cubic-bezier(.2,.8,.2,1); }

/* ---------- portofolio: deck fan + theme swap ---------- */
.hv-card{ transition: transform 1s cubic-bezier(.2,.8,.2,1), opacity .6s ease; transform-origin: 50% 100%; }
.hv-accent{ transition: fill .6s ease; }
.hv-swatch-ring{ transition: transform .6s cubic-bezier(.2,.8,.2,1); }

/* ---------- blog: the pen that follows the writing ---------- */
.hv-run .hv-pen{ animation: hvPen 6s ease-in-out var(--d, 0s) both; }
@keyframes hvPen{
  0%{ transform: translate(0, 0); }
  14%{ transform: translate(250px, 0); }
  18%{ transform: translate(0, 46px); }
  30%{ transform: translate(200px, 46px); }
  40%{ transform: translate(0, 214px); }
  52%{ transform: translate(300px, 214px); }
  58%{ transform: translate(0, 236px); }
  70%{ transform: translate(270px, 236px); }
  76%{ transform: translate(0, 258px); }
  88%{ transform: translate(220px, 258px); }
  100%{ transform: translate(300px, 300px); }
}

/* paused off-screen */
.hv-paused *, .hv-paused{ animation-play-state: paused !important; }

@media (prefers-reduced-motion: reduce){
  .hv-stage *, .hv-stage{ animation-duration: 0s !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition: none !important; }
  .hv-stage .hv-pulse, .hv-stage .hv-cursor, .hv-stage .hv-pen, .hv-stage .hv-motion{ display: none; }
}