/*
 * ISO 15189 · Quality management system motion
 * A restrained four-layer sequence: reveal, orbit, interaction and process flow.
 */

.iso-signature .iso-system-web {
  overflow: hidden;
  overflow: clip;
}

.iso-signature .iso-system-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition:
    transform .55s cubic-bezier(.16, 1, .3, 1),
    border-color .4s ease,
    background .4s ease,
    box-shadow .55s cubic-bezier(.16, 1, .3, 1);
}

.iso-signature .iso-system-card > * {
  position: relative;
  z-index: 1;
}

.iso-signature .iso-system-card::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: -55%;
  bottom: -55%;
  left: -72%;
  width: 48%;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .58), transparent);
  transform: skewX(-18deg);
  transition: left .9s cubic-bezier(.16, 1, .3, 1), opacity .4s ease;
}

.iso-signature .iso-system-card i {
  transition:
    transform .55s cubic-bezier(.16, 1, .3, 1),
    color .35s ease,
    border-color .35s ease,
    background .35s ease,
    box-shadow .45s ease;
}

.iso-signature .iso-system-core {
  isolation: isolate;
  transition:
    transform .7s cubic-bezier(.16, 1, .3, 1),
    box-shadow .7s cubic-bezier(.16, 1, .3, 1);
}

.iso-signature .iso-system-core::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -16px;
  padding: 2px;
  border-radius: 50%;
  pointer-events: none;
  opacity: .7;
  background: conic-gradient(
    from 20deg,
    transparent 0deg 246deg,
    rgba(255, 255, 255, .08) 258deg,
    rgba(255, 255, 255, .92) 286deg,
    rgba(110, 224, 181, .45) 310deg,
    transparent 334deg 360deg
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.iso-signature .iso-system-core::after {
  z-index: 0;
  transform-origin: center;
}

.iso-signature .iso-system-chain li {
  transition: transform .4s cubic-bezier(.16, 1, .3, 1), color .3s ease;
}

.iso-signature .iso-system-chain li::before {
  transform-origin: center;
}

.iso-signature .iso-system-chain li:nth-child(1) { --flow-step: 0s; --step-entry-delay: .58s; }
.iso-signature .iso-system-chain li:nth-child(2) { --flow-step: 1.05s; --step-entry-delay: .66s; }
.iso-signature .iso-system-chain li:nth-child(3) { --flow-step: 2.1s; --step-entry-delay: .75s; }
.iso-signature .iso-system-chain li:nth-child(4) { --flow-step: 3.15s; --step-entry-delay: .83s; }
.iso-signature .iso-system-chain li:nth-child(5) { --flow-step: 4.2s; --step-entry-delay: .92s; }
.iso-signature .iso-system-chain li:nth-child(6) { --flow-step: 5.25s; --step-entry-delay: 1s; }

@media (hover: hover) and (pointer: fine) {
  .iso-signature .iso-system-card:hover,
  .iso-signature .iso-system-card:focus-within {
    transform: translateY(-6px);
    border-color: rgba(255, 255, 255, 1);
    background: linear-gradient(135deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .58));
    box-shadow:
      0 30px 54px -39px rgba(6, 75, 50, .46),
      inset 0 1px 0 rgba(255, 255, 255, 1);
  }

  .iso-signature .iso-system-card:hover::after,
  .iso-signature .iso-system-card:focus-within::after {
    left: 126%;
    opacity: .72;
  }

  .iso-signature .iso-system-card:hover i,
  .iso-signature .iso-system-card:focus-within i {
    transform: scale(1.08);
    border-color: rgba(25, 154, 103, .42);
    background: rgba(235, 255, 247, .88);
    color: #087a50;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 1),
      0 12px 24px -16px rgba(5, 106, 68, .62);
  }

  .iso-signature .iso-system-core:hover {
    transform: translateY(-5px) scale(1.012);
    box-shadow:
      0 0 0 12px rgba(255, 255, 255, .62),
      0 0 0 14px rgba(35, 159, 109, .28),
      0 38px 68px -38px rgba(3, 91, 60, .68);
  }

  .iso-signature .iso-system-chain li:hover {
    transform: translateY(-2px);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .iso-signature .iso-system-web.in .iso-system-head p {
    animation: iso-system-copy-in .72s cubic-bezier(.16, 1, .3, 1) .02s backwards;
  }

  .iso-signature .iso-system-web.in .iso-system-head h2 {
    animation: iso-system-copy-in .86s cubic-bezier(.16, 1, .3, 1) .08s backwards;
  }

  .iso-signature .iso-system-web.in .iso-system-head > span {
    animation: iso-system-copy-in .78s cubic-bezier(.16, 1, .3, 1) .17s backwards;
  }

  .iso-signature .iso-system-web.in .iso-system-core {
    animation:
      iso-system-core-in 1.08s cubic-bezier(.16, 1, .3, 1) .14s backwards,
      iso-system-core-breathe 5.8s ease-in-out 1.28s infinite;
  }

  .iso-signature .iso-system-web.in .iso-system-core::before {
    animation: iso-system-orbit 13s linear .9s infinite;
  }

  .iso-signature .iso-system-web.in .iso-system-core::after {
    animation: iso-system-inner-ring 5.8s ease-in-out 1.28s infinite;
  }

  .iso-signature .iso-system-web.in .iso-system-card {
    animation: iso-system-card-in .84s cubic-bezier(.16, 1, .3, 1) var(--card-delay) backwards;
  }

  .iso-signature .iso-system-web.in .iso-system-card.c1 { --card-x: -34px; --card-delay: .22s; }
  .iso-signature .iso-system-web.in .iso-system-card.c4 { --card-x: 34px; --card-delay: .25s; }
  .iso-signature .iso-system-web.in .iso-system-card.c2 { --card-x: -34px; --card-delay: .32s; }
  .iso-signature .iso-system-web.in .iso-system-card.c5 { --card-x: 34px; --card-delay: .35s; }
  .iso-signature .iso-system-web.in .iso-system-card.c3 { --card-x: -34px; --card-delay: .42s; }
  .iso-signature .iso-system-web.in .iso-system-card.c6 { --card-x: 34px; --card-delay: .45s; }

  .iso-signature .iso-system-web.in .iso-system-chain {
    animation: iso-system-chain-in .78s cubic-bezier(.16, 1, .3, 1) .5s backwards;
  }

  .iso-signature .iso-system-web.in .iso-system-chain li {
    animation: iso-system-step-in .62s cubic-bezier(.16, 1, .3, 1) var(--step-entry-delay) backwards;
  }

  .iso-signature .iso-system-web.in .iso-system-chain li::before {
    animation: iso-system-step-pulse 6.3s ease-in-out calc(.98s + var(--flow-step)) infinite;
  }

  .iso-signature .iso-system-web.in .iso-system-chain li + li::after {
    animation: iso-system-arrow-flow 6.3s ease-in-out calc(.78s + var(--flow-step)) infinite;
  }

  @keyframes iso-system-copy-in {
    from { opacity: 0; transform: translateY(20px); filter: blur(6px); }
    to { opacity: 1; transform: translateY(0); filter: blur(0); }
  }

  @keyframes iso-system-card-in {
    from { opacity: 0; transform: translate3d(var(--card-x), 14px, 0) scale(.97); filter: blur(5px); }
    to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: blur(0); }
  }

  @keyframes iso-system-core-in {
    from { opacity: 0; transform: scale(.88); }
    62% { opacity: 1; transform: scale(1.025); }
    to { opacity: 1; transform: scale(1); }
  }

  @keyframes iso-system-core-breathe {
    0%, 100% { filter: brightness(1) saturate(1); }
    50% { filter: brightness(1.055) saturate(1.04); }
  }

  @keyframes iso-system-orbit {
    to { transform: rotate(360deg); }
  }

  @keyframes iso-system-inner-ring {
    0%, 100% { opacity: .72; transform: scale(1); }
    50% { opacity: .45; transform: scale(1.035); }
  }

  @keyframes iso-system-chain-in {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: translateY(0); }
  }

  @keyframes iso-system-step-in {
    from { opacity: 0; transform: translateX(-10px); }
    to { opacity: 1; transform: translateX(0); }
  }

  @keyframes iso-system-step-pulse {
    0%, 9%, 24%, 100% {
      transform: scale(1);
      border-color: rgba(19, 126, 82, .18);
      background: rgba(225, 250, 239, .76);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .88);
    }
    14% {
      transform: scale(1.13);
      border-color: rgba(16, 151, 99, .5);
      background: rgba(88, 211, 163, .36);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .92),
        0 0 0 7px rgba(57, 189, 138, .1);
    }
  }

  @keyframes iso-system-arrow-flow {
    0%, 8%, 24%, 100% { opacity: .42; transform: translateX(0); }
    14% { opacity: 1; transform: translateX(4px); }
  }
}

@media (max-width: 640px) and (prefers-reduced-motion: no-preference) {
  .iso-signature .iso-system-web.in .iso-system-card.c1,
  .iso-signature .iso-system-web.in .iso-system-card.c2,
  .iso-signature .iso-system-web.in .iso-system-card.c3,
  .iso-signature .iso-system-web.in .iso-system-card.c4,
  .iso-signature .iso-system-web.in .iso-system-card.c5,
  .iso-signature .iso-system-web.in .iso-system-card.c6 {
    --card-x: 0px;
  }

  .iso-signature .iso-system-core::before {
    inset: -11px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .iso-signature .iso-system-head > *,
  .iso-signature .iso-system-card,
  .iso-signature .iso-system-card i,
  .iso-signature .iso-system-core,
  .iso-signature .iso-system-core::before,
  .iso-signature .iso-system-core::after,
  .iso-signature .iso-system-chain,
  .iso-signature .iso-system-chain li,
  .iso-signature .iso-system-chain li::before,
  .iso-signature .iso-system-chain li::after {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }

  .iso-signature .iso-system-card::after,
  .iso-signature .iso-system-core::before {
    display: none;
  }
}