/* Roomier greeting, with a reserved message area. Load after intro-refinement.css. */
.opening-content{width:min(960px,calc(100vw - 40px));padding-block:8px}
.opening-art{aspect-ratio:auto;height:clamp(140px,27svh,250px);min-height:0;max-height:32svh;margin:16px auto 14px}
/* Preserve complete letters at both sides instead of fading the phrase in a radial mask. */
.opening-art,.opening-art canvas{mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.opening-fallback{font-size:clamp(20px,6vw,54px);line-height:1.25;letter-spacing:0;padding-inline:4px}
.opening-fallback>span:first-child{letter-spacing:.18em;word-spacing:.34em}
.opening-fallback .opening-dots{gap:.1em;margin-inline-start:.12em}
.desktop-message{max-width:40ch;margin:10px auto 20px;padding-inline:8px}
.desktop-message strong{line-height:1.35}
.desktop-message span{margin-top:8px}
@media(max-width:760px){
 .opening-content{width:calc(100vw - 28px);padding-block:6px}
 .opening-wordmark{font-size:clamp(25px,6.8vw,34px);margin-bottom:12px}
 .opening-label{font-size:9px;letter-spacing:.15em}
 .opening-art{height:clamp(130px,25svh,195px);max-height:29svh;min-height:0;margin:12px auto}
 .desktop-message{margin:8px auto 16px;max-width:31ch}
 .desktop-message strong{font-size:clamp(17px,4.8vw,21px);line-height:1.35}
 .desktop-message span{font-size:12px;line-height:1.6;margin-top:8px}
 .opening-track{margin-top:16px;width:clamp(170px,54vw,240px)}
}
@media(max-width:360px){
 .opening-content{width:calc(100vw - 24px)}
 .opening-art{height:clamp(115px,24svh,165px);max-height:28svh;min-height:0}
 .opening-fallback{font-size:20px}
 .desktop-message{padding-inline:4px}
 .desktop-message strong{font-size:17px}
 .desktop-message span{font-size:11px}
}
@media(max-height:550px) and (orientation:landscape){
 .opening-content{width:min(780px,calc(100vw - 48px));padding-block:0}
 .opening-wordmark{font-size:24px;margin-bottom:8px}
 .opening-label{display:none}
 .opening-art{height:clamp(82px,28svh,145px);min-height:0;max-height:30svh;margin:8px auto}
 .opening-fallback{font-size:clamp(22px,5vw,42px)}
 .desktop-message{margin:4px auto 8px;max-width:55ch}
 .desktop-message strong{font-size:16px;line-height:1.3}
 .desktop-message strong br{display:none}
 .desktop-message span{font-size:11px;line-height:1.4;margin-top:6px}
 .opening-track{margin-top:12px;height:4px;width:180px}
}

/* One reserved line, independent of greeting geometry, with a quiet blue reflection. */
.opening-film .desktop-message{max-width:none;width:100%;padding-inline:0}
.opening-film .desktop-message strong{font-size:clamp(11px,2.8vw,19px);font-weight:600;line-height:1.5;letter-spacing:.045em;white-space:nowrap;color:#bedcff;text-shadow:0 0 16px #739ce22e}
.intro-playing .desktop-message strong{animation:desktop-blue-breathe 2.6s ease-in-out infinite}
@keyframes desktop-blue-breathe{0%,100%{color:#bedcff;text-shadow:0 0 12px #739ce226}50%{color:#e1f1ff;text-shadow:0 0 18px #94b8f54d}}
@media(prefers-reduced-motion:reduce){.intro-playing .desktop-message strong{animation:none;text-shadow:none}}