/* Innovaducate LABS — Motion system v2
   Rich, performant, progressive: no content is hidden unless JS has registered observers.
   Motion uses transform + opacity and honours reduced-motion preferences. */
:root {
  --motion-short: 190ms;
  --motion-fast: 340ms;
  --motion-medium: 650ms;
  --motion-long: 950ms;
  --motion-ease: cubic-bezier(.16,1,.3,1);
  --motion-ease-out: cubic-bezier(.22,1,.36,1);
}

/* Scroll position: a thin technical blue line below the navigation. */
.site-header { isolation:isolate; transition:box-shadow .4s ease, background-color .4s ease; }
.site-header.is-scrolled { box-shadow:0 9px 35px rgba(25,25,25,.075); background:rgba(245,242,235,.985); }
.reading-progress { position:absolute; left:0; bottom:-2px; z-index:5; width:100%; height:3px; background:var(--accent); transform:scaleX(0); transform-origin:left center; pointer-events:none; will-change:transform; }

/* Arrival sequence: logo, navigation and hero; no initial hide for no-JS or reduced motion. */
@media (prefers-reduced-motion:no-preference) {
  html.motion-enabled .brand { animation:motion-arrive .85s var(--motion-ease) .06s both; }
  html.motion-enabled .desktop-nav { animation:motion-arrive .85s var(--motion-ease) .17s both; }
  html.motion-enabled .header-cta { animation:motion-arrive .85s var(--motion-ease) .24s both; }
  html.motion-enabled .hero .hero-lead { animation:motion-arrive 1.0s var(--motion-ease) .64s both; }
  html.motion-enabled .hero .actions { animation:motion-arrive 1.0s var(--motion-ease) .80s both; }
  html.motion-enabled .hero .hero-aux { animation:motion-arrive 1.0s var(--motion-ease) .94s both; }
  html.motion-enabled .hero .hero-bottom { animation:motion-fade .9s ease 1.05s both; }
  @keyframes motion-arrive { from{opacity:0;transform:translate3d(0,18px,0)} to{opacity:1;transform:translate3d(0,0,0)} }
  @keyframes motion-fade { from{opacity:0} to{opacity:1} }

  /* Word reveal: content remains the source-of-truth in DOM and the h1/h2 gets an accessible name. */
  .motion-word {display:inline-block;vertical-align:baseline;white-space:nowrap}
  .motion-word__inner {display:inline-block;}
  html.motion-enabled .motion-word__inner {opacity:0;transform:translate3d(0,105%,0);}
  html.motion-enabled .hero .motion-word__inner { animation:motion-word-up .86s var(--motion-ease) both; animation-delay:calc(260ms + var(--word-index) * 72ms); }
  html.motion-enabled .section-heading.in-view .motion-word__inner { animation:motion-word-up .8s var(--motion-ease) both; animation-delay:calc(100ms + var(--word-index) * 52ms); }
  @keyframes motion-word-up { from{opacity:0;transform:translate3d(0,106%,0)} to{opacity:1;transform:translate3d(0,0,0)} }

  /* All secondary blocks: one observer, once per element. */
  html.motion-enabled .motion-entry {transition:opacity var(--motion-long) var(--motion-ease), transform var(--motion-long) var(--motion-ease);transition-delay:var(--motion-delay,0ms)}
  html.motion-enabled .motion-entry:not(.motion-in) {opacity:0;transform:translate3d(0,33px,0)}
  html.motion-enabled .motion-entry.motion-in {opacity:1;transform:translate3d(0,0,0)}
  html.js .reveal {transition-delay:var(--motion-delay,0ms)}

  /* Section rules draw in as sections enter the viewport. */
  .editorial-section::before, .contact-form-section::before {
    content:"";position:absolute;inset:0 auto auto 0;width:100%;height:2px;
    background:var(--accent);opacity:.85;transform:scaleX(0);transform-origin:left center;
    transition:transform 1.15s var(--motion-ease);pointer-events:none;z-index:1;
  }
  .editorial-section.motion-section-in::before,.contact-form-section.motion-section-in::before {transform:scaleX(1)}


  /* Soft light movement in the hero: no circles and no added fictitious technical data. */
  .hero {isolation:isolate}
  .hero::before {
    content:"";position:absolute;top:-25%;right:-21%;width:61%;height:150%;pointer-events:none;opacity:.44;z-index:0;
    background:linear-gradient(103deg,transparent 23%,rgba(var(--accent-rgb),.055) 49%,transparent 71%);
    transform:translateX(-10%);animation:motion-hero-light 14s ease-in-out infinite alternate;
  }
  @keyframes motion-hero-light {from{transform:translate3d(-16%,0,0)}to{transform:translate3d(12%,0,0)}}
  .hero-bottom a span {display:inline-block;animation:motion-arrow-down 1.8s ease-in-out infinite}
  @keyframes motion-arrow-down {0%,100%{transform:translateY(-2px)}50%{transform:translateY(4px)}}

  /* Cards act like technical modules: index, accent rail, subtle responsive highlight. */
  .feature-card {isolation:isolate;overflow:hidden;transition:background-color .38s ease,box-shadow .38s ease, border-color .38s ease}
  .feature-card::before {content:"";position:absolute;top:0;left:0;width:3px;height:100%;background:var(--accent);transform:scaleY(0);transform-origin:bottom center;transition:transform .55s var(--motion-ease);pointer-events:none}
  .feature-card::after {content:"";position:absolute;inset:0;opacity:0;pointer-events:none;background:radial-gradient(250px circle at var(--spot-x,50%) var(--spot-y,30%),rgba(var(--accent-rgb),.10),transparent 78%);transition:opacity .32s ease}
  .feature-card:hover::before,.feature-card:focus-within::before{transform:scaleY(1)}
  .feature-card:hover::after,.feature-card:focus-within::after {opacity:1}
  .feature-card > *{position:relative;z-index:1}
  .feature-card .feature-glyph {display:inline-block;transition:transform .45s var(--motion-ease),color .32s ease}
  .feature-card:hover .feature-glyph,.feature-card:focus-within .feature-glyph {transform:translate3d(5px,-5px,0) rotate(10deg);color:var(--accent)}
  .feature-card h3 {transition:transform .48s var(--motion-ease), color .48s ease}
  .feature-card:hover h3,.feature-card:focus-within h3{transform:translateX(5px)}

  /* Lines and rows: animate the meaning, not text readability. */
  .sector-list li,.steps-list li,.rich-content li {position:relative;transition:background-color .35s ease,padding-left .35s var(--motion-ease)}
  .sector-list li::before,.steps-list li::before,.rich-content li::before {content:"";position:absolute;top:0;left:0;width:0;height:1px;background:var(--accent);transition:width .65s var(--motion-ease)}
  .sector-list li:hover::before,.steps-list li:hover::before,.rich-content li:hover::before {width:100%}
  .sector-list li:hover,.steps-list li:hover {padding-left:12px;background:rgba(var(--accent-rgb),.025)}
  .step-count,.sector-list li>span {transition:color .28s ease,transform .48s var(--motion-ease)}
  .steps-list li:hover .step-count,.sector-list li:hover >span {transform:translateX(4px);color:var(--accent)}

  /* CTAs use a directional sweep, with a magnetic subtle shift for fine pointers. */
  .btn,.header-contact {position:relative;isolation:isolate;overflow:hidden;translate:var(--mag-x,0px) var(--mag-y,0px);transition:translate .35s var(--motion-ease),background .3s ease,border-color .3s ease,color .3s ease,transform .3s var(--ease),box-shadow .3s ease}
  .btn::before,.header-contact::before {content:"";position:absolute;inset:-2px;width:60%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.19),transparent);transform:translateX(-190%) skewX(-19deg);transition:transform .76s var(--motion-ease);pointer-events:none;z-index:0}
  .btn:hover::before,.btn:focus-visible::before,.header-contact:hover::before,.header-contact:focus-visible::before{transform:translateX(355%) skewX(-19deg)}
  .btn>*,.header-contact>*{position:relative;z-index:1}
  .btn-arrow{display:inline-block;transition:transform .4s var(--motion-ease)}
  .btn:hover .btn-arrow,.btn:focus-visible .btn-arrow {transform:translate3d(4px,-4px,0) rotate(7deg)}
  .header-contact:hover span,.header-contact:focus-visible span{transform:translate3d(3px,-3px,0)}
  .header-contact span{transition:transform .4s var(--motion-ease)}
  .text-link{position:relative;transition:color .3s ease,gap .4s var(--motion-ease)}
  .text-link::after{content:"";position:absolute;bottom:-2px;left:0;width:100%;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .47s var(--motion-ease)}
  .text-link:hover::after,.text-link:focus-visible::after{transform:scaleX(1)}

  /* Nav links, backdrop and menu disclosure. */
  .nav-link:not(.is-active)::after {content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .42s var(--motion-ease)}
  .nav-link:not(.is-active):hover::after,.nav-link:not(.is-active):focus-visible::after {transform:scaleX(1)}
  .nav-submenu {transition:opacity .36s var(--motion-ease),transform .36s var(--motion-ease),visibility .36s}
  .nav-submenu a{transition:padding-left .25s var(--motion-ease),background-color .25s ease,color .25s ease}
  .nav-submenu a:hover,.nav-submenu a:focus-visible{padding-left:20px}
  @media(max-width:1080px){
    .mobile-menu:not([hidden]){animation:motion-menu-drop .52s var(--motion-ease) both;transform-origin:top center}
    .mobile-menu:not([hidden]) .mobile-link,.mobile-menu:not([hidden]) .mobile-services{animation:motion-arrive .62s var(--motion-ease) both;animation-delay:calc(90ms + var(--mobile-index,0)*45ms)}
    @keyframes motion-menu-drop {from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:translateY(0)}}
  }

  /* Native FAQ disclosure remains semantic and works without JS. */
  .faq-item summary {transition:color .3s ease,padding-left .35s var(--motion-ease),background .35s ease}
  .faq-item summary:hover,.faq-item summary:focus-visible{color:var(--accent);padding-left:10px}
  .faq-item[open] .faq-answer {animation:motion-faq-open .46s var(--motion-ease) both}
  @keyframes motion-faq-open {from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}

  /* Contact field interactions and live validation messages. */
  .form-row{position:relative}
  .form-row::after{content:"";position:absolute;bottom:0;left:0;width:100%;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--motion-ease);pointer-events:none}
  .form-row:focus-within::after{transform:scaleX(1)}
  .form-row label{transition:transform .34s var(--motion-ease),color .34s ease}
  .form-row:focus-within label{transform:translateX(4px);color:var(--accent-dark)}
  .form-status:not(:empty){animation:motion-arrive .38s var(--motion-ease) both}

  /* Footer: dark finale with scrolling brand signature. */
  .footer-wordmark__name,.footer-wordmark__labs{transition:letter-spacing .7s var(--motion-ease),color .5s ease}
  .footer-wordmark:hover .footer-wordmark__name,.footer-wordmark:focus-visible .footer-wordmark__name{letter-spacing:-.07em;color:#fff}
  .footer-wordmark:hover .footer-wordmark__labs,.footer-wordmark:focus-visible .footer-wordmark__labs{letter-spacing:-.06em}
  .footer-nav a,.back-to-top,.footer-email {position:relative;transition:color .28s ease,transform .35s var(--motion-ease)}
  .footer-nav a:hover,.footer-nav a:focus-visible {display:inline-block;transform:translateX(5px)}
  .back-to-top:hover,.back-to-top:focus-visible{display:inline-block;transform:translateY(-5px)}

  /* CTA section soft engineering-blue sheen (not a replacement for existing design). */
  .editorial-section--cta{isolation:isolate;overflow:hidden}
  .editorial-section--cta::after {content:"";position:absolute;inset:-35% -20%;background:linear-gradient(115deg,transparent 28%,rgba(255,255,255,.07) 50%,transparent 69%);animation:motion-cta-wave 15s ease-in-out infinite alternate;pointer-events:none;z-index:0}
  .editorial-section--cta > .shell{position:relative;z-index:1}
  @keyframes motion-cta-wave {from{transform:translateX(-18%)}to{transform:translateX(18%)}}

  /* True cross-page transitions, when the browser supports native view transitions. */
  @view-transition{navigation:auto}
  ::view-transition-old(root){animation:motion-page-out .26s ease both}
  ::view-transition-new(root){animation:motion-page-in .48s var(--motion-ease) both}
  @keyframes motion-page-out{to{opacity:.10;transform:translateY(-9px)}}
  @keyframes motion-page-in{from{opacity:.12;transform:translateY(17px)}to{opacity:1;transform:translateY(0)}}
}

/* Don't let style motion change layouts or hide information on phones. */
@media(max-width:720px){
  .hero::before {opacity:.22;width:105%;right:-45%}
  .sector-list li:hover,.steps-list li:hover{padding-left:0}
  .feature-card:hover h3{transform:none}
}
@media(pointer:coarse){.feature-card::after{display:none}}

/* The accessibility contract: disable every decorative animation and all hidden entry states. */
@media(prefers-reduced-motion:reduce){
  .motion-word,.motion-word__inner{opacity:1!important;transform:none!important;animation:none!important}
  .motion-entry,.reveal{opacity:1!important;transform:none!important;transition:none!important}
  .editorial-section::before,.contact-form-section::before{transform:none!important;transition:none!important}
  .feature-card::before,.feature-card::after,.btn::before,.header-contact::before,.editorial-section--cta::after{animation:none!important;transition:none!important}
  .reading-progress{will-change:auto}
  .hero::before{animation:none!important}
  .hero-bottom a span{animation:none!important}
  .nav-submenu,.mobile-menu{animation:none!important}
}