/* Opening: assembled Turning mark, wordmark, then diagonal shutters. */
.turning-intro { display: none; }
html.intro-pending { overflow: hidden; }
.intro-pending .turning-intro { display: block; position: fixed; inset: 0; z-index: 1000; overflow: hidden; }
.intro-pending body > :is(header, main, footer) { pointer-events: none; }
.intro-panels { position: absolute; inset: -5% calc(-30% - 20vh); display: flex; transform: skewX( -18deg); }
.intro-panels span { flex: 1; background: #fff; margin-right: -1px; transform-origin: right center; }
.intro-center { position: absolute; left: 50%; top: 48%; width: min(490px, 78vw); aspect-ratio: 396 / 93; transform: translate(-50%, -50%); }
.intro-mark { position: absolute; left: 0; top: 0; width: 22.73%; height: 100%; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 8.6%; transform: translateX(170%) scale(2.5); }
.intro-piece { display: block; opacity: 0; }
.piece-yellow { background: #ffca00; border-radius: 50% 50% 0 50%; }
.piece-blue { background: #32b0df; }
.piece-purple { background: #454b9b; border-bottom-left-radius: 100%; }
.piece-pink { background: #e7447a; border-radius: 0 0 50% 50%; }
.intro-word { position: absolute; inset: 0 0 0 28.7%; overflow: hidden; opacity: 0; }
.intro-word img { position: absolute; width: 140.25%; max-width: none; height: 100%; right: 0; }
.intro-skip { position: absolute; right: clamp(24px,4vw,64px); bottom: max(30px,env(safe-area-inset-bottom)); border: 0; background: transparent; color: #022a3e; padding: 12px; font: 500 11px/1 Inter,sans-serif; letter-spacing: .16em; cursor: pointer; }
.intro-skip span { margin-left: 12px; }
.intro-skip:focus-visible { outline: 2px solid #32b0df; outline-offset: 4px; }
@media(max-width:600px) { .intro-center { width: 76vw; } }
@media(prefers-reduced-motion:reduce) { .turning-intro { display:none!important; } html.intro-pending { overflow: auto; } }

/* Preserve layout width when the opening temporarily locks scrolling. */
html { scrollbar-gutter: stable; }