/* Opening intro: a recorded "hello" that prints the greeting, then settles into the header rule. */
html.has-intro{overflow:hidden}
html.has-intro body>*:not(.hello){visibility:hidden}

.hello{position:fixed;inset:0;z-index:100;color:var(--ink);cursor:default}
.hello-bg{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 46%,#f3eef4 0,transparent 62%),var(--paper)}
.hello canvas{position:absolute;inset:0;width:100%;height:100%;display:block}

.hello-word,.hello-sub{position:absolute;left:0;right:0;margin:0;text-align:center;
  -webkit-mask-image:linear-gradient(90deg,#000 calc(var(--reveal,0px) - 36px),transparent var(--reveal,0px));
          mask-image:linear-gradient(90deg,#000 calc(var(--reveal,0px) - 36px),transparent var(--reveal,0px))}
.hello-word{font:italic 400 clamp(96px,16vw,230px)/1 var(--serif);letter-spacing:-.02em}
.hello-sub{font-size:15px;line-height:1.6;color:var(--muted);letter-spacing:.02em}
.hello-sub [lang="zh-CN"]{font-family:"PingFang SC","Microsoft YaHei","Noto Sans CJK SC",sans-serif;color:var(--ink);margin-right:14px;letter-spacing:.12em}

.hello-playhead{position:absolute;top:0;left:0;width:1px;background:var(--accent);opacity:0;will-change:transform}
.hello-playhead:before{content:'';position:absolute;top:-7px;left:-4px;border:4.5px solid transparent;border-top:7px solid var(--accent)}

.hello-timecode{position:absolute;top:34px;right:56px;font:13px/1 Arial,sans-serif;font-variant-numeric:tabular-nums;letter-spacing:.08em;color:var(--muted);opacity:0}
.hello-skip{position:absolute;right:48px;bottom:32px;border:0;background:none;padding:10px 8px;min-height:44px;font-size:13px;color:var(--muted);opacity:0}
.hello-skip:hover{color:var(--accent)}
.hello-skip span{font-family:"PingFang SC","Microsoft YaHei",sans-serif;margin-left:8px;font-size:12px}

.hello-line{position:absolute;height:1px;background:var(--accent);transform-origin:0 0;display:none}

/* Gate: one triangle play key, with its outline echoing outward like a sound wave */
.hello.is-gate{cursor:pointer}
.hello.is-gate .hello-skip,.hello.is-gate .hello-timecode{visibility:hidden}
.hello-play{position:absolute;left:50%;top:50%;width:112px;height:112px;padding:0;border:0;background:none;-webkit-tap-highlight-color:transparent;
  transform:translate(-50%,-50%) scale(.94);opacity:0;transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.hello-play svg{width:100%;height:100%;display:block;overflow:visible}
.hello-key{transform-box:fill-box;transform-origin:42% 50%;transition:transform .55s cubic-bezier(.3,1.7,.5,1)}
.hello-tri{fill:url(#hello-tri-fill);stroke:url(#hello-tri-fill);stroke-width:10;stroke-linejoin:round;
  filter:drop-shadow(0 10px 16px rgba(95,54,85,.26));transition:filter .4s ease}
.hello-echo{fill:none;stroke:var(--accent);stroke-width:1.2;stroke-linejoin:round;vector-effect:non-scaling-stroke;opacity:0;transform-box:fill-box;transform-origin:42% 50%}
.hello.is-ready .hello-play{opacity:1;transform:translate(-50%,-50%)}
.hello.is-ready.is-gate .hello-echo{animation:hello-echo 2.8s cubic-bezier(.2,.6,.3,1) 1s infinite}
@keyframes hello-echo{0%{transform:scale(1);opacity:.5}100%{transform:scale(1.9);opacity:0}}
.hello-play:hover .hello-key{transform:translateY(-2px) scale(1.05)}
.hello-play:hover .hello-tri{filter:drop-shadow(0 15px 22px rgba(95,54,85,.32))}
.hello-play:focus-visible{outline:none}
.hello-play:focus-visible .hello-echo{animation:none;opacity:.7;transform:scale(1.28)}
/* Held down: the key sinks and its shadow tightens */
.hello-play.is-pressed .hello-key{transform:scale(.86);transition:transform .09s ease-out}
.hello-play.is-pressed .hello-tri{filter:drop-shadow(0 3px 6px rgba(95,54,85,.3));transition-duration:.09s}

/* Released: rings burst out, the key spins down into a dot, and the dot becomes the track */
.hello.is-playing .hello-play{opacity:0;pointer-events:none;transition:opacity .12s ease .34s}
.hello.is-playing .hello-key{transform:scale(.03) rotate(-75deg);transition:transform .4s cubic-bezier(.6,-.25,.4,1)}
.hello.is-playing .hello-echo{animation:none;opacity:0}
.hello-burst{position:absolute;left:50%;top:50%;width:120px;height:120px;margin:-60px 0 0 -60px;border-radius:50%;border:1px solid var(--accent);opacity:0;pointer-events:none}
.hello-burst:not(.is-late){background:radial-gradient(circle,rgba(111,66,99,.14),transparent 62%)}
.hello.is-playing .hello-burst{animation:hello-burst .8s cubic-bezier(.15,.7,.3,1) .04s forwards}
.hello.is-playing .hello-burst.is-late{animation-delay:.13s;animation-duration:1.05s}
@keyframes hello-burst{0%{transform:scale(.4);opacity:.75;border-width:2px}100%{transform:scale(2.7);opacity:0;border-width:.5px}}
.hello-dot{position:absolute;left:50%;top:50%;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;background:var(--accent);opacity:0;pointer-events:none}
.hello.is-playing .hello-dot{animation:hello-dot .62s ease .26s forwards}
@keyframes hello-dot{0%{opacity:1;transform:scale(0)}30%{opacity:1;transform:scale(1.3)}55%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.4)}}

/* The "～" drawn as a small sine wave */
.hello-tilde{display:inline-block;width:.62em;height:.25em;margin-left:.05em;vertical-align:.1em;overflow:visible;transform:skewX(-10deg)}
.hello-tilde path{fill:none;stroke:var(--accent);stroke-width:6.5;stroke-linecap:round;stroke-linejoin:round}

/* The hero settles in as the intro lifts */
@keyframes intro-hero-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
html.hello-done .hero h1{animation:intro-hero-in 1s cubic-bezier(.2,.7,.2,1) .4s both}
html.hello-done .hero .intro,html.hello-done .hero .intro-zh{animation:intro-hero-in 1s cubic-bezier(.2,.7,.2,1) .55s both}
html.hello-done .poster-gallery{animation:intro-hero-in 1.1s cubic-bezier(.2,.7,.2,1) .7s both}

@media(max-width:700px){
  .hello-timecode{top:24px;right:20px;font-size:12px}
  .hello-skip{right:12px;bottom:calc(16px + env(safe-area-inset-bottom,0px))}
  .hello-sub{font-size:13px;padding:0 20px}
  .hello-sub [lang="zh-CN"]{display:block;margin:0 0 4px}
  .hello-play{width:96px;height:96px}
}
@media(prefers-reduced-motion:reduce){html.has-intro body>*:not(.hello){visibility:visible}.hello{display:none}}