:root{
  --bg:#05060a;
  --accent:#0ef;
  --muted:#9aa2b2;
  --glass: rgba(255,255,255,0.03);
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial}
body{
  background:
    radial-gradient(1200px 600px at 10% 10%, #071029 0%, rgba(7,16,41,0) 20%),
    radial-gradient(900px 400px at 90% 90%, #120717 0%, rgba(18,7,23,0) 20%),
    var(--bg);
  color:#e6eef8;display:flex;align-items:center;justify-content:center;
}

.card{width:min(980px,96vw);height:640px;border-radius:16px;background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));box-shadow: 0 10px 40px rgba(2,6,23,0.6), inset 0 1px 0 rgba(255,255,255,0.02);position:relative; overflow:hidden; padding:28px; display:grid; grid-template-columns: 420px 1fr; gap:20px;}

.left{display:flex;flex-direction:column;gap:14px; justify-content:center; padding:18px}
.logo-crest{display:flex; gap:12px; align-items:center}
.crest-round{width:72px;height:72px;border-radius:12px;background:linear-gradient(135deg,#041428,#0b2543);display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--accent);font-size:20px;box-shadow:0 6px 18px rgba(2,10,30,0.6)}
h2{margin:0;font-size:20px;letter-spacing:0.6px}
p.sub{margin:0;color:var(--muted);font-size:13px}

.form{margin-top:8px; display:flex;flex-direction:column; gap:12px}
.field{display:flex;flex-direction:column}
label{font-size:12px;color:var(--muted);margin-bottom:6px}
input[type="text"], input[type="password"]{background:var(--glass); border:1px solid rgba(255,255,255,0.03); padding:12px 14px;border-radius:10px;color:inherit;font-size:15px;outline:none; transition:box-shadow .15s, border-color .15s;}
input:focus{box-shadow:0 6px 20px rgba(0,170,255,0.06); border-color: rgba(14,234,255,0.12)}

.btn{background:linear-gradient(90deg,var(--accent), #6ef); border:0;padding:12px 16px;border-radius:10px;color:#02101a;font-weight:700;cursor:pointer;font-size:15px; transition:transform .08s;}
.btn:active{transform:translateY(1px)}
.muted-note{font-size:12px;color:var(--muted)}

/* Right side */
.right{position:relative; border-left:1px solid rgba(255,255,255,0.02); padding:18px; display:flex;flex-direction:column; align-items:center; justify-content:center}
.screen{width:100%;height:100%;border-radius:12px;background:linear-gradient(180deg, rgba(0,0,0,0.25), rgba(255,255,255,0.02)); display:flex;align-items:center;justify-content:center; position:relative; overflow:hidden}
.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px; padding:20px; text-align:center}

/* Terminal area */
.terminal{width:92%; max-width:780px; height:70%; background:rgba(0,0,0,0.95); color:#7cffb2; border-radius:6px; padding:14px; box-shadow:0 12px 40px rgba(1,6,12,0.6); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", monospace; font-size:12px; overflow:hidden; position:relative; border:1px solid rgba(255,255,255,0.02);}
.term-line{white-space:nowrap; opacity:0; transform-origin:left}
.matrix{font-family:monospace; color:#6efc8a; line-height:14px; font-size:12px; opacity:0.95}

/* falling numbers */
.matrix-grid{position:absolute;inset:0;pointer-events:none;opacity:0.08;background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,0.4));}

/* stronger glitch */
.glitch{position:absolute;inset:0;pointer-events:none; mix-blend-mode:screen; background-image: linear-gradient(90deg, rgba(255,0,0,0.02), rgba(0,255,255,0.02)); animation:glitchMove 180ms linear infinite; opacity:0.9;}
@keyframes glitchMove { 0%{transform:translateX(0)} 50%{transform:translateX(-3px)} 100%{transform:translateX(0)} }

.screen.shake{ animation:shake .9s cubic-bezier(.36,.07,.19,.97) both}
@keyframes shake {10%,90%{transform:translate3d(-1px,0,0)}20%,80%{transform:translate3d(2px,0,0)}30%,50%,70%{transform:translate3d(-6px,0,0)}40%,60%{transform:translate3d(6px,0,0)}}

/* post reveal */
.stage{display:flex;flex-direction:column;align-items:center;gap:12px;opacity:0;transform:translateY(8px);transition:opacity .6s ease, transform .6s}
.stage.visible{opacity:1;transform:none}

/* crest opens like an eye */
.logo-3d{width:260px;height:260px;border-radius:18px;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg, rgba(10,20,40,0.8), rgba(2,6,12,0.6));border:1px solid rgba(255,255,255,0.03);position:relative;transform-style:preserve-3d;perspective:1200px;box-shadow:0 18px 60px rgba(2,8,20,0.7)}
.orbit{width:200px;height:200px;border-radius:50%;display:flex;align-items:center;justify-content:center;transform-style:preserve-3d;animation:float 6s ease-in-out infinite;}
@keyframes float{0%{transform:translateY(0) rotateX(5deg)}50%{transform:translateY(-12px) rotateX(-4deg)}100%{transform:translateY(0) rotateX(5deg)}}

/* crest as object */
.crest-3d{width:150px;height:150px;border-radius:14px;position:relative;transform-style:preserve-3d;animation:roll 14s linear infinite;}
@keyframes roll{0%{transform:rotateY(-10deg) rotateX(4deg)}50%{transform:rotateY(10deg) rotateX(-4deg)}100%{transform:rotateY(-10deg) rotateX(4deg)}}

/* two eyelid halves that open from center */
.eyelid-top,.eyelid-bottom{position:absolute;left:0;right:0;height:50%;background:linear-gradient(180deg,#02060b,#02060b);border-radius:14px;transform-origin:center;z-index:3}
.eyelid-top{top:0;border-bottom-left-radius:0;border-bottom-right-radius:0;transform:translateY(0) scaleY(1)}
.eyelid-bottom{bottom:0;border-top-left-radius:0;border-top-right-radius:0;transform:translateY(0) scaleY(1)}

.open-eye .eyelid-top{animation:openTop 1.2s ease forwards}
.open-eye .eyelid-bottom{animation:openBottom 1.2s ease forwards}
@keyframes openTop{0%{transform:scaleY(1)}40%{transform:scaleY(0.08) translateY(-6%)}100%{transform:scaleY(0) translateY(-60%)}}
@keyframes openBottom{0%{transform:scaleY(1)}40%{transform:scaleY(0.08) translateY(6%)}100%{transform:scaleY(0) translateY(60%)}}

/* visit button */
.visit-btn{margin-top:10px;padding:10px 14px;border-radius:10px;border:1px solid rgba(255,255,255,0.06); background:linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); color:var(--accent); font-weight:700; cursor:pointer; display:inline-block; opacity:0; transform:translateY(6px); transition:opacity .4s ease, transform .4s ease;}
.visit-btn.visible{opacity:1; transform:none}

.small-muted{font-size:12px;color:var(--muted)}
footer{position:absolute;left:18px;bottom:18px;color:var(--muted);font-size:12px}
@media (max-width:880px){.card{grid-template-columns:1fr; height:92vh}.left{order:2}.right{order:1}}