/* The dev renderer owns the metal and light; CSS only moves its presentation plane. */
#card-intro{min-height:100svh;display:flex;flex-direction:column;position:relative;isolation:isolate;overflow:hidden;background:#f4f5f6;color:#202a32;padding:clamp(1.25rem,4vw,3rem);padding-top:max(1.25rem,env(safe-area-inset-top));padding-bottom:max(1.25rem,env(safe-area-inset-bottom))}
#card-intro::before{content:"";position:absolute;z-index:-1;inset:0;background:radial-gradient(ellipse at 50% 35%,#fff 0%,#fff0 65%),linear-gradient(135deg,#eaf0f4aa,transparent 60%);pointer-events:none}
.intro-center{width:100%;max-width:64rem;margin:auto;text-align:center}
#card-stage{position:relative;width:min(100%,780px);height:clamp(225px,55svh,570px);margin:0 auto;perspective:1100px;touch-action:pinch-zoom;user-select:none;-webkit-user-select:none;outline-offset:-6px}
#card-stage:focus:not(:focus-visible){outline:none}
#card-stage::after{content:"";position:absolute;bottom:8%;left:22%;width:56%;height:5%;background:#23384d22;filter:blur(18px);border-radius:50%;z-index:-1;pointer-events:none}
#card-model{position:relative;width:100%;height:100%;transform-style:preserve-3d;--pitch:0deg;--yaw:-8deg}
/* Keep no-script SVG visible, but never present a temporary model while JS loads. */
@media(scripting:enabled){#card-model:not(.is-ready){visibility:hidden}}
.card-face{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;backface-visibility:hidden;transform:rotateX(var(--pitch)) rotateY(var(--yaw));transform-style:preserve-3d}
.card-face svg{display:block;width:86%;max-height:90%;height:auto;aspect-ratio:855/540;border-radius:3.75% / 5.9%;box-shadow:0 2px 1px #80909c,0 18px 30px #21334515;background:#e5e8eb;pointer-events:none}
.card-face.back{transform:rotateX(var(--pitch)) rotateY(calc(var(--yaw) + 180deg))}
.card-face[aria-hidden="true"]{visibility:hidden}
#card-model[data-renderer="webgl"] .card-face{display:none}
#card-model canvas{position:absolute;inset:0;pointer-events:none}
#card-model.is-entering{animation:card-arrive 1.5s cubic-bezier(.16,1,.3,1) both}
@keyframes card-arrive{0%{opacity:0;filter:blur(24px);transform:translateY(-42svh)}55%{opacity:1;filter:blur(4px)}100%{opacity:1;filter:blur(0);transform:translateY(0)}}
#show-details{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;flex:none;align-self:center;width:100vw;box-sizing:border-box;min-height:72px;text-decoration:none;font-size:.75rem;letter-spacing:.07em;color:#445b6c;padding:1rem;touch-action:pan-y pinch-zoom}
.scroll-chevron{font-size:1.25rem;animation:scroll-invite 2.8s ease-in-out infinite}
@keyframes scroll-invite{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(5px);opacity:1}}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.experience-ready[data-view="intro"],.experience-ready[data-view="intro"] body{height:100%;overflow:hidden;overscroll-behavior:none}
.experience-ready[data-view="intro"] #card-intro{position:fixed;inset:0;height:100%;height:100dvh;min-height:0;overscroll-behavior:none;touch-action:pinch-zoom}
#card-details{outline:none}
/* Details use the document scroller: no overscroll interception or return gesture. */
.experience-ready[data-view="details"] #card-details{animation:details-arrive .45s ease-out}
@keyframes details-arrive{from{opacity:0}to{opacity:1}}
#card-details[hidden],#card-intro[hidden]{display:none!important}
#card-intro :focus-visible{outline:2px solid #0069a8;outline-offset:4px}
@media(max-width:480px){#card-intro{padding-left:1rem;padding-right:1rem}#card-stage{width:calc(100% + 2rem);margin-left:-1rem;height:clamp(235px,48svh,430px)}}
@media(max-height:650px){#card-stage{height:55svh;min-height:170px}#show-details{gap:.1rem}}
@media(prefers-reduced-motion:reduce){#card-model.is-entering,.scroll-chevron,.experience-ready[data-view="details"] #card-details{animation:none}#card-model{filter:none;transform:none}.hero-video{display:none}}