/* Společný základ všech variant – barvy a písmo podle Brand manuálu ÚCHP 2.0 (07-2026). */

@font-face { font-family: 'Outfit'; font-weight: 300; font-display: block; src: url('fonts/Outfit-Light.woff2') format('woff2'); }
@font-face { font-family: 'Outfit'; font-weight: 400; font-display: block; src: url('fonts/Outfit-Regular.woff2') format('woff2'); }
@font-face { font-family: 'Outfit'; font-weight: 500; font-display: block; src: url('fonts/Outfit-Medium.woff2') format('woff2'); }
@font-face { font-family: 'Outfit'; font-weight: 600; font-display: block; src: url('fonts/Outfit-SemiBold.woff2') format('woff2'); }
@font-face { font-family: 'Outfit'; font-weight: 700; font-display: block; src: url('fonts/Outfit-Bold.woff2') format('woff2'); }

:root {
  /* 2.4.2 Primární barvy – Teal */
  --ocean-deep: #01313C;  /* 900 */
  --harbor: #01495A;      /* 700 */
  --teal-600: #06576A;
  --tide: #026773;        /* 500 */
  --lagoon: #3CA6A6;      /* 400 */
  --teal-200: #D0F1EB;
  --teal-100: #EFFAF8;
  /* 2.4.3 Sekundární barvy – Sand */
  --sand-500: #D5C1AE;
  --sand-400: #E3CEBA;
  --sand-300: #EDD8C5;
  --sand: #F2E3D5;
  --sand-100: #F8EADD;
  --limestone: #FFF4EA;
  --sand-50: #FFFAF5;
  --white: #FFFFFF;
  /* 2.4.5 Barevné přechody */
  --teal-gradient: linear-gradient(90deg, var(--ocean-deep) 0%, var(--tide) 100%);
  --ivory-gradient: linear-gradient(90deg, var(--sand) 0%, var(--limestone) 100%);

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --pad: 112px; /* stejné odsazení loga i obsahu od okrajů (manuál 2.7.1) */
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; overflow: hidden; background: var(--ocean-deep); }
body {
  font-family: 'Outfit', Arial, sans-serif; /* Arial = zástupné písmo dle manuálu 2.3.2 */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* Kurzor zmizí po chvíli bez pohybu myši (TV), při prohlížení na počítači je vidět. */
.cursor-idle, .cursor-idle * { cursor: none !important; }
img { display: block; }
em { font-style: normal; }

/* Plátno 1920 × 1080 zmenšené na velikost okna (televize, iframe, notebook). */
.stage {
  position: absolute; left: 50%; top: 50%;
  width: 1920px; height: 1080px;
  transform-origin: 50% 50%;
  overflow: hidden;
  opacity: 0;
}
.is-ready .stage { opacity: 1; transition: opacity .6s; }

.slide {
  position: absolute; inset: 0;
  overflow: hidden;
  visibility: hidden;
}
.slide.is-active, .slide.is-leaving { visibility: visible; }
.slide.is-active { z-index: 2; }
.slide.is-leaving { z-index: 1; }

.is-paused * { animation-play-state: paused !important; }

/* Ukazatel průběhu – decentní, dole přes celou šířku. */
.deck-progress {
  position: absolute; z-index: 50;
  left: var(--pad); right: var(--pad); bottom: 44px;
  display: flex; gap: 10px;
  pointer-events: none;
}
.deck-progress span {
  flex: 1; height: 4px; border-radius: 4px; overflow: hidden;
  background: var(--progress-track, rgba(255, 244, 234, .18));
}
.deck-progress i { display: block; height: 100%; width: 0; background: var(--progress-fill, var(--lagoon)); border-radius: 4px; }
.deck-progress .done i { width: 100%; }
@keyframes deck-fill { from { width: 0; } to { width: 100%; } }

/* Logomark – části skládané do celku. */
.lm { display: block; overflow: visible; }
.lm-part { transform-box: fill-box; transform-origin: 50% 50%; }

.texture { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* Obecné nástupy – prvek s třídou .in nastoupí po aktivaci slajdu se zpožděním --d. */
.in { opacity: 0; }
.is-active .in { animation: var(--in, rise) 1.1s var(--ease-out) var(--d, 0s) both; }
.is-leaving .in { opacity: 1; animation: out .7s var(--ease-in-out) both; }

@keyframes rise   { from { opacity: 0; transform: translateY(48px); } to { opacity: 1; transform: none; } }
@keyframes riseL  { from { opacity: 0; transform: translateX(-64px); } to { opacity: 1; transform: none; } }
@keyframes riseR  { from { opacity: 0; transform: translateX(64px); } to { opacity: 1; transform: none; } }
@keyframes fade   { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop    { from { opacity: 0; transform: scale(.86); } to { opacity: 1; transform: none; } }
@keyframes out    { to { opacity: 0; transform: translateY(-24px); } }
@keyframes kenburns { from { transform: scale(1.04) translate(0, 0); } to { transform: scale(1.16) translate(-2%, -1.5%); } }

@media (prefers-reduced-motion: reduce) {
  .is-active .in { animation-duration: .01s; }
}