/* Creaticio Motion V9.17 — additive visual layer, V9.16 CMS safe.
   Existing motion-v7.js, CRM, forms, fonts, brand tokens and menu are retained. */
:root{--m17-ease:cubic-bezier(.22,1,.36,1)}
/* Animations only opt in once JavaScript has found the corresponding page. */
html.motion17-active .v6-hero {position:relative;isolation:isolate;overflow:hidden}
html.motion17-active .v6-hero::before{
  content:"";position:absolute;pointer-events:none;z-index:-1;
  width:min(620px,60vw);height:min(620px,60vw);right:-12%;top:-18%;
  background:radial-gradient(circle,rgba(255,121,59,.14) 0%,rgba(225,42,84,.075) 34%,transparent 69%);
  filter:blur(14px);border-radius:50%;
  animation:m17-ambient 12s ease-in-out infinite alternate;
}
@keyframes m17-ambient{from{transform:translate3d(0,-10px,0) scale(.95);opacity:.7}to{transform:translate3d(-20px,22px,0) scale(1.06);opacity:1}}
html.motion17-active .v6-hero .kicker,
html.motion17-active .v6-hero h1 .motion17-line,
html.motion17-active .v6-hero .lead,
html.motion17-active .v6-hero .actions,
html.motion17-active .v6-hero .hero-context-link,
html.motion17-active .v6-hero .system-map,
html.motion17-active .v6-hero .v6-hero-foot{
  opacity:0;transform:translate3d(0,20px,0);
  transition:opacity .85s var(--m17-ease), transform .85s var(--m17-ease);
}
html.motion17-active .v6-hero h1 .motion17-line{display:inline-block;transform:translate3d(0,28px,0)}
/* Preserve the original first-line text color; V7 colors other hero spans orange. */
html.motion17-active .v6-hero h1 span.motion17-first{color:inherit;background:none!important;animation:none!important}
html.motion17-active.motion17-entered .v6-hero .kicker,
html.motion17-active.motion17-entered .v6-hero h1 .motion17-line,
html.motion17-active.motion17-entered .v6-hero .lead,
html.motion17-active.motion17-entered .v6-hero .actions,
html.motion17-active.motion17-entered .v6-hero .hero-context-link,
html.motion17-active.motion17-entered .v6-hero .system-map,
html.motion17-active.motion17-entered .v6-hero .v6-hero-foot{opacity:1;transform:translate3d(0,0,0)}
html.motion17-active .v6-hero .kicker{transition-delay:.04s}
html.motion17-active .v6-hero .motion17-first{transition-delay:.12s}
html.motion17-active .v6-hero h1 .motion17-line:not(.motion17-first){transition-delay:.23s}
html.motion17-active .v6-hero .lead{transition-delay:.36s}
html.motion17-active .v6-hero .actions{transition-delay:.44s}
html.motion17-active .v6-hero .hero-context-link{transition-delay:.52s}
html.motion17-active .v6-hero .system-map{transition-delay:.31s}
html.motion17-active .v6-hero .v6-hero-foot{transition-delay:.58s}
/* Keep the text perfectly still while the side map follows the pointer by a few pixels. */
@media (hover:hover) and (pointer:fine) and (min-width:981px){
 html.motion17-active.motion17-entered .v6-hero .system-map{
  transform:translate3d(var(--m17-map-x,0px),var(--m17-map-y,0px),0);
  transition:opacity .85s var(--m17-ease),transform .6s var(--m17-ease);
 }
 html.motion17-active .v6-hero .actions a{transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
 html.motion17-active .v6-hero .actions a:hover{transform:translateY(-3px)}
}
/* Storytelling cues; headings already use V7's intersection reveal, so no duplicate hidden states. */
html.motion17-active .motion17-story .kicker{display:flex;align-items:center;gap:12px}
html.motion17-active .motion17-story .kicker::before{
 content:"";display:inline-block;flex:0 0 18px;height:2px;border-radius:3px;
 background:linear-gradient(90deg,#ff9b53,#ff5271);transform:scaleX(.3);transform-origin:left;
 transition:transform .9s var(--m17-ease)
}
html.motion17-active .motion17-story.motion17-in-view .kicker::before{transform:scaleX(1)}
/* A short process line below, never over the Diagnose/Build/Grow copy. */
html.motion17-active .motion17-method-track{
 height:2px;width:100%;margin:28px 0 0;overflow:hidden;position:relative;
 background:linear-gradient(90deg,rgba(255,130,86,.13),rgba(225,67,94,.13));border-radius:100px;
}
html.motion17-active .motion17-method-track span{
 display:block;width:100%;height:100%;transform-origin:left;transform:scaleX(0);
 background:linear-gradient(90deg,#f7a068,#f95873);border-radius:inherit;
 transition:transform 1.55s var(--m17-ease);
}
html.motion17-active .motion17-in-view .motion17-method-track span{transform:scaleX(1)}
/* Portfolio remains the same real AYS / Iron Bite imagery; strengthen motion, not content. */
html.motion17-active .motion17-work .work-card{isolation:isolate;transition:transform .4s var(--m17-ease),border-color .35s ease,box-shadow .4s ease}
html.motion17-active .motion17-work .work-card::after{
 content:"";position:absolute;inset:0;pointer-events:none;
 background:radial-gradient(circle at var(--m17-work-x,50%) var(--m17-work-y,45%),rgba(255,168,108,.085),transparent 60%);
 opacity:0;transition:opacity .38s ease;
}
@media(hover:hover) and (pointer:fine){
 html.motion17-active .motion17-work .work-card:hover{transform:translate3d(0,-7px,0);border-color:rgba(255,153,97,.43);box-shadow:0 24px 56px rgba(0,0,0,.18)}
 html.motion17-active .motion17-work .work-card:hover::after{opacity:1}
 html.motion17-active .motion17-work .work-card:hover .work-art{transform:scale(1.055);filter:saturate(1.08)}
}
/* Quiet inner-page reveal on Growth, Industricio and pricing, without altering cards or forms. */
html.motion17-active .page-hero h1,
html.motion17-active .page-hero .lead{
 opacity:0;transform:translate3d(0,16px,0);
 transition:transform .85s var(--m17-ease),opacity .85s var(--m17-ease)
}
html.motion17-active.motion17-entered .page-hero h1,
html.motion17-active.motion17-entered .page-hero .lead{opacity:1;transform:none}
html.motion17-active .page-hero .lead{transition-delay:.16s}
/* Keyboard focus must remain prominent through the animation. */
html.motion17-active a:focus-visible{outline:2px solid #ffa169;outline-offset:5px}
@media (max-width:980px){
 html.motion17-active .v6-hero::before{width:440px;height:440px;right:-180px;top:-70px;filter:blur(22px);opacity:.55}
 html.motion17-active .v6-hero .system-map{transform:none!important}
}
@media(max-width:600px){
 html.motion17-active .v6-hero h1 .motion17-line{transform:translate3d(0,14px,0)}
 html.motion17-active .motion17-method-track{margin-top:20px}
 html.motion17-active .motion17-work .work-card::after{display:none}
}
/* Full functionality, legibility and keyboard navigation for reduced-motion visitors. */
@media(prefers-reduced-motion:reduce){
 html.motion17-active .v6-hero::before{animation:none!important;display:none}
 html.motion17-active .v6-hero .kicker,html.motion17-active .v6-hero h1 .motion17-line,
 html.motion17-active .v6-hero .lead,html.motion17-active .v6-hero .actions,
 html.motion17-active .v6-hero .hero-context-link,html.motion17-active .v6-hero .system-map,
 html.motion17-active .v6-hero .v6-hero-foot,html.motion17-active .page-hero h1,
 html.motion17-active .page-hero .lead{opacity:1!important;transform:none!important;transition:none!important}
 html.motion17-active .motion17-method-track span{transform:none!important;transition:none!important}
 html.motion17-active .motion17-story .kicker::before{transform:none!important;transition:none!important}
 html.motion17-active .motion17-work .work-card,html.motion17-active .motion17-work .work-card .work-art{transform:none!important;transition:none!important}
}