/* Centered alien terminal. Supplied artwork; all motion and light sequencing use CSS. */
:root { color-scheme: dark; --cyan: #72e7f5; --text: #edf5fb; --muted: #a4b6c6; --error: #ffadb4; --terminal-width: min(94vw, 49.18svh); }
*, *::before, *::after { box-sizing: border-box; }
html { min-height: 100%; background: #020710; }
body { margin: 0; min-width: 280px; min-height: 100svh; color: var(--text); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; -webkit-font-smoothing: antialiased; }
.scene-container { position: relative; min-height: 100svh; isolation: isolate; overflow: clip; background: #020710; }
.scene-world { position: absolute; inset: 0; z-index: -3; pointer-events: none; }
.scene-camera, .bg-image { position: absolute; inset: 0; }
.bg-image { background: #020710 url('../img/alien-data-center-bg.webp') center / cover no-repeat; animation: room-reveal 1.4s ease-out both; }
.scene-shade { position: absolute; inset: 0; z-index: -2; pointer-events: none; background: radial-gradient(ellipse at 50% 46%, transparent 25%, #01061177); }
.portal-wrapper { position: relative; min-height: 100svh; }
.portal-entry { position: absolute; width: var(--terminal-width); aspect-ratio: 971 / 1619; left: 50%; bottom: 13svh; transform: translateX(-50%); }
.terminal-mask { position: absolute; inset: -4% -8% 0; overflow: hidden; }
.terminal-body { position: absolute; left: 6.89655%; right: 6.89655%; top: 3.84615%; bottom: 0; animation: terminal-rise 1.55s cubic-bezier(.18,.75,.2,1) .8s both; }
.terminal-art { position: absolute; inset: 0; display: block; width: 100%; height: 100%; pointer-events: none; }
.terminal-powered { opacity: 0; }
.portal-panel { position: absolute; left: 27%; top: 35.2%; width: 46%; height: 17.7%; display: flex; flex-direction: column; justify-content: center; padding: 3% 1%; background: #04141df5; }
.portal-title { margin: 0 0 7%; text-align: center; font-size: clamp(9px, 1.5svh, 14px); line-height: 1.3; font-weight: 600; letter-spacing: .14em; color: var(--cyan); }
.entry-form { display: flex; flex-direction: column; gap: 8px; }
.input-container { width: 100%; }
.code-input { display: block; width: 100%; min-height: 34px; padding: 5px 3px; border: 1px solid #19c5ec; border-radius: 3px; color: var(--text); background: #03131e; font: inherit; font-size: 16px; text-align: center; box-shadow: inset 0 0 10px #00c8ff11; }
.code-input::placeholder { color: #b3d1df; opacity: 1; font-size: 12px; }
.code-input:focus { outline: 2px solid #8cefff; outline-offset: 2px; }
.code-input[aria-invalid='true'] { border-color: var(--error); }
.validate-btn { min-height: 30px; width: 100%; padding: 5px; border: 1px solid #57d7ee; border-radius: 3px; background: linear-gradient(#13414d, #062630); color: #a6f5ff; font: inherit; font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; cursor: pointer; }
.validate-btn:hover { background: #18566a; box-shadow: 0 0 14px #1bd5ff44; }
.validate-btn:focus-visible { outline: 2px solid white; outline-offset: 3px; }
.validate-btn:disabled { opacity: .65; cursor: wait; }
.status-area { position: absolute; top: calc(100% + 12px); left: -20%; width: 140%; text-align: center; font-size: 12px; line-height: 1.4; text-shadow: 0 1px 4px black; }
.status-area:not(:has(.status-message)) { display: none; }
.status-message { display: block; padding: 6px; background: #020d17ed; border-radius: 4px; }
.status-message.error { color: var(--error); }
.status-message.validating, .status-message.success { color: var(--cyan); }
.banned-message { margin: 0; text-align: center; font-size: clamp(10px, 1.6svh, 14px); line-height: 1.5; }
.location-text { position: absolute; top: 100%; left: -20%; width: 140%; margin: 18px 0 0; color: #f5faff; text-align: center; font-size: 15px; font-weight: 500; line-height: 1.5; text-shadow: 0 1px 4px #000; animation: location-reveal .4s ease 2.2s both; }
.portal-entry:has(.banned-panel) .location-text { display: none; }
.trap-field { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.success-notice { position: absolute; left: 27%; top: 35.2%; width: 46%; height: 17.7%; display: flex; flex-direction: column; justify-content: center; text-align: center; pointer-events: none; opacity: 0; padding: 5%; }
.success-title { margin: 0; color: #fff0bc; font-size: clamp(11px, 1.8svh, 17px); font-weight: 600; line-height: 1.6; letter-spacing: .12em; text-shadow: 0 0 12px #ffb000; }
.success-detail { margin: 8px 0 0; color: #b9eaf4; font-size: 11px; line-height: 1.5; }
.scene-container.authorized .terminal-powered { animation: terminal-power 1.1s linear forwards; }
.scene-container.authorized .terminal-body { animation: none; }
.scene-container.authorized .portal-panel, .scene-container.authorized .location-text { animation: controls-out .2s ease forwards; pointer-events: none; }
.scene-container.authorized .success-notice { animation: location-reveal .3s ease .35s forwards; }
.scene-container.zooming { transform-origin: var(--zoom-x, 50%) var(--zoom-y, 43%); animation: screen-zoom .7s cubic-bezier(.65,0,.9,.5) forwards; }
.scene-container::after { content: ''; position: fixed; inset: 0; z-index: 30; background: #03121c; pointer-events: none; opacity: 0; }
.scene-container.zooming::after { animation: screen-blackout .7s ease-in forwards; }
@keyframes room-reveal { from { opacity: 0; filter: blur(12px) brightness(.2); transform: scale(1.035); clip-path: inset(45% 0); } to { opacity: 1; filter: none; transform: none; clip-path: inset(0); } }
@keyframes terminal-rise { from { transform: translateY(105%); filter: brightness(.4); } to { transform: translateY(0); filter: brightness(1); } }
@keyframes terminal-power { 0%, 12%, 24% { opacity: 0; } 8%, 19% { opacity: .6; } 36% { opacity: .35; clip-path: inset(65% 0 0); } 65% { opacity: 1; clip-path: inset(15% 0 0); filter: drop-shadow(0 0 8px #ffb000); } 100% { opacity: 1; clip-path: inset(0); filter: drop-shadow(0 0 3px #ffb00055); } }
@keyframes location-reveal { from { opacity: 0; } to { opacity: 1; } }
@keyframes controls-out { to { opacity: 0; } }
@keyframes screen-zoom { to { transform: scale(14); } }
@keyframes screen-blackout { 0%, 55% { opacity: 0; } 100% { opacity: 1; } }
@media (max-width: 480px) { .portal-panel { padding-inline: 0; } .portal-title { font-size: 10px; letter-spacing: .08em; margin-bottom: 6px; } .entry-form { gap: 6px; } .location-text { font-size: 13px; } }
@media (max-height: 500px) { :root { --terminal-width: min(65vw, 430px); } .scene-container, .portal-wrapper { min-height: 760px; } .portal-entry { bottom: 80px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } .terminal-body, .bg-image, .location-text { opacity: 1; } .scene-container.authorized .terminal-powered, .scene-container.authorized .success-notice { opacity: 1; } .scene-container.authorized .portal-panel, .scene-container.authorized .location-text { opacity: 0; } }
/* Energy choreography: room online > floor charge > terminal rise > verified power > screen push. */
.bg-image { animation-duration: .65s; }
.terminal-body { animation-duration: .72s; animation-delay: .25s; }
.location-text { animation-duration: .2s; animation-delay: .9s; }
.floor-energy { position: absolute; pointer-events: none; left: 50%; top: 79%; width: min(90vw, 105svh); height: 24svh; transform: translate(-50%,-50%); perspective: 500px; z-index: -1; }
.floor-energy i { position: absolute; inset: 0; border: 2px solid #24dfff; border-radius: 50%; transform: rotateX(66deg) scale(.4); opacity: 0; box-shadow: 0 0 16px #00c8ff99, inset 0 0 20px #00c8ff44; animation: floor-charge 3s ease-out 1s infinite; }
.floor-energy i:nth-child(2) { animation-delay: 2s; border-color: #ffcb65; box-shadow: 0 0 18px #ffb00077; }
.floor-energy i:nth-child(3) { animation-delay: 3s; }
.energy-column { position: absolute; pointer-events: none; left: 50%; top: 7%; bottom: 20%; width: min(40vw, 32svh); transform: translateX(-50%); z-index: -1; opacity: 0; background: linear-gradient(90deg, transparent, #00d5ff08 25%, #aaf8ff22 49%, #00d5ff08 75%, transparent); mask-image: linear-gradient(transparent, #000 30%, #000 85%, transparent); animation: column-arrive .85s ease-out .2s both; }
.terminal-aura { position: absolute; inset: 8% 18% 4%; pointer-events: none; border-radius: 45%; background: radial-gradient(ellipse, #00cfff18, transparent 70%); filter: blur(18px); animation: aura-idle 3s ease-in-out infinite alternate; }
.terminal-scan { position: absolute; left: 26.6%; top: 34.5%; width: 47.5%; height: 19.4%; z-index: 3; pointer-events: none; overflow: hidden; border-radius: 8%; background: repeating-linear-gradient(transparent 0 3px, #59dfff07 3px 4px); }
.terminal-scan::after { content: ''; position: absolute; left: 0; right: 0; top: -35%; height: 30%; background: linear-gradient(transparent, #58e7ff18, #b6faff44, transparent); animation: screen-scan 3.1s linear 1s infinite; }
.success-notice { visibility: hidden; }
.scene-container.authorized .success-notice { visibility: visible; animation-delay: .15s; }
.scene-container.authorized .terminal-powered { animation: terminal-power .65s linear forwards; }
.scene-container.authorized .terminal-off { animation: chassis-charge .7s ease-out both; }
.scene-container.authorized .terminal-aura { animation: aura-surge .9s ease-out both; }
.scene-container.authorized .terminal-scan::after { animation: screen-scan .35s linear 2; background: linear-gradient(transparent, #ffc54d33, #fff7d9aa, transparent); }
.scene-container.authorized .floor-energy i { animation: floor-charge .8s ease-out both; border-color: #ffd375; box-shadow: 0 0 24px #ffb000; }
.scene-container.authorized .floor-energy i:nth-child(2) { animation-delay: .15s; }
.scene-container.authorized .floor-energy i:nth-child(3) { animation-delay: .3s; }
.scene-container.authorized .energy-column { animation: column-surge .9s ease-out both; }
.scene-container.zooming { animation-duration: .45s; }
.scene-container.zooming::after { animation-duration: .45s; }
@keyframes floor-charge { 0% { transform: rotateX(66deg) scale(.25); opacity: 0; } 20% { opacity: .65; } 100% { transform: rotateX(66deg) scale(1.18); opacity: 0; } }
@keyframes column-arrive { 0% { opacity: 0; transform: translateX(-50%) scaleX(.2); } 40% { opacity: 1; } 100% { opacity: .35; transform: translateX(-50%) scaleX(1); } }
@keyframes column-surge { 0% { opacity: .35; } 25% { opacity: 1; filter: brightness(2); } 100% { opacity: 0; transform: translateX(-50%) scaleX(2); } }
@keyframes screen-scan { to { transform: translateY(460%); } }
@keyframes aura-idle { to { opacity: .45; transform: scale(1.1); } }
@keyframes aura-surge { 0% { opacity: .3; } 35% { opacity: 1; background: #ffc14544; transform: scale(1.5); } 100% { opacity: .5; transform: scale(1.1); } }
@keyframes chassis-charge { 35% { filter: brightness(1.5) drop-shadow(0 0 5px #00d5ff); } 100% { filter: brightness(1); } }
@media (prefers-reduced-motion: reduce) { .floor-energy, .energy-column, .terminal-aura, .terminal-scan { display: none; } }
/* Slower cinematic pass: room > floor rise > controls > five-second handshake. */
:root { --terminal-width: calc((100svh + 40px) * 971 / 1619); }
.bg-image { animation: room-fade 2.3s ease-out both; }
.portal-entry { top: -30px; bottom: auto; }
.terminal-body { animation: terminal-rise 2s cubic-bezier(.55,.04,.65,1) 1.8s both; }
.portal-panel { animation: controls-appear .8s ease 3.7s both; padding-inline: 1.5%; }
.portal-title { font-size: clamp(10px, 1.45svh, 15px); margin-bottom: 7%; }
.code-input { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 13px; min-height: 34px; padding-inline: 4px; }
.code-input::placeholder { font-family: inherit; font-size: 12px; }
.code-input:focus { font-size: 16px; }
.code-input[readonly] { font-size: 13px; letter-spacing: .02em; color: #a6f5ff; }
.validate-btn { min-height: 30px; }
.location-text { animation-delay: 4.2s; }
.floor-energy i { animation-delay: 2s; }
.floor-energy i:nth-child(2) { animation-delay: 3s; }
.floor-energy i:nth-child(3) { animation-delay: 4s; }
.energy-column { animation-duration: 2s; animation-delay: 1.8s; }
.login-console { position: absolute; z-index: 5; left: 25.5%; top: 55.8%; width: 49%; height: 0; opacity: 0; overflow: hidden; border: 1px solid transparent; border-radius: 3px; background: #24282cf5; box-shadow: 0 12px 30px #0008; pointer-events: none; }
.console-heading { height: 25px; display: flex; align-items: center; gap: 7px; padding: 0 9px; border-bottom: 1px solid #72858f44; color: #b2c2ca; font: 8px ui-monospace, Consolas, monospace; letter-spacing: .08em; white-space: nowrap; }
.console-heading > span:first-child { width: 4px; height: 4px; border-radius: 50%; background: #8ce8e2; box-shadow: 0 0 6px #8ce8e2; }
.console-cursor { margin-left: auto; animation: cursor-blink .65s step-end infinite; }
.console-output { height: calc(100% - 25px); margin: 0; padding: 8px 9px; overflow: hidden; color: #9de0ce; text-shadow: 0 0 5px #53dbad33; font: clamp(8px, 1.05svh, 12px)/1.65 ui-monospace, SFMono-Regular, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.scene-container.checking .login-console { animation: console-drop 1s cubic-bezier(.2,.8,.2,1) forwards; border-color: #75858e80; }
.scene-container.checking.console-fading .login-console { height: 24%; animation: console-fade 1s ease forwards; }
.scene-container.checking .status-message.validating { background: transparent; font-size: 10px; opacity: .7; }
.scene-container.checking .status-area { top: calc(100% + 2px); }
.scene-container.authorized .terminal-powered { animation: power-flow 1.65s ease-out both; mask-image: linear-gradient(to top, #000 0%, #000 80%, transparent 100%); mask-size: 100% 130%; mask-repeat: no-repeat; }
.scene-container.authorized .terminal-off { animation: off-bloom 1.65s ease-out both; }
.scene-container.authorized .terminal-aura { animation: aura-surge 1.65s ease-out both; }
.scene-container.authorized .success-notice { animation-delay: .85s; }
.scene-container.authorized .portal-panel { animation: controls-out .3s ease forwards; }
@keyframes room-fade { from { opacity: 0; filter: brightness(.4); } to { opacity: 1; filter: brightness(1); } }
@keyframes controls-appear { from { opacity: 0; visibility: hidden; transform: translateY(5px); } to { opacity: 1; visibility: visible; transform: translateY(0); } }
@keyframes console-drop { 0% { height: 0; opacity: 0; } 20% { opacity: 1; } 100% { height: 24%; opacity: 1; } }
@keyframes console-fade { from { opacity: 1; } to { opacity: 0; } }
@keyframes cursor-blink { 50% { opacity: 0; } }
@keyframes power-flow { 0% { opacity: 0; mask-position: 0 240svh; filter: brightness(1); } 12% { opacity: .75; } 20% { opacity: .25; } 32% { opacity: .95; } 42% { opacity: .65; } 70% { opacity: 1; filter: brightness(1.2) drop-shadow(0 0 8px #ffb72e99); } 100% { opacity: 1; mask-position: 0 0; filter: brightness(1) drop-shadow(0 0 4px #ffbc4855); } }
@keyframes off-bloom { 0%, 100% { filter: none; } 25% { filter: brightness(1.25) drop-shadow(0 0 10px #00dfff99); } 55% { filter: brightness(1.6) drop-shadow(0 0 15px #ffb62cbb); } 80% { filter: brightness(1.15) drop-shadow(0 0 7px #00dfff66); } }
@media (max-width: 480px) { .portal-title { font-size: 11px; } .code-input { min-height: 36px; } .entry-form { gap: 7px; } }
@media (max-height: 500px) { :root { --terminal-width: calc(760px * 971 / 1619); } .portal-entry { top: -25px; bottom: auto; } }
@media (prefers-reduced-motion: reduce) { .portal-panel { opacity: 1; visibility: visible; } .login-console { display: none; } .scene-container.authorized .terminal-powered { mask-image: none; } }
/* Keep the footnote visible while the terminal fills the viewport. */
.portal-entry { top: -26px; }
.location-text { position: absolute; top: auto; bottom: 12px; left: auto; right: 16px; width: auto; margin: 0; font-size: 12px; text-align: right; }
.scene-container:has(.banned-panel) .location-text { display: none; }
.scene-container.authorized .terminal-powered { mask-image: linear-gradient(to top, #000 0%, #000 45%, transparent 55%, transparent 100%); mask-size: 100% 200%; }
@keyframes power-flow { 0% { opacity: 0; mask-position: 0 0; filter: brightness(1); } 12% { opacity: .75; } 20% { opacity: .3; } 32% { opacity: 1; } 42% { opacity: .7; } 70% { opacity: 1; filter: brightness(1.2) drop-shadow(0 0 8px #ffb72e99); } 100% { opacity: 1; mask-position: 0 100%; filter: brightness(1) drop-shadow(0 0 4px #ffbc4855); } }
@media (prefers-reduced-motion: reduce) { .scene-container.authorized .terminal-powered { mask-image: none; } }