/* A short editorial opening with soft clouds and a paper-plane flyby. */
body.opening-active{overflow:hidden}
.landing-opening[hidden]{display:none!important}
.landing-opening{position:fixed;inset:0;z-index:1000000;isolation:isolate;overflow:hidden;display:grid;place-items:center;background:#edf3ef;min-height:100%;opacity:1;transition:opacity .65s ease,visibility .65s;overscroll-behavior:contain}
.landing-opening.is-leaving{opacity:0;visibility:hidden;pointer-events:none}
.opening-sky{position:absolute;inset:0;pointer-events:none;overflow:hidden;background:linear-gradient(155deg,#f5f6ee 0%,#e8f0ec 42%,#edf1f4 72%,#f5efe5 100%)}
.opening-halo{position:absolute;left:50%;top:46%;width:min(78vw,880px);aspect-ratio:1;border:1px solid #7e9a8714;border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 85px #ffffff1f,0 0 0 170px #ffffff16}
.opening-orbit{position:absolute;inset:0;width:100%;height:100%;opacity:.22}.opening-orbit path{fill:none;stroke:#718d7c;stroke-width:1;stroke-dasharray:3 9;stroke-linecap:round}
.opening-cloud{position:absolute;height:auto;filter:drop-shadow(0 12px 14px #59726014);opacity:0;animation:opening-cloud-in 1.6s cubic-bezier(.2,.7,.2,1) forwards}
.opening-cloud--left{width:clamp(300px,43vw,700px);left:-13%;top:10%;--cloud-start:-60px;animation-delay:.05s}
.opening-cloud--right{width:clamp(310px,40vw,650px);right:-11%;bottom:12%;--cloud-start:65px;animation-delay:.18s}
.opening-cloud--bottom{width:clamp(430px,65vw,980px);left:-15%;bottom:-17%;--cloud-start:-30px;animation-delay:.3s}
.opening-plane{position:absolute;left:0;top:0;width:clamp(95px,13vw,185px);filter:drop-shadow(0 8px 6px #34564720);animation:opening-flight 3.3s cubic-bezier(.33,.55,.48,.95) both;z-index:1}
.opening-plane img{width:100%;height:auto}
.opening-copy{position:relative;z-index:2;text-align:center;padding:24px;max-width:100%;margin-top:-3vh;pointer-events:none}
.opening-eyebrow{display:block;color:#647d6c;font-size:10px;font-weight:600;letter-spacing:4px;opacity:0;animation:opening-copy-in .9s .55s both}
#opening-title{display:flex;flex-direction:column;align-items:center;gap:8px;margin:22px 0 0;font-weight:600;letter-spacing:-.06em;line-height:1;color:#345647;font-size:clamp(64px,10vw,142px)}
#opening-title>span{display:block;opacity:0;animation:opening-copy-in 1s .75s both}
#opening-title>span:last-child{font-size:.32em;letter-spacing:.35em;padding-left:.35em;font-weight:500;color:#8b7059;animation-delay:.95s}
.opening-divider{display:block;width:42px;height:1px;background:#ad9475;margin:28px auto 20px;opacity:0;animation:opening-copy-in .8s 1.15s both}
.opening-copy p{color:#64766a;font-size:13px;line-height:1.8;opacity:0;animation:opening-copy-in .9s 1.25s both}
.opening-star{position:absolute;color:#b99d74;opacity:0;animation:opening-copy-in 1s 1s both;font-weight:400}.opening-star--one{left:24%;top:32%;font-size:24px}.opening-star--two{right:24%;bottom:30%;font-size:15px}
.opening-bottom{position:absolute;bottom:max(24px,env(safe-area-inset-bottom));left:max(5%,env(safe-area-inset-left));right:max(5%,env(safe-area-inset-right));display:flex;align-items:center;justify-content:space-between;gap:20px;z-index:3}
.opening-bottom>span{font-size:8px;letter-spacing:2px;color:#758273;font-weight:600}
.opening-bottom button{display:flex;align-items:center;justify-content:center;gap:20px;min-height:46px;padding:12px 18px;border:1px solid #becdbd;border-radius:30px;color:#47634f;background:#ffffff70;font-size:11px;cursor:pointer}
.opening-bottom button:hover{background:#fff}.opening-bottom button:focus-visible{outline:3px solid #8b7059;outline-offset:4px}
@keyframes opening-cloud-in{from{opacity:0;transform:translate3d(var(--cloud-start),18px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
@keyframes opening-copy-in{from{opacity:0;transform:translate3d(0,15px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
@keyframes opening-flight{0%{opacity:0;transform:translate3d(-22vw,64vh,0) rotate(-18deg)}12%{opacity:1}40%{transform:translate3d(29vw,17vh,0) rotate(-6deg)}68%{opacity:1;transform:translate3d(65vw,25vh,0) rotate(7deg)}100%{opacity:0;transform:translate3d(112vw,7vh,0) rotate(-15deg)}}
@media(max-width:600px){.opening-copy{padding:22px}.opening-eyebrow{font-size:8px;letter-spacing:3px}#opening-title{font-size:clamp(64px,18vw,100px);margin-top:22px}.opening-copy p{font-size:11px;max-width:230px;margin:auto}.opening-cloud--left{left:-43%;top:7%;width:340px}.opening-cloud--right{right:-44%;bottom:19%;width:360px}.opening-cloud--bottom{width:520px;left:-48%;bottom:-12%}.opening-star--one{left:12%;top:31%;font-size:16px}.opening-star--two{right:12%;bottom:31%;font-size:12px}.opening-bottom>span{font-size:7px;letter-spacing:1px;max-width:115px;line-height:1.8}.opening-bottom button{font-size:10px;gap:12px}.opening-plane{width:110px}.opening-halo{width:92vw}.opening-divider{margin:25px auto 18px}}
@media(orientation:landscape) and (max-height:550px){#opening-title{font-size:64px;gap:5px;margin-top:12px}.opening-copy{margin-top:-15px}.opening-divider{margin:18px auto 12px}.opening-copy p{font-size:11px}.opening-cloud--bottom{bottom:-50%}.opening-cloud--left{top:-28%}.opening-bottom{bottom:max(12px,env(safe-area-inset-bottom))}.opening-plane{width:90px}}
@media(prefers-reduced-motion:reduce){.landing-opening{display:none!important}}
@media print{.landing-opening{display:none!important}}

/* Keep intro letterforms and lines distinct on compact screens. */
#opening-title{line-height:1.12;letter-spacing:-.025em;gap:14px}
#opening-title>span:last-child{line-height:1.5;letter-spacing:.26em;padding-left:.26em}
.opening-copy p{line-height:1.9}
@media(max-width:600px){#opening-title{font-size:clamp(56px,16vw,88px);gap:12px}.opening-eyebrow{line-height:1.8;letter-spacing:2px}.opening-copy p{font-size:12px}}
@media(orientation:landscape) and (max-height:550px){#opening-title{font-size:48px;gap:8px}.opening-copy{padding-top:12px;padding-bottom:68px;margin:0}.opening-divider{margin:14px auto 10px}}

/* Keep the chatbot widget and its guide hidden until the intro is finished. */
body.opening-active #ypippi-bot, body.opening-active #ypippi-tour { display: none !important; }
