.protein-mechanism {
    --pm-cycle: 8s;
    --pm-ease: cubic-bezier(0.2, 0, 0, 1);
    background:
        radial-gradient(circle at 50% 46%, rgba(0, 165, 143, 0.09), transparent 38%),
        linear-gradient(145deg, #fff 0%, #f8fbfa 100%);
}

.protein-mechanism .rm-heading strong { color: #008f7c; }

.pm-stage {
    position: relative;
    min-height: 22rem;
    overflow: hidden;
}

.pm-enzyme {
    position: absolute;
    z-index: 8;
    top: 5%;
    left: 50%;
    display: grid;
    width: 5.2rem;
    height: 6.2rem;
    place-items: center;
    border-radius: 48% 52% 36% 64%;
    background: #00a58f;
    box-shadow: 0 0.8rem 1.5rem rgba(0, 124, 107, 0.16), 0 0 0 0.55rem rgba(0, 165, 143, 0.07);
    color: #fff;
    opacity: 0.55;
    transform: translateX(-50%) scale(0.78) rotate(-5deg);
}

.pm-enzyme span {
    max-width: 4.2rem;
    font-size: 0.72rem;
    font-weight: 850;
    line-height: 1.05;
    text-align: center;
}

.pm-peptide-fragment {
    position: absolute;
    z-index: 4;
    top: 42%;
    width: 43%;
    height: 7rem;
}

.pm-peptide-left { left: 5%; animation: pm-left-release var(--pm-cycle) var(--pm-ease) infinite; }
.pm-peptide-right { right: 5%; animation: pm-right-release var(--pm-cycle) var(--pm-ease) infinite; }

.pm-peptide-fragment i {
    position: absolute;
    z-index: 4;
    display: grid;
    width: 1.8rem;
    aspect-ratio: 1;
    place-items: center;
    border: 2px solid #00a58f;
    border-radius: 50%;
    background: #fff;
    color: #008f7c;
    font-size: 0.65rem;
    font-style: normal;
    font-weight: 850;
    transform: translate(-50%, -50%);
}

.pm-peptide-bonds {
    position: absolute;
    z-index: 3;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    fill: none;
}

.pm-peptide-bonds path {
    fill: none;
    stroke: rgba(0, 143, 124, 0.68);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.pm-peptide-fragment i:nth-of-type(1) { top: 57%; left: 4%; }
.pm-peptide-fragment i:nth-of-type(2) { top: 28%; left: 35%; }
.pm-peptide-fragment i:nth-of-type(3) { top: 67%; left: 67%; }
.pm-peptide-fragment i:nth-of-type(4) { top: 38%; left: 96%; }
.pm-peptide-right i:nth-of-type(1) { top: 38%; left: 4%; }
.pm-peptide-right i:nth-of-type(2) { top: 68%; left: 35%; }
.pm-peptide-right i:nth-of-type(3) { top: 27%; left: 67%; }
.pm-peptide-right i:nth-of-type(4) { top: 57%; left: 96%; }

.pm-cleavable-bond {
    position: absolute;
    z-index: 3;
    top: calc(42% + 2.66rem);
    left: 46.28%;
    width: 7.44%;
    height: 0;
    border-top: 3px solid #00a58f;
    border-radius: 50%;
    animation: pm-bond-cut var(--pm-cycle) ease-in-out infinite;
}

.pm-site-specific-stage .pm-enzyme { animation: pm-site-enzyme var(--pm-cycle) var(--pm-ease) infinite; }

.pm-site-caption,
.pm-c-terminus-label,
.pm-glycan-label {
    position: absolute;
    z-index: 9;
    padding: 0.35rem 0.65rem;
    border-radius: 0.55rem;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 0.4rem 0.9rem rgba(21, 25, 43, 0.08);
    color: #008f7c;
    font-size: 0.9rem;
    font-weight: 850;
    white-space: nowrap;
}

.pm-site-caption {
    top: 70%;
    left: 50%;
    transform: translateX(-50%);
    animation: pm-site-caption var(--pm-cycle) ease-in-out infinite;
}

.pm-site-caption::before,
.pm-c-terminus-label::before,
.pm-glycan-label::before {
    position: absolute;
    bottom: 100%;
    left: 50%;
    width: 1px;
    height: 2rem;
    background: currentColor;
    content: '';
}

.pm-product-label,
.pm-cpb-product-label,
.pm-ides-product,
.pm-pngase-product-label {
    position: absolute;
    z-index: 9;
    color: var(--brand-dark);
    font-size: 0.92rem;
    font-weight: 850;
    opacity: 0;
}

.pm-product-label {
    top: auto;
    bottom: calc(100% + 0.45rem);
    left: 50%;
    transform: translateX(-50%);
    animation: pm-product-label var(--pm-cycle) ease-in-out infinite;
    white-space: nowrap;
}

.pm-cpb-fragment { animation: none; }
.pm-cpb-center-bond { animation: none; opacity: 1; filter: none; }
.pm-cpb-fragment .pm-cpb-terminal {
    border-color: var(--magenta);
    color: var(--magenta);
    animation: pm-terminal-release var(--pm-cycle) var(--pm-ease) infinite;
}

.pm-peptide-bonds .pm-cpb-terminal-bond {
    stroke: var(--magenta);
    animation: pm-terminal-bond-cut var(--pm-cycle) ease-in-out infinite;
}

.pm-cpb-enzyme { animation: pm-cpb-enzyme var(--pm-cycle) var(--pm-ease) infinite; }
.pm-c-terminus-label { top: calc(100% + 1.4rem); left: 50%; transform: translateX(-100%); animation: pm-site-caption var(--pm-cycle) ease-in-out infinite; }
.pm-c-terminus-label::before { left: 100%; height: 1.4rem; }
.pm-cpb-product-label { top: auto; bottom: .25rem; left: 0; right: 0; text-align: center; font-size: 16px; animation: pm-product-label var(--pm-cycle) ease-in-out infinite; }

.pm-antibody {
    position: absolute;
    z-index: 4;
    top: 48%;
    left: 50%;
    width: 16rem;
    height: 16rem;
    transform: translate(-50%, -50%);
}

.pm-fab2,
.pm-fc { position: absolute; inset: 0; animation: pm-fab-release var(--pm-cycle) var(--pm-ease) infinite; }
.pm-fc { animation-name: pm-fc-release; }
.pm-arm,
.pm-shoulder,
.pm-hinge,
.pm-fc i {
    position: absolute;
    display: block;
    border-radius: 1rem;
    background: #00a58f;
}

.pm-arm { top: 60%; width: 7rem; height: 0.82rem; }
.pm-arm-left { left: 3%; rotate: 42deg; transform-origin: right center; }
.pm-arm-right { right: 3%; rotate: -42deg; transform-origin: left center; }
.pm-light { position: absolute; z-index: 5; top: 51%; width: 4.5rem; height: 0.48rem; border-radius: 1rem; background: #7465e8; }
.pm-light-left { left: -1%; rotate: 42deg; transform-origin: right center; }
.pm-light-right { right: -1%; rotate: -42deg; transform-origin: left center; }
.pm-shoulder { display: none; top: 44%; width: 4.1rem; height: 0.6rem; }
.pm-shoulder-left { left: 20%; rotate: 42deg; }
.pm-shoulder-right { right: 20%; rotate: -42deg; }
.pm-hinge { top: 62%; left: 50%; width: 2.7rem; height: 0.68rem; transform: translateX(-50%); }
.pm-fc i { top: 64%; width: 0.76rem; height: 5rem; }
.pm-fc i:first-of-type { left: 44%; }
.pm-fc i:last-of-type { right: 44%; }

.pm-ides-cut {
    position: absolute;
    z-index: 6;
    top: calc(63% + .19rem);
    width: .96rem;
    height: 0.3rem;
    border-radius: 1rem;
    background: #fff;
    box-shadow: 0 0 0 1px rgba(21, 25, 43, 0.08);
    opacity: 0;
    animation: pm-ides-cut var(--pm-cycle) ease-in-out infinite;
}

.pm-cut-left { left: calc(44% - .1rem); }
.pm-cut-right { right: calc(44% - .1rem); }
.pm-ides-enzyme { width: 8.8rem; height: 7.2rem; border: 0.72rem solid #ef9d00; border-top: 0; border-radius: 0 0 4.2rem 4.2rem; background: transparent; color: var(--brand-dark); animation: pm-ides-enzyme var(--pm-cycle) var(--pm-ease) infinite; }
.pm-ides-product { animation: pm-product-label var(--pm-cycle) ease-in-out infinite; }
.pm-ides-fab-label { top: 23%; left: 50%; transform: translateX(-50%); font-size: 16px; line-height: 1.2; }
.pm-ides-fc-label { top: calc(64% + 5rem + .55rem); left: 50%; transform: translateX(-50%); font-size: 16px; line-height: 1.2; white-space: nowrap; }

.pm-glycoprotein {
    position: absolute;
    z-index: 4;
    top: 63%;
    right: 9%;
    left: 9%;
    display: flex;
    justify-content: space-between;
}

.pm-glycoprotein::before { position: absolute; top: 50%; right: 0; left: 0; height: 2px; background: rgba(0, 143, 124, 0.48); content: ''; }
.pm-glycoprotein > i { position: relative; z-index: 4; display: grid; width: 2rem; aspect-ratio: 1; place-items: center; border: 2px solid #00a58f; border-radius: 50%; background: #fff; color: #008f7c; font-size: 0.58rem; font-style: normal; font-weight: 850; }
.pm-glycan-anchor span { grid-area: 1 / 1; }
.pm-glycan-anchor .pm-asn { animation: pm-asn-to-asp-out var(--pm-cycle) ease-in-out infinite; }
.pm-glycan-anchor .pm-asp { opacity: 0; animation: pm-asn-to-asp-in var(--pm-cycle) ease-in-out infinite; }

.pm-glycan {
    position: absolute;
    z-index: 5;
    bottom: calc(50% + 4.8rem);
    left: 50%;
    width: 6rem;
    height: 6.3rem;
    transform: translateX(-50%);
    transform-origin: 50% calc(100% + 0.9rem);
    animation: pm-glycan-release var(--pm-cycle) var(--pm-ease) infinite;
}

.pm-glycan b { position: absolute; display: block; width: 1rem; aspect-ratio: 1; }
.pm-glcnac { border-radius: 0.12rem; background: #0080ff; }
.pm-mannose { border-radius: 50%; background: #00a651; }
.pm-node-1 { bottom: 0; left: 2.5rem; }
.pm-node-2 { bottom: 1.45rem; left: 2.5rem; }
.pm-node-3 { bottom: 2.9rem; left: 2.5rem; }
.pm-node-4 { bottom: 4.55rem; left: 0.8rem; }
.pm-node-5 { right: 0.8rem; bottom: 4.55rem; }

.pm-glycan b::after { position: absolute; z-index: -1; background: rgba(21, 25, 43, 0.42); content: ''; }
.pm-node-1::after,
.pm-node-2::after { bottom: 100%; left: 50%; width: 2px; height: 0.5rem; }
.pm-node-3::after { display: none; }
.pm-node-4::after { top: 70%; left: 70%; width: 2.15rem; height: 2px; rotate: 43deg; transform-origin: left center; }
.pm-node-5::after { top: 70%; right: 70%; width: 2.15rem; height: 2px; rotate: -43deg; transform-origin: right center; }

.pm-glycan-link { position: absolute; z-index: 3; bottom: 50%; left: 50%; width: 2px; height: 4.8rem; background: var(--magenta); transform: translateX(-50%); transform-origin: bottom center; animation: pm-glycan-link var(--pm-cycle) ease-in-out infinite; }
.pm-pngase-enzyme { top: 7%; left: 22%; background: #277fd5; box-shadow: 0 0.8rem 1.5rem rgba(39, 127, 213, 0.16), 0 0 0 0.55rem rgba(39, 127, 213, 0.07); animation: pm-pngase-enzyme var(--pm-cycle) var(--pm-ease) infinite; }
.pm-glycan .pm-glycan-label { top: -2.65rem; left: 50%; transform: translateX(-50%); }
.pm-glycan .pm-glycan-label::before { top: 100%; bottom: auto; left: 50%; height: 1.25rem; }
.pm-pngase-product-label { top: 19%; right: 8%; animation: pm-product-label var(--pm-cycle) ease-in-out infinite; }

@keyframes pm-site-enzyme {
    0%, 16% { top: 4%; left: 62%; opacity: 0.52; transform: translateX(-50%) scale(0.78) rotate(-5deg); }
    42%, 59% { top: 34%; left: 50%; opacity: 1; transform: translateX(-50%) scale(1) rotate(4deg); }
    74%, 100% { top: 8%; left: 68%; opacity: 0.52; transform: translateX(-50%) scale(0.62) rotate(8deg); }
}

@keyframes pm-bond-cut { 0%, 53% { opacity: 1; filter: blur(0); } 62%, 100% { opacity: 0; filter: blur(4px); } }
@keyframes pm-left-release { 0%, 56% { transform: translate(0, 0); } 70%, 100% { transform: translate(-1.6rem, -0.55rem); } }
@keyframes pm-right-release { 0%, 56% { transform: translate(0, 0); } 70%, 100% { transform: translate(1.6rem, 0.55rem); } }
@keyframes pm-site-caption { 0%, 56% { opacity: 1; } 66%, 100% { opacity: 0; } }
@keyframes pm-product-label { 0%, 62% { opacity: 0; translate: 0 0.3rem; } 72%, 100% { opacity: 1; translate: 0 0; } }

@keyframes pm-cpb-enzyme {
    0%, 16% { top: 4%; left: 64%; opacity: 0.52; transform: translateX(-50%) scale(0.78) rotate(-5deg); }
    42%, 59% { top: 36%; left: var(--pm-cpb-bind-x, 87%); opacity: 1; transform: translateX(-50%) scale(1) rotate(4deg); }
    74%, 100% { top: 9%; left: 74%; opacity: 0.52; transform: translateX(-50%) scale(0.62) rotate(8deg); }
}

@keyframes pm-terminal-bond-cut { 0%, 54% { opacity: 1; } 64%, 100% { opacity: 0; } }
@keyframes pm-terminal-release { 0%, 57% { transform: translate(-50%, -50%); } 72%, 100% { transform: translate(0.8rem, 2rem); } }

@keyframes pm-ides-enzyme {
    0%, 17% { top: 1%; left: 50%; opacity: 0.45; transform: translateX(-50%) scale(0.72); }
    42%, 60% { top: 37%; left: 50%; opacity: 1; transform: translateX(-50%) scale(1); }
    76%, 100% { top: var(--pm-ides-park-top, 8%); left: 82%; opacity: 0.45; transform: translateX(-50%) scale(0.58); }
}

@keyframes pm-ides-cut {
    0%, 54% { opacity: 0; transform: scaleX(.5); }
    56%, 59.5% { opacity: 1; transform: scaleX(1); }
    60%, 100% { opacity: 0; transform: scaleX(1); }
}
@keyframes pm-fab-release { 0%, 58% { transform: translateY(0); } 72%, 100% { transform: translateY(-1.6rem); } }
@keyframes pm-fc-release { 0%, 58% { transform: translateY(0); } 72%, 100% { transform: translateY(1.6rem); } }

@keyframes pm-pngase-enzyme {
    0%, 18% { top: 6%; left: 82%; opacity: 0.56; transform: translateX(-50%) scale(0.76) rotate(-8deg); }
    40%, 59% { top: 39%; left: 38.5%; opacity: 1; transform: translateX(-50%) scale(1) rotate(5deg); }
    76%, 100% { top: 44%; left: 82%; opacity: 0.56; transform: translateX(-50%) scale(0.6) rotate(-4deg); }
}

@keyframes pm-glycan-link { 0%, 54% { opacity: 1; transform: translateX(-50%) scaleY(1); } 64%, 100% { opacity: 0; transform: translateX(-50%) scaleY(0.2); } }
@keyframes pm-glycan-release { 0%, 56% { transform: translateX(-50%); } 72%, 100% { transform: translate(3.2rem, -2.3rem) rotate(5deg); } }
@keyframes pm-asn-to-asp-out { 0%, 57% { opacity: 1; } 65%, 100% { opacity: 0; } }
@keyframes pm-asn-to-asp-in { 0%, 57% { opacity: 0; } 65%, 100% { opacity: 1; } }

@media (max-width: 720px) {
    .protein-mechanism { min-height: 470px; grid-template-rows: auto minmax(17rem, 1fr) auto auto; }
    .pm-stage { min-height: 17rem; }
    .pm-enzyme { width: 4rem; height: 4.8rem; }
    .pm-enzyme span { max-width: 3.25rem; font-size: 0.6rem; }
    .pm-peptide-fragment i { width: 1.25rem; }
    .pm-site-caption,
    .pm-c-terminus-label,
    .pm-glycan-label { font-size: 0.7rem; }
    .pm-product-label,
    .pm-cpb-product-label,
    .pm-ides-product,
    .pm-pngase-product-label { font-size: 0.72rem; }
    .pm-antibody { transform: translate(-50%, -50%) scale(.74); }
    .pm-ides-stage { --pm-ides-park-top: 0%; }
    .pm-ides-fab-label, .pm-ides-fc-label { font-size: calc(16px / .74); }
    .pm-c-terminal-stage { --pm-cpb-bind-x: 82%; }
    .pm-glycoprotein > i { width: 1.35rem; }
    .pm-glycan { scale: 0.8; }
    .pm-pngase-product-label { top: 10%; right: 2%; max-width: 9rem; text-align: right; }
}

/* Keep all reaction products visible on a phone. */
@media(max-width:720px){
.pm-site-specific-stage .pm-peptide-left{animation-name:pa-pm-left;}
.pm-site-specific-stage .pm-peptide-right{animation-name:pa-pm-right;}
.pm-cpb-fragment .pm-cpb-terminal{animation-name:pa-pm-terminal;}
.pm-cpb-product-label{top:auto;bottom:.25rem;left:0;right:0;text-align:center;font-size:16px;}
}
@keyframes pa-pm-left{0%,56%{transform:translate(0,0)}70%,100%{transform:translate(-.3rem,-.55rem)}}
@keyframes pa-pm-right{0%,56%{transform:translate(0,0)}70%,100%{transform:translate(.3rem,.55rem)}}
@keyframes pa-pm-terminal{0%,57%{transform:translate(-50%,-50%)}72%,100%{transform:translate(-50%,2rem)}}

/* Keep the intact glycan and both product captions within the scene after release. */
.protein-mechanism.is-n-glycan-release { grid-template-rows: auto minmax(22rem, 1fr) auto auto; }
.pm-pngase-stage { min-height: 22rem; }
.pm-pngase-stage .pm-glycan { scale: 1; animation-name: pa-pngase-release; }
.pm-pngase-stage .pm-glycan-label { font-size: 16px; line-height: 1.2; top: -2.1rem; }
.pm-pngase-stage .pm-pngase-product-label { top: auto; bottom: .35rem; left: 8%; right: 8%; text-align: center; font-size: 16px; line-height: 1.2; }
@keyframes pa-pngase-release {
    0%, 56% { transform: translateX(-50%); }
    72%, 100% { transform: translate(2rem, 0) rotate(3deg); }
}

/* At End the products remain intact; the next cycle starts with a discrete reset. */