/* ============ FOR DUWA · a little film ============ */
:root{
  --ink:#0a0d18;
  --ink2:#070a12;
  --gold:#e8c98a;
  --gold-soft:#f3e2bd;
  --rose:#e9b8c4;
  --moon:#f5f0e4;
  --txt:#eae6dc;
  --txt-dim:rgba(234,230,220,.55);
  --serif:'Cormorant Garamond',Georgia,serif;
  --script:'Parisienne',cursive;
  --sans:'Inter',system-ui,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  background:radial-gradient(120% 100% at 50% 0%, #101528 0%, var(--ink) 45%, var(--ink2) 100%);
  color:var(--txt);
  font-family:var(--serif);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
}

/* ---- persistent layers ---- */
#sky{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
#dust{position:fixed;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;opacity:.7}
.grain{position:fixed;inset:-50%;z-index:60;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
  animation:grain 8s steps(10) infinite}
@keyframes grain{
  0%,100%{transform:translate(0,0)}10%{transform:translate(-5%,-6%)}20%{transform:translate(-12%,4%)}
  30%{transform:translate(6%,-9%)}40%{transform:translate(-4%,12%)}50%{transform:translate(-9%,7%)}
  60%{transform:translate(10%,3%)}70%{transform:translate(3%,10%)}80%{transform:translate(-8%,-3%)}90%{transform:translate(7%,-7%)}
}
.vignette{position:fixed;inset:0;z-index:55;pointer-events:none;
  background:radial-gradient(ellipse at center, transparent 52%, rgba(3,4,9,.55) 100%)}
.letterbox{position:fixed;left:0;right:0;height:0;background:#02030a;z-index:70;pointer-events:none;
  transition:height 1.6s cubic-bezier(.7,0,.3,1)}
.letterbox-top{top:0}.letterbox-bottom{bottom:0}
body.film .letterbox{height:clamp(28px,6vh,64px)}
body.nofilm .letterbox{height:0}

/* ---- scenes ---- */
.scene{
  position:fixed;inset:0;z-index:10;display:flex;align-items:center;justify-content:center;
  text-align:center;opacity:0;visibility:hidden;transform:scale(1.02);
  transition:opacity 1.4s ease,transform 1.8s cubic-bezier(.2,.6,.2,1),visibility 0s linear 1.4s;
  padding:clamp(48px,9vh,90px) 24px;
}
.scene.active{opacity:1;visibility:visible;transform:scale(1);transition-delay:0s}
.scene-kicker{
  font-family:var(--sans);font-size:clamp(10px,1.3vw,12px);letter-spacing:.42em;text-transform:uppercase;
  color:var(--gold);opacity:.85;margin-bottom:clamp(18px,3.5vh,34px)}

/* ---- entry ---- */
.entry-wrap{display:flex;flex-direction:column;align-items:center;gap:0}
.entry-over{font-family:var(--sans);font-size:clamp(10px,1.4vw,13px);letter-spacing:.38em;text-transform:uppercase;
  color:var(--txt-dim);opacity:0;animation:riseIn 1.6s ease .3s forwards}
.entry-name{
  font-family:var(--script);font-weight:400;font-size:clamp(72px,16vw,168px);line-height:1.15;
  background:linear-gradient(160deg,var(--gold-soft) 10%,var(--gold) 45%,#b98f56 90%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 6px 40px rgba(232,201,138,.22));
  opacity:0;animation:riseIn 2s ease .9s forwards}
.entry-date{font-size:clamp(15px,2.2vw,20px);letter-spacing:.5em;color:var(--txt-dim);margin-top:6px;
  opacity:0;animation:riseIn 1.6s ease 1.5s forwards}
@keyframes riseIn{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:translateY(0)}}
.begin-btn{
  position:relative;margin-top:clamp(38px,7vh,64px);width:104px;height:104px;border-radius:50%;
  background:transparent;border:none;cursor:pointer;color:var(--gold-soft);
  opacity:0;animation:riseIn 1.6s ease 2.2s forwards}
.begin-btn .ring{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(232,201,138,.55);
  animation:pulse 2.6s ease-in-out infinite}
.begin-btn .ring::after{content:'';position:absolute;inset:-12px;border-radius:50%;border:1px solid rgba(232,201,138,.18);
  animation:pulse 2.6s ease-in-out infinite .4s}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.07);opacity:.6}}
.begin-btn .label{font-family:var(--sans);font-size:12px;letter-spacing:.34em;text-transform:uppercase;padding-left:.34em}
.begin-btn:hover .ring{border-color:var(--gold)}
.entry-hint{margin-top:26px;font-family:var(--sans);font-size:10px;letter-spacing:.3em;text-transform:uppercase;
  color:rgba(234,230,220,.3);opacity:0;animation:riseIn 1.6s ease 2.8s forwards}

/* ---- titles ---- */
.titles-wrap{max-width:860px}
.title-line{
  font-size:clamp(24px,4.6vw,44px);font-weight:300;line-height:1.5;letter-spacing:.02em;
  color:var(--txt);opacity:0;filter:blur(10px);transform:translateY(14px);
  transition:opacity 2s ease,filter 2s ease,transform 2s ease;
  position:absolute;left:50%;top:50%;width:min(860px,86vw);transform:translate(-50%,calc(-50% + 14px))}
.title-line em{font-style:italic;color:var(--gold-soft)}
.title-line.show{opacity:1;filter:blur(0);transform:translate(-50%,-50%)}
.title-line.gone{opacity:0;filter:blur(12px);transform:translate(-50%,calc(-50% - 18px))}

/* ---- moon ---- */
.moon-wrap{display:flex;flex-direction:column;align-items:center}
.moon-stage{position:relative;width:clamp(200px,34vh,320px);height:clamp(200px,34vh,320px);margin-bottom:clamp(20px,4vh,36px)}
.moon-stage::before{content:'';position:absolute;inset:-34%;border-radius:50%;
  background:radial-gradient(circle,rgba(245,240,228,.16) 0%,rgba(245,240,228,.05) 45%,transparent 70%);
  animation:moonHalo 6s ease-in-out infinite}
@keyframes moonHalo{0%,100%{opacity:.75;transform:scale(1)}50%{opacity:1;transform:scale(1.05)}}
#moonCanvas{width:100%;height:100%;display:block;border-radius:50%;
  filter:drop-shadow(0 0 60px rgba(245,240,228,.25))}
.moon-title{font-size:clamp(24px,4.4vw,40px);font-weight:400}
.moon-title em{font-style:italic;color:var(--gold-soft)}
.moon-meta{font-family:var(--sans);font-size:clamp(10px,1.3vw,12px);letter-spacing:.28em;text-transform:uppercase;
  color:var(--txt-dim);margin-top:14px}
.moon-note{font-size:clamp(17px,2.6vw,22px);font-style:italic;line-height:1.6;color:var(--txt-dim);margin-top:clamp(14px,3vh,24px)}
.moon-wrap>*{opacity:0;transform:translateY(18px);transition:opacity 1.8s ease,transform 1.8s ease}
.scene.active .moon-wrap>*{opacity:1;transform:translateY(0)}
.scene.active .moon-stage{transition-delay:.3s}
.scene.active .moon-title{transition-delay:1.4s}
.scene.active .moon-meta{transition-delay:2s}
.scene.active .moon-note{transition-delay:2.8s}
.scene.active .scene-kicker{transition-delay:0s}
.moon-wrap .scene-kicker{opacity:0;transition:opacity 1.4s ease}
.scene.active .moon-wrap .scene-kicker{opacity:.85}

/* ---- sunset ---- */
#scene-sunset{align-items:flex-end;padding-bottom:clamp(60px,12vh,120px)}
#scene-sunset .fx-canvas{z-index:0}
.sunset-msg{position:relative;z-index:2;max-width:780px}
.sunset-msg .scene-kicker{opacity:0;transition:opacity 1.4s ease}
.scene.active .sunset-msg .scene-kicker{opacity:.85}
#scene-sunset .msg-line{text-shadow:0 2px 30px rgba(5,8,16,.9)}
/* while the sun is up, the page's own night layers soften */
body.sunset-mode .vignette{opacity:.5}

/* ---- typing animation ---- */
.msg-line.typing{opacity:1;filter:blur(0);transform:translateY(0)}
.type-caret{display:inline-block;width:1px;height:1em;background:var(--gold-soft);
  vertical-align:-.12em;margin-left:2px;animation:caretBlink 0.85s step-end infinite}
@keyframes caretBlink{0%,100%{opacity:1}50%{opacity:0}}

/* ---- sky lanterns ---- */
#scene-lanterns{align-items:flex-end;padding-bottom:clamp(70px,14vh,140px)}
.lantern-msg{position:relative;z-index:2;max-width:760px}
.lantern-title{font-size:clamp(26px,4.8vw,44px);font-weight:300;line-height:1.4;
  opacity:0;transform:translateY(18px);transition:opacity 1.8s ease .8s,transform 1.8s ease .8s}
.lantern-title em{font-style:italic;color:var(--gold-soft)}
.lantern-note{font-size:clamp(16px,2.6vw,22px);font-style:italic;color:var(--txt-dim);margin-top:16px;
  opacity:0;transform:translateY(14px);transition:opacity 1.8s ease 2s,transform 1.8s ease 2s}
.scene.active .lantern-title,.scene.active .lantern-note{opacity:1;transform:translateY(0)}
.lantern-msg .scene-kicker{opacity:0;transition:opacity 1.4s ease}
.scene.active .lantern-msg .scene-kicker{opacity:.85}

/* ---- message scenes ---- */
.fx-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.msg-wrap{max-width:820px;position:relative;z-index:2}
.msg-line{
  font-size:clamp(23px,4.2vw,40px);font-weight:300;line-height:1.55;
  opacity:0;filter:blur(8px);transform:translateY(16px);
  transition:opacity 1.8s ease,filter 1.8s ease,transform 1.8s ease}
.msg-line.show{opacity:1;filter:blur(0);transform:translateY(0)}
.msg-em{font-style:italic;color:var(--gold-soft);margin-top:clamp(10px,2vh,18px);
  font-size:clamp(26px,4.8vw,46px)}
.msg-line em{font-style:italic;color:var(--gold-soft)}
.tease-name{
  font-family:var(--script);font-style:normal!important;font-size:1.35em;
  background:linear-gradient(160deg,var(--gold-soft),var(--gold));
  -webkit-background-clip:text;background-clip:text;color:transparent!important;
  padding:0 .1em;position:relative;white-space:nowrap}
.tease-name::after{content:'';position:absolute;left:8%;right:8%;bottom:-4px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(232,201,138,.7),transparent)}
.msg-wrap .scene-kicker{opacity:0;transition:opacity 1.4s ease}
.scene.active .msg-wrap .scene-kicker{opacity:.85}

/* aurora */
.aurora{position:absolute;inset:0;overflow:hidden;pointer-events:none;opacity:.55}
.aurora i{position:absolute;left:-20%;width:140%;height:46%;filter:blur(70px);border-radius:50%}
.aurora i:nth-child(1){top:-12%;background:linear-gradient(90deg,rgba(90,60,140,.30),rgba(232,184,196,.16));animation:aur 16s ease-in-out infinite}
.aurora i:nth-child(2){top:8%;background:linear-gradient(90deg,rgba(60,90,160,.22),rgba(232,201,138,.10));animation:aur 20s ease-in-out infinite reverse}
.aurora i:nth-child(3){top:-4%;background:linear-gradient(90deg,rgba(150,80,120,.14),rgba(90,130,190,.14));animation:aur 24s ease-in-out infinite 3s}
@keyframes aur{0%,100%{transform:translateX(-6%) skewY(-3deg)}50%{transform:translateX(6%) skewY(3deg)}}

/* ---- gift ---- */
.gift-wrap{display:flex;flex-direction:column;align-items:center}
.gift-title{font-size:clamp(28px,5vw,46px);font-weight:400;font-style:italic;margin-bottom:clamp(28px,6vh,54px)}
.gift-wrap>*{opacity:0;transform:translateY(18px);transition:opacity 1.6s ease,transform 1.6s ease}
.scene.active .gift-wrap>*{opacity:1;transform:translateY(0)}
.scene.active .gift-wrap .gift-title{transition-delay:.5s}
.scene.active .gift-wrap .gift-stage{transition-delay:1.2s}
.scene.active .gift-wrap .gift-hint{transition-delay:2s}

.gift-stage{position:relative;perspective:900px}
.gift-box{
  position:relative;width:clamp(150px,22vh,200px);height:clamp(135px,20vh,180px);
  background:transparent;border:none;cursor:pointer;display:block;
  animation:boxFloat 3.6s ease-in-out infinite;transition:transform .3s ease}
.gift-box:hover{transform:scale(1.04)}
@keyframes boxFloat{0%,100%{translate:0 0}50%{translate:0 -10px}}
.box-glow{position:absolute;inset:-40%;border-radius:50%;
  background:radial-gradient(circle,rgba(232,201,138,.20) 0%,transparent 65%);
  animation:moonHalo 3s ease-in-out infinite;pointer-events:none}
.box-body{
  position:absolute;left:8%;right:8%;bottom:0;top:30%;
  background:linear-gradient(165deg,#1d2440 0%,#141a30 55%,#0e1322 100%);
  border-radius:6px;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 24px 50px rgba(0,0,0,.55);overflow:hidden}
.ribbon-v{position:absolute;top:0;bottom:0;left:50%;width:18%;transform:translateX(-50%);
  background:linear-gradient(180deg,#e9c887,#c79c58);box-shadow:0 0 18px rgba(232,201,138,.35)}
.box-lid{
  position:absolute;left:0;right:0;top:14%;height:22%;
  background:linear-gradient(165deg,#232b4e 0%,#181f3a 60%,#111730 100%);
  border-radius:6px;box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 10px 24px rgba(0,0,0,.45);
  transform-origin:12% 100%;transition:transform 1.1s cubic-bezier(.6,-0.3,.3,1.2);z-index:3}
.bow{position:absolute;left:50%;top:0;transform:translate(-50%,-58%)}
.bow i{position:absolute;width:34px;height:24px;border:4px solid #dfb873;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;top:0}
.bow i:first-child{left:-32px;transform:rotate(-28deg)}
.bow i:last-child{left:-2px;transform:rotate(28deg)}
.bow b{position:absolute;left:-7px;top:6px;width:14px;height:14px;border-radius:50%;background:#e9c887}
.box-light{position:absolute;left:50%;bottom:34%;width:6px;height:6px;border-radius:50%;transform:translateX(-50%);
  background:#ffe9b8;opacity:0;pointer-events:none;z-index:2}
.gift-box.opening{animation:none}
.gift-box.opening .box-lid{transform:rotate(-112deg) translateY(-14px)}
.gift-box.opening .box-light{opacity:1;
  box-shadow:0 0 40px 22px rgba(255,233,184,.85),0 0 120px 70px rgba(255,220,150,.45);
  animation:burst 1.2s ease .25s forwards}
@keyframes burst{to{box-shadow:0 0 90px 70px rgba(255,233,184,1),0 0 300px 220px rgba(255,220,150,.75)}}
.gift-hint{font-family:var(--sans);font-size:11px;letter-spacing:.34em;text-transform:uppercase;
  color:var(--gold);margin-top:34px;animation:hintBlink 2.2s ease-in-out infinite}
@keyframes hintBlink{0%,100%{opacity:.85}50%{opacity:.35}}

/* ---- cake film scene ---- */
#scene-cake{padding:0;align-items:stretch;justify-content:flex-start}
#cakeVideo{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:72% 50%;
  opacity:0;transition:opacity 2s ease}
#scene-cake.active #cakeVideo{opacity:1}
/* scrim: darken + blend left side so text reads over the footage */
.cake-scrim{position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(5,7,14,.92) 0%,rgba(5,7,14,.72) 26%,rgba(5,7,14,.28) 46%,rgba(5,7,14,.05) 62%,rgba(5,7,14,.25) 100%),
    linear-gradient(180deg,rgba(5,7,14,.55) 0%,transparent 22%,transparent 72%,rgba(5,7,14,.6) 100%)}
.cake-lines{
  position:absolute;left:clamp(20px,6vw,84px);top:50%;transform:translateY(-50%);
  width:min(400px,44vw);text-align:left;z-index:3}
.cake-lines .scene-kicker{margin-bottom:clamp(14px,2.6vh,24px);opacity:0;transition:opacity 1.4s ease .8s}
#scene-cake.active .cake-lines .scene-kicker{opacity:.85}
.cake-line{
  font-size:clamp(19px,2.9vw,30px);font-weight:300;line-height:1.45;
  margin-bottom:clamp(10px,2vh,18px);text-shadow:0 2px 24px rgba(5,7,14,.95);
  display:none}
.cake-line.typing,.cake-line.show{display:block}
.cake-line-em{font-style:italic;color:var(--gold-soft);font-size:clamp(21px,3.2vw,33px)}
.skip-btn{
  position:absolute;right:22px;bottom:calc(clamp(28px,6vh,64px) + 18px);z-index:5;
  background:rgba(10,13,24,.45);border:1px solid rgba(234,230,220,.2);color:var(--txt-dim);
  border-radius:100px;padding:9px 20px;cursor:pointer;backdrop-filter:blur(6px);
  font-family:var(--sans);font-size:10px;letter-spacing:.26em;text-transform:uppercase;transition:all .4s}
.skip-btn:hover{color:var(--gold);border-color:rgba(232,201,138,.5)}

/* ---- finale scene ---- */
#scene-finale .finale.show-static{
  position:relative;left:auto;top:auto;transform:none;visibility:visible;opacity:0;
  transition:opacity 2s ease .6s;width:min(680px,90vw)}
#scene-finale.active .finale.show-static{opacity:1}

/* ---- ui bits ---- */
.tap-hint{
  position:fixed;bottom:calc(clamp(28px,6vh,64px) + 18px);left:50%;transform:translateX(-50%);z-index:65;
  font-family:var(--sans);font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:rgba(234,230,220,.4);
  display:flex;align-items:center;gap:10px;opacity:0;pointer-events:none;transition:opacity 1s ease}
.tap-hint.show{opacity:1}
.tap-hint span{width:22px;height:1px;background:rgba(234,230,220,.35);display:block}
.fader{position:fixed;inset:0;background:#02030a;z-index:80;opacity:0;pointer-events:none;transition:opacity .9s ease}
.fader.on{opacity:1;pointer-events:all}

.sound-toggle{
  position:fixed;top:calc(clamp(28px,6vh,64px) + 14px);right:20px;z-index:75;width:40px;height:40px;
  background:rgba(10,13,24,.4);border:1px solid rgba(234,230,220,.16);border-radius:50%;cursor:pointer;
  display:flex;align-items:flex-end;justify-content:center;gap:3px;padding-bottom:13px;backdrop-filter:blur(6px)}
.sound-toggle .bar{width:2.5px;background:var(--gold);border-radius:2px;transition:height .3s}
.sound-toggle .b1{height:8px;animation:eq .9s ease-in-out infinite}
.sound-toggle .b2{height:14px;animation:eq .9s ease-in-out infinite .18s}
.sound-toggle .b3{height:10px;animation:eq .9s ease-in-out infinite .36s}
@keyframes eq{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.4)}}
.sound-toggle.muted .bar{animation:none;height:4px;opacity:.4}

@media (max-width:520px){
  .sound-toggle{right:14px}
  #cakeVideo{object-position:78% 50%}
  .cake-lines{width:min(320px,72vw)}
  .cake-line{font-size:clamp(17px,4.6vw,22px)}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01s!important;transition-duration:.3s!important}
}