/* Ty-Kernel - Splash / Login - ambiance horreur cosmique */
:root {
  --bg:#05070a; --ink:#c9d3d6; --muted:#6b7a80;
  --accent:#3fb6a8; --accent-dim:#1c4b46; --danger:#c0574f;
  --panel:rgba(10,15,18,0.72);
}
* { box-sizing: border-box; }
html, body { height:100%; margin:0; }
body {
  min-height:100vh; display:grid; place-items:center;
  background:radial-gradient(1200px 700px at 50% -10%, #0b1418 0%, #05070a 55%, #020304 100%);
  color:var(--ink); font-family:"Georgia","Times New Roman",serif;
  overflow:hidden; position:relative;
}
.fog {
  position:fixed; inset:-20%;
  background:radial-gradient(closest-side, rgba(63,182,168,0.06), transparent 70%);
  filter:blur(30px); pointer-events:none;
  animation:drift 26s ease-in-out infinite alternate;
}
.fog-2 { animation-duration:38s; animation-direction:alternate-reverse; opacity:.7; }
@keyframes drift {
  from { transform:translate3d(-6%,-4%,0) scale(1); }
  to   { transform:translate3d(6%,5%,0) scale(1.15); }
}
.vignette { position:fixed; inset:0; pointer-events:none; box-shadow:inset 0 0 260px 60px rgba(0,0,0,0.9); }
.portal {
  position:relative; z-index:2; width:min(92vw,420px); padding:38px 30px 26px;
  text-align:center; background:var(--panel);
  border:1px solid rgba(63,182,168,0.15); border-radius:14px;
  backdrop-filter:blur(6px);
  box-shadow:0 20px 60px rgba(0,0,0,0.6), 0 0 40px rgba(63,182,168,0.05);
  animation:rise 900ms ease-out both;
}
@keyframes rise { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:translateY(0); } }
.sigil { position:relative; width:92px; height:92px; margin:0 auto 14px; }
.ring, .ring-2 {
  position:absolute; inset:0; border:1px solid var(--accent-dim);
  border-top-color:var(--accent); border-radius:50%; animation:spin 8s linear infinite;
}
.ring-2 { inset:12px; border-top-color:transparent; border-left-color:var(--accent); animation-duration:5s; animation-direction:reverse; }
.eye {
  position:absolute; inset:32px; border-radius:50%;
  background:radial-gradient(circle at 50% 45%, #eafffb 0%, var(--accent) 22%, #06231f 60%, #010605 100%);
  box-shadow:0 0 22px rgba(63,182,168,0.5); animation:pulse 3.4s ease-in-out infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }
@keyframes pulse { 50% { transform:scale(0.88); filter:brightness(1.3); } }
.title {
  margin:6px 0 0; font-size:2.4rem; letter-spacing:0.32em; text-indent:0.32em;
  font-weight:400; color:#e7f2f0; text-shadow:0 0 18px rgba(63,182,168,0.35);
}
.subtitle { margin:2px 0 22px; color:var(--muted); font-style:italic; letter-spacing:0.12em; }
.login { display:grid; gap:14px; text-align:left; }
.field { display:grid; gap:6px; }
.field label { font-size:0.72rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--muted); }
.field input {
  width:100%; padding:11px 13px; background:rgba(2,6,8,0.7);
  border:1px solid rgba(63,182,168,0.2); border-radius:8px;
  color:var(--ink); font-size:1rem; outline:none; transition:border-color .2s, box-shadow .2s;
}
.field input:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(63,182,168,0.12); }
.enter {
  margin-top:6px; padding:12px 16px; border:1px solid var(--accent); border-radius:8px;
  background:linear-gradient(180deg, rgba(63,182,168,0.18), rgba(63,182,168,0.06));
  color:#eafffb; font-family:inherit; font-size:1rem; letter-spacing:0.16em;
  text-transform:uppercase; cursor:pointer; transition:transform .1s, box-shadow .2s, background .2s;
}
.enter:hover { box-shadow:0 0 26px rgba(63,182,168,0.35); }
.enter:active { transform:translateY(1px); }
.enter:disabled { opacity:.5; cursor:wait; }
.msg { min-height:1.2em; margin:4px 0 0; font-size:0.86rem; color:var(--danger); text-align:center; }
.msg.ok { color:var(--accent); }
.whisper { margin:22px 0 6px; color:var(--muted); font-style:italic; font-size:0.86rem; opacity:.8; }
.foot { color:#3a4a4f; font-size:0.7rem; letter-spacing:0.1em; }
body.crossing .portal { animation:swallow 900ms ease-in forwards; }
@keyframes swallow { to { transform:scale(1.4); opacity:0; filter:blur(10px); } }
@media (prefers-reduced-motion: reduce) { .fog, .ring, .ring-2, .eye { animation:none; } }