/* ============================================================
   Kim Trần Import Export — motion.
   Enqueued LAST so its prefers-reduced-motion query always wins.
   Restrained by design-system direction: one-time fade + short rise,
   no bounce, no parallax, no scroll-jacking, no looping animation.
   ============================================================ */

/* Section reveal: opacity 0→1 + 14px rise, once, 420ms.
   IMPORTANT — .kt-reveal on its own is NOT hidden. Content marked
   .kt-reveal is fully visible by default (this rule block sets nothing
   on .kt-reveal itself). kt-interactions.js is what puts an element
   into the pre-reveal state, and only immediately before it starts
   observing that same element with IntersectionObserver — so if JS
   never runs (blocked, errors, disabled), nothing was ever hidden.
   This keeps the page usable before JS executes, per the build brief. */
@media (prefers-reduced-motion:no-preference){
  .kt-reveal.kt-reveal--pending{opacity:0;transform:translateY(var(--kt-reveal-rise))}
  .kt-reveal.kt-reveal--visible{
    animation:kt-rise var(--kt-dur-slow) var(--kt-ease) both;
  }
  @keyframes kt-rise{
    from{opacity:0;transform:translateY(var(--kt-reveal-rise))}
    to{opacity:1;transform:none}
  }

  /* Art-direction pass — "the whole-section 14px/420ms reveal is too
     subtle to be perceived": three more deliberate, still-restrained
     treatments layered on TOP of the generic .kt-reveal above (same
     shared class/JS, scoped by selector — no new JS, no new library). */

  /* A. Editorial images (kt-editorial__media, kt-principles-split__media):
     overflow-hidden + scale, not the generic rise — the wrapper fades,
     the image/placeholder inside it scales 1.025→1, both 650ms so they
     land together. .kt-editorial__media already has overflow:hidden
     (kt-components.css), which is what clips the scale. */
  .kt-editorial__media.kt-reveal.kt-reveal--pending,
  .kt-principles-split__media.kt-reveal.kt-reveal--pending{
    opacity:0;
    transform:none;
  }
  .kt-editorial__media.kt-reveal.kt-reveal--pending img,
  .kt-editorial__media.kt-reveal.kt-reveal--pending .kt-editorial__art,
  .kt-principles-split__media.kt-reveal.kt-reveal--pending img,
  .kt-principles-split__media.kt-reveal.kt-reveal--pending .kt-editorial__art{
    transform:scale(1.025);
  }
  .kt-editorial__media.kt-reveal.kt-reveal--visible,
  .kt-principles-split__media.kt-reveal.kt-reveal--visible{
    animation:kt-media-fade 650ms var(--kt-ease) both;
  }
  .kt-editorial__media.kt-reveal.kt-reveal--visible img,
  .kt-editorial__media.kt-reveal.kt-reveal--visible .kt-editorial__art,
  .kt-principles-split__media.kt-reveal.kt-reveal--visible img,
  .kt-principles-split__media.kt-reveal.kt-reveal--visible .kt-editorial__art{
    animation:kt-media-scale 650ms var(--kt-ease) both;
  }
  @keyframes kt-media-fade{from{opacity:0}to{opacity:1}}
  @keyframes kt-media-scale{from{transform:scale(1.025)}to{transform:scale(1)}}

  /* B. Timber/product cards: smaller rise (10px, vs. the generic 14px)
     staggered ~60ms per card via :nth-child — no JS index-counting
     needed, the position selector does it. Scoped to .kt-timber-card
     only, so nothing inside a card (h3/p/dl lines) animates
     individually. */
  .kt-timber-card.kt-reveal.kt-reveal--pending{transform:translateY(10px)}
  .kt-timber-card.kt-reveal.kt-reveal--visible{animation-duration:480ms}
  .kt-timber-grid .kt-timber-card:nth-child(1).kt-reveal--visible{animation-delay:0ms}
  .kt-timber-grid .kt-timber-card:nth-child(2).kt-reveal--visible{animation-delay:60ms}
  .kt-timber-grid .kt-timber-card:nth-child(3).kt-reveal--visible{animation-delay:120ms}
  .kt-timber-grid .kt-timber-card:nth-child(4).kt-reveal--visible{animation-delay:180ms}
  .kt-timber-grid .kt-timber-card:nth-child(5).kt-reveal--visible{animation-delay:240ms}

  /* C. Technical-profile species switch: short crossfade + 7px rise
     whenever kt-interactions.js's initTabs() actually swaps the
     visible panel (adds .kt-tech-panel--enter right after clearing
     [hidden] on user interaction only — never on first render, so this
     never fires on page load, and never fires at all in the no-JS
     fallback where every panel is already visible from the server with
     no [hidden]/class toggling involved). ARIA attributes are handled
     entirely in JS, untouched by this. */
  .kt-tech-panel.kt-tech-panel--enter{animation:kt-tab-crossfade 350ms var(--kt-ease) both}
  @keyframes kt-tab-crossfade{
    from{opacity:0;transform:translateY(7px)}
    to{opacity:1;transform:none}
  }

  /* Mobile-refinement pass: smooth in-page scroll for the nav/CTA
     anchor links (#gioi-thieu, #bao-gia, etc.). CSS-only, native
     scroll-behavior — no scroll-jacking library. scroll-margin-top on
     the section ids (kt-components.css) already offsets for the
     sticky header, so a smooth scroll still lands the heading clear
     of it. Scoped to the same no-preference query as every other
     animation on the site, so reduced-motion users keep instant jumps. */
  html{scroll-behavior:smooth}
}

/* Reduced motion: kt-interactions.js checks this same query before ever
   adding kt-reveal--pending, so under reduced motion nothing is hidden
   in the first place — this rule is a CSS-only backstop, not the
   primary mechanism. Also zeroes the shared duration/rise tokens so
   hover/press/focus transitions across every other kt- stylesheet
   collapse to instant rather than animated. */
@media (prefers-reduced-motion:reduce){
  :root{
    --kt-dur-fast:0ms;
    --kt-dur:0ms;
    --kt-dur-slow:0ms;
    --kt-reveal-rise:0px;
  }
  .kt-reveal.kt-reveal--pending,
  .kt-reveal.kt-reveal--visible{opacity:1;transform:none;animation:none}
}