/* ==========================================================================
   Élaya Rituals — styly
   ========================================================================== */

:root {
  --zlata: #FFD32E;          /* zlatá z loga (RGB 255, 211, 46) */
  --mlha: #EFE7DE;           /* barva mlhy v horní části videa */
  --stin-loga: rgba(90, 60, 10, .55);
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--mlha);
}

/* --------------------------------------------------------------------------
   Titulní stránka — video přes celou obrazovku, uprostřed kruh a logo
   -------------------------------------------------------------------------- */

.uvod {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;          /* mobil: výška bez lišty prohlížeče */
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--mlha) url("pozadi-poster.jpg") center / cover no-repeat;
}

.uvod__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Kompozice: velikost odvozená od kruhu — na šířku podle výšky okna, na výšku podle šířky */
.uvod__kompozice {
  --kruh: min(85vh, 92vw);
  position: relative;
  width: var(--kruh);
  height: var(--kruh);
  display: grid;
  place-items: center;
}

/* Světelný kruh za logem — velikost podle kompozice; 1em = 1 % průměru kruhu */
.kruh {
  --cyklus: 20s;
  --start: 2.4s;
  --obeh: cubic-bezier(.45, 0, .55, 1);   /* pozvolný rozjezd i dojezd */
  position: absolute;
  inset: 0;
  font-size: calc(var(--kruh) / 100);
  animation:
    kruh-nabeh 2.4s ease-out both,
    kruh-oblouk var(--cyklus) var(--start) infinite both;
}

/* Vrstva je o 24 % větší než kruh, aby maska neořízla záři */
.kruh__vrstva {
  position: absolute;
  inset: -12%;
}

.kruh__prstenec {
  position: absolute;
  inset: 9.6774%;                          /* 12 / 124 — prstenec přesně na obvodu kruhu */
  border-radius: 50%;
  border: max(1.5px, .26em) solid rgba(255, 255, 255, .9);
  box-shadow:
    0 0 1.3em .25em rgba(255, 255, 255, .9),
    0 0 5.5em 1em rgba(255, 255, 255, .5),
    inset 0 0 1.3em .25em rgba(255, 255, 255, .75),
    inset 0 0 5.5em 1em rgba(255, 255, 255, .3);
}

/* Úhel rozsvícené části (0–360°), měří se od vrcholu proti směru hodinových ručiček.
   Registrace přes @property umožní plynulou animaci úhlu. */
@property --uhel {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0deg;
}

/* Rozsvícená část: oblouk od vrcholu po kuličku */
.kruh__vrstva--rozsvicena {
  -webkit-mask-image: conic-gradient(transparent 0 calc(360deg - var(--uhel)), #000 0);
          mask-image: conic-gradient(transparent 0 calc(360deg - var(--uhel)), #000 0);
}

/* Pohaslá část: zbytek kruhu (ať se jasy obou vrstev nesčítají) */
.kruh__vrstva--pohasla {
  -webkit-mask-image: conic-gradient(#000 0 calc(360deg - var(--uhel)), transparent 0);
          mask-image: conic-gradient(#000 0 calc(360deg - var(--uhel)), transparent 0);
  animation: kruh-pohasinani var(--cyklus) var(--start) infinite both;
}

/* Kulička: dráha se otáčí kolem středu, kulička sedí nahoře na obvodu.
   Záře je hotový přechod (žádný filtr), otáčení počítá grafický čip. */
.kruh__drah {
  position: absolute;
  inset: 0;
  will-change: transform;
  animation: kulicka-obeh var(--cyklus) var(--start) infinite both;
}

.kruh__kulicka {
  position: absolute;
  left: 50%;
  top: 0;
  width: 9em;
  height: 9em;
  border-radius: 50%;
  background: radial-gradient(circle,
    #fff 0 10%,
    rgba(255, 255, 255, .95) 14%,
    rgba(255, 255, 255, .6) 24%,
    rgba(255, 255, 255, .22) 42%,
    rgba(255, 255, 255, 0) 70%);
  will-change: transform, opacity;
  animation: kulicka-zare var(--cyklus) var(--start) infinite both;
}

/* Cyklus kruhu (20 s), začíná po náběhu stránky:
   0–15 s      kruh pohasíná na 30 %
   15–15,4 s   nahoře se rozzáří kulička
   15,4–19,8 s kulička oběhne kruh a rozsvěcuje ho za sebou na 100 %
   19,4–20 s   kulička se rozplyne, cyklus začíná znovu */
@keyframes kruh-pohasinani {
  0%        { opacity: 1; animation-timing-function: ease-in-out; }
  75%, 100% { opacity: .3; }
}

@keyframes kruh-oblouk {
  0%, 77%   { --uhel: 0deg; animation-timing-function: var(--obeh); }
  99%, 100% { --uhel: 360deg; }
}

@keyframes kulicka-obeh {
  0%, 77%   { transform: rotate(0deg); animation-timing-function: var(--obeh); }
  99%, 100% { transform: rotate(-360deg); }   /* proti směru hodinových ručiček */
}

@keyframes kulicka-zare {
  0%, 75%   { opacity: 0; transform: translate(-50%, -50%) scale(.2); }
  77%, 97%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100%      { opacity: 0; transform: translate(-50%, -50%) scale(1.6); }
}

.uvod__logo {
  position: relative;
  margin: 0;
  width: 77%;                  /* poměr šířky loga ke kruhu jako na hlavním motivu */
  animation: logo-nabeh 2s ease-out .4s both;
}

.uvod__logo img {
  display: block;
  width: 100%;
  height: auto;
  filter:
    drop-shadow(0 1px 1px var(--stin-loga))
    drop-shadow(0 2px 6px rgba(90, 60, 10, .35));
}

@keyframes kruh-nabeh {
  from { opacity: 0; transform: scale(.96); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes logo-nabeh {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* Kdo má v systému omezené animace, uvidí vše rovnou */
@media (prefers-reduced-motion: reduce) {
  .kruh, .uvod__logo, .kruh__vrstva--pohasla, .kruh__drah, .kruh__kulicka { animation: none; }
  .kruh { --uhel: 0deg; }
  .kruh__kulicka { opacity: 0; }
}

/* --------------------------------------------------------------------------
   Na výšku (mobil): výřez videa z pravé strany a opar za logem kvůli čitelnosti
   -------------------------------------------------------------------------- */

@media (max-aspect-ratio: 1/1) {
  .uvod {
    background-image: url("pozadi-mobil-poster.jpg");
  }

  /* Logo tu leží přes trávu — jemný opar v barvě mlhy uvnitř kruhu */
  .uvod__kompozice::before {
    content: "";
    position: absolute;
    inset: -6%;
    border-radius: 50%;
    background: radial-gradient(closest-side,
      rgba(239, 231, 222, .78),
      rgba(239, 231, 222, .6) 55%,
      rgba(239, 231, 222, .25) 82%,
      rgba(239, 231, 222, 0));
  }
}