/* ==========================================================================
   Animácie a mikrointerakcie.
   Všetko bránené triedou html.js (bez JS je obsah viditeľný) a médiom
   prefers-reduced-motion (používateľ si môže pohyb vypnúť v systéme).
   ========================================================================== */

/* ---- scroll-reveal: varianty smeru cez data-reveal ---- */
html.js .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity var(--duration-reveal) var(--ease-out),
    transform var(--duration-reveal) var(--ease-out);
  transition-delay: calc(var(--stagger-i, 0) * 90ms);
}

/* :not(.reveal--visible) je nutné — inak by tieto smerové varianty mali
   vyššiu špecificitu než .reveal--visible a prvok by sa nikdy neusadil */
html.js .reveal[data-reveal="left"]:not(.reveal--visible)  { transform: translateX(-36px); }
html.js .reveal[data-reveal="right"]:not(.reveal--visible) { transform: translateX(36px); }
html.js .reveal[data-reveal="scale"]:not(.reveal--visible) { transform: scale(0.92); }

html.js .reveal--visible {
  opacity: 1;
  transform: none;
}

/* ručné oneskorenie pre malé skupiny (hero) */
html.js .reveal[data-reveal-delay="1"] { transition-delay: 120ms; }
html.js .reveal[data-reveal-delay="2"] { transition-delay: 240ms; }
html.js .reveal[data-reveal-delay="3"] { transition-delay: 360ms; }

/* ---- hero: pomalý Ken Burns zoom + jemný scrim pohyb ---- */
@media (prefers-reduced-motion: no-preference) {
  html.js .hero__media img {
    animation: hero-kenburns 22s var(--ease-out) forwards;
  }

  @keyframes hero-kenburns {
    from { transform: scale(1.1); }
    to   { transform: scale(1); }
  }
}

/* ---- indikátor skrolovania v hero ---- */
.scroll-cue {
  position: absolute;
  left: 50%;
  /* nad stuhou, ktorá zospodu prekrýva hero */
  bottom: calc(var(--ribbon-overlap) + 1rem);
  translate: -50% 0;
  z-index: 1;
  width: 28px;
  height: 46px;
  border: 2px solid rgb(255 253 249 / 0.7);
  border-radius: 999px;
  pointer-events: none;
}

.scroll-cue::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 8px;
  translate: -50% 0;
  width: 4px;
  height: 9px;
  border-radius: 2px;
  background: rgb(255 253 249 / 0.9);
}

@media (prefers-reduced-motion: no-preference) {
  .scroll-cue::before {
    animation: cue-drop 2.2s ease-in-out infinite;
  }

  @keyframes cue-drop {
    0%   { transform: translateY(0); opacity: 1; }
    55%  { transform: translateY(14px); opacity: 0; }
    56%  { transform: translateY(0); opacity: 0; }
    100% { opacity: 1; }
  }
}

/* ikona myši nedáva zmysel na dotykových zariadeniach ani na nízkom okne */
@media (max-height: 560px), (max-width: 767px), (pointer: coarse) {
  .scroll-cue { display: none; }
}

/* ---- bežiaci pás (stuha medzi sekciami) ----
   Pás nie je "nalepený" nad švom sekcií — on sám JE ten šev: presahuje obe
   susedné sekcie (--ribbon-overlap), takže ich rovné vodorovné hrany zostanú
   schované pod ním a jediný viditeľný prechod je šikmý. Do strán presahuje
   okno (--ribbon-bleed), aby naklonené konce nikdy nezasahovali do záberu.
   min-height drží podmienku výška ≥ overlap + rise aj na širokých monitoroch,
   kde náklon zdvihne konce vyššie než je vlastná výška pásu. */
.marquee {
  position: relative;
  z-index: 2;
  display: grid;
  align-items: center;
  width: calc(100% + 2 * var(--ribbon-bleed));
  min-height: calc(2 * var(--ribbon-rise) + 0.5rem);
  margin-inline: calc(var(--ribbon-bleed) * -1);
  margin-block: calc(var(--ribbon-overlap) * -1);
  /* Bežiaci text treba orezať len do strán. Keby sme použili overflow: hidden,
     orezanie prebehne v kompozitore, ktorý naklonenú hranu nevyhladzuje —
     spodok pásu potom vyzeral "ohryzený" (schodíky). Vodorovné orezanie
     necháva zvislé hrany na samotnom pozadí, ktoré sa vykresľuje s
     antialiasingom; záporné hodnoty hore a dole nechávajú prejsť tieň. */
  clip-path: inset(-4rem 0);
  /* Zvislý gradient dáva stuhe hrúbku — horná hrana je prisvetlená, spodná
     zatienená, akoby látka ležala na stránke. Aj "prešitie" po dĺžke stuhy je
     len mäkkým pásom v gradiente: ostrá 1px linka sa pri náklone a neceločíselnom
     pomere pixelov trhá na bodkovanú čiaru, plynulý prechod nie. */
  background:
    linear-gradient(
      to bottom,
      #9c3140 0%,
      #8b2634 6%,
      #97303f 13%,
      #8b2634 20%,
      var(--color-burgundy) 45%,
      #66181f 80%,
      #71202a 87%,
      #61161f 94%,
      #55121a 100%);
  color: var(--color-cream);
  rotate: var(--ribbon-tilt);
  padding-block: 0.85rem;
  user-select: none;
  /* vrhnutý tieň pod stuhu (a náznak nad ňu) — leží na sekciách */
  box-shadow:
    0 12px 26px -12px rgb(43 26 22 / 0.45),
    0 -8px 20px -14px rgb(43 26 22 / 0.35);
}

.marquee__track {
  display: flex;
  gap: 2.5rem;
  width: max-content;
  font-family: var(--font-heading);
  font-size: var(--text-md);
  white-space: nowrap;
}

.marquee__track span {
  display: inline-flex;
  align-items: center;
  gap: 2.5rem;
}

.marquee__track .dot {
  font-size: 0.7em;
  opacity: 0.7;
}

@media (prefers-reduced-motion: no-preference) {
  .marquee__track {
    animation: marquee-scroll 28s linear infinite;
  }

  @keyframes marquee-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }
}

/* ---- para nad šálkou (motív z loga) ---- */
.steam-cup {
  display: inline-block;
  vertical-align: -0.35em;
  width: 1.5em;
  height: 1.5em;
  margin-right: 0.35em;
  color: var(--color-burgundy);
}

@media (prefers-reduced-motion: no-preference) {
  .steam-cup .wisp {
    animation: steam-rise 3s ease-in-out infinite;
    transform-origin: bottom center;
  }

  .steam-cup .wisp:nth-child(2) { animation-delay: 0.9s; }
  .steam-cup .wisp:nth-child(3) { animation-delay: 1.8s; }

  @keyframes steam-rise {
    0%   { opacity: 0; transform: translateY(3px) scaleY(0.85); }
    35%  { opacity: 0.9; }
    100% { opacity: 0; transform: translateY(-4px) scaleY(1.1); }
  }
}

/* ---- pulzujúca bodka "práve otvorené" ---- */
.open-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-size: var(--text-sm);
  font-weight: 700;
}

.open-badge__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: none;
}

.open-badge--open .open-badge__dot { background: #2e7d46; }
.open-badge--closed .open-badge__dot { background: #a33; }

@media (prefers-reduced-motion: no-preference) {
  .open-badge--open .open-badge__dot {
    animation: dot-pulse 2s ease-out infinite;
  }

  @keyframes dot-pulse {
    0%   { box-shadow: 0 0 0 0 rgb(46 125 70 / 0.45); }
    70%  { box-shadow: 0 0 0 8px rgb(46 125 70 / 0); }
    100% { box-shadow: 0 0 0 0 rgb(46 125 70 / 0); }
  }
}

/* ---- lightbox galérie ----
   Dialóg pokrýva celý viewport a je len prázdna plocha; obrázok centruje
   .lightbox__stage. Vďaka tomu klik kdekoľvek mimo fotky zatvára a fotka
   sedí presne v strede bez ohľadu na jej pomer strán. */
.lightbox {
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  overflow: hidden;
  overscroll-behavior: contain;
  color: var(--color-cream);
}

.lightbox::backdrop {
  background: rgb(20 12 9 / 0.86);
  backdrop-filter: blur(4px);
}

.lightbox__stage {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  padding: clamp(0.75rem, 3vw, 2rem);
  cursor: zoom-out;
}

.lightbox__figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  max-width: 100%;
  cursor: default;
}

.lightbox__figure img {
  display: block;
  width: auto;
  height: auto;
  max-width: min(92vw, 76rem);
  max-height: calc(100vh - 9rem);
  max-height: calc(100svh - 9rem);
  object-fit: contain;
  border-radius: var(--radius-md);
  box-shadow: 0 24px 80px rgb(0 0 0 / 0.5);
  cursor: default;
}

.lightbox__caption {
  max-width: min(92vw, 60rem);
  text-align: center;
  color: rgb(247 241 230 / 0.85);
  font-size: var(--text-sm);
  text-wrap: balance;
}

.lightbox__counter {
  display: block;
  margin-top: 0.2rem;
  color: rgb(247 241 230 / 0.5);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
}

/* ---- ovládacie tlačidlá lightboxu ---- */
.lightbox__close,
.lightbox__nav {
  position: absolute;
  border: 0;
  border-radius: 50%;
  background: rgb(247 241 230 / 0.14);
  color: var(--color-cream);
  display: grid;
  place-items: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--duration-quick) ease, transform var(--duration-quick) ease;
}

.lightbox__close {
  top: clamp(0.6rem, 2vw, 1.1rem);
  right: clamp(0.6rem, 2vw, 1.1rem);
  width: 48px;
  height: 48px;
  font-size: 1.5rem;
  line-height: 1;
  z-index: 2;
}

.lightbox__close:hover,
.lightbox__close:focus-visible {
  background: rgb(247 241 230 / 0.3);
  transform: rotate(90deg);
}

.lightbox__nav {
  top: 50%;
  width: 52px;
  height: 52px;
  transform: translateY(-50%);
}

.lightbox__nav--prev { left: clamp(0.4rem, 2vw, 1.5rem); }
.lightbox__nav--next { right: clamp(0.4rem, 2vw, 1.5rem); }

.lightbox__nav:hover,
.lightbox__nav:focus-visible {
  background: rgb(247 241 230 / 0.3);
}

.lightbox__nav--prev:hover,
.lightbox__nav--prev:focus-visible { transform: translateY(-50%) translateX(-3px); }

.lightbox__nav--next:hover,
.lightbox__nav--next:focus-visible { transform: translateY(-50%) translateX(3px); }

/* jediná fotka v galérii → šípky nemá zmysel zobrazovať */
.lightbox[data-single] .lightbox__nav { display: none; }

@media (max-width: 34rem) {
  .lightbox__nav {
    width: 44px;
    height: 44px;
  }

  .lightbox__figure img {
    max-height: calc(100vh - 8rem);
    max-height: calc(100svh - 8rem);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .lightbox[open] .lightbox__figure {
    animation: lightbox-in 260ms var(--ease-out);
  }

  .lightbox[open]::backdrop {
    animation: backdrop-in 260ms ease;
  }

  /* prechod medzi fotkami pri listovaní */
  .lightbox[data-swapping] .lightbox__figure img,
  .lightbox[data-swapping] .lightbox__caption {
    opacity: 0;
  }

  .lightbox__figure img,
  .lightbox__caption {
    transition: opacity 140ms ease;
  }

  @keyframes lightbox-in {
    from { opacity: 0; transform: scale(0.94) translateY(10px); }
    to   { opacity: 1; transform: none; }
  }

  @keyframes backdrop-in {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
}

/* galéria — kurzor a jemný overlay pri hoveri */
.gallery-grid figure {
  position: relative;
  cursor: zoom-in;
}

.gallery-grid figure::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgb(59 42 34 / 0.35), transparent 45%);
  opacity: 0;
  transition: opacity 300ms ease;
  pointer-events: none;
}

.gallery-grid figure:hover::after,
.gallery-grid figure:focus-within::after {
  opacity: 1;
}

/* ---- hero: postupné objavenie po slovách ---- */
html.js .word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
}

html.js .word__inner {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 720ms var(--ease-out);
  transition-delay: calc(var(--word-i, 0) * 70ms + 200ms);
}

html.js .hero__content.words-in .word__inner {
  transform: translateY(0);
}

/* ---- animovaná linka pri nadpisoch sekcií (kicker) ---- */
.section-kicker {
  position: relative;
  padding-left: 0;
}

.section-kicker::after {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 0;
  height: 2px;
  margin-left: 0.75rem;
  background: linear-gradient(to right, var(--color-gold), transparent);
  transition: width 700ms var(--ease-out) 250ms;
}

.reveal--visible .section-kicker::after,
.section-heading.reveal--visible .section-kicker::after {
  width: 3.25rem;
}

/* ---- plávajúce dekoratívne prvky (káva + vinič) ---- */
.floaty {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.floaty__item {
  position: absolute;
  color: var(--color-gold);
  opacity: 0.14;
}

.floaty__item svg {
  width: 100%;
  height: 100%;
}

.floaty__item--burgundy { color: var(--color-burgundy); opacity: 0.1; }

/* aby obsah bol nad dekorom */
.section > *:not(.floaty) { position: relative; z-index: 1; }

@media (prefers-reduced-motion: no-preference) {
  .floaty__item {
    animation: drift var(--drift-dur, 16s) ease-in-out infinite;
    animation-delay: var(--drift-delay, 0s);
  }

  @keyframes drift {
    0%   { transform: translate(0, 0) rotate(var(--rot, 0deg)); }
    50%  { transform: translate(var(--dx, 12px), var(--dy, -16px)) rotate(calc(var(--rot, 0deg) + 8deg)); }
    100% { transform: translate(0, 0) rotate(var(--rot, 0deg)); }
  }
}

/* ---- tlač ----
   Pri tlači sa neskroluje, takže IntersectionObserver by nikdy nespustil
   odhalenie a na papieri by ostali prázdne miesta — najmä pri tlači menu.
   Preto je pri tlači všetko rovno viditeľné. */
@media print {
  html.js .reveal,
  html.js .reveal[data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  html.js .word__inner {
    transform: none !important;
    transition: none !important;
  }

  .marquee,
  .scroll-cue,
  .floaty {
    display: none !important;
  }
}

/* ---- vypnutie všetkého pohybu pri prefers-reduced-motion ---- */
@media (prefers-reduced-motion: reduce) {
  html.js .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  html.js .word__inner {
    transform: none;
    transition: none;
  }

  .marquee {
    rotate: none;
    margin-block: 0;
    width: 100%;
    margin-inline: 0;
  }

  .scroll-cue { bottom: 1.6rem; }

  .floaty { display: none; }
}