/* Hero — cảnh cổ tích xếp lớp (ảnh AI nền trong suốt) + animation */
:root{
  --ink:#4a3940; --ink-soft:#8f7d86;
  --wine:#7a3746; --wine-d:#5f2b38;
  --gold:#b0894a; --gold-d:#8f6f34;
  --f-script:"Pinyon Script","Cormorant Garamond",cursive;
  --f-serif:"Cormorant Garamond","Playfair Display",Georgia,serif;
  --f-body:"Be Vietnam Pro",system-ui,sans-serif;
}
*,*::before,*::after{box-sizing:border-box;}
html{background:#ece3d2;}          /* nền đục */
body{margin:0;font-family:var(--f-body);color:var(--ink);background:#ece3d2;}
img{display:block;max-width:100%;}

.hero{position:relative;min-height:100svh;overflow:hidden;
  display:flex;align-items:stretch;justify-content:center;
  background:radial-gradient(120% 80% at 50% 28%, #f1e9da 0%, #e7ddc7 62%, #ddd2b8 100%);}
/* Cột dọc căn giữa — trên desktop không bị kéo giãn ngang */
.frame{position:relative;width:100%;max-width:520px;min-height:100svh;overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-end;
  box-shadow:0 0 90px -24px rgba(90,70,50,.3);}

.stage{position:absolute;inset:-2%;transform-origin:50% 46%;
  background:radial-gradient(120% 80% at 50% 22%, #f5eee2 0%, #e9edeb 42%, #efe7d7 76%, #e6dcc7 100%);
  animation:pushin 10s cubic-bezier(.2,.6,.25,1) forwards;}
@keyframes pushin{from{transform:scale(1.09);}to{transform:scale(1);}}

.sky{position:absolute;inset:0;z-index:0;
  background:radial-gradient(120% 80% at 50% 22%, #f5eee2 0%, #e9edeb 42%, #efe7d7 76%, #e6dcc7 100%);}

.layer{position:absolute;pointer-events:none;height:auto;opacity:0;}

/* Mây */
.clouds{width:150%;z-index:1;}
.clouds-a{top:6%;left:-25%;opacity:.7;animation:cloudA 50s linear infinite, fadeIn 2s .2s forwards;}
.clouds-b{top:30%;left:-18%;width:138%;opacity:.42;animation:cloudB 66s linear infinite, fadeIn 2s .5s forwards;}
@keyframes cloudA{to{transform:translateX(12%);}}
@keyframes cloudB{to{transform:translateX(-12%);}}

/* Lâu đài — hiện rõ ở giữa (sau chữ) */
.castle{width:60%;left:50%;top:29%;transform:translateX(-50%);z-index:2;
  animation:castleIn 2s .3s forwards;}
@keyframes castleIn{from{opacity:0;transform:translateX(-50%) translateY(14px) scale(1.02);}
  to{opacity:.96;transform:translateX(-50%) translateY(0) scale(1);}}

/* Chim */
.birds{width:42%;left:6%;top:22%;z-index:3;animation:birdFly 30s linear infinite, fadeIn 2s 1s forwards;}
@keyframes birdFly{from{transform:translateX(-8%);}to{transform:translateX(130%);}}

/* Khung hoa: trên + dưới + 2 bên */
.garland{width:116%;left:50%;z-index:5;}
.garland-top{top:-8%;transform:translateX(-50%);animation:gTop 2s .5s forwards;}
.garland-bot{bottom:-8%;transform:translateX(-50%) scaleY(-1);animation:gBot 2s .6s forwards;}
@keyframes gTop{from{opacity:0;transform:translateX(-50%) translateY(-16px);}to{opacity:1;transform:translateX(-50%) translateY(0);}}
@keyframes gBot{from{opacity:0;transform:translateX(-50%) scaleY(-1) translateY(-16px);}to{opacity:1;transform:translateX(-50%) scaleY(-1) translateY(0);}}

.cl-left{width:42%;left:-12%;top:38%;z-index:4;animation:clIn 2s .8s forwards;}
.cl-right{width:42%;right:-12%;top:40%;z-index:4;transform:scaleX(-1);animation:clInR 2s .9s forwards;}
@keyframes clIn{from{opacity:0;transform:translateX(-14px);}to{opacity:1;transform:none;}}
@keyframes clInR{from{opacity:0;transform:scaleX(-1) translateX(-14px);}to{opacity:1;transform:scaleX(-1);}}

/* Chữ + ánh sáng mềm phía sau */
.content{position:absolute;z-index:7;top:47%;left:50%;transform:translate(-50%,-50%);
  width:min(80%,430px);text-align:center;}
.content::before{content:"";position:absolute;inset:-22% -26%;z-index:-1;border-radius:50%;
  background:radial-gradient(58% 52% at 50% 50%, rgba(248,243,234,.86), rgba(248,243,234,0) 70%);}

.kicker{font-family:var(--f-body);font-weight:500;letter-spacing:.36em;text-transform:uppercase;
  font-size:.66rem;color:var(--gold-d);margin:0 0 14px;opacity:0;animation:up 1s 1.2s forwards;}
.names{font-family:var(--f-script);font-weight:400;color:var(--wine);margin:0;line-height:.95;
  text-shadow:0 2px 14px rgba(248,243,234,.9);}
.names span{display:block;font-size:clamp(4rem,19vw,7rem);opacity:0;animation:up 1.1s forwards;}
.names span:first-of-type{animation-delay:1.35s;}
.names span:last-of-type{animation-delay:1.65s;}
.names em{display:block;font-style:normal;font-size:clamp(1.7rem,6.5vw,2.4rem);color:var(--gold);
  margin:-.12em 0;opacity:0;animation:up 1s 1.5s forwards;}
.rule{display:flex;align-items:center;justify-content:center;gap:12px;margin:10px auto;max-width:200px;
  color:var(--gold);opacity:0;animation:up 1s 1.85s forwards;}
.rule span{flex:1;height:1px;background:currentColor;opacity:.6;}
.rule i{font-style:normal;font-size:.8rem;}
.date{font-family:var(--f-serif);font-weight:500;letter-spacing:.24em;color:var(--wine-d);
  font-size:1.02rem;margin:0;opacity:0;animation:up 1s 2s forwards;}
.sub{font-family:var(--f-serif);font-style:italic;color:var(--ink-soft);font-size:1.06rem;
  margin:7px 0 0;opacity:0;animation:up 1s 2.15s forwards;}
@keyframes up{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:none;}}
@keyframes fadeIn{to{opacity:1;}}

/* Cánh hoa rơi */
.petal{position:absolute;top:-8%;width:30px;z-index:8;opacity:0;pointer-events:none;}
.p1{left:16%;animation:fall 13s .4s linear infinite;}
.p2{left:38%;width:22px;animation:fall 17s 2s linear infinite;}
.p3{left:58%;width:34px;animation:fall 15s 1s linear infinite;}
.p4{left:74%;width:24px;animation:fall 19s 3.5s linear infinite;}
.p5{left:88%;width:20px;animation:fall 16s 5s linear infinite;}
@keyframes fall{0%{opacity:0;transform:translateY(0) rotate(0);}10%{opacity:.9;}
  90%{opacity:.8;}100%{opacity:0;transform:translateY(96vh) translateX(26px) rotate(220deg);}}

.scroll{position:relative;z-index:9;margin-bottom:20px;
  font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-soft);
  opacity:0;animation:up 1s 2.4s forwards;}

/* Chỉ chạy animation khi TẤT CẢ ảnh đã tải xong (.ready) — tránh chạy lúc ảnh chưa hoàn chỉnh */
.hero:not(.ready) .stage,
.hero:not(.ready) .layer,
.hero:not(.ready) .petal,
.hero:not(.ready) .content,
.hero:not(.ready) .content > *,
.hero:not(.ready) .scroll{ animation-play-state:paused !important; }

@media (prefers-reduced-motion:reduce){
  .stage{animation:none;transform:none;}
  .layer,.kicker,.names span,.names em,.rule,.date,.sub,.scroll{opacity:1 !important;animation:none !important;}
  .castle{opacity:.96 !important;transform:translateX(-50%);}
  .garland-top{transform:translateX(-50%);}.garland-bot{transform:translateX(-50%) scaleY(-1);}
  .cl-right{transform:scaleX(-1);}
  .petal,.birds{display:none;}
}