/* animations.css – reveal on scroll + hero sekvence pro carousel
   Bez zásahu do layoutu. */

:root{
  --reveal-y: 18px;
  --reveal-dur: .6s;
  --reveal-ease: ease;
}

/* ===== Reveal on scroll ===== */
.reveal{
  opacity: 0;
  transform: translateY(var(--reveal-y));
  transition: opacity var(--reveal-dur) var(--reveal-ease), transform var(--reveal-dur) var(--reveal-ease);
  will-change: opacity, transform;
}
.reveal.in{
  opacity: 1;
  transform: translateY(0);
}

.reveal-pop{
  opacity: 0;
  transform: translateY(14px) scale(.985);
  transition: opacity var(--reveal-dur) var(--reveal-ease), transform var(--reveal-dur) var(--reveal-ease);
  will-change: opacity, transform;
}
.reveal-pop.in{ opacity:1; transform: translateY(0) scale(1); }

/* Stagger – děti postupně */
.reveal-stagger > *{
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--reveal-dur) var(--reveal-ease), transform var(--reveal-dur) var(--reveal-ease);
}
.reveal-stagger.in > *{ opacity:1; transform: translateY(0); }
.reveal-stagger.in > *:nth-child(1){ transition-delay:.00s; }
.reveal-stagger.in > *:nth-child(2){ transition-delay:.12s; }
.reveal-stagger.in > *:nth-child(3){ transition-delay:.24s; }
.reveal-stagger.in > *:nth-child(4){ transition-delay:.36s; }
.reveal-stagger.in > *:nth-child(5){ transition-delay:.48s; }

/* 3 fotky – "zamíchání" */
.reveal.mix-1{ transform: translateX(-22px) translateY(10px); }
.reveal.mix-2{ transform: translateY(22px); }
.reveal.mix-3{ transform: translateX(22px) translateY(10px); }
.reveal.mix-1.in, .reveal.mix-2.in, .reveal.mix-3.in{ transform: translateX(0) translateY(0); }

/* ===== Hero/carousel sekvence (zoom-out + postupné texty) ===== */
#myCarousel .hero-slide{
  position: relative;
  overflow: hidden;
}
#myCarousel .hero-bg{
  transform: scale(1.06);
  transition: transform 0.9s ease;
  will-change: transform;
}
#myCarousel .hero-slide.hero-anim .hero-bg{
  transform: scale(1.0);
}

/* prvky, co mají nabíhat (badge, nadpis, popis, buttony) */
#myCarousel .hero-in{
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .32s ease, transform .45s ease;
  will-change: opacity, transform;
}
#myCarousel .hero-slide.hero-step-1 .hero-in-1,
#myCarousel .hero-slide.hero-step-2 .hero-in-2,
#myCarousel .hero-slide.hero-step-3 .hero-in-3{
  opacity: 1;
  transform: translateY(0);
}

/* aby se nic "nepropadalo" při kliknutí */
#myCarousel .carousel-caption{ pointer-events: none; }

/* rámeček (např. caption-box) – neukazovat hned, až od step-1 */
#myCarousel .hero-frame{
  opacity: 0;
  transform: translateY(10px);
  transition: opacity  .32s ease, transform .45s ease;
  will-change: opacity, transform;
}
#myCarousel .hero-slide.hero-step-1 .hero-frame{
  opacity: 1;
  transform: translateY(0);
}


/* ===== Hero/carousel sekvence – Rezidence (#rezCarousel) =====
   Cíl: stejná posloupnost jako na úvodu (rámeček -> nadpis -> text),
   ALE když JS neběží, texty zůstanou viditelné. */

#rezCarousel .hero-slide{
  position: relative;
  overflow: hidden;
}
#rezCarousel .hero-bg{
  transform: scale(1.06);
  transition: transform 0.9s ease;
  will-change: transform;
}
#rezCarousel .hero-slide.hero-anim .hero-bg{
  transform: scale(1.0);
}

/* Defaultně (bez JS) je vše vidět */
#rezCarousel .hero-in{
  opacity: 1;
  transform: none;
  transition: opacity .32s ease, transform .45s ease;
  will-change: opacity, transform;
}
#rezCarousel .hero-frame{
  opacity: 1;
  transform: none;
  transition: opacity  .32s ease, transform .45s ease;
  will-change: opacity, transform;
}

/* Jakmile začne animace (JS přidá hero-anim), schováme a budeme odkrývat po krocích */
#rezCarousel .hero-slide.hero-anim .hero-in{
  opacity: 0;
  transform: translateY(14px);
}
#rezCarousel .hero-slide.hero-anim .hero-frame{
  opacity: 0;
  transform: translateY(10px);
}

#rezCarousel .hero-slide.hero-step-1 .hero-frame{
  opacity: 1;
  transform: translateY(0);
}
#rezCarousel .hero-slide.hero-step-1 .hero-in-1,
#rezCarousel .hero-slide.hero-step-2 .hero-in-2,
#rezCarousel .hero-slide.hero-step-3 .hero-in-3{
  opacity: 1;
  transform: translateY(0);
}

/* zachovat klikatelnost tlačítek */
#rezCarousel .carousel-caption{ pointer-events: none; }


/* ===== TopText pruh: pruh nejdřív, pak text (bez změny designu) =====
   Důležité: žádný "flash" – pruh se od začátku překryje krycí vrstvou
   (jen když běží JS, tj. html.js). Pak teprve při scrollu odkryjeme. */

/* Základní "připravený" stav aplikujeme už jen podle html.js,
   aby pruh nebyl nejdřív vidět a teprve pak animoval. */
html.js .topText{ position:relative; overflow:hidden; }
/* Skryj obsah pruhu hned od začátku (jen když běží JS) */
html.js .topText > *{ opacity:0; transform: translateX(18px); }
html.js .topText::after{
  content:"";
  position:absolute; inset:0;
  /* Krycí vrstva – odkrývá pruh zleva. Pozadí stránky bývá bílé. */
  background:#fff;
  pointer-events:none;
  transform: translateX(0);
}
/* Animace spustíme až při .pruh-in */
html.js .topText.pruh-in::after{ animation: pruh-uncover .35s ease forwards; }
html.js .topText.pruh-in > *{ animation: pruh-text-in .55s ease forwards; animation-delay: .35s; }

/* Failsafe: kdyby JS observer selhal, po chvíli vše ukaž */
html.js .topText.pruh-force-show::after{ display:none; }
html.js .topText.pruh-force-show > *{ opacity:1; transform:none; }
@keyframes pruh-uncover{ from{ transform: translateX(0); } to{ transform: translateX(101%); } }
@keyframes pruh-text-in{ from{ opacity:0; transform: translateX(18px);} to{ opacity:1; transform: translateX(0);} }