/* ==========================================================================
   Čas dňa - paleta podľa polohy slnka u návštevníka (logika: inc/cas-dna.php).
   <html data-faza="den|zlata|noc" style="--noc: 0..1; --zlata: 0..1">
   ========================================================================== */

/* Registrované vlastnosti = dajú sa plynulo animovať pri minútovom prepočte */
@property --noc { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --zlata { syntax: "<number>"; inherits: true; initial-value: 0; }

:root {
	/* Vrstvy domova (gradienty-domov.css): deň a noc sú dve samostatné verzie, prelínajú sa cez --noc.
	   Zlatá hodina oteplí dennú verziu filtrom. */
	--noc-g: clamp(0, calc((var(--noc) - 0.3) / 0.7), 1);   /* nočná verzia až za západom slnka */
	--g-zl-sepia: calc(0.3 * var(--zlata));                   /* zlatá hodina: teplý zlatistý nádych */
	--g-zl-syt: calc(1 + 0.5 * var(--zlata));
	--g-zl-odtien: calc(6deg * var(--zlata));
	/* Podstránky (gradienty.css) majú jednu verziu - noc cez filter: sýte oranžovo-ružové bloby
	   otočené do purpurovej, stmavené a zosýtené. */
	--g-jas: calc(1 - 0.36 * var(--noc));
	--g-syt: calc(1 + 1.3 * var(--noc) + 0.3 * var(--zlata));
	--g-odtien: calc(12deg * var(--zlata) - 38deg * var(--noc));
	--g-op: calc(1 - 0.12 * var(--noc));
	transition: --noc 3s ease, --zlata 3s ease;
}

body { transition: background-color 1.2s ease, color 1.2s ease; }

/* --- Zlatá hodina: pozadie o odtieň teplejšie ------------------------------ */
[data-faza="zlata"] {
	--kremova: #fbf4ec;
	--sklo: rgba(251, 244, 236, 0.6);
	--sklo-plne: rgba(251, 244, 236, 0.95);
}

/* --- Noc ------------------------------------------------------------------- */
[data-faza="noc"] {
	color-scheme: dark;
	--kremova: #17131f;                    /* hlboká slivková modrá */
	--cierna: #f5efe8;                     /* atrament: nadpisy, menu, linky */
	--text: #e2d9d0;
	--seda: #a69d96;
	--tlmena: #9b928b;
	--plocha: #231d2c;
	--linka: rgba(255, 255, 255, 0.14);
	--linka-pole: #3d3548;
	--linka-silna: #4a4156;
	--tlacidlo: #f5efe8;                   /* plné tlačidlá sa v noci otočia na svetlé */
	--tlacidlo-text: #17131f;
	--paticka: #0d0a12;
	--vodoznak-ruzova: #7a3f52;
	--vodoznak-svetly: rgba(255, 255, 255, 0.07);
	--sklo: rgba(23, 19, 31, 0.55);
	--sklo-plne: rgba(23, 19, 31, 0.95);
	--sklo-hrana: rgba(255, 255, 255, 0.08);
}
/* Woo a WP bloky čítajú vlastné premenné */
[data-faza="noc"] body {
	--wc-content-bg: #231d2c;
	--wc-secondary: #2c2536;
	--wc-secondary-text: #e2d9d0;
	--wc-subtext: #a69d96;
	--wc-form-border-color: rgba(255, 255, 255, 0.25);
	--wp--preset--color--cierna: #f5efe8;
	--wp--preset--color--text: #e2d9d0;
	--wp--preset--color--seda: #a69d96;
}

/* Šum: na tmavom pozadí by sivé zrno pôsobilo ako závoj */
[data-faza="noc"] body::before { opacity: 0.06; }

/* Čierne PNG (logo, odznaky) v noci na bielo */
[data-faza="noc"] .hlavicka__logo img,
[data-faza="noc"] .bocny-panel__hlava img,
[data-faza="noc"] .odznaky:not(.odznaky--svetle) .odznak img { filter: invert(1) brightness(2); }

/* Mapa: body na svetlo (fill ide cez --cierna), obrys na farbu pozadia */
[data-faza="noc"] .mapa__popis { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4); }

/* Prekrytie a tieň panela v tme výraznejšie */
[data-faza="noc"] .prekrytie { background: rgba(0, 0, 0, 0.55); }

@media (prefers-reduced-motion: reduce) {
	:root, body { transition: none; }
}