/* Arctell — loading and scroll-reveal motion (front page only).
   Source: Arctell Design System › "Arctell Home Motion.html", defaults: load=curtain, reveal=rise, img=wipe, speed 1×.
   Everything is scoped to html.at-motion, which the inline head script adds on the front page
   unless the visitor prefers reduced motion. */
:root { --m: 1; --rd: calc(900ms * var(--m)); --rease: cubic-bezier(.16, 1, .3, 1); }

/* ---- Loading: curtain ---- */
html.at-motion.at-curtain body::before,
html.at-motion.at-curtain body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1000;
  pointer-events: none;
}
html.at-motion.at-curtain body::before {
  background: #162430;
  animation: at-lift calc(1000ms * var(--m)) cubic-bezier(.76, 0, .24, 1) calc(1300ms * var(--m)) forwards;
}
html.at-motion.at-curtain body::after {
  background: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="185.357 358.158 91.434 99.986"%3E%3Cpath fill="%23F5F3E9" d="M262.601 458.144L276.791 457.896L238.089 358.158L224.416 358.186L185.357 457.955L198.67 458.129L226.796 382.726L231.04 369.69Z"/%3E%3C/svg%3E') center / 64px auto no-repeat;
  opacity: 0;
  animation: at-pk calc(1100ms * var(--m)) var(--rease) forwards,
             at-lift calc(1000ms * var(--m)) cubic-bezier(.76, 0, .24, 1) calc(1300ms * var(--m)) forwards;
}
html.at-loaded body::before, html.at-loaded body::after { display: none; }
@keyframes at-pk { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes at-lift { from { opacity: 1; } to { opacity: 1; transform: translateY(-100%); } }

/* ---- Hero entrance ---- */
html.at-motion .at-hero [data-h] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--rd) var(--rease), transform var(--rd) var(--rease);
  transition-delay: calc(var(--i, 0) * 140ms * var(--m));
}
html.at-motion .at-hero .at-display[data-h] { opacity: 1; transform: none; }
html.at-motion .at-display .at-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
html.at-motion .at-display .at-w > span {
  display: inline-block;
  transform: translateY(105%);
  transition: transform calc(1100ms * var(--m)) var(--rease);
  transition-delay: calc((var(--j) * 45ms + 120ms) * var(--m));
}
html.at-motion.at-hero-go .at-hero [data-h] { opacity: 1; transform: none; }
html.at-motion.at-hero-go .at-display .at-w > span { transform: none; }

/* ---- Scroll reveal: rise ---- */
html.at-motion [data-r] {
  transition: opacity var(--rd) var(--rease), transform var(--rd) var(--rease);
  transition-delay: calc(var(--i, 0) * 90ms * var(--m));
}
html.at-motion [data-r]:not(.is-in) { opacity: 0; transform: translateY(32px); }

/* ---- Image reveal: wipe ---- */
html.at-motion [data-img] {
  clip-path: inset(0);
  transition: clip-path calc(1400ms * var(--m)) cubic-bezier(.76, 0, .24, 1);
  transition-delay: calc(var(--i, 0) * 120ms * var(--m));
}
html.at-motion [data-img]:not(.is-in) { clip-path: inset(100% 0 0 0); }
html.at-motion [data-img] > img {
  transition: transform calc(1800ms * var(--m)) var(--rease);
  transition-delay: calc(var(--i, 0) * 120ms * var(--m));
}
html.at-motion [data-img]:not(.is-in) > img { transform: scale(1.18); }

@media (prefers-reduced-motion: reduce) {
  html.at-motion body::before, html.at-motion body::after { display: none; }
  html.at-motion [data-r], html.at-motion [data-img], html.at-motion .at-hero [data-h], html.at-motion .at-display .at-w > span {
    opacity: 1 !important; transform: none !important; clip-path: none !important;
  }
}