/* ============================================================
   scroll-anims.css — anime.js helpers for jirivodicka.cz
   Adds: progress bar, mask helpers (word reveal, bow stroke),
         FOUC opacity prep, film-develop on project images,
         concert border draw, CTA wedge clip-path,
         news pulse dot, magnetic button helpers.
   No layout changes — purely additive visual reveals.
   ============================================================ */

/* Top scroll progress — drawn like a string under tension */
.ix-progress {
  position: fixed; top: 0; left: 0;
  height: 2px; width: 0;
  background: linear-gradient(90deg, #ff6b35 0%, #ff8c5a 100%);
  z-index: 1100;
  box-shadow: 0 0 12px rgba(255, 107, 53, 0.55);
  pointer-events: none;
}

/* Word splitting — for mask-style title reveals. JS controls hiding. */
.word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  line-height: 1.05;
}
.word > .word-i {
  display: inline-block;
  will-change: transform, opacity;
}

/* Bow-stroke reveal on hero name lines — clip-path sweep L→R */
.ix-hero__name-line .stroke {
  display: inline-block;
  will-change: clip-path;
}
body:not(.anim-loaded) .ix-hero__name-line .stroke {
  clip-path: none;
}

/* Stat tick under counter (used if hero meta has .num counters) */
.ix-hero__meta-item .num { position: relative; }
.ix-hero__meta-item .num::after {
  content: '';
  position: absolute; left: 0; bottom: -8px;
  width: var(--tw, 0px); height: 1px;
  background: #ff6b35;
}

/* Concert vertical border drawn by JS — replaces any existing left border */
.ix-concert__inner {
  border-left: none !important;
  position: relative;
}
.ix-concert__inner::before {
  content: '';
  position: absolute; top: 0; left: 0;
  width: 3px; height: 0;
  background: #ff6b35;
  transition: height 1.2s cubic-bezier(.16, 1, .3, 1);
}
.ix-concert__inner.is-drawn::before { height: 100%; }

/* Project cards: film-develop filter (grayscale → color) */
.ix-pcard__img {
  filter: grayscale(0.85) brightness(0.92);
  transform: scale(1.06);
  transition: filter 1.6s cubic-bezier(.16, 1, .3, 1),
              transform .8s cubic-bezier(.16, 1, .3, 1);
}
.ix-pcard.is-developed .ix-pcard__img {
  filter: grayscale(0) brightness(1);
  transform: scale(1.0);
}
.ix-pcard:hover .ix-pcard__img {
  transform: scale(1.04);
  filter: grayscale(0) brightness(1.04);
}

/* News date — subtle pulse dot */
.ix-ncard__date { position: relative; padding-left: 16px; }
.ix-ncard__date::before {
  content: '';
  position: absolute; left: 0; top: 50%;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #ff6b35;
  transform: translateY(-50%) scale(0);
  transition: transform .5s cubic-bezier(.34, 1.56, .64, 1);
}
.ix-ncard.is-revealed .ix-ncard__date::before { transform: translateY(-50%) scale(1); }

/* CTA — orange wedge enters via clip-path; covered initially.
   Capture original clip-path via CSS variable so we don't hardcode. */
.ix-cta {
  --cta-clip: polygon(0 8%, 100% 0, 100% 100%, 0 100%);
  clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
  transition: clip-path 1.4s cubic-bezier(.16, 1, .3, 1);
}
.ix-cta.is-open { clip-path: var(--cta-clip); }

/* Magnetic buttons — JS-driven; ensure transform plays nice */
.ix-btn {
  transition: transform .25s cubic-bezier(.16, 1, .3, 1),
              color .4s, border-color .4s, background .4s, box-shadow .4s;
  will-change: transform;
}

/* FOUC prep — hide elements that JS will reveal to avoid flash of styled content.
   Titles split by JS into .word > .word-i (their opacity stays 1; reveal via mask). */
body.anim-loaded .ix-bio__lead,
body.anim-loaded .ix-bio__text,
body.anim-loaded .ix-bio__photo,
body.anim-loaded .ix-album__tag,
body.anim-loaded .ix-album__desc,
body.anim-loaded .ix-album__player,
body.anim-loaded .ix-pcard,
body.anim-loaded .ix-ncard,
body.anim-loaded .ix-section-head .ix-tag,
body.anim-loaded .ix-section-foot,
body.anim-loaded .ix-concert__inner,
body.anim-loaded .ix-cta__text,
body.anim-loaded .ix-cta__inner > .ix-btn { opacity: 0; }

/* ============ BIO page (o-mne.php) — additive layer ============
   Coexists with existing data-reveal/.bio-visible CSS animations.
   We only add things the existing CSS doesn't do. */

/* Highlights — subtle hover lift, soft tick under each number after countup */
.bio-highlights__item {
  transition: transform .4s cubic-bezier(.16, 1, .3, 1);
  cursor: default;
}
.bio-highlights__item:hover { transform: translateY(-4px); }
.bio-highlights__number { position: relative; display: block; }
.bio-highlights__number::after {
  content: '';
  position: absolute; left: 50%; bottom: -6px;
  transform: translateX(-50%);
  width: var(--tw, 0px); height: 1px;
  background: rgba(255, 107, 53, 0.6);
  transition: width .6s cubic-bezier(.65, 0, .35, 1);
}

/* Bio content photo — gentle reveal of the orange offset border */
.bio-content__photo {
  will-change: transform;
}

/* CTA — extend existing CSS clip-path with JS-driven wedge animation
   (existing CSS already has clip-path, so we reuse the same shape via opening state) */
body.anim-loaded .bio-cta__title { /* word-i mask handles reveal */ }

/* Magnetic button hint */
.bio-btn { will-change: transform; }

/* ============ PROJEKTY (projekty.php) ============ */
body.anim-loaded .prj-card__img img {
  filter: grayscale(0.85) brightness(0.92);
  transform: scale(1.04);
  transition: filter 1.6s cubic-bezier(.16, 1, .3, 1),
              transform 1.2s cubic-bezier(.16, 1, .3, 1);
}
.prj-card.is-developed .prj-card__img img {
  filter: grayscale(0) brightness(1);
  transform: scale(1.0);
}
.prj-card.is-developed:hover .prj-card__img img {
  filter: grayscale(0) brightness(1.04);
  transform: scale(1.08);
}

.prj-bar__count {
  font-variant-numeric: tabular-nums;
}
.prj-btn { will-change: transform; }

/* ============ NAHRÁVKY (nahravky.php) ============ */
/* Hero cover — vinyl-arrival: initial offset + rotation, JS animates back */
body.anim-loaded .rec-hero__cover {
  opacity: 0;
  transform: translateX(-30px) rotate(-4deg) scale(0.94);
}
.rec-hero__year {
  font-variant-numeric: tabular-nums;
}

/* Album card cover — film-develop on reveal */
body.anim-loaded .rec-album__cover img {
  filter: grayscale(0.7) brightness(0.94);
  transform: scale(1.03);
  transition: filter 1.4s cubic-bezier(.16, 1, .3, 1),
              transform .6s cubic-bezier(.16, 1, .3, 1);
}
.rec-album.is-developed .rec-album__cover img {
  filter: grayscale(0) brightness(1);
  transform: scale(1.0);
}
.rec-album__cover:hover img { transform: scale(1.0) !important; }

/* Video thumbs — gentle desaturate → color */
body.anim-loaded .rec-vid__thumb img {
  filter: grayscale(0.6) brightness(0.95);
  transition: filter 1.2s cubic-bezier(.16, 1, .3, 1), transform .7s cubic-bezier(.16, 1, .3, 1);
}
.rec-vid.is-developed .rec-vid__thumb img {
  filter: grayscale(0) brightness(1);
}

.rec-btn { will-change: transform; }

/* ============ KONCERTY (koncerty.php) ============ */
/* Sidebar stats — tabular nums for counter */
.con-sidebar__stats dd { font-variant-numeric: tabular-nums; }

/* Highlight day — stamp arrival */
body.anim-loaded .con-highlight__day {
  display: block;
  opacity: 0;
  transform: scale(0.55);
}

/* Event row — gentle slide-in (additive over data-reveal) */
.con-event { will-change: transform, opacity; }
.con-btn, .con-sidebar__btn { will-change: transform; }

/* ============ AKTUALITY (aktuality.php) ============ */
body.anim-loaded .akt-card__img img {
  filter: grayscale(0.85) brightness(0.92);
  transform: scale(1.04);
  transition: filter 1.6s cubic-bezier(.16, 1, .3, 1),
              transform 1.2s cubic-bezier(.16, 1, .3, 1);
}
.akt-card.is-developed .akt-card__img img {
  filter: grayscale(0) brightness(1);
  transform: scale(1.0);
}
.akt-card.is-developed:hover .akt-card__img img {
  filter: grayscale(0) brightness(1.04);
  transform: scale(1.08);
}

.akt-bar__count, .akt-card__views {
  font-variant-numeric: tabular-nums;
}
.akt-btn { will-change: transform; }

/* ============ GALERIE (galerie.php) ============ */
.gal-hero__count { font-variant-numeric: tabular-nums; }

/* Hero photo subtle ken-burns */
body.anim-loaded .gal-hero__photo {
  transform: scale(1.08);
  transition: transform 2.4s cubic-bezier(.16, 1, .3, 1);
}
body.anim-loaded .gal-hero__photo.is-settled {
  transform: scale(1.02);
}

/* Gallery items — stagger blur+fade reveal (more cinematic than basic CSS).
   Need same specificity as the hidden state (which uses body.anim-loaded). */
body.anim-loaded .gal-item {
  opacity: 0;
  filter: blur(8px);
  transform: scale(1.04);
  transition: opacity 1s cubic-bezier(.16, 1, .3, 1),
              filter 1s cubic-bezier(.16, 1, .3, 1),
              transform 1s cubic-bezier(.16, 1, .3, 1);
}
body.anim-loaded .gal-item.is-revealed {
  opacity: 1;
  filter: blur(0);
  transform: scale(1);
}

.gal-cta__btn, .gal-press__btn { will-change: transform; }

/* ============ PODPOROVATELE (podporovatele.php) ============ */
.sup-progress__num { font-variant-numeric: tabular-nums; }

/* Hero photo settle */
body.anim-loaded .sup-hero__photo {
  transform: scale(1.08);
  transition: transform 2.4s cubic-bezier(.16, 1, .3, 1);
}
body.anim-loaded .sup-hero__photo.is-settled {
  transform: scale(1.02);
}

/* Progress bar — JS animates width from 0 to final value */
.sup-progress__fill {
  transition: width 1.6s cubic-bezier(.16, 1, .3, 1);
}

.sup-cta__btn, .sup-amounts__btn, .sup-form__submit { will-change: transform; }

/* ============ KONTAKT (kontakt.php) ============ */
.kt-cta__btn, .kt-form__submit, .kt-mgmt__link { will-change: transform; }

/* Reduced-motion honor */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
  .ix-progress { display: none; }
}