/* ═══════════════════════════════════════════════════════════
   HOLOGRAM PODSTRÁNOK — rovnaký jazyk ako na úvodnej stránke

   • obsah (sekcie, karty, nadpisy) sa premietne pri vstupe do
     obrazovky a vždy dobehne do konca;
   • svetlo (lúč na hrane sekcie, os postupu) ide priamo so scrollom.

   Skrytie pred premietnutím platí len s triedou .holo-js na <html>,
   ktorú nastaví skript v hlavičke — bez neho nič neostane schované.
   Kto má vypnutý pohyb, vidí hotovú stránku.
   ═══════════════════════════════════════════════════════════ */

/* vrstvy projekcie, ktoré do sekcie vkladá js/holo.js */
main > section { position: relative; }
.holo-layer { position: absolute; inset: 0; pointer-events: none; z-index: 7; overflow: hidden; }
.holo-beam, .holo-cone, .holo-lines { position: absolute; left: 0; right: 0; top: 0; opacity: 0; pointer-events: none; }
.holo-beam { height: 2px; transform: scaleX(0); background: linear-gradient(90deg, transparent, #fff 20%, #fff 80%, transparent);
  box-shadow: 0 0 12px 2px rgba(200,240,53,0.85), 0 0 60px 10px rgba(123,110,246,0.4); }
.holo-cone { height: min(90vh, 100%); background: radial-gradient(120% 70% at 50% 0%, rgba(200,240,53,0.11), rgba(123,110,246,0.06) 40%, transparent 75%); }
.holo-lines { height: min(100vh, 100%); background: repeating-linear-gradient(0deg, rgba(200,240,53,0.07) 0 1px, transparent 1px 3px); }

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

  /* pôvodné odhaľovanie preberá hologram */
  .holo-js main .reveal { opacity: 1; transform: none; transition: none; }

  /* ═══ ÚVOD STRÁNKY ═══ */
  main > .crumbs { animation: holoBlik 0.9s steps(1, end) 0.15s backwards; }
  .page-hero .section-title, .notfound-title { animation: holoRgb 1.4s ease-out 0.25s backwards; }
  .page-hero :is(.section-desc, .post-meta, .cta-row) { animation: holoBlik 0.9s steps(1, end) 0.5s backwards; }

  /* ═══ SEKCIA: obsah sa premietne s blikaním, zažiari kužeľ svetla ═══ */
  .holo-js main > section:not(.page-hero):not(.notfound-hero):not(.holo-in) > :not(.holo-layer):not(.pixel-bg):not(.section-glow) { opacity: 0; }
  main > section.holo-in > :not(.holo-layer):not(.pixel-bg):not(.section-glow) { animation: holoMat 0.9s steps(1, end) backwards; }
  .holo-in > .holo-layer :is(.holo-cone, .holo-lines) { animation: holoZiara 1.8s ease 0.1s; }

  /* nadpisy sa ustália z farebného posunu, keď vojdú do obrazovky */
  :is(.band .section-title, .prose h2, .cta-band h2).holo-in { animation: holoRgb 1.4s ease-out 0.1s backwards; }

  /* ═══ PRVKY: holografické panely sa sklopia do roviny ═══ */
  .holo-js :is(.tile, .steps > li, .faq-item, .related > a, .facts > div, .post-row, .cta-band, .quote,
               .pricing-card, .addons, .pricing-note, .case-study, .band > picture > img, .obsah, .prose-blok):not(.holo-in) { opacity: 0; }
  :is(.tile, .steps > li, .faq-item, .related > a, .facts > div, .post-row, .cta-band, .quote,
      .pricing-card, .addons, .pricing-note, .case-study, .band > picture > img, .obsah, .prose-blok).holo-in {
    animation: holoPanel 1s cubic-bezier(0.2,0.8,0.2,1) calc(var(--k, 0) * 0.09s) backwards, holoHrana 1.5s ease calc(var(--k, 0) * 0.09s) backwards;
  }
  /* zoznamy (kroky, otázky) sa nesklápajú, len sa rozsvietia v poradí */
  :is(.steps > li, .faq-item, .post-row, .prose-blok).holo-in { animation: holoRiadok 0.9s ease calc(var(--k, 0) * 0.07s) backwards; }

  @keyframes holoBlik { 0% { opacity: 0 } 10% { opacity: .2 } 20% { opacity: 1 } 30% { opacity: .2 } 45% { opacity: 1 } }
  @keyframes holoZiara { 0% { opacity: 0 } 25% { opacity: 1 } 100% { opacity: 0 } }
  @keyframes holoMat { 0% { opacity: 0 } 10% { opacity: .7 } 18% { opacity: .12 } 28% { opacity: 1 } 46% { opacity: .55 } 54% { opacity: 1 } }
  @keyframes holoRgb {
    0% { filter: drop-shadow(-5px 0 0 rgba(255,40,120,.75)) drop-shadow(5px 0 0 rgba(0,220,255,.75)); transform: translateX(4px) skewX(-6deg) }
    22% { filter: drop-shadow(4px 0 0 rgba(255,40,120,.6)) drop-shadow(-4px 0 0 rgba(0,220,255,.6)); transform: translateX(-3px) skewX(3deg) }
    50% { filter: drop-shadow(-1px 0 0 rgba(255,40,120,.4)) drop-shadow(1px 0 0 rgba(0,220,255,.4)); transform: none }
    100% { filter: none; transform: none } }
  @keyframes holoPanel { 0% { opacity: 0; transform: perspective(900px) rotateX(22deg) translateY(36px) } 50% { opacity: 1 } }
  @keyframes holoHrana { from { box-shadow: 0 0 0 1px rgba(200,240,53,.7), 0 0 44px rgba(123,110,246,.35) } }
  @keyframes holoRiadok { 0% { opacity: 0; transform: translateX(-14px) } 30% { opacity: .8 } 42% { opacity: .25 } 60% { opacity: 1 } }

  /* ═══ SVETLO: ide so scrollom ═══ */
  @supports (animation-timeline: view()) {
    main > section { view-timeline: --sec block; }
    .holo-beam { animation: holoBeam linear both; animation-timeline: --sec; animation-range: entry 0vh entry 45vh; }
    @keyframes holoBeam { 0% { transform: scaleX(0); opacity: 1 } 55% { transform: scaleX(1); opacity: 1 } 100% { transform: scaleX(1); opacity: 0 } }
    /* os postupu sa kreslí so scrollom */
    .steps { view-timeline: --kroky block; }
    .steps::before { transform-origin: top; animation: holoOs linear both; animation-timeline: --kroky; animation-range: entry 30% cover 55%; }
    @keyframes holoOs { from { transform: scaleY(0) } }
  }
}