/* ═══════════════════════════════════════════════════════════
   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:#020208;
  --ma-night-mid:#050512;
  --ma-night-low:#0a0a1e;
  --ma-night-horizon:#12102a;
  --ma-moon-light:#fff6d8;
  --ma-moon-mid:#ffe9ad;
  --ma-moon-shade:#e8c374;
  --ma-gold:#ffd98a;
  --ma-gold-soft:#ffe7b8;
}

/* ─────────── 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 90% 55% at 50% 8%, rgba(30,20,55,.55), transparent 60%),
    linear-gradient(180deg,
      var(--ma-night-top) 0%, var(--ma-night-mid) 38%,
      var(--ma-night-low) 70%, var(--ma-night-horizon) 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 diagonal "milky" glow band for extra depth */
.ma-nebula{
  position:absolute; inset:-10%;
  background:linear-gradient(115deg, transparent 40%, rgba(120,110,200,.05) 48%, rgba(200,160,255,.07) 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%); } }

/* mountain / tree line silhouette at the very bottom for depth */
.ma-horizon{
  position:absolute; left:0; right:0; bottom:0; height:15vh; min-height:100px;
  background:var(--ma-night-horizon);
  clip-path:polygon(
    0% 100%, 0% 55%, 6% 40%, 13% 58%, 20% 30%, 28% 52%, 36% 22%,
    44% 48%, 52% 35%, 60% 55%, 68% 26%, 76% 50%, 84% 32%, 92% 54%,
    100% 38%, 100% 100%);
  opacity:.95;
}
.ma-horizon::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.55));
}

/* ─────────── MOON (lớn, trung tâm, xoay 3D) ─────────── */
.ma-moon-wrap{
  position:absolute; left:50%; top:42%;
  transform:translate(-50%,-50%);
  display:flex; align-items:center; justify-content:center;
  z-index:2;
}
.ma-moon-halo{
  position:absolute; width:clamp(420px,64vw,760px); height:clamp(420px,64vw,760px);
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,233,173,.48) 0%, rgba(255,233,173,.18) 34%, rgba(255,233,173,0) 68%);
  filter:blur(3px);
  animation:ma-halo-breathe 6s ease-in-out infinite;
  pointer-events:none;
}
@keyframes ma-halo-breathe{
  0%,100%{ transform:scale(1); opacity:.85; }
  50%{ transform:scale(1.05); opacity:1; }
}

.ma-moon{
  position:relative; z-index:2;
  width:clamp(280px,42vw,520px); height:clamp(280px,42vw,520px);
  border-radius:50%; overflow:hidden;
  cursor:grab;
  box-shadow:
    0 0 60px 10px rgba(255,233,173,.38),
    0 0 140px 34px rgba(255,233,173,.16),
    inset 0 0 40px rgba(0,0,0,.3);
  touch-action:none;
  user-select:none;
}
.ma-moon:active{ cursor:grabbing; }

/* ambient base tint behind the 3D sphere, visible at the very edges */
.ma-moon-ambient{
  position:absolute; inset:0; border-radius:50%;
  background:radial-gradient(circle at 40% 35%, var(--ma-moon-mid), var(--ma-moon-shade) 100%);
}

.ma-moon-stage{
  position:absolute; inset:0;
  perspective:900px; perspective-origin:50% 50%;
}
.ma-moon-sphere{
  position:absolute; inset:0;
  transform-style:preserve-3d;
  will-change:transform;
}
/* lõi mặt trăng — nhiều lớp gradient chồng để tạo cảm giác đá/bụi thật hơn
   thay vì một khối màu phẳng: vùng sáng chính giữa lệch, viền tối dần ra mép
   (limb darkening thật của ảnh chụp mặt trăng), thêm ánh xanh nhẹ ở vùng biển */
.ma-moon-core{
  position:absolute; inset:0; border-radius:50%;
  background:
    radial-gradient(circle at 33% 28%, rgba(255,255,255,.55), rgba(255,255,255,0) 30%),
    radial-gradient(circle at 62% 66%, rgba(120,100,110,.16), rgba(120,100,110,0) 45%),
    radial-gradient(circle at 40% 35%, var(--ma-moon-light) 0%, var(--ma-moon-mid) 48%, var(--ma-moon-shade) 82%, #c9a25f 100%);
  box-shadow:
    inset -22px -22px 60px rgba(70,48,18,.32),
    inset 12px 12px 34px rgba(255,255,255,.16),
    inset 0 0 70px rgba(40,26,10,.28);
  will-change:transform;
}
/* miệng hố — có viền sáng hắt lên một bên + đáy tối bên kia để trông lồi/lõm thật */
.ma-crater{
  position:absolute; left:50%; top:50%; border-radius:50%;
  background:
    radial-gradient(circle at 30% 26%, rgba(255,248,225,.4), transparent 38%),
    radial-gradient(circle at 66% 72%, rgba(55,38,14,.6), rgba(55,38,14,.2) 65%, transparent 100%);
  will-change:transform;
}
/* biển tối (mare) — hình hơi loang, ánh xám-xanh trầm đặc trưng của "biển" trên trăng */
.ma-mare{
  position:absolute; left:50%; top:50%;
  background:radial-gradient(circle, rgba(96,88,78,.38), rgba(96,88,78,.12) 60%, transparent 78%);
  filter:blur(2px);
  will-change:transform;
}

/* vùng tối theo pha trăng thực — luôn nằm trên cùng, không xoay theo 3D */
.ma-moon-shadow{
  position:absolute; top:0; left:0; width:100%; height:100%;
  border-radius:50%;
  background:radial-gradient(circle at 50% 50%, rgba(6,6,20,.97) 60%, rgba(6,6,20,.82) 100%);
  filter:blur(2.5px);
  z-index:3;
  pointer-events:none;
  transition:transform .6s ease;
}
.ma-moon-rim{
  position:absolute; inset:0; border-radius:50%;
  box-shadow:inset 0 0 22px rgba(0,0,0,.35);
  pointer-events:none; z-index:4;
}

.ma-moon-caption{
  position:absolute; left:50%; top:calc(42% + clamp(165px,22vw,285px));
  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:var(--ma-gold-soft);
  text-shadow:0 0 12px rgba(255,217,138,.5);
  letter-spacing:.03em;
}
.ma-moon-caption span{ font-family:'Be Vietnam Pro', sans-serif; font-style:normal; opacity:.85; }
.ma-moon-hint{
  position:absolute; left:50%; top:calc(42% + clamp(195px,25vw,320px));
  transform:translateX(-50%);
  z-index:5; font-size:.72rem; letter-spacing:.2em;
  color:rgba(255,231,184,.55);
  font-family:'Be Vietnam Pro', sans-serif;
  animation:ma-hint-fade 4s ease-in-out infinite;
}
@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:11%;
  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:#fff8ea;
  text-shadow:0 0 20px rgba(255,217,138,.4);
  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(255,233,173,.1);
  border:1px solid rgba(255,233,173,.45);
  border-radius:999px;
  color:#fff8ea; 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(255,233,173,.2); border-color:rgba(255,233,173,.8);
  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(255,233,173,.25); }
  50%{ box-shadow:0 0 0 8px rgba(255,233,173,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(18,14,38,.94), rgba(8,7,20,.96));
  border:1px solid rgba(255,217,138,.35);
  border-radius:22px;
  text-align:center;
  box-shadow:0 20px 60px rgba(0,0,0,.6), 0 0 40px rgba(255,217,138,.12);
  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,#161228,#08060f);
  box-shadow:0 6px 18px rgba(10,6,20,.4), 0 0 0 1px rgba(255,217,138,.25) 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(255,217,138,.55)); }
  50%{ filter:drop-shadow(0 0 12px rgba(255,217,138,.9)); }
}
.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:36%; }
  .ma-intro{ bottom:15%; }
  .ma-enter-btn{ bottom:3.8%; padding:.65rem 1.2rem; font-size:.78rem; }
  .ma-horizon{ height:11vh; }
  .ma-moon-hint{ display:none; }
}
@media (max-height:680px){
  .ma-moon-wrap{ top:32%; }
  .ma-moon{ width:220px; height:220px; }
  .ma-moon-halo{ width:340px; height:340px; }
  .ma-moon-caption{ top:calc(32% + 138px); }
  .ma-moon-hint{ display:none; }
  .ma-intro{ bottom:14%; }
}

/* 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; }
}