/**
 * WebPrint Studio — Abstract Geometric Background System
 * Parallax objects, vector lines & floating shapes untuk semua halaman publik.
 * Zero external dependencies. GPU-accelerated via will-change + transform.
 */

/* ==========================================================================
   1. CANVAS OVERLAY (Partikel & garis vektor via JS)
   ========================================================================== */

#geo-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: 1;
}

/* ──────────────────────────────────────────────────────────────────────────
   IMPORTANT: geo-layer & canvas berada di bawah semua konten halaman.
   Body children (header, main, footer) secara natural ter-stack di atas
   elemen fixed z-index:0 karena flow HTML datang setelahnya di DOM.
   Tidak perlu z-index override tambahan.
   ────────────────────────────────────────────────────────────────────────── */

/* ==========================================================================
   2. FLOATING GEOMETRIC LAYER
   ========================================================================== */

.geo-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.geo-shape {
  position: absolute;
  will-change: transform;
  opacity: 0;
  transition: opacity 1.2s ease;
}

.geo-shape.is-visible {
  opacity: 1;
}

/* Ring / Circle outline */
.geo-ring {
  border-radius: 50%;
  border-style: solid;
  background: transparent;
  animation: geo-float-a var(--dur, 20s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}

/* Diamond */
.geo-diamond {
  transform: rotate(45deg);
  animation: geo-float-b var(--dur, 22s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}

/* Cross */
.geo-cross {
  animation: geo-spin-slow var(--dur, 28s) linear infinite;
  animation-delay: var(--delay, 0s);
}
.geo-cross::before,
.geo-cross::after {
  content: '';
  position: absolute;
  background: currentColor;
  border-radius: 2px;
}
.geo-cross::before {
  top: 50%; left: 0;
  width: 100%; height: 2px;
  margin-top: -1px;
}
.geo-cross::after {
  left: 50%; top: 0;
  height: 100%; width: 2px;
  margin-left: -1px;
}

/* Triangle */
.geo-triangle {
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  animation: geo-float-a var(--dur, 24s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}

/* Dot grid */
.geo-dots {
  animation: geo-float-b var(--dur, 36s) linear infinite;
  animation-delay: var(--delay, 0s);
}
.geo-dots::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, currentColor 1.5px, transparent 1.5px);
  background-size: 16px 16px;
}

/* Hexagon */
.geo-hex {
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  animation: geo-float-c var(--dur, 30s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}

/* Spinning arc */
.geo-arc {
  border-radius: 50%;
  border-style: solid;
  border-color: transparent;
  animation: geo-spin-slow var(--dur, 40s) linear infinite;
  animation-delay: var(--delay, 0s);
}

/* ==========================================================================
   3. KEYFRAMES
   ========================================================================== */

@keyframes geo-float-a {
  0%   { transform: translateY(0px) scale(1); }
  30%  { transform: translateY(-24px) scale(1.03); }
  70%  { transform: translateY(12px) scale(0.98); }
  100% { transform: translateY(0px) scale(1); }
}

@keyframes geo-float-b {
  0%   { transform: rotate(45deg) translateY(0) translateX(0); }
  25%  { transform: rotate(52deg) translateY(-20px) translateX(8px); }
  50%  { transform: rotate(45deg) translateY(-6px) translateX(14px); }
  75%  { transform: rotate(38deg) translateY(14px) translateX(4px); }
  100% { transform: rotate(45deg) translateY(0) translateX(0); }
}

@keyframes geo-float-c {
  0%   { transform: translateY(0) rotate(0deg) scale(1); }
  33%  { transform: translateY(-22px) rotate(12deg) scale(1.05); }
  66%  { transform: translateY(10px) rotate(-6deg) scale(0.96); }
  100% { transform: translateY(0) rotate(0deg) scale(1); }
}

@keyframes geo-spin-slow {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ==========================================================================
   4. COLOR TOKENS — Light / Dark adaptive
   ========================================================================== */

:root {
  --geo-primary:       rgba(17, 17, 17, 0.045);
  --geo-accent:        rgba(242, 197, 0, 0.10);
  --geo-blue:          rgba(59, 130, 246, 0.055);
  --geo-muted:         rgba(100, 116, 139, 0.04);
  --geo-stroke:        rgba(17, 17, 17, 0.065);
  --geo-accent-stroke: rgba(242, 197, 0, 0.13);
}

[data-theme="dark"] {
  --geo-primary:       rgba(242, 197, 0, 0.07);
  --geo-accent:        rgba(242, 197, 0, 0.09);
  --geo-blue:          rgba(99, 102, 241, 0.09);
  --geo-muted:         rgba(255, 255, 255, 0.035);
  --geo-stroke:        rgba(255, 255, 255, 0.07);
  --geo-accent-stroke: rgba(242, 197, 0, 0.15);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --geo-primary:       rgba(242, 197, 0, 0.07);
    --geo-accent:        rgba(242, 197, 0, 0.09);
    --geo-blue:          rgba(99, 102, 241, 0.09);
    --geo-muted:         rgba(255, 255, 255, 0.035);
    --geo-stroke:        rgba(255, 255, 255, 0.07);
    --geo-accent-stroke: rgba(242, 197, 0, 0.15);
  }
}

/* ==========================================================================
   5. SHAPE INSTANCES — positioned, sized, coloured
   ========================================================================== */

/* s1 — Large ring, top-right */
.geo-s1 {
  --dur: 22s; --delay: 0s;
  top: -130px; right: -90px;
  width: 440px; height: 440px;
  border: 2px solid var(--geo-accent-stroke);
}

/* s2 — Medium ring, left-center */
.geo-s2 {
  --dur: 30s; --delay: -9s;
  top: 38%; left: -110px;
  width: 280px; height: 280px;
  border: 1.5px solid var(--geo-stroke);
}

/* s3 — Small diamond, top-left */
.geo-s3 {
  --dur: 19s; --delay: -4s;
  top: 9%; left: 6%;
  width: 44px; height: 44px;
  background: var(--geo-accent);
}

/* s4 — Dot grid, bottom-left */
.geo-s4 {
  --dur: 42s; --delay: -14s;
  bottom: 12%; left: 3%;
  width: 160px; height: 160px;
  color: var(--geo-primary);
}

/* s5 — Large triangle, bottom-right */
.geo-s5 {
  --dur: 26s; --delay: -6s;
  bottom: -30px; right: 10%;
  width: 190px; height: 170px;
  background: var(--geo-muted);
}

/* s6 — Small cross, upper-right area */
.geo-s6 {
  --dur: 32s; --delay: -11s;
  top: 18%; right: 20%;
  width: 30px; height: 30px;
  color: var(--geo-accent);
}

/* s7 — Hex, mid-right */
.geo-s7 {
  --dur: 36s; --delay: -3s;
  top: 48%; right: -35px;
  width: 130px; height: 116px;
  background: var(--geo-blue);
}

/* s8 — Spinning arc, center-left */
.geo-s8 {
  --dur: 50s; --delay: -22s;
  top: 58%; left: 5%;
  width: 170px; height: 170px;
  border-top: 2px solid var(--geo-accent-stroke);
  border-right: 1.5px solid transparent;
  border-bottom: 1px solid var(--geo-stroke);
  border-left: 1.5px solid transparent;
}

/* s9 — Tiny diamond, mid-page center */
.geo-s9 {
  --dur: 17s; --delay: -16s;
  top: 30%; left: 44%;
  width: 22px; height: 22px;
  background: var(--geo-accent);
}

/* s10 — Medium ring, bottom-center */
.geo-s10 {
  --dur: 34s; --delay: -8s;
  bottom: 6%; right: 38%;
  width: 190px; height: 190px;
  border: 1px solid var(--geo-stroke);
}

/* s11 — Dot grid, top-center */
.geo-s11 {
  --dur: 40s; --delay: -20s;
  top: 3%; left: 28%;
  width: 150px; height: 110px;
  color: var(--geo-muted);
}

/* s12 — Large hex, far-left bottom */
.geo-s12 {
  --dur: 45s; --delay: -28s;
  bottom: 18%; left: -65px;
  width: 210px; height: 190px;
  background: var(--geo-blue);
}

/* s13 — Accent ring, upper-center */
.geo-s13 {
  --dur: 26s; --delay: -5s;
  top: -50px; left: 52%;
  width: 220px; height: 220px;
  border: 1.5px dashed var(--geo-accent-stroke);
}

/* s14 — Small triangle, left-top-mid */
.geo-s14 {
  --dur: 21s; --delay: -13s;
  top: 52%; left: 15%;
  width: 60px; height: 54px;
  background: var(--geo-accent);
}

/* ==========================================================================
   6. PARALLAX SCROLL (handled by JS, via CSS custom prop)
   ========================================================================== */

.geo-shape[data-parallax] {
  will-change: transform;
}

/* ==========================================================================
   7. REDUCED MOTION — disable all
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .geo-shape {
    animation: none !important;
    opacity: 0.4 !important;
  }
  #geo-canvas {
    display: none;
  }
}

/* ==========================================================================
   8. MOBILE — scale down shapes, hide some
   ========================================================================== */

@media (max-width: 768px) {
  .geo-s1  { width: 240px; height: 240px; top: -70px; right: -50px; }
  .geo-s2  { width: 170px; height: 170px; }
  .geo-s5  { width: 120px; height: 108px; }
  .geo-s7  { width: 88px; height: 78px; }
  .geo-s8  { width: 110px; height: 110px; }
  .geo-s10 { width: 130px; height: 130px; }
  .geo-s12, .geo-s13 { display: none; }
}

/* ==========================================================================
   9. EXPERIENCE TOGGLE
   ========================================================================== */

html[data-experience-animations="off"] .geo-shape {
  animation: none !important;
  opacity: 0.3 !important;
}

html[data-experience-animations="off"] #geo-canvas {
  display: none;
}