@keyframes archive-in{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes card-in{from{opacity:0;transform:translateY(50px) scale(.94)}to{opacity:1;transform:none}}
@keyframes lab-light{0%,100%{transform:translate3d(-12%,-8%,0) scale(1)}50%{transform:translate3d(12%,6%,0) scale(1.16)}}
@keyframes grain-jump{0%,100%{transform:translate(0)}25%{transform:translate(-1%,1%)}50%{transform:translate(1%,-1%)}75%{transform:translate(1%,1%)}}
@keyframes strip-breathe{50%{box-shadow:0 26px 70px #000,0 0 35px rgba(216,255,62,.08)}}
body:before{content:"";position:fixed;z-index:-1;inset:-30%;pointer-events:none;background:radial-gradient(circle at 50% 50%,rgba(216,255,62,.09),transparent 28%);animation:lab-light 14s ease-in-out infinite}
body:after{content:"";position:fixed;z-index:90;inset:-50%;pointer-events:none;opacity:.07;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");animation:grain-jump .22s steps(2) infinite}
.top,.intro>*{animation:archive-in .8s cubic-bezier(.2,.8,.2,1) both}.intro>*:nth-child(2){animation-delay:.1s}.intro>*:nth-child(3){animation-delay:.2s}
.roll-card{--rx:-2deg;--ry:4deg;--shine:30%;opacity:0;animation:card-in .75s cubic-bezier(.16,.8,.24,1) forwards}.roll-card:nth-child(2){animation-delay:.1s}.roll-card:nth-child(3){animation-delay:.2s}.roll-card:nth-child(4){animation-delay:.3s}.roll-card:nth-child(5){animation-delay:.4s}.roll-card:nth-child(6){animation-delay:.5s}
.roll-card .film-cartridge{transform:rotateX(var(--rx)) rotateY(var(--ry));transition:transform .18s ease,filter .3s ease;transform-style:preserve-3d;will-change:transform}.roll-card:hover .film-cartridge,.roll-card:focus-visible .film-cartridge{transform:rotateX(var(--rx)) rotateY(var(--ry)) translateY(-8px) scale(1.018);filter:drop-shadow(0 36px 35px rgba(0,0,0,.82))}
.dynamic-label:before{content:"";position:absolute;z-index:3;inset:-20%;pointer-events:none;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.5) 50%,transparent 65%);transform:translateX(calc(var(--shine) - 100%));opacity:.45;transition:transform .18s ease}
.roll-data{transition:border-color .25s ease,transform .25s ease}.roll-card:hover .roll-data,.roll-card:focus-visible .roll-data{border-color:var(--acid);transform:translateY(4px)}
.film-strip{animation:strip-breathe 4s ease-in-out infinite}.frame{transition:transform .25s ease,border-color .25s ease,filter .25s ease}.frame:hover,.frame:focus-visible{z-index:2;transform:translateY(-8px) scale(1.015);border-color:var(--acid);filter:brightness(1.08)}
.photo-layer:not([hidden]) img{animation:archive-in .38s cubic-bezier(.2,.8,.2,1) both}.password-layer:not([hidden]) form{animation:card-in .32s cubic-bezier(.2,.8,.2,1) both}
@media(max-width:600px){body:after{opacity:.045}.roll-card .film-cartridge{will-change:auto}.frame:hover{transform:none}}
@media(prefers-reduced-motion:reduce){body:before,body:after,.top,.intro>*,.roll-card,.film-strip,.photo-layer:not([hidden]) img,.password-layer:not([hidden]) form{animation:none!important}.roll-card{opacity:1}.roll-card .film-cartridge,.roll-data,.frame{transition:none!important;transform:none!important}}