/* Full-screen travel, with the real page immediately behind it. */
.portal-entry{position:fixed;inset:0;width:100vw;max-width:none;height:100dvh;max-height:none;margin:0;padding:0;border:0;color:#e7edf0;background:#060c16;overflow:hidden;font-family:var(--sans);isolation:isolate}
.portal-entry:not([open]){display:none}.portal-entry::backdrop{background:transparent}.portal-active{overflow:hidden}
.portal-cosmos,.portal-vignette,.portal-depth{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.portal-cosmos{background:radial-gradient(ellipse at 50% 50%,#030915 5%,#183c50 30%,#59402b 50%,#08131f 75%)}
.portal-vignette{background:linear-gradient(#03091355,transparent 25%,transparent 75%,#030913aa);z-index:1}
.portal-top,.portal-bottom{position:absolute;left:5%;right:5%;z-index:3;display:flex;align-items:center;justify-content:space-between}
.portal-top{top:30px;font-size:18px;letter-spacing:.06em}.portal-top small{font-size:11px;color:#b2c0ca;margin-left:12px}
.portal-skip{background:#08131d85;border:1px solid #c6d8e04d;border-radius:40px;color:#edf7ff;min-height:44px;padding:10px 18px;font:500 13px var(--sans);cursor:pointer;backdrop-filter:blur(15px)}
.portal-skip:hover,.portal-skip:focus-visible{background:#244658;outline:2px solid #a8d4e8;outline-offset:4px}
.portal-bottom{bottom:40px;font-size:13px;letter-spacing:.15em;padding-bottom:22px}.portal-counter{font:12px var(--display);color:#bfd2dd}
.portal-progress{position:absolute;bottom:0;height:1px;left:0;right:0;background:#bdd9e52b}.portal-progress::after{content:'';position:absolute;inset:0;background:#d1d8ce;transform:scaleX(0);transform-origin:left}
.portal-depth{perspective:650px;transform-style:preserve-3d;z-index:2}
.portal-ring{position:absolute;width:60vmin;height:60vmin;left:calc(50% - 30vmin);top:calc(50% - 30vmin);border:1px solid #94afbb3b;transform:translateZ(-800px) rotateZ(0);border-radius:18%;opacity:0;box-shadow:0 0 35px #84c5df12,inset 0 0 35px #84c5df12}
.portal-photo{position:absolute;width:190px;height:245px;left:calc(50% - 95px);top:calc(50% - 138px);border:1px solid #c1d9e184;border-radius:90px 90px 4px 4px;overflow:hidden;box-shadow:0 0 80px #9cccdf25;transform:translateZ(0)}
.portal-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 40%;filter:none}
.portal-photo span{position:absolute;bottom:0;left:0;right:0;padding:30px 10px 15px;text-align:center;color:white;background:linear-gradient(transparent,#071625d9);font-size:11px;letter-spacing:.2em}
.portal-word{position:absolute;color:#dce3e7e0;font-size:clamp(22px,4vw,56px);font-weight:400;letter-spacing:.22em;text-shadow:0 0 40px #a9d9eb33;white-space:nowrap;opacity:0}
.word-one{left:12%;top:34%}.word-two{right:9%;top:57%}.word-three{left:37%;top:73%;font-size:18px}
.is-travelling .portal-ring{animation:portalFlight 3.2s cubic-bezier(.55,.02,.8,.55) both}.is-travelling .ring-one{animation-delay:.25s}.is-travelling .ring-two{animation-delay:.85s}.is-travelling .ring-three{animation-delay:1.35s}
.is-travelling .portal-photo{animation:portraitFlight 2.2s cubic-bezier(.52,.03,.8,.6) both}
.is-travelling .portal-word{animation:wordFlight 2.8s cubic-bezier(.55,.05,.8,.6) both}.is-travelling .word-two{animation-delay:.35s}.is-travelling .word-three{animation-delay:1s}
.is-travelling .portal-progress::after{animation:portalProgress 4.6s linear both}.portal-entry.is-travelling{animation:portalExit .7s 3.9s both}
@keyframes portalFlight{0%{transform:translateZ(-1000px) rotateZ(-20deg);opacity:0}20%{opacity:.65}85%{opacity:.4}100%{transform:translateZ(630px) rotateZ(85deg);opacity:0}}
@keyframes portraitFlight{0%{opacity:0;transform:translateZ(-120px)}15%,42%{opacity:1}100%{opacity:0;transform:translateZ(580px) translateX(-45px) rotateZ(-12deg)}}
@keyframes wordFlight{0%{opacity:0;transform:translateZ(-350px)}30%{opacity:.8}100%{opacity:0;transform:translateZ(610px)}}
@keyframes portalProgress{to{transform:scaleX(1)}}@keyframes portalExit{to{opacity:0;filter:blur(8px)}}
@media(max-width:600px){.portal-top{top:22px}.portal-top small{display:none}.portal-photo{width:150px;height:205px;left:calc(50% - 75px);top:calc(50% - 115px)}.word-one{left:7%;top:27%;font-size:22px}.word-two{right:5%;top:67%;font-size:22px}.word-three{left:12%;top:79%;font-size:14px}.portal-caption{font-size:10px;letter-spacing:.05em}.portal-bottom{bottom:30px}.portal-ring{width:90vmin;height:90vmin;left:calc(50% - 45vmin);top:calc(50% - 45vmin)}}
@media(prefers-reduced-motion:reduce){.portal-entry{display:none!important}}
/* Eight real portraits share one inward spiral. The soundtrack starts with the journey. */
.portal-photo{width:clamp(100px,11vw,157px);height:clamp(135px,14.4vw,205px);left:50%;top:50%;border-radius:3px;border:1px solid #b4d6ef70;box-shadow:0 12px 40px #0007,0 0 26px #6bbdff22;will-change:transform,opacity}
.portal-photo img{object-position:50% 30%}.portal-photo span{font-size:10px;padding:24px 8px 9px;letter-spacing:.14em}.is-travelling .portal-photo{animation:none}
.portal-gate{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:30;text-align:center;width:min(450px,56vw);text-shadow:0 2px 25px #000;background:radial-gradient(ellipse,#061120cc,transparent 70%)}
.portal-overline{font:10px var(--display);letter-spacing:.2em;color:#9eacbd;margin-bottom:18px}.portal-gate h2{font:500 clamp(22px,2.6vw,38px)/1.55 var(--sans);letter-spacing:.02em;margin:0;color:#eef2f8}.portal-gate .portal-help{font:11px/1.8 var(--sans);color:#a8c1d7;margin:15px -30px}.portal-gate small{display:block;font:10px var(--sans);color:#8cacc4;margin-top:16px}
.portal-entry-actions{display:flex;align-items:center;justify-content:center;gap:15px}.portal-entry-actions button{cursor:pointer;font:500 13px var(--sans);min-height:44px;border-radius:3px;padding:12px 18px}.portal-sound{background:#d1e8fc;color:#11263b;border:1px solid #ecf7ff;box-shadow:0 0 30px #71bbff55}.portal-sound span{margin-left:12px}.portal-silent{background:transparent;color:#b9cfdf;border:1px solid #abcbe550}.portal-entry-actions button:focus-visible{outline:2px solid white;outline-offset:5px}.portal-entry-actions button:hover{filter:brightness(1.18)}
.is-travelling .portal-gate{opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s}.is-travelling .portal-ring{animation-duration:4.2s}.is-travelling .portal-progress::after{animation-duration:5.4s}.portal-entry.is-travelling{animation:portalExit .8s 4.6s both}
.portal-arrival{position:absolute;inset:0;pointer-events:none;z-index:25;background:radial-gradient(ellipse,#c4e3ff55,transparent 65%);opacity:0}.is-travelling .portal-arrival{animation:portalLand 1s 4.25s both}@keyframes portalLand{35%{opacity:.85;transform:scale(1.2)}100%{opacity:0;transform:scale(2)}}
@media(max-width:650px){.portal-photo{width:75px;height:101px;border-radius:3px;left:50%;top:50%}.portal-photo span{font-size:8px;padding:20px 3px 6px}.portal-gate{width:62vw}.portal-gate h2{font-size:23px}.portal-overline{font-size:8px;letter-spacing:.1em}.portal-gate .portal-help{font-size:10px}.portal-entry-actions{gap:7px}.portal-entry-actions button{padding:10px;font-size:12px}.portal-sound span{margin-left:4px}.portal-top{font-size:15px}}
/* Light belongs to the photographic frame; faces keep their original color. */
.portal-photo[data-scene=military]{border-color:#adc4a9;box-shadow:0 0 26px #8da87d44,0 14px 35px #0008}
.portal-photo[data-scene=travel]{border-color:#deaf93;box-shadow:0 0 28px #c7724d44,0 14px 35px #0008}
.portal-photo[data-scene=sea],.portal-photo[data-scene=sport]{border-color:#a5d9f6;box-shadow:0 0 28px #4cabdb44,0 14px 35px #0008}
.portal-photo[data-scene=work]{border-color:#d4bf9c;box-shadow:0 0 24px #c29d5d44,0 14px 35px #0008}
/* Radial velocity, layered passage rings and a single arrival bloom. */
.portal-particles{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;mix-blend-mode:screen}
.is-travelling .ring-four{animation-delay:1.8s}.is-travelling .ring-five{animation-delay:2.3s}.is-travelling .ring-six{animation-delay:2.8s}
.portal-ring{border:2px solid #8ee0f766;box-shadow:0 0 32px #66befc33,inset 0 0 25px #92d5f52e;border-radius:32%;}
.ring-two,.ring-five{border-color:#e5b88766;box-shadow:0 0 35px #daaf742e,inset 0 0 25px #dab98222;border-radius:50%}
.is-travelling .portal-cosmos{animation:cosmosSurge 5.4s ease-in both}.is-travelling .portal-depth{animation:depthBank 5.4s ease-in-out both}
@keyframes cosmosSurge{0%{transform:scale(1.06) rotate(-3deg)}70%{transform:scale(1.16) rotate(3deg)}100%{transform:scale(1.32) rotate(9deg)}}
@keyframes depthBank{0%,100%{rotate:0deg}40%{rotate:-5deg}75%{rotate:6deg}}