/* ============================================================
   GMV MAX — grafik & gerakan (Siri 04)
   Semua animasi dimulakan bila masuk skrin (IntersectionObserver).
   Hormat prefers-reduced-motion: grafik kekal, gerakan dimatikan.
   ============================================================ */

.fig {
  margin: 26px 0;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012));
  position: relative;
  overflow: hidden;
}
.fig::before {
  content: '';
  position: absolute; inset: -40% -10% auto -10%; height: 70%;
  background: radial-gradient(ellipse at 50% 0%, rgba(255,77,0,.09), transparent 70%);
  pointer-events: none;
}
.fig-cap {
  position: relative;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase; color: rgba(245,245,245,.45);
  margin-bottom: 16px;
}
.fig svg { display: block; width: 100%; height: auto; position: relative; margin: 0 auto; }
/* Had lebar supaya grafik tak menelan skrin besar */
#g-roda svg { max-width: 360px; }
#g-status svg, #g-corong svg { max-width: 720px; }
#g-setup svg { max-width: 760px; }
#g-hari svg { max-width: 700px; }
.fig-note { position: relative; font-size: 12px; color: rgba(245,245,245,.5); margin-top: 14px; line-height: 1.6; }

/* ---- teks dalam SVG ---- */
.fig text { font-family: var(--font-sans); fill: #f4f4f5; }
.fig .t-lbl { font-size: 12px; font-weight: 700; }
.fig .t-sub { font-size: 9.5px; fill: rgba(245,245,245,.5); font-family: var(--font-mono); letter-spacing: .08em; }
.fig .t-big { font-size: 20px; font-weight: 800; font-family: var(--font-display); }
.fig .t-mono { font-family: var(--font-mono); font-size: 10px; fill: rgba(245,245,245,.55); }

/* ---- gerakan asas ---- */
.fx { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s var(--ease-out); }
.fig.in .fx { opacity: 1; transform: none; }
.fig.in .fx-1 { transition-delay: .06s } .fig.in .fx-2 { transition-delay: .14s }
.fig.in .fx-3 { transition-delay: .22s } .fig.in .fx-4 { transition-delay: .30s }
.fig.in .fx-5 { transition-delay: .38s } .fig.in .fx-6 { transition-delay: .46s }
.fig.in .fx-7 { transition-delay: .54s } .fig.in .fx-8 { transition-delay: .62s }

/* garis melukis diri */
.fx-draw { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); transition: stroke-dashoffset 1.1s cubic-bezier(.4,0,.2,1) .2s; }
.fig.in .fx-draw { stroke-dashoffset: 0; }

/* bar tumbuh */
.fx-grow { transform: scaleX(0); transform-origin: left center; transition: transform .9s var(--ease-out); }
.fig.in .fx-grow { transform: scaleX(1); }
.fx-rise { transform: scaleY(0); transform-origin: bottom; transition: transform .8s var(--ease-out); }
.fig.in .fx-rise { transform: scaleY(1); }

/* denyut halus pada nod aktif */
@keyframes fxPulse { 0%,100% { opacity: .35 } 50% { opacity: .9 } }
.fig.in .fx-pulse { animation: fxPulse 2.4s ease-in-out infinite; }

/* titik bergerak sepanjang laluan */
@keyframes fxTravel { from { offset-distance: 0% } to { offset-distance: 100% } }

/* ---- roda 5 elemen ---- */
.wheel-seg { cursor: pointer; transition: opacity .25s, transform .35s var(--ease-out); transform-origin: center; }
.wheel-seg:hover { opacity: 1 !important; }
.wheel-seg.dim { opacity: .3; }

/* ---- corong ---- */
.fn-band { transition: opacity .3s; }
.fn-band:hover { opacity: 1 !important; }

@media (prefers-reduced-motion: reduce) {
  .fx, .fx-draw, .fx-grow, .fx-rise { transition: none !important; opacity: 1 !important; transform: none !important; stroke-dashoffset: 0 !important; }
  .fig.in .fx-pulse { animation: none !important; opacity: .7 !important; }
}
@media (max-width: 560px) {
  .fig { padding: 16px; }
  .fig .t-lbl { font-size: 11px } .fig .t-sub { font-size: 8.5px } .fig .t-big { font-size: 17px }
}