/* The 3D scene replaces only the interactive product view. Existing controls and
   source imagery remain available when WebGL is unavailable. */
.wallet-3d-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;display:block}
.interactive-hardware.has-3d{background:radial-gradient(ellipse at 51% 69%,#25384c48,transparent 55%)}
.hero-art[data-model=vault] .interactive-hardware.has-3d{background:radial-gradient(ellipse at 51% 69%,#57432644,transparent 58%)}
.has-3d>.wallet-composite{transform:none;filter:none!important;isolation:auto;z-index:3;pointer-events:none}
.has-3d>.wallet-composite>.wallet-base,.has-3d>.wallet-composite>.wallet-cover>.wallet-lid{visibility:hidden}
.has-3d>.wallet-composite>.wallet-cover{pointer-events:auto}
.has-3d>.wallet-composite>.wallet-cover:focus-visible{outline:2px solid #efd5a7;outline-offset:7px}
.has-3d>.wallet-sensor-3d{position:absolute;z-index:5;width:44px;height:48px;min-width:44px;min-height:44px;transform:translate(-50%,-50%)}
.has-3d .hardware-grid{opacity:.06}
.has-3d .hardware-atmosphere{opacity:.5}
.has-3d .hardware-wordmark{opacity:.22}
.has-3d .callout-lines polyline{opacity:.64}
.has-3d .callout-lines g.is-selected polyline{opacity:1}
@media(prefers-reduced-motion:reduce){.has-3d>.wallet-composite>.wallet-cover{transition:none}}

/* A dimensional studio treatment of the approved product layers is retained
   on browsers that cannot create a hardware-accelerated WebGL context. */
.has-depth-fallback{--depth-tilt-x:3deg;--depth-tilt-y:-14deg;--depth-light-x:44%;background:radial-gradient(ellipse at 48% 68%,#38537655,transparent 58%)}
.hero-art[data-model=vault] .has-depth-fallback{background:radial-gradient(ellipse at 48% 68%,#a07c393e,transparent 59%)}
.interactive-hardware.has-depth-fallback>.wallet-composite{transform:translateX(-50%) perspective(850px) rotateX(var(--depth-tilt-x)) rotateY(var(--depth-tilt-y));transform-origin:50% 50%;transition:transform .45s cubic-bezier(.2,.7,.25,1);filter:drop-shadow(8px 12px 5px #0005) drop-shadow(0 23px 20px #0008);will-change:transform}
.has-depth-fallback>.wallet-composite:before{content:'';position:absolute;inset:3px -4px -5px 4px;z-index:-1;pointer-events:none;border-radius:14px;background:linear-gradient(96deg,#0c111c,#566d88 36%,#111927 80%,#859caf);border:1px solid #abc2dc50;box-shadow:inset -2px 0 2px #e2edff55,inset 0 -2px 2px #01030aa8,2px 3px 4px #0008}
.hero-art[data-model=vault] .has-depth-fallback>.wallet-composite:before{background:linear-gradient(96deg,#19150e,#a89063 36%,#3c3020 80%,#c8b184);border-color:#dfcda552;box-shadow:inset -2px 0 2px #ffefc955,inset 0 -2px 2px #0b0704a8,2px 3px 4px #0008}
.has-depth-fallback>.wallet-composite>.wallet-cover{filter:drop-shadow(3px 5px 2px #0007)}
.has-depth-fallback>.wallet-composite>.wallet-cover:before{content:'';position:absolute;inset:2px -2px -2px 2px;border-radius:13px;z-index:-1;pointer-events:none;background:linear-gradient(100deg,#526982,#091421 75%,#bdcddd);border:1px solid #dceaff55}
.hero-art[data-model=vault] .has-depth-fallback>.wallet-composite>.wallet-cover:before{background:linear-gradient(100deg,#bd9b61,#423118 75%,#efdeb9);border-color:#f5e2bc70}
.has-depth-fallback>.wallet-composite>.wallet-cover:after{content:'';position:absolute;inset:1px 2px 2px 1px;z-index:3;pointer-events:none;border-radius:13px;background:linear-gradient(112deg,transparent 17%,#d8e8ff08 36%,#e6f0ff44 48%,#fff4df08 55%,transparent 73%);background-size:240% 100%;background-position:var(--depth-light-x) 0;mix-blend-mode:screen;opacity:.28;transition:background-position .4s ease;box-shadow:inset 1px 0 0 #e9f2ff5c,inset -1px 0 0 #cbdfff29}
.hero-art[data-model=vault] .has-depth-fallback>.wallet-composite>.wallet-cover:after{background-image:linear-gradient(112deg,transparent 17%,#ffe6ad08 36%,#fff1c944 48%,#fff6dd08 55%,transparent 73%);box-shadow:inset 1px 0 0 #fff4d96c,inset -1px 0 0 #efd5a529}
.has-depth-fallback .hardware-grid{opacity:.075}
.has-depth-fallback .hardware-wordmark{opacity:.24}
.has-depth-fallback .hardware-atmosphere:before{left:27%;right:19%;bottom:6%;height:9%;filter:blur(11px);background:radial-gradient(ellipse,#a4bddd3b,transparent 70%)}
.has-depth-fallback .callout-lines polyline{opacity:.66}
.has-depth-fallback .callout-lines g.is-selected polyline{opacity:1}
.wallet-depth-anchor{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;transform:translate(-50%,-50%)}
.has-depth-fallback.depth-glint>.wallet-composite>.wallet-cover:after{animation:wallet-depth-glint 1.25s ease-out 1}
@keyframes wallet-depth-glint{0%{background-position:85% 0;opacity:.08}45%{opacity:.45}100%{background-position:var(--depth-light-x) 0;opacity:.28}}
@media(prefers-reduced-motion:reduce){
 .interactive-hardware.has-depth-fallback>.wallet-composite{transform:translateX(-50%) perspective(850px) rotateX(3deg) rotateY(-14deg);transition:none;will-change:auto}
 .has-depth-fallback>.wallet-composite>.wallet-cover,.has-depth-fallback>.wallet-composite>.wallet-cover:after{transition:none;animation:none!important}
}

/* Rotate and Slide share the same product controls, with independent gestures. */
.wallet-view-controls[hidden],.wallet-rotation-target[hidden]{display:none!important}
.wallet-view-controls{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding:10px 0 13px;border-bottom:1px solid #53607533;color:#b1bfd0}
.wallet-mode-switch{display:inline-flex;gap:3px;padding:3px;border:1px solid #71839c38;border-radius:9px;background:#080e165c}
.wallet-mode-switch button,.wallet-reset-view{min-height:40px;border:1px solid transparent;border-radius:6px;padding:8px 13px;font:inherit;font-size:.76rem;color:#aebdd1;background:transparent;cursor:pointer}
.wallet-mode-switch button[aria-pressed=true]{border-color:#c9ac714e;background:#d5b67c12;color:#e6c996;box-shadow:inset 0 1px #fff2ce13}
.wallet-mode-switch button:hover,.wallet-reset-view:hover{color:#f0d6a6;background:#d8b7780d}
.wallet-mode-switch button:focus-visible,.wallet-reset-view:focus-visible{outline:2px solid #e8c995;outline-offset:3px}
.wallet-reset-view{margin-left:auto;border-color:#73839b32;text-decoration:underline;text-underline-offset:4px}
.wallet-view-controls p{flex-basis:100%;margin:0;color:#8e9fb7;font-size:.75rem;line-height:1.6}
.wallet-rotation-target{position:absolute;z-index:3;touch-action:none;cursor:grab;border-radius:15px;background:transparent;outline:none;-webkit-tap-highlight-color:transparent}
.wallet-rotation-target:focus-visible{outline:2px solid #efd5a7;outline-offset:7px}
.wallet-rotation-target[data-wallet-focus-input=keyboard]:focus{outline:2px solid #efd5a7;outline-offset:7px}
/* Pointer focus can inherit :focus-visible on touch browsers. Keep the wallet
   clear while grabbing it and retain a visible focus target for keyboard use. */
.wallet-rotation-target[data-wallet-focus-input=pointer]:focus,
.interactive-hardware [data-wallet-slider][data-wallet-focus-input=pointer]:focus-visible{outline:none}
.is-rotating .wallet-rotation-target{cursor:grabbing}
@media(max-width:680px){.wallet-mode-switch button,.wallet-reset-view{min-height:44px;padding-inline:12px}.wallet-view-controls{gap:6px 10px}.wallet-view-controls p{font-size:.72rem}}