/* Belépő mozgás a főoldalon.
 *
 * Három szabály tartja kordában:
 *
 *  1. JavaScript nélkül minden látszik. A rejtést kizárólag a
 *     `data-motion="on"` gyökérjelölő kapcsolja be, amit maga a szkript tesz ki
 *     — ha idáig nem jutunk el, ez a fájl nem rejt el semmit.
 *  2. Csak `transform` és `opacity` mozog. Elrendezés nem változik, tehát nincs
 *     újratördelés és nincs ugrálás betöltéskor.
 *  3. Aki kéri, annak nincs mozgás. A szkript el sem indul
 *     `prefers-reduced-motion` mellett; a fájl végén lévő blokk arra való, ha a
 *     beállítás menet közben változik.
 *
 * A folyamatosan futó háttérmozgások (aurora, fénysáv, halo) nem itt vannak,
 * hanem az orbit-home.css-ben: azok az arculat részei, nem a belépésé.
 */

:root {
  --orbit-motion-ease: cubic-bezier(.22, .61, .36, 1);
  --orbit-motion-time: .62s;
}

/* ---- Alap: felúszás ----------------------------------------------------- */

[data-motion="on"] .orbit-home [data-reveal] {
  opacity: 0;
  transform: translate3d(0, var(--motion-rise, 16px), 0);
  transition:
    opacity var(--orbit-motion-time) var(--orbit-motion-ease) var(--motion-delay, 0ms),
    transform var(--orbit-motion-time) var(--orbit-motion-ease) var(--motion-delay, 0ms);
}

[data-motion="on"] .orbit-home [data-reveal="in"] {
  opacity: 1;
  transform: none;
}

/* ---- Hero --------------------------------------------------------------- */

/* A második sor egy lélegzetnyivel az első után érkezik. */
[data-motion="on"] .pm-hero h1 span {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  transition:
    opacity var(--orbit-motion-time) var(--orbit-motion-ease) calc(var(--motion-delay, 0ms) + 120ms),
    transform var(--orbit-motion-time) var(--orbit-motion-ease) calc(var(--motion-delay, 0ms) + 120ms);
}
[data-motion="on"] .pm-hero h1[data-reveal="in"] span { opacity: 1; transform: none; }

/* A portrékártya egy hajszállal nagyobbról érkezik: így nem „csúszik", hanem
   letelepszik. */
[data-motion="on"] .pm-hero-aside[data-reveal] { transform: translate3d(0, var(--motion-rise, 24px), 0) scale(.985); }
[data-motion="on"] .pm-hero-aside[data-reveal="in"] { transform: none; }

/* ---- Referencia --------------------------------------------------------- */

[data-motion="on"] .pm-reference-card[data-reveal] { transform: translate3d(0, var(--motion-rise, 22px), 0) scale(.99); }
[data-motion="on"] .pm-reference-card[data-reveal="in"] { transform: none; }

/* A képernyőképen átfutó fénysáv csak azután indul, hogy a kártya megérkezett. */
[data-motion="on"] .pm-reference-card:not([data-reveal="in"]) .pm-shot-sheen { animation-play-state: paused; }

/* ---- Folyamat ----------------------------------------------------------- */

/* A körök és a fénypont addig állnak, amíg a szakasz meg nem érkezik. Így a
   szem nem egy már futó animáció közepébe csöppen bele. */
[data-motion="on"] .pm-step:not([data-reveal="in"]) .pm-step-halo,
[data-motion="on"] .pm-step:not([data-reveal="in"])::after { animation-play-state: paused; }

/* A kötővonal a lépéssel együtt rajzolódik ki. Vízszintes nyújtás, tehát az
   elrendezés nem mozdul. */
[data-motion="on"] .pm-step:not(:last-child)::before {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .8s var(--orbit-motion-ease) calc(var(--motion-delay, 0ms) + 160ms);
}
[data-motion="on"] .pm-step[data-reveal="in"]:not(:last-child)::before { transform: scaleX(1); }

/* ---- Árak --------------------------------------------------------------- */

[data-motion="on"] .pm-plan[data-reveal] { transform: translate3d(0, var(--motion-rise, 18px), 0) scale(.99); }
[data-motion="on"] .pm-plan[data-reveal="in"] { transform: none; }

/* ---- Aki nem kér belőle ------------------------------------------------- */

/* Az orbit.css ilyenkor már letiltott minden animációt és átmenetet. Az ott
   maradó `opacity: 0` viszont láthatatlanná tenné a tartalmat, ezért itt
   visszaadjuk. Ez a szabály tartja, hogy tartalom sosem veszhet el. */
@media (prefers-reduced-motion: reduce) {
  [data-motion="on"] .orbit-home [data-reveal],
  [data-motion="on"] .pm-hero h1 span,
  [data-motion="on"] .pm-step:not(:last-child)::before {
    opacity: 1 !important;
    transform: none !important;
  }
}