/* DASE · Hallintakeskus — elokuvatyylinen kirjautumisnäkymä
   Intro etenee vaiheluokilla (login.js lisää ne peräkkäin .login-screen-elementille):
   p-point  → valopiste ilmestyy mustaan
   p-line   → piste leviää ruudun jakavaksi viivaksi
   p-burst  → viiva leimahtaa: shokkiaalto, säteet, warp, sumu, kameran tärähdys
   p-open   → kirjautumisikkuna avautuu viivasta
   skipped  → intro ohitettu / vähennetty liike: lopputila heti */

@property --dl-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }

.login-screen {
  --dl-cyan: #38bdf8;
  --dl-red: #ff4d5e;
  position: fixed; inset: 0; z-index: 50; overflow: hidden;
  display: flex; align-items: center; justify-content: center; padding: 1rem;
  background: #000;
  transition: opacity 0.6s ease, visibility 0s linear 0.6s;
}
.login-screen.hidden { display: none; }
.login-screen.is-leaving { opacity: 0; visibility: hidden; pointer-events: none; }

/* ---------- Näyttämö: taustakerrokset, jotka tärähtävät yhdessä ---------- */
.fx-stage { position: absolute; inset: 0; pointer-events: none; }
.p-burst .fx-stage { animation: dl-cam-shake 1s cubic-bezier(.2, .8, .3, 1); }

.fx-nebula { position: absolute; inset: -20%; opacity: 0; }
.p-burst .fx-nebula { animation: dl-fade-in 2.6s ease 0.1s forwards; }
.fx-nebula i { position: absolute; border-radius: 50%; filter: blur(70px); mix-blend-mode: screen; will-change: transform; }
.fx-nebula .n1 { left: 8%; top: 12%; width: 46vmax; height: 34vmax; background: radial-gradient(closest-side, rgba(14, 86, 160, 0.6), transparent); animation: dl-drift-a 26s ease-in-out infinite alternate; }
.fx-nebula .n2 { right: 2%; bottom: 6%; width: 42vmax; height: 32vmax; background: radial-gradient(closest-side, rgba(100, 56, 200, 0.46), transparent); animation: dl-drift-b 32s ease-in-out infinite alternate; }
.fx-nebula .n3 { left: 36%; top: 38%; width: 34vmax; height: 20vmax; background: radial-gradient(closest-side, rgba(20, 184, 166, 0.26), transparent); animation: dl-drift-a 38s ease-in-out infinite alternate-reverse; }

/* Valonsäteet keskeltä */
.fx-rays {
  position: absolute; left: 50%; top: 50%; width: 170vmax; height: 170vmax; margin: -85vmax 0 0 -85vmax; opacity: 0; mix-blend-mode: screen;
  background:
    repeating-conic-gradient(from 0deg, rgba(150, 215, 255, 0.16) 0 0.5deg, transparent 0.5deg 6.5deg),
    repeating-conic-gradient(from 2deg, rgba(120, 160, 255, 0.11) 0 0.35deg, transparent 0.35deg 10.5deg),
    repeating-conic-gradient(from 5deg, rgba(190, 235, 255, 0.09) 0 0.8deg, transparent 0.8deg 16deg);
  -webkit-mask: radial-gradient(circle, #000 0, rgba(0, 0, 0, 0.55) 22%, transparent 52%);
  mask: radial-gradient(circle, #000 0, rgba(0, 0, 0, 0.55) 22%, transparent 52%);
}
.p-burst .fx-rays { animation: dl-rays-in 2.4s ease-out forwards, dl-rays-spin 160s linear infinite; }

#fx-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ---------- Piste ja ruudun jakava viiva ---------- */
.fx-point {
  position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; opacity: 0; transform: scale(0); pointer-events: none;
  background: radial-gradient(circle, #fff 0 38%, rgba(160, 225, 255, 0.95) 56%, transparent 74%);
  box-shadow: 0 0 22px 9px rgba(56, 189, 248, 0.65), 0 0 90px 34px rgba(56, 189, 248, 0.28);
}
.p-point .fx-point { animation: dl-point-in 0.7s cubic-bezier(.2, .8, .2, 1) forwards, dl-point-pulse 0.4s ease-in-out 0.7s infinite alternate; }
.p-line .fx-point { animation: dl-point-out 0.5s ease-in forwards; }
.p-burst .fx-point { display: none; }

.fx-line {
  position: absolute; left: 50%; top: 50%; width: 130vw; height: 3px; margin: -1.5px 0 0 -65vw; opacity: 0; transform: scaleX(0); pointer-events: none;
  background: linear-gradient(90deg, transparent 0%, rgba(56, 189, 248, 0) 6%, rgba(125, 211, 252, 0.85) 28%, #fff 50%, rgba(125, 211, 252, 0.85) 72%, rgba(56, 189, 248, 0) 94%, transparent 100%);
}
.fx-line::before {
  content: ''; position: absolute; left: 0; right: 0; top: -70px; bottom: -70px; pointer-events: none;
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(140, 215, 255, 0.55), rgba(56, 189, 248, 0.22) 38%, transparent 72%);
}
.fx-line::after {
  content: ''; position: absolute; left: 22%; right: 22%; top: -8px; bottom: -8px; pointer-events: none;
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(235, 250, 255, 0.9), transparent 70%);
}
.p-line .fx-line { opacity: 1; animation: dl-line-spread 1.3s cubic-bezier(.75, 0, .15, 1) forwards; }
.p-burst .fx-line { opacity: 0.75; transform: none; animation: dl-line-flare 1.2s ease-out, dl-line-breathe 6s ease-in-out 1.2s infinite; }

.fx-vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at center, transparent 42%, rgba(0, 0, 0, 0.8) 100%); }
.fx-grain {
  position: absolute; inset: -50%; pointer-events: none; opacity: 0.09; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: dl-grain 0.9s steps(6) infinite;
}
.fx-bar { position: absolute; left: 0; right: 0; height: 9vh; background: #000; z-index: 3; pointer-events: none; }
.fx-bar.top { top: 0; }
.fx-bar.bottom { bottom: 0; }
.p-burst .fx-bar.top { transform: translateY(-100%); animation: dl-bar-top 1.3s cubic-bezier(.7, 0, .2, 1) 0.15s backwards; }
.p-burst .fx-bar.bottom { transform: translateY(100%); animation: dl-bar-bottom 1.3s cubic-bezier(.7, 0, .2, 1) 0.15s backwards; }
.fx-flash { position: absolute; inset: 0; opacity: 0; pointer-events: none; z-index: 4; background: radial-gradient(circle at 50% 50%, rgba(225, 246, 255, 0.95), rgba(56, 189, 248, 0.55) 28%, transparent 62%); }
.p-burst .fx-flash { animation: dl-flash-soft 1s ease-out; }

/* ---------- Ikkuna ---------- */
.login-card {
  position: relative; z-index: 5; width: min(21.5rem, 100%); max-width: none; text-align: center;
  padding: 2.4rem 1.75rem 1.9rem; border-radius: 1.1rem;
  background: linear-gradient(160deg, rgba(10, 18, 34, 0.82), rgba(4, 8, 16, 0.9));
  backdrop-filter: blur(22px) saturate(1.2); -webkit-backdrop-filter: blur(22px) saturate(1.2);
  border: 1px solid rgba(56, 189, 248, 0.22);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), 0 30px 80px rgba(0, 0, 0, 0.7), 0 0 70px rgba(56, 189, 248, 0.16), inset 0 1px 0 rgba(186, 230, 253, 0.12);
  opacity: 0; transform-style: preserve-3d; will-change: transform;
}
.p-open .login-card { animation: dl-window-open 1.5s cubic-bezier(.65, 0, .25, 1) forwards; }
/* Pyörivä valoreuna */
.login-card::before {
  content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  background: conic-gradient(from var(--dl-angle), transparent 0 62%, rgba(56, 189, 248, 0.95) 80%, #e0f7ff 87%, transparent 94%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: dl-spin 5s linear infinite;
}

/* ---------- Tunnus: DASE + Hallintakeskus ---------- */
.brand { display: inline-block; position: relative; margin-bottom: 1.6rem; }
.brand-title, .brand-sub {
  display: table; margin-left: auto; margin-right: auto; white-space: nowrap; text-transform: uppercase;
  font-family: 'Syncopate', 'Arial Black', ui-sans-serif, system-ui, sans-serif;
}
.brand-title {
  position: relative; font-weight: 700; font-size: clamp(2.7rem, 15vw, 3.7rem); line-height: 1;
  letter-spacing: 0.28em; text-indent: 0.28em; /* tasapainottaa viimeisen kirjaimen perässä olevan välin */
  background: linear-gradient(180deg, #f2fbff 0%, #a8e0ff 55%, #4cb8f2 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 18px rgba(56, 189, 248, 0.55)) drop-shadow(0 0 2px rgba(255, 255, 255, 0.5));
  opacity: 0;
}
.p-open .brand-title { animation: dl-title-in 0.9s cubic-bezier(.16, .84, .3, 1) 0.75s forwards; }
.brand-title::before, .brand-title::after {
  content: attr(data-text); position: absolute; inset: 0; pointer-events: none; opacity: 0;
  -webkit-background-clip: border-box; background-clip: border-box; background: none;
}
.brand-title::before { color: #ff2d6f; mix-blend-mode: screen; -webkit-text-fill-color: #ff2d6f; }
.brand-title::after { color: #00e5ff; mix-blend-mode: screen; -webkit-text-fill-color: #00e5ff; }
.brand-title.glitch { filter: drop-shadow(0 0 22px rgba(56, 189, 248, 0.8)); }
.brand-title.glitch::before { opacity: 0.85; animation: dl-glitch-a 0.32s steps(2, end); }
.brand-title.glitch::after { opacity: 0.85; animation: dl-glitch-b 0.32s steps(2, end); }

.brand-sub {
  margin-top: 0.7rem; font-weight: 400; letter-spacing: 0.32em; text-indent: 0.32em; line-height: 1;
  font-size: 0.8rem; /* JS sovittaa leveyden samaksi kuin DASE */
  color: #9fd8f7; text-shadow: 0 0 12px rgba(56, 189, 248, 0.55);
  clip-path: inset(0 50% 0 50%); opacity: 0;
}
.p-open .brand-sub { animation: dl-sub-in 0.75s cubic-bezier(.65, 0, .2, 1) 1s forwards; }
.brand-rule {
  display: block; height: 1px; margin-top: 0.75rem; transform-origin: center; transform: scaleX(0);
  background: linear-gradient(90deg, transparent, rgba(125, 211, 252, 0.95), transparent);
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.7);
}
.p-open .brand-rule { animation: dl-rule-in 0.6s cubic-bezier(.16, .84, .3, 1) 1.2s forwards; }

/* ---------- Lomake ---------- */
.login-form { display: flex; flex-direction: column; gap: 0.7rem; opacity: 0; }
.p-open .login-form { animation: dl-fade-up 0.5s ease 1.3s forwards; }
.login-form input {
  padding: 0.8rem 1rem; border-radius: 0.65rem; background: rgba(6, 12, 24, 0.85);
  border: 1px solid rgba(56, 189, 248, 0.22); color: var(--text); font-size: 0.95rem; text-align: center; letter-spacing: 0.12em;
  transition: border-color 0.25s, box-shadow 0.25s;
}
.login-form input::placeholder { letter-spacing: 0.18em; text-transform: uppercase; font-size: 0.7rem; color: #5c7089; }
.login-form input:focus { outline: none; border-color: var(--dl-cyan); box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.16), 0 0 24px rgba(56, 189, 248, 0.25); }
.login-form .dl-btn {
  position: relative; overflow: hidden; justify-content: center; width: 100%; padding: 0.8rem 1rem; border-radius: 0.65rem;
  letter-spacing: 0.2em; text-transform: uppercase; font-size: 0.72rem; font-weight: 700;
  color: #031321; background: linear-gradient(180deg, #8bdcff, #38bdf8); border: 1px solid rgba(186, 230, 253, 0.8);
  box-shadow: 0 0 22px rgba(56, 189, 248, 0.35); cursor: pointer; transition: transform 0.15s, box-shadow 0.25s, filter 0.25s;
}
.login-form .dl-btn:hover { box-shadow: 0 0 34px rgba(56, 189, 248, 0.6); filter: brightness(1.08); }
.login-form .dl-btn:active { transform: scale(0.98); }
.login-form .dl-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.login-form .dl-btn.is-busy { filter: saturate(0.5) brightness(0.9); cursor: progress; }
.login-form .dl-btn.is-pulse { animation: dl-btn-pulse 0.28s ease; }
.login-error {
  min-height: 1.1rem; font-size: 0.75rem; letter-spacing: 0.06em; color: #f87171; margin: 0.15rem 0 0;
  text-transform: none; transition: color 0.3s;
}
.login-error.ok { color: #6ee7b7; }
.login-error.info { color: #9fd8f7; }

/* ---------- Lopputila: intro ohitettu tai vähennetty liike (pitää olla vaihesääntöjen jälkeen) ---------- */
.skipped .fx-point, .skipped .fx-bar, .skipped .fx-flash { display: none; }
.skipped .fx-stage, .skipped .fx-nebula { animation: none; }
.skipped .fx-nebula { opacity: 1; }
.skipped .fx-rays { opacity: 0.45; animation: dl-rays-spin 160s linear infinite; }
.skipped .fx-line { opacity: 0.75; transform: none; animation: dl-line-breathe 6s ease-in-out infinite; }
.skipped .login-card, .skipped .brand-title, .skipped .brand-sub, .skipped .login-form { animation: none; opacity: 1; filter: none; }
.skipped .login-card { clip-path: none; }
.skipped .brand-title { filter: drop-shadow(0 0 18px rgba(56, 189, 248, 0.55)) drop-shadow(0 0 2px rgba(255, 255, 255, 0.5)); }
.skipped .brand-sub { clip-path: none; }
.skipped .brand-rule { animation: none; transform: none; }

/* ---------- Tilat ---------- */
.login-card.ready { animation: none; opacity: 1; clip-path: none; filter: none; }
.login-card.ready.is-error { animation: dl-shake 0.5s cubic-bezier(.36, .07, .19, .97) both; }
.login-card.is-error::before { background: conic-gradient(from var(--dl-angle), rgba(255, 77, 94, 0.3), var(--dl-red), rgba(255, 77, 94, 0.3)); }
.login-card.is-sent { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), 0 30px 80px rgba(0, 0, 0, 0.7), 0 0 90px rgba(52, 211, 153, 0.35); }
.login-card.ready.is-success { animation: dl-card-out 0.95s cubic-bezier(.6, 0, .2, 1) forwards; }
.login-screen.is-success .fx-flash { display: block; animation: dl-flash-soft 0.95s ease-out forwards; }
.login-screen.is-success .fx-bar.top { animation: none; transform: translateY(-100%); }
.login-screen.is-success .fx-bar.bottom { animation: none; transform: translateY(100%); }
.login-screen.is-success .fx-line { animation: dl-streak-burst 0.9s ease-out forwards; }
.login-screen.is-success .fx-stage { animation: dl-cam-shake 0.9s ease-out; }

/* ---------- Animaatiot ---------- */
@keyframes dl-spin { to { --dl-angle: 360deg; } }
@keyframes dl-fade-in { to { opacity: 1; } }
@keyframes dl-grain { 0% { transform: translate(0, 0); } 20% { transform: translate(-6%, 4%); } 40% { transform: translate(5%, -7%); } 60% { transform: translate(-3%, -5%); } 80% { transform: translate(7%, 3%); } 100% { transform: translate(0, 0); } }
@keyframes dl-bar-top { from { transform: translateY(0); } to { transform: translateY(-100%); } }
@keyframes dl-bar-bottom { from { transform: translateY(0); } to { transform: translateY(100%); } }
@keyframes dl-point-in { 0% { opacity: 0; transform: scale(0); } 60% { opacity: 1; transform: scale(1.5); } 100% { opacity: 1; transform: scale(1); } }
@keyframes dl-point-pulse { from { filter: brightness(1); } to { filter: brightness(1.7); } }
@keyframes dl-point-out { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(2.6); } }
@keyframes dl-line-spread { 0% { transform: scaleX(0.004) scaleY(2); } 100% { transform: scaleX(1) scaleY(1); } }
@keyframes dl-line-flare { 0% { transform: scaleY(1); filter: brightness(1); } 18% { transform: scaleY(4.2); filter: brightness(2.6); } 100% { transform: scaleY(1); filter: brightness(1); } }
@keyframes dl-line-breathe { 0%, 100% { opacity: 0.55; } 50% { opacity: 0.9; } }
@keyframes dl-streak-burst { 0% { opacity: 1; transform: scaleX(1) scaleY(1); } 100% { opacity: 0; transform: scaleX(1.4) scaleY(14); } }
@keyframes dl-rays-in { 0% { opacity: 0; } 16% { opacity: 1; } 100% { opacity: 0.45; } }
@keyframes dl-rays-spin { to { transform: rotate(360deg); } }
@keyframes dl-cam-shake {
  0% { transform: translate(0, 0) scale(1); } 8% { transform: translate(-9px, 5px) scale(1.025); } 16% { transform: translate(8px, -6px) scale(1.02); }
  26% { transform: translate(-6px, -3px) scale(1.012); } 38% { transform: translate(4px, 4px) scale(1.006); } 55% { transform: translate(-2px, 1px); } 100% { transform: translate(0, 0) scale(1); }
}
@keyframes dl-flash-soft { 0% { opacity: 0; } 9% { opacity: 0.6; } 100% { opacity: 0; } }
@keyframes dl-window-open {
  0% { opacity: 1; clip-path: inset(49.85% 0 49.85% 0 round 1.1rem); filter: brightness(3); }
  18% { opacity: 1; clip-path: inset(49.85% 0 49.85% 0 round 1.1rem); filter: brightness(2.4); }
  100% { opacity: 1; clip-path: inset(-170px -170px -170px -170px round 1.1rem); filter: brightness(1); }
}
@keyframes dl-drift-a { from { transform: translate3d(-4vw, -2vh, 0) scale(1); } to { transform: translate3d(5vw, 4vh, 0) scale(1.15); } }
@keyframes dl-drift-b { from { transform: translate3d(4vw, 3vh, 0) scale(1.1); } to { transform: translate3d(-5vw, -4vh, 0) scale(0.95); } }
@keyframes dl-card-out { 0% { opacity: 1; transform: none; filter: blur(0); } 100% { opacity: 0; transform: scale(1.35); filter: blur(14px); } }
@keyframes dl-title-in { 0% { opacity: 0; transform: scale(1.22); filter: blur(10px) drop-shadow(0 0 30px rgba(56, 189, 248, 0.9)); } 100% { opacity: 1; transform: scale(1); filter: blur(0) drop-shadow(0 0 18px rgba(56, 189, 248, 0.55)) drop-shadow(0 0 2px rgba(255, 255, 255, 0.5)); } }
@keyframes dl-sub-in { 0% { opacity: 0; clip-path: inset(0 50% 0 50%); } 100% { opacity: 1; clip-path: inset(0 0 0 0); } }
@keyframes dl-rule-in { to { transform: scaleX(1); } }
@keyframes dl-fade-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes dl-glitch-a { 0% { clip-path: inset(10% 0 62% 0); transform: translate(-5px, 0); } 50% { clip-path: inset(58% 0 12% 0); transform: translate(4px, 1px); } 100% { clip-path: inset(30% 0 40% 0); transform: translate(-2px, 0); } }
@keyframes dl-glitch-b { 0% { clip-path: inset(64% 0 8% 0); transform: translate(5px, 0); } 50% { clip-path: inset(6% 0 70% 0); transform: translate(-4px, -1px); } 100% { clip-path: inset(40% 0 30% 0); transform: translate(2px, 0); } }
@keyframes dl-shake { 10%, 90% { transform: translateX(-2px); } 20%, 80% { transform: translateX(4px); } 30%, 50%, 70% { transform: translateX(-7px); } 40%, 60% { transform: translateX(7px); } }
@keyframes dl-btn-pulse { 50% { transform: scale(0.96); box-shadow: 0 0 40px rgba(125, 211, 252, 0.9); } }

/* ---------- Kapeat näytöt ---------- */
@media (max-width: 420px) {
  .login-card { padding: 2rem 1.25rem 1.6rem; }
  .fx-bar { height: 6vh; }
}

/* ---------- Vähennetty liike: ei jatkuvia animaatioita ---------- */
@media (prefers-reduced-motion: reduce) {
  .login-screen *, .login-screen *::before, .login-screen *::after { animation: none !important; transition: none !important; }
  .fx-grain { display: none; }
  .fx-line { transform: none; }
}