/* indexStyle.css — single background logo processed directly (no extra overlay)

   Keepers: animated logo in body::before, darkening via gradient+filter,

   UI above background (landing/panel/brand). */



/* reset */

html, body {

  height: 100%;

  margin: 0;

  padding: 0;

  box-sizing: border-box;

  /* remove global scrollbars — landing becomes the contained scroll area */

  overflow: hidden;

}

* { box-sizing: inherit; }



/* -------------------------

   central variables

   ------------------------- */

:root{

  /* general UI colors */

  --bg: #0f1110;

  --text-title: #ECE8E4;

  --text-field: #DCD7D2;



  /* panel */

  --panel-radius: 20px;

  --panel-width: 500px;

  --panel-height: 388px;

  --panel-bg: rgba(48,44,44,0.5);

  --panel-top-highlight: rgba(255,255,255,0.03);

  --glass-border: rgba(255,255,255,0.035);



  /* inputs/button */

  --enabled-textfield: #3C3938;

  --enabled-stroke: rgba(0,0,0,0.10);

  --accent-start: #2a7a59;

  --accent-end: #11402b;

  --button-text: #F0ECE7;



  /* background logo (single source) */

  --bg-image-url: url("../src/img/logo.png"); /* <-- jediný obrázek */

  --bg-base-size: 120vmax;           /* big fixed box for the animated layer */

  --bg-rotation-duration: 360s;

  --bg-saturation-duration: 10s;

  --bg-saturation-min: 0;

  --bg-saturation-max: 60;



  /* how dark the logo should be (0 = transparent gradient, 1 = full black gradient) */

  --bg-darkness: 0.875;     /* 0.0 - 0.9 : zvyšte pro tmavší výsledek */

  --bg-brightness: 0.66;   /* <1 tmavší, 1 = normal, >1 světlejší */

  --bg-saturate: 100;     /* 0 = grayscale, 1 = normal, >1 more vivid */



  /* logo visual anchor */

  --bg-pos-y: 38%;         /* vertikální pozice při background-position */

}



/* allow smooth interpolation of transform properties */

@property --bg-rot {

  syntax: "<angle>";

  inherits: false;

  initial-value: 0deg;

}

@property --bg-scale {

  syntax: "<number>";

  inherits: false;

  initial-value: 1;

}



/* ---------------------------

   Basic page body

   --------------------------- */

body{

  margin: 0;

  background-color: #000;

  font-family: "Andika", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;

  color: var(--text-field);

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  min-height: 100vh;

  overflow-x: hidden;

}



/* ---------------------------

   Animated background logo (single image), processed in-place

   - uses a gradient as the first background layer to *multiply* darkness,

     and the image as the second layer. Filters then tune brightness/contrast/saturation.

   - sits behind UI via negative z-index.

   --------------------------- */

body::before {

  content: "";

  position: fixed;

  left: 50%;

  top: 50%;

  width: var(--bg-base-size);

  height: var(--bg-base-size);



  /* position & dynamic transform */

  transform: translate(-50%, -50%) rotate(var(--bg-rot)) scale(var(--bg-scale));

  transform-origin: 50% 50%;



  /* first layer: gradient darkener; second layer: actual logo image */

  background-image:

    linear-gradient(rgba(0,0,0,var(--bg-darkness)), rgba(0,0,0,var(--bg-darkness))),

    var(--bg-image-url);

  background-repeat: no-repeat;

  background-position: center calc(var(--bg-pos-y));

  background-size: contain;

  background-blend-mode: multiply; /* guarantees darker mood even on different browsers */



  /* send behind content but still composited on GPU */

  z-index: -2;

  pointer-events: none;

  will-change: transform, filter;



  /* filter tuning (brightness/saturation/contrast) */

  filter: brightness(var(--bg-brightness)) saturate(var(--bg-saturate)) contrast(.98);



  /* animations: rotate, saturation wander, and scale wander */

  animation:

    bg-rotate-var var(--bg-rotation-duration) linear infinite,

    bg-saturate var(--bg-saturation-duration) ease-in-out infinite,

    bg-size-wander 45s cubic-bezier(.25,.46,.45,.94) infinite;



  backface-visibility: hidden;

  -webkit-backface-visibility: hidden;

  transform-style: preserve-3d;

  -webkit-transform-style: preserve-3d;

}



/* rotate the background smoothly by updating --bg-rot */

@keyframes bg-rotate-var{

  from { --bg-rot: 0deg; }

  to   { --bg-rot: 360deg; }

}



/* saturate animation for subtle life */

@keyframes bg-saturate {

  0%   { filter: brightness(var(--bg-brightness)) saturate(var(--bg-saturation-min)) contrast(.98); }

  50%  { filter: brightness(var(--bg-brightness)) saturate(var(--bg-saturation-max)) contrast(.98); }

  100% { filter: brightness(var(--bg-brightness)) saturate(var(--bg-saturation-min)) contrast(.98); }

}



/* scale wander (use --bg-scale property) */

@keyframes bg-size-wander {

  0%   { --bg-scale: 0.91; }

  20%  { --bg-scale: 1.035; }

  50%  { --bg-scale: 0.98; }

  80%  { --bg-scale: 1.01; }

  90%  { --bg-scale: 0.95; }

  100% { --bg-scale: 0.91; }

}



/* Accessibility: prefers reduced motion -> remove heavy animations */

@media (prefers-reduced-motion: reduce){

  body::before {

    animation: none !important;

    transform: translate(-50%, -50%) rotate(0) scale(1);

    filter: brightness(0.9) saturate(1) contrast(.98);

  }

}



/* ---------------------------

   Page layout & UI

   --------------------------- */

.landing {

  position: relative;

  display: flex;

  align-items: center;

  justify-content: center;

  min-height: 100vh;      /* viewport height centering */

  width: 100%;

  padding: 0 20px;

  overflow: auto;         /* allow inner scrolling only when content taller than viewport */

  -webkit-overflow-scrolling: touch;

  z-index: 2;             /* above background */

}



/* brand band at top */

.brand-wrap {

  position: fixed;                /* removed from flow — won't cause scroll */

  top: 18px;                      /* choose distance from top */

  left: 50%;

  transform: translateX(-50%);

  display: flex;

  align-items: center;

  justify-content: center;

  height: 84px;                   /* keep reasonable height so it doesn't overlap too much */

  padding: 8px 16px;              /* touch-safe padding */

  z-index: 60;                    /* above UI */

  pointer-events: none;           /* click-through */

  user-select: none;

  backdrop-filter: none;          /* keep it visually simple; panel has own glass */

}



.brand {

  font-size: 64pt;

  line-height: 1;

  letter-spacing: 0.05em;

  font-weight: 100;

  margin: 0;

  color: var(--text-title);

  text-align: center;

  white-space: nowrap;            /* prevents the name from wrapping and changing layout */

}



/* If the viewport is very short (mobile keyboard etc.), allow the panel to sit lower */

@media (max-height: 640px) {

  .landing {

    align-items: flex-start;          /* stack from top */

    padding-top: calc(18px + 84px + 12px); /* push below fixed brand: top + brand height + gap */

  }

  .brand { font-size: 40px; }         /* shrink brand on short screens */

}



/* panel wrapper */

.login-wrap {

  width: var(--panel-width);

  height: var(--panel-height);

  display: flex;

  align-items: flex-start;

  justify-content: center;

  z-index: 6; /* above bg */

  pointer-events: auto;

}



/* panel surface */

.login-wrap > .panel {

  position: relative;

  width: 100%;

  height: 100%;

  padding: 0;

  border-radius: var(--panel-radius);

  background: rgba(48,45,44,0.25);

  border: 1px solid #000;

  box-shadow: 0 12px 28px rgba(8,8,8,0.28);

  backdrop-filter: blur(2px) saturate(2);

  color: var(--text-field);

  overflow: visible;

}



/* title */

.login-wrap > .panel .panel-title {

  position: absolute;

  top: 20px;

  left: 0;

  width: 100%;

  height: 26px;

  display: flex;

  align-items: center;

  justify-content: center;

  margin: 0;

  font-size: 32px;

  line-height: 26px;

  font-weight: 100;

  color: var(--text-title);

  pointer-events: none;

}



/* inputs */

.login-wrap > .panel input[type="text"],

.login-wrap > .panel input[type="password"],

.login-wrap > .panel input.first,

.login-wrap > .panel input.second {

  position: absolute;

  left: 50%;

  transform: translateX(-50%);

  width: 300px;

  height: 34px;

  padding: 6px 10px;

  border-radius: 5px;

  box-sizing: border-box;

  background: var(--enabled-textfield);

  color: var(--text-field);

  border: 1px solid var(--enabled-stroke);

  outline: none;

  font-size: 14px;

}



/* precise placement */

.login-wrap > .panel input[type="text"]:nth-of-type(1),

.login-wrap > .panel input.first {

  top: 100px;

}

.login-wrap > .panel input[type="password"]:nth-of-type(1),

.login-wrap > .panel input.second,

.login-wrap > .panel input[type="text"]:nth-of-type(2) {

  top: 160px;

}



/* button */

.login-wrap > .panel .btn {

  position: absolute;

  top: 220px;

  left: 50%;

  transform: translateX(-50%);

  width: 230px;

  height: 40px;

  border-radius: 15px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  padding: 0 14px;

  box-sizing: border-box;

  cursor: pointer;

  background: #0D2C1E;

  color: var(--button-text);

  border: none;

  font-weight: 100;

  text-align: center;

  font-size: 16px;

}



.login-wrap > .panel input::placeholder { color: rgba(255,255,255,0.18); }

.login-wrap > .panel input:focus { box-shadow: 0 0 0 6px rgba(13,44,30,0.06); }



.login-wrap > .panel .btn:hover {

  transform: translateX(-50%) translateY(-2px);

  box-shadow: 0 14px 28px rgba(8,8,8,0.32);

}



/* responsive fallback */

@media (max-width: 640px) {

  .login-wrap { width: min(92%, var(--panel-width)); height: auto; margin: 6vh auto 0; }

  .login-wrap > .panel { height: auto; border-radius: 18px; padding-bottom: 18px; }

  .login-wrap > .panel .panel-title { position: relative; top: 0; height: auto; padding-top: 14px; }

  .login-wrap > .panel input[type="text"],

  .login-wrap > .panel input[type="password"],

  .login-wrap > .panel input.first,

  .login-wrap > .panel input.second {

    position: relative;

    left: auto;

    transform: none;

    width: 100%;

    margin: 8px 0;

  }

  .login-wrap > .panel .btn { position: relative; top: 0; width: 70%; min-width: 180px; margin: 14px auto 0; }

  /* mobile: reduce background size a bit so it doesn't dominate */

  :root { --bg-base-size: 200vmax; }

}



/* override for any floating logout or similar shot-through elements */

#logoutBtn {

  pointer-events: auto !important;

  cursor: pointer !important;

  z-index: 9999 !important;

  position: relative !important;

}



/* Ensure brand container sits above page background */

.brand-wrap { position: relative; z-index: 60; pointer-events: auto; }









.app-content { padding: 20px; color: #eee; }

  .home-menu { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:18px; }

  .tool-btn { background:#0b6; color:#052; border:none; padding:10px 16px; border-radius:8px; cursor:pointer; }

  .panel { background: rgba(0,0,0,0.45); padding:14px; border-radius:10px; box-shadow: 0 6px 18px rgba(0,0,0,0.5); }

  .form-row { margin-bottom:10px; display:flex; flex-direction:column; gap:6px; }

  .input { padding:8px 10px; border-radius:6px; background:#121212; border:1px solid #333; color:#fff }

  .muted { color:#bbb; font-size:.9rem }