@font-face{font-family:Intro;src:url('assets/fonts/intro-serif-v21.otf');font-display:swap}
.intro-layer{position:fixed;inset:0;z-index:1000;overflow:hidden;pointer-events:none;isolation:isolate;contain:layout paint}
.intro-paper{position:absolute;inset:0;background:#fffdf9;z-index:1}
.intro-quote{position:absolute;inset:0;z-index:2;display:grid;place-items:center;font:23px/1.85 Intro,serif;text-align:center;color:#62404d;letter-spacing:.14em}
.intro-quote .quote-line{display:block}.intro-quote .quote-line+.quote-line{margin-top:.28em}
.intro-quote .azkaban{color:#637d99}.intro-quote .parole{color:#b5637d}
.intro-water,.intro-pass{position:absolute;inset:0;width:100%;height:100%;overflow:hidden}
.intro-water{z-index:3}.intro-pass{z-index:4}
.intro-flight-cloud{position:absolute;top:0;height:auto;pointer-events:none;opacity:0;max-width:none;will-change:transform}
.intro-white-figure{position:absolute;top:0;left:4%;width:100%;height:auto;max-width:none;z-index:5;opacity:0;filter:drop-shadow(0 12px 18px #ad7e9c30);transform-origin:55% 50%;will-change:transform}
.intro-flight-cloud{filter:drop-shadow(0 14px 16px #977ba52b)}
.flight-1{right:-22%;width:69%;z-index:6}.flight-2{left:-24%;width:68%;z-index:6}.flight-3{right:-15%;width:50%;z-index:4}.flight-4{right:5%;width:57%;z-index:6}
.intro-contained{position:absolute;z-index:1}
.intro-contained .intro-quote{font-size:clamp(12px,1.8vw,23px)}
.intro-result{position:absolute;inset:0;z-index:0;overflow:hidden;background:linear-gradient(130deg,#fff1d1,#edc7dc)}
.intro-result>img{position:absolute;right:-10%;bottom:-23%;width:73%;transform:rotate(-5deg)}
.intro-result .wordmark{position:absolute;top:30%;left:7%;width:36%;max-width:450px;z-index:2}
.intro-result .wordmark img{position:static;width:100%;height:auto;transform:none}
.intro-result .intro-latin{position:absolute;inset:0;opacity:.1;font:20vw/.9 Impact,sans-serif;transform:rotate(-7deg) scaleY(1.5);color:#705a7c}
.intro-play{display:none}.intro-ready .intro-play{display:inline-block}
@media(max-width:700px){
  .intro-quote{font-size:19px;letter-spacing:.10em}
  .intro-white-figure{width:175%;left:-35%}
  .flight-1{right:-48%;width:125%}.flight-2{left:-50%;width:135%}.flight-3{right:-40%;width:100%}.flight-4{right:-15%;width:105%}
  .intro-result>img{width:116%;right:-28%;bottom:-13%}
  .intro-result .wordmark{width:78%;top:10%;max-width:380px}
}
@media(prefers-reduced-motion:reduce){.intro-layer:not(.intro-contained){display:none}}