/* ==========================================================
   Suasana Jepang di latar (transparan, tidak menutup kuning)
   - Pola bunga sakura & gelombang tipis di seluruh latar
   - Siluet Fuji, pagoda, torii, lentera, pohon sakura di bawah layar
   Pakai lapisan fixed (bukan background-attachment) agar jalan di iPhone.
   ========================================================== */
body { position: relative; }
body::before, body::after { content: ""; position: fixed; left: 0; right: 0; pointer-events: none; z-index: -1; }
body::before { top: 0; bottom: 0; background: url("../assets/img/bg-sakura.svg") repeat; background-size: 320px 320px; opacity: .55; }
body::after {
  bottom: 0; height: clamp(150px, 22vw, 260px);
  background: url("../assets/img/bg-skyline.svg") no-repeat center bottom / cover; opacity: .55;
}
@media (max-width: 1040px) { body::after { bottom: calc(64px + env(safe-area-inset-bottom, 0px)); height: 150px; } }
/* Latar di atas tetap transparan supaya suasana terlihat */
html { background: var(--page-bg); }
body { background: transparent; }
main, .view, .view-head, .view-body { background: transparent; }
/* Cetak: tanpa hiasan */
@media print { body::before, body::after { display: none; } }

/* ==========================================================
   Latar foto asli Gunung Fuji & sakura (menggantikan ilustrasi)
   Foto dibuat transparan di atas kuning agar kuning tetap dominan.
   HP: foto tegak · Komputer: foto lebar
   ========================================================== */
:root { --bg-photo-opacity: .42; }
body::before {
  background: url("../assets/img/bg-fuji-mobile.webp?v=17") center bottom / cover no-repeat;
  opacity: var(--bg-photo-opacity);
  mix-blend-mode: multiply;
}
body::after { display: none; }   /* siluet ilustrasi tidak dipakai lagi */
@media (min-width: 1041px), (orientation: landscape) and (min-width: 700px) {
  body::before { background-image: url("../assets/img/bg-fuji-desktop.webp?v=17"); background-position: center 70%; }
}
@media (min-width: 1041px) { :root { --bg-photo-opacity: .3; } }

/* Foto Fuji baru: puncak di tengah layar, sedikit lebih jelas */
:root { --bg-photo-opacity: .5; }
body::before { background-position: center 38%; }
@media (min-width: 1041px), (orientation: landscape) and (min-width: 700px) {
  body::before { background-position: center 30%; }
}
@media (min-width: 1041px) { :root { --bg-photo-opacity: .36; } }
/* "luminosity": bentuk Fuji & salju tetap terlihat, warna kuning tetap kuat */
:root { --bg-photo-opacity: .55; }
body::before { mix-blend-mode: luminosity; }
@media (min-width: 1041px) { :root { --bg-photo-opacity: .42; } }

/* ==========================================================
   Teks di atas foto latar: lebih pekat + lingkar cahaya kuning tipis
   supaya tidak kalah dengan dahan sakura & lereng Fuji di belakangnya.
   ========================================================== */
:root { --on-bg-ink: #0E0F11; --on-bg-glow: rgb(255 213 54 / .96); }
.hero-copy h1, .hero-lead,
.view-head h1, .view-sub,
.section-head h2, .section-head p, .lead {
  color: var(--on-bg-ink);
  text-shadow: 0 0 .45em var(--on-bg-glow), 0 0 1em var(--on-bg-glow), 0 0 1.8em rgb(255 213 54 / .75);
}
.hero-lead, .view-sub, .section-head p, .lead { font-weight: 500; }
/* tombol garis di hero: beri isi terang supaya tulisan biru tetap jelas */
.hero-actions .btn-outline { background: rgb(255 248 214 / .94); text-shadow: none; }
/* paragraf biasa yang langsung di atas latar (mis. Profil → Tentang) */
.profile-grid > div:first-child > p {
  color: var(--on-bg-ink); font-weight: 500;
  text-shadow: 0 0 .45em var(--on-bg-glow), 0 0 1em var(--on-bg-glow), 0 0 1.8em rgb(255 213 54 / .75);
}