/* 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; }
/* subpages: quicker, everything is in place within about half a second */
.hero:has(canvas[data-neural="light"]) :is(.breadcrumb, .jd-breadcrumb, .section-label, h1, h2, .hero-sub, p, .jd-tags, .hero-badges,
  .hero-actions, .jd-actions, .hero-btns) { animation-duration: .5s; animation-delay: 0s; }
.hero:has(canvas[data-neural="light"]) :is(.hero-sub, p, .jd-tags, .hero-badges, .hero-actions, .jd-actions, .hero-btns) { animation-delay: .08s; }
.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. The fade between pages was removed – it made opening a page feel slow.) */

/* ── 5. Same mobile header and menu on every page (as on the homepage) ── */
@media (max-width: 768px) {
  nav .nav-inner { padding: 0 20px; height: 68px; gap: 0; }
  nav .nav-lang { display: flex; gap: 2px; margin: 0 10px 0 auto; }
  nav .nav-lang a { font-size: 12px; padding: 4px 6px; }
  nav .hamburger {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 36px; height: 36px; margin-left: 0; padding: 4px; background: none; border: none; cursor: pointer;
  }
  nav .hamburger span { width: 100%; height: 2px; border-radius: 2px; background: rgba(255,255,255,.8); transition: all .3s; }
  nav .hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  nav .hamburger.open span:nth-child(2) { opacity: 0; }
  nav .hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}
.mobile-menu {
  top: 68px; padding: 16px 20px 24px; gap: 4px;
  background: rgba(17,17,17,.98); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(229,0,126,.15);
}
.mobile-menu a {
  color: rgba(255,255,255,.75); font-size: 16px; font-weight: 500; padding: 12px 4px;
  border-bottom: 1px solid rgba(255,255,255,.06); text-decoration: none; transition: color .2s;
}
.mobile-menu a:last-child { border-bottom: none; }
.mobile-menu a:hover { color: var(--pink, #E5007E); }
.mobile-menu .mob-cta {
  margin-top: 12px; background: var(--grad, linear-gradient(135deg, #E5007E, #7B2D8B)); color: #fff !important;
  text-align: center; border-radius: 10px; padding: 14px !important; font-weight: 700 !important; border-bottom: none !important;
}

/* ── 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; }
}