/* THE FORTUNE: the brand's own fortune-cookie photos, cracked open in the browser. Used on the homepage and the 404 page. */
@font-face{font-family:'WAI Fortune Serif';src:url('/assets/fonts/fortune-serif-bold.woff') format('woff');font-weight:700;font-style:normal;font-display:swap}
.wf{max-width:720px;margin:0 auto;display:flex;flex-direction:column;align-items:stretch;gap:16px}
.wf-frame{position:relative;border-radius:22px;overflow:hidden;box-shadow:0 30px 60px rgba(60,40,20,.16);background:#E7E2DC}
.wf-scene{display:block;width:100%;height:auto;cursor:pointer;touch-action:manipulation}
.wf-scene:focus:not(:focus-visible){outline:none}
.wf-scene:focus-visible{outline:3px solid #5A2FD6;outline-offset:-3px}
.wf .half,.wf .gems{transform-box:view-box;transition:transform 1.05s cubic-bezier(.2,.85,.25,1.08),opacity .5s}
.wf .wf-left{transform-origin:520px 680px}.wf .wf-right{transform-origin:860px 640px}
.wf .closed .wf-left{transform:translate(134px,16px) rotate(5deg)}
.wf .closed .wf-right{transform:translate(-150px,30px) rotate(-7deg)}
.wf .wf-closed{transition:opacity .18s linear}
.wf .wf-halves{transition:opacity .12s linear}
.wf .closed .wf-halves{opacity:0}
.wf .open .wf-closed{opacity:0}
.wf .closed.wobble .wf-closed{animation:wfWobble 2.8s ease-in-out infinite;transform-origin:660px 900px;transform-box:view-box}
.wf .cracking .wf-closed{animation:wfShake .42s ease-in-out both;transform-origin:660px 900px;transform-box:view-box}
@keyframes wfWobble{0%,84%,100%{transform:rotate(0)}88%{transform:rotate(-2.2deg)}92%{transform:rotate(2deg)}96%{transform:rotate(-1deg)}}
@keyframes wfShake{0%{transform:rotate(0)}20%{transform:rotate(-3deg) translateY(-6px)}40%{transform:rotate(3.5deg)}60%{transform:rotate(-2.5deg) translateY(-4px)}80%{transform:rotate(2deg)}100%{transform:rotate(0) scale(1.02)}}
.wf .wf-reveal{transition:r 1.5s cubic-bezier(.25,.8,.3,1) .12s}
.wf .closed .wf-reveal{r:0px;transition:none}
.wf .open .wf-reveal{r:1100px}
.wf .closed .gems{opacity:0;transition:opacity .2s}
.wf .open .gems{opacity:1;transition:opacity 0s}
.wf .wf-slip{transition:opacity .15s linear}
.wf .closed .wf-slip{opacity:0;transition:none}
.wf .wf-text{transition:opacity 1.1s ease .75s}
.wf .closed .wf-text{opacity:0;transition:none}
.wf .wf-flash{opacity:0;transform-box:view-box;transform-origin:660px 470px}
.wf .open .wf-flash{animation:wfFlash .7s ease-out}
@keyframes wfFlash{0%{opacity:.9;transform:scale(.3)}100%{opacity:0;transform:scale(1.6)}}
.wf .sparkle{opacity:0;transform-box:fill-box;transform-origin:center}
.wf .open .sparkle{animation:wfTwinkle var(--t,2.6s) ease-in-out infinite;animation-delay:var(--d,0s)}
@keyframes wfTwinkle{0%,100%{opacity:0;transform:scale(.4) rotate(0)}50%{opacity:.95;transform:scale(1) rotate(45deg)}}
.wf-hint{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);margin:0;background:rgba(255,255,255,.88);border-radius:999px;padding:8px 16px;font-size:14px;font-weight:700;color:#17121F;white-space:nowrap;pointer-events:none}
.wf-who{margin:0;text-align:center;font-size:12px;font-weight:800;letter-spacing:.24em;color:#6F6779;min-height:18px}
.wf-who i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:7px;vertical-align:0}
.wf-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.wf-btn{font:inherit;font-weight:800;font-size:16px;border-radius:999px;padding:13px 24px;cursor:pointer;border:2px solid #17121F;background:#17121F;color:#FFFFFF}
.wf-btn.ghost{background:transparent;color:#17121F}
.wf-btn:focus-visible{outline:3px solid #5A2FD6;outline-offset:3px}
.wf-toast{margin:0;text-align:center;font-size:14px;font-weight:700;color:#5A2FD6;min-height:20px}
@media (prefers-reduced-motion:reduce){
  .wf .half,.wf .gems,.wf .wf-slip,.wf .wf-reveal,.wf .wf-text{transition:none!important}
  .wf .closed.wobble .wf-closed,.wf .cracking .wf-closed,.wf .open .wf-flash,.wf .open .sparkle{animation:none}
  .wf .open .sparkle{opacity:.8}
}