/* ==========================================================================
   IPAM — motion layer styles (paired with assets/js/motion.js)
   html.motion is set inline in <head> unless prefers-reduced-motion.
   ========================================================================== */

/* Pre-hide what motion.js reveals (until .m-in). Same lists as motion.js. */
html.motion :is(.hero-slider__content, .page-hero__inner,
  .section-head, .join-band__text, .home-intro__text, .home-focus__text, .highlights-band__text, .newsletter__text, .core-focus__text, .growth-chart__head,
  .card, .media-card, .compact-card, .doc-tile, .info-card, .feature-card, .member-card, .partner-card, .org-card, .pgrid-card, .job-card, .quick-card,
  .ne-card, .highlight, .stat, .mm-stat, .accordion__item, .strip, .cta-box, .person-row, .secretariat-card, .form-panel, .timeline__entry,
  .site-footer__col, .pathways__cards > *, .home-news__item, .mm-card, .mm-panel, .link-list a, .growth-chart__plot):not(.m-in) {
  opacity: 0;
}

/* Lenis smooth scroll requirements */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* Split words */
.m-word { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.m-word__i { display: inline-block; will-change: transform; }

/* Opening curtain */
html.curtain body::before, html.curtain body::after { content: ""; position: fixed; z-index: 1000; pointer-events: none; }
html.curtain body::before { inset: 0; background: var(--navy-900); clip-path: inset(0 0 0 0); transition: clip-path 1.05s cubic-bezier(.77, 0, .18, 1); }
html.curtain body::after {
  left: 50%; top: 50%; width: 120px; height: 48px; translate: -50% -50%;
  background: url("../img/logo-mark.png") center / contain no-repeat;
  animation: m-curtain-logo 0.9s cubic-bezier(.22, 1, .36, 1) both; transition: opacity .35s, translate .6s;
}
html.curtain-out body::before { clip-path: inset(0 0 100% 0); }
html.curtain-out body::after { opacity: 0; translate: -50% -90%; }
@keyframes m-curtain-logo { from { opacity: 0; translate: -50% -20%; } to { opacity: 1; translate: -50% -50%; } }

/* Scroll progress */
.scroll-progress {
  position: fixed; left: 0; right: 0; top: 0; height: 3px; z-index: 90; pointer-events: none;
  background: linear-gradient(90deg, var(--green-600), var(--sage-500) 55%, var(--amber-500));
  transform: scaleX(0); transform-origin: 0 50%;
}

/* Sticky header: compacts + frosted when scrolled, slides away when scrolling down */
.site-header { position: sticky; top: 0; z-index: 80; transition: transform .5s cubic-bezier(.22, 1, .36, 1), padding .35s, background-color .35s, box-shadow .35s; }
.site-header.is-scrolled { padding-top: 10px; padding-bottom: 10px; background: rgba(27, 36, 80, 0.86); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4); box-shadow: 0 10px 30px -12px rgba(0, 0, 13, 0.45); }
.site-header.is-hidden { transform: translateY(-100%); }
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 0; } }

/* Nav pills: dot grows, link lifts */
.nav-pill a::before { transition: transform .35s cubic-bezier(.34, 1.56, .64, 1); }
.nav-pill a:hover::before, .nav-pill a[aria-current="page"]::before { transform: scale(1.6); }

/* Hero photos: slow Ken Burns on the active slide */
.hero-slider__slides { will-change: transform; }
.hero-slider__slide img { transform-origin: 60% 50%; }
.hero-slider__slide.is-active img { animation: m-kenburns 9s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes m-kenburns { from { transform: scale(1.16); } to { transform: scale(1); } }
.hero-slider__dots button { transition: width .45s cubic-bezier(.22, 1, .36, 1), background .3s; }

/* Buttons: sheen sweep + arrow nudge */
.btn, .btn-mono { position: relative; overflow: hidden; isolation: isolate; will-change: transform; }
.btn:not(summary)::after, .btn-mono::after { /* summary.btn keeps its own ::after chevron */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.28) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform .8s cubic-bezier(.22, 1, .36, 1);
}
.btn:not(summary):hover::after, .btn-mono:hover::after { transform: translateX(120%); }
.link-more { transition: gap .35s cubic-bezier(.22, 1, .36, 1), color .2s; }
.link-more:hover { gap: 14px; }

/* Cards: lift, deeper shadow, image zoom; tilt is driven by JS (.m-tilt) */
.m-tilt { will-change: transform; transition: box-shadow .45s; }
.m-tilt:hover { box-shadow: 0 24px 48px -18px rgba(27, 36, 80, 0.35); }
.media-card__img img, .doc-tile__thumb img, .member-card__photo img { transition: transform 1.2s cubic-bezier(.22, 1, .36, 1); }
.media-card:hover .media-card__img img, .doc-tile:hover .doc-tile__thumb img, .member-card:hover .member-card__photo img { transform: scale(1.06); }
.card__icon { transition: transform .6s cubic-bezier(.34, 1.56, .64, 1); }
.card:hover .card__icon { transform: rotate(-8deg) scale(1.08); }

/* Timelines: coloured progress rail + dots light up */
.m-rail::after {
  content: ""; position: absolute; left: 6px; top: 6px; bottom: 6px; width: 2px; z-index: 0; border-radius: 2px;
  background: linear-gradient(180deg, var(--green-600), var(--sage-700) 50%, var(--amber-500));
  transform: scaleY(var(--rail, 0)); transform-origin: 50% 0;
}
.timeline__entry::before { z-index: 1; transition: transform .6s cubic-bezier(.34, 1.56, .64, 1) .15s; }
html.motion .timeline__entry:not(.m-in)::before { transform: scale(0); }

/* Members map: markers pop in, organisation markers pulse */
html.motion .mm-markers:not(.is-in) .mm-marker { scale: 0; }
.mm-markers.is-in .mm-marker { transition: scale .75s cubic-bezier(.34, 1.56, .64, 1) calc(var(--i, 0) * 22ms), transform .2s; }
.mm-marker--org::after {
  content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--mm-red, #e5484d);
  animation: m-pulse 2.6s cubic-bezier(.22, 1, .36, 1) infinite; pointer-events: none;
}
@keyframes m-pulse { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(2.2); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .hero-slider__slide.is-active img, .mm-marker--org::after { animation: none; }
  .site-header, .btn::after, .btn-mono::after { transition: none; }
}