/* ============================================================
   Tanahwari — landing page
   Kain satin biru tua, logo emas, tipografi Gilda Display
   ============================================================ */

:root {
  --gold:       #fcb040;  /* emas merek — nilai tengah gradien mark  */
  --tin:        #bdbec0;  /* timah merek — nilai tengah gradien wordmark */
  --gold-text:  #ecd3a3;  /* emas sampanye untuk teks */

  --gold-soft:  rgba(236, 211, 163, 0.70);
  --gold-faint: rgba(236, 211, 163, 0.40);

  --serif: "Gilda Display", "Cormorant Garamond", "EB Garamond", Georgia,
           "Times New Roman", Times, serif;

  --gutter: clamp(1.5rem, 5vw, 4rem);

  /* --- Palet biru (bawaan) ---
     Tiga palet memakai komposisi, pola, dan waktu animasi yang sama persis.
     Yang ditukar hanya nilai di bawah ini, plus empat warna kembarannya
     di dalam shader (lihat PALETTES di index.html). Nilai ditulis sebagai
     komponen RGB telanjang supaya bisa dipakai ulang dengan alfa berbeda. */
  --fold-1: 58, 96, 172;
  --fold-2: 32, 64, 140;
  --fold-3: 20, 46, 104;
  --fold-4: 74, 116, 190;
  --sheen-a: 126, 168, 236;
  --sheen-b: 196, 216, 255;
  --base-glow: 24, 52, 116;
  --base-top: #071331;
  --base-mid: #050d24;
  --base-bottom: #030713;
  --shade: 2, 5, 14;      /* warna bayangan vignette */
  --dot: #1b3a72;         /* tombol palet */
}

:root[data-palette="green"] {
  --fold-1: 36, 117, 103;
  --fold-2: 19, 81, 72;
  --fold-3: 11, 56, 48;
  --fold-4: 55, 140, 123;
  --sheen-a: 110, 200, 182;
  --sheen-b: 186, 240, 224;
  --base-glow: 14, 68, 60;
  --base-top: #072320;
  --base-mid: #041412;
  --base-bottom: #020c0a;
  --shade: 2, 10, 8;
  --dot: #0f4a41;
}

:root[data-palette="maroon"] {
  --fold-1: 168, 58, 72;
  --fold-2: 130, 32, 48;
  --fold-3: 92, 20, 34;
  --fold-4: 190, 84, 96;
  --sheen-a: 236, 150, 160;
  --sheen-b: 255, 214, 214;
  --base-glow: 110, 26, 40;
  --base-top: #2a0a12;
  --base-mid: #1a060c;
  --base-bottom: #100407;
  --shade: 10, 3, 5;
  --dot: #5c1422;
}

*,
*::before,
*::after { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  overflow-x: hidden;
}

body {
  min-height: 100svh;
  background: var(--base-bottom);
  transition: background-color 900ms ease;
  color: var(--gold-text);
  font-family: var(--serif);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ------------------------------------------------------------
   Kain satin — lapisan dasar CSS
   Tampil sendirian bila WebGL tidak tersedia atau gerak dikurangi;
   selebihnya ia bersembunyi di balik kanvas.
   ------------------------------------------------------------ */

.drape {
  position: fixed;
  inset: -18%;
  z-index: 0;
  pointer-events: none;
}

.drape::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 85% at 50% 0%, rgba(var(--base-glow), 0.55) 0%, transparent 66%),
    linear-gradient(180deg, var(--base-top) 0%, var(--base-mid) 58%, var(--base-bottom) 100%);
}

.drape__fold {
  position: absolute;
  display: block;
  border-radius: 50%;
  mix-blend-mode: screen;
  filter: blur(56px);
  will-change: transform;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

.drape__fold--1 {
  top: -10%; left: -4%;
  width: 78vw; height: 62vh;
  background: radial-gradient(closest-side,
    rgba(var(--fold-1), 0.50) 0%, rgba(var(--fold-1), 0.22) 44%, rgba(var(--fold-1), 0) 78%);
  animation-name: driftA;
  animation-duration: 26s;
}

.drape__fold--2 {
  top: 4%; right: -2%;
  width: 66vw; height: 70vh;
  background: radial-gradient(closest-side,
    rgba(var(--fold-2), 0.52) 0%, rgba(var(--fold-2), 0.22) 46%, rgba(var(--fold-2), 0) 80%);
  animation-name: driftB;
  animation-duration: 34s;
}

.drape__fold--3 {
  bottom: 2%; left: 6%;
  width: 70vw; height: 58vh;
  background: radial-gradient(closest-side,
    rgba(var(--fold-3), 0.55) 0%, rgba(var(--fold-3), 0.24) 48%, rgba(var(--fold-3), 0) 80%);
  animation-name: driftC;
  animation-duration: 30s;
}

.drape__fold--4 {
  top: 28%; left: 18%;
  width: 62vw; height: 64vh;
  background: radial-gradient(closest-side,
    rgba(var(--fold-4), 0.34) 0%, rgba(var(--fold-4), 0.15) 48%, rgba(var(--fold-4), 0) 80%);
  animation-name: driftD;
  animation-duration: 40s;
}

/* kilau satin yang menyapu miring */
.drape__sheen {
  position: absolute;
  inset: -30% -40%;
  display: block;
  mix-blend-mode: screen;
  opacity: 0.85;
  background:
    linear-gradient(101deg,
      transparent 0%,
      rgba(var(--sheen-a), 0.07) 12%,
      transparent 22%,
      rgba(var(--sheen-b), 0.05) 34%,
      transparent 46%,
      rgba(var(--sheen-a), 0.06) 58%,
      transparent 70%,
      rgba(var(--sheen-b), 0.06) 82%,
      transparent 96%);
  filter: blur(46px);
  animation: sway 46s ease-in-out infinite alternate;
}

@keyframes driftA {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(9vw, 7vh, 0) scale(1.16); }
}
@keyframes driftB {
  from { transform: translate3d(0, 0, 0) scale(1.08); }
  to   { transform: translate3d(-11vw, -6vh, 0) scale(0.94); }
}
@keyframes driftC {
  from { transform: translate3d(0, 0, 0) scale(0.96); }
  to   { transform: translate3d(8vw, -9vh, 0) scale(1.18); }
}
@keyframes driftD {
  from { transform: translate3d(0, 0, 0) scale(1.1); }
  to   { transform: translate3d(-7vw, 8vh, 0) scale(0.92); }
}
@keyframes sway {
  from { transform: translate3d(-4%, 0, 0) skewX(-2deg); }
  to   { transform: translate3d(4%, 0, 0) skewX(3deg); }
}

/* ------------------------------------------------------------
   Kanvas kain (WebGL)
   ------------------------------------------------------------ */

.silk {
  position: fixed;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.6s ease-out;
}

.silk.is-ready { opacity: 1; }

/* ------------------------------------------------------------
   Lapisan atmosfer
   ------------------------------------------------------------ */

.vignette {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(58% 42% at 50% 47%, rgba(var(--shade), 0.34) 0%, rgba(var(--shade), 0.16) 55%, transparent 78%),
    radial-gradient(120% 90% at 50% 44%, transparent 38%, rgba(var(--shade), 0.46) 84%, rgba(var(--shade), 0.86) 100%),
    linear-gradient(180deg, rgba(var(--shade), 0.34) 0%, transparent 26%, transparent 66%, rgba(var(--shade), 0.66) 100%);
}

.grain {
  position: fixed;
  inset: -50%;
  z-index: 3;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: flicker 6s steps(3, end) infinite;
}

@keyframes flicker {
  0%   { transform: translate3d(0, 0, 0); }
  33%  { transform: translate3d(-1.2%, 0.8%, 0); }
  66%  { transform: translate3d(0.9%, -1.1%, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

/* ------------------------------------------------------------
   Panggung
   ------------------------------------------------------------ */

.stage {
  position: relative;
  z-index: 4;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(3.5rem, 12vh, 7rem) var(--gutter);
  text-align: center;
  will-change: transform;
}

/* --- logo --- */

.lockup {
  position: relative;
  display: block;
}

.lockup::after {
  /* cahaya lembut di belakang logo */
  content: "";
  position: absolute;
  left: 50%;
  top: 44%;
  width: 320%;
  height: 260%;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(252, 176, 64, 0.14) 0%, rgba(252, 176, 64, 0) 72%);
  filter: blur(18px);
  z-index: -1;
  opacity: 0;
  animation: fadeIn 3.2s 0.6s ease-out both;
}

.logo {
  display: block;
  width: clamp(140px, 20vw, 216px);
  height: auto;
  overflow: visible;
  isolation: isolate;   /* kurung mix-blend-mode kilau di dalam logo */
}

.logo__mark use {
  fill: url(#tw-gold);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: markIn 1.9s cubic-bezier(0.16, 0.84, 0.3, 1) both;
}
.logo__mark use:nth-child(1) { animation-delay: 0.20s; }
.logo__mark use:nth-child(2) { animation-delay: 0.05s; }
.logo__mark use:nth-child(3) { animation-delay: 0.34s; }

@keyframes markIn {
  from { opacity: 0; transform: translateY(10px) scale(0.965); }
  to   { opacity: 1; transform: none; }
}

.logo__word use {
  fill: url(#tw-tin);
  opacity: 0;
  animation: letterIn 1.5s cubic-bezier(0.2, 0.7, 0.25, 1) both;
}
.logo__word use:nth-child(1) { animation-delay: 0.70s; }
.logo__word use:nth-child(2) { animation-delay: 0.77s; }
.logo__word use:nth-child(3) { animation-delay: 0.84s; }
.logo__word use:nth-child(4) { animation-delay: 0.91s; }
.logo__word use:nth-child(5) { animation-delay: 0.98s; }
.logo__word use:nth-child(6) { animation-delay: 1.05s; }
.logo__word use:nth-child(7) { animation-delay: 1.12s; }
.logo__word use:nth-child(8) { animation-delay: 1.19s; }
.logo__word use:nth-child(9) { animation-delay: 1.26s; }

@keyframes letterIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* --- kilau logam ---
   Batang cahaya miring melintas di balik mask berbentuk logo, lalu
   menunggu di luar bidang sampai putaran berikutnya. Timah menyusul
   emas setengah detik kemudian, seolah satu cahaya menuruni lockup. */

.logo__glint {
  mix-blend-mode: screen;
  pointer-events: none;
}

.logo__bar {
  animation: glint 9s linear infinite;
}

.logo__glint--gold .logo__bar { animation-delay: 3.1s; }
.logo__glint--tin  .logo__bar { animation-delay: 3.6s; }

@keyframes glint {
  0%   { transform: translateX(0)     skewX(-16deg); }
  18%  { transform: translateX(432px) skewX(-16deg); }
  100% { transform: translateX(432px) skewX(-16deg); }
}

/* --- garis rambut --- */

.rule {
  display: block;
  width: min(24vw, 128px);
  height: 1px;
  margin: clamp(1.9rem, 5vh, 2.9rem) 0 clamp(1.7rem, 4.5vh, 2.5rem);
  border: 0;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(236, 211, 163, 0.14) 18%,
    rgba(236, 211, 163, 0.68) 50%,
    rgba(236, 211, 163, 0.14) 82%,
    transparent 100%);
  transform-origin: center;
  transform: scaleX(0);
  opacity: 0;
  animation: ruleIn 1.8s 1.5s cubic-bezier(0.16, 0.84, 0.3, 1) both;
}

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

/* --- tipografi --- */

.headline {
  width: 100%;
  margin: 0;
  font-weight: 400;
  font-size: clamp(0.98rem, 2.3vw, 1.42rem);
  line-height: 1.45;
  letter-spacing: 0.145em;
  text-indent: 0.0725em;  /* setengah letter-spacing, agar tetap di tengah optis */
  text-transform: uppercase;
  color: var(--gold-text);
  text-shadow: 0 0 34px rgba(236, 211, 163, 0.16);
  opacity: 0;
  animation: riseIn 2.1s 1.75s cubic-bezier(0.16, 0.84, 0.3, 1) both;
}

.subline {
  max-width: 36ch;
  text-wrap: balance;
  margin: clamp(0.95rem, 2.6vh, 1.35rem) 0 0;
  font-size: clamp(0.82rem, 1.75vw, 0.98rem);
  line-height: 1.85;
  letter-spacing: 0.045em;
  color: var(--gold-soft);
  opacity: 0;
  animation: riseIn 2.1s 2.05s cubic-bezier(0.16, 0.84, 0.3, 1) both;
}

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

@keyframes riseIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* --- kaki halaman --- */

.footer {
  position: fixed;
  z-index: 5;
  left: 0;
  right: 0;
  bottom: clamp(1.5rem, 4.5vh, 2.75rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(0.85rem, 2vh, 1.15rem);
  padding: 0 var(--gutter);
  white-space: nowrap;
  opacity: 0;
  animation: riseIn 2.2s 2.5s ease-out both;
}

.footer__item {
  font-size: clamp(0.6rem, 1.5vw, 0.68rem);
  letter-spacing: 0.32em;
  text-indent: 0.16em;
  text-transform: uppercase;
  color: var(--gold-faint);
}

/* --- kontak --- */

.footer__link {
  position: relative;
  display: flex;
  /* Sengaja lebih terang daripada .footer__item di sebelahnya: tanpa teks,
     ikon seredup tahun akan terlewat — padahal ini satu-satunya jalan
     kontak yang ada di halaman. */
  color: var(--gold-soft);
  transition: transform 400ms cubic-bezier(0.16, 0.84, 0.3, 1),
              color 400ms ease;
}

/* perluas bidang sentuh tanpa mengubah ukuran tampak */
.footer__link::after {
  content: "";
  position: absolute;
  inset: -11px;
}

.footer__icon {
  display: block;
  width: 17px;
  height: 17px;
  fill: currentColor;   /* ikut warna .footer__link, termasuk saat disentuh */
}

.footer__link:hover {
  transform: scale(1.15);
  color: var(--gold-text);
}

.footer__link:focus-visible {
  outline: 1px solid rgba(236, 211, 163, 0.85);
  outline-offset: 4px;
  border-radius: 2px;
}

/* --- pemilih palet --- */

.palette {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.palette__dot {
  position: relative;
  width: 10px;
  height: 10px;
  padding: 0;
  border: 1px solid rgba(236, 211, 163, 0.28);
  border-radius: 50%;
  background: var(--dot-color);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: transform 400ms cubic-bezier(0.16, 0.84, 0.3, 1),
              border-color 400ms ease,
              box-shadow 400ms ease;
}

/* perluas bidang sentuh tanpa mengubah ukuran tampak */
.palette__dot::after {
  content: "";
  position: absolute;
  inset: -11px;
}

.palette__dot--blue   { --dot-color: #1b3a72; }
.palette__dot--green  { --dot-color: #0f4a41; }
.palette__dot--maroon { --dot-color: #5c1422; }

.palette__dot:hover {
  transform: scale(1.2);
  border-color: rgba(236, 211, 163, 0.6);
}

.palette__dot[aria-pressed="true"] {
  border-color: rgba(236, 211, 163, 0.85);
  box-shadow: 0 0 0 3px rgba(236, 211, 163, 0.10),
              0 0 12px rgba(236, 211, 163, 0.28);
}

.palette__dot:focus-visible {
  outline: 1px solid rgba(236, 211, 163, 0.85);
  outline-offset: 4px;
}

/* ------------------------------------------------------------
   Layar pendek / lanskap ponsel
   ------------------------------------------------------------ */

@media (max-height: 520px) {
  .logo { width: clamp(104px, 14vw, 140px); }
  .rule { margin: 1.35rem 0 1.2rem; }
  .subline { display: none; }
  .footer { gap: 0.7rem; }
}

/* ------------------------------------------------------------
   Hormati preferensi gerak minimal
   ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .drape__fold,
  .drape__sheen,
  .grain,
  .logo__mark use,
  .logo__word use,
  .logo__bar,
  .lockup::after,
  .rule,
  .headline,
  .subline,
  .footer {
    animation: none !important;
    opacity: 1;
    transform: none !important;
  }
  .drape__sheen { opacity: 0.85; }
  .silk { display: none; }
  .palette__dot,
  .footer__link { transition: none; }
}