.transition-screen{position:fixed;inset:0;z-index:10;display:grid;place-items:center;overflow:hidden;background:radial-gradient(ellipse at center,rgba(8,35,20,.96),rgba(1,5,3,.99) 72%);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s ease,visibility .25s ease}
.transition-screen.is-active{opacity:1;visibility:visible;pointer-events:auto}
body.in-transition{overflow:hidden}
.tunnel{position:absolute;inset:0;overflow:hidden;pointer-events:none;perspective:700px;background:radial-gradient(circle at center,rgba(47,255,127,.14),transparent 37%)}
.tunnel i,.tunnel b{animation-play-state:paused}
.transition-screen.is-active .tunnel i,.transition-screen.is-active .tunnel b{animation-play-state:running}
.tunnel i{position:absolute;left:50%;top:50%;width:min(72vmin,620px);aspect-ratio:1;border:1px solid rgba(64,255,136,.55);border-radius:50%;box-shadow:0 0 28px rgba(64,255,136,.08),inset 0 0 30px rgba(64,255,136,.04);transform:translate(-50%,-50%) scale(.12);animation:tunnel-ring 4.8s cubic-bezier(.15,.55,.45,1) infinite}
.tunnel i:nth-child(2){animation-delay:1s;border-color:rgba(195,162,101,.45)}
.tunnel i:nth-child(3){animation-delay:2s}
.tunnel i:nth-child(4){animation-delay:3s;border-color:rgba(195,162,101,.38)}
.tunnel b{position:absolute;left:50%;top:50%;display:grid;place-items:center;width:64px;height:64px;border:1px solid rgba(64,255,136,.68);border-radius:50%;color:var(--green);font:26px var(--serif);transform:translate(-50%,-50%);text-shadow:0 0 18px rgba(64,255,136,.55);animation:seal-pulse 2.6s ease-in-out infinite alternate}
.transition-content{position:relative;z-index:1;width:min(440px,calc(100% - 44px));padding:36px 28px;text-align:center;background:rgba(2,9,5,.68);border:1px solid rgba(64,255,136,.24);box-shadow:0 18px 70px rgba(0,0,0,.45);backdrop-filter:blur(8px)}
.transition-screen.is-active .transition-content{animation:portal-rise .7s cubic-bezier(.2,.75,.3,1) both}
.transition-content .eyebrow{font-size:9px}
.transition-content h2{margin:22px 0 8px;color:var(--ink);font:400 clamp(28px,7vw,42px)/1.05 var(--serif)}
.transition-content p{margin:0;color:#aab8a9;font:14px/1.6 var(--serif)}
.meter-track{height:5px;margin:27px 0 10px;overflow:hidden;background:rgba(64,255,136,.14);border:1px solid rgba(64,255,136,.25)}
.meter-fill{display:block;width:0;height:100%;background:linear-gradient(90deg,#0c8d47,#40ff88,#d7f7a4);box-shadow:0 0 16px rgba(64,255,136,.55);transition-property:width;transition-timing-function:cubic-bezier(.2,.75,.25,1)}
.meter-meta{display:flex;justify-content:space-between;color:#829286;font:9px/1.4 var(--sans);letter-spacing:.19em}
.meter-meta span:last-child{color:var(--green);font-variant-numeric:tabular-nums}
@keyframes tunnel-ring{0%{opacity:0;transform:translate(-50%,-50%) scale(.12)}18%{opacity:.8}100%{opacity:0;transform:translate(-50%,-50%) scale(3.3)}}
@keyframes seal-pulse{from{box-shadow:0 0 8px rgba(64,255,136,.12);transform:translate(-50%,-50%) scale(.92)}to{box-shadow:0 0 28px rgba(64,255,136,.34);transform:translate(-50%,-50%) scale(1.06)}}
@keyframes portal-rise{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(prefers-reduced-motion:reduce){.tunnel i,.tunnel b{animation-duration:.01ms!important;animation-iteration-count:1!important}.transition-screen{transition-duration:.01ms!important}}