/* ===== digital studion — Loopia static build ===== */
@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');
:root {
  --background: oklch(0.22 0.035 245);
  --background-deep: oklch(0.13 0.025 245);
  --background-glow: oklch(0.34 0.055 235);
  --gradient-bg: radial-gradient(ellipse 90% 70% at 50% 40%, var(--background-glow) 0%, var(--background) 45%, var(--background-deep) 100%);

  --foreground: oklch(0.96 0.01 240);
  --muted-foreground: oklch(0.7 0.025 240);
  --primary: oklch(0.78 0.08 230);
  --border: rgba(255,255,255,0.10);
  --card: oklch(0.26 0.035 245);

  --status-rec: oklch(0.65 0.24 25);
  --status-boot: oklch(0.65 0.005 240);
  --status-idle: oklch(0.72 0.16 150);

  --font-mono: "JetBrains Mono", "Fira Code", ui-monospace, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  color: var(--foreground);
  background: var(--gradient-bg);
  background-attachment: fixed;
  font-family: var(--font-mono);
  overflow-x: hidden;
}
a { color: inherit; }

.scene {
  position: relative;
  min-height: 100vh;
  width: 100%;
  overflow: hidden;
}
.matrix-canvas {
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none; opacity: 0.5;
}
.glitch { position: fixed; inset: 0; z-index: 10; pointer-events: none; }
.glitch .scanlines {
  position: absolute; inset: 0; opacity: 0.08; mix-blend-mode: overlay;
  background-image: repeating-linear-gradient(to bottom, rgba(255,255,255,0.6) 0px, rgba(255,255,255,0.6) 1px, transparent 1px, transparent 3px);
}
.glitch .scanline {
  position: absolute; left: 0; right: 0; height: 6rem;
  background: linear-gradient(to bottom, transparent 0%, rgba(140,200,240,0.06) 50%, transparent 100%);
  animation: scanline 14.04s linear infinite;
}
.glitch .flash {
  position: absolute; inset: 0; mix-blend-mode: screen;
  background: repeating-linear-gradient(to bottom, rgba(140,200,240,0.15) 0px, rgba(255,80,80,0.08) 2px, transparent 4px, transparent 8px);
  animation: glitch-flash 10s linear infinite;
}
.glitch .vignette {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,0.55) 100%);
}

.shell {
  position: relative; z-index: 20;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 100vh; padding: 3rem 1.5rem;
}
.stack { display: flex; flex-direction: column; align-items: center; gap: 3rem; }

.logo-wrap { position: relative; }
.logo-wrap img { width: min(80vw, 640px); height: auto; user-select: none; -webkit-user-drag: none; }
.logo-pulse { animation: logo-pulse 49s ease-in-out infinite; }

/* Clock */
.clock { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; text-align: center; }
.clock-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center; column-gap: 2.5rem; row-gap: 0.75rem; }
.clock-cell { display: flex; flex-direction: column; align-items: center; }
.clock-digits {
  font-family: "Share Tech Mono", monospace !important;
  font-variant-numeric: tabular-nums slashed-zero;
  font-feature-settings: "tnum" 1, "zero" 1;
  letter-spacing: 0.08em; font-weight: 400;
  font-size: 1.5rem; color: var(--foreground);
}
@media (min-width: 768px) { .clock-digits { font-size: 2.55rem; } }
.clock-label {
  font-family: Consolas, monospace;
  margin-top: 0.25rem; font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.35em; color: var(--muted-foreground);
}
@media (min-width: 768px) { .clock-label { font-size: 12px; } }
.clock-home .clock-digits { color: color-mix(in oklab, var(--primary) 85%, black); }
.clock-date {
  font-family: Consolas, monospace;
  margin-top: 0.25rem; font-size: 11px; color: var(--muted-foreground);
  text-transform: capitalize; letter-spacing: 0.05em;
}
@media (min-width: 768px) { .clock-date { font-size: 12px; } }

/* Status pill */
.status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.95rem;
  height: 48px;
  padding: 0 1.35rem;
  border: 1px solid;
  border-radius: 9999px;
  backdrop-filter: blur(4px);
  background: rgba(0,0,0,0.35);
  transform: scale(1.1) /*translateY(5px)*/ !important;
}
.status-pill .label {
  display: inline-block;
  font-family: Consolas, monospace;
  font-size: 0.875rem; letter-spacing: 0.25em; font-weight: 600;
  transform: /*translateY(5px)*/ scaleX(1.08) scaleY(0.92);
  will-change: transform;
}
/*@media (min-width: 768px) { .status-pill .label { font-size: 1rem; } }*/

.status-icon { width: 1.25rem; height: 1.25rem; overflow: visible; }
.status-icon-boot { width: 1.5625rem; height: 1.5625rem; overflow: visible; }

/* Footer / contact */
.bottom-bar {
  position: absolute; bottom: 3rem; left: 0; right: 0;
  display: flex; flex-direction: column; align-items: center; gap: 0.75rem;
}
.contact-link {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.3em;
  color: var(--muted-foreground); text-decoration: none; transition: color .2s;
}
.contact-link:hover { color: var(--foreground); }
.footer-mini {
  position: absolute; bottom: 1rem; left: 0; right: 0; text-align: center;
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.3em;
  color: rgba(180,200,220,0.45);
}

/* Lang toggle */
.lang { position: absolute; top: 0.75rem; right: 0.75rem; z-index: 30; display: inline-flex; gap: 0.4rem; }
.lang button {
  background: rgba(0,0,0,0.35); border: 1px solid var(--border); border-radius: 9999px;
  padding: 4px 6px; cursor: pointer; line-height: 0;
}
.lang button.active { border-color: var(--primary); }
.lang img { width: 22px; height: 14px; display: block; border-radius: 2px; }

/* Animations */
@keyframes logo-pulse {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 30px oklch(0.6 0.12 230 / 0.30)); }
  50% { transform: scale(1.025); filter: drop-shadow(0 0 60px oklch(0.7 0.15 220 / 0.55)); }
}
@keyframes sun-rays-grow { 0%,100%{transform:scale(1);opacity:.85} 50%{transform:scale(1.25);opacity:1} }
@keyframes sun-core-pulse { 0%,100%{opacity:1} 50%{opacity:.85} }
.sun-rays { animation: sun-rays-grow 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: 16px 16px; }
.sun-core { animation: sun-core-pulse 2.4s ease-in-out infinite; transform-box: fill-box; }

@keyframes rec-dot-pulse { 0%,100%{transform:scale(1);opacity:.9} 50%{transform:scale(1.1);opacity:1} }
.rec-dot { width: 1em; height: 1em; transform-origin: center; animation: rec-dot-pulse 2.4s ease-in-out infinite; border-radius: 9999px; display: inline-block; }
.rec-dot-slot { display: inline-flex; align-items: center; justify-content: center; width: 1em; height: 1em; }

@keyframes rack-1-cycle { 0%{opacity:0} 5%{opacity:1} 85%{opacity:1} 100%{opacity:0} }
@keyframes rack-2-cycle { 0%,5%{opacity:0} 10%{opacity:1} 85%{opacity:1} 100%{opacity:0} }
@keyframes rack-3-cycle { 0%,10%{opacity:0} 16%{opacity:1} 85%{opacity:1} 100%{opacity:0} }
.rack { opacity: 0; }
.rack-1 { animation: rack-1-cycle 7s linear infinite; }
.rack-2 { animation: rack-2-cycle 7s linear infinite; }
.rack-3 { animation: rack-3-cycle 7s linear infinite; }

@keyframes cable-1 { 0%,18.5%{stroke-dashoffset:1;opacity:1} 23.5%,85%{stroke-dashoffset:0;opacity:1} 100%{stroke-dashoffset:0;opacity:0} }
@keyframes cable-2 { 0%,23.5%{stroke-dashoffset:1;opacity:1} 28.5%,85%{stroke-dashoffset:0;opacity:1} 100%{stroke-dashoffset:0;opacity:0} }
@keyframes cable-3 { 0%,33.5%{stroke-dashoffset:1;opacity:1} 38.5%,85%{stroke-dashoffset:0;opacity:1} 100%{stroke-dashoffset:0;opacity:0} }
@keyframes cable-4 { 0%,38.5%{stroke-dashoffset:1;opacity:1} 43.5%,85%{stroke-dashoffset:0;opacity:1} 100%{stroke-dashoffset:0;opacity:0} }
@keyframes cable-5 { 0%,28.5%{stroke-dashoffset:1;opacity:1} 33.5%,85%{stroke-dashoffset:0;opacity:1} 100%{stroke-dashoffset:0;opacity:0} }
.cable { stroke-dasharray: 1; stroke-dashoffset: 1; vector-effect: non-scaling-stroke; }
.cable-1 { animation: cable-1 7s linear infinite; }
.cable-2 { animation: cable-2 7s linear infinite; }
.cable-3 { animation: cable-3 7s linear infinite; }
.cable-4 { animation: cable-4 7s linear infinite; }
.cable-5 { animation: cable-5 7s linear infinite; }

@keyframes glitch-flash {
  0%,92%,100% { opacity: 0; transform: translateX(0); }
  93% { opacity: .6; transform: translateX(-3px) skewX(-2deg); }
  94% { opacity: .3; transform: translateX(4px) skewX(3deg); }
  95% { opacity: .7; transform: translateX(-2px); }
  96% { opacity: 0; }
}
@keyframes scanline {
  0%   { transform: translateY(100vh); filter: brightness(1); }
  59%  { filter: brightness(1); }
  60%  { filter: brightness(3.4); }
  61%  { filter: brightness(1); }
  100% { transform: translateY(-100%); filter: brightness(1); }
}
@keyframes fade-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(); } }
.fade-up { animation: fade-up .8s ease-out both; }

/* TEST */
.clock-label,
.clock-date,
.status-pill .label {
  font-family: Consolas, monospace !important;
  transform: translateY(0px) scaleX(1.08) scaleY(1.00);
  transform-origin: center;
  display: inline-block;
  color: oklch(0.7 0.025 240)
  /* color: red !important; */
}

.contact-link,
.footer-mini {
  font-family: Consolas, monospace;
  transform: scaleX(1.08) scaleY(1.00);
  transform-origin: center;
  display: inline-block;
}


/* ===== Settings page ===== */
.settings-main { min-height: 100vh; padding: 4rem 1.5rem; position: relative; z-index: 20; }
.settings-wrap { max-width: 36rem; margin: 0 auto; }
.settings-back { font-size: 12px; text-transform: uppercase; letter-spacing: 0.35em; color: var(--muted-foreground); text-decoration: none; }
.settings-back:hover { color: var(--foreground); }
.settings-h1 { margin-top: 1.5rem; font-size: 1.875rem; font-weight: 600; }
.settings-sub { margin-top: 0.5rem; font-size: 0.875rem; color: var(--muted-foreground); }
.settings-section { margin-top: 2rem; display: grid; gap: 1rem; }
.field { display: flex; flex-direction: column; gap: 0.25rem; }
.field-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.3em; color: var(--muted-foreground); }
.field input[type="text"], .field input[type="password"], .field select {
  border-radius: 6px; border: 1px solid var(--border); background: rgba(38,55,75,0.5);
  padding: 0.5rem 0.75rem; font-size: 0.875rem; color: var(--foreground); outline: none;
  font-family: var(--font-mono);
}
.field input:focus, .field select:focus { border-color: var(--primary); }
.checkbox-row { margin-top: 0.5rem; display: inline-flex; align-items: center; gap: 0.75rem; font-size: 0.875rem; }
.h2 { font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.3em; color: var(--muted-foreground); }
.radios { margin-top: 0.75rem; display: flex; gap: 0.75rem; flex-wrap: wrap; }
.radios label { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; }
.btn-primary {
  margin-top: 2.5rem; border-radius: 6px; background: var(--primary); color: oklch(0.15 0.03 245);
  padding: 0.5rem 1.25rem; font-size: 0.875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.25em;
  border: none; cursor: pointer; font-family: var(--font-mono);
}
.btn-primary:hover { opacity: 0.9; }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
.saved-msg { margin-left: 0.75rem; font-size: 12px; color: var(--muted-foreground); }
.notice { padding: 0.75rem 1rem; border-radius: 6px; background: rgba(255,80,80,0.12); border: 1px solid rgba(255,80,80,0.4); color: #ffb4b4; font-size: 0.875rem; }

/* Login overlay */
.login-card { max-width: 22rem; margin: 6rem auto; padding: 2rem; background: var(--card); border: 1px solid var(--border); border-radius: 0.75rem; }
.login-card h1 { margin: 0 0 1rem; font-size: 1.25rem; }
.login-card .field { margin-bottom: 1rem; }