/* =========================================================
   IPCI 2027 — motion layer
   Transform/opacity only, GPU-friendly, and entirely
   switched off under prefers-reduced-motion.
   Everything below is progressive enhancement: without JS
   the .motion class is never added and the page renders
   fully visible and static.
   ========================================================= */

:root{
  --ease-out:cubic-bezier(.22,.61,.36,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);
  --ease-spring:cubic-bezier(.34,1.26,.64,1);
  --dur-fast:.2s;
  --dur:.4s;
  --dur-slow:.58s;
}

/* ---------------------------------------------------------
   1 · Scroll reveal
   --------------------------------------------------------- */
.motion [data-reveal]{
  opacity:0;
  transform:translate3d(0,14px,0);
  transition:
    opacity var(--dur) var(--ease-out) var(--reveal-delay,0ms),
    transform var(--dur) var(--ease-out) var(--reveal-delay,0ms);
  will-change:opacity,transform;
}
.motion [data-reveal="left"]{transform:translate3d(-18px,0,0)}
.motion [data-reveal="right"]{transform:translate3d(18px,0,0)}
.motion [data-reveal="scale"]{transform:scale(.965)}
.motion [data-reveal].is-in{
  opacity:1;transform:none;will-change:auto;
}
/* Present on arrival = no entrance. Reveals are for things you scroll to;
   animating what is already in view is what made page switches drag. */
.motion [data-reveal].is-instant,
.motion .rule.is-instant{transition:none!important;animation:none!important}

/* ---------------------------------------------------------
   2 · Section rules draw themselves in
   --------------------------------------------------------- */
.motion .rule{
  transform-origin:left center;
  transform:scaleX(0);
  transition:transform var(--dur-slow) var(--ease-out) 40ms;
}
.motion .rule.is-in{transform:scaleX(1)}

.motion .section-head{
  background-image:linear-gradient(90deg,var(--line),var(--line));
  background-repeat:no-repeat;
  background-position:0 100%;
  background-size:0% 1px;
  border-bottom-color:transparent;
  transition:background-size .7s var(--ease-out) 60ms;
}
.motion .section-head.is-in{background-size:100% 1px}

/* ---------------------------------------------------------
   3 · Hero — the mark breathes, the type rises
   --------------------------------------------------------- */
.cover-mark{position:relative}
.cover-mark::before{
  content:"";position:absolute;inset:-14% -10%;
  background:radial-gradient(closest-side,rgba(21,96,196,.16),rgba(114,57,148,.09) 55%,transparent 72%);
  filter:blur(6px);pointer-events:none;z-index:0;
}
.cover-mark img{position:relative;z-index:1}

.motion .cover-mark::before{animation:markGlow 7.5s var(--ease-soft) infinite}
.motion .cover-mark img{
  opacity:0;transform:scale(.9) rotate(-7deg);
  animation:markIn .85s var(--ease-spring) .06s forwards;
}
.motion .cover-mark.settled img{
  opacity:1;                       /* markFloat animates transform only — without this
                                      the base opacity:0 reasserts itself on handoff */
  animation:markFloat 9s var(--ease-soft) infinite;
}

@keyframes markIn{
  to{opacity:1;transform:scale(1) rotate(0)}
}
@keyframes markFloat{
  0%,100%{transform:translateY(0) rotate(0)}
  50%{transform:translateY(-11px) rotate(.7deg)}
}
@keyframes markGlow{
  0%,100%{opacity:.75;transform:scale(1)}
  50%{opacity:1;transform:scale(1.06)}
}

/* Cover wordmark: each line masked and lifted */
.motion .cover-type .line-1,
.motion .cover-type .line-2,
.motion .cover-type .line-3,
.motion .cover-type .eyebrow,
.motion .cover-type .cover-tagline,
.motion .cover-type .btn-row{
  opacity:0;transform:translate3d(0,26px,0);
  animation:lineUp .55s var(--ease-out) forwards;
}
.motion .cover-type .eyebrow{animation-delay:.02s}
.motion .cover-type .line-1{animation-delay:.08s}
.motion .cover-type .line-2{animation-delay:.14s}
.motion .cover-type .line-3{animation-delay:.2s}
.motion .cover-type .cover-tagline{animation-delay:.26s}
.motion .cover-type .btn-row{animation-delay:.32s}

@keyframes lineUp{to{opacity:1;transform:none}}

/* ---------------------------------------------------------
   4 · The network ground drifts, very slowly
   --------------------------------------------------------- */
.motion .net-light,
.motion .page-head.net-light{
  animation:netDrift 90s linear infinite;
}
.motion .coverbar::before,
.motion .cta-band::before,
.motion .band-dark.net-dark::before,
.motion .panel-navy::before{
  animation:netDrift 120s linear infinite reverse;
}
@keyframes netDrift{
  from{background-position:0 0}
  to{background-position:1400px 0}
}

/* A few slow "signal" pulses over the navy grounds */
.band-dark.net-dark::after,
.cta-band::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:
    radial-gradient(circle at 18% 30%, rgba(68,243,250,.16), transparent 26%),
    radial-gradient(circle at 76% 68%, rgba(128,64,212,.16), transparent 24%),
    radial-gradient(circle at 52% 12%, rgba(21,96,196,.18), transparent 20%);
  opacity:0;
}
.motion .band-dark.net-dark::after,
.motion .cta-band::after{animation:signalPulse 12s var(--ease-soft) infinite}
@keyframes signalPulse{
  0%,100%{opacity:.35;transform:scale(1)}
  50%{opacity:.85;transform:scale(1.07)}
}

/* ---------------------------------------------------------
   5 · Header — condenses on scroll
   --------------------------------------------------------- */
.site-header{
  transition:
    box-shadow .4s var(--ease-soft),
    background-color .4s var(--ease-soft),
    border-color .4s var(--ease-soft);
}
.site-header .header-inner{transition:min-height .4s var(--ease-soft)}
.brand img{transition:height .4s var(--ease-soft)}
.motion .site-header.is-stuck{
  box-shadow:0 6px 26px rgba(6,36,84,.10);
  background:rgba(255,255,255,.94);
  backdrop-filter:saturate(170%) blur(10px);
}
.motion .site-header.is-stuck .header-inner{min-height:62px}
.motion .site-header.is-stuck .brand img{height:40px}

/* Scroll progress hairline */
.scroll-progress{
  position:fixed;top:0;left:0;height:2px;z-index:120;
  width:100%;transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--navy),var(--blue) 46%,var(--cyan) 74%,var(--amber));
  pointer-events:none;
}

/* Nav link underline wipe */
.nav a:not(.btn){position:relative}
.nav a:not(.btn)::after{
  content:"";position:absolute;left:.78em;right:.78em;bottom:.34em;height:2px;
  background:var(--blue);transform:scaleX(0);transform-origin:right center;
  transition:transform .34s var(--ease-out);
}
.motion .nav a:not(.btn):hover::after{transform:scaleX(1);transform-origin:left center}
@media (max-width:1010px){.nav a:not(.btn)::after{display:none}}

/* ---------------------------------------------------------
   6 · Buttons — lift and sheen
   --------------------------------------------------------- */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(105deg,transparent 32%,rgba(255,255,255,.26) 50%,transparent 68%);
  transform:translateX(-130%);
}
.motion .btn:hover::after{transition:transform .72s var(--ease-out);transform:translateX(130%)}
.motion .btn{transition:transform .22s var(--ease-spring),background-color .22s var(--ease-soft),color .22s var(--ease-soft),box-shadow .22s var(--ease-soft)}
.motion .btn:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(6,36,84,.18)}
.motion .btn:active{transform:translateY(0) scale(.985)}
.motion .btn-outline-navy:hover{box-shadow:0 8px 22px rgba(6,36,84,.14)}

/* ---------------------------------------------------------
   7 · Cards, stats, chips, people — hover behaviour
   --------------------------------------------------------- */
.card{position:relative;overflow:hidden}
.card::before{
  content:"";position:absolute;left:0;top:0;height:3px;width:100%;
  background:var(--navy);transform:scaleX(0);transform-origin:left center;
}
.motion .card::before{transition:transform .5s var(--ease-out)}
.motion .card:hover::before{transform:scaleX(1)}
.motion .card{transition:transform .34s var(--ease-out),border-color .34s var(--ease-soft)}
.motion .card:hover{transform:translateY(-4px);border-color:#BFCDE4}
.motion .card-num{transition:color .34s var(--ease-soft),transform .34s var(--ease-out)}
.motion .card:hover .card-num{color:var(--navy);transform:translateX(2px)}

.motion .stat{transition:transform .34s var(--ease-out),border-left-color .34s var(--ease-soft)}
.motion .stat:hover{transform:translateY(-4px);border-left-color:var(--cyan)}
.motion .stat img{transition:transform .5s var(--ease-spring)}
.motion .stat:hover img{transform:scale(1.1) rotate(-4deg)}

.motion .chip{transition:transform .26s var(--ease-spring),background-color .26s var(--ease-soft),color .26s var(--ease-soft)}
.motion .chip:hover{transform:translateY(-2px);background:var(--navy);color:#fff}

.person{overflow:hidden}
.person img{transition:transform .8s var(--ease-out),filter .8s var(--ease-soft)}
.motion .person{transition:transform .38s var(--ease-out),border-color .38s var(--ease-soft)}
.motion .person:hover{transform:translateY(-5px);border-color:#BFCDE4}
.motion .person:hover img{transform:scale(1.055);filter:grayscale(24%) contrast(1.06)}

.motion .ticks li{transition:transform .3s var(--ease-out),color .3s var(--ease-soft)}
.motion .ticks li:hover{transform:translateX(4px)}
.motion .ticks li::before{transition:transform .3s var(--ease-spring)}
.motion .ticks li:hover::before{transform:scale(1.45)}

.motion tbody tr{transition:background-color .26s var(--ease-soft)}
.motion tbody tr:hover td,.motion tbody tr:hover th{background:#EFF4FB}

/* Numbered list markers slide in with their row */
.motion .numbered .n{transition:color .4s var(--ease-soft),transform .5s var(--ease-out)}
.motion .numbered .item:hover .n{color:var(--navy);transform:translateY(-2px)}

/* ---------------------------------------------------------
   8 · Photo bands — quiet parallax + slow ken-burns
   --------------------------------------------------------- */
.photoband{position:relative}
.photoband img{
  will-change:transform;
  transform:translate3d(0,var(--py,0px),0) scale(1.14);
}
.motion .split-media{overflow:hidden;border-radius:2px}
.motion .split-media img{transition:transform 1.1s var(--ease-out)}
.motion .split-media:hover img{transform:scale(1.035)}

/* ---------------------------------------------------------
   9 · Counters
   --------------------------------------------------------- */
.stat .num{font-variant-numeric:tabular-nums}

/* ---------------------------------------------------------
   10 · Page transition
   --------------------------------------------------------- */
.motion body{animation:pageIn .26s var(--ease-out)}
@keyframes pageIn{from{opacity:0;transform:translate3d(0,5px,0)}to{opacity:1;transform:none}}
.motion body.is-leaving{
  opacity:0;transform:translate3d(0,-4px,0);
  transition:opacity .16s var(--ease-soft),transform .16s var(--ease-soft);
}

/* ---------------------------------------------------------
   11 · Forms
   --------------------------------------------------------- */
.motion .field input,.motion .field select,.motion .field textarea{
  transition:border-color .24s var(--ease-soft),box-shadow .24s var(--ease-soft),transform .24s var(--ease-out);
}
.motion .field input:focus,.motion .field select:focus,.motion .field textarea:focus{transform:translateY(-1px)}
.motion .form-status{animation:lineUp .42s var(--ease-out)}
.motion .field.invalid input,.motion .field.invalid select,.motion .field.invalid textarea{animation:nudge .38s var(--ease-soft)}
@keyframes nudge{
  0%,100%{transform:translateX(0)}
  22%{transform:translateX(-5px)}
  58%{transform:translateX(4px)}
  82%{transform:translateX(-2px)}
}

/* ---------------------------------------------------------
   12 · Footer + misc
   --------------------------------------------------------- */
.motion .footer-grid a{transition:transform .26s var(--ease-out),color .26s var(--ease-soft)}
.motion .footer-grid a:hover{transform:translateX(3px)}
.motion .footer-logo{transition:transform .7s var(--ease-spring)}
.motion .site-footer:hover .footer-logo{transform:rotate(-6deg) scale(1.05)}
.motion .rail{transition:opacity .4s var(--ease-soft),transform .5s var(--ease-out)}
.motion .rail:hover{transform:translateY(-50%) rotate(180deg) translateY(3px)}

/* ---------------------------------------------------------
   13 · Off switch
   --------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .motion [data-reveal],
  .motion .rule,
  .motion .section-head,
  .motion .cover-type .line-1,
  .motion .cover-type .line-2,
  .motion .cover-type .line-3,
  .motion .cover-type .eyebrow,
  .motion .cover-type .cover-tagline,
  .motion .cover-type .btn-row,
  .motion .cover-mark img{
    opacity:1 !important;transform:none !important;animation:none !important;
    background-size:100% 1px !important;border-bottom-color:var(--line) !important;
  }
  .motion .net-light,.motion .coverbar::before,.motion .cta-band::before,
  .motion .band-dark.net-dark::before,.motion .panel-navy::before,
  .motion .band-dark.net-dark::after,.motion .cta-band::after,
  .motion .cover-mark::before,.motion body{animation:none !important}
  .photoband img{transform:none !important}
  .motion .btn:hover,.motion .card:hover,.motion .stat:hover,
  .motion .person:hover,.motion .chip:hover{transform:none !important}
  .scroll-progress{display:none}
}

/* Cover date joins the hero timeline between the wordmark and the tagline */
.motion .cover-type .cover-date{
  opacity:0;transform:translate3d(0,18px,0);
  animation:lineUp .55s var(--ease-out) .24s forwards;
}
.motion .cover-type .cover-tagline{animation-delay:.3s}
.motion .cover-type .btn-row{animation-delay:.36s}
@media (prefers-reduced-motion:reduce){
  .motion .cover-type .cover-date{opacity:1 !important;transform:none !important;animation:none !important}
}