/* ============================================================
   AURORA LAYER — kedalaman warna & gerak halus
   Dimuat paling akhir, jadi menimpa lapisan sebelumnya.
   Aturan main: hanya transform & opacity yang dianimasikan,
   tanpa filter blur / backdrop-filter supaya gulir tetap ringan.
   ============================================================ */

:root {
  --aur-1: #195acb; /* biru utama */
  --aur-2: #3a34c8; /* indigo — pasangan baru untuk biru */
  --aur-3: #0e9384; /* aqua — penyeimbang hangat */
  --aur-line: linear-gradient(90deg, var(--aur-1), var(--aur-2) 52%, var(--aur-3));
  --aur-glow: rgba(25, 90, 203, 0.32);
  --aur-ink: #eef4ff;
}

[data-theme="dark"] {
  --aur-1: #8bb7ff;
  --aur-2: #b0a4ff;
  --aur-3: #6ee7d7;
  --aur-glow: rgba(139, 183, 255, 0.3);
  --aur-ink: #0b1524;
}

/* ── 1. CAHAYA AURORA DI HERO ────────────────────────────── */
.hero {
  position: relative;
  isolation: isolate;
}

.hero-shade::after {
  content: "";
  position: absolute;
  inset: -18% -12% -10%;
  pointer-events: none;
  background:
    radial-gradient(38% 46% at 20% 26%, rgba(25, 90, 203, 0.34), transparent 66%),
    radial-gradient(34% 44% at 58% 8%, rgba(58, 52, 200, 0.26), transparent 68%),
    radial-gradient(42% 52% at 82% 68%, rgba(14, 147, 132, 0.22), transparent 68%);
}

/* Foto ruang kerja diberi warna biru–aqua supaya menyatu dengan brand.
   Memakai lapisan biasa (bukan mix-blend-mode) agar gulir tetap ringan. */
.workspace::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    rgba(25, 90, 203, 0.02) 0%,
    rgba(25, 90, 203, 0.1) 42%,
    rgba(58, 52, 200, 0.16) 74%,
    rgba(14, 147, 132, 0.2) 100%
  );
}

/* ── 2. JUDUL DENGAN GRADASI BIRU ────────────────────────── */
.hero-copy .eyebrow {
  letter-spacing: 0.12em;
  font-weight: 800;
}

.details dt {
  font-weight: 700;
  letter-spacing: 0.04em;
}

.hero-copy h1 {
  background: linear-gradient(96deg, var(--aur-1) 0%, var(--aur-2) 48%, var(--aur-3) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero-copy h1 {
    color: var(--aur-1);
  }
}

.hero-copy h1::after {
  background: var(--aur-line);
  box-shadow: 0 6px 18px -6px var(--aur-glow);
}

/* ── 3. TOMBOL GRADASI + CAHAYA ──────────────────────────── */
.button.primary,
.hero-copy .primary,
.contact .primary {
  position: relative;
  background-image: linear-gradient(115deg, var(--aur-1), var(--aur-2) 55%, var(--aur-3));
  background-size: 180% 100%;
  background-position: 0% 50%;
  box-shadow: 0 12px 30px -16px var(--aur-glow);
  transition:
    background-position 420ms var(--ease-out),
    box-shadow 420ms var(--ease-out),
    transform 240ms var(--ease-out);
}

.button.primary:hover,
.hero-copy .primary:hover,
.contact .primary:hover {
  background-position: 100% 50%;
  box-shadow: 0 18px 40px -18px var(--aur-glow);
  transform: translateY(-2px);
}

.hero-copy .button:not(.primary) {
  transition:
    background-color 260ms var(--ease-out),
    border-color 260ms var(--ease-out),
    transform 240ms var(--ease-out);
}

.hero-copy .button:not(.primary):hover {
  transform: translateY(-2px);
}

/* ── 4. KARTU PROFIL: GARIS GRADASI ──────────────────────── */
.hero-profile {
  position: relative;
  overflow: hidden;
}

.hero-profile::before {
  background: var(--aur-line);
  box-shadow: 0 6px 16px -6px var(--aur-glow);
}

/* Teks kecil di kartu profil dibuat lebih tegas */
.hero-profile p:not(.eyebrow) {
  color: color-mix(in srgb, var(--text) 78%, transparent);
}

/* ── 5. PEMISAH BAGIAN ───────────────────────────────────── */
/* Sengaja tanpa garis tambahan: jarak antarbagian sudah jadi
   pemisah alami, dan garis gradasi terbaca seperti noda. */

/* ── 6. BARIS "WHAT I EXPLORE": SAPUAN WARNA SAAT DISOROT ── */
.work-grid article {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: padding-left 320ms var(--ease-out);
}

.work-grid article::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, var(--row-wash, rgba(25, 90, 203, 0.1)), transparent 72%);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 480ms var(--ease-out);
}

.work-grid article:hover::after,
.work-grid article:focus-within::after {
  transform: scaleX(1);
}

.work-grid article::before {
  box-shadow: 0 0 0 0 var(--row-color, var(--aur-1));
  transition: box-shadow 320ms var(--ease-out);
}

.work-grid article:hover::before {
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--row-color, var(--aur-1)) 14%, transparent);
}

/* ── 7. KARTU KEAHLIAN ───────────────────────────────────── */
.skill-card {
  position: relative;
  overflow: hidden;
  transition:
    transform 340ms var(--ease-out),
    box-shadow 340ms var(--ease-out);
}

.skill-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, var(--aur-1), var(--aur-2), var(--aur-3));
  opacity: 0;
  transition: opacity 340ms var(--ease-out);
}

.skill-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 44px -28px rgba(25, 90, 203, 0.5);
}

.skill-card:hover::before {
  opacity: 1;
}

.tags span {
  transition:
    background-color 240ms var(--ease-out),
    color 240ms var(--ease-out),
    border-color 240ms var(--ease-out);
}

.skill-card:hover .tags span {
  border-color: color-mix(in srgb, var(--aur-1) 35%, transparent);
  color: var(--aur-1);
}

/* ── 8. PENUTUP: PANEL BIRU GELAP ────────────────────────── */
.contact {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(135deg, #08152e 0%, #123a8a 52%, #0b5f58 100%);
  color: var(--aur-ink);
}

.contact::before {
  content: "";
  position: absolute;
  inset: -30% -10%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(40% 55% at 78% 18%, rgba(122, 176, 255, 0.34), transparent 64%),
    radial-gradient(44% 58% at 12% 82%, rgba(20, 184, 166, 0.28), transparent 66%);
}

.contact .eyebrow {
  color: #c3d8ff;
  font-weight: 700;
}

.contact h2 {
  color: #ffffff;
}

.contact .button.primary {
  background-image: linear-gradient(115deg, #ffffff, #d9e6ff);
  color: #0a1730;
  box-shadow: 0 16px 40px -18px rgba(0, 0, 0, 0.6);
}

.contact .button.primary:hover {
  background-position: 100% 50%;
}

.contact #contact-status {
  color: rgba(238, 244, 255, 0.78);
}

/* ── 9. GARIS KEMAJUAN GULIR ─────────────────────────────── */
.aur-progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 3px;
  z-index: 90;
  pointer-events: none;
  background: var(--aur-line);
  transform: scaleX(0);
  transform-origin: 0 50%;
  will-change: transform;
}

/* ── 10. MUNCUL SAAT DIGULIR ─────────────────────────────── */
.js .aur-reveal {
  opacity: 0;
  translate: 0 26px;
  transition:
    opacity 640ms var(--ease-out),
    translate 640ms var(--ease-out);
  transition-delay: calc(var(--d, 0) * 70ms);
}

.js .aur-reveal.aur-in {
  opacity: 1;
  translate: 0 0;
}

/* ── 11. GERAK KECIL YANG MURAH ──────────────────────────── */
.hero-copy h1::after {
  animation: aurGaris 900ms var(--ease-out) both;
  transform-origin: 0 50%;
}

@keyframes aurGaris {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

/* ── 12. HORMATI PREFERENSI GERAK ────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .hero-copy h1::after {
    animation: none !important;
  }
  .js .aur-reveal {
    opacity: 1 !important;
    translate: none !important;
  }
  .button.primary:hover,
  .skill-card:hover,
  .hero-copy .button:hover {
    transform: none;
  }
}

/* ── 13. LAYAR KECIL ─────────────────────────────────────── */
@media (max-width: 900px) {
  .section::before {
    margin-bottom: var(--space-xl);
  }
  .contact {
    padding: 44px 24px;
  }
  .contact h2 {
    font-size: clamp(1.7rem, 7vw, 2.2rem);
  }
  .workspace::after {
    opacity: 0.42;
  }
}