/* ========================================================================
   Vault Transition (Core <-> Premium Boundary)
   JS owns the timing. CSS owns only the geometry and visual surface.
   ======================================================================== */

.tf-vault-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: block;
    width: auto;
    height: 100dvh;
    overflow: hidden;
    background: transparent;
    pointer-events: none;
    visibility: hidden;
    contain: strict;
    isolation: isolate;
}

.tf-vault-panel {
    position: absolute;
    top: 0;
    bottom: 0;
    width: calc(50% + 1px);
    background:
        radial-gradient(circle at 50% 50%, rgba(185, 130, 43, 0.1), transparent 32%),
        #1b1c15;
    will-change: transform;
    backface-visibility: hidden;
}

.tf-vault-backdrop {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: #1b1c15;
    opacity: 0;
    pointer-events: none;
    will-change: opacity;
}

.tf-vault-panel--left {
    left: 0;
    z-index: 1;
    transform: translate3d(-100%, 0, 0);
}

.tf-vault-panel--right {
    right: 0;
    z-index: 1;
    transform: translate3d(100%, 0, 0);
}

.tf-vault-panel--left::after,
.tf-vault-panel--right::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: linear-gradient(
        180deg,
        transparent,
        rgba(185, 130, 43, 0.58) 24%,
        rgba(185, 130, 43, 0.78) 50%,
        rgba(185, 130, 43, 0.58) 76%,
        transparent
    );
}

.tf-vault-panel--left::after {
    right: 0;
}

.tf-vault-panel--right::after {
    left: 0;
}

.tf-vault-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 100000;
    width: clamp(112px, 10vw, 140px);
    height: auto;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.94);
    transform-origin: center center;
    will-change: opacity, transform;
    filter: brightness(0) invert(1);
    pointer-events: none;
    user-select: none;
}

.tf-vault-overlay.is-handoff .tf-vault-backdrop,
.tf-vault-preload .tf-vault-backdrop {
    opacity: 1;
}

.tf-vault-overlay.is-opening .tf-vault-backdrop {
    opacity: 0;
    transition: opacity 620ms cubic-bezier(0.76, 0, 0.24, 1);
}

.tf-vault-preload .tf-vault-overlay {
    visibility: visible;
    pointer-events: auto;
    background: #1b1c15;
}

.tf-vault-preload body {
    background: #1b1c15 !important;
}

.tf-vault-preload .tf-vault-panel--left,
.tf-vault-preload .tf-vault-panel--right {
    transform: translate3d(0, 0, 0);
}

.tf-vault-preload .tf-vault-logo {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}