/* SKY IT – shared motion for all pages (loaded after each page's own styles).
   1. hero content slides in on load      3. smoother, unified hover easing
   2. sections/cards reveal on scroll     4. compact menu after scrolling, soft page transitions
   Everything is switched off for visitors who prefer reduced motion. */

:root { --sk-ease: cubic-bezier(.22, 1, .36, 1); }
html { scroll-behavior: smooth; }

/* ── 1. Hero entrance ───────────────────────────────────────────── */
@keyframes skRise {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}
.hero :is(.breadcrumb, .jd-breadcrumb)          { animation: skRise .8s var(--sk-ease) both; animation-delay: .05s; }
.hero .section-label                            { animation: skRise .8s var(--sk-ease) both; animation-delay: .10s; }
.hero h1                                        { animation: skRise .9s var(--sk-ease) both; animation-delay: .18s; }
.hero h2                                        { animation: skRise .9s var(--sk-ease) both; animation-delay: .28s; }
.hero :is(.hero-sub, p)                         { animation: skRise .9s var(--sk-ease) both; animation-delay: .38s; }
.hero :is(.jd-tags, .hero-badges)               { animation: skRise .9s var(--sk-ease) both; animation-delay: .44s; }
.hero :is(.hero-actions, .jd-actions, .hero-btns) { animation: skRise .9s var(--sk-ease) both; animation-delay: .50s; }
.hero :is(.hero-actions, .jd-actions, .hero-btns, .jd-tags, .hero-badges) :is(p, h1, h2) { animation: none; }
.neural-bg { animation: skFade 1.6s ease both; }
@keyframes skFade { from { opacity: 0; } to { opacity: 1; } }
/* Safety net: after 2 s (class set by motion.js) the hero is shown even if animations never ran */
.sk-done .hero :is(.breadcrumb, .jd-breadcrumb, .section-label, h1, h2, .hero-sub, p, .jd-tags, .hero-badges,
  .hero-actions, .jd-actions, .hero-btns), .sk-done .neural-bg { animation: none !important; }

/* ── 2. Scroll reveal (classes are added by assets/motion.js) ──────── */
.sk-rv {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s var(--sk-ease), transform .8s var(--sk-ease) !important;
}
.sk-rv.sk-in { opacity: 1; transform: none; }

/* ── 3. Hover: same soft easing everywhere ──────────────────────── */
:is(.card, .area-card, .perk-card, .office-card, .cert-card, .num-card, .job-card, .pillar, .feature-item,
    .contact-item, .jd-card, .btn-primary, .btn-outline, .btn-outline-white, .filter-btn, .ref-logo) {
  transition-duration: .4s;
  transition-timing-function: var(--sk-ease);
}
:is(.btn-primary, .btn-outline, .btn-outline-white):active { transform: translateY(0) scale(.97); transition-duration: .1s; }

/* ── 4a. Menu becomes compact after scrolling (desktop) ─────────── */
nav { transition: background-color .4s var(--sk-ease), box-shadow .4s var(--sk-ease); }
@media (min-width: 769px) {
  nav .nav-inner { transition: height .4s var(--sk-ease); }
  nav .nav-logo-img { transition: height .4s var(--sk-ease); }
  nav.sk-scrolled .nav-inner { height: 58px; }
  nav.sk-scrolled .nav-logo-img { height: 32px !important; }
}
nav.sk-scrolled { box-shadow: 0 10px 30px rgba(0, 0, 0, .35); }

/* ── 4b. Soft fade between pages (Chrome / Edge; others load normally) ── */
@view-transition { navigation: auto; }
nav { view-transition-name: sk-nav; }
::view-transition-old(root) { animation: skPageOut .25s ease both; }
::view-transition-new(root) { animation: skPageIn .45s var(--sk-ease) both; }
@keyframes skPageOut { to { opacity: 0; } }
@keyframes skPageIn  { from { opacity: 0; transform: translateY(10px); } }

/* ── Print: everything visible, no motion ───────────────────────── */
@media print {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .sk-rv { opacity: 1 !important; transform: none !important; }
}

/* ── Reduced motion: no animations at all ───────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .sk-rv { opacity: 1; transform: none; }
  @view-transition { navigation: none; }
}