/* Operation Overbuilt Entry v1.1.0
   Rigid mechanical vault. No image slicing, no morphing. */

:root {
    --obv-cyan: #58d7ff;
    --obv-cyan-soft: rgba(88,215,255,.28);
    --obv-orange: #ff8d3b;
    --obv-red: #ff3131;
    --obv-steel-0: #050a0e;
    --obv-steel-1: #0b151c;
    --obv-steel-2: #172932;
    --obv-steel-3: #405662;
}

html.obv-pending,
html.obv-pending body {
    overflow: hidden !important;
}

.obv-entry {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    overflow: hidden;
    isolation: isolate;
    background: #02070b;
    color: #e8f8ff;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

html.obv-pending .obv-entry {
    display: block;
}

html.obv-bypassed .obv-entry {
    display: none !important;
}

/* ---------------------------------------------------------
   Stable workshop plate behind the mechanism
   --------------------------------------------------------- */
.obv-workshop {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    background: #02070b;
}

.obv-workshop img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    transform: scale(1.04);
    filter: brightness(.34) saturate(.84) contrast(1.08);
    transition:
        transform 2.2s cubic-bezier(.16,.8,.2,1),
        filter 1.2s ease;
}

.obv-workshop-light {
    position: absolute;
    inset: 0;
    z-index: 1;
    opacity: .10;
    pointer-events: none;
    background:
        radial-gradient(circle at 57% 51%, rgba(145,224,255,.20), transparent 24%),
        radial-gradient(circle at 68% 56%, rgba(255,135,58,.13), transparent 22%);
    transition: opacity 1s ease;
}

/* ---------------------------------------------------------
   Perspective stage and rigid door body
   --------------------------------------------------------- */
.obv-stage {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: grid;
    place-items: center;
    perspective: 1700px;
    perspective-origin: 50% 48%;
    pointer-events: none;
}

.obv-door {
    position: relative;
    width: min(84vmin, 920px);
    aspect-ratio: 1;
    border-radius: 50%;
    transform-style: preserve-3d;
    transform-origin: 3% 50%;
    will-change: transform, filter, opacity;
    transition:
        transform 2.62s cubic-bezier(.12,.72,.18,1),
        filter .6s ease,
        opacity .5s ease;
}

/* Z-stack gives actual visible thickness during 3D swing. */
.obv-depth {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 5px solid #061017;
    background:
        radial-gradient(circle at 34% 28%, #354a55 0 4%, #14242d 24%, #081117 58%, #020609 100%);
    box-shadow:
        inset 0 0 0 3px rgba(255,255,255,.035),
        inset 0 0 80px rgba(0,0,0,.75);
    backface-visibility: hidden;
}

.obv-depth-1 { transform: translateZ(-6px); }
.obv-depth-2 { transform: translateZ(-12px); }
.obv-depth-3 { transform: translateZ(-18px); }
.obv-depth-4 { transform: translateZ(-24px); }
.obv-depth-5 { transform: translateZ(-30px); }
.obv-depth-6 { transform: translateZ(-36px); }

.obv-door-svg {
    position: absolute;
    inset: 0;
    z-index: 10;
    width: 100%;
    height: 100%;
    overflow: visible;
    transform: translateZ(2px);
    filter: drop-shadow(0 24px 44px rgba(0,0,0,.58));
    backface-visibility: hidden;
}

.obv-door-base {
    fill: url(#obvSteel);
    stroke: #6a7c86;
    stroke-width: 14;
}

.obv-rim-outer {
    fill: none;
    stroke: url(#obvEdge);
    stroke-width: 36;
}

.obv-rim-inner {
    fill: none;
    stroke: #050b0f;
    stroke-width: 22;
}

.obv-ring-plate {
    fill: rgba(12,25,33,.94);
    stroke: #445964;
    stroke-width: 34;
}

.obv-ring-groove {
    fill: none;
    stroke: #03070a;
    stroke-width: 24;
}

.obv-tooth {
    fill: #6a7f8a;
    stroke: #101b22;
    stroke-width: 3;
}

.obv-inner-plate {
    fill: rgba(18,34,43,.97);
    stroke: #526773;
    stroke-width: 26;
}

.obv-inner-groove {
    fill: none;
    stroke: #04090d;
    stroke-width: 24;
}

.obv-inner-tech {
    fill: none;
    stroke: #223946;
    stroke-width: 18;
    stroke-dasharray: 22 12;
}

.obv-cyan-arc,
.obv-orange-arc {
    fill: none;
    stroke-width: 12;
    stroke-linecap: round;
    opacity: .30;
}

.obv-cyan-arc {
    stroke: var(--obv-cyan);
    filter: url(#obvGlowCyan);
}

.obv-orange-arc {
    stroke: var(--obv-orange);
    filter: url(#obvGlowOrange);
}

.obv-dog-block {
    fill: #334955;
    stroke: #82919a;
    stroke-width: 6;
}

.obv-dog-inset {
    fill: #0a141b;
    stroke: #172a34;
    stroke-width: 5;
}

.obv-fastener {
    fill: #8c9ba3;
    stroke: #111b21;
    stroke-width: 4;
}

.obv-bolt-body {
    fill: url(#obvBolt);
    stroke: #83939b;
    stroke-width: 5;
}

.obv-bolt-tip {
    fill: #091116;
    stroke: #50616a;
    stroke-width: 4;
}

.obv-bolt-port {
    fill: #071016;
    stroke: #283d48;
    stroke-width: 4;
}

.obv-cam-plate {
    fill: #0a151d;
    stroke: #5b6f7b;
    stroke-width: 24;
}

.obv-cam-spider {
    fill: #243a45;
    stroke: #7f9099;
    stroke-width: 12;
}

.obv-hub {
    fill: #13242d;
    stroke: #758892;
    stroke-width: 18;
}

.obv-hub-core {
    fill: #050a0e;
    stroke: var(--obv-cyan);
    stroke-width: 5;
    filter: url(#obvGlowCyan);
}

.obv-mark-main {
    fill: rgba(226,241,247,.74);
    font-size: 36px;
    font-weight: 900;
    letter-spacing: 4px;
}

.obv-mark-sub {
    fill: rgba(88,215,255,.52);
    font-size: 19px;
    font-weight: 700;
    letter-spacing: 5px;
}

/* Every rotating group shares the exact same 500/500 centre. */
.obv-outer-ring,
.obv-inner-ring,
.obv-cam {
    transform-box: view-box;
    transform-origin: 500px 500px;
    transition:
        transform 1.4s cubic-bezier(.18,.78,.18,1),
        filter .35s ease;
}

.obv-dog rect,
.obv-dog circle {
    transition: transform .62s cubic-bezier(.20,.88,.22,1);
}

.obv-bolt rect {
    transition: transform .64s cubic-bezier(.18,.86,.22,1);
}

/* ---------------------------------------------------------
   Hinges / frame hardware
   --------------------------------------------------------- */
.obv-hinge {
    position: absolute;
    z-index: 6;
    left: max(2vw, calc(50% - min(42vmin, 460px) - 56px));
    top: 50%;
    width: 70px;
    height: min(64vmin, 700px);
    transform: translateY(-50%);
    pointer-events: none;
}

.obv-hinge::before {
    content: "";
    position: absolute;
    left: 26px;
    top: 0;
    bottom: 0;
    width: 18px;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 999px;
    background: linear-gradient(90deg,#071017,#526670 48%,#101d24);
    box-shadow: 0 0 22px rgba(0,0,0,.55);
}

.obv-hinge i {
    position: absolute;
    left: 3px;
    width: 64px;
    height: 92px;
    border: 1px solid #344a54;
    border-radius: 12px;
    background: linear-gradient(90deg,#091218,#314853 48%,#091218);
    box-shadow: 0 12px 20px rgba(0,0,0,.35);
}

.obv-hinge i:nth-child(1) { top: 4%; }
.obv-hinge i:nth-child(2) { top: calc(50% - 46px); }
.obv-hinge i:nth-child(3) { bottom: 4%; }

/* ---------------------------------------------------------
   Independent scanner — never inside the rotating door
   --------------------------------------------------------- */
.obv-scanner {
    position: absolute;
    inset: 0;
    z-index: 30;
    pointer-events: none;
    opacity: 0;
}

.obv-scan-line,
.obv-scan-glow {
    position: absolute;
    top: 0;
    bottom: 0;
    left: -8vw;
    width: 4px;
    transform: translateX(0);
    will-change: transform;
}

.obv-scan-line {
    background: rgba(255,54,54,.98);
    box-shadow:
        0 0 7px rgba(255,40,40,.9),
        0 0 20px rgba(255,40,40,.72),
        0 0 52px rgba(255,40,40,.34);
}

.obv-scan-glow {
    width: 54px;
    margin-left: -25px;
    background: linear-gradient(90deg, transparent, rgba(255,44,44,.13), transparent);
    filter: blur(5px);
}

html.obv-playing .obv-scanner {
    opacity: 1;
}

html.obv-playing .obv-scan-line,
html.obv-playing .obv-scan-glow {
    animation: obv-screen-scan 1.75s .45s cubic-bezier(.18,.75,.18,1) forwards;
}

@keyframes obv-screen-scan {
    from { transform: translateX(0); }
    to { transform: translateX(116vw); }
}

html.obv-scan-done .obv-scanner {
    opacity: 0;
    transition: opacity .22s ease;
}

/* ---------------------------------------------------------
   Pressure / seal effects
   --------------------------------------------------------- */
.obv-pressure {
    position: absolute;
    inset: 0;
    z-index: 14;
    pointer-events: none;
}

.obv-vapour {
    position: absolute;
    top: 50%;
    width: 24vw;
    height: 28vh;
    margin-top: -6vh;
    opacity: 0;
    filter: blur(26px);
    background: radial-gradient(ellipse, rgba(214,242,250,.34), rgba(196,230,240,.10) 44%, transparent 72%);
}

.obv-vapour-left { left: 17%; }
.obv-vapour-right { right: 17%; }

.obv-seal-flash {
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(84vmin, 920px);
    aspect-ratio: 1;
    border-radius: 50%;
    transform: translate(-50%,-50%);
    opacity: 0;
    border: 3px solid rgba(156,230,255,.85);
    box-shadow:
        0 0 26px rgba(88,215,255,.55),
        0 0 70px rgba(88,215,255,.20);
}

html.obv-pressure-release .obv-vapour {
    animation: obv-vapour 1.1s ease-out both;
}

html.obv-pressure-release .obv-seal-flash {
    animation: obv-seal-flash .68s ease-out both;
}

@keyframes obv-vapour {
    0% { opacity: 0; transform: scale(.55); }
    20% { opacity: .9; }
    100% { opacity: 0; transform: scale(1.7); }
}

@keyframes obv-seal-flash {
    0% { opacity: 0; transform: translate(-50%,-50%) scale(.985); }
    22% { opacity: .95; }
    100% { opacity: 0; transform: translate(-50%,-50%) scale(1.045); }
}

/* ---------------------------------------------------------
   Security camera / HUD
   --------------------------------------------------------- */
.obv-hud {
    position: absolute;
    inset: 18px;
    z-index: 40;
    pointer-events: none;
    border: 1px solid rgba(88,215,255,.07);
}

.obv-hud::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .25;
    background:
        repeating-linear-gradient(
            180deg,
            rgba(220,248,255,.025) 0,
            rgba(220,248,255,.025) 1px,
            transparent 1px,
            transparent 4px
        );
}

.obv-hud-top {
    position: absolute;
    left: 16px;
    right: 16px;
    top: 13px;
    display: flex;
    justify-content: space-between;
    color: rgba(206,236,248,.54);
    font-size: .58rem;
    font-weight: 800;
    letter-spacing: .15em;
}

.obv-hud-top span:last-child {
    color: rgba(255,116,106,.76);
}

.obv-hud-top i {
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 6px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 9px currentColor;
    animation: obv-rec 1.1s steps(1) infinite;
}

@keyframes obv-rec {
    0%, 48% { opacity: 1; }
    49%, 100% { opacity: .18; }
}

.obv-corners::before,
.obv-corners::after {
    content: "";
    position: absolute;
    width: 90px;
    height: 90px;
    border-color: rgba(88,215,255,.33);
    border-style: solid;
}

.obv-corners::before {
    left: 8px;
    top: 8px;
    border-width: 2px 0 0 2px;
}

.obv-corners::after {
    right: 8px;
    bottom: 8px;
    border-width: 0 2px 2px 0;
}

.obv-status {
    position: absolute;
    left: 50%;
    top: 9%;
    width: min(760px, calc(100vw - 48px));
    transform: translateX(-50%);
    display: grid;
    gap: 7px;
    padding: 13px 16px;
    border: 1px solid rgba(88,215,255,.10);
    border-radius: 10px;
    background: rgba(1,8,13,.60);
    backdrop-filter: blur(8px);
}

.obv-status-line {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 20px;
    opacity: .10;
    color: rgba(216,240,249,.30);
    font-size: clamp(.65rem,1vw,.80rem);
    font-weight: 800;
    letter-spacing: .11em;
    transform: translateX(-5px);
    transition: opacity .2s ease, transform .2s ease, color .2s ease;
}

.obv-status-line b {
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-radius: 50%;
    border: 1px solid rgba(88,215,255,.45);
}

html.obv-line-1 .obv-status-1,
html.obv-line-2 .obv-status-2,
html.obv-line-3 .obv-status-3,
html.obv-line-4 .obv-status-4 {
    opacity: 1;
    transform: none;
    color: #edfaff;
}

html.obv-line-1 .obv-status-1 b,
html.obv-line-2 .obv-status-2 b,
html.obv-line-3 .obv-status-3 b,
html.obv-line-4 .obv-status-4 b {
    background: var(--obv-cyan);
    border-color: var(--obv-cyan);
    box-shadow: 0 0 12px rgba(88,215,255,.70);
}

html.obv-line-2 .obv-status-2 {
    color: #ffd4a9;
}

/* ---------------------------------------------------------
   Timeline states: all rigid transforms
   --------------------------------------------------------- */
html.obv-mech-1 .obv-outer-ring {
    transform: rotate(34deg);
    filter: drop-shadow(0 0 12px rgba(88,215,255,.18));
}

html.obv-mech-1 .obv-inner-ring {
    transform: rotate(-47deg);
}

html.obv-mech-1 .obv-cam {
    transform: rotate(18deg);
}

html.obv-mech-2 .obv-outer-ring {
    transform: rotate(57deg);
}

html.obv-mech-2 .obv-inner-ring {
    transform: rotate(-79deg);
}

html.obv-mech-2 .obv-cam {
    transform: rotate(38deg);
}

html.obv-dogs .obv-dog rect,
html.obv-dogs .obv-dog circle {
    transform: translateX(60px);
}

html.obv-dogs .obv-dog-2 rect,
html.obv-dogs .obv-dog-2 circle { transition-delay: .06s; }
html.obv-dogs .obv-dog-3 rect,
html.obv-dogs .obv-dog-3 circle { transition-delay: .12s; }
html.obv-dogs .obv-dog-4 rect,
html.obv-dogs .obv-dog-4 circle { transition-delay: .18s; }
html.obv-dogs .obv-dog-5 rect,
html.obv-dogs .obv-dog-5 circle { transition-delay: .24s; }
html.obv-dogs .obv-dog-6 rect,
html.obv-dogs .obv-dog-6 circle { transition-delay: .30s; }

html.obv-bolts .obv-bolt rect {
    transform: translateX(105px);
}

html.obv-bolts .obv-bolt-2 rect { transition-delay: .07s; }
html.obv-bolts .obv-bolt-3 rect { transition-delay: .14s; }
html.obv-bolts .obv-bolt-4 rect { transition-delay: .21s; }
html.obv-bolts .obv-bolt-5 rect { transition-delay: .28s; }
html.obv-bolts .obv-bolt-6 rect { transition-delay: .35s; }

html.obv-pressure-release .obv-door {
    transform: translateZ(34px);
    filter: drop-shadow(0 30px 46px rgba(0,0,0,.64));
}

html.obv-door-opening .obv-workshop img {
    filter: brightness(.84) saturate(1.02) contrast(1.04);
    transform: scale(1.025);
}

html.obv-door-opening .obv-workshop-light {
    opacity: .65;
}

html.obv-door-opening .obv-door {
    transform:
        translateX(-3.5vw)
        translateZ(38px)
        rotateY(79deg)
        rotateZ(-1.5deg);
    filter: drop-shadow(34px 28px 46px rgba(0,0,0,.62));
}

html.obv-door-opening .obv-hud,
html.obv-door-opening .obv-skip,
html.obv-door-opening .obv-audio {
    opacity: 0;
    transition: opacity .45s ease;
}

html.obv-camera-push .obv-workshop img {
    transform: scale(1.065);
    filter: brightness(.98) saturate(1.05) contrast(1.03);
}

html.obv-camera-push .obv-workshop-light {
    opacity: .34;
}

html.obv-camera-push .obv-door {
    transform:
        translateX(-15vw)
        translateZ(10px)
        rotateY(86deg)
        rotateZ(-2deg);
}

/* ---------------------------------------------------------
   Controls
   --------------------------------------------------------- */
.obv-skip,
.obv-audio {
    position: absolute;
    z-index: 60;
    border: 1px solid rgba(88,215,255,.30);
    border-radius: 8px;
    background: rgba(2,9,15,.86);
    color: #dff7ff;
    font: 800 .66rem/1 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    letter-spacing: .13em;
    cursor: pointer;
    backdrop-filter: blur(10px);
}

.obv-skip {
    top: max(18px, env(safe-area-inset-top));
    right: max(20px, env(safe-area-inset-right));
    padding: .60rem .76rem;
}

.obv-audio {
    left: 50%;
    bottom: clamp(220px, 31vh, 330px);
    transform: translateX(-50%);
    min-width: min(86vw, 310px);
    padding: 1rem 1.35rem;
    border-width: 1px;
    border-color: rgba(255,141,59,.82);
    background:
        linear-gradient(180deg, rgba(18,24,30,.96), rgba(4,10,16,.94));
    color: #fff4e8;
    font-size: .82rem;
    letter-spacing: .16em;
    text-align: center;
    box-shadow:
        0 0 0 1px rgba(255,141,59,.12) inset,
        0 0 30px rgba(255,141,59,.20),
        0 12px 32px rgba(0,0,0,.42);
    animation: obv-audio-callout 1.9s ease-in-out infinite;
}

@keyframes obv-audio-callout {
    0%, 100% {
        box-shadow:
            0 0 0 1px rgba(255,141,59,.12) inset,
            0 0 26px rgba(255,141,59,.16),
            0 12px 32px rgba(0,0,0,.42);
    }
    50% {
        box-shadow:
            0 0 0 1px rgba(255,141,59,.20) inset,
            0 0 42px rgba(255,141,59,.30),
            0 12px 32px rgba(0,0,0,.42);
    }
}

.obv-audio[hidden] {
    display: none !important;
}

.obv-skip:hover,
.obv-skip:focus-visible,
.obv-audio:hover,
.obv-audio:focus-visible {
    outline: none;
    color: #fff;
    border-color: rgba(255,255,255,.70);
}


@media (max-width: 760px) {
    .obv-audio {
        bottom: clamp(150px, 24vh, 220px);
        min-width: min(88vw, 290px);
        padding: .96rem 1.1rem;
        font-size: .76rem;
    }
}

/* ---------------------------------------------------------
   Exit
   --------------------------------------------------------- */
html.obv-fading .obv-entry {
    opacity: 0;
    pointer-events: none;
    transition: opacity .56s ease;
}

@media (max-width: 760px) {
    .obv-door {
        width: min(90vmin, 700px);
    }

    .obv-hinge {
        display: none;
    }

    .obv-status {
        top: 11%;
        width: calc(100vw - 30px);
        padding: 11px 13px;
    }

    .obv-status-line {
        font-size: .61rem;
        letter-spacing: .075em;
    }

    html.obv-door-opening .obv-door {
        transform:
            translateX(-7vw)
            translateZ(20px)
            rotateY(77deg);
    }

    html.obv-camera-push .obv-door {
        transform:
            translateX(-24vw)
            translateZ(0)
            rotateY(86deg);
    }
}

@media (max-width: 480px) {
    .obv-hud {
        inset: 10px;
    }

    .obv-hud-top span:first-child {
        display: none;
    }

    .obv-status {
        top: 13%;
    }

    .obv-mark-main {
        font-size: 30px;
    }

    .obv-mark-sub {
        font-size: 15px;
        letter-spacing: 3px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .obv-door,
    .obv-outer-ring,
    .obv-inner-ring,
    .obv-cam,
    .obv-dog rect,
    .obv-dog circle,
    .obv-bolt rect,
    .obv-workshop img,
    .obv-workshop-light {
        transition: none !important;
        animation: none !important;
    }

    .obv-scanner,
    .obv-vapour,
    .obv-seal-flash,
    .obv-hud-top i {
        animation: none !important;
    }
}


.obv-entry .screen-reader-text {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}