/* The introduction is an invitation to play, with no automatic exit. */
.home-page .site-intro{display:grid;animation:none!important;visibility:visible;min-height:100svh;isolation:isolate;background:#f0eeea}
.home-page .site-intro .intro-content{animation:none!important;padding:4rem 2vw 7rem;width:100%;text-align:center}
.site-intro .intro-wordmark{overflow:visible;padding:.12em 0}
.site-intro .intro-brand{display:flex;align-items:baseline;justify-content:center;gap:0;font-size:clamp(60px,16vw,280px);line-height:1;white-space:nowrap;animation:none;margin:0}
.intro-character{position:relative;display:block;flex:none;font:inherit!important;letter-spacing:inherit!important;line-height:1!important;padding:0;margin:0;border:0;border-radius:0;background:none;color:inherit;isolation:isolate;cursor:pointer;outline-offset:8px;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.intro-glyph{display:block;animation:farsight-letter-rise 1.15s var(--reveal-delay) cubic-bezier(.22,.75,.2,1) both;transition:opacity .42s ease,scale .7s cubic-bezier(.3,0,.2,1);transform-origin:50% 60%;pointer-events:none}
.intro-character.is-object{z-index:3}
.intro-character.is-object .intro-glyph{opacity:0;scale:.9}
.intro-character:focus-visible{outline:1px solid #b51f28;border-radius:3px}
.intro-character:disabled{cursor:default}
.intro-object{position:absolute;left:50%;top:49%;width:1.42em;height:1.42em;pointer-events:none;perspective:750px;transform:translate(-50%,-50%);opacity:0;transition:opacity .48s cubic-bezier(.3,0,.2,1)}
.intro-object-view{display:block;width:100%;height:100%;transform:rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transition:transform .45s cubic-bezier(.2,.7,.2,1);filter:drop-shadow(0 18px 12px #30251b18)}
.intro-object img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;transform-origin:50% 55%;transition:transform .95s cubic-bezier(.3,0,.2,1);user-select:none}
.intro-object img:nth-child(1){clip-path:polygon(0 0,51% 0,53% 48%,0 58%);transform:translate(-7%,-4.5%) rotate(-7deg) scale(.9)}
.intro-object img:nth-child(2){clip-path:polygon(50% 0,100% 0,100% 53%,52% 49%);transform:translate(7.5%,-6%) rotate(6deg) scale(.9);transition-delay:.025s}
.intro-object img:nth-child(3){clip-path:polygon(0 57%,53% 47%,48% 100%,0 100%);transform:translate(-5%,7.5%) rotate(4.5deg) scale(.9);transition-delay:.05s}
.intro-object img:nth-child(4){clip-path:polygon(52% 48%,100% 52%,100% 100%,47% 100%);transform:translate(8%,5.5%) rotate(-6deg) scale(.9);transition-delay:.075s}
.intro-character.is-object .intro-object{opacity:1;transition-delay:0s}
.intro-character.is-object .intro-object img{transform:translate(0,0) rotate(0) scale(1)}
.site-intro .intro-brand>.intro-dot{font-size:inherit;display:block;line-height:1;animation:farsight-letter-rise 1.15s .7s cubic-bezier(.22,.75,.2,1) both}
.site-intro .intro-descriptor{font-size:clamp(24px,3.6vw,52px)!important;margin:12px 0 0;position:relative;pointer-events:none}
.site-intro .intro-rule{margin:clamp(24px,4.2svh,48px) auto 22px}
.intro-invitation{position:absolute;bottom:max(30px,env(safe-area-inset-bottom));left:0;right:0;display:flex;flex-direction:column;align-items:center;gap:19px;z-index:4;animation:intro-invite-arrive .85s 1.35s both}
.intro-play-hint{font:400 12px/1.4 Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#66635f;margin:0}
.intro-play-hint .touch-hint{display:none}
.intro-enter{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:42px;min-height:58px;min-width:180px;padding:0 25px;background:#242321;color:#fff;border:1px solid #242321;border-radius:30px;box-shadow:inset 0 1px 0 #ffffff20,0 8px 26px #26211914;font:400 16px/1 Arial,sans-serif;letter-spacing:.035em;cursor:pointer;transition:background .65s,border-color .65s,box-shadow .65s,transform .65s;outline-offset:5px}
.intro-enter>span,.intro-enter>svg{position:relative;z-index:1}
.intro-enter:before{content:'';position:absolute;width:150%;height:340%;left:-25%;top:15%;border-radius:43% 57% 62% 38%;background:radial-gradient(ellipse at 40% 20%,#ffffff42,transparent 48%),linear-gradient(130deg,#d54149,#951d27 68%);opacity:0;transform:translateY(18%) rotate(-18deg);transition:opacity .6s,transform .95s cubic-bezier(.3,0,.2,1);pointer-events:none}
.intro-enter:after{content:'';position:absolute;inset:2px;border-radius:inherit;background:linear-gradient(115deg,transparent 25%,#ffffff30 45%,transparent 65%);opacity:0;transform:translateX(-110%);pointer-events:none}
.intro-enter svg{width:23px;height:23px;transition:transform .4s cubic-bezier(.2,.8,.2,1);fill:none;stroke:currentColor;stroke-width:1.3}
.intro-enter:hover,.intro-enter:focus-visible{background:#6e2228;border-color:#ad343b;box-shadow:inset 0 1px 0 #ffffff45,0 10px 30px #9f192026;transform:translateY(-2px);animation:intro-liquid-sway 2.6s ease-in-out infinite}
.intro-enter:hover:before,.intro-enter:focus-visible:before{opacity:1;transform:translateY(-24%) rotate(14deg)}
.intro-enter:hover:after,.intro-enter:focus-visible:after{animation:intro-liquid-glint 2.6s .15s ease-in-out infinite}
.intro-enter:hover svg,.intro-enter:focus-visible svg{transform:translateX(4px)}
.intro-enter:active{transform:translateY(0) scale(.98);animation:none}
.intro-enter:disabled{pointer-events:none}
@keyframes intro-liquid-sway{0%,100%{border-radius:30px;transform:translateY(-2px) scale(1)}40%{border-radius:27px 34px 28px 33px;transform:translateY(-3px) scale(1.025,.975)}75%{border-radius:34px 28px 33px 27px;transform:translateY(-2px) scale(.99,1.015)}}
@keyframes intro-liquid-glint{0%{opacity:0;transform:translateX(-110%)}20%{opacity:.8}65%{opacity:.45;transform:translateX(110%)}80%,100%{opacity:0;transform:translateX(110%)}}
/* Available throughout the five-scene story, clear of the sound control. */
.story-skip{position:absolute;z-index:5;left:50%;bottom:max(26px,env(safe-area-inset-bottom));transform:translateX(-50%);display:inline-flex;align-items:center;justify-content:center;gap:12px;min-width:96px;min-height:44px;padding:10px 18px;border:1px solid #ffffff60;border-radius:30px;background:#242321b8;color:#fff;font:400 14px/1.2 Arial,sans-serif;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:background .3s,border-color .3s;touch-action:manipulation}
.story-skip:hover,.story-skip:focus-visible{background:#242321eb;border-color:#ffffffb3}
.story-skip svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.4;transition:transform .3s}
.story-skip:hover svg,.story-skip:focus-visible svg{transform:translateX(3px)}
.build-stage .light-invitation{bottom:88px}
.intro-ready-to-fly .intro-glyph{animation:none;transform:none}
.intro-settling .intro-invitation{opacity:0;transform:translateY(7px);transition:opacity .3s,transform .4s;animation:none;pointer-events:none}
.site-intro.intro-departing{transition:opacity 1.65s cubic-bezier(.4,0,.2,1)}
.intro-flight-character{z-index:180;line-height:1;letter-spacing:0!important}
.intro-docking .header .brand{visibility:hidden!important}
@keyframes intro-invite-arrive{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(max-width:700px){
 .home-page .site-intro .intro-content{padding:2rem 2vw 7.5rem}
 .site-intro .intro-brand{font-size:15vw;display:grid;grid-template-columns:repeat(8,1fr) .25fr;width:96%;margin:0 auto}
 .intro-character{min-height:72px;display:grid;place-items:center}
 .intro-object{width:2em;height:2em;top:50%}
 .intro-character:first-child .intro-object{left:0;transform:translate(0,-50%)}
 .intro-character:nth-child(8) .intro-object{left:auto;right:0;transform:translate(0,-50%)}
 .site-intro .intro-descriptor{font-size:clamp(22px,5.9vw,34px)!important;margin:8px 0 0}
 .site-intro .intro-slogan{font-size:clamp(16px,4.4vw,21px)}
 .site-intro .intro-rule{margin-top:32px}
 .intro-invitation{bottom:max(32px,env(safe-area-inset-bottom));gap:18px}
 .intro-enter{min-height:56px;min-width:176px}
 .story-skip{bottom:calc(94px + env(safe-area-inset-bottom))}
 .build-stage .light-invitation{bottom:calc(154px + env(safe-area-inset-bottom))}
 .build-stage:has(.light-invitation:not([hidden])) .build-copy{bottom:34%}
}
@media(hover:none){.intro-play-hint .mouse-hint{display:none}.intro-play-hint .touch-hint{display:inline}}
@media(max-height:540px){
 .home-page .site-intro .intro-content{padding-bottom:6rem}
 .site-intro .intro-brand{font-size:min(12vw,25svh)}
 .site-intro .intro-descriptor{font-size:25px!important;margin-top:0}
 .site-intro .intro-rule{margin:12px auto}
 .intro-invitation{bottom:14px;flex-direction:row;justify-content:center;gap:28px}
 .intro-play-hint{display:none}
 .intro-enter{min-height:46px}
}
@media(prefers-reduced-motion:reduce){
 .home-page:not(.intro-skipped) .site-intro{display:grid!important}
 .intro-glyph,.intro-invitation,.site-intro .intro-brand>.intro-dot{animation:none!important;transform:none}
 .intro-object-view,.intro-object img{transform:none!important;transition:none!important}
 .intro-character.is-object .intro-glyph{scale:1}
 .intro-enter,.intro-enter:before,.intro-enter:after,.intro-enter svg,.story-skip,.story-skip svg{animation:none!important;transition:none!important;transform:none!important}
 .intro-enter:after{display:none}
 .story-skip{transform:translateX(-50%)!important}
}

.intro-landscape{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden;opacity:.18}
.intro-landscape img,.intro-landscape video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 48%;filter:saturate(.65)}
.intro-landscape video{opacity:0;transition:opacity .15s ease}
.intro-landscape.is-playing video{opacity:1}
.intro-landscape:after{content:'';position:absolute;inset:0;background:linear-gradient(#f0eeea18,transparent 55%,#f0eeea80)}
.intro-landscape-pause{position:absolute;left:18px;bottom:20px;z-index:5;width:44px;height:44px;display:grid;place-items:center;border-radius:50%;border:1px solid #25251e35;color:#37352e;background:#f0eeea90;cursor:pointer}
.intro-landscape-pause[hidden]{display:none}
.intro-landscape-pause svg{width:18px;height:18px}
.intro-landscape-pause:focus-visible{outline:2px solid #a71d23;outline-offset:3px}
@media(prefers-reduced-motion:reduce){.intro-landscape video,.intro-landscape-pause{display:none!important}}

/* One clear action at the foot of the story, with no competing scroll caption. */
html:not(.story-skip-ready) .story-skip{opacity:0;visibility:hidden;pointer-events:none}
.story-skip{transition:opacity .35s ease,background .3s,border-color .3s}
.build-stage .light-invitation{display:none!important}
.build-stage .hero-caption{right:auto;max-width:calc(50% - 80px)}
@media(max-width:700px){.build-stage .hero-caption{max-width:55%}.story-skip{left:auto;right:18px;bottom:26px;transform:none!important}.build-stage .hero-caption>div{font-size:10px}}
