@layer page-safety;
@layer page-safety {
:root{--vault-intro-tone-1:#111;--vault-intro-tone-2:#444;--vault-intro-tone-3:#222;--vault-intro-tone-4:#666;--vault-intro-tone-5:rgba(0,0,0,1);--vault-intro-tone-6:#050505;--vault-intro-tone-7:#999;--vault-intro-tone-8:#aaa;--vault-intro-tone-9:rgba(255,255,255,0.2);--vault-intro-tone-10:rgba(0,0,0,0.9);--vault-intro-tone-11:#ddd;--vault-intro-tone-12:rgba(255,255,255,0.4);--vault-intro-tone-13:rgba(0,0,0,0.1);--vault-intro-tone-14:rgba(0,0,0,0.3);--vault-intro-tone-15:#2a2624;--vault-intro-tone-16:#333;--vault-intro-tone-17:rgba(255,255,255,0.3);}
        #vault-intro {
            position: absolute!important;
            inset: 48px 56px!important;
            z-index: 1000!important;
            display: block!important;
            container-type: size!important;
            overflow: hidden!important;
        }

        #vault-intro .intro-bar {
            position: absolute!important;
            height: 10%!important;
            width: 150%!important;
            left: -25%!important;
            background: linear-gradient(to bottom, var(--vault-intro-tone-6) 0%, var(--vault-intro-tone-3) 15%, var(--vault-intro-tone-7) 45%, var(--vault-intro-tone-8) 50%, var(--vault-intro-tone-7) 55%, var(--vault-intro-tone-3) 85%, var(--vault-intro-tone-6) 100%)!important;
            border-top: 1px solid var(--vault-intro-tone-9)!important;
            border-bottom: 2px solid var(--vault-intro-tone-10)!important;
            box-shadow: 0 20px 50px var(--vault-intro-tone-10)!important;
            transition: transform 1.8s cubic-bezier(0.8, 0, 0.2, 1)!important;
            display: flex!important;
            align-items: center!important;
            justify-content: space-around!important;
            padding: 0 10%!important;
            z-index: 1010!important;
        }

        /* Rivets on the bars */
        #vault-intro .bar-rivet {
            width: 20px!important;
            height: 20px!important;
            border-radius: 50%!important;
            background: radial-gradient(circle at 35% 35%, var(--vault-intro-tone-11), var(--vault-intro-tone-2) 70%, var(--vault-intro-tone-1))!important;
            box-shadow: 2px 3px 6px var(--vault-intro-tone-5), inset 1px 1px 0 var(--vault-intro-tone-12)!important;
            position: relative!important;
        }
        #vault-intro .bar-rivet::after {
            content: ''!important;
            position: absolute!important;
            inset: 6px!important;
            border-radius: 50%!important;
            background: var(--vault-intro-tone-13)!important;
            box-shadow: inset 1px 1px 2px var(--vault-intro-tone-14)!important;
        }

        #vault-intro .intro-wheel-container {
            position: absolute!important;
            z-index: 1200!important;
            width: min(440px, 52cqw, 52svh)!important;
            top: min(140px, 15cqw)!important;
            left: 50%!important;
            margin-left: max(-220px, -26cqw, -26svh)!important;
            height: auto; aspect-ratio: 1!important;
            transition: transform 1.2s cubic-bezier(0.7, 0, 0.3, 1), opacity 0.8s ease-out!important;
            perspective: 1000px!important;
        }

        #vault-intro .intro-wheel-bg {
            position: absolute!important;
            inset: -13.333%!important;
            background: radial-gradient(circle at 30% 30%, var(--vault-intro-tone-2), var(--vault-intro-tone-1) 80%)!important;
            border: min(30px, 4cqw) solid var(--vault-intro-tone-15)!important;
            border-image: linear-gradient(to bottom, var(--vault-intro-tone-4), var(--vault-intro-tone-1), var(--vault-intro-tone-4)) 1!important;
            border-radius: 50%!important;
            box-shadow: 0 0 200px var(--vault-intro-tone-5), inset 0 40px 120px var(--vault-intro-tone-5)!important;
            display: flex!important;
            align-items: center!important;
            justify-content: center!important;
        }

        /* Large Bolts around the central ring */
        #vault-intro .wheel-bolt {
            position: absolute!important;
            width: 32px!important;
            height: 32px!important;
            background: linear-gradient(135deg, var(--vault-intro-tone-7), var(--vault-intro-tone-16))!important;
            border-radius: 6px!important;
            box-shadow: 4px 4px 10px var(--vault-intro-tone-5), inset 2px 2px 2px var(--vault-intro-tone-17)!important;
            z-index: 10!important;
        }

        #vault-intro .intro-wheel {
            width: 100%!important;
            height: 100%!important;
            filter: brightness(1.4) contrast(1.6) drop-shadow(0 0 80px var(--vault-intro-tone-9))!important;
            animation: intro-wheel-unlock 3s cubic-bezier(0.8, 0, 0.2, 1) forwards!important;
            position: relative!important;
            z-index: 20!important;
        }

        @keyframes intro-wheel-unlock {
            0% { transform: rotate(0deg) scale(0.75); }
            40% { transform: rotate(720deg) scale(1); }
            70% { transform: rotate(1080deg) scale(1.1); }
            100% { transform: rotate(1440deg) scale(1.2); }
        }

        #vault-intro.bars-drawn .intro-bar:nth-child(even) { transform: translateX(125%)!important; }
        #vault-intro.bars-drawn .intro-bar:nth-child(odd) { transform: translateX(-125%)!important; }
        #vault-intro.bars-drawn .intro-wheel-container { transform: scale(2.5) translateZ(300px)!important; opacity: 0!important; }


#vault-intro[hidden]{display:none!important}
#vault-intro{cursor:pointer!important;touch-action:manipulation!important;isolation:isolate!important;outline:none!important}
#vault-intro *{pointer-events:none!important;box-sizing:border-box!important}
@media(max-width:1050px){#vault-intro{inset:48px 50px!important}}
@media(max-width:650px){#vault-intro{inset:48px 26px!important}#vault-intro .bar-rivet{width:12px!important;height:12px!important}#vault-intro .wheel-bolt{width:20px!important;height:20px!important}}
@media(prefers-reduced-motion:reduce){#vault-intro{display:none!important}#vault-intro *{animation:none!important;transition:none!important}}

}