/* ============================================
   INFO EMAS — Shared CSS Tokens & Animations
   Dimuat via InfoEmasLayout.astro
   ============================================ */

/* Quality tier: 0=low, 1=mid, 2=high — diset oleh QualityManager.js */
:root {
  --quality-tier: 1;
}

/* === TYPOGRAPHY UTILITIES === */
.ie-label-dim {
  font-family: var(--font-hud);
  font-size: 0.65rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-gold-muted);
}

.ie-h1 {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 7vw, 5rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--color-gold);
}

.ie-h2 {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.5vw, 3rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--color-gold);
}

.ie-body {
  font-family: var(--font-body);
  font-size: clamp(0.95rem, 1.5vw, 1.1rem);
  line-height: 1.85;
  color: rgba(255,255,255,0.78);
}

.ie-body-muted {
  font-family: var(--font-body);
  font-size: clamp(0.875rem, 1.3vw, 1rem);
  line-height: 1.8;
  color: rgba(255,255,255,0.55);
}

/* === SECTION STRUCTURE === */
.ie-section {
  position: relative;
  overflow: hidden;
  content-visibility: auto;
  contain-intrinsic-size: auto 85vh;
  contain: layout style;
}

/* Hero: JANGAN pakai content-visibility — ini LCP */
#section-hero {
  content-visibility: visible !important;
  contain-intrinsic-size: unset !important;
}

/* Footer: auto dengan ukuran lebih kecil */
#ie-footer {
  content-visibility: auto;
  contain-intrinsic-size: auto 400px;
}

.ie-section-inner {
  position: relative;
  z-index: 2;
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: var(--section-padding-y) var(--content-padding-x);
}

/* === PARALLAX WRAPPER (WAJIB dipakai di semua section) === */
.ie-parallax-wrapper {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  contain: strict;
}

.ie-parallax-img {
  position: absolute;
  top: -15%;
  left: 0;
  width: 100%;
  height: 130%;
  object-fit: cover;
  will-change: transform;
  /* INGAT: opacity diset per-section, min 0.60 */
}

.quality-low .ie-parallax-img {
  will-change: auto;
}

/* === CTA BUTTON === */
.ie-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-hud);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-gold);
  border: 1px solid var(--color-gold-muted);
  background: rgba(6,13,26,0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 0.7rem 1.6rem;
  text-decoration: none;
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-cinematic);
  clip-path: polygon(6px 0%, calc(100% - 6px) 0%, 100% 6px, 100% 100%, calc(100% - 6px) 100%, 6px 100%, 0% calc(100% - 6px), 0% 6px);
}

.ie-btn::before {
  content: '';
  position: absolute;
  left: 0;
  top: 20%;
  bottom: 20%;
  width: 2px;
  background: currentColor;
  opacity: 0.6;
  pointer-events: none;
}

.ie-btn:hover {
  transform: translateX(3px);
  color: var(--color-gold-bright);
  border-color: var(--color-gold);
  background: rgba(212,175,55,0.1);
  box-shadow: 0 0 20px rgba(212,175,55,0.2), inset 0 0 20px rgba(212,175,55,0.05);
}

.ie-btn:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 3px;
}

.quality-low .ie-btn {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: rgba(6,13,26,0.92);
}

/* === SECTION DIVIDER (Meridian Line) === */
.ie-meridian {
  position: relative;
  height: 1px;
  margin: 0;
  overflow: visible;
}

.ie-meridian::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--color-gold-muted) 20%, var(--color-gold-muted) 80%, transparent);
}

.ie-meridian::after {
  content: '\25C8';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--color-gold-muted);
  font-size: 0.9rem;
  background: var(--color-void);
  padding: 0 0.75rem;
  animation: meridian-pulse 3s ease-in-out infinite;
}

/* === KEYFRAMES === */
@keyframes meridian-pulse {
  0%, 100% { opacity: 0.35; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: 0.8; transform: translate(-50%, -50%) scale(1.15); }
}

@keyframes orbit-cw {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes orbit-ccw {
  from { transform: rotate(0deg); }
  to   { transform: rotate(-360deg); }
}

@keyframes ie-breathe {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50%       { opacity: 0.75; transform: scale(1.04); }
}

@keyframes ie-scanline {
  0%   { transform: translateY(-100%); opacity: 0.6; }
  100% { transform: translateY(100vh); opacity: 0; }
}

@keyframes ie-glow-pulse {
  0%, 100% { box-shadow: 0 0 15px rgba(212,175,55,0.15); }
  50%       { box-shadow: 0 0 35px rgba(212,175,55,0.4); }
}

/* === SCROLL VIGNETTE (dipasang sekali di body) === */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
  background: radial-gradient(ellipse at center, transparent 50%, rgba(2,5,12,0.55) 100%);
}

/* === PREFERS REDUCED MOTION OVERRIDE === */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* === MOBILE BASE === */
@media (max-width: 768px) {
  .ie-grid-2col {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }
  .ie-ornament-visual {
    display: none !important;
  }
}

/* ════════════════════════════════════════════════════════
   AURA SYSTEM v1 — Donghua × Unreal Engine
   Semua animasi GPU-accelerated via transform rotate
   ════════════════════════════════════════════════════════ */

/* ── A1. QI ENERGY AURA (hero orbital rings) ─────────── */

.ie-aura-container {
  position: absolute;
  top: 50%; left: 50%;
  pointer-events: none;
  z-index: 1;
  will-change: opacity;
}

/* Outer qi ring: berputar searah jam */
.ie-aura-qi-outer {
  position: absolute;
  border-radius: 50%;
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
  background: conic-gradient(
    from 0deg,
    transparent           0deg,
    rgba(212,175,55,0.20) 45deg,
    rgba(244,224,64,0.12) 90deg,
    transparent           135deg,
    rgba(212,175,55,0.08) 200deg,
    transparent           270deg,
    rgba(212,175,55,0.15) 320deg,
    transparent           360deg
  );
  animation: ie-qi-cw var(--aura-dur, 14s) linear infinite;
}

/* Inner qi ring: berlawanan arah jam, lebih kecil */
.ie-aura-qi-inner {
  position: absolute;
  border-radius: 50%;
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
  background: conic-gradient(
    from 180deg,
    transparent           0deg,
    rgba(244,224,64,0.12) 60deg,
    transparent           120deg,
    rgba(212,175,55,0.10) 200deg,
    rgba(244,224,64,0.06) 250deg,
    transparent           360deg
  );
  animation: ie-qi-ccw var(--aura-dur-inner, 10s) linear infinite;
}

/* Third ring: miring 45°, sangat lambat */
.ie-aura-qi-third {
  position: absolute;
  border-radius: 50%;
  will-change: transform;
  transform: rotate(45deg) translateZ(0);
  backface-visibility: hidden;
  background: conic-gradient(
    from 90deg,
    transparent           0deg,
    rgba(212,175,55,0.06) 30deg,
    transparent           80deg,
    rgba(212,175,55,0.10) 180deg,
    transparent           360deg
  );
  animation: ie-qi-cw var(--aura-dur-third, 22s) linear infinite;
}

@keyframes ie-qi-cw  { to { transform: rotate(360deg) translateZ(0); } }
@keyframes ie-qi-ccw { to { transform: rotate(-360deg) translateZ(0); } }

/* ── A2. SECTION ACCENT GLOW (per-section color glow) ── */

.ie-section-glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(55px);
  will-change: opacity;
  transform: translateZ(0);
  animation: ie-glow-breathe var(--glow-dur, 5s) ease-in-out infinite;
}

@keyframes ie-glow-breathe {
  0%, 100% {
    opacity: var(--glow-min, 0.3);
  }
  50% {
    opacity: var(--glow-max, 0.7);
  }
}

/* ── A3. SCROLL-REACTIVE AURA via CSS Custom Property ── */

.ie-section {
  --scroll-progress: 0;
}

.ie-section .ie-section-glow {
  opacity: calc(
    var(--glow-min, 0.25) +
    var(--scroll-progress, 0) * (var(--glow-max, 0.65) - var(--glow-min, 0.25))
  );
}

/* ── A4. SECTION-SPECIFIC AURA COLORS ───────────────── */

#section-hero     { --aura-color: rgba(212,175,55,  0.12); --aura-dur: 14s; }
#section-sejarah  { --aura-color: rgba(183,121,31,  0.10); --aura-dur: 16s; }
#section-harga    { --aura-color: rgba(20,184,166,  0.09); --aura-dur: 12s; }
#section-serba    { --aura-color: rgba(124,58,237,  0.09); --aura-dur: 18s; }
#section-market   { --aura-color: rgba(6,182,212,   0.09); --aura-dur: 13s; }
#section-iptek    { --aura-color: rgba(132,204,22,  0.08); --aura-dur: 10s; }
#section-ekonomi  { --aura-color: rgba(16,185,129,  0.08); --aura-dur: 15s; }
#section-budaya   { --aura-color: rgba(244,63,94,   0.09); --aura-dur: 17s; }
#section-digital  { --aura-color: rgba(59,130,246,  0.08); --aura-dur: 11s; }
#section-gelap    { --aura-color: rgba(220,38,38,   0.10); --aura-dur: 8s;  }

/* ── A5. PREFERS-REDUCED-MOTION OVERRIDE ────────────── */
@media (prefers-reduced-motion: reduce) {
  .ie-aura-qi-outer,
  .ie-aura-qi-inner,
  .ie-aura-qi-third,
  .ie-section-glow {
    animation: none !important;
  }
  .ie-section-glow {
    opacity: var(--glow-min, 0.25) !important;
  }
}

/* Matikan aura di HP tier LOW (diset via JS body class) */
body.quality-low .ie-aura-qi-outer,
body.quality-low .ie-aura-qi-inner,
body.quality-low .ie-aura-qi-third {
  display: none;
}
body.quality-low .ie-section-glow {
  filter: none;
  opacity: var(--glow-min, 0.2) !important;
}

/* ════════════════════════════════════════════════════════
   LAB ATMOSPHERE SYSTEM
   Ground mist, lens flare, scanline — semua CSS murni
   ════════════════════════════════════════════════════════ */

/* ── GROUND MIST: Kabut bawah per-section ──────────────
   mix-blend-mode: screen membuat mist "menyatu" dengan
   gambar parallax di bawahnya — bukan sekedar overlay
   ─────────────────────────────────────────────────────── */

/* MIST TRANSFORM: dikelola oleh GSAP saja pada .ie-mist — jangan tambahkan
  sistem kedua ke elemen ini. Lihat catatan residual audit 12 Mei. */

.ie-mist {
  position: absolute;
  bottom: -1px;
  left: -8%;
  width: 116%;
  height: 38%;
  pointer-events: none;
  z-index: 3;
  mix-blend-mode: screen;
  background:
    radial-gradient(
      ellipse 52% 100% at 22% 100%,
      rgba(var(--mist-rgb, 212,175,55), 0.030) 0%,
      transparent 72%
    ),
    radial-gradient(
      ellipse 52% 100% at 78% 100%,
      rgba(var(--mist-rgb, 212,175,55), 0.024) 0%,
      transparent 72%
    ),
    radial-gradient(
      ellipse 80% 60% at 50% 100%,
      rgba(var(--mist-rgb, 212,175,55), 0.012) 0%,
      transparent 100%
    );
}

/* Mist kedua: counter-drift untuk kesan volume */
.ie-mist-hi {
  position: absolute;
  top: 0; left: -8%;
  width: 116%; height: 25%;
  pointer-events: none;
  z-index: 3;
  mix-blend-mode: screen;
  will-change: transform, opacity;
  transform: translateZ(0);
  background:
    radial-gradient(
      ellipse 45% 100% at 30% 0%,
      rgba(var(--mist-rgb, 212,175,55), 0.018) 0%,
      transparent 70%
    ),
    radial-gradient(
      ellipse 45% 100% at 70% 0%,
      rgba(var(--mist-rgb, 212,175,55), 0.014) 0%,
      transparent 70%
    );
  animation: ie-mist-drift var(--mist-dur-hi, 11s) ease-in-out infinite reverse;
}

@keyframes ie-mist-drift {
  0%   { transform: translateX(0%)    scaleY(1.00) translateZ(0); opacity: 0.75; }
  28%  { transform: translateX(1.8%)  scaleY(1.06) translateZ(0); opacity: 1.00; }
  55%  { transform: translateX(0.5%)  scaleY(0.97) translateZ(0); opacity: 0.88; }
  80%  { transform: translateX(-1.5%) scaleY(1.03) translateZ(0); opacity: 0.95; }
  100% { transform: translateX(0%)    scaleY(1.00) translateZ(0); opacity: 0.75; }
}

#section-hero     .ie-mist, #section-hero     .ie-mist-hi { --mist-rgb: 212,175,55;  --mist-dur: 9s;  --mist-dur-hi: 13s; }
#section-sejarah  .ie-mist, #section-sejarah  .ie-mist-hi { --mist-rgb: 183,121,31;  --mist-dur: 8s;  --mist-dur-hi: 12s; }
#section-harga    .ie-mist, #section-harga    .ie-mist-hi { --mist-rgb: 20,184,166;  --mist-dur: 7s;  --mist-dur-hi: 10s; }
#section-serba    .ie-mist, #section-serba    .ie-mist-hi { --mist-rgb: 124,58,237;  --mist-dur: 10s; --mist-dur-hi: 14s; }
#section-market   .ie-mist, #section-market   .ie-mist-hi { --mist-rgb: 6,182,212;   --mist-dur: 8s;  --mist-dur-hi: 11s; }
#section-iptek    .ie-mist, #section-iptek    .ie-mist-hi { --mist-rgb: 132,204,22;  --mist-dur: 6s;  --mist-dur-hi: 9s;  }
#section-ekonomi  .ie-mist, #section-ekonomi  .ie-mist-hi { --mist-rgb: 16,185,129;  --mist-dur: 9s;  --mist-dur-hi: 13s; }
#section-budaya   .ie-mist, #section-budaya   .ie-mist-hi { --mist-rgb: 244,63,94;   --mist-dur: 11s; --mist-dur-hi: 15s; }
#section-digital  .ie-mist, #section-digital  .ie-mist-hi { --mist-rgb: 59,130,246;  --mist-dur: 7s;  --mist-dur-hi: 10s; }
#section-gelap    .ie-mist, #section-gelap    .ie-mist-hi { --mist-rgb: 220,38,38;   --mist-dur: 6s;  --mist-dur-hi: 9s;  }

/* Low-tier: parallax layer tersembunyi via CSS
  (GSAP trigger tidak dibuat, CSS juga menyembunyikan) */
.quality-low .ie-mist,
.quality-low .ie-mist-hi,
.quality-low .ie-fg-accent { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  .ie-mist,
  .ie-mist-hi {
    animation: none !important;
    opacity: 0.6;
  }
}

/* ── LENS FLARE: Lab light streak ──────────────────────
   Hanya di IPTEK (lime) dan Market (cyan)
   ─────────────────────────────────────────────────────── */

.ie-lens-flare {
  position: absolute;
  pointer-events: none;
  z-index: 3;
  height: 1px;
  left: -15%;
  width: 130%;
  will-change: transform, opacity;
  transform: translateZ(0);
  animation: ie-flare-sweep var(--flare-dur, 15s) ease-in-out infinite;
}

.ie-lens-flare::before,
.ie-lens-flare::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent 0%,
    rgba(var(--flare-rgb), 0.0) 15%,
    rgba(var(--flare-rgb), 0.22) 50%,
    rgba(var(--flare-rgb), 0.0) 85%,
    transparent 100%
  );
}

.ie-lens-flare::after {
  height: 3px;
  top: -1px;
  background: linear-gradient(
    to right,
    transparent 0%,
    rgba(var(--flare-rgb), 0.0) 25%,
    rgba(var(--flare-rgb), 0.08) 50%,
    rgba(var(--flare-rgb), 0.0) 75%,
    transparent 100%
  );
  filter: blur(2px);
}

@keyframes ie-flare-sweep {
  0%, 100% {
    transform: translateX(-25%) rotate(-0.4deg) translateZ(0);
    opacity: 0.5;
  }
  45% {
    transform: translateX(15%) rotate(0.2deg) translateZ(0);
    opacity: 1;
  }
  55% {
    transform: translateX(18%) rotate(0.3deg) translateZ(0);
    opacity: 0.9;
  }
}

#section-iptek .ie-lens-flare       { --flare-rgb: 132,204,22; --flare-dur: 14s; top: 38%; }
#section-iptek .ie-lens-flare-2     { --flare-rgb: 132,204,22; --flare-dur: 22s; top: 62%; animation-delay: -7s; opacity: 0.6; }
#section-market .ie-lens-flare      { --flare-rgb: 6,182,212;  --flare-dur: 12s; top: 42%; }
#section-market .ie-lens-flare-2    { --flare-rgb: 6,182,212;  --flare-dur: 19s; top: 70%; animation-delay: -5s; opacity: 0.5; }

body.quality-low .ie-lens-flare,
body.quality-low .ie-lens-flare-2 { display: none; }

@media (prefers-reduced-motion: reduce) {
  .ie-lens-flare, .ie-lens-flare-2 { animation: none !important; opacity: 0.3; }
}

/* ── SCANLINE TEXTURE: CRT / Lab Monitor feel ──────────
   repeating-linear-gradient: zero SVG, zero image
   Hanya di desktop — di HP tidak terlihat, buang GPU
   ─────────────────────────────────────────────────────── */

.ie-scanline-tex {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
  background: repeating-linear-gradient(
    0deg,
    transparent 0px,
    transparent 2px,
    rgba(0,0,0,0.018) 2px,
    rgba(0,0,0,0.018) 4px
  );
}

@media (max-width: 1024px) {
  .ie-scanline-tex { display: none; }
}

body.quality-low .ie-scanline-tex { display: none; }

/* ════════════════════════════════════════════════════════
   FOREGROUND PARALLAX ELEMENTS
   Bergerak berlawanan dengan background = efek 3D depth
   ════════════════════════════════════════════════════════ */

.ie-fg-accent {
  position: absolute;
  pointer-events: none;
  z-index: 3;
  will-change: transform;
  transform: translateZ(0);
  opacity: 0;
}

/* Backdrop glass pada panel teks — depth of field simulation */
.ie-text-panel {
  position: relative;
  backdrop-filter: blur(1.5px) saturate(110%);
  -webkit-backdrop-filter: blur(1.5px) saturate(110%);
}

body.quality-low .ie-text-panel {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}