/* Eli's World — 3D interactive layer (see w_3d.js) */
.eli-3d{will-change:transform}
/* 3D coin: coin art on both faces, a ring of gold strips for the rim */
.c3{position:absolute;width:var(--cs);height:var(--cs);margin:calc(var(--cs) / -2) 0 0 calc(var(--cs) / -2);z-index:5;cursor:pointer;-webkit-tap-highlight-color:transparent}
.c3-b{position:absolute;inset:0;perspective:420px;animation:c3Bob 2.6s ease-in-out infinite;animation-delay:var(--bd,0s)}
.c3-spin{position:absolute;inset:0;transform-style:preserve-3d;animation:c3Spin var(--sp,3.4s) linear infinite}
.c3 .face{position:absolute;inset:4%;border-radius:50%;background:url(assets/c3_face.png) center/contain no-repeat;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.c3 .face.f{transform:translateZ(var(--ct))}
.c3 .face.b{transform:rotateY(180deg) translateZ(var(--ct))}
.c3 .rim{position:absolute;left:50%;top:50%;background:linear-gradient(90deg,#D98A0C,#FFC93C 50%,#D98A0C)}
.c3-sh{position:absolute;left:15%;width:70%;top:104%;height:16%;border-radius:50%;background:radial-gradient(closest-side,rgba(10,20,60,.32),transparent);animation:c3Sh 2.6s ease-in-out infinite;animation-delay:var(--bd,0s)}
/* mostly facing the viewer (a gentle sway) with one quick full turn — readable, still clearly 3D */
@keyframes c3Spin{0%{transform:rotateY(-28deg)}30%{transform:rotateY(28deg)}60%{transform:rotateY(-28deg)}78%,100%{transform:rotateY(332deg)}}
@keyframes c3Bob{50%{transform:translateY(-9px)}}
@keyframes c3Sh{50%{transform:scale(.7);opacity:.55}}
/* collected: the coin jumps up big, spins fast in a golden glow, then hands over to the coins flying to the counter */
.c3.got{pointer-events:none;z-index:9;animation:c3Got .75s cubic-bezier(.2,.9,.3,1) forwards}
.c3.got .c3-spin{animation:c3Fast .75s cubic-bezier(.2,.8,.3,1) forwards}
.c3.got .c3-b{animation:none}
.c3.got::before{content:"";position:absolute;inset:-60%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,236,150,.95),rgba(255,200,60,.45) 45%,rgba(255,200,60,0) 70%);animation:c3Glow .75s ease-out forwards}
@keyframes c3Got{0%{transform:none}45%{transform:translateY(-42px) scale(1.7)}75%{transform:translateY(-50px) scale(1.6);opacity:1}100%{transform:translateY(-56px) scale(.3);opacity:0}}
@keyframes c3Fast{to{transform:rotateY(1080deg)}}
@keyframes c3Glow{0%{transform:scale(.3);opacity:0}35%{transform:scale(1);opacity:1}100%{transform:scale(1.4);opacity:0}}
.c3.pop{animation:c3Pop .45s cubic-bezier(.34,1.56,.64,1) both}
@keyframes c3Pop{from{transform:scale(0);opacity:0}}
/* the brand mark as a solid block */
.m3{position:absolute;z-index:8;cursor:pointer;perspective:520px;-webkit-tap-highlight-color:transparent}
.m3-r{position:absolute;inset:0;transform-style:preserve-3d}
.m3-r i{position:absolute;inset:0;background:var(--c);-webkit-mask:url(assets/logo_mark.png) center/contain no-repeat;mask:url(assets/logo_mark.png) center/contain no-repeat}
.m3-r i.top{background:linear-gradient(155deg,#5068D8 0%,#2A3B9C 48%,#22317F 100%)}
/* welcome: the solid mark takes over from the flat intro logo, the words get depth */
.w-wel .m3{opacity:0;transition:opacity .25s}
.w-wel.ready .m3{opacity:1}
.w-wel.ready .wl-logo{opacity:0;transition:opacity .25s}
.w-wel.ready .wl-title{transform:perspective(700px) rotateY(calc(var(--px) * 16deg)) rotateX(calc(var(--py) * -10deg)) translate(calc(var(--px) * 6px),calc(var(--py) * 4px));transition:none}
.w-wel.ready .wl-title .t2{filter:drop-shadow(calc(var(--px) * -2px) 1px 0 #1A2566) drop-shadow(calc(var(--px) * -2px) 1px 0 #1A2566) drop-shadow(calc(var(--px) * -2px) 1px 0 #1A2566) drop-shadow(calc(var(--px) * -2px) 1px 0 #1A2566) drop-shadow(0 8px 10px rgba(26,37,102,.22))}
.w-wel.ready .wl-title .t1{filter:drop-shadow(calc(var(--px) * -1px) 1px 0 #B9AE9E) drop-shadow(calc(var(--px) * -1px) 1px 0 #B9AE9E)}
.w-wel .c3{z-index:3}
.w-wel .c3.front{z-index:5}
/* home: the park tilts with the phone; coins wait on the lawn */
.w-world .wbg{transform-origin:50% 60%;will-change:transform}
.w-world .c3{z-index:3}
.w-world .c3.front{z-index:5}
.w-wel.leave .m3,.w-wel.leave .c3{animation:wlFade .4s forwards}