/* DAP STUDIO — PORTFOLIO DETAIL INTERACTION v2
   All drives initially display previews; user action opens / closes detail.
   Does not affect CMS source data or scrolling scene transitions. */
.bay-interaction-hint{display:flex;align-items:center;gap:10px;margin:4px 40px 12px;padding:11px 16px;border:1px solid #253764;border-radius:12px;background:linear-gradient(100deg,#071228,#0a1936 65%,#0c1533);font:700 9.5px/1.6 var(--fm);letter-spacing:.055em;color:#8396bc}
.bay-interaction-hint strong{flex:none;color:#62d9ec;font-size:9px;letter-spacing:.12em}
.bay-hint-light{flex:0 0 7px;width:7px;height:7px;background:#00e5a4;border-radius:50%;box-shadow:0 0 11px #00e5a488}
#bayInteractionStatus{min-width:0}
#portfolio .drive{isolation:isolate;min-height:460px;transition:flex-basis .65s cubic-bezier(.19,.86,.2,1),border-color .4s,box-shadow .42s,background .42s,transform .3s}
#portfolio .drive.is-open{flex-basis:min(400px,78vw);cursor:pointer}
#portfolio .drive:not(.is-open) .d-actions{display:flex}
#portfolio .drive:not(.is-open) .d-specs{display:grid}
#portfolio .drive:not(.is-open) .d-desc{display:block}
#portfolio .drive .drive-extra{display:grid;grid-template-rows:0fr;min-height:0;opacity:0;visibility:hidden;pointer-events:none;transform:translate3d(0,-14px,0);transition:grid-template-rows .65s cubic-bezier(.2,.78,.15,1),opacity .37s ease,transform .62s cubic-bezier(.2,.78,.15,1),visibility 0s linear .65s}
#portfolio .drive.is-open .drive-extra{grid-template-rows:1fr;opacity:1;visibility:visible;pointer-events:auto;transform:none;transition:grid-template-rows .65s cubic-bezier(.2,.78,.15,1),opacity .5s .12s ease,transform .65s cubic-bezier(.2,.78,.15,1),visibility 0s}
#portfolio .drive-extra-inner{min-height:0;overflow:hidden;display:flex;flex-direction:column}
#portfolio .drive-extra-inner .d-actions{padding-top:14px}
#portfolio .drive-extra .d-specs{max-height:170px}
#portfolio .drive .drive-toggle{position:relative;display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;padding:12px 12px;margin:6px 0 13px;background:rgba(25,48,93,.62);border:1px solid #344e87;border-radius:10px;box-shadow:inset 0 1px rgba(255,255,255,.05);color:#a5c6ff;font:800 10px/1.15 var(--fm);letter-spacing:.08em;text-align:left;transition:background .25s,border-color .25s,color .25s,box-shadow .3s}
#portfolio .drive .drive-toggle:hover,#portfolio .drive .drive-toggle:focus-visible{background:rgba(49,94,168,.4);border-color:#6299f3;color:#fff;box-shadow:0 0 20px -7px rgba(75,137,255,.7)}
#portfolio .drive .drive-toggle:focus-visible{outline:2px solid #60c3ff;outline-offset:3px}
#portfolio .drive .drive-toggle i{display:grid;place-items:center;flex:0 0 25px;width:25px;height:25px;background:#1d3470;border:1px solid #3c64ad;border-radius:7px;transition:transform .5s cubic-bezier(.17,.78,.23,1),background .3s,color .3s}
#portfolio .drive.is-open .drive-toggle{background:linear-gradient(115deg,#16489b,#2840a2);border-color:#699bff;color:white}
#portfolio .drive.is-open .drive-toggle i{transform:rotate(180deg);background:#246ac1;color:#fff}
#portfolio .drive.is-open h3{transition:font-size .5s ease}
#portfolio .drive::after{content:"";position:absolute;inset:-30% -35%;z-index:4;pointer-events:none;background:linear-gradient(105deg,transparent 38%,rgba(85,178,255,.04) 43%,rgba(125,202,255,.25) 50%,rgba(85,178,255,.04) 57%,transparent 62%);transform:translateX(-135%) rotate(10deg);opacity:0}
#portfolio .drive.is-opening::after{animation:portfolioDriveUnlock .75s ease-out both}
#portfolio .drive.is-closing::after{animation:portfolioDriveLock .7s ease-out both}
@keyframes portfolioDriveUnlock{0%{opacity:0;transform:translateX(-135%) rotate(10deg)}20%{opacity:1}80%{opacity:1}100%{opacity:0;transform:translateX(125%) rotate(10deg)}}
@keyframes portfolioDriveLock{0%{opacity:0;transform:translateX(130%) rotate(10deg)}20%{opacity:.65}100%{opacity:0;transform:translateX(-140%) rotate(10deg)}}
#portfolio .drive .d-sn{margin-top:8px}
/* Preview cards do not expose extended specifications; only explicit click does. */
#portfolio .drive:not(.is-open) .drive-media{height:118px}
#portfolio .drive.is-open .drive-media{height:150px}
/* Progressive enhancement: details remain visible if scripting is disabled. */
.no-js #portfolio .drive .drive-extra{grid-template-rows:1fr;opacity:1;visibility:visible;pointer-events:auto;transform:none}
.no-js #portfolio .drive .drive-toggle{display:none}
/* Without JavaScript the readable details and outbound links remain available. */
.no-js #portfolio .drive .d-actions{display:flex}
.no-js #portfolio .drive .d-desc{display:block}
.no-js #portfolio .drive .d-specs{display:grid}
/* The portfolio scroll choreography reveals the preview cards only; never opens detail. */
.cinema-ready #portfolio.cinema-active .drive{animation:portfolioPreviewArrival .72s cubic-bezier(.22,.8,.19,1) both;animation-delay:calc(160ms + var(--drive-order,0) * 95ms)}
@keyframes portfolioPreviewArrival{from{opacity:.15;transform:translate3d(0,23px,0);filter:brightness(.7)}to{opacity:1;transform:none;filter:none}}
@media(max-width:980px){.bay-interaction-hint{margin-left:20px;margin-right:20px}}
@media(max-width:640px){.bay-interaction-hint{margin:5px 8px 12px;padding:9px 11px;gap:8px;flex-wrap:wrap;font-size:9px}#bayInteractionStatus{flex-basis:100%}#portfolio .drive{flex-basis:180px;min-height:440px}#portfolio .drive.is-open{flex-basis:84vw}#portfolio .drive .drive-toggle{font-size:9px;padding:10px 9px;margin-top:4px}}
@media(prefers-reduced-motion:reduce){.cinema-ready #portfolio.cinema-active .drive{animation:none!important}#portfolio .drive,#portfolio .drive .drive-extra,#portfolio .drive .drive-toggle,#portfolio .drive .drive-toggle i{transition:none!important}#portfolio .drive::after{display:none!important}}