/* 01 : blue-office precision: tactile surfaces and cyan alignment marks. */
@media (prefers-reduced-motion: no-preference) {
  body.concept-01 .button,
  body.concept-01 .nav-contact,
  body.concept-01 .menu {
    transition: background-color 180ms ease, color 180ms ease,
      border-color 180ms ease, transform 180ms cubic-bezier(.2,.7,.2,1);
  }

  body.concept-01 .service-card {
    transition: background-color 220ms ease, border-color 220ms ease,
      box-shadow 260ms ease, transform 260ms cubic-bezier(.2,.7,.2,1);
  }

  body.concept-01 .service-card::before {
    content: "";
    position: absolute;
    inset: -1px -1px auto;
    height: 3px;
    background: #00a9d6;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 300ms cubic-bezier(.2,.7,.2,1);
    pointer-events: none;
  }

  body.concept-01 .card-link {
    /* Foreground and fill switch together to preserve contrast mid-hover. */
    transition: border-color 180ms ease,
      transform 220ms cubic-bezier(.2,.7,.2,1);
  }

  body.concept-01 .text-link,
  body.concept-01 .evolution-paths a {
    transition: color 180ms ease, text-underline-offset 220ms ease;
  }

  body.concept-01 .knowledge-link {
    transition: transform 240ms cubic-bezier(.2,.7,.2,1),
      box-shadow 240ms ease;
  }

  body.concept-01 .service-card:focus-visible::before {
    transform: scaleX(1);
  }

  body.concept-01 .service-card:focus-visible .card-link {
    transform: translateX(3px);
  }

  body.concept-01 .button:active,
  body.concept-01 .nav-contact:active,
  body.concept-01 .menu:active {
    transform: translateY(1px) scale(.985);
    transition-duration: 80ms;
  }

  body.concept-01 .service-card:active {
    transform: translateY(-1px);
    transition-duration: 80ms;
  }

  body.concept-01 .c01-section-mark {
    position: relative;
  }

  body.concept-01 .c01-section-mark.c01-arrive::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -12px;
    width: 44px;
    height: 2px;
    background: #00a9d6;
    transform: scaleX(0);
    transform-origin: left center;
    animation: c01Registration 1100ms cubic-bezier(.2,.7,.2,1) both;
    pointer-events: none;
  }

  body.concept-01 .card-number.c01-arrive {
    animation: c01Align 580ms cubic-bezier(.2,.7,.2,1) both;
    animation-delay: var(--c01-delay, 0ms);
  }

  body.concept-01.c01-intro .evolution-photo img {
    animation: c01CyanEdge 1100ms ease-out;
  }

  body.concept-01.c01-intro .evolution-photo figcaption {
    animation: c01Align 720ms cubic-bezier(.2,.7,.2,1);
  }
}

@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  body.concept-01 .button:not(.button-outline):hover,
  body.concept-01 .nav-contact:hover {
    transform: translateY(-2px);
  }

  body.concept-01 .button:not(.button-outline):active,
  body.concept-01 .nav-contact:active {
    transform: translateY(1px) scale(.985);
  }

  body.concept-01 .service-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 24px #142c4410;
  }

  body.concept-01 .service-card:hover::before {
    transform: scaleX(1);
  }

  body.concept-01 .service-card:hover .card-link {
    transform: translateX(3px);
  }

  body.concept-01 .service-card:active {
    transform: translateY(-1px);
  }

  body.concept-01 .text-link:hover,
  body.concept-01 .evolution-paths a:hover {
    text-underline-offset: 8px;
  }

  body.concept-01 .knowledge-link:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px #142c440a;
  }
}

@keyframes c01Align {
  from { transform: translateX(10px); }
  to { transform: translateX(0); }
}

@keyframes c01CyanEdge {
  from { border-bottom-color: #155bc1; }
  to { border-bottom-color: #00a9d6; }
}

@keyframes c01Registration {
  0% { transform: scaleX(0); }
  45%, 65% { transform: scaleX(1); }
  100% { transform: scaleX(0); }
}

@media (prefers-reduced-motion: reduce) {
  body.concept-01 .button,
  body.concept-01 .nav-contact,
  body.concept-01 .menu,
  body.concept-01 .service-card,
  body.concept-01 .card-link,
  body.concept-01 .text-link,
  body.concept-01 .evolution-paths a,
  body.concept-01 .knowledge-link,
  body.concept-01 .evolution-photo img,
  body.concept-01 .evolution-photo figcaption,
  body.concept-01 .card-number {
    animation: none;
    transition: none;
    transform: none;
  }
}