/*
 * Motion. Principles (Emil Kowalski): animate only what is seen occasionally; strong custom ease-out; transform + opacity only;
 * entrances run once; nothing animates in response to the keyboard; reduced motion keeps opacity changes and removes movement.
 *   - hero entrance: one staggered rise on load (CSS keyframes, one-shot)
 *   - section reveals: .tg-reveal / .tg-stagger, driven by reveal.js (hidden only after the script has run)
 *   - ambient light: a slow drift of the hero glow (compositor only), off for reduced motion
 *   - hover / press / focus / menu transitions live next to their components, on the shared tokens
 */

@keyframes tg-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes tg-drift { from { transform: translate3d(-2%, 0, 0) scale(1); } to { transform: translate3d(2%, 3%, 0) scale(1.04); } }

@media (prefers-reduced-motion: no-preference) {
  /* hero: copy first, then the product frame */
  .tg-hero__copy > *, .tg-hero__media { animation: tg-rise 760ms var(--tg-ease-out) backwards; }
  .tg-hero__copy > :nth-child(1) { animation-delay: 40ms; }
  .tg-hero__copy > :nth-child(2) { animation-delay: 100ms; }
  .tg-hero__copy > :nth-child(3) { animation-delay: 160ms; }
  .tg-hero__copy > :nth-child(4) { animation-delay: 220ms; }
  .tg-hero__media { animation-delay: 320ms; animation-duration: 900ms; }
  .tg-hero::before { animation: tg-drift 26s var(--tg-ease-in-out) infinite alternate; will-change: transform; }

  /* section reveals */
  html.tg-reveal-ready .tg-reveal:not(.tg-stagger) { opacity: 0; transform: translateY(18px); transition: opacity var(--tg-dur-reveal) var(--tg-ease-out), transform var(--tg-dur-reveal) var(--tg-ease-out); }
  html.tg-reveal-ready .tg-reveal:not(.tg-stagger).is-in { opacity: 1; transform: none; }
  html.tg-reveal-ready .tg-stagger.tg-reveal > * { opacity: 0; transform: translateY(18px); transition: opacity var(--tg-dur-reveal) var(--tg-ease-out), transform var(--tg-dur-reveal) var(--tg-ease-out); transition-delay: calc(var(--i, 0) * var(--tg-stagger)); }
  html.tg-reveal-ready .tg-stagger.tg-reveal.is-in > * { opacity: 1; transform: none; }
}

/* reduced motion: gentle opacity only, no movement, no looping light */
@media (prefers-reduced-motion: reduce) {
  html.tg-reveal-ready .tg-reveal:not(.tg-stagger), html.tg-reveal-ready .tg-stagger.tg-reveal > * { opacity: 0; transition: opacity 200ms ease; }
  html.tg-reveal-ready .tg-reveal:not(.tg-stagger).is-in, html.tg-reveal-ready .tg-stagger.tg-reveal.is-in > * { opacity: 1; }
  .tg-btn .elementor-button, a.tg-btn, .tg-card, .tg-chip a { transition-property: background-color, border-color, color, opacity; }
  .tg-btn .elementor-button:active, a.tg-btn:active, .tg-chip a:active, .tg-nav a:active, .tg-nav__trigger:active, .tg-menu-toggle:active { transform: none; }
  /* menus: cross-fade only, no slide / scale, no icon morph */
  .tg-nav__panel, .tg-header__panel, .tg-nav li, .tg-header__cta > * { transform: none; }
  .tg-header__panel, .tg-nav li, .tg-header__cta > * { transition-property: opacity, visibility; }
  .tg-nav__panel { transition-property: opacity, visibility; }
  .tg-menu-toggle__bars i, .tg-nav__chev, .tg-faq summary::after { transition: none; }
}

/* the Elementor editor and print always show everything */
.elementor-editor-active .tg-reveal, .elementor-editor-active .tg-stagger > * { opacity: 1; transform: none; }
@media print { .tg-reveal, .tg-stagger > * { opacity: 1 !important; transform: none !important; } }