/* ============================================================ Themed arrival — plays ONLY when the visitor walks in through a lobby door (lobby.js drops a sessionStorage note; a tiny inline script promotes it to html.via- before first paint, so the page never flashes before the veil). Direct visits, nav clicks, crawlers: none of this runs. ============================================================ */ /* pre-paint cover — pure-CSS fallback auto-reveals even if JS dies */ html.via-slots::before, html.via-roulette::before, html.via-blackjack::before, html.via-page::before{ content:"";position:fixed;inset:0;z-index:998;background:#070402;pointer-events:none; animation:entry-autofade .9s ease 2.6s forwards} @keyframes entry-autofade{to{opacity:0;visibility:hidden}} .entry-veil{position:fixed;inset:0;z-index:999;background:#070402;display:flex; flex-direction:column;align-items:center;justify-content:center;gap:1.7rem; transition:opacity .55s ease} .entry-veil.out{opacity:0;pointer-events:none} .entry-label{font-family:var(--display);font-weight:600;font-size:.72rem;letter-spacing:.34em; text-transform:uppercase;color:var(--copper);opacity:0;transform:translateY(6px); transition:opacity .6s ease .3s,transform .6s ease .3s} .entry-veil.play .entry-label{opacity:1;transform:none} /* ---------- slots: three copper reels spin in and snap, left to right ---------- */ .em-reels{display:flex;gap:10px} .em-reels .rl{width:56px;height:168px;overflow:hidden;background:#120d09; border:1px solid var(--line);position:relative} .em-reels .rl::after{content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(180deg,#070402 0%,transparent 32% 68%,#070402 100%)} .em-reels .st{display:flex;flex-direction:column;transform:translateY(-672px)} .em-reels .st svg{width:56px;height:56px;display:block;flex:none} .entry-veil.play .rl:nth-child(1) .st{animation:em-spin .95s cubic-bezier(.25,.7,.3,1) forwards} .entry-veil.play .rl:nth-child(2) .st{animation:em-spin 1.15s cubic-bezier(.25,.7,.3,1) forwards} .entry-veil.play .rl:nth-child(3) .st{animation:em-spin 1.35s cubic-bezier(.25,.7,.3,1) forwards} @keyframes em-spin{from{transform:translateY(-672px)}to{transform:translateY(0)}} /* ---------- roulette: rim decelerates one way, ball the other ---------- */ .em-wheel{width:190px;height:190px} .em-wheel .rim,.em-wheel .orb{transform-origin:50% 50%;transform-box:view-box} .entry-veil.play .em-wheel .rim{animation:em-rot 1.5s cubic-bezier(.2,.75,.25,1) forwards} .entry-veil.play .em-wheel .orb{animation:em-orb 1.5s cubic-bezier(.25,.8,.3,1) forwards} @keyframes em-rot{from{transform:rotate(0deg)}to{transform:rotate(760deg)}} @keyframes em-orb{from{transform:rotate(0deg)}to{transform:rotate(-560deg)}} /* ---------- blackjack: two cards slide up and flip face-up ---------- */ .em-cards{display:flex;gap:14px;perspective:700px} .em-cards .cd{width:78px;height:112px;position:relative;transform-style:preserve-3d; transform:translateY(26px) rotateY(180deg);opacity:0} .entry-veil.play .cd:nth-child(1){animation:em-flip .9s cubic-bezier(.3,.8,.3,1) .1s forwards} .entry-veil.play .cd:nth-child(2){animation:em-flip .9s cubic-bezier(.3,.8,.3,1) .34s forwards} @keyframes em-flip{ from{transform:translateY(26px) rotateY(180deg);opacity:0} 30%{opacity:1} to{transform:translateY(0) rotateY(0deg);opacity:1}} .em-cards .f,.em-cards .b{position:absolute;inset:0;backface-visibility:hidden;border-radius:6px; border:1px solid var(--copper);overflow:hidden} .em-cards .f{background:linear-gradient(160deg,#f2ead9,#ddd2bc)} .em-cards .f svg{width:100%;height:100%;display:block} .em-cards .b{transform:rotateY(180deg);background-color:#1a130e; background-image: repeating-linear-gradient(45deg,rgba(192,122,61,.26) 0 2px,transparent 2px 9px), repeating-linear-gradient(-45deg,rgba(192,122,61,.26) 0 2px,transparent 2px 9px)} /* ---------- generic page: nested copper diamonds draw + settle ---------- */ .em-mark{width:118px;height:118px;overflow:visible} .em-mark path{opacity:0;transform-origin:60px 60px;transform-box:view-box} .entry-veil.play .em-mark .d1{animation:em-mark-in .8s cubic-bezier(.25,.8,.3,1) .05s forwards} .entry-veil.play .em-mark .d2{animation:em-mark-in .8s cubic-bezier(.25,.8,.3,1) .22s forwards} .entry-veil.play .em-mark .d3{animation:em-mark-pop .7s cubic-bezier(.3,.9,.35,1) .42s forwards} @keyframes em-mark-in{ from{opacity:0;transform:rotate(-24deg) scale(.62)} to{opacity:1;transform:rotate(0deg) scale(1)}} @keyframes em-mark-pop{ 0%{opacity:0;transform:scale(.2)} 60%{opacity:1;transform:scale(1.18)} 100%{opacity:1;transform:scale(1)}} @media (prefers-reduced-motion:reduce){ html.via-slots::before,html.via-roulette::before,html.via-blackjack::before,html.via-page::before{display:none} .entry-veil{display:none} }