/* Belfurt light object family (1.0.9): paper, natural materials, soft shadows */
.dko{position:relative;width:420px;height:340px;margin:0 auto}
.dko>*{position:absolute}
.dko .fl{left:16%;right:16%;bottom:22px;height:26px;border-radius:50%;background:radial-gradient(closest-side,rgba(20,20,30,.20),rgba(20,20,30,0));filter:blur(6px)}
.lo{--ink:#1d1d1f;--mu:#86868b;--e:cubic-bezier(.45,0,.2,1);color:var(--ink);text-align:left}
.lo small{font-size:10px;letter-spacing:.02em;color:var(--mu)}
.lo .pl{display:block;height:4px;border-radius:2px;background:#e6e6ea;margin-top:8px}.lo .pl.s{width:58%}
.lo .paper,.an-doc .sheet,.an-let .letter,.an-bp .body,.an-cal .cal,.an-pass .pg.r,.an-bank .shield,.lo-desk .dcal{background:linear-gradient(180deg,#fff,#fafaf8);box-shadow:inset 0 0 0 1px rgba(0,0,0,.05),0 1px 2px rgba(20,20,30,.08),0 22px 40px -20px rgba(20,20,30,.28)}
/* 1 documents: manila folder */
.an-doc .back{left:62px;top:96px;width:296px;height:200px;border-radius:6px 16px 16px 16px;background:linear-gradient(180deg,#e2bf80,#d4ac68)}
.an-doc .tab{left:62px;top:78px;width:110px;height:26px;border-radius:10px 10px 0 0;background:#e2bf80}
.an-doc .sheet{left:92px;top:96px;width:236px;height:170px;border-radius:6px;padding:16px 18px;animation:anDocSheet 4s var(--e) infinite}
.an-doc .sheet b{font-size:12px;font-weight:600;letter-spacing:-.01em}
.an-doc .front{left:56px;top:170px;width:308px;height:132px;border-radius:12px 12px 16px 16px;padding:18px 22px;display:flex;flex-direction:column;justify-content:space-between;background:linear-gradient(180deg,#f1d6a2,#e6c285);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 1px 2px rgba(80,50,10,.12),0 22px 40px -20px rgba(80,50,10,.35)}
.an-doc .lab{font-size:15px;font-weight:600;letter-spacing:-.02em;color:#5b4320}
.an-doc .tags{display:flex;gap:8px}.an-doc .tags i{font-style:normal;font-size:10px;padding:4px 9px;border-radius:999px;background:rgba(255,255,255,.55);color:#5b4320}
.an-doc .stamp{left:296px;top:140px;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;color:#fff;background:#1f9d55;box-shadow:0 0 0 4px #fff,0 8px 18px rgba(20,90,50,.35);animation:anStamp 4s var(--e) infinite}
.an-doc .stamp svg{width:28px;height:28px}
@keyframes anDocSheet{0%,8%{transform:translateY(-78px);opacity:0}30%,100%{transform:none;opacity:1}}
@keyframes anStamp{0%,38%{transform:scale(1.5) rotate(-14deg);opacity:0}50%{transform:scale(.94);opacity:1}56%,92%{transform:scale(1);opacity:1}100%{transform:scale(1);opacity:0}}
/* 2 university: cream envelope, white letter, red wax seal */
.an-let .flap{left:60px;top:98px;width:300px;height:84px;background:linear-gradient(0deg,#e9dcc0,#f2e8d3);clip-path:polygon(0 100%,50% 0,100% 100%)}
.an-let .back{left:60px;top:180px;width:300px;height:122px;border-radius:0 0 14px 14px;background:#e6d8bb}
.an-let .letter{left:86px;top:86px;width:248px;height:184px;border-radius:6px;padding:16px 20px;animation:anRise 4s var(--e) infinite}
.an-let .letter small{display:block;text-transform:uppercase;letter-spacing:.12em;font-size:8.5px}
.an-let .letter b{display:block;font-family:Georgia,"Times New Roman",serif;font-size:19px;font-weight:400;margin-top:6px}
.an-let .sig{display:block;width:70px;height:14px;margin-top:10px;border-bottom:1.5px solid #3a5bd9;border-radius:0 0 40% 60%}
.an-let .pocket{left:56px;top:196px;width:308px;height:110px;border-radius:4px 4px 16px 16px;background:linear-gradient(180deg,#f4ead6,#ecdfc4);clip-path:polygon(0 0,50% 44%,100% 0,100% 100%,0 100%);box-shadow:0 22px 40px -20px rgba(80,60,20,.3)}
.an-let .seal{left:50%;top:30px;margin-left:-22px;width:44px;height:44px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#e0475b,#b3122b 55%,#7d0a1c);box-shadow:inset 0 0 0 4px rgba(0,0,0,.1),0 3px 6px rgba(120,0,20,.35)}
@keyframes anRise{0%,10%{transform:translateY(96px)}45%,85%{transform:none}100%{transform:translateY(96px)}}
/* 3 financial: light card + funds bar + insurance shield */
.an-bank .bc{left:40px;top:86px;width:296px;height:186px;border-radius:18px;padding:18px 22px;display:flex;flex-direction:column;transform:rotate(-4deg);background:linear-gradient(135deg,#f7f9fc 0%,#e3e9f1 55%,#cfd8e4 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.7),inset 0 -1px 0 rgba(0,0,0,.06),0 1px 2px rgba(20,30,50,.1),0 24px 44px -20px rgba(20,30,60,.35)}
.an-bank .lab{font-size:14px;font-weight:600;letter-spacing:-.02em}
.an-bank .chip{position:relative;width:38px;height:28px;border-radius:6px;margin-top:12px;background:linear-gradient(135deg,#f0e2b6,#c9a95c 55%,#a88a42);box-shadow:inset 0 0 0 1px rgba(0,0,0,.18)}
.an-bank .nfc{position:absolute;right:22px;top:56px;width:20px;height:20px;color:#8a94a6}
.an-bank .cap{margin-top:auto}
.an-bank .bar{height:7px;border-radius:4px;background:rgba(20,30,50,.10);margin-top:6px;overflow:hidden}
.an-bank .bar i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,#34c759,#1f9d55);transform-origin:left;animation:anFill 4s var(--e) infinite}
.an-bank .amt{display:flex;justify-content:space-between;align-items:baseline;margin-top:6px}.an-bank .amt b{font-size:18px;font-weight:600;letter-spacing:-.03em}
.an-bank .shield{left:276px;top:60px;width:86px;height:96px;border-radius:20px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:#1f9d55;transform:rotate(5deg)}
.an-bank .shield svg{width:34px;height:34px}
@keyframes anFill{0%,8%{transform:scaleX(.04)}60%,90%{transform:scaleX(1)}100%{transform:scaleX(.04)}}
/* 4 housing: silver keycard taps a door lock, LED turns green */
.an-key .door{left:226px;top:30px;width:150px;height:276px;border-radius:10px;background:linear-gradient(90deg,#ece7df,#f6f2ec 40%,#e7e1d8);box-shadow:inset 0 0 0 1px rgba(0,0,0,.05),0 22px 40px -22px rgba(40,30,20,.3)}
.an-key .lock{position:absolute;left:34px;top:40px;width:64px;height:132px;border-radius:12px;background:linear-gradient(135deg,#fbfbfc,#d7dbe1 60%,#c3c8d0);box-shadow:inset 0 0 0 1px rgba(255,255,255,.8),0 4px 10px rgba(20,30,50,.18);display:flex;flex-direction:column;align-items:center;padding-top:14px;gap:14px}
.an-key .led{width:10px;height:10px;border-radius:50%;background:#34c759;box-shadow:0 0 10px rgba(52,199,89,.8);animation:anLed 4s var(--e) infinite}
.an-key .pad{width:40px;height:52px;border-radius:8px;background:#eef0f3;box-shadow:inset 0 1px 3px rgba(0,0,0,.18);display:grid;place-items:center;color:#9aa1ad}
.an-key .pad .nfc{width:18px;height:18px}
.an-key .handle{left:30px;top:192px;width:72px;height:14px;border-radius:7px;background:linear-gradient(180deg,#f3f4f6,#b9bec7);box-shadow:0 3px 6px rgba(20,30,50,.2)}
.an-key .kc{left:56px;top:96px;width:150px;height:208px;border-radius:18px;padding:30px 16px 16px;display:flex;flex-direction:column;transform:rotate(-8deg);z-index:2;background:linear-gradient(135deg,#ffffff 0%,#e4e7ec 50%,#c9ced6 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.9),0 1px 2px rgba(20,30,50,.12),0 24px 40px -18px rgba(20,30,60,.38);animation:anTap 4s var(--e) infinite}
.an-key .kc .hole{position:absolute;left:50%;top:12px;margin-left:-15px;width:30px;height:9px;border-radius:5px;background:#f5f5f7;box-shadow:inset 0 2px 3px rgba(0,0,0,.25)}
.an-key .kc .nfc{width:22px;height:22px;margin-top:12px;color:#8a94a6}
.an-key .kc b{font-size:17px;font-weight:600;letter-spacing:-.03em;line-height:1.1;margin-top:auto}
@keyframes anTap{0%,10%{transform:translate(0,0) rotate(-8deg)}38%,62%{transform:translate(70px,-4px) rotate(-2deg)}86%,100%{transform:translate(0,0) rotate(-8deg)}}
@keyframes anLed{0%,38%{background:#c7cbd2;box-shadow:none}44%,80%{background:#34c759;box-shadow:0 0 10px rgba(52,199,89,.8)}90%,100%{background:#c7cbd2;box-shadow:none}}
/* 5 visa: teal passport opens on a visa page that gets stamped */
.an-pass .pp{left:42px;top:64px;width:336px;height:216px;transform:rotate(-3deg)}
.an-pass .pg{position:absolute;top:0;width:168px;height:216px;padding:20px 18px}
.an-pass .pg.l{left:0;border-radius:12px 3px 3px 12px;background:linear-gradient(135deg,#2f6f73,#1f5357);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 22px 40px -20px rgba(10,40,40,.45);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}
.an-pass .pg.l small{color:#e6d8a8;text-transform:uppercase;letter-spacing:.2em;font-size:9px}
.an-pass .crest{position:static;width:54px;height:54px;border-radius:50%;box-shadow:inset 0 0 0 1.5px #e6d8a8,inset 0 0 0 9px rgba(0,0,0,0),inset 0 0 0 10px rgba(230,216,168,.6)}
.an-pass .pg.r{left:168px;border-radius:3px 12px 12px 3px;background:repeating-linear-gradient(135deg,#f3f8f4 0 6px,#ecf4ee 6px 12px)!important}
.an-pass .pg.r small{text-transform:uppercase;letter-spacing:.12em;font-size:8.5px}
.an-pass .pho{display:block;width:42px;height:50px;border-radius:5px;margin-top:10px;background:#dfe6e1}
.an-pass .vst{left:220px;top:104px;width:92px;height:92px;border-radius:50%;box-shadow:inset 0 0 0 2px rgba(42,82,190,.85),inset 0 0 0 7px rgba(0,0,0,0),inset 0 0 0 8px rgba(42,82,190,.55);display:flex;flex-direction:column;align-items:center;justify-content:center;color:#2a52be;transform:rotate(-12deg);animation:anVisa 4s var(--e) infinite}
.an-pass .vst b{font-size:18px;font-weight:700;letter-spacing:.14em}.an-pass .vst small{color:#2a52be;font-size:8px;letter-spacing:.1em;text-transform:uppercase}
@keyframes anVisa{0%,25%{transform:scale(1.6) rotate(-24deg);opacity:0}40%{transform:scale(.95) rotate(-12deg);opacity:1}46%,90%{transform:scale(1) rotate(-12deg);opacity:1}100%{opacity:0;transform:scale(1) rotate(-12deg)}}
/* 6 arrival: white boarding pass, plane CMB -> DE */
.an-bp .body{left:26px;top:86px;width:368px;height:172px;border-radius:16px;display:grid;grid-template-columns:1fr 100px;transform:rotate(-4deg);
 -webkit-mask:radial-gradient(circle 11px at calc(100% - 100px) 0,#0000 97%,#000) top/100% 51% no-repeat,radial-gradient(circle 11px at calc(100% - 100px) 100%,#0000 97%,#000) bottom/100% 51% no-repeat;mask:radial-gradient(circle 11px at calc(100% - 100px) 0,#0000 97%,#000) top/100% 51% no-repeat,radial-gradient(circle 11px at calc(100% - 100px) 100%,#0000 97%,#000) bottom/100% 51% no-repeat}
.an-bp .m{padding:18px 22px;display:flex;flex-direction:column}
.an-bp .top{text-transform:uppercase;letter-spacing:.14em;font-size:9px;color:#2a52be!important;font-weight:600}
.an-bp .route{display:flex;align-items:center;gap:12px;margin:auto 0 10px}
.an-bp .route b{font-size:32px;font-weight:600;letter-spacing:-.04em}
.an-bp .trk{position:relative;flex:1;height:20px;background:linear-gradient(90deg,#c7c7cc 50%,transparent 0) center/8px 1.5px repeat-x}
.an-bp .pln{position:absolute;left:calc(100% - 20px);top:0;width:20px;height:20px;color:#2a52be;transform:rotate(90deg);animation:anFly 4s var(--e) infinite}
.an-bp .pln svg{width:20px;height:20px}
.an-bp .st{border-left:1.5px dashed #d8d8dc;padding:18px 14px;display:flex;flex-direction:column;gap:2px}
.an-bp .st b{font-size:14px;font-weight:600}
.an-bp .bars{display:flex;gap:2px;height:28px;margin-top:auto}.an-bp .bars i{background:var(--ink);width:2px}.an-bp .bars i:nth-child(3n){width:3px}.an-bp .bars i:nth-child(4n){opacity:.35}
@keyframes anFly{0%,6%{left:0;opacity:0}16%{opacity:1}70%,90%{left:calc(100% - 20px);opacity:1}100%{left:calc(100% - 20px);opacity:0}}
/* 7 embassy: white desk calendar, date circled */
.an-cal .cal{left:64px;top:58px;width:292px;height:240px;border-radius:16px;padding:0 0 16px;display:flex;flex-direction:column;overflow:hidden;transform:rotate(-3deg)}
.an-cal .hd,.lo-desk .hd{background:linear-gradient(180deg,#e5484d,#d13a40);color:#fff;font-size:12px;font-weight:600;letter-spacing:.02em;padding:16px 20px 12px}
.an-cal .rings{left:0;right:0;top:-6px;display:flex;justify-content:center;gap:70px;z-index:3}
.an-cal .rings i,.lo-desk .rings i{width:8px;height:20px;border-radius:5px;background:linear-gradient(180deg,#f3f4f6,#9aa1ad);box-shadow:0 2px 3px rgba(0,0,0,.25)}
.an-cal .grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px 2px;padding:12px 16px 0}
.an-cal .grid i{font-style:normal;font-size:10.5px;color:#6e6e73;text-align:center;line-height:22px;width:22px;height:22px;justify-self:center;border-radius:50%}
.an-cal .grid i.on{color:#d13a40;font-weight:700;box-shadow:0 0 0 2px #d13a40;animation:anDay 4s var(--e) infinite}
.an-cal .cft{margin-top:auto;padding:0 18px;display:flex;justify-content:space-between;align-items:center;gap:8px}
.an-cal .cft small{white-space:nowrap}
.an-cal .bkd{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;background:#e8f7ee;color:#1f7a45;font-size:11px;font-weight:600;animation:anOk 4s var(--e) infinite}
.an-cal .bkd:before{content:"";width:6px;height:6px;border-radius:50%;background:#34c759}
@keyframes anDay{0%,20%{box-shadow:0 0 0 2px rgba(209,58,64,0);color:#6e6e73}38%,90%{box-shadow:0 0 0 2px #d13a40;color:#d13a40}100%{box-shadow:0 0 0 2px rgba(209,58,64,0);color:#6e6e73}}
@keyframes anOk{0%,40%{opacity:0;transform:translateY(4px)}52%,90%{opacity:1;transform:none}100%{opacity:0}}
/* shop: desk calendar (embassy) */
.lo-desk .easel{left:118px;top:96px;width:184px;height:210px;border-radius:10px;background:linear-gradient(180deg,#d9d6d0,#c7c3bc);transform:perspective(600px) rotateX(-14deg) translateY(10px);transform-origin:bottom}
.lo-desk .dcal{left:112px;top:62px;width:196px;height:234px;border-radius:12px;overflow:hidden;display:flex;flex-direction:column;align-items:center;text-align:center}
.lo-desk .hd{align-self:stretch;padding:18px 0 12px}
.lo-desk .rings{position:absolute;left:0;right:0;top:-6px;display:flex;justify-content:center;gap:34px;z-index:3}
.lo-desk .dn{font-size:84px;font-weight:600;letter-spacing:-.06em;line-height:1;margin-top:18px;position:relative;z-index:1}
.lo-desk .ring-pen{position:absolute;left:50%;top:76px;margin-left:-62px;width:124px;height:96px;border-radius:50%;border:3px solid #d13a40;transform:rotate(-8deg);border-left-color:rgba(209,58,64,.55);pointer-events:none}
.lo-desk .dw{margin-top:10px;font-size:12px!important;color:var(--ink)!important;font-weight:500}
.lo-desk .dl{margin-top:auto;margin-bottom:14px}
.lo-desk .fl{bottom:30px}
/* shop: studio microphone on a stand (visa interview) */
.lo-mic .base{left:140px;top:282px;width:140px;height:22px;border-radius:50%;background:radial-gradient(ellipse at 50% 30%,#f4f5f7,#b9bec7 70%);box-shadow:0 6px 10px rgba(20,30,50,.18)}
.lo-mic .pole{left:205px;top:176px;width:10px;height:112px;border-radius:5px;background:linear-gradient(90deg,#c3c8d0,#f7f8fa 45%,#a9afb9)}
.lo-mic .yoke{left:158px;top:120px;width:104px;height:70px;border:7px solid #c9ced6;border-top:0;border-radius:0 0 52px 52px;box-shadow:0 4px 8px rgba(20,30,50,.12)}
.lo-mic .head{left:166px;top:28px;width:88px;height:142px;border-radius:44px;overflow:hidden;background:linear-gradient(90deg,#c9ced6,#fbfbfc 42%,#b4bac4);box-shadow:inset 0 0 0 1px rgba(255,255,255,.7),0 1px 2px rgba(20,30,50,.15),0 24px 40px -18px rgba(20,30,60,.4)}
.lo-mic .mesh{left:0;right:0;top:0;height:84px;background:radial-gradient(circle,rgba(60,70,90,.35) 1.1px,transparent 1.4px) 0 0/6px 6px;-webkit-mask:linear-gradient(90deg,rgba(0,0,0,.6),#000 40%,rgba(0,0,0,.6));mask:linear-gradient(90deg,rgba(0,0,0,.6),#000 40%,rgba(0,0,0,.6))}
.lo-mic .band{left:0;right:0;top:84px;height:12px;background:linear-gradient(90deg,#9aa1ad,#e9ebef 45%,#8e95a1)}
.lo-mic .lvl{left:286px;top:70px;display:flex;flex-direction:column-reverse;gap:4px}
.lo-mic .lvl i{width:22px;height:6px;border-radius:3px;background:#34c759}
.lo-mic .lvl i:nth-child(n+4){background:#e4e4e8}
.lo-mic .fl{bottom:26px}
/* sizing */
.pd .dko{width:420px;height:400px;zoom:.8;top:30px}
@media (max-width:720px){.fxo .dko{zoom:.8}.pd .dko{zoom:.74}}
@media (max-width:380px){.fxo .dko{zoom:.72}}
.an:not(.inview) *{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){.an *{animation:none!important}}
.an-pass .vst,.an-let .seal{position:absolute}
.an-let .letter{height:150px}
@keyframes anRise{0%,10%{transform:translateY(60px)}45%,85%{transform:none}100%{transform:translateY(60px)}}
