.experience-scene{display:block;isolation:isolate;outline:none;cursor:default}
.exp-layer{position:absolute;display:block;object-fit:contain;user-select:none;pointer-events:none}
.exp-stop,.exp-detail{position:absolute;inset:0;pointer-events:none}
.exp-detail{opacity:0;visibility:hidden;transform-origin:50% 72%;will-change:opacity,transform}
.exp-detail.is-revealed{opacity:1;visibility:visible}
.exp-block{z-index:2;transform-origin:center bottom;will-change:transform}
.exp-coin{z-index:3;transform-origin:center;backface-visibility:visible;will-change:transform}
.exp-runner{position:absolute;z-index:1;pointer-events:none;will-change:transform;transform-origin:center bottom}
.exp-original,.exp-pose{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;image-rendering:pixelated}
.exp-pose{display:none;background-repeat:no-repeat}
.experience-scene[data-page="4"]{cursor:pointer}
.experience-scene[data-busy="true"]{cursor:default}
.experience-scene[data-complete="true"]{cursor:default}
.exp-scroll{pointer-events:auto;z-index:8;cursor:pointer}
.exp-runner.has-poses .exp-original{visibility:hidden}
.exp-runner.has-poses .exp-pose{display:block;background-image:url('assets/experience/character-poses.webp');background-size:400% 200%;background-position:var(--frame-x,0%) var(--frame-y,0%);transform:scale(1.14);transform-origin:center bottom}

.exp-divider{opacity:0}
.exp-start{transform-origin:center}

.exp-detail .exp-copy{scale:1.1;transform-origin:center}

/* Original coin art forms both faces; a closed metallic rim joins them. */
.exp-coin,.experience-coin-transition{transform-style:preserve-3d;overflow:visible}
.coin-face{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;backface-visibility:hidden;pointer-events:none}
.coin-front{transform:translateZ(calc(var(--coin-depth)/2))}
.coin-back{transform:rotateY(180deg) translateZ(calc(var(--coin-depth)/2))}
.coin-rim{position:absolute;left:50%;top:50%;width:var(--rim-width);height:var(--coin-depth);background:linear-gradient(to bottom,#ffe184 0%,hsl(42 96% var(--rim-light)) 23%,hsl(39 96% calc(var(--rim-light) - 10%)) 65%,#ffd460 100%);transform:translate(-50%,-50%) rotateZ(var(--angle)) translateY(calc(-1 * var(--coin-radius))) rotateX(90deg);backface-visibility:visible;pointer-events:none}

/* Reference-matched sidewall: solid gold center band with bright beveled lips. */
.experience-scene[data-page="4"] .coin-rim{height:calc(var(--coin-depth)*.82);background:linear-gradient(to bottom,#ffe59a 0%,#ffd453 22%,hsl(42 98% clamp(56%,var(--rim-light),66%)) 38%,#ffe587 52%,#ffd34d 76%,#ffdd73 100%)}
.experience-scene[data-page="4"] .coin-bevel-front,.experience-scene[data-page="4"] .coin-bevel-back{height:calc(var(--coin-depth)*.26);background:linear-gradient(to bottom,#ffeaa2,#ffdc69 42%,#ffd158 78%,#ffe28a)}
.experience-scene[data-page="4"] .coin-bevel-front{transform:translate(-50%,-50%) rotateZ(var(--angle)) translateY(calc(-1 * var(--coin-radius) + var(--coin-depth)*.045)) translateZ(calc(var(--coin-depth)*.43)) rotateX(55deg)}
.experience-scene[data-page="4"] .coin-bevel-back{transform:translate(-50%,-50%) rotateZ(var(--angle)) translateY(calc(-1 * var(--coin-radius) + var(--coin-depth)*.045)) translateZ(calc(var(--coin-depth)*-.43)) rotateX(125deg)}

/* Opacity promotion flattens preserve-3d: keep the rotating shell transform-only. */
.exp-coin{opacity:1;filter:none;isolation:auto;contain:none;will-change:transform}

/* Carry the supplied face's gold reflections across the sidewall and bevels. */
.experience-scene[data-page="4"] .coin-rim{
 background-color:#ffcf39;
 background-image:linear-gradient(180deg,#fff1ae99 0%,#ffd24c22 23%,#fff7cf88 47%,#fff0a355 58%,#eea90022 80%,#ffe99499 100%),url('assets/experience/p4-36.webp');
 background-size:100% 100%,500% 300%;background-position:center,15% 48%;background-repeat:no-repeat;
}
.experience-scene[data-page="4"] .coin-bevel-front,.experience-scene[data-page="4"] .coin-bevel-back{
 background-image:linear-gradient(180deg,#fff8d9aa,#ffe78255 40%,#ffd35122 75%,#fff2b899),url('assets/experience/p4-36.webp');
 background-size:100% 100%,500% 300%;background-position:center,15% 48%;
}

/* Gentle automatic reveal on upward return, from left to right. */
.experience-scene.is-returning .exp-detail{transform-origin:50% 65%;animation:experience-return-reveal 420ms cubic-bezier(.22,.75,.3,1) var(--return-delay,0ms) both}
.experience-scene.is-returning .exp-divider{animation:experience-return-divider 220ms ease-out 580ms both}
@keyframes experience-return-reveal{0%{opacity:0;transform:translateY(14px) scale(.97)}70%{opacity:1;transform:translateY(-2px) scale(1.006)}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes experience-return-divider{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.experience-scene.is-returning .exp-detail,.experience-scene.is-returning .exp-divider{animation:none}}

/* The pale question marks and text remain intact; only their white matte blends away. */
.exp-detail{mix-blend-mode:multiply}