/* Original native CSS planes, ordered from left/back to right/front. */
.handover-section{overflow:hidden}
.handover-fan{position:relative;display:grid;grid-template-columns:minmax(0,1fr);place-items:center;width:100%;height:525px;border:0;padding:0;margin:0;background:transparent;isolation:isolate;cursor:pointer;--gallery-scale:1.5}
.handover-stack{position:relative;display:block;width:364px;height:312px;transform:scale(var(--gallery-scale)) translateX(var(--stack-offset,30px));transition:transform 500ms cubic-bezier(.2,.9,.25,1.12);overflow:visible}
.handover-panel{position:absolute;left:calc(var(--index)*48px);top:0;width:160px;height:240px;z-index:calc(var(--index) + 1);transform:translateX(var(--shift,0px));transition:transform 500ms cubic-bezier(.2,.9,.25,1.12);cursor:pointer}
.handover-panel-inner{display:block;position:relative;width:100%;height:100%;transform:skewY(24deg);transform-origin:top left;border:1px solid #ffffff30;box-shadow:-7px 0 12px #0009;border-radius:6px;overflow:hidden;box-sizing:border-box;background:#101010}
.handover-fan-caption{position:absolute;top:50%;left:50%;width:max-content;max-width:100%;transform:translate(-50%,-50%);z-index:50;text-align:center;pointer-events:none;padding:16px 0;font-size:clamp(37.5px,4.95vw,63px);font-weight:600;letter-spacing:-1.95px;line-height:1.2;white-space:nowrap;background-clip:text!important;-webkit-background-clip:text!important;-webkit-text-fill-color:transparent;transition:opacity 500ms ease}
.handover-caption-solid{background:linear-gradient(90deg,#fff,#fff);opacity:1}
.handover-fan.is-open .handover-caption-solid{opacity:1}
.handover-fan:focus-visible{outline:1px solid #ffffff40;outline-offset:-5px;border-radius:12px}
.handover-hint{font-size:10px;text-align:center;color:var(--soft);margin:0 0 40px}
.handover-principles{gap:48px}.handover-principles article{padding-top:0;border:0}.handover-principles .geo{margin-bottom:20px}.handover-principles h3{font-size:25px;line-height:1.25;margin-bottom:16px}.handover-principles p{font-size:14px;line-height:1.8}
@media(max-width:1000px){.handover-fan{--gallery-scale:1.35;height:480px}}
@media(max-width:700px){.handover-fan{--gallery-scale:1.08;height:405px}.handover-fan-caption{font-size:37.5px;letter-spacing:-1.5px;white-space:normal;text-wrap:balance;width:100%;max-width:480px}.handover-hint{font-size:9px;margin-bottom:30px}.handover-principles{grid-template-columns:1fr;gap:30px}.handover-principles h3{font-size:23px}}
@media(max-width:560px){.handover-fan{--gallery-scale:.9;height:360px}}
@media(max-width:380px){.handover-fan{--gallery-scale:.72;height:300px}.handover-fan-caption{font-size:31.5px;letter-spacing:-1.2px}}
@media(prefers-reduced-motion:reduce){.handover-stack,.handover-panel,.handover-panel-inner::after,.handover-fan-caption{transition:none}}

/* Caption stays opaque in every state; only its neutral sheen changes. */
.handover-caption-solid{background:linear-gradient(110deg,#fff 15%,#c8c8c8 50%,#fff 85%);background-size:200% 100%;background-position:0% 50%;transition:background-position 500ms ease}
.handover-fan.is-open .handover-caption-solid{background-position:100% 50%}

@media(prefers-reduced-motion:reduce){.handover-caption-solid{transition:none}}

/* One shared plane and surface; no nested artwork or misaligned inner frame. */
.handover-panel-inner::after{content:"";position:absolute;inset:0;background:linear-gradient(125deg,#ffffff10,transparent 65%);opacity:0;transition:opacity 500ms ease;pointer-events:none}
.handover-panel.is-selected .handover-panel-inner::after{opacity:1}
@media(prefers-reduced-motion:reduce){.handover-panel-inner::after{transition:none}}

/* The stationary screen sits behind the three illustrated foreground cards. */
.handover-panel :where(img,.handover-art){position:absolute;inset:8px;width:calc(100% - 16px);height:calc(100% - 16px);object-fit:fill;border-radius:3px;opacity:.8;transition:opacity 500ms ease}
.handover-panel.is-selected :where(img,.handover-art){opacity:1}
.handover-screen{width:160px;left:0;z-index:0;pointer-events:none}
.handover-screen .handover-panel-inner{border:0;background:transparent;box-shadow:none;overflow:visible}
.handover-screen img{inset:0;width:100%;height:100%;object-fit:contain;opacity:1}
.handover-screen .handover-panel-inner::after{display:none}
@media(prefers-reduced-motion:reduce){.handover-panel :where(img,.handover-art){transition:none}}

/* The selected gap determines the offset needed to center the visible silhouette. */