/* ═══════════════════════════════════════════════════════════
   mid-autumn.css — Trang chào Trung Thu: trăng 3D + lồng đèn vàng
   Câu Chuyện Của Chúng Mình 💕
   ═══════════════════════════════════════════════════════════ */

:root{
  --ma-night-top:#010108;
  --ma-night-mid:#03050e;
  --ma-night-low:#070b18;
  --ma-night-horizon:#0c1220;
  --ma-moon-light:#e8eeff;
  --ma-moon-mid:#c8d4f0;
  --ma-moon-shade:#9aaad0;
  --ma-gold:#b8c8e8;
  --ma-gold-soft:#d0daf0;
}

/* ─────────── SCREEN WRAPPER ─────────── */
html.ma-lock, html.ma-lock body{ overflow:hidden !important; height:100%; }

.ma-screen{
  position:fixed; inset:0; z-index:20000;
  overflow:hidden;
  background:
    radial-gradient(ellipse 70% 50% at 50% 30%, rgba(80,100,160,.08), transparent 65%),
    radial-gradient(ellipse 120% 40% at 50% 100%, rgba(15,25,50,.6), transparent 50%),
    linear-gradient(180deg,
      #000000 0%, #010108 15%, #020410 30%, #040814 45%,
      #060c1a 60%, #0a1225 75%, #0e1830 88%, #101e38 100%);
  opacity:1; visibility:visible;
  transition:opacity 1.1s ease, visibility 0s linear 0s;
}
.ma-screen.ma-hidden{
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .9s ease, visibility 0s linear .9s;
}

/* ─────────── SKY LAYER ─────────── */
.ma-sky{ position:absolute; inset:0; }

/* faint atmospheric depth layers for realistic sky */
.ma-nebula{
  position:absolute; inset:-10%;
  background:
    radial-gradient(ellipse 60% 40% at 50% 28%, rgba(60,80,140,.06), transparent 55%),
    radial-gradient(ellipse 100% 30% at 50% 95%, rgba(20,35,65,.15), transparent 50%),
    linear-gradient(115deg, transparent 40%, rgba(40,50,90,.04) 48%, rgba(60,70,120,.05) 51%, transparent 60%);
  pointer-events:none;
}

.ma-stars{ position:absolute; inset:0; pointer-events:none; transition:transform .15s ease-out; }
.ma-star{
  position:absolute; border-radius:50%;
  background:#fff; box-shadow:0 0 6px rgba(255,255,255,.85);
  animation:ma-twinkle var(--dur,3.2s) ease-in-out infinite;
  animation-delay:var(--del,0s);
}
.ma-stars-far .ma-star{ box-shadow:0 0 3px rgba(255,255,255,.55); }
@keyframes ma-twinkle{
  0%,100%{ opacity:var(--min,.25); transform:scale(1); }
  50%{ opacity:var(--max,1); transform:scale(1.25); }
}

.ma-shooting{
  position:absolute; width:2px; height:2px; border-radius:50%;
  background:#fff;
  box-shadow:0 0 10px 2px rgba(255,255,255,.9);
  animation:ma-shoot 1.6s linear forwards;
}
.ma-shooting::before{
  content:''; position:absolute; top:50%; right:0;
  width:120px; height:1.5px; transform:translateY(-50%);
  background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.9));
}
@keyframes ma-shoot{
  0%{ transform:translate(0,0); opacity:0; }
  8%{ opacity:1; }
  100%{ transform:translate(-320px,220px); opacity:0; }
}

/* soft drifting clouds silhouette */
.ma-clouds{
  position:absolute; left:0; right:0; bottom:12%;
  height:120px; pointer-events:none; opacity:.4;
  background:
    radial-gradient(ellipse 220px 40px at 15% 60%, rgba(10,8,24,.8), transparent 70%),
    radial-gradient(ellipse 260px 46px at 55% 40%, rgba(10,8,24,.7), transparent 70%),
    radial-gradient(ellipse 200px 38px at 85% 55%, rgba(10,8,24,.75), transparent 70%);
  animation:ma-cloud-drift 60s linear infinite alternate;
}
@keyframes ma-cloud-drift{ from{ transform:translateX(-3%); } to{ transform:translateX(3%); } }

/* ─────────── MẶT NƯỚC + BÓNG TRĂNG PHẢN CHIẾU ─────────── */
.ma-water{
  position:absolute; left:0; right:0; bottom:0; height:34vh; min-height:190px;
  overflow:hidden; z-index:1;
  /* nền nước tối sâu — pha xanh dương cực nhẹ ở mặt trên (phản chiếu bầu trời) */
  background:
    linear-gradient(180deg,
      rgba(12,18,32,.98) 0%,
      rgba(6,10,20,.99) 15%,
      #030508 40%,
      #010204 70%,
      #000000 100%);
}

/* đường chân trời — rất mỏng, tinh tế */
.ma-water::after{
  content:''; position:absolute; left:0; right:0; top:0; height:1px;
  background:linear-gradient(90deg,
    transparent 5%,
    rgba(100,130,180,.15) 25%,
    rgba(140,170,210,.3) 45%,
    rgba(160,185,225,.4) 50%,
    rgba(140,170,210,.3) 55%,
    rgba(100,130,180,.15) 75%,
    transparent 95%);
  box-shadow:0 0 6px 0 rgba(100,140,200,.15);
}

/* cột ánh trăng hắt trên mặt nước — "moon path" — dải sáng dọc hẹp như ảnh thật */
.ma-water::before{
  content:''; position:absolute; left:50%; top:0; transform:translateX(-50%);
  width:clamp(60px,10vw,140px); height:100%;
  background:
    linear-gradient(180deg,
      rgba(180,200,235,.2) 0%,
      rgba(140,170,220,.12) 20%,
      rgba(100,140,200,.06) 50%,
      rgba(60,100,160,.02) 80%,
      transparent 100%);
  pointer-events:none; z-index:3;
  /* gợn sóng nhẹ cho moon path */
  mask-image:repeating-linear-gradient(180deg,
    rgba(0,0,0,1) 0px, rgba(0,0,0,.7) 2px, rgba(0,0,0,1) 4px);
  -webkit-mask-image:repeating-linear-gradient(180deg,
    rgba(0,0,0,1) 0px, rgba(0,0,0,.7) 2px, rgba(0,0,0,1) 4px);
  animation:ma-moonpath-shimmer 4s ease-in-out infinite;
}
@keyframes ma-moonpath-shimmer{
  0%,100%{ opacity:.8; }
  50%{ opacity:1; }
}

/* bóng trăng phản chiếu dưới nước */
.ma-water-reflection{
  position:absolute; left:50%; top:0; transform:translateX(-50%) scaleY(-1);
  width:clamp(340px,54vw,640px); height:clamp(340px,54vw,640px);
  border-radius:50%; overflow:hidden;
  opacity:.5; filter:saturate(.85) brightness(.9) contrast(1.05) url(#ma-water-distort);
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, transparent 32%, rgba(0,0,0,.3) 50%, rgba(0,0,0,.7) 70%, rgba(0,0,0,.95) 100%);
  mask-image:linear-gradient(180deg, transparent 0%, transparent 32%, rgba(0,0,0,.3) 50%, rgba(0,0,0,.7) 70%, rgba(0,0,0,.95) 100%);
  pointer-events:none; z-index:1;
}
.ma-water-reflection canvas{ display:block; width:100% !important; height:100% !important; }

/* gợn sóng nước — nhiều lớp cho tự nhiên */
.ma-water-ripple{
  position:absolute; inset:0; pointer-events:none; z-index:4;
  background:
    /* lớp sóng nhỏ gần */
    repeating-linear-gradient(180deg,
      rgba(120,160,210,.03) 0px, transparent 1px, transparent 4px),
    /* lớp sóng lớn xa */
    repeating-linear-gradient(180deg,
      transparent 0px, transparent 8px, rgba(80,120,180,.02) 9px, transparent 10px);
  animation:ma-ripple-drift 12s linear infinite;
  mix-blend-mode:screen;
}
@keyframes ma-ripple-drift{ from{ background-position:0 0; } to{ background-position:0 48px; } }

/* bụi lau/cỏ ven nước cho có chiều sâu tiền cảnh, giống ảnh tham khảo */
.ma-reeds{
  position:absolute; left:0; right:0; bottom:0; height:9vh; min-height:60px;
  background:#020103;
  clip-path:polygon(
    0% 100%, 0% 62%, 3% 40%, 5% 70%, 9% 20%, 12% 66%, 16% 35%,
    22% 72%, 27% 15%, 30% 68%, 36% 45%, 42% 74%, 48% 25%, 55% 70%,
    62% 42%, 68% 76%, 74% 30%, 80% 68%, 86% 20%, 91% 72%, 96% 40%,
    100% 66%, 100% 100%);
  opacity:1; z-index:3;
  filter:drop-shadow(0 -1px 0 rgba(120,140,200,.12));
}

/* ─────────── MOON (ảnh mặt trăng thật, dựng 3D, xoay được) ─────────── */
.ma-moon-wrap{
  position:absolute; left:50%; top:29%;
  transform:translate(-50%,-50%);
  display:flex; align-items:center; justify-content:center;
  z-index:2;
}
.ma-moon-halo{
  display:none;
}

.ma-moon{
  position:relative; z-index:2;
  width:clamp(340px,54vw,640px); height:clamp(340px,54vw,640px);
  border-radius:50%; overflow:hidden;
  cursor:grab;
  background:#000;
  touch-action:none;
  user-select:none;
}
.ma-moon:active{ cursor:grabbing; }
.ma-moon canvas{
  display:block; width:100% !important; height:100% !important;
}

.ma-moon-caption{
  position:absolute; left:50%; top:calc(29% + clamp(200px,27vw,350px));
  transform:translateX(-50%);
  text-align:center; z-index:5; white-space:nowrap;
  font-family:'Cormorant Garamond', serif; font-style:italic;
  font-size:clamp(1rem,2.2vw,1.25rem);
  color:rgba(200,215,240,.9);
  text-shadow:0 0 12px rgba(120,150,200,.4);
  letter-spacing:.03em;
}
.ma-moon-caption span{ font-family:'Be Vietnam Pro', sans-serif; font-style:normal; opacity:.85; }
.ma-moon-hint-inline{
  display:inline-block; margin-top:.35rem;
  font-family:'Be Vietnam Pro', sans-serif; font-style:normal;
  font-size:.68rem; letter-spacing:.18em;
  color:rgba(160,180,220,.45);
  animation:ma-hint-fade 4s ease-in-out infinite;
}
.ma-moon-hint{ display:none; }
@keyframes ma-hint-fade{ 0%,100%{ opacity:.35; } 50%{ opacity:.8; } }

/* ─────────── LANTERNS — chỉ tông vàng/ánh kim ─────────── */
.ma-lanterns{ position:absolute; inset:0; overflow:hidden; z-index:3; }

.ma-lantern{
  position:absolute; bottom:-140px;
  width:var(--lw,46px); height:var(--lh,60px);
  cursor:pointer; pointer-events:auto;
  filter:drop-shadow(0 0 10px rgba(255,200,110,.55));
  animation-name:var(--float-name, ma-float-1);
  animation-duration:var(--dur,22s);
  animation-delay:var(--del,0s);
  animation-timing-function:ease-in-out;
  animation-iteration-count:infinite;
  transform:scale(var(--scale,1));
  opacity:0;
}
.ma-lantern svg{ width:100%; height:100%; display:block; overflow:visible; }
.ma-lantern:hover{ filter:drop-shadow(0 0 18px rgba(255,215,140,.9)); }

@keyframes ma-float-1{
  0%{ opacity:0; transform:translate(0,0) scale(var(--scale,1)); }
  6%{ opacity:1; }
  25%{ transform:translate(18px,-30vh) scale(var(--scale,1)); }
  50%{ transform:translate(-14px,-58vh) scale(var(--scale,1)); }
  75%{ transform:translate(20px,-84vh) scale(var(--scale,1)); }
  94%{ opacity:1; }
  100%{ opacity:0; transform:translate(-10px,-112vh) scale(var(--scale,1)); }
}
@keyframes ma-float-2{
  0%{ opacity:0; transform:translate(0,0) scale(var(--scale,1)); }
  6%{ opacity:1; }
  30%{ transform:translate(-22px,-34vh) scale(var(--scale,1)); }
  55%{ transform:translate(16px,-60vh) scale(var(--scale,1)); }
  80%{ transform:translate(-18px,-88vh) scale(var(--scale,1)); }
  94%{ opacity:1; }
  100%{ opacity:0; transform:translate(12px,-112vh) scale(var(--scale,1)); }
}
@keyframes ma-float-3{
  0%{ opacity:0; transform:translate(0,0) rotate(-2deg) scale(var(--scale,1)); }
  6%{ opacity:1; }
  20%{ transform:translate(12px,-24vh) rotate(2deg) scale(var(--scale,1)); }
  45%{ transform:translate(-20px,-50vh) rotate(-3deg) scale(var(--scale,1)); }
  70%{ transform:translate(14px,-76vh) rotate(2deg) scale(var(--scale,1)); }
  94%{ opacity:1; }
  100%{ opacity:0; transform:translate(-8px,-112vh) rotate(0) scale(var(--scale,1)); }
}

/* ─────────── INTRO TEXT + ENTER BUTTON ─────────── */
.ma-intro{
  position:absolute; left:50%; bottom:5%;
  transform:translateX(-50%);
  text-align:center; z-index:4; width:min(90vw,520px);
  animation:ma-intro-in 1.4s ease .3s both;
}
@keyframes ma-intro-in{ from{ opacity:0; transform:translate(-50%,14px); } to{ opacity:1; transform:translate(-50%,0); } }

.ma-intro-deco{
  display:block; margin-bottom:.5rem;
  color:var(--ma-gold); font-size:1.05rem; letter-spacing:.35em;
  text-shadow:0 0 10px rgba(255,217,138,.5);
}
.ma-title{
  font-family:'Cormorant Garamond', serif; font-weight:400; font-style:italic;
  font-size:clamp(1.8rem,5vw,2.6rem);
  color:#eef0f8;
  text-shadow:0 0 20px rgba(140,170,220,.3);
  margin-bottom:.5rem;
}
.ma-sub{
  font-family:'Be Vietnam Pro', sans-serif; font-weight:300;
  font-size:clamp(.85rem,2vw,.98rem);
  color:#e8dcf0; opacity:.85; letter-spacing:.02em;
}

.ma-enter-btn{
  position:absolute; left:50%; bottom:3.4%; transform:translateX(-50%);
  z-index:5; display:flex; align-items:center; gap:.5rem;
  padding:.75rem 1.5rem;
  background:rgba(140,170,220,.08);
  border:1px solid rgba(160,185,225,.35);
  border-radius:999px;
  color:#e0e6f2; font-family:'Be Vietnam Pro', sans-serif; font-size:.85rem; letter-spacing:.03em;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  cursor:pointer;
  animation:ma-intro-in 1.4s ease .6s both, ma-btn-pulse 2.6s ease-in-out 2s infinite;
  transition:background .3s ease, border-color .3s ease, transform .25s ease;
}
.ma-enter-btn:hover{
  background:rgba(140,170,220,.16); border-color:rgba(160,185,225,.7);
  transform:translateX(-50%) translateY(-2px);
}
.ma-enter-btn svg{ animation:ma-bounce 1.8s ease-in-out infinite; }
@keyframes ma-bounce{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(4px); } }
@keyframes ma-btn-pulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(140,170,220,.2); }
  50%{ box-shadow:0 0 0 8px rgba(140,170,220,0); }
}

/* ─────────── WISH MODAL (mở khi bấm lồng đèn) ─────────── */
.ma-wish-overlay{
  position:fixed; inset:0; z-index:20500;
  display:flex; align-items:center; justify-content:center;
  padding:1.2rem;
  background:rgba(4,3,12,.6);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .4s ease, visibility 0s linear .4s;
}
.ma-wish-overlay.ma-open{
  opacity:1; visibility:visible; pointer-events:auto;
  transition:opacity .4s ease, visibility 0s;
}
.ma-wish-card{
  position:relative; width:min(92vw,380px);
  padding:2.3rem 1.8rem 1.8rem;
  background:linear-gradient(160deg, rgba(12,16,30,.94), rgba(6,8,18,.96));
  border:1px solid rgba(140,170,220,.3);
  border-radius:22px;
  text-align:center;
  box-shadow:0 20px 60px rgba(0,0,0,.6), 0 0 40px rgba(100,140,200,.08);
  transform:scale(.9) translateY(10px); transition:transform .4s cubic-bezier(.34,1.56,.64,1);
}
.ma-wish-overlay.ma-open .ma-wish-card{ transform:scale(1) translateY(0); }
.ma-wish-close{
  position:absolute; top:.7rem; right:.8rem;
  width:28px; height:28px; border-radius:50%; border:none;
  background:rgba(255,255,255,.08); color:#f0e6d8;
  font-size:1.1rem; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .25s ease;
}
.ma-wish-close:hover{ background:rgba(255,255,255,.18); }
.ma-wish-lantern-icon{
  display:flex; align-items:center; justify-content:center;
  margin:0 auto .7rem; width:38px; height:38px;
  filter:drop-shadow(0 0 10px rgba(255,200,110,.6));
}
.ma-wish-lantern-icon svg{ width:100%; height:100%; display:block; }
.ma-wish-text{
  font-family:'Cormorant Garamond', serif; font-style:italic;
  font-size:1.2rem; line-height:1.6; color:#fdf4e4;
}
.ma-wish-deco{ margin-top:1rem; color:var(--ma-gold); letter-spacing:.3em; font-size:.8rem; }

/* ─────────── REOPEN MOON ICON (trên trang chính) ─────────── */
.ma-reopen-btn{
  position:fixed; bottom:1.6rem; right:1.4rem; z-index:900;
  width:50px; height:50px; border-radius:50%; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(160deg,#0e1220,#060810);
  box-shadow:0 6px 18px rgba(5,8,18,.4), 0 0 0 1px rgba(140,170,220,.2) inset;
  opacity:0; visibility:hidden; transform:scale(.7);
  transition:opacity .4s ease, transform .4s cubic-bezier(.34,1.56,.64,1), visibility 0s linear .4s;
}
.ma-reopen-btn.ma-show{
  opacity:1; visibility:visible; transform:scale(1);
  transition:opacity .4s ease .15s, transform .4s cubic-bezier(.34,1.56,.64,1) .15s, visibility 0s;
}
.ma-reopen-btn .ma-reopen-moon{
  width:24px; height:24px; color:var(--ma-gold-soft);
  filter:drop-shadow(0 0 8px rgba(255,217,138,.7));
  animation:ma-reopen-glow 3.4s ease-in-out infinite;
}
@keyframes ma-reopen-glow{
  0%,100%{ filter:drop-shadow(0 0 6px rgba(140,170,220,.45)); }
  50%{ filter:drop-shadow(0 0 12px rgba(160,185,225,.8)); }
}
.ma-reopen-btn:hover{ transform:scale(1.08); }
.ma-reopen-btn.ma-show:hover{ transform:scale(1.08); }

/* ─────────── RESPONSIVE ─────────── */
@media (max-width:520px){
  .ma-moon-wrap{ top:27%; }
  .ma-moon{ width:230px; height:230px; }
  .ma-moon-halo{ width:380px; height:380px; }
  .ma-moon-caption{ top:calc(27% + 148px); }
  .ma-water-reflection{ width:230px; height:230px; }
  .ma-intro{ bottom:8%; }
  .ma-enter-btn{ bottom:3.8%; padding:.65rem 1.2rem; font-size:.78rem; }
  .ma-water{ height:26vh; }
  .ma-reeds{ height:6vh; }
}
@media (max-height:680px){
  .ma-moon-wrap{ top:25%; }
  .ma-moon{ width:200px; height:200px; }
  .ma-moon-halo{ width:340px; height:340px; }
  .ma-moon-caption{ top:calc(25% + 130px); }
  .ma-water-reflection{ width:200px; height:200px; }
  .ma-intro{ bottom:9%; }
  .ma-water{ height:22vh; }
}

/* respect "giảm chuyển động" của hệ thống */
@media (prefers-reduced-motion: reduce){
  .ma-lantern, .ma-moon-halo, .ma-enter-btn, .ma-enter-btn svg, .ma-clouds,
  .ma-reopen-btn .ma-reopen-moon, .ma-star, .ma-moon-hint{ animation-duration:.001s !important; }
}