.nuclease-mechanism {
    --nm-cycle: 8s;
    --nm-ease: cubic-bezier(0.2, 0, 0, 1);
    --nm-dna: #7465e8;
    --nm-rna: #00a58f;
    --nm-enzyme: #e99a16;
    min-height: 520px;
    grid-template-rows: auto minmax(17rem, 1fr) auto auto;
    background:
        radial-gradient(circle at 52% 48%, rgba(239, 157, 0, 0.08), transparent 38%),
        linear-gradient(145deg, #fff 0%, #faf9fb 100%);
}

.nuclease-mechanism .rm-heading strong {
    color: rgba(190, 117, 0, 0.9);
}

.nm-stage {
    position: relative;
    width: 100%;
    min-height: 17rem;
}

.nm-target-label,
.nm-preserved-label { position: absolute; z-index: 3; color: var(--text-muted); font-weight: 650; line-height: 1.2; }

.nm-enzyme {
    position: absolute;
    z-index: 5;
    display: grid;
    width: 6rem;
    height: 5.1rem;
    border-radius: 47% 53% 40% 60%;
    background: var(--nm-enzyme);
    box-shadow: 0 0.65rem 1.3rem rgba(21, 25, 43, 0.15), 0 0 0 0.45rem rgba(239, 157, 0, 0.08);
    color: #fff;
    opacity: 0;
    place-items: center;
    transform: translate(-50%, -50%) scale(0.75) rotate(-4deg);
}

.nm-enzyme::after {
    position: absolute;
    right: 0.58rem;
    bottom: 0.55rem;
    width: 0.76rem;
    aspect-ratio: 1.25;
    border: 1.5px solid rgba(255, 255, 255, 0.72);
    border-radius: 50%;
    content: '';
}

.nm-enzyme span {
    max-width: 5rem;
    font-family: Arial, sans-serif;
    font-size: 0.8rem;
    font-weight: 800;
    line-height: 1.05;
    text-align: center;
}

.nm-t5-stage {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(11rem, 0.75fr);
    gap: 0;
    align-items: stretch;
    min-height: 20rem;
}

.nm-t5-linear,
.nm-t5-supercoiled {
    position: relative;
    display: grid;
    width: 100%;
    height: 100%;
    min-width: 0;
    place-items: center;
}

.nm-t5-linear {
    --nm-t5-start: calc(8% + 1.55rem);
    --nm-t5-end: calc(92% - 1.55rem);
}

.nm-t5-supercoiled {
    border-left: 1px solid rgba(21, 25, 43, 0.11);
}

.nm-target-label {
    top: 0.8rem;
    left: 50%;
    transform: translateX(-50%);
}

.nm-t5-stage .nm-target-label,
.nm-t5-stage .nm-preserved-label {
    max-width: 96%;
    font-size: 16px;
    white-space: normal;
    text-align: center;
    width: 96%;
}
.nm-t5-stage .nm-enzyme { width: 100px; height: 64px; color: #4a2c00; }
.nm-t5-stage .nm-enzyme span { max-width: 92px; font-size: 13px; }

.nm-t5-row {
    position: absolute;
    left: 8%;
    display: grid;
    width: 84%;
    grid-template-columns: 1.35rem 1fr 1.35rem;
    align-items: center;
    gap: 0.2rem;
    color: var(--text-muted);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.86rem;
    font-weight: 750;
    text-align: center;
}

.nm-t5-row-top { top: 43%; }
.nm-t5-row-bottom { top: 66%; }

.nm-t5-row i {
    display: block;
    width: 100%;
    height: 0.34rem;
    border-radius: 1rem;
    background: var(--nm-dna);
    filter: drop-shadow(0 0.2rem 0.3rem rgba(21, 25, 43, 0.08));
    animation-duration: var(--nm-cycle);
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

.nm-t5-row-top i {
    animation-name: nm-t5-digest-from-left;
}

.nm-t5-row-bottom i {
    animation-name: nm-t5-digest-from-right;
}

.nm-t5-enzyme-left {
    top: 43%;
    left: 15%;
    animation: nm-t5-enzyme-left var(--nm-cycle) linear infinite;
}

.nm-t5-enzyme-right {
    top: 57%;
    left: 85%;
    animation: nm-t5-enzyme-right var(--nm-cycle) linear infinite;
}

.nm-t5-enzyme-probe {
    animation: nm-t5-enzyme-probe var(--nm-cycle) var(--nm-ease) infinite;
}

.nm-t5-particles {
    position: absolute;
    z-index: 3;
    inset: 32% 10% 25%;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    align-content: center;
    justify-items: center;
    gap: 0.7rem;
    opacity: 0;
    animation: nm-t5-particles-appear var(--nm-cycle) ease-out infinite;
}

.nm-t5-particles i {
    width: 0.34rem;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--nm-dna);
}

.nm-supercoil {
    position: relative;
    width: 9rem;
    max-width: 72%;
    aspect-ratio: 1.3;
    opacity: 1;
}

.nm-supercoil i {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 72%;
    height: 58%;
    border: 0.38rem solid var(--nm-dna);
    border-radius: 50%;
    transform: translate(-50%, -50%) rotate(38deg);
}

.nm-supercoil i:last-child {
    transform: translate(-50%, -50%) rotate(-38deg);
}

.nm-preserved-label {
    bottom: 1rem;
    left: 50%;
    color: rgba(21, 25, 43, 0.76);
    transform: translateX(-50%);
}

@keyframes nm-t5-digest-from-left {
    0%, 26% { clip-path: inset(0 0 0 0); opacity: 1; }
    80%, 100% { clip-path: inset(0 0 0 100%); opacity: 1; }
}

@keyframes nm-t5-digest-from-right {
    0%, 26% { clip-path: inset(0 0 0 0); opacity: 1; }
    80%, 100% { clip-path: inset(0 100% 0 0); opacity: 1; }
}

@keyframes nm-t5-enzyme-left {
    0%, 12% { top: 22%; left: clamp(50px, var(--nm-t5-start), calc(100% - 50px)); opacity: 1; background: #f3cd91; transform: translate(-50%, -50%); }
    26% { top: var(--nm-t5-top, 46%); left: clamp(50px, var(--nm-t5-start), calc(100% - 50px)); opacity: 1; background: #e99a16; transform: translate(-50%, -50%); }
    80% { top: var(--nm-t5-top, 46%); left: clamp(50px, var(--nm-t5-end), calc(100% - 50px)); opacity: 1; background: #e99a16; transform: translate(-50%, -50%); }
    92%, 100% { top: 22%; left: clamp(50px, var(--nm-t5-end), calc(100% - 50px)); opacity: 1; background: #f3cd91; transform: translate(-50%, -50%); }
}

@keyframes nm-t5-enzyme-right {
    0%, 12% { top: 84%; left: clamp(50px, var(--nm-t5-end), calc(100% - 50px)); opacity: 1; background: #f3cd91; transform: translate(-50%, -50%); }
    26% { top: var(--nm-t5-bottom, 69%); left: clamp(50px, var(--nm-t5-end), calc(100% - 50px)); opacity: 1; background: #e99a16; transform: translate(-50%, -50%); }
    80% { top: var(--nm-t5-bottom, 69%); left: clamp(50px, var(--nm-t5-start), calc(100% - 50px)); opacity: 1; background: #e99a16; transform: translate(-50%, -50%); }
    92%, 100% { top: 84%; left: clamp(50px, var(--nm-t5-start), calc(100% - 50px)); opacity: 1; background: #f3cd91; transform: translate(-50%, -50%); }
}

@keyframes nm-t5-enzyme-probe {
    0%, 18% { top: 35%; left: 82%; opacity: 1; background: #f3cd91; transform: translate(-50%, -50%) scale(.8); }
    38%, 58% { top: 64%; left: 68%; opacity: 1; background: #e99a16; transform: translate(-50%, -50%); }
    78%, 100% { top: 35%; left: 82%; opacity: 1; background: #f3cd91; transform: translate(-50%, -50%) scale(.8); }
}

@keyframes nm-t5-particles-appear {
    0%, 36% { opacity: 0; transform: scale(0.72); }
    56%, 100% { opacity: 1; transform: scale(1); }
}

@media (max-width: 720px) {
    .nuclease-mechanism {
        min-height: 430px;
        grid-template-rows: auto minmax(13.5rem, 1fr) auto auto;
    }

    .nm-stage { min-height: 13.5rem; }
    .nm-target-label,
    .nm-preserved-label { font-size: 0.68rem; }
    .nm-enzyme { width: 3.75rem; height: 3.25rem; }
    .nm-enzyme span { max-width: 3rem; font-size: 0.58rem; }

    .nm-t5-stage {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(2, minmax(0, 1fr));
        min-height: 30rem;
    }

    .nm-t5-supercoiled {
        border-top: 1px solid rgba(21, 25, 43, 0.11);
        border-left: 0;
        padding-top: 2.8rem;
    }

    .nm-t5-row-top { top: 43%; }
    .nm-t5-row-bottom { top: 74%; }
    .nm-t5-linear { --nm-t5-top: 47%; --nm-t5-bottom: 78%; }
    .nm-t5-enzyme-left { top: 46%; }
    .nm-t5-enzyme-right { top: 62%; }
    .nm-t5-particles { inset: 35% 10% 10%; }
    .nm-supercoil { width: 7rem; max-width: 42%; }
    .nm-preserved-label { bottom: 0.4rem; }
}

/* Endonucleases: intact paths become the visible products.
   Only the short phosphodiester bridge paths change opacity (SMIL). */
.pa-nm-stage { min-height: 15rem; padding-block: 1.1rem .5rem; }
.pa-nm-grid {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .8rem;
    align-items: start;
}
.nm-dnase-stage .pa-nm-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pa-nm-lane { position: relative; min-width: 0; }
.pa-nm-label {
    display: grid;
    min-height: 3rem;
    align-content: start;
    padding-inline: .2rem;
    color: var(--brand-dark);
    font-size: 16px;
    font-weight: 650;
    line-height: 1.2;
    text-align: center;
}
.pa-nm-canvas { position: relative; height: 150px; }
.pa-nm-molecule { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pa-nm-backbone,
.pa-nm-bond {
    fill: none;
    stroke: var(--nm-dna);
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 1;
}
.pa-nm-rna .pa-nm-backbone,
.pa-nm-rna .pa-nm-bond { stroke: var(--nm-rna); }
.pa-nm-active-site { fill: none; stroke: #c87800; stroke-width: 3; }
.pa-nm-fragment {
    opacity: 1;
    animation: pa-nm-release var(--nm-cycle) ease-in-out infinite;
}
.pa-nm-circle .pa-nm-fragment { animation-name: pa-nm-circle-release; }
.nm-enzyme.pa-nm-enzyme {
    width: 96px;
    height: 48px;
    color: #4a2c00;
    top: 15%;
    left: 32%;
    opacity: 1; background: #f3cd91;
    box-shadow: 0 .4rem .8rem rgba(21,25,43,.1);
    transform: translate(-50%, -50%);
    animation: pa-nm-cleave var(--nm-cycle) linear infinite;
}
.nm-enzyme.pa-nm-enzyme::after { display: none; }
.nm-enzyme.pa-nm-enzyme span {
    max-width: 88px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.1;
}
.pa-nm-circle .pa-nm-enzyme { animation-name: pa-nm-circle-cleave; }
.pa-nm-preserved .pa-nm-enzyme { animation-name: pa-nm-probe; }
.pa-nm-preserved-label {
    display: block;
    margin-top: -.7rem;
    color: #077564;
    font-size: 16px;
    line-height: 1.2;
    text-align: center;
}
@keyframes pa-nm-release {
    0%, 64% { transform: translate(0, 0); }
    78%, 100% { transform: translate(var(--nm-fragment-x), var(--nm-fragment-y)); }
}
@keyframes pa-nm-circle-release {
    0%, 70% { transform: translate(0, 0); }
    82%, 100% { transform: translate(var(--nm-fragment-x), var(--nm-fragment-y)); }
}
@keyframes pa-nm-cleave {
    0%, 12% { top: 15%; left: clamp(48px, 32%, calc(100% - 48px)); opacity: 1; background: #f3cd91; }
    30%, 38% { top: 43%; left: clamp(48px, 31%, calc(100% - 48px)); opacity: 1; background: #e99a16; }
    44%, 50% { top: 43%; left: clamp(48px, 50%, calc(100% - 48px)); opacity: 1; background: #e99a16; }
    56%, 62% { top: 43%; left: clamp(48px, 69%, calc(100% - 48px)); opacity: 1; background: #e99a16; }
    76%, 100% { top: 15%; left: clamp(48px, 66%, calc(100% - 48px)); opacity: 1; background: #f3cd91; }
}
@keyframes pa-nm-circle-cleave {
    0%, 12% { top: 12%; left: clamp(48px, 50%, calc(100% - 48px)); opacity: 1; background: #f3cd91; }
    28%, 34% { top: 36%; left: clamp(48px, 50%, calc(100% - 48px)); opacity: 1; background: #e99a16; }
    40%, 46% { top: 63%; left: clamp(48px, 68%, calc(100% - 48px)); opacity: 1; background: #e99a16; }
    52%, 58% { top: 87%; left: clamp(48px, 50%, calc(100% - 48px)); opacity: 1; background: #e99a16; }
    64%, 70% { top: 63%; left: clamp(48px, 32%, calc(100% - 48px)); opacity: 1; background: #e99a16; }
    84%, 100% { top: 12%; left: clamp(48px, 50%, calc(100% - 48px)); opacity: 1; background: #f3cd91; }
}
@keyframes pa-nm-probe {
    0%, 12% { top: 15%; left: clamp(48px, 32%, calc(100% - 48px)); opacity: 1; background: #f3cd91; }
    32%, 48% { top: 43%; left: clamp(48px, 50%, calc(100% - 48px)); opacity: 1; background: #e99a16; }
    68%, 100% { top: 15%; left: clamp(48px, 66%, calc(100% - 48px)); opacity: 1; background: #f3cd91; }
}
@media (max-width: 720px) {
    .pa-nm-stage { min-height: 24rem; padding-block: .8rem; }
    .pa-nm-grid,
    .nm-dnase-stage .pa-nm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem .5rem; }
    .nm-dnase-stage .pa-nm-preserved { grid-column: 1 / -1; width: calc((100% - .5rem) / 2); justify-self: center; }
    .pa-nm-label { min-height: 3rem; }
}