/* Formrelay motion layer.
   One idea runs through the site: a line that travels from sketch to shelf.
   Everything here is additive. Remove motion.css + motion.js and the site renders as before.
   All movement is switched off for visitors who ask for reduced motion. */

:root{
  --fr-ease:cubic-bezier(.2,.8,.2,1);
  --fr-ease-io:cubic-bezier(.65,0,.2,1);
  --fr-gold:#f4c453;
  --fr-ink:#20394b;
}

/* Hidden states are applied without animating out */
.fr-init,.fr-init *,.fr-init:before,.fr-init:after{transition:none!important}

/* Hero headline lines (markup: .h1-line > span) */
.h1-line{display:block}

/* Reading progress, every page */
.fr-progress{position:fixed;left:0;top:0;right:0;height:2px;background:var(--fr-gold);transform-origin:0 50%;transform:scaleX(0);z-index:60;pointer-events:none}

/* Table-of-contents state (story pages) */
.article-toc a{position:relative;transition:color .3s ease,padding-left .4s var(--fr-ease)}
.article-toc a:before{content:'';position:absolute;left:0;top:.75em;width:0;height:2px;background:#bb984c;transition:width .4s var(--fr-ease)}
.article-toc a.is-active{color:#20394b;padding-left:22px}
.article-toc a.is-active:before{width:14px}

/* Numbers never jump in width while counting */
.revenue-block strong{font-variant-numeric:tabular-nums}

@media (prefers-reduced-motion:no-preference){

  /* ---------- Page-load choreography (pure CSS, so nothing flashes) ---------- */

  .hero-top,.hero-copy p,.hero-actions,.hero-bottom,.hero-stage-label,.hero-stage-caption{animation:fr-up .9s var(--fr-ease) both}
  .hero-top{animation-delay:.05s}
  .hero-copy p{animation-delay:.55s}
  .hero-actions{animation-delay:.7s}
  .hero-stage-label,.hero-stage-caption{animation-delay:1.25s}
  .hero-bottom{animation-delay:1.1s}

  .h1-line{overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
  .h1-line>span{display:inline-block;animation:fr-rise 1.05s var(--fr-ease) both}
  .h1-line:nth-child(2)>span{animation-delay:.12s}
  .h1-line:nth-child(3)>span{animation-delay:.24s}
  .hero-copy .handwritten:after{transform-origin:0 50%;animation:fr-underline .75s .95s var(--fr-ease-io) both}

  .hero-products{animation:fr-panel 1.1s .15s var(--fr-ease-io) both}
  .hero-products:before{animation:fr-block 1s .55s var(--fr-ease-io) both}
  .hero-object img{animation:fr-object 1.2s var(--fr-ease) backwards,fr-bob 7s 2s ease-in-out infinite}
  .hero-ring img{animation-delay:.75s,2s}
  .hero-band img{animation-delay:.9s,3.1s}
  .hero-relief img{animation-delay:1.05s,4.2s}
  .hero-object>span{animation:fr-up .8s 1.4s var(--fr-ease) both}
  .hero-object{transition:translate .9s var(--fr-ease)}
  .hero-bottom a span{display:inline-block;animation:fr-nudge 2.4s 2.4s ease-in-out infinite}

  .article-hero>*,.journal-intro>*{animation:fr-up .9s var(--fr-ease) both}
  .article-hero>*:nth-child(2),.journal-intro>*:nth-child(2){animation-delay:.08s}
  .article-hero>*:nth-child(3),.journal-intro>*:nth-child(3){animation-delay:.16s}
  .article-hero>*:nth-child(4){animation-delay:.24s}
  .article-hero>*:nth-child(5){animation-delay:.34s}
  .article-hero>*:nth-child(6){animation-delay:.44s}
  .article-hero>*:nth-child(7){animation-delay:.54s}
  .article-hero h1,.journal-intro h1{animation:fr-clip 1.1s .12s var(--fr-ease) both}
  .journal-intro h1>span{display:inline-block;animation:fr-drop .9s .8s cubic-bezier(.3,1.6,.5,1) both}

  .article-product{animation:fr-reveal-img 1.3s .35s var(--fr-ease-io) both}
  .article-product img{animation:fr-settle 1.8s .35s var(--fr-ease) both}
  .article-facts{animation:fr-slide-in 1.1s .55s var(--fr-ease-io) both}
  .article-facts dl>div,.article-facts .eyebrow,.article-facts img,.article-facts .network-title{animation:fr-up .7s var(--fr-ease) both}
  .article-facts .eyebrow{animation-delay:.9s}
  .article-facts img,.article-facts .network-title{animation-delay:1s}
  .article-facts dl>div:nth-child(1){animation-delay:1.1s}
  .article-facts dl>div:nth-child(2){animation-delay:1.18s}
  .article-facts dl>div:nth-child(3){animation-delay:1.26s}
  .article-facts dl>div:nth-child(4){animation-delay:1.34s}
  .guide-lead,.insight-photo{animation:fr-up 1s .45s var(--fr-ease) both}

  /* ---------- Scroll reveals (classes added by motion.js, only below the fold) ---------- */

  .fr-up{opacity:0;transform:translateY(26px);transition:opacity .9s var(--fr-ease),transform 1s var(--fr-ease);transition-delay:var(--fr-d,0s)}
  .fr-up.is-in{opacity:1;transform:none}

  .fr-lines .fr-line{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
  .fr-lines .fr-line>span{display:inline-block;transform:translateY(105%);transition:transform 1.05s var(--fr-ease);transition-delay:calc(var(--fr-d,0s) + var(--i,0) * .1s)}
  .fr-lines.is-in .fr-line>span{transform:none}

  .fr-wipe{clip-path:inset(100% 0 0 0);transition:clip-path 1.2s var(--fr-ease-io);transition-delay:var(--fr-d,0s)}
  .fr-wipe img{transform:scale(1.14);transition:transform 1.8s var(--fr-ease);transition-delay:var(--fr-d,0s)}
  .fr-wipe.is-in{clip-path:inset(0 0 0 0)}
  .fr-wipe.is-in img{transform:none}

  .fr-sweep{clip-path:inset(0 100% 0 0);transition:clip-path 1.1s var(--fr-ease-io);transition-delay:var(--fr-d,0s)}
  .fr-sweep.is-in{clip-path:inset(0 0 0 0)}

  /* Timeline: the line draws itself, then a gold baton keeps running it */
  .fr-snake .fr-track{stroke-dasharray:var(--fr-len) var(--fr-len);stroke-dashoffset:var(--fr-len);transition:stroke-dashoffset 2.4s var(--fr-ease-io) .1s}
  .fr-snake.is-in .fr-track{stroke-dashoffset:0}
  .fr-snake .fr-baton{stroke:var(--fr-gold);stroke-width:5;stroke-linecap:round;stroke-dasharray:44px calc(var(--fr-len) + 200px);stroke-dashoffset:44px;opacity:0}
  .fr-snake.is-in .fr-baton{opacity:1;animation:fr-run 5.5s 2.6s linear infinite;transition:opacity .4s 2.5s}
  .fr-snake .fr-arrows{opacity:0;transition:opacity .6s 2.2s}
  .fr-snake.is-in .fr-arrows{opacity:1}
  .fr-snake .step-node{transform:scale(.2);opacity:0;transition:transform .7s cubic-bezier(.3,1.5,.5,1),opacity .3s}
  .fr-snake .workflow-step>*:not(.step-node){opacity:0;transform:translateY(14px);transition:opacity .7s var(--fr-ease),transform .8s var(--fr-ease)}
  .fr-snake .workflow-step:nth-child(1)>*{transition-delay:.25s}
  .fr-snake .workflow-step:nth-child(2)>*{transition-delay:.65s}
  .fr-snake .workflow-step:nth-child(3)>*{transition-delay:1.1s}
  .fr-snake .workflow-step:nth-child(4)>*{transition-delay:1.6s}
  .fr-snake .workflow-step:nth-child(5)>*{transition-delay:2.05s}
  .fr-snake.is-in .workflow-step>*{opacity:1;transform:none}
  .fr-snake .workflow-end{opacity:0;transform:translateX(-16px);transition:opacity .8s 2.4s,transform .9s 2.4s var(--fr-ease)}
  .fr-snake.is-in .workflow-end{opacity:1;transform:none}
  .fr-snake.is-in .workflow-step:nth-child(5) .step-node{animation:fr-pulse 2.6s 3s ease-out infinite}

  /* Diagrams in the stories: each stage lights in order */
  .decision-flow>ol>li:after{content:'';position:absolute;left:0;right:0;top:-2px;height:2px;background:var(--fr-ink);transform:scaleX(0);transform-origin:0 50%}
  .fr-flow>ol>li{opacity:.25;transition:opacity .6s ease}
  .fr-flow.is-in>ol>li{opacity:1}
  .fr-flow.is-in>ol>li:after{animation:fr-line .8s var(--fr-ease-io) both}
  .fr-flow>ol>li:nth-child(1),.fr-flow.is-in>ol>li:nth-child(1):after{transition-delay:.2s;animation-delay:.2s}
  .fr-flow>ol>li:nth-child(2),.fr-flow.is-in>ol>li:nth-child(2):after{transition-delay:.6s;animation-delay:.6s}
  .fr-flow>ol>li:nth-child(3),.fr-flow.is-in>ol>li:nth-child(3):after{transition-delay:1s;animation-delay:1s}
  .fr-flow>ol>li:nth-child(4),.fr-flow.is-in>ol>li:nth-child(4):after{transition-delay:1.4s;animation-delay:1.4s}
  .fr-flow>ol>li:nth-child(5),.fr-flow.is-in>ol>li:nth-child(5):after{transition-delay:1.8s;animation-delay:1.8s}

  /* Quotes: the gold rule grows first, the words follow */
  .fr-quote{position:relative}
  .fr-quote:before{content:'';position:absolute;left:-3px;top:0;bottom:0;width:3px;background:#b29452;transform:scaleY(0);transform-origin:50% 0;transition:transform .8s var(--fr-ease-io)}
  .fr-quote>*{opacity:0;transform:translateX(-10px);transition:opacity .8s .35s,transform .9s .35s var(--fr-ease)}
  .fr-quote.is-in:before{transform:none}
  .fr-quote.is-in>*{opacity:1;transform:none}

  /* ---------- Hover craft ---------- */

  .fr-magnet{transition:translate .5s var(--fr-ease),background .2s}
  .service-entry-grid a strong b,.guide-read span,.next-story a>span,.journal-card-image>span{display:inline-block;transition:translate .45s var(--fr-ease)}
  .service-entry-grid a:hover strong b,.guide-read:hover span,.journal-card-image:hover>span{translate:3px -3px}
  .service-entry-grid a{transition:translate .5s var(--fr-ease),box-shadow .5s var(--fr-ease)}
  .service-entry-grid a:hover{translate:0 -4px;box-shadow:0 18px 30px -22px rgba(32,57,75,.45)}
  .next-story a>span{transition:translate .6s var(--fr-ease)}
  .next-story a:hover>span{translate:10px -10px}
  .next-story a h2{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .7s var(--fr-ease-io)}
  .next-story a:hover h2{background-size:100% 1px}
  .industry-list span{transition:padding-left .5s var(--fr-ease),color .3s}
  .industry-list span:hover{padding-left:14px;color:var(--fr-ink)}
  .product-visual img,.approach-cover img,.journal-card-image img{transition:translate .9s var(--fr-ease),transform .9s var(--fr-ease)}
  .fr-parallax{scale:1.14;will-change:translate}
}

@keyframes fr-up{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes fr-rise{from{transform:translateY(108%)}to{transform:none}}
@keyframes fr-clip{from{clip-path:inset(0 0 100% 0);transform:translateY(24px)}to{clip-path:inset(0 0 -10% 0);transform:none}}
@keyframes fr-underline{from{transform:rotate(-2deg) scaleX(0)}to{transform:rotate(-2deg) scaleX(1)}}
@keyframes fr-panel{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes fr-block{from{clip-path:inset(0 100% 100% 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes fr-object{from{opacity:0;transform:translateY(46px) scale(.92);filter:blur(10px)}to{opacity:1;transform:none;filter:none}}
@keyframes fr-bob{0%,100%{translate:0 0}50%{translate:0 -7px}}
@keyframes fr-nudge{0%,60%,100%{transform:none}30%{transform:translateY(4px)}}
@keyframes fr-drop{from{opacity:0;transform:translateY(-60%)}to{opacity:1;transform:none}}
@keyframes fr-reveal-img{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes fr-settle{from{transform:scale(1.12)}to{transform:none}}
@keyframes fr-slide-in{from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0 0 0 0)}}
@keyframes fr-run{from{stroke-dashoffset:44px}to{stroke-dashoffset:calc(var(--fr-len) * -1)}}
@keyframes fr-pulse{0%{box-shadow:0 0 0 0 rgba(244,196,83,.75)}70%,100%{box-shadow:0 0 0 16px rgba(244,196,83,0)}}
@keyframes fr-line{from{transform:scaleX(0)}to{transform:scaleX(1)}}

@media (prefers-reduced-motion:reduce){
  .fr-progress{display:none}
}