#transmission-001-overlay {
    position: fixed;
    inset: 0;
    z-index: 999999;
    background: #000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 70ms linear;
}

#transmission-001-overlay.is-active {
    opacity: 1;
    pointer-events: auto;
}


/* =========================================
   TRANSMISSION #001
   DASHBOARD SIGNAL FAILURE
   ========================================= */

.preview {
    transform: translate3d(0, 0, 0);
}


/* ---------- FAILURE 01 ---------- */

body.transmission-glitch-1 .preview {
    transform:
        translateX(7px)
        skewX(-0.5deg);

    filter:
        contrast(1.18)
        brightness(0.92);
}

body.transmission-glitch-1::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 999998;
    pointer-events: none;

    background:
        repeating-linear-gradient(
            0deg,
            rgba(255,255,255,0.04) 0,
            rgba(255,255,255,0.04) 1px,
            transparent 1px,
            transparent 5px
        );
}


/* ---------- FAILURE 02 ---------- */

body.transmission-glitch-2 .preview {
    transform:
        translateX(-12px)
        skewX(0.8deg);

    filter:
        contrast(1.35)
        brightness(0.78);
}

body.transmission-glitch-2::before,
body.transmission-glitch-2::after {
    content: "";
    position: fixed;
    left: 0;
    right: 0;
    z-index: 999998;
    pointer-events: none;
}

body.transmission-glitch-2::before {
    top: 28%;
    height: 55px;

    background: rgba(255,255,255,0.08);

    transform: translateX(25px);
}

body.transmission-glitch-2::after {
    top: 67%;
    height: 28px;

    background: rgba(0,0,0,0.65);

    transform: translateX(-35px);
}


/* ---------- FAILURE 03 ---------- */

body.transmission-glitch-3 .preview {
    transform:
        translateX(15px)
        skewX(-1deg);

    filter:
        contrast(1.55)
        brightness(0.58);
}

body.transmission-glitch-3::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 999997;
    pointer-events: none;

    background:
        repeating-linear-gradient(
            0deg,
            transparent 0,
            transparent 7px,
            rgba(255,255,255,0.07) 8px
        );
}

body.transmission-glitch-3::after {
    content: "";
    position: fixed;

    left: 0;
    right: 0;
    top: 44%;

    height: 90px;

    z-index: 999998;
    pointer-events: none;

    background: rgba(0,0,0,0.72);

    transform: translateX(-45px);
}


/* ---------- FINAL FREEZE ---------- */

body.transmission-freeze .preview {
    transform: translateX(-4px);

    filter:
        grayscale(0.35)
        contrast(1.4)
        brightness(0.52);
}

body.transmission-freeze::after {
    content: "";
    position: fixed;
    inset: 0;

    z-index: 999998;
    pointer-events: none;

    background:
        repeating-linear-gradient(
            0deg,
            rgba(255,255,255,0.025) 0,
            rgba(255,255,255,0.025) 1px,
            transparent 1px,
            transparent 4px
        );
}

/* =========================================
   TERMINAL BOOT
   ========================================= */

.transmission-terminal {
    position: absolute;
    inset: 0;

    padding:
        clamp(32px, 6vw, 90px)
        clamp(24px, 7vw, 120px);

    color: rgba(220, 225, 230, 0.92);

    font-family:
        "Courier New",
        Courier,
        monospace;

    font-size:
        clamp(13px, 1.15vw, 18px);

    line-height: 1.8;

    letter-spacing: 0.04em;

    opacity: 0;
}

.transmission-terminal.is-awake {
    opacity: 1;
}

.transmission-terminal-output {
    max-width: 900px;
}

.transmission-terminal-line {
    min-height: 1.8em;
    white-space: pre-wrap;
}

.transmission-cursor {
    display: none;

    width: 9px;
    height: 17px;

    margin-top: 8px;

    background: rgba(220, 225, 230, 0.9);
}

.transmission-terminal.is-awake
.transmission-cursor {
    display: block;

    animation:
        transmission-cursor-blink
        0.75s
        steps(1)
        infinite;
}

@keyframes transmission-cursor-blink {
    0%,
    45% {
        opacity: 1;
    }

    46%,
    100% {
        opacity: 0;
    }
}

/* =========================================
   001-E // THE BREACH
   ========================================= */

.transmission-terminal {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(220px, 320px);

    gap: clamp(30px, 6vw, 100px);

    position: absolute;
    inset: 0;

    padding:
        clamp(32px, 5vw, 80px)
        clamp(28px, 6vw, 110px);

    color: rgba(224, 227, 232, 0.94);

    font-family:
        "Courier New",
        Courier,
        monospace;

    font-size:
        clamp(13px, 1vw, 17px);

    line-height: 1.65;

    letter-spacing: 0.035em;

    opacity: 0;

    overflow: hidden;
}

.transmission-terminal.is-awake {
    opacity: 1;
}

.transmission-terminal-main {
    min-width: 0;
}

.transmission-terminal-output {
    max-height: calc(100vh - 150px);

    overflow-y: auto;
    overflow-x: hidden;

    scrollbar-width: none;
}

.transmission-terminal-output::-webkit-scrollbar {
    display: none;
}

.transmission-terminal-line {
    min-height: 1.65em;
    white-space: pre-wrap;
}

.transmission-input-row {
    display: none;
    min-height: 26px;
    margin-top: 4px;
}

.transmission-input-row.is-visible {
    display: block;
}

.transmission-cursor {
    display: inline-block;

    width: 9px;
    height: 17px;

    vertical-align: middle;

    background: rgba(236, 238, 242, 0.95);

    animation:
        transmission-cursor-blink
        0.72s
        steps(1)
        infinite;
}

@keyframes transmission-cursor-blink {
    0%,
    46% {
        opacity: 1;
    }

    47%,
    100% {
        opacity: 0;
    }
}


/* ---------- terminal emphasis ---------- */

.terminal-highlight {
    color: #ffffff;
    font-weight: 700;
}

.terminal-data {
    color: rgba(173, 179, 190, 0.72);
}

.terminal-success {
    color: rgba(214, 220, 225, 0.98);
    font-weight: 700;
}

.terminal-warning {
    color: rgba(230, 210, 150, 0.95);
}

.terminal-danger {
    color: rgba(255, 95, 95, 0.98);
    font-weight: 700;
}


/* ---------- progress ---------- */

.transmission-progress-line {
    display: flex;
    align-items: center;

    min-height: 1.8em;

    white-space: pre;
}

.transmission-progress-bar {
    color: rgba(218, 221, 228, 0.9);
}


/* ---------- status panel ---------- */

.transmission-status-panel {
    align-self: start;

    margin-top: 10px;

    padding: 20px;

    border:
        1px solid
        rgba(160, 120, 220, 0.18);

    background:
        rgba(11, 8, 18, 0.55);

    opacity: 0;

    transform: translateY(6px);

    transition:
        opacity 250ms ease,
        transform 250ms ease;
}

.transmission-status-panel.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.status-panel-title {
    margin-bottom: 22px;

    color: rgba(185, 148, 235, 0.9);

    font-size: 0.8em;
    letter-spacing: 0.18em;
}

.status-group {
    display: flex;
    justify-content: space-between;
    gap: 20px;

    padding: 10px 0;

    border-bottom:
        1px solid
        rgba(255,255,255,0.05);
}

.status-group span {
    color: rgba(180, 185, 195, 0.55);
}

.status-group strong {
    color: rgba(220, 223, 230, 0.9);

    font-weight: 400;
}

.status-group strong.status-warning {
    color: rgba(230, 210, 150, 0.95);
}

.status-group strong.status-danger {
    color: rgba(255, 95, 95, 0.95);
}

.status-group strong.status-active {
    color: rgba(190, 220, 200, 0.95);
}


/* ---------- subtle terminal scan ---------- */

.transmission-terminal::after {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        repeating-linear-gradient(
            0deg,
            transparent 0,
            transparent 3px,
            rgba(255,255,255,0.012) 4px
        );

    opacity: 0.55;
}


/* ---------- laptop / narrow ---------- */

@media (max-width: 900px) {
    .transmission-terminal {
        grid-template-columns: 1fr;
    }

    .transmission-status-panel {
        display: none;
    }
}

/* =========================================
   001-F // REMOTE OPERATOR
   ========================================= */

.transmission-operator-prompt {
    color: rgba(185, 148, 235, 0.95);
    font-weight: 700;
}

.transmission-operator-text {
    color: rgba(245, 245, 248, 0.98);
}

.terminal-operator {
    color: rgba(245, 245, 248, 0.98);
    font-weight: 700;
}

/* =========================================================
   001-H1 // SECURE AUTHENTICATION GATEWAY
   ========================================================= */

.transmission-gateway {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 40px 24px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 5;
    font-family: "DM Mono", "Courier New", monospace;
}

.transmission-gateway.is-visible {
    opacity: 1;
    visibility: visible;
}

.gateway-shell {
    position: relative;
    width: min(510px, 100%);
    border: 1px solid rgba(183, 150, 250, 0.24);
    background:
        linear-gradient(
            145deg,
            rgba(27, 22, 39, 0.92),
            rgba(11, 9, 16, 0.97)
        );

    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.55),
        inset 0 1px rgba(255, 255, 255, 0.035),
        0 0 60px rgba(98, 48, 170, 0.10);

    backdrop-filter: blur(22px);
}

.gateway-shell::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;

    background:
        linear-gradient(
            120deg,
            rgba(255, 255, 255, 0.025),
            transparent 34%
        );
}

.gateway-corner {
    position: absolute;
    width: 9px;
    height: 9px;
    z-index: 2;
}

.gateway-corner-tl {
    top: -1px;
    left: -1px;
    border-top: 2px solid #b895ff;
    border-left: 2px solid #b895ff;
}

.gateway-corner-tr {
    top: -1px;
    right: -1px;
    border-top: 2px solid #b895ff;
    border-right: 2px solid #b895ff;
}

.gateway-corner-bl {
    bottom: -1px;
    left: -1px;
    border-bottom: 2px solid #b895ff;
    border-left: 2px solid #b895ff;
}

.gateway-corner-br {
    bottom: -1px;
    right: -1px;
    border-bottom: 2px solid #b895ff;
    border-right: 2px solid #b895ff;
}

.gateway-head,
.gateway-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;

    height: 53px;
    padding: 0 27px;

    color: #aaa3b0;

    font-size: 9px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.15em;
}

.gateway-head {
    border-bottom:
        1px solid rgba(181, 151, 255, 0.16);
}

.gateway-head-left {
    display: flex;
    align-items: center;
    gap: 9px;
}

.gateway-dot {
    width: 5px;
    height: 5px;

    background: #b895ff;

    box-shadow:
        0 0 8px #8d56ff;
}

.gateway-node {
    color: #5f5967;
}

.gateway-body {
    padding: 34px 43px 39px;
}

.gateway-copy > span {
    color: #b895ff;

    font-size: 9px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.21em;
}

.gateway-copy h2 {
    margin: 9px 0 32px;

    color: #f2eff8;

    font-family: "Manrope", sans-serif;
    font-size: 24px;
    font-weight: 500;
    letter-spacing: -0.03em;
}

.gateway-field-group {
    margin-top: 20px;
}

.gateway-field-group label {
    display: block;

    margin-bottom: 9px;

    color: #aaa3b0;

    font-size: 9px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.17em;
}

.gateway-field {
    height: 48px;

    display: flex;
    align-items: center;

    border:
        1px solid rgba(171, 145, 211, 0.18);

    background:
        rgba(5, 4, 8, 0.53);
}

.gateway-field-verified {
    border-color:
        rgba(141, 86, 255, 0.35);

    box-shadow:
        inset 0 0 20px rgba(141, 86, 255, 0.025);
}

.gateway-prompt {
    padding-left: 16px;

    color: #8d56ff;

    font-size: 13px;
}

.gateway-value {
    padding-left: 13px;

    color: #e7e1ee;

    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.12em;
}

.gateway-field-verified .gateway-value {
    color: #b895ff;
}

.gateway-access-button {
    width: 100%;
    height: 50px;

    margin-top: 28px;

    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 0 18px 0 20px;

    color: #fff;

    border:
        1px solid #9264ec;

    background:
        linear-gradient(
            100deg,
            #5b2ca7,
            #7a3ed4
        );

    box-shadow:
        0 0 25px rgba(102, 49, 184, 0.17),
        inset 0 1px rgba(255, 255, 255, 0.15);

    font-family: "DM Mono", "Courier New", monospace;
    font-size: 10px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.16em;

    cursor: default;
}

.gateway-access-button i {
    font-style: normal;
    font-size: 16px;
    font-weight: 300;
}

.gateway-foot {
    height: 38px;

    border-top:
        1px solid rgba(181, 151, 255, 0.16);

    color: #77717f;

    font-size: 8px;
}

@media (max-width: 560px) {
    .transmission-gateway {
        padding: 24px 16px;
    }

    .gateway-head {
        padding: 0 18px;
    }

    .gateway-node {
        display: none;
    }

    .gateway-body {
        padding: 28px 22px 31px;
    }

    .gateway-foot {
        padding: 0 18px;
    }

    .gateway-foot span:nth-child(2) {
        display: none;
    }
}

/* =========================================================
   001-H2 // TERMINAL -> SECURE GATEWAY
   ========================================================= */

.transmission-terminal {
    transition:
        opacity 320ms ease,
        filter 320ms ease,
        transform 320ms ease;
}

.transmission-terminal.is-purging {
    opacity: 0.12;
    filter:
        contrast(1.8)
        brightness(1.35)
        blur(0.7px);

    transform:
        scaleY(0.985)
        translateX(-5px);
}

.transmission-terminal.is-purged {
    opacity: 0;
    visibility: hidden;
}

.transmission-gateway {
    transform:
        scale(0.965)
        translateY(8px);

    filter:
        blur(5px)
        brightness(0.75);

    transition:
        opacity 550ms ease,
        transform 650ms cubic-bezier(.16,.84,.32,1),
        filter 500ms ease;
}

.transmission-gateway.is-visible {
    opacity: 1;
    visibility: visible;

    transform:
        scale(1)
        translateY(0);

    filter:
        blur(0)
        brightness(1);
}

#transmission-001-overlay.gateway-signal-break::before,
#transmission-001-overlay.gateway-signal-break::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;

    z-index: 20;
    pointer-events: none;
}

#transmission-001-overlay.gateway-signal-break::before {
    top: 37%;
    height: 3px;

    background:
        rgba(184, 149, 255, 0.95);

    box-shadow:
        0 0 22px rgba(141, 86, 255, 0.8);
}

#transmission-001-overlay.gateway-signal-break::after {
    top: 61%;
    height: 1px;

    background:
        rgba(255, 255, 255, 0.5);
}

.gateway-shell {
    overflow: hidden;
}

.gateway-shell::after {
    content: "";
    position: absolute;

    left: 0;
    right: 0;
    top: -35%;

    height: 32%;

    pointer-events: none;

    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(184, 149, 255, 0.055),
            rgba(255, 255, 255, 0.045),
            transparent
        );

    opacity: 0;
}

.transmission-gateway.is-visible
.gateway-shell::after {
    animation:
        gateway-scan-in
        900ms
        ease-out
        1;
}

@keyframes gateway-scan-in {
    0% {
        top: -35%;
        opacity: 0;
    }

    15% {
        opacity: 1;
    }

    100% {
        top: 115%;
        opacity: 0;
    }
}

/* =========================================================
   001-H3 // SECURE TRANSMISSION HEARTBEAT
   ========================================================= */

.transmission-gateway.is-visible
.gateway-access-button {
    animation:
        gateway-access-heartbeat
        2.4s
        ease-in-out
        infinite;
}

@keyframes gateway-access-heartbeat {
    0%,
    100% {
        filter: brightness(1);
        box-shadow:
            0 0 0 rgba(141, 86, 255, 0);
    }

    50% {
        filter: brightness(1.16);
        box-shadow:
            0 0 22px rgba(141, 86, 255, 0.34),
            0 0 48px rgba(141, 86, 255, 0.10);
    }
}

.transmission-gateway.is-visible
.gateway-access-button i {
    display: inline-block;

    animation:
        gateway-access-arrow
        2.4s
        ease-in-out
        infinite;
}

@keyframes gateway-access-arrow {
    0%,
    35%,
    100% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(2px, -2px);
    }
}

/* =========================================================
   001-I // SECURE HANDSHAKE
   ========================================================= */

.transmission-gateway.is-visible
.gateway-access-button.is-establishing {
    animation: none;

    filter:
        brightness(0.92);

    box-shadow:
        0 0 18px
        rgba(141, 86, 255, 0.18);

    cursor: wait;
}

.transmission-gateway.is-visible
.gateway-access-button.is-establishing i {
    animation:
        gateway-handshake-dots
        0.7s
        steps(2)
        infinite;
}

@keyframes gateway-handshake-dots {
    0% {
        opacity: 0.35;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0.35;
    }
}

.transmission-gateway.is-handshaking
.gateway-shell {
    animation:
        gateway-handshake-signal
        420ms
        steps(2, end)
        1;
}

@keyframes gateway-handshake-signal {
    0% {
        transform: translateX(0);
        filter: none;
    }

    30% {
        transform: translateX(-2px);
        filter:
            brightness(1.18)
            contrast(1.08);
    }

    60% {
        transform: translateX(3px);
    }

    100% {
        transform: translateX(0);
        filter: none;
    }
}

.transmission-gateway.is-visible
.gateway-access-button.is-secured {
    animation: none;

    filter:
        brightness(1.08);

    box-shadow:
        0 0 24px
        rgba(141, 86, 255, 0.28);

    cursor: default;
}

.transmission-gateway.is-visible
.gateway-access-button.is-secured i {
    animation: none;
}

/* Gateway becomes interactive after authentication */
.transmission-gateway.is-visible {
    pointer-events: auto;
}

/* =========================================================
   001-J1 // ENCRYPTED TRANSMISSION SIGNAL
   ========================================================= */

.encrypted-transmission {
    position: absolute;
    inset: 0;

    z-index: 30;

    display: grid;
    place-items: center;

    background: #000;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    overflow: hidden;
}

.encrypted-transmission.is-visible {
    opacity: 1;
    visibility: visible;
}

.encrypted-video-stage {
    position: absolute;
    inset: 0;

    overflow: hidden;

    background:
        radial-gradient(
            circle at center,
            rgba(18, 12, 28, 0.22),
            rgba(0, 0, 0, 0.96) 68%
        ),
        #000;
}

.encrypted-video-placeholder {
    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            circle at 50% 42%,
            rgba(80, 50, 120, 0.10),
            transparent 38%
        ),
        #000;
}


/* ---------- ANALOG STATIC / TV SNOW ---------- */

.transmission-static {
    position: absolute;
    inset: -20%;

    opacity: 0;

    pointer-events: none;

    mix-blend-mode: screen;

    background-image:
        repeating-radial-gradient(
            circle at 17% 23%,
            rgba(255,255,255,0.78) 0 1px,
            rgba(255,255,255,0.05) 1px 2px,
            rgba(0,0,0,0.9) 2px 4px
        );

    background-size:
        7px 7px;

    filter:
        contrast(2.2)
        brightness(1.15);

    transform: scale(1.15);
}

.transmission-static.is-active {
    opacity: 0.82;

    animation:
        transmission-static-shift
        90ms
        steps(2, end)
        infinite;
}

@keyframes transmission-static-shift {
    0% {
        transform:
            translate(-2%, -1%)
            scale(1.16);
    }

    20% {
        transform:
            translate(3%, 2%)
            scale(1.13);
    }

    40% {
        transform:
            translate(-1%, 4%)
            scale(1.17);
    }

    60% {
        transform:
            translate(4%, -3%)
            scale(1.14);
    }

    80% {
        transform:
            translate(-4%, 1%)
            scale(1.18);
    }

    100% {
        transform:
            translate(2%, -2%)
            scale(1.15);
    }
}


/* ---------- HORIZONTAL SIGNAL TEARING ---------- */

.transmission-static::before,
.transmission-static::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;

    pointer-events: none;
}

.transmission-static::before {
    top: 24%;
    height: 7%;

    background:
        rgba(255,255,255,0.18);

    filter: blur(3px);

    animation:
        transmission-static-band-a
        430ms
        steps(2, end)
        infinite;
}

.transmission-static::after {
    top: 68%;
    height: 2px;

    background:
        rgba(210,190,255,0.46);

    box-shadow:
        0 0 12px
        rgba(141,86,255,0.34);

    animation:
        transmission-static-band-b
        310ms
        steps(2, end)
        infinite;
}

@keyframes transmission-static-band-a {
    0% {
        top: 18%;
        transform: translateX(-3%);
    }

    40% {
        top: 53%;
        transform: translateX(4%);
    }

    70% {
        top: 34%;
        transform: translateX(-2%);
    }

    100% {
        top: 76%;
        transform: translateX(2%);
    }
}

@keyframes transmission-static-band-b {
    0% {
        top: 71%;
    }

    50% {
        top: 28%;
    }

    100% {
        top: 62%;
    }
}


/* ---------- CRT / SCANLINES ---------- */

.transmission-scanlines {
    position: absolute;
    inset: 0;

    pointer-events: none;

    z-index: 4;

    background:
        repeating-linear-gradient(
            to bottom,
            rgba(255,255,255,0.025) 0,
            rgba(255,255,255,0.025) 1px,
            transparent 1px,
            transparent 4px
        );

    opacity: 0.48;
}


/* ---------- SIGNAL INFORMATION ---------- */

.transmission-signal-info {
    position: absolute;

    left: clamp(20px, 4vw, 60px);
    bottom: clamp(22px, 4vw, 58px);

    z-index: 8;

    display: flex;
    flex-direction: column;

    gap: 6px;

    font-family:
        "Courier New",
        Courier,
        monospace;

    letter-spacing: 0.14em;

    text-transform: uppercase;
}

.transmission-signal-info span {
    color:
        rgba(184,149,255,0.92);

    font-size:
        clamp(10px, 0.9vw, 13px);
}

.transmission-signal-info strong {
    color:
        rgba(244,242,248,0.95);

    font-size:
        clamp(12px, 1vw, 15px);

    font-weight: 500;
}

.transmission-signal-info small {
    margin-top: 5px;

    color:
        rgba(170,165,180,0.68);

    font-size:
        clamp(9px, 0.8vw, 12px);
}

.encrypted-agent-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.transmission-signal-info {
    transition:
        opacity 350ms ease,
        visibility 350ms ease;
}

.transmission-signal-info.is-hidden {
    opacity: 0;
    visibility: hidden;
}

/* =========================================================
   001-K // OPERATIVE RECORD
   ========================================================= */

.operative-record {
    position: absolute;
    inset: 0;
    z-index: 40;

    display: grid;
    place-items: center;

    padding: 42px 24px;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    overflow: hidden;

    font-family:
        "DM Mono",
        "Courier New",
        monospace;

    background:
        #05040a;
    
    transition:
        opacity 700ms ease,
        visibility 700ms ease;    
}

.operative-record.is-visible {
    opacity: 1;
    visibility: visible;
}

.operative-record.is-visible
.operative-record-shell {
    opacity: 1;

    transform:
        translateY(0)
        scale(1);
}

.operative-record-backdrop {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            rgba(4, 3, 8, .48),
            rgba(4, 3, 8, .62)
        ),
        url("img/operative-background.png")
        center center / cover no-repeat;

    filter:
        brightness(.78)
        contrast(1.06);

    transform: scale(1.015);
}

.operative-record-backdrop::after {
    content: "";
    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            circle at center,
            rgba(102, 45, 170, .08),
            rgba(0, 0, 0, .72) 74%
        );
}

.operative-record-shell {
    position: relative;
    z-index: 2;

    width: min(920px, 100%);

    background:
        linear-gradient(
            145deg,
            rgba(19, 16, 26, .94),
            rgba(8, 7, 12, .98)
        );

    border:
        1px solid rgba(190, 163, 255, .22);

    box-shadow:
        0 32px 90px rgba(0, 0, 0, .68),
        0 0 42px rgba(115, 58, 190, .08);

    backdrop-filter: blur(12px);

    overflow: hidden;

    opacity: 0;

    transform:
        translateY(10px)
        scale(.985);

    transition:
        opacity 850ms ease,
        transform 850ms cubic-bezier(.2,.7,.2,1);
}

.operative-record-shell::before {
    content: "";
    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(176, 135, 255, .035),
            transparent
        );
}

/* HEADER */

.operative-record-header {
    min-height: 76px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;

    padding: 18px 28px;

    border-bottom:
        1px solid rgba(190, 163, 255, .12);
}

.operative-record-header > div {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.operative-record-kicker {
    color: #a987ef;

    font-size: 9px;
    letter-spacing: .2em;
}

.operative-record-header strong {
    color: #f1eef7;

    font-size: 14px;
    font-weight: 600;
    letter-spacing: .12em;
}

.operative-record-classification {
    color: #9e94a8;

    font-size: 9px;
    letter-spacing: .16em;

    white-space: nowrap;
}

/* BODY */

.operative-record-body {
    display: grid;
    grid-template-columns: 290px 1fr;

    min-height: 420px;
}

/* PHOTO */

.operative-record-photo-column {
    padding: 30px;

    border-right:
        1px solid rgba(190, 163, 255, .10);

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.015),
            rgba(255,255,255,0)
        );
}

.operative-record-photo-frame {
    position: relative;

    width: 100%;
    aspect-ratio: 4 / 5;

    overflow: hidden;

    border:
        1px solid rgba(190, 163, 255, .18);

    background: #08070b;
}

.operative-record-photo-frame::before {
    content: "";
    position: absolute;
    inset: 0;

    z-index: 2;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            transparent 72%,
            rgba(0, 0, 0, .42)
        );
}

.operative-record-photo-frame img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center;
}

.operative-record-photo-id {
    margin-top: 12px;

    color: #746d7d;

    font-size: 9px;
    letter-spacing: .16em;
}

/* DATA */

.operative-record-data {
    padding: 30px 34px 34px;
}

.operative-record-title {
    padding-bottom: 24px;

    border-bottom:
        1px solid rgba(190, 163, 255, .10);
}

.operative-record-title span {
    display: block;

    margin-bottom: 8px;

    color: #8e8499;

    font-size: 9px;
    letter-spacing: .19em;
}

.operative-record-title h2 {
    margin: 0;

    color: #f5f2fa;

    font-family:
        "Manrope",
        Arial,
        sans-serif;

    font-size: clamp(28px, 4vw, 42px);
    font-weight: 650;
    letter-spacing: -.025em;
}

.operative-record-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    margin-top: 22px;

    border-top:
        1px solid rgba(190, 163, 255, .08);

    border-left:
        1px solid rgba(190, 163, 255, .08);
}

.operative-record-field {
    min-height: 78px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 7px;

    padding: 14px 16px;

    border-right:
        1px solid rgba(190, 163, 255, .08);

    border-bottom:
        1px solid rgba(190, 163, 255, .08);
}

.operative-record-field-wide {
    grid-column: 1 / -1;
}

.operative-record-field span {
    color: #777080;

    font-size: 8px;
    letter-spacing: .17em;
}

.operative-record-field strong {
    color: #e8e3ee;

    font-size: 12px;
    font-weight: 500;
    letter-spacing: .08em;
}

.operative-record-field small {
    color: #625c69;

    font-size: 8px;
    letter-spacing: .14em;
}

.record-success {
    color: #b895ff !important;
}

.record-gold {
    color: #d9b86c !important;
}

.record-location {
    color: #d8d2df !important;
}

/* FOOTER */

.operative-record-footer {
    min-height: 48px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;

    padding: 0 28px;

    border-top:
        1px solid rgba(190, 163, 255, .10);

    color: #686171;

    font-size: 8px;
    letter-spacing: .15em;
}

/* RESPONSIVE */

@media (max-width: 760px) {
    .operative-record {
        padding: 22px 14px;
    }

    .operative-record-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }

    .operative-record-body {
        grid-template-columns: 1fr;
    }

    .operative-record-photo-column {
        border-right: 0;
        border-bottom:
            1px solid rgba(190, 163, 255, .10);
    }

    .operative-record-photo-frame {
        max-width: 260px;
        margin: 0 auto;
    }

    .operative-record-photo-id {
        text-align: center;
    }

    .operative-record-data {
        padding:
            24px 20px 28px;
    }

    .operative-record-grid {
        grid-template-columns: 1fr;
    }

    .operative-record-field-wide {
        grid-column: auto;
    }

    .operative-record-footer {
        align-items: flex-start;
        flex-direction: column;

        padding:
            14px 20px;

        line-height: 1.6;
    }
}