/* ==========================================================================
   Plné konto — animační vrstva (v6)
   Platí jen s třídami, které nastaví animations.js, a jen když uživatel nemá
   zapnuté „omezit pohyb“. Jediná velká animace je scéna konta;
   jinde jen jemné odhalení a napočítání čísel. Animuje se jen transform a opacity.
   ========================================================================== */

/* první snímky po zapnutí vrstvy: bez přechodů, ať se nic „nerozjíždí“ při načtení */
.anim-init *, .anim-init *::before, .anim-init *::after { transition: none !important; }

@media (prefers-reduced-motion: no-preference) {

  /* ---------- Jemné odhalení ---------- */
  /* cílový stav se v klíčových snímcích neuvádí → prvek skončí ve svém vlastním stylu (např. zvednutá aktivní cena) */
  @keyframes pk-reveal { from { opacity: 0; transform: translateY(26px); } }
  @supports (animation-timeline: view()) {
    /* odhalení proběhne během prvních ~200 px vjezdu – i vysoké bloky jsou hned plně čitelné */
    .anim-on [data-reveal] { animation: pk-reveal linear both; animation-timeline: view(); animation-range: entry 0% entry 200px; }
  }
  @supports not (animation-timeline: view()) {
    .anim-on.io [data-reveal] { transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
    .anim-on.io [data-reveal]:not(.is-in) { opacity: 0; transform: translateY(26px); }
  }

  /* zvýraznění v hlavním nadpisu se „podtrhne“ zleva (pruh je vlastní vrstva, mění se jen transform) */
  @keyframes pk-mark { from { transform: scaleX(0); } to { transform: none; } }
  .anim-on .hero h1 em { background: none; position: relative; z-index: 0; }
  .anim-on .hero h1 em::before { content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: 68%; bottom: 0; background: rgba(111, 211, 165, 0.45); transform-origin: 0 50%; animation: pk-mark 0.9s var(--ease) 0.25s both; }

  /* ======================================================================
     Scéna konta (v5): tmavý zaoblený panel se pod herem připne a oživne.
     3D mřížka je hlavní, malá karta s textem sedí vlevo dole.
     panel přijede → připnutí → 5 kroků → odepnutí
     ====================================================================== */
  .story-on .story__track { position: relative; }                 /* výšku nastaví JS: ~80 vh na krok */
  .story-on .story__stage {
    position: sticky; top: calc(var(--header-h) + var(--stage-gap));
    height: calc(100vh - var(--header-h) - 2 * var(--stage-gap));
    height: calc(100svh - var(--header-h) - 2 * var(--stage-gap));
    padding: 0;
  }
  .story-on .story__figure { display: none; }

  /* scéna přes celý panel */
  .story-on .story__visual { display: block; position: absolute; inset: 0; z-index: 1; }
  .story__canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.6s ease; }
  .story-3d .story__canvas { opacity: 1; }
  /* plochý náhled, dokud se nenačte 3D (na stejném místě jako statický obrázek) */
  .story-on .konto-svg--poster { position: absolute; left: var(--pad); top: var(--pad); width: calc(100% - 2 * var(--pad)); height: auto; transition: opacity 0.6s ease; }
  .story-3d .konto-svg--poster { opacity: 0; }

  .story__rows, .story__labels { position: absolute; inset: 0; pointer-events: none; }
  .story__rows span {
    position: absolute; left: 0; top: 0; transform-origin: 100% 50%;
    font: 600 14px/1 var(--font-body); font-variant-numeric: tabular-nums; letter-spacing: 0.01em;
    color: var(--pk-on-dark); white-space: nowrap; opacity: 0;
  }
  .story-label {
    position: absolute; left: 0; top: 0; white-space: nowrap; font-size: 0.74rem;
    color: var(--pk-dark); background: var(--pk-accent); border-radius: 999px; padding: 0.24rem 0.7rem;
    opacity: 0; will-change: transform, opacity; box-shadow: 0 2px 10px rgba(2, 20, 18, 0.35);
  }
  .story-label b { font-weight: 700; }

  /* Karta s textem: malá, vlevo dole (mobil: dole přes celou šířku).
     Je to jeden panel s plným neprůhledným pozadím (výška = nejdelší krok);
     při přechodu kroků se prolíná jen text uvnitř, pozadí zůstává → nic neprosvítá. */
  .story-on .story__text {
    position: absolute; z-index: 2; left: 10px; right: 10px; bottom: 10px;
    background: #124340; border: 1px solid rgba(245, 242, 234, 0.14); border-radius: 18px;
    padding: 0.85rem 1rem 0.75rem;
    box-shadow: 0 -14px 34px 6px rgba(14, 58, 56, 0.7);     /* měkký přechod do scény, žádná ostrá hrana */
  }
  .story-on .story__stack { display: grid; grid-template-columns: 1fr; gap: 0; }
  .story-on .story-step {
    grid-area: 1 / 1; align-self: start; position: relative;
    opacity: 0; transform: translateY(8px);
    transition: opacity 0.2s ease, transform 0.3s ease;
    pointer-events: none;
  }
  .story-on .story-step.is-active {
    opacity: 1; transform: none; pointer-events: auto;
    transition: opacity 0.4s ease 0.18s, transform 0.55s var(--ease) 0.12s;
  }
  .story-on .story-step.was-active:not(.is-active) { transform: translateY(-8px); }
  .story-on .story-kicker { font-size: 0.62rem; margin-bottom: 0.35rem; }
  .story-on .story-title { font-size: 1.12rem; margin-bottom: 0.25rem; }
  .story-on .story-step p:not(.story-kicker) { font-size: 0.86rem; line-height: 1.45; }

  /* navigace kroků (jen desktop) */
  .story__rail { position: absolute; z-index: 2; right: 12px; top: 50%; transform: translateY(-50%); flex-direction: column; gap: 2px; padding: 6px 2px; border-radius: 999px; background: rgba(14, 58, 56, 0.72); }
  .story__rail button { width: 24px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
  .story__rail button::before { content: ""; width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--pk-on-dark); opacity: 0.6; transition: transform 0.3s ease, opacity 0.3s ease; }
  .story__rail button.is-done::before { background: var(--pk-on-dark); }
  .story__rail button[aria-current="step"]::before { background: var(--pk-accent); border-color: var(--pk-accent); opacity: 1; transform: scale(1.3); }
  .story__rail button:focus-visible { outline: 2px solid var(--pk-accent); outline-offset: 0; border-radius: 50%; }

  @media (min-width: 900px) {
    .story-on .story__text { left: 26px; right: auto; bottom: 26px; width: min(400px, calc(100% - 52px)); padding: 1.1rem 1.3rem 1.05rem; border-radius: 20px; }
    .story-on .story-kicker { font-size: 0.66rem; margin-bottom: 0.45rem; }
    .story-on .story-title { font-size: 1.36rem; margin-bottom: 0.35rem; }
    .story-on .story-step p:not(.story-kicker) { font-size: 0.9rem; }
    .story-on .story__rail { display: flex; }
    .story-label { font-size: 0.82rem; padding: 0.3rem 0.85rem; }
  }

  /* ======================================================================
     Drobné pohyby v obsahu: spustí se jednou, když prvek [data-in] vjede do obrazu
     (animations.js přidá .is-in). Bez této vrstvy je všechno rovnou ve finálním stavu.
     ====================================================================== */
  .anim-on [data-in] .sched__row,
  .anim-on [data-in] .phone__row, .anim-on [data-in] .phone__file,
  .anim-on [data-in] .ledger tr, .anim-on [data-in] .ledger__sum,
  .anim-on [data-in] .todo-list li,
  .anim-on [data-in] .sumcard__nums div {
    transition: opacity 0.55s var(--ease), transform 0.65s var(--ease);
  }
  .anim-on [data-in]:not(.is-in) .sched__row,
  .anim-on [data-in]:not(.is-in) .phone__row, .anim-on [data-in]:not(.is-in) .phone__file,
  .anim-on [data-in]:not(.is-in) .ledger tr, .anim-on [data-in]:not(.is-in) .ledger__sum,
  .anim-on [data-in]:not(.is-in) .todo-list li,
  .anim-on [data-in]:not(.is-in) .sumcard__nums div { opacity: 0; transform: translateY(10px); }
  .anim-on [data-in] :is(.sched__row, .phone__row, .phone__file, .ledger tr, .todo-list li, .sumcard__nums div):nth-child(2) { transition-delay: 0.08s; }
  .anim-on [data-in] :is(.sched__row, .phone__row, .phone__file, .ledger tr, .todo-list li, .sumcard__nums div):nth-child(3) { transition-delay: 0.16s; }
  .anim-on [data-in] :is(.sched__row, .phone__row, .phone__file, .ledger tr, .todo-list li):nth-child(4) { transition-delay: 0.24s; }
  .anim-on [data-in] .ledger tr:nth-child(5) { transition-delay: 0.32s; }
  .anim-on [data-in] .ledger tr:nth-child(6) { transition-delay: 0.4s; }
  .anim-on [data-in] .ledger__sum { transition-delay: 0.5s; }

  /* mezery ve výpisu se „rozsvítí“ až po načtení řádků */
  .anim-on [data-in] .flag { transition: opacity 0.4s ease 0.7s, transform 0.5s var(--ease) 0.7s; }
  .anim-on [data-in]:not(.is-in) .flag { opacity: 0; transform: scale(0.8); }

  /* zaškrtávání návodu jedno po druhém */
  .anim-on [data-in] .check { transition: transform 0.45s cubic-bezier(0.3, 1.5, 0.5, 1); }
  .anim-on [data-in]:not(.is-in) .check { transform: scale(0); }
  .anim-on [data-in] .todo-list li:nth-child(1) .check { transition-delay: 0.45s; }
  .anim-on [data-in] .todo-list li:nth-child(2) .check { transition-delay: 0.75s; }
  .anim-on [data-in] .todo-list li:nth-child(3) .check { transition-delay: 1.05s; }

  .anim-on [data-in] .sched__slots i { transition: transform 0.4s var(--ease) 0.35s, opacity 0.4s ease 0.35s; }
  .anim-on [data-in]:not(.is-in) .sched__slots i { opacity: 0; transform: scale(0.6); }

  .anim-on [data-in] .sumcard__bar i { transition: transform 1.1s var(--ease) 0.35s; }
  .anim-on [data-in]:not(.is-in) .sumcard__bar i { transform: scaleX(0); }

  /* ======================================================================
     Proč to řešit.
     1) Horní část: z chybějícího roku se postupně rozsvítí tři důchody a nakonec se vše
        označí jako zkontrolované. Třídy .is-on / .is-done přepíná animations.js:
        .why--pin  = počítač, sekce se připne a stav řídí posun stránky,
        .why--anim = stav hlídá JS (bez .why--pin se každá karta rozsvítí, když ji uvidíte).
        Bez těchto tříd platí hotový stav ze styles.css.
     2) Osa podle věku se nepřipíná: plní se mátovou podle posunu stránky a u každého věku
        se podtrhnou klíčová slova.
     Mění se jen opacity, transform a barva textu.
     ====================================================================== */
  @media screen {
    /* výchozí stav animované verze: světlé karty, „Ovlivní…“, prázdný dílek */
    .why--anim .pen, .why--anim .pen h3, .why--anim .pen__stat, .why--anim .pen .pen__status { transition: color 0.45s ease, border-color 0.45s ease; }
    .why--anim .pen::before { transition: opacity 0.45s ease; }
    .why--anim .pen:not(.is-on) { color: var(--pk-text); }
    .why--anim .pen:not(.is-on)::before { opacity: 0; }
    .why--anim .pen:not(.is-on) h3 { color: var(--pk-dark); }
    .why--anim .pen:not(.is-on) .pen__stat { color: var(--pk-muted); }
    .why--anim .pen:not(.is-on) .pen__status { color: var(--pk-dark); border-color: var(--border); }
    /* stavový řádek: oba texty leží přes sebe a prolínají se */
    .why--anim .pen__st, .why--anim .yr__label { display: grid; }
    .why--anim .pen__st > span, .why--anim .yr__label > span { grid-area: 1 / 1; display: block; transition: opacity 0.35s ease, visibility 0.35s; }
    .why--anim .pen:not(.is-done) .pen__st .on, .why--anim .pen.is-done .pen__st .off,
    .why--anim .yr:not(.is-done) .yr__label .on, .why--anim .yr.is-done .yr__label .off { opacity: 0; visibility: hidden; }
    .why--anim .pen__dot::after { transition: opacity 0.3s ease, transform 0.45s cubic-bezier(0.3, 1.5, 0.5, 1); }
    .why--anim .pen:not(.is-done) .pen__dot::after { opacity: 0; transform: scale(0.5); }
    /* chybějící dílek přiletí shora */
    .why--anim .yr__tiles i.g::after { transition: transform 0.55s cubic-bezier(0.2, 0.8, 0.3, 1.2), opacity 0.3s ease; }
    .why--anim .yr:not(.is-done) .yr__tiles i.g::after { opacity: 0; transform: translateY(-34px) rotate(-10deg); }
    /* čáry k důchodům: rozsvítí se a krátce „tečou“ */
    @keyframes why-dash { to { stroke-dashoffset: -24; } }
    .why--anim .wires path { transition: opacity 0.4s ease; }
    .why--anim .wires path:not(.is-on) { opacity: 0.22; }
    .why--anim .wires path.is-on { animation: why-dash 0.8s linear 3; }
    /* připnutí pod hlavičku na dobu, než stránka ujede ~110 % výšky okna */
    .why--pin .why__track { height: calc(100vh - var(--header-h) + 110vh); height: calc(100svh - var(--header-h) + 110vh); }
    .why--pin .why__stage { position: sticky; top: var(--header-h); height: calc(100vh - var(--header-h)); height: calc(100svh - var(--header-h)); display: grid; align-items: center; padding: 0; }
  }

  /* osa: šedá čára, mátová výplň a podtržení klíčových slov jako vlastní vrstvy */
  .anim-on .ages__seg { background: #CFD8D2; }
  .anim-on .ages__seg i { display: block; position: absolute; inset: 0; border-radius: inherit; background: var(--pk-accent); transform-origin: 50% 0; }
  .anim-on .ages__seg::before, .anim-on .ages__list li:last-child .ages__seg::after { z-index: 1; }
  .anim-on .ages__key span { position: relative; z-index: 0; background: none; }
  .anim-on .ages__key span::before { content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: 58%; bottom: 0; background: rgba(111, 211, 165, 0.5); transform-origin: 0 50%; }
  @keyframes ages-fill-y { from { transform: scaleY(0); } to { transform: none; } }
  @keyframes ages-fill-x { from { transform: scaleX(0); } to { transform: none; } }
  @keyframes ages-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
  @media (min-width: 760px) {
    .anim-on .ages__seg i { transform-origin: 0 50%; }
  }

  @supports (animation-timeline: view()) {
    /* průběh = jak daleko osa vjela do okna; úseky se plní jeden za druhým (--a začátek, --d délka úseku) */
    .anim-on .ages__list { view-timeline-name: --ages; view-timeline-axis: block; --a: 14%; --d: 8.5%; }
    .anim-on .ages__seg i { animation: ages-fill-y linear both; animation-timeline: --ages; animation-range: cover calc(var(--a) + var(--i) * var(--d)) cover calc(var(--a) + (var(--i) + 1) * var(--d)); }
    .anim-on :is(.ages__key, .ages__txt) { animation: ages-in linear both; animation-timeline: --ages; animation-range: cover calc(var(--a) + var(--i) * var(--d)) cover calc(var(--a) + var(--i) * var(--d) + 4%); }
    .anim-on .ages__key span::before { animation: ages-fill-x linear both; animation-timeline: --ages; animation-range: cover calc(var(--a) + var(--i) * var(--d) + 2%) cover calc(var(--a) + var(--i) * var(--d) + 8%); }
    @media (min-width: 760px) {
      .anim-on .ages__list { --a: 17%; --d: 11%; }
      .anim-on .ages__seg i { animation-name: ages-fill-x; }
    }
  }
  @supports not (animation-timeline: view()) {
    /* starší prohlížeč: totéž se přehraje jednou po doscrollování */
    .anim-on .ages[data-in]:not(.is-in) .ages__seg i { transform: scaleY(0); }
    .anim-on .ages[data-in]:not(.is-in) :is(.ages__key, .ages__txt) { opacity: 0; transform: translateY(8px); }
    .anim-on .ages[data-in]:not(.is-in) .ages__key span::before { transform: scaleX(0); }
    .anim-on .ages[data-in].is-in .ages__seg i { transition: transform 0.5s linear; transition-delay: calc(0.2s + var(--i) * 0.5s); }
    .anim-on .ages[data-in].is-in :is(.ages__key, .ages__txt) { transition: opacity 0.4s ease, transform 0.5s var(--ease); transition-delay: calc(0.2s + var(--i) * 0.5s); }
    .anim-on .ages[data-in].is-in .ages__key span::before { transition: transform 0.5s var(--ease); transition-delay: calc(0.45s + var(--i) * 0.5s); }
    @media (min-width: 760px) {
      .anim-on .ages[data-in]:not(.is-in) .ages__seg i { transform: scaleX(0); }
    }
  }

  /* srovnání: naše karta lehce vyjede a mátové čtverečky se rozsvítí shora dolů */
  .anim-on .versus[data-in]:not(.is-in) .vs--us { opacity: 0; transform: translateY(22px); }
  .anim-on .versus[data-in]:not(.is-in) .vs--self { opacity: 0; }
  .anim-on .versus[data-in].is-in .vs { transition: opacity 0.5s ease, transform 0.7s var(--ease); }
  .anim-on .versus[data-in].is-in .vs--us { transition-delay: 0.12s; }
  .anim-on .versus[data-in]:not(.is-in) .vs--us li::before { opacity: 0.18; transform: scale(0.6); }
  .anim-on .versus[data-in].is-in .vs--us li::before { transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.3, 1.5, 0.5, 1); transition-delay: 0.45s; }
  .anim-on .versus[data-in].is-in .vs--us li:nth-child(2)::before { transition-delay: 0.53s; }
  .anim-on .versus[data-in].is-in .vs--us li:nth-child(3)::before { transition-delay: 0.61s; }
  .anim-on .versus[data-in].is-in .vs--us li:nth-child(4)::before { transition-delay: 0.69s; }
  .anim-on .versus[data-in].is-in .vs--us li:nth-child(5)::before { transition-delay: 0.77s; }

  /* stránka pro zaměstnance: chybějící roky se doplní */
  .anim-on .emp-panel[data-in]:not(.is-in) .strip i { opacity: 0; transform: translateY(12px); }
  .anim-on .emp-panel[data-in].is-in .strip i { transition: opacity 0.4s ease, transform 0.5s var(--ease); }
  .anim-on .emp-panel[data-in] .strip i.g::after { transform: translateY(-190%) rotate(-10deg); }
  .anim-on .emp-panel[data-in].is-in .strip i.g::after { opacity: 1; transform: none; transition: opacity 0.3s ease, transform 0.75s cubic-bezier(0.2, 0.8, 0.25, 1); transition-delay: calc(1s + var(--i) * 0.17s); }

  /* pilot: postavy se objeví postupně */
  .anim-on .pilot__people[data-in] .people i { transition: opacity 0.4s ease, transform 0.5s var(--ease); transition-delay: calc(var(--i) * 45ms); }
  .anim-on .pilot__people[data-in]:not(.is-in) .people i { opacity: 0; transform: translateY(10px); }

  /* kontakt: kruhy se při průjezdu sekcí pomalu pootočí */
  @supports (animation-timeline: view()) {
    @keyframes pk-ring { from { transform: translate(-50%, -50%) rotateX(66deg) rotateZ(0deg); } to { transform: translate(-50%, -50%) rotateX(66deg) rotateZ(160deg); } }
    .anim-on .cta__rings span { animation: pk-ring linear both; animation-timeline: view(); }
  }
}

/* Tisk: žádné animace, vše ve finálním stavu */
@media print {
  .anim-on [data-reveal] { animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; }
  .anim-on .hero h1 em::before { display: none !important; }
  .story-on .story__figure { display: block !important; }
  .story-on .story__track { height: auto !important; }
  .story-on .story__stage { position: static !important; height: auto !important; overflow: visible !important; padding: 0 !important; }
  .story-on .story__stack { display: grid !important; gap: 0.6cm !important; }
  .story-on .story-step { grid-area: auto !important; opacity: 1 !important; transform: none !important; }
  .story-on .story__visual, .story-on .story__rail { display: none !important; }
  .anim-on [data-in] *, .anim-on [data-in] *::before, .anim-on [data-in] *::after { opacity: 1 !important; transform: none !important; transition: none !important; }
  .anim-on .strip i.g::after { opacity: 0 !important; }
  .anim-on .ages__seg i, .anim-on :is(.ages__key, .ages__txt), .anim-on .ages__key span::before { animation: none !important; opacity: 1 !important; transform: none !important; }
  .story-on .story__text { position: static !important; width: auto !important; background: none !important; border: 0 !important; padding: 0 !important; box-shadow: none !important; }
}