/* Love Ocean – tema malam v2 (laut berbintang, lebih realistis dan rapi)
   Pasang SETELAH css/chat.css. Jangan dipasang bersama theme-day.css.
   Gambar ada di folder img/night/ (path relatif dari css/ -> ../night/). */

:root { --night:#070d2e; --peach:#a9c4f5; --sun:#cfe0ff; --foam:#eaf2ff; }
body { background:#070d2e; }

/* ================= LANGIT ================= */
.sky {
  inset:0 0 auto 0; height:calc(28.44% + 2px);
  background:#0a1648 url("../night/sky.webp") center/100% 100% no-repeat;
}
.sky::before, .sky::after { content:none; }

/* pulau jauh + mercusuar, dan kapal yang lewat di cakrawala */
.sun {
  display:block; position:absolute; left:auto; right:5%; top:auto; bottom:-1px; margin:0;
  width:36%; height:auto; aspect-ratio:520/150; border-radius:0; box-shadow:none; opacity:.95;
  background:url("../night/island.png") center/100% 100% no-repeat;
}
.halo {
  display:block; position:absolute; left:calc(80% - 5px); top:auto; bottom:7vw; z-index:2; margin:0;
  width:10px; height:10px; border-radius:50%;
  background:radial-gradient(circle,#fffbe0 0,#ffe29a 35%,rgba(255,200,100,0) 72%);
  box-shadow:0 0 12px 4px rgba(255,210,120,.5); animation:nBeacon 4.5s ease-in-out infinite;
}
.boat {
  display:block; position:absolute; left:0; top:auto; bottom:-1px; z-index:3;
  width:clamp(74px,24%,190px); height:auto; aspect-ratio:420/170; opacity:1;
  background:url("../night/ship.png") center/100% 100% no-repeat;
  transform:translateX(-120%); animation:nShip 170s linear -50s infinite; will-change:transform;
}
.boat * { display:none; }

.stars { inset:0; height:100%; background-repeat:no-repeat; background-size:100% 100%; }
.stars.s1 { background-image:url("../night/stars-a.webp"); opacity:.95; animation:nTwinkleA 4.6s ease-in-out infinite alternate; }
.stars.s2 { background-image:url("../night/stars-b.webp"); opacity:.5;  animation:nTwinkleB 6.4s ease-in-out -2s infinite alternate; }

/* awan: dua lapis, bergeser pelan (transform = ringan di HP) */
.cloud.c1, .cloud.c2 {
  position:absolute; left:0; bottom:0; top:auto; width:450%; height:46%;
  border-radius:0; filter:none; background-color:transparent;
  background-repeat:repeat-x; background-size:33.3333% 100%; background-position:0 100%;
  will-change:transform;
}
.cloud.c1 { background-image:url("../night/clouds-far.webp");  opacity:.85; animation:nCloud 300s linear infinite; }
.cloud.c2 { background-image:url("../night/clouds-near.webp"); opacity:.95; animation:nCloud 190s linear -70s infinite; }

.shooting { top:9%; height:2px; box-shadow:0 0 8px 1px rgba(190,215,255,.6); }

/* ================= LAUT ================= */
.sea {
  top:28.44%; bottom:0; overflow:hidden;
  background:#16367a url("../night/sea-a.webp") 0 0/100% 64.41% no-repeat;
}
.sea::before { content:none; }
.waves { display:none; }                      /* gelombang SVG lama diganti gambar */

/* wadah lapisan (dulu kilau): semuanya di dalam .sea, di bawah botol */
.shimmer { left:0; top:0; width:100%; height:100%; margin:0; overflow:hidden; pointer-events:none; }
.shimmer i { all:initial; position:absolute; display:block; pointer-events:none; }

/* 1. permukaan laut fase kedua -> berkilau bergantian */
.shimmer i:nth-child(1) {
  left:0; top:0; width:100%; height:64.41%;
  background:url("../night/sea-b.webp") 0 0/100% 100% no-repeat;
  opacity:0; animation:nSeaB 7s ease-in-out infinite alternate;
}
/* 2. pasir basah */
.shimmer i:nth-child(2) {
  left:0; top:50.44%; width:100%; bottom:0;
  background:#2d3a8c url("../night/sand.webp") 0 0/100% 100% no-repeat;
}
/* 3+4. air yang naik-turun di pantai (gema + utama) */
.shimmer i:nth-child(3), .shimmer i:nth-child(4) {
  left:-3%; top:36.68%; width:106%; height:27.73%;
  background:url("../night/swash.webp") 0 0/100% 100% no-repeat;
  will-change:transform;
}
.shimmer i:nth-child(3) { opacity:.55; animation:nSwash 9s ease-in-out -1.1s infinite; }
.shimmer i:nth-child(4) { animation:nSwash 9s ease-in-out infinite, nSway 13s ease-in-out infinite alternate; }
/* 5-7. kerang & bintang laut (di atas dok, tidak tertutup) */
.shimmer i:nth-child(5), .shimmer i:nth-child(6), .shimmer i:nth-child(7) { background-repeat:no-repeat; background-size:100% 100%; }
.shimmer i:nth-child(5) { left:52%; top:72%; width:10.8%; aspect-ratio:1/1;    background-image:url("../night/starfish.png"); transform:rotate(-12deg); }
.shimmer i:nth-child(6) { left:12%; top:73.8%; width:7.2%;  aspect-ratio:104/90; background-image:url("../night/shell1.png"); }
.shimmer i:nth-child(7) { left:30%; top:71.1%; width:5.3%;  aspect-ratio:76/67;  background-image:url("../night/shell2.png"); transform:rotate(10deg); }
/* 8 + ::after. pohon kelapa di tepi pantai */
.shimmer i:nth-child(8) {
  right:-6%; left:auto; bottom:17%; top:auto; width:44%; aspect-ratio:450/600;
  background:url("../night/palm-right.png") center/100% 100% no-repeat;
  transform-origin:70% 96%; animation:nPalm 9s ease-in-out -3s infinite alternate;
}
.sea::after {
  content:""; position:absolute; left:-7%; bottom:17%; width:52%; aspect-ratio:540/760; z-index:2; pointer-events:none;
  background:url("../night/palm-left.png") center/100% 100% no-repeat;
  transform-origin:14% 97%; animation:nPalm 8s ease-in-out infinite alternate;
}

@media (min-aspect-ratio:1/1) {   /* layar lebar: kerang & bintang laut jangan raksasa */
  .sea::after { width:26%; } .shimmer i:nth-child(8) { width:22%; } .shimmer i:nth-child(5) { width:5%; } .shimmer i:nth-child(6) { width:3.2%; } .shimmer i:nth-child(7) { width:2.4%; }
}

/* ================= BOTOL ================= */
.bottles { inset:0 0 auto 0; height:50%; }
.bottle {
  width:calc(96px*var(--s,1)); height:calc(96px*var(--s,1)*.6906);
  clip-path:none;
}
.bottle .sway {
  background:url("../night/bottle-a.png") center/100% 100% no-repeat;
  transform-origin:50% 50%;
  animation:nBob 6s ease-in-out infinite;
  filter:drop-shadow(0 0 6px var(--mood,#ff5f84)) drop-shadow(0 3px 4px rgba(2,8,40,.45));
}
.bottle:nth-child(even) .sway { background-image:url("../night/bottle-b.png"); animation-duration:7.3s; animation-delay:-2s; }
.bottle .sway svg { display:none; }
.bottle:hover .sway, .bottle:focus-visible .sway {
  filter:drop-shadow(0 0 12px var(--mood,#ff5f84)) drop-shadow(0 3px 4px rgba(2,8,40,.45)); }
/* lingkar riak di garis air */
.bottle::after {
  left:-4%; right:-4%; top:36%; bottom:auto; height:30%;
  border-radius:50%; border:1.5px solid rgba(196,226,255,.55); background:none;
  animation:nRipple 3.6s ease-out infinite; pointer-events:none;
}
.bottle:nth-child(even)::after { animation-delay:-1.4s; }
.bottle:nth-child(6) { translate:-9vw 0; }     /* slot paling kanan jangan terpotong */
.bottle:nth-child(2) { translate:-3vw 0; }

/* ================= VINYET ================= */
.scene::after {
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(ellipse at 50% 42%, transparent 55%, rgba(2,6,25,.42) 100%),
    linear-gradient(180deg, rgba(3,8,35,.45) 0, transparent 16%);
}

/* ================= ANTARMUKA ================= */
h1 { color:#f2f7ff; letter-spacing:.015em; text-shadow:0 2px 18px rgba(90,150,255,.7), 0 1px 2px rgba(2,6,30,.6); }
.tagline { color:#bcd2fa; text-shadow:0 1px 8px rgba(4,10,50,.9); }
.round, .install {
  background:rgba(10,24,78,.46); border:1px solid rgba(170,200,255,.38); color:#eaf2ff;
  backdrop-filter:blur(10px) saturate(1.3); -webkit-backdrop-filter:blur(10px) saturate(1.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 4px 14px rgba(2,6,30,.35);
}
.pill {
  background:rgba(10,24,78,.5); border:1px solid rgba(170,200,255,.28); color:#eaf2ff;
  backdrop-filter:blur(10px) saturate(1.3); -webkit-backdrop-filter:blur(10px) saturate(1.3);
  box-shadow:0 4px 16px rgba(2,6,30,.35);
}
.dock { background:linear-gradient(180deg, transparent, rgba(5,10,42,.55) 40%, rgba(4,8,36,.9)); }
.dock-btn {
  background:rgba(14,32,96,.62); border:1px solid rgba(170,200,255,.3);
  backdrop-filter:blur(12px) saturate(1.3); -webkit-backdrop-filter:blur(12px) saturate(1.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 6px 18px rgba(2,6,30,.4);
}
.dock-btn.main {
  background:linear-gradient(135deg,#ffd9c4,#ff7fa3); border:0;
  box-shadow:0 8px 28px rgba(255,95,132,.45), inset 0 1px 0 rgba(255,255,255,.5);
}
dialog { background:linear-gradient(180deg,#1b2a6b,#0b1440); box-shadow:0 -10px 40px rgba(2,6,30,.55); }
dialog::backdrop { background:rgba(2,6,25,.72); }

/* ================= ANIMASI ================= */
@keyframes nShip { to { transform:translateX(calc(100vw + 20%)) } }
@keyframes nBeacon { 0%,100% { opacity:.25 } 40%,60% { opacity:1 } }
@keyframes nPalm { from { transform:rotate(-.9deg) } to { transform:rotate(1.1deg) } }
@keyframes nTwinkleA { from { opacity:.35 } to { opacity:1 } }
@keyframes nTwinkleB { from { opacity:.15 } to { opacity:.9 } }
@keyframes nCloud    { to { transform:translateX(-33.3333%) } }
@keyframes nSeaB     { from { opacity:0 } to { opacity:.9 } }
@keyframes nSwash    { 0%,100% { transform:translateY(0) } 50% { transform:translateY(22.9%) } }
@keyframes nSway     { from { translate:-1.2% 0 } to { translate:1.2% 0 } }
@keyframes nBob      { 0%,100% { transform:translateY(0) rotate(-1.6deg) } 50% { transform:translateY(2.5px) rotate(1.6deg) } }
@keyframes nRipple   { 0% { transform:scale(.55); opacity:.8 } 100% { transform:scale(1.3); opacity:0 } }

@media (prefers-reduced-motion:reduce) {
  .stars, .cloud, .shimmer i, .bottle .sway, .bottle::after, .sea::after, .boat, .halo { animation:none !important; }
  .boat { transform:translateX(150%); }
  .shimmer i:nth-child(1) { opacity:.5; }
}