/* CSS 3D uses the real card faces; the original reading and reversed orientation remain intact. */
.fortune-depth-on .fortune-card{perspective:850px!important;perspective-origin:50% 45%;isolation:isolate}
.fortune-depth-on .fortune-card-body{transform-style:preserve-3d!important;overflow:visible!important;transition:none!important;animation:none!important}
.fortune-depth-on .fortune-card[data-depth-state="waiting"] .fortune-card-body{animation:fortuneCardFloat 5.5s ease-in-out infinite!important}
.fortune-depth-on .fortune-card[data-depth-state="turning"] .fortune-card-body{animation:fortuneCardTurn 1.08s cubic-bezier(.22,.65,.24,1) both!important}
.fortune-depth-on .fortune-card[data-depth-state="open"] .fortune-card-body{transform:rotateY(180deg)!important}
.fortune-depth-on .fortune-card-body > :is(.sp-back,.tface.back,.kt3-back,.kt-back){transform:translateZ(2px)!important}
.fortune-depth-on .fortune-card-body > :is(.sp-front,.tface.front,.kt3-front,.kt-front){transform:rotateY(180deg) translateZ(2px)!important}
.fortune-depth-on .fortune-card-body > .sp-front.rev{transform:rotateY(180deg) translateZ(2px) rotate(180deg)!important}
.fortune-depth-on .fortune-card-body > :is(.sp-back,.sp-front,.tface,.kt3-face,.kt-face){backface-visibility:hidden!important;-webkit-backface-visibility:hidden!important;box-shadow:0 16px 22px -7px #090b2466,0 3px 5px #15152d55!important}
.fortune-card-edge{position:absolute;display:block;pointer-events:none;backface-visibility:visible;background:linear-gradient(90deg,#745220,#f3dca0 32%,#ad7b36 56%,#e7c982);transform-style:preserve-3d}
.fortune-card-edge-left,.fortune-card-edge-right{width:4px;height:calc(100% - 12px);top:6px;transform:translateX(-50%) rotateY(90deg)}
.fortune-card-edge-left{left:0}.fortune-card-edge-right{left:100%}
.fortune-card-edge-top,.fortune-card-edge-bottom{height:4px;width:calc(100% - 12px);left:6px;transform:translateY(-50%) rotateX(90deg)}
.fortune-card-edge-top{top:0}.fortune-card-edge-bottom{top:100%}
.fortune-card-reflection{position:absolute;inset:-20% -65%;pointer-events:none;display:block;background:linear-gradient(108deg,transparent 39%,#fff2c615 46%,#fff4d07a 50%,#fff8e61f 54%,transparent 61%);opacity:0;transform:translateX(-55%)}
.fortune-depth-on .fortune-card[data-depth-state="turning"] .fortune-card-reflection{animation:fortuneCardReflection 1.08s ease-in-out both!important}
/* Replace the older flat foil sweep so a card has one consistent reflection. */
.fortune-depth-on .fortune-card .sp-front::after{display:none!important}
.fortune-depth-on .fortune-card[data-depth-visible="no"] :is(.fortune-card-body,.fortune-card-reflection),
.fortune-depth-on.fortune-depth-paused .fortune-card :is(.fortune-card-body,.fortune-card-reflection){animation-play-state:paused!important}
@keyframes fortuneCardFloat{0%,100%{transform:translate3d(0,0,12px) rotateX(5deg) rotateY(-11deg) rotateZ(-1.2deg)}50%{transform:translate3d(0,-7px,24px) rotateX(-3deg) rotateY(9deg) rotateZ(1deg)}}
@keyframes fortuneCardTurn{0%{transform:var(--fortune-card-start,translate3d(0,-3px,18px) rotateX(3deg) rotateY(-9deg))}24%{transform:translate3d(0,-12px,62px) rotateX(12deg) rotateY(24deg) rotateZ(-3deg)}55%{transform:translate3d(0,-14px,74px) rotateX(8deg) rotateY(110deg) rotateZ(2deg)}82%{transform:translate3d(0,-5px,32px) rotateX(-3deg) rotateY(172deg)}100%{transform:translate3d(0,0,0) rotateY(180deg)}}
@keyframes fortuneCardReflection{0%,28%{opacity:0;transform:translateX(-55%)}49%{opacity:.8}85%{opacity:.65;transform:translateX(55%)}100%{opacity:0;transform:translateX(60%)}}