#openingArtwork{position:fixed;inset:0;z-index:100000;background:#000;overflow:hidden;isolation:isolate}
.opening-credit{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;color:#f5eadd;animation:credit-arrive 1.2s ease both;transition:opacity .6s ease}
.opening-credit p{font-size:11px;letter-spacing:5px;color:#bfb6af;margin:22px 0 10px}.opening-credit strong{font-size:clamp(38px,6vw,68px);letter-spacing:5px;font-weight:500;line-height:1.2}
.opening-emblem{display:flex;gap:9px;align-items:center;height:35px}.opening-emblem i{display:block;width:8px;height:19px;border-radius:8px;background:#edc5d7;transform:rotate(25deg)}.opening-emblem i:nth-child(2){height:33px;background:#f3dfb1}.opening-emblem i:nth-child(3){height:25px;background:#c1d8cf}
#openingArtwork .opening-scene{position:absolute;inset:0;display:block;width:100%;height:100%;border:0;border-radius:0;padding:0;margin:0;background:#263435;box-shadow:none;opacity:0;transition:opacity 1.1s ease;overflow:hidden;cursor:pointer}
#openingArtwork img{width:100%;height:100%;object-fit:contain;transform:scale(1.035);transition:transform 5s cubic-bezier(.2,.6,.3,1)}
.opening-scene:after{content:'';position:absolute;inset:65% 0 0;pointer-events:none;background:linear-gradient(transparent,#172b35b8)}
.opening-welcome,.opening-prompt{position:absolute;z-index:1;left:50%;transform:translateX(-50%);white-space:nowrap;color:#fff4d9;text-shadow:0 2px 8px #132431;opacity:0;transition:opacity 1s ease}
.opening-welcome{bottom:15%;font-size:clamp(12px,1.5vw,20px);letter-spacing:2px}.opening-prompt{bottom:6%;font-size:clamp(12px,1.2vw,17px);letter-spacing:4px;padding:10px 26px;border-top:1px solid #f6ddac80;border-bottom:1px solid #f6ddac80}
.opening-touch{display:none}.opening-veil{position:absolute;inset:0;background:#fff8eb;opacity:0;pointer-events:none;z-index:5;transition:opacity .65s ease}
#openingArtwork[data-phase=reveal] .opening-credit,#openingArtwork[data-phase=waiting] .opening-credit{opacity:0;animation:none}
#openingArtwork[data-phase=reveal] .opening-scene,#openingArtwork[data-phase=waiting] .opening-scene,#openingArtwork[data-phase=leaving] .opening-scene,#openingArtwork[data-phase=title] .opening-scene{opacity:1}
#openingArtwork[data-phase=reveal] .opening-veil{animation:opening-light 1.5s ease both}
#openingArtwork[data-phase=waiting] img{transform:scale(1)}
#openingArtwork[data-phase=waiting] .opening-welcome,#openingArtwork[data-phase=waiting] .opening-prompt{opacity:1}
#openingArtwork[data-phase=leaving] .opening-veil{opacity:1}
#openingArtwork[data-phase=title]{opacity:0;transition:opacity .85s ease;pointer-events:none}
#openingArtwork[data-phase=title] .opening-veil{opacity:1}
.opening-title-arrival{animation:title-arrive 1.1s ease both}
@keyframes credit-arrive{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
@keyframes opening-light{0%{opacity:0}40%{opacity:1}100%{opacity:0}}
@keyframes title-arrive{from{opacity:.3;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
#displayMode{position:fixed;right:12px;bottom:8px;z-index:1000;font-size:12px;padding:6px 12px}
@media(pointer:coarse){#openingArtwork img{object-fit:cover}.opening-touch{display:block;font-size:11px;letter-spacing:1px;margin-top:4px}#displayMode{display:none}.opening-welcome{letter-spacing:0;bottom:23%;font-size:12px}.opening-prompt{bottom:6%;letter-spacing:2px}}
@media(prefers-reduced-motion:reduce){#openingArtwork *, .opening-title-arrival{animation:none!important;transition:none!important}#openingArtwork img{transform:none}#openingArtwork[data-phase=reveal] .opening-veil{opacity:0}}

#openingArtwork .opening-studio-logo{width:min(600px,85vw,85dvh);height:auto;object-fit:contain;transform:none;transition:none}.opening-credit{background:#000}