/* ==========================================================================
   Avarith Learn — valley.css
   Lembah "Doraemon": diorama SVG bukit hijau + pohon-pohon temen.
   Dipakai §5 landing (#valley-preview) DAN in-app (#valley-app).
   Palet & font turun dari token Learn; langit melebur ke --canvas di horizon.
   Semua warna flat (aerial perspective via lightness), NO gradient-glow.

   Kelas pohon/grove di-namespace `vtree`/`vgrove` — JANGAN pakai `.tree` /
   `.grove` di sini: itu milik peta kebun demo (app.css), dulu tabrakan
   dan bikin peta demo rusak.
   ========================================================================== */

.valley {
  display: block;
  width: 100%;

  /* --- LANGIT (lembut, desaturasi, melebur ke cream) --- */
  --sky-top: #BFD8DE;
  --sky-mid: #D6E4DC;
  --horizon: #EDF1D6;      /* == --canvas: langit nyambung ke dunia */
  --sun: #F6E8C6;
  --cloud: #FBFCF4;

  /* --- BUKIT (jauh=pucat/hazy → dekat=pekat) --- */
  --hill-far: #C4D8AC;
  --hill-mid: #A8C78F;
  --hill-near: #86B06E;
  --hill-fore: #609966;

  /* --- POHON --- */
  --leaf-hi: #7DB183;
  --leaf: #609966;
  --leaf-lo: #4E8A57;
  --leaf-dry: #9DBF8A;     /* mastery rendah → pucat/sage */
  --bark: #7B6A50;
  --bark-lo: #5F5540;
  --soil: #B9A77E;
}

/* ==========================================================================
   INTRO (app mode) + DIGEST ribbon (alasan balik ke lembah)
   ========================================================================== */
.valley__intro {
  max-width: var(--container-read);
  margin: 0 auto 18px;
  text-align: center;
}
.valley__title {
  font-family: var(--font-head);
  font-size: var(--h2);
  font-weight: 500;
}
.valley__subtitle {
  color: var(--muted);
  font-size: var(--body);
  margin-top: 6px;
}

.valley__digest {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 14px;
  max-width: var(--container-wide);
  margin: 0 auto 14px;
  padding: 9px 16px;
  background: var(--card);
  border: 1px solid var(--hair);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow);
  font-size: var(--small);
  color: var(--ink);
}
.valley__digest-label {
  font-weight: 600;
  color: var(--muted);
}
.valley__digest-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.valley__digest-item + .valley__digest-item::before {
  content: "·";
  margin-right: 9px;
  color: var(--sage);
}
.valley__digest .fc__ico { fill: var(--fill); }

/* ==========================================================================
   SCENE — diorama fixed, muat viewport (tanpa horizontal-scroll)
   z-order: sky0 → sun1 → clouds2 → hills3 → vgrove6
   ========================================================================== */
.valley__scene {
  position: relative;
  height: min(72vh, 640px);
  overflow: hidden;
  border-radius: 20px;
  box-shadow: inset 0 -1px 0 rgba(63, 81, 59, 0.06),
              0 8px 24px rgba(63, 81, 59, 0.05);
  isolation: isolate;
}

/* --- Langit --- */
.valley__sky {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(180deg,
    var(--sky-top) 0%, var(--sky-mid) 40%, var(--horizon) 100%);
}

/* --- Matahari (low-key, cahaya dari kanan-atas) --- */
.valley__sun {
  position: absolute;
  top: 9%;
  right: 13%;
  z-index: 1;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--sun) 58%, transparent 72%);
  opacity: 0.9;
}

/* --- Awan: max 3, blob lembut dari border-radius (bukan SVG ribet) --- */
.valley__clouds {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.cloud {
  position: absolute;
  height: 34px;
  background: var(--cloud);
  border-radius: 999px;
  opacity: 0.72;
  box-shadow: 26px 6px 0 -4px var(--cloud), -26px 6px 0 -6px var(--cloud);
}
.cloud--a { top: 10%; left: 16%; width: 128px; }
.cloud--b { top: 19%; left: 56%; width: 96px; height: 28px; opacity: 0.6; }
.cloud--c { top: 6%;  left: 74%; width: 112px; }

/* --- Bukit: 4 lapis SVG gelombang, aerial perspective --- */
.hills {
  position: absolute;
  inset: 0;
  z-index: 3;
}
.hill {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.hill--far  path { fill: var(--hill-far); }
.hill--mid  path { fill: var(--hill-mid); }
.hill--near path { fill: var(--hill-near); }
.hill--fore path { fill: var(--hill-fore); }

/* ==========================================================================
   VGROVE — pohon-pohon temen di dalam diorama
   Posisi = tata letak dekoratif dari seed (valley.js), BUKAN lokasi asli.
   ========================================================================== */
.vgrove {
  position: absolute;
  inset: 0;
  z-index: 6;
  margin: 0;
  padding: 0;
  list-style: none;
}
.vgrove__item {
  position: absolute;
  left: var(--x, 50%);
  top: var(--y, 70%);
  /* translate -100% Y → --y adalah garis tanah (pangkal pohon);
     scale depth dari bottom-center biar pangkal tetep nempel tanah */
  transform-origin: 50% 100%;
  transform: translate(-50%, -100%) scale(var(--depth, 1));
}

/* ==========================================================================
   VTREE — anatomi SVG rapi (batang tapered + kanopi 3-tone berlobus,
   kanopi NYAMBUNG ke batang). Wrapper bertingkat (anti-wobble):
   .vtree > .vtree__tilt > .vtree__svg > .vtree__crown
   ========================================================================== */
.vtree {
  position: relative;
  display: block;
  width: calc(var(--h, 90px) * 0.6);
  height: var(--h, 90px);
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}
.vtree--static {
  position: static;
  margin: 0 auto;
  cursor: default;
}

/* tilt: jitter miring + flip seeded + lift saat hover (semua di sini, 1 node) */
.vtree__tilt {
  width: 100%;
  height: 100%;
  transform-origin: 50% 100%;
  transform: translateY(var(--lift, 0)) scale(var(--liftScale, 1))
             rotate(var(--tilt, 0deg)) scaleX(var(--flip, 1));
  transition: transform 160ms ease-out;
}
.vtree:hover .vtree__tilt,
.vtree:focus-visible .vtree__tilt {
  --lift: -4px;
  --liftScale: 1.03;
}
.vtree:focus { outline: none; }
.vtree:focus-visible .vtree__svg {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 8px;
}

.vtree__svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.vtree__shadow  { fill: rgba(63, 81, 59, 0.14); }
.vtree__soil    { fill: var(--soil); }
.vtree__trunk   { fill: var(--bark); }
.vtree__trunk-lo{ fill: var(--bark-lo); }
.vtree__branch  { fill: none; stroke: var(--bark); stroke-width: 3.5; stroke-linecap: round; }

/* Kanopi 3 tone; warna dari mastery (--m): pucat/sage → hijau penuh. */
.vtree__leaf-lo { fill: color-mix(in oklab, var(--leaf-dry), var(--leaf-lo) calc(var(--m, 60) * 1%)); }
.vtree__leaf    { fill: color-mix(in oklab, var(--leaf-dry), var(--leaf)    calc(var(--m, 60) * 1%)); }
.vtree__leaf-hi { fill: color-mix(in oklab, var(--leaf-dry), var(--leaf-hi) calc(var(--m, 60) * 1%)); opacity: 0.92; }
.vtree__outline { fill: none; stroke: var(--accent); stroke-width: 1.5; opacity: 0.35; }

/* Sway: 1 loop, transform-origin pangkal kanopi, durasi/delay seeded. */
.vtree__crown {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: sway var(--sway, 6s) ease-in-out infinite;
  animation-delay: var(--sway-delay, 0s);
  will-change: transform;
}
@keyframes sway {
  0%, 100% { transform: rotate(-1.1deg); }
  50%      { transform: rotate(1.1deg); }
}

.cloud { will-change: transform; }
.valley__clouds {
  animation: drift 46s ease-in-out infinite alternate;
}
@keyframes drift {
  from { transform: translateX(-14px); }
  to   { transform: translateX(14px); }
}

/* --- Pohon "Kamu": center, ditandain tenang (NO glow) --- */
.vgrove__item--you { z-index: 50; }
.vtree--you .vtree__soil { opacity: 0.8 !important; }
.vtree__label {
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  padding: 3px 12px;
  font-family: var(--font-head);
  font-size: 12px;
  line-height: 14px;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--hair);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow);
  white-space: nowrap;
}

/* ==========================================================================
   FRIEND-CARD — tooltip (token kartu Learn)
   ========================================================================== */
.friend-card {
  position: absolute;
  z-index: 60;
  width: 210px;
  margin-top: -12px;
  transform: translate(-50%, -100%);
  padding: 11px 13px;
  background: var(--card);
  border: 1px solid var(--hair);
  border-radius: 14px;
  box-shadow: var(--shadow-card);
  font-size: var(--small);
  line-height: 1.45;
  color: var(--ink);
  pointer-events: none;
}
.friend-card[hidden] { display: none; }
.fc__head {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 3px;
}
.fc__name {
  font-family: var(--font-head);
  font-size: 15px;
  font-weight: 500;
}
.fc__handle { color: var(--muted); font-size: var(--tiny); }
.fc__meta {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
}
.fc__ico { fill: var(--fill); flex: none; }
.fc__area { color: var(--ink); }
.fc__mastery { color: var(--accent); font-weight: 600; }
.fc__cta {
  display: inline-block;
  margin-top: 6px;
  color: var(--accent);
  font-weight: 500;
}

/* ==========================================================================
   VISIT — dunia temen read-only (in-app), overlay dalam scene
   ========================================================================== */
.valley__visit {
  position: absolute;
  inset: 0;
  z-index: 70;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px;
  border-radius: 20px;
  background: rgba(243, 246, 231, 0.94);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 200ms var(--ease);
}
.valley__visit.is-open { opacity: 1; }
.valley__back {
  position: absolute;
  top: 16px;
  left: 16px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--accent);
  background: var(--card);
  border: 1px solid var(--hair);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow);
  cursor: pointer;
}
.visit__stage { height: 180px; display: flex; align-items: flex-end; }
.visit__stage .vtree { pointer-events: none; }
.visit__info { text-align: center; max-width: 360px; }
.visit__name { font-family: var(--font-head); font-size: var(--h3); }
.visit__sub { color: var(--muted); font-size: var(--small); margin-top: 2px; }
.visit__area { color: var(--ink); font-size: var(--small); margin-top: 4px; }

/* --- Note privasi + empty state --- */
.valley__note {
  max-width: var(--container-wide);
  margin: 12px auto 0;
  text-align: center;
  font-size: var(--tiny);
  color: var(--muted);
}
.valley__empty {
  position: absolute;
  inset: 0;
  z-index: 7;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
  color: var(--ink);
  font-size: var(--body);
}

/* Preview (§5 landing): sedikit lebih pendek biar ga makan section. */
.valley--preview .valley__scene { height: min(56vh, 480px); }

/* ==========================================================================
   MOTION GUARD — freeze sway/drift
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .vtree__crown,
  .valley__clouds {
    animation: none !important;
  }
  .vtree__tilt { transition: none; }
  .valley__visit { transition: none; }
}