/* Enterprise motion system.
   The first screen animates from CSS alone, so it is never painted twice.
   Everything below the fold is choreographed by refined-motion.js as it scrolls in.
   Content stays readable before JS, without JS, and under reduced motion. */
@layer natural-renewal {
  body.iyu-motion-page {
    /* One curve family, so nothing reads as borrowed from somewhere else. */
    --iyu-ease: cubic-bezier(.16,1,.3,1);        /* entrance settle */
    --iyu-ease-glide: cubic-bezier(.33,.72,0,1); /* long media reveal */
    --iyu-ease-micro: cubic-bezier(.2,.8,.2,1);  /* pointer response */
    /* One duration scale; every role picks from it. */
    --iyu-t-micro: 220ms;
    --iyu-t-card: 620ms;
    --iyu-t-text: 680ms;
    --iyu-t-lede: 760ms;
    --iyu-t-media: 1040ms;
    --iyu-accent: #326581;
    --iyu-rule: #9bb6c4;
  }
  body.iyu-motion-page .v3-reveal { animation: none !important; }
  body.iyu-motion-page .iyu-enter:not(.iyu-enter-active) { will-change: auto !important; }

  /* ── First screen: no script, so the headline never disappears and returns ── */
  @media (prefers-reduced-motion: no-preference) {
    body.iyu-motion-page .iyu-motion-lede > :not(.absolute) {
      animation: iyu-editorial-lede var(--iyu-t-lede) var(--iyu-ease) backwards;
    }
    body.iyu-motion-page .iyu-motion-lede > :nth-child(1) { animation-delay: 0ms; }
    body.iyu-motion-page .iyu-motion-lede > :nth-child(2) { animation-delay: 90ms; }
    body.iyu-motion-page .iyu-motion-lede > :nth-child(3) { animation-delay: 180ms; }
    body.iyu-motion-page .iyu-motion-lede > :nth-child(4) { animation-delay: 260ms; }
    body.iyu-motion-page .iyu-motion-lede > :nth-child(5) { animation-delay: 330ms; }
    body.iyu-motion-page .iyu-motion-lede > :nth-child(n+6) { animation-delay: 390ms; }
    body.iyu-motion-page .iyu-motion-frame {
      animation: iyu-editorial-frame var(--iyu-t-media) var(--iyu-ease-glide) 160ms backwards;
    }
  }

  /* ── Below the fold: roles differ in weight, so the page reads in order ── */
  body.iyu-motion-page .iyu-enter-active {
    animation: iyu-editorial-rise var(--iyu-t-text) var(--iyu-ease) var(--iyu-enter-delay,0ms) backwards !important;
    will-change: opacity, translate;
  }
  body.iyu-motion-page .iyu-motion-heading.iyu-enter-active {
    animation-name: iyu-editorial-heading !important;
  }
  body.iyu-motion-page .iyu-motion-card.iyu-enter-active {
    animation-name: iyu-editorial-card !important;
    animation-duration: var(--iyu-t-card) !important;
  }
  body.iyu-motion-page .iyu-enter-media.iyu-enter-active {
    animation-name: iyu-editorial-frame !important;
    animation-duration: var(--iyu-t-media) !important;
    animation-timing-function: var(--iyu-ease-glide) !important;
  }
  body.iyu-motion-page .iyu-enter-active:focus-within { animation: none !important; }

  /* A quiet accent draws once, after its heading has settled. */
  body.iyu-motion-page .iyu-motion-heading::after {
    content: ''; display: block; width: 32px; height: 2px;
    margin-top: 16px; background: var(--iyu-rule); transform-origin: left;
  }
  body.iyu-motion-page .iyu-motion-heading.iyu-enter-active::after {
    animation: iyu-editorial-rule 560ms var(--iyu-ease) calc(var(--iyu-enter-delay,0ms) + 360ms) backwards !important;
  }

  /* ── Pointer response: engage quickly, release slowly ── */
  body.iyu-motion-page .iyu-motion-card {
    transform: none !important;
    transition: translate 460ms var(--iyu-ease), box-shadow 480ms var(--iyu-ease), border-color 320ms ease !important;
  }
  body.iyu-motion-page .iyu-motion-link {
    transition: translate 340ms var(--iyu-ease), color var(--iyu-t-micro) ease,
                background-color var(--iyu-t-micro) ease, border-color var(--iyu-t-micro) ease !important;
  }
  body.iyu-motion-page .iyu-motion-link svg {
    transition: translate 340ms var(--iyu-ease-micro) !important;
  }
  body.iyu-motion-page :is(.iyu-motion-link,.iyu-motion-card):focus-visible {
    outline: 2px solid var(--iyu-accent) !important; outline-offset: 4px !important;
  }
  @media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
    body.iyu-motion-page .iyu-motion-card:not(.iyu-enter-active):hover {
      translate: 0 -3px;
      border-color: #a3bccb !important;
      box-shadow: 0 1px 2px -1px #253c4c14, 0 22px 44px -30px #253c4c5c !important;
      transition-duration: 240ms, 300ms, 180ms !important;
    }
    body.iyu-motion-page .iyu-motion-link--surface:hover { translate: 0 -2px; }
    body.iyu-motion-page .iyu-motion-link:hover svg { translate: 4px 0; }
  }

  /* The header lifts off the page once it is no longer at the top. */
  body.iyu-motion-page nav.fixed {
    transition: box-shadow 340ms var(--iyu-ease), border-color 340ms ease !important;
  }
  body.iyu-motion-page.iyu-motion-scrolled nav.fixed {
    box-shadow: 0 1px 0 #253c4c0f, 0 14px 30px -26px #253c4c73 !important;
  }

  /* Counting figures must not reflow their row while they run. */
  body.iyu-motion-page .v3-counter {
    display: inline-block; font-variant-numeric: tabular-nums;
  }

  /* ── Handheld: shorter travel, no waiting ── */
  @media (max-width:767px) {
    body.iyu-motion-page .iyu-enter-active {
      animation-name: iyu-editorial-rise-small !important;
      animation-duration: 480ms !important; animation-delay: 0ms !important;
    }
    body.iyu-motion-page .iyu-motion-heading.iyu-enter-active {
      animation-name: iyu-editorial-rise-small !important; animation-duration: 480ms !important;
    }
    body.iyu-motion-page .iyu-motion-card.iyu-enter-active {
      animation-name: iyu-editorial-rise-small !important; animation-duration: 500ms !important;
    }
    body.iyu-motion-page .iyu-enter-media.iyu-enter-active {
      animation-name: iyu-editorial-frame-small !important; animation-duration: 620ms !important;
    }
    body.iyu-motion-page .iyu-motion-heading.iyu-enter-active::after {
      animation-duration: 420ms !important; animation-delay: 200ms !important;
    }
    body.iyu-motion-page .iyu-motion-lede > :not(.absolute) {
      animation-name: iyu-editorial-lede-small; animation-duration: 560ms;
    }
    body.iyu-motion-page .iyu-motion-lede > :nth-child(1) { animation-delay: 0ms; }
    body.iyu-motion-page .iyu-motion-lede > :nth-child(2) { animation-delay: 70ms; }
    body.iyu-motion-page .iyu-motion-lede > :nth-child(3) { animation-delay: 130ms; }
    body.iyu-motion-page .iyu-motion-lede > :nth-child(4) { animation-delay: 180ms; }
    body.iyu-motion-page .iyu-motion-lede > :nth-child(n+5) { animation-delay: 220ms; }
    body.iyu-motion-page .iyu-motion-frame {
      animation-name: iyu-editorial-frame-small; animation-duration: 640ms; animation-delay: 80ms;
    }
  }

  @media (prefers-reduced-motion:reduce) {
    body.iyu-motion-page :is(.iyu-enter-active,.iyu-motion-lede > *,.iyu-motion-frame),
    body.iyu-motion-page .iyu-motion-heading::after,
    body.iyu-motion-page .iyu-motion-heading.iyu-enter-active::after {
      animation: none !important; translate: none !important; scale: none !important;
      clip-path: none !important; filter: none !important; opacity: 1 !important;
      will-change: auto !important;
    }
    body.iyu-motion-page :is(.iyu-motion-card,.iyu-motion-link,.iyu-motion-link svg,nav.fixed) {
      transition: none !important; translate: none !important;
    }
    body.iyu-motion-page .iyu-ambient-float { animation: none !important; }
  }
}

/* Negative insets keep shadows and descenders out of the clip at every step. */
@keyframes iyu-editorial-lede {
  from { opacity: 0; translate: 0 14px; filter: blur(3px); clip-path: inset(-40% -25% 100% -25%); }
  55%  { filter: blur(0); }
  to   { opacity: 1; translate: 0 0; filter: none; clip-path: inset(-40% -25% -40% -25%); }
}
@keyframes iyu-editorial-lede-small {
  from { opacity: 0; translate: 0 10px; }
  to   { opacity: 1; translate: 0 0; }
}
@keyframes iyu-editorial-heading {
  from { opacity: 0; translate: 0 12px; clip-path: inset(-40% -25% 100% -25%); }
  to   { opacity: 1; translate: 0 0; clip-path: inset(-40% -25% -40% -25%); }
}
@keyframes iyu-editorial-rise {
  from { opacity: 0; translate: 0 16px; }
  to   { opacity: 1; translate: 0 0; }
}
@keyframes iyu-editorial-rise-small {
  from { opacity: 0; translate: 0 8px; }
  to   { opacity: 1; translate: 0 0; }
}
/* Cards settle inward, so a grid can never widen the page while it enters. */
@keyframes iyu-editorial-card {
  from { opacity: 0; translate: 0 16px; scale: .988; }
  to   { opacity: 1; translate: 0 0; scale: 1; }
}
/* Media keeps a visible opacity throughout, so it still counts as the first paint. */
@keyframes iyu-editorial-frame {
  from { opacity: .38; translate: 0 18px; clip-path: inset(-20% -20% 22% -20%); }
  to   { opacity: 1; translate: 0 0; clip-path: inset(-20% -20% -20% -20%); }
}
@keyframes iyu-editorial-frame-small {
  from { opacity: .5; translate: 0 10px; }
  to   { opacity: 1; translate: 0 0; }
}
@keyframes iyu-editorial-rule {
  from { scale: 0 1; }
  to   { scale: 1 1; }
}