/* fx/about-timeline.css - modul about-timeline
   História na podstránke O akadémii: 2px linka sa kreslí s rolovaním, roky sa rozsvecujú.
   Rozety (.about__mark, .contact__mark) sa otáčajú s rolovaním (inline transform z JS).
   Východiskový stav (bez JS, reduced motion) = celá linka, všetky položky zapnuté, statické rozety.
   Stlmené / skryté stavy platia IBA pod .motion .timeline.tl-live (JS ho pridá až po úspešnom meraní). */

/* ---------- časová os ---------- */
.timeline{
  --tl-in:clamp(30px, 5vw, 56px); --tl-fs:1.7rem;
  position:relative; border-top:0; padding-left:var(--tl-in);
}
.timeline::before,
.timeline__fill{
  content:''; position:absolute; left:7px; top:.6rem; bottom:.6rem; width:2px; border-radius:2px;
  pointer-events:none;
}
/* východiskový stav = celá linka v gradiente (bez JS, zredukovaný pohyb, zlyhaný modul);
   sivá dráha a kreslenie výplne platia iba pod .tl-live, ktorú JS pridá až po úspešnom meraní */
.timeline::before{ background:linear-gradient(180deg, #3aaa37, #76b82a); }
.timeline.tl-live::before{ background:var(--line); }
.timeline__fill{ background:linear-gradient(180deg, #3aaa37, #76b82a); transform-origin:50% 0; }
.motion .timeline.tl-live .timeline__fill{ transform:scaleY(var(--tl, 0)); }
.timeline__fill.is-live{ will-change:transform; }

.timeline li{ position:relative; border-bottom:0; }
.timeline li::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--line);
  transform-origin:0 50%; transition:transform .9s var(--ease);
}
.timeline li::before{
  content:''; position:absolute; z-index:1; left:calc(-1 * var(--tl-in) + 2px); top:calc(1.1rem + var(--tl-fs) * .5 - 6px);
  width:12px; height:12px; border-radius:50%; background:var(--green); border:2px solid #fff;
  transition:background-color .45s var(--ease), transform .45s var(--ease);
}

/* rok v maske */
.timeline b{ font-size:var(--tl-fs); transition:color .4s var(--ease); }
.timeline .tl-ln{ display:block; overflow:hidden; padding-block:.1em; margin-block:-.1em; color:inherit; max-width:none; }
.timeline .tl-ln__in{ display:block; color:inherit; max-width:none; transition:transform .8s var(--ease), opacity .6s var(--ease); }
.timeline li > span{ transition:opacity .5s var(--ease) .1s, transform .5s var(--ease) .1s; }

/* stlmený stav - len keď JS žije a pohyb je povolený */
.motion .timeline.tl-live li:not(.is-on)::before{ background:var(--line); transform:scale(.45); }
.motion .timeline.tl-live li:not(.is-on)::after{ transform:scaleX(0); }
.motion .timeline.tl-live li:not(.is-on) b{ color:var(--muted); }
.motion .timeline.tl-live li:not(.is-on) .tl-ln__in{ transform:translate3d(0, 14%, 0); opacity:.55; }   /* rok ostáva čitateľný, len tichý */
.motion .timeline.tl-live li:not(.is-on) > span{ opacity:.6; transform:translate3d(-6px, 0, 0); }   /* posun zľava - nezužuje pravý okraj */
/* pri spätnom rolovaní bez oneskorenia textu */
.motion .timeline.tl-live li:not(.is-on) > span{ transition-delay:0s; }

@media (max-width:560px){
  .timeline{ --tl-in:30px; --tl-fs:2.4rem; }
}

/* tlač - vždy celý obsah */
@media print{
  .motion .timeline.tl-live li:not(.is-on) .tl-ln__in,
  .motion .timeline.tl-live li:not(.is-on) > span{ transform:none; opacity:1; }
  .motion .timeline.tl-live .timeline__fill{ transform:none; }
}

/* ---------- rozety ---------- */
.about__mark.is-live, .contact__mark.is-live{ will-change:transform; }
@media (max-width:900px){
  .about__mark{ width:72vw; right:-22%; bottom:-12%; }
}

/* STOMA - tá istá rozeta, statická, vpravo dole za textom (vľavo ju prekryje fotka) */
.stoma{ position:relative; isolation:isolate; overflow:hidden; }
@supports (overflow:clip){ .stoma{ overflow:clip; } }
.stoma::after{
  content:''; position:absolute; z-index:-1; right:-9%; bottom:-26%; width:min(40vw, 480px); aspect-ratio:480/473;
  background:url("../../assets/mark.png") center/contain no-repeat; opacity:.05; transform:rotate(-8deg); pointer-events:none;
}
@media (max-width:900px){ .stoma::after{ width:78vw; right:-28%; bottom:-8%; } }