/* zhuhai.test.1ez.xyz — cinematic coastal dusk */
:root{
  --ink:#0a0f24;          /* deep night */
  --indigo:#13204a;
  --dusk:#3a2c63;         /* violet band */
  --ember:#c9763f;        /* warm horizon */
  --amber:#f0b86e;        /* horizon glow */
  --gold:#e8c489;         /* accent */
  --paper:#f3ead9;        /* warm off-white text */
  --muted:#9aa6c4;        /* cool muted */
  --serif:"Noto Serif SC", serif;
  --hand:"Ma Shan Zheng", cursive;
  --latin:"Cormorant Garamond", serif;
}

*{box-sizing:border-box;margin:0;padding:0}
/* `.stage{display:flex}` would otherwise override the UA [hidden] rule, leaving
   the countdown and PIN screens stacked. Force hidden to win. */
[hidden]{display:none !important}
/* After the Sunday cutoff: only the background remains. */
body.expired .stage,body.expired .letter{display:none !important}
html,body{height:100%}
body{
  font-family:var(--serif);
  background:var(--ink);
  color:var(--paper);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  min-height:100svh;
}

/* ---------- atmosphere ---------- */
.sky{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% 118%, var(--amber) 0%, var(--ember) 9%, var(--dusk) 30%, var(--indigo) 58%, var(--ink) 86%);
  transition:filter 2.4s ease, transform 2.4s ease;
}
body.revealed .sky{filter:brightness(.62) saturate(1.08)}

.glow{position:absolute;left:50%;bottom:-26vh;transform:translateX(-50%);
  width:160vw;height:60vh;
  background:radial-gradient(50% 50% at 50% 50%, rgba(240,184,110,.55), rgba(201,118,63,.18) 45%, transparent 72%);
  filter:blur(8px);
  animation:breathe 9s ease-in-out infinite;
}
@keyframes breathe{0%,100%{opacity:.85;transform:translateX(-50%) scaleY(1)}50%{opacity:1;transform:translateX(-50%) scaleY(1.08)}}

.sea{position:absolute;left:0;right:0;bottom:0;height:22vh;
  background:linear-gradient(to top, rgba(8,11,28,.92), rgba(20,28,60,.35) 60%, transparent);
  -webkit-mask-image:linear-gradient(to top, #000 55%, transparent);
          mask-image:linear-gradient(to top, #000 55%, transparent);
}
.sea::before{content:"";position:absolute;left:50%;bottom:6vh;transform:translateX(-50%);
  width:42vw;height:14vh;
  background:linear-gradient(to bottom, rgba(240,184,110,.5), transparent 70%);
  filter:blur(6px);opacity:.7;
  -webkit-mask-image:repeating-linear-gradient(to bottom, #000 0 2px, transparent 2px 7px);
          mask-image:repeating-linear-gradient(to bottom, #000 0 2px, transparent 2px 7px);
  animation:shimmer 5.5s ease-in-out infinite;
}
@keyframes shimmer{0%,100%{opacity:.45;width:40vw}50%{opacity:.8;width:46vw}}

.stars{position:absolute;inset:0;opacity:.0;transition:opacity 2.4s ease}
body.dusk .stars,body.revealed .stars{opacity:1}
.star{position:absolute;width:2px;height:2px;border-radius:50%;
  background:#fff;opacity:.7;animation:tw var(--tw,4s) ease-in-out infinite;}
@keyframes tw{0%,100%{opacity:.15;transform:scale(.7)}50%{opacity:.95;transform:scale(1.1)}}

.grain{position:absolute;inset:-50%;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grainmove 6s steps(6) infinite;}
@keyframes grainmove{0%{transform:translate(0,0)}100%{transform:translate(-8%,6%)}}

/* ---------- pre-reveal stage ---------- */
.stage{position:relative;z-index:2;min-height:100svh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:8vh 7vw;gap:clamp(1.1rem,3vh,2.2rem);
  transition:opacity 1.1s ease, transform 1.1s ease;}
/* On reveal the countdown fades AND leaves the flow (position:fixed) so the
   letter rises to the top of the page instead of sitting a screen below it. */
body.revealed .stage{opacity:0;transform:translateY(-22px) scale(.985);
  pointer-events:none;position:fixed;inset:0}

.kicker{font-family:var(--latin);letter-spacing:.55em;text-indent:.55em;
  text-transform:uppercase;font-size:clamp(.7rem,1.6vw,.92rem);
  color:var(--gold);opacity:0;animation:rise .9s .15s ease forwards}
.kicker::before,.kicker::after{content:"";display:inline-block;width:28px;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold));vertical-align:middle;margin:0 .9em;opacity:.7}
.kicker::after{background:linear-gradient(90deg,var(--gold),transparent)}

.lede{font-weight:300;font-size:clamp(1.5rem,4.4vw,2.7rem);line-height:1.5;
  letter-spacing:.04em;color:#fff;text-shadow:0 1px 30px rgba(0,0,0,.4);
  opacity:0;animation:rise 1s .35s ease forwards}
.lede .dot{color:var(--gold)}

.count{display:flex;align-items:center;gap:clamp(.5rem,2vw,1.4rem);
  opacity:0;animation:rise 1s .6s ease forwards}
.unit{display:flex;flex-direction:column;align-items:center;gap:.45rem;min-width:clamp(54px,12vw,92px)}
.num{font-family:var(--latin);font-weight:500;
  font-size:clamp(2.4rem,9vw,4.6rem);line-height:1;color:var(--paper);
  font-variant-numeric:tabular-nums;text-shadow:0 2px 24px rgba(232,196,137,.18);
  transition:color .25s}
.lab{font-size:clamp(.62rem,1.6vw,.8rem);letter-spacing:.4em;text-indent:.4em;color:var(--muted)}
.sep{font-family:var(--latin);font-size:clamp(1.6rem,6vw,3rem);color:var(--gold);
  opacity:.5;transform:translateY(-.35em);animation:blink 2s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:.2}50%{opacity:.7}}

.when{font-family:var(--latin);font-size:clamp(1rem,2.6vw,1.4rem);letter-spacing:.18em;
  color:var(--gold);opacity:0;animation:rise 1s .85s ease forwards}
.when .tz{font-size:.7em;color:var(--muted);letter-spacing:.25em;margin-left:.4em}
.hint{font-size:clamp(.8rem,2vw,.95rem);color:var(--muted);letter-spacing:.15em;
  opacity:0;animation:rise 1s 1.1s ease forwards}

@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}

/* ---------- lock / PIN ---------- */
.pin{display:flex;flex-direction:column;align-items:center;gap:1.4rem;
  opacity:0;animation:rise 1s .6s ease forwards}
.pin-boxes{display:flex;gap:clamp(.6rem,2.4vw,1.1rem)}
.pin-boxes.shake{animation:shake .5s cubic-bezier(.36,.07,.19,.97)}
@keyframes shake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(4px)}
  30%,50%,70%{transform:translateX(-8px)}40%,60%{transform:translateX(8px)}}
.pin-d{width:clamp(54px,14vw,72px);height:clamp(64px,17vw,88px);
  text-align:center;font-family:var(--latin);font-weight:500;
  font-size:clamp(1.8rem,6vw,2.6rem);color:var(--paper);caret-color:var(--gold);
  background:rgba(255,255,255,.04);border:1px solid rgba(232,196,137,.28);
  border-radius:14px;outline:none;backdrop-filter:blur(4px);
  box-shadow:inset 0 1px 12px rgba(0,0,0,.3);
  transition:border-color .25s, box-shadow .25s, background .25s;
  -webkit-text-security:disc;}
.pin-d::placeholder{color:transparent}
.pin-d:focus{border-color:var(--amber);background:rgba(240,184,110,.08);
  box-shadow:0 0 0 3px rgba(240,184,110,.14), inset 0 1px 12px rgba(0,0,0,.3)}
.pin-err{min-height:1.4em;font-size:clamp(.85rem,2vw,.98rem);letter-spacing:.08em;
  color:#e8a48f;text-shadow:0 1px 14px rgba(0,0,0,.4)}
.pin-hint{font-size:clamp(.78rem,1.9vw,.92rem);letter-spacing:.12em;color:var(--muted)}
.pin-hint span{color:var(--gold);border-bottom:1px dotted rgba(232,196,137,.45);padding-bottom:1px}

/* ---------- the letter ---------- */
.letter{position:relative;z-index:2;display:none;
  max-width:660px;margin:0 auto;padding:14vh 8vw 18vh;
  text-align:left;}
body.revealed .letter{display:block}

.letter .ln{opacity:0;transform:translateY(20px);filter:blur(6px);
  font-weight:300;font-size:clamp(1.05rem,2.7vw,1.32rem);line-height:2.15;
  letter-spacing:.03em;color:var(--paper);margin:0 0 1.55em;
  text-shadow:0 1px 18px rgba(0,0,0,.45);}
.letter .ln.show{animation:unfold 1.5s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes unfold{to{opacity:1;transform:translateY(0);filter:blur(0)}}

.letter .stamp{font-family:var(--latin);font-style:italic;letter-spacing:.12em;
  color:var(--gold);font-size:clamp(1rem,2.4vw,1.2rem);
  border-bottom:1px solid rgba(232,196,137,.25);padding-bottom:1.1em;
  margin-bottom:2.4em;text-align:center}
.glance{color:var(--muted);font-size:.78em;letter-spacing:.06em;opacity:.7;
  font-family:var(--latin);font-style:italic;padding:0 .15em}

.letter .sign{margin-top:3.2em;text-align:right;line-height:1.7;color:var(--gold)}
.letter .sign .name{font-family:var(--hand);font-size:clamp(2.2rem,8vw,3.4rem);
  display:inline-block;margin-top:.1em;color:var(--amber);
  text-shadow:0 2px 28px rgba(240,184,110,.3)}

.letter .ps{font-size:clamp(.92rem,2.2vw,1.06rem);color:var(--muted);
  line-height:1.95;border-top:1px solid rgba(154,166,196,.18);padding-top:2em;margin-top:3em}

.letter .finale{font-family:var(--hand);text-align:center;color:#fff;
  font-size:clamp(1.4rem,6vw,3rem);letter-spacing:.04em;line-height:1.6;
  white-space:nowrap;margin-top:2.4em;text-shadow:0 2px 40px rgba(240,184,110,.35)}

.letter .wager{text-align:center;color:var(--gold);font-weight:300;
  font-size:clamp(.95rem,2.3vw,1.12rem);line-height:2;letter-spacing:.05em;
  margin-top:1.3em;opacity:.92}

.letter .song{text-align:center;font-family:var(--hand);color:var(--amber);
  font-size:clamp(1.7rem,6vw,2.5rem);letter-spacing:.1em;margin-top:2.4em}
.letter .player{margin-top:1em;min-height:80px}
.letter .player iframe{border-radius:12px;width:100%;
  box-shadow:0 18px 50px rgba(0,0,0,.5)}

.letter .map{margin-top:1.8em}
.letter .map svg{width:100%;height:auto;display:block;border-radius:12px;
  border:1px solid rgba(232,196,137,.22);box-shadow:0 18px 50px rgba(0,0,0,.5);
  background:linear-gradient(180deg, rgba(19,32,74,.55), rgba(10,15,36,.7))}

.letter .photo{margin-top:3em;text-align:center}
.letter .photo img{display:block;width:100%;height:auto;border-radius:12px;
  border:1px solid rgba(232,196,137,.22);
  box-shadow:0 18px 50px rgba(0,0,0,.55), 0 2px 0 rgba(255,255,255,.04) inset}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001s !important;animation-iteration-count:1 !important}
  .letter .ln{opacity:1;transform:none;filter:none}
}