/* Interactive media system: additive layer for the existing portfolio */
:root{--media-gold:#e9b95d;--media-ink:#05070b;--media-cyan:#55d6d0;--media-line:rgba(233,185,93,.22);--media-ease:cubic-bezier(.22,.8,.2,1)}
.media-hero{position:fixed;inset:0;z-index:-2;pointer-events:none;overflow:hidden;background:var(--media-ink)}
.media-hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.18;filter:saturate(.55) contrast(1.06);mix-blend-mode:screen}
.media-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,7,11,.94) 0%,rgba(5,7,11,.62) 46%,rgba(5,7,11,.18) 100%),url("hero-night.svg") center/cover no-repeat;filter:saturate(.78) contrast(1.03);opacity:.7}
.media-hero::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 70% 24%,rgba(233,185,93,.12),transparent 34%),linear-gradient(180deg,transparent 65%,rgba(5,7,11,.96));mix-blend-mode:screen;opacity:.55}
.media-reveal{opacity:1;transform:none;transition:opacity .55s var(--media-ease),transform .55s var(--media-ease)}
html[data-media-motion="full"] .media-reveal:not(.is-visible){opacity:.02;transform:translateY(14px)}
html[data-media-paused="true"] .media-orbit,html[data-media-paused="true"] .media-signal::after,html[data-media-paused="true"] .media-stage__grid,html[data-media-paused="true"] .feature-visual__bars i{animation-play-state:paused}
:focus-visible{outline:2px solid var(--media-gold);outline-offset:4px}
.media-orbit{position:absolute;width:62vw;height:62vw;max-width:880px;max-height:880px;right:-14vw;top:6vh;border:1px solid var(--media-line);border-radius:50%;transform:rotate(-18deg);animation:media-orbit 24s linear infinite}
.media-orbit::before,.media-orbit::after{content:"";position:absolute;inset:8%;border:1px solid rgba(85,214,208,.18);border-radius:50%;transform:rotate(43deg)}
.media-orbit::after{inset:20%;transform:rotate(-23deg);border-color:rgba(233,185,93,.15)}
.media-signal{position:absolute;left:0;right:0;bottom:13vh;height:20vh;opacity:.48;overflow:hidden}
.media-signal::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 78px,rgba(233,185,93,.08) 79px 80px),linear-gradient(transparent 49%,rgba(233,185,93,.12) 50%,transparent 51%)}
.media-signal::after{content:"";position:absolute;left:-5%;right:-5%;top:48%;height:4px;background:#e9b95d;clip-path:polygon(0 48%,21% 48%,22% 45%,23% 49%,25% 50%,25.7% 6%,26.4% 90%,27% 47%,49% 47%,50% 45%,51% 49%,53% 50%,53.7% 6%,54.4% 90%,55% 47%,77% 47%,78% 45%,79% 49%,81% 50%,81.7% 6%,82.4% 90%,83% 47%,100% 47%,100% 55%,83% 55%,82.4% 94%,81.7% 55%,79% 55%,78% 53%,77% 55%,55% 55%,54.4% 94%,53.7% 55%,51% 55%,50% 53%,49% 55%,27% 55%,26.4% 94%,25.7% 55%,23% 55%,22% 53%,21% 55%,0 55%);filter:drop-shadow(0 0 10px rgba(233,185,93,.75));animation:media-signal 7s linear infinite}
.media-stage{position:relative;isolation:isolate;perspective:1200px;min-height:360px;margin:1rem 0 3rem;border:1px solid rgba(233,185,93,.2);background:linear-gradient(135deg,rgba(10,18,25,.9),rgba(5,7,11,.62));overflow:hidden}
.media-particles{position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:.9;mix-blend-mode:screen}
.media-stage > :not(.media-particles){z-index:1}
.media-stage::before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 20%,rgba(233,185,93,.06) 50%,transparent 80%);transform:translateX(-100%);animation:media-sheen 9s var(--media-ease) infinite}
.media-stage__grid{position:absolute;inset:9%;border:1px solid rgba(233,185,93,.25);transform:rotateX(58deg) rotateZ(-7deg) translateY(8%);transform-origin:center bottom;background:linear-gradient(rgba(233,185,93,.11) 1px,transparent 1px),linear-gradient(90deg,rgba(233,185,93,.11) 1px,transparent 1px);background-size:48px 48px;box-shadow:0 0 80px rgba(233,185,93,.08);animation:media-grid 10s ease-in-out infinite alternate}
.media-stage__orb{position:absolute;left:50%;top:46%;width:120px;height:120px;border:1px solid var(--media-gold);border-radius:50%;transform:translate(-50%,-50%) rotateX(62deg);box-shadow:0 0 0 18px rgba(233,185,93,.04),0 0 60px rgba(233,185,93,.23);animation:media-orb 5s ease-in-out infinite}
.media-stage__orb::after{content:"";position:absolute;inset:18px;border:1px dashed rgba(85,214,208,.75);border-radius:50%;animation:media-spin 12s linear infinite}
.media-stage__label{position:absolute;left:1.4rem;top:1.2rem;font:500 .68rem/1.4 'JetBrains Mono',monospace;letter-spacing:.16em;color:var(--media-gold);text-transform:uppercase}
.media-stage__readout{position:absolute;right:1.4rem;bottom:1.2rem;font:400 .65rem/1.6 'JetBrains Mono',monospace;color:rgba(255,255,255,.6);text-align:right}
.biocredit-media{margin:2rem 0 4rem;padding:clamp(1rem,3vw,2rem);border-top:1px solid var(--media-line);border-bottom:1px solid var(--media-line);background:linear-gradient(135deg,rgba(233,185,93,.035),transparent 40%)}
.biocredit-media__intro{display:flex;justify-content:space-between;gap:2rem;align-items:end;margin-bottom:1.4rem}.biocredit-media__intro h3{margin:0;font-size:clamp(1.5rem,3vw,2.7rem)}.biocredit-media__intro p{max-width:38rem;margin:0;color:rgba(255,255,255,.62)}
.media-flow{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.45rem;position:relative}.media-flow::before{content:"";position:absolute;left:4%;right:4%;top:4.5rem;height:1px;background:linear-gradient(90deg,transparent,var(--media-gold),transparent);opacity:.45}
.media-step{position:relative;min-height:10rem;padding:1rem .8rem;border:1px solid rgba(233,185,93,.18);background:rgba(5,7,11,.65);transition:transform .24s var(--media-ease),border-color .24s var(--media-ease),background .24s var(--media-ease)}
.media-step:hover,.media-step:focus-within,.media-step.is-active{transform:translateY(-6px);border-color:var(--media-gold);background:rgba(233,185,93,.08)}
.media-step.is-active .media-step__icon{background:var(--media-gold);color:var(--media-ink);box-shadow:0 0 0 8px rgba(233,185,93,.08),0 0 22px rgba(233,185,93,.3)}
.media-step.is-complete{border-color:rgba(85,214,208,.55)}
.media-step.is-complete .media-step__icon{border-color:var(--media-cyan);color:var(--media-cyan)}
.media-step__icon{display:grid;place-items:center;width:2.2rem;height:2.2rem;border:1px solid var(--media-gold);border-radius:50%;color:var(--media-gold);font:700 .7rem 'JetBrains Mono',monospace;margin-bottom:1rem}.media-step h4{margin:0 0 .35rem;font-size:.88rem}.media-step p{margin:0;color:rgba(255,255,255,.55);font-size:.72rem;line-height:1.45}
.media-cta{display:inline-flex;align-items:center;gap:.7rem;margin-top:1.4rem;padding:.75rem 1rem;border:1px solid var(--media-gold);color:var(--media-gold);background:transparent;text-decoration:none;transition:background .2s var(--media-ease),color .2s var(--media-ease),transform .2s var(--media-ease)}.media-cta:hover,.media-cta:focus-visible{background:var(--media-gold);color:var(--media-ink);transform:translateY(-2px)}
.feature-visual{position:relative;min-height:190px;margin:-.5rem 0 1.2rem;overflow:hidden;border:1px solid rgba(233,185,93,.2);background:radial-gradient(circle at 50% 50%,rgba(233,185,93,.12),transparent 54%),#080c11}.feature-visual::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 49.5%,rgba(233,185,93,.15) 50%,transparent 50.5%),linear-gradient(transparent 49.5%,rgba(233,185,93,.15) 50%,transparent 50.5%);background-size:42px 42px;opacity:.42}.feature-visual__ring{position:absolute;left:50%;top:50%;width:88px;height:88px;border:1px solid var(--media-gold);border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 12px rgba(233,185,93,.04),0 0 40px rgba(233,185,93,.22);animation:media-orb 4.5s ease-in-out infinite}.feature-visual__ring::after{content:"";position:absolute;inset:15px;border:1px dashed var(--media-cyan);border-radius:50%;animation:media-spin 9s linear infinite}.feature-visual__bars{position:absolute;left:14%;right:14%;bottom:18%;height:34%;display:flex;align-items:end;gap:4px}.feature-visual__bars i{flex:1;background:linear-gradient(var(--media-gold),rgba(233,185,93,.08));height:var(--h);transform-origin:bottom;animation:media-bars 1.7s var(--media-ease) infinite alternate}.feature-visual__bars i:nth-child(2n){animation-delay:-.5s}.feature-visual__bars i:nth-child(3n){animation-delay:-1s}

.projects-grid .project-card[data-media-tilt]{--media-rx:0deg;--media-ry:0deg;--media-lift:0px;--media-glare-x:50%;--media-glare-y:50%;transform:perspective(1100px) rotateX(var(--media-rx)) rotateY(var(--media-ry)) translateY(var(--media-lift));transform-style:preserve-3d;will-change:auto;transition:transform .36s var(--media-ease),border-color .28s var(--media-ease),box-shadow .28s var(--media-ease)}
.projects-grid .project-card[data-media-tilt]::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at var(--media-glare-x) var(--media-glare-y),rgba(233,185,93,.22),transparent 32%);opacity:0;transition:opacity .28s var(--media-ease);mix-blend-mode:screen}
.projects-grid .project-card[data-media-tilt].is-tilting{will-change:transform;--media-lift:-7px;border-color:rgba(233,185,93,.72);box-shadow:0 22px 60px rgba(0,0,0,.32),0 0 0 1px rgba(233,185,93,.16)}
.projects-grid .project-card[data-media-tilt].is-tilting::after{opacity:1}
.projects-grid .project-card[data-media-tilt] > *{transform:translateZ(12px)}
.evidence-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem;margin:1.5rem 0}.evidence-item{padding:1rem;border-left:2px solid var(--media-gold);background:rgba(233,185,93,.035)}.evidence-item strong{display:block;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--media-gold);font-family:'JetBrains Mono',monospace}.evidence-item span{display:block;margin-top:.3rem;color:rgba(255,255,255,.72);font-size:.82rem;line-height:1.35}
.motion-principle{position:relative;overflow:hidden}.motion-principle::after{content:"";position:absolute;left:0;bottom:-.25rem;width:5rem;height:2px;background:var(--media-gold);transform-origin:left;animation:media-scan 4s var(--media-ease) infinite}.motion-principle em{font-style:normal;color:var(--media-gold)}
.media-modal{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:1rem;background:rgba(0,0,0,.78);opacity:0;visibility:hidden;transition:opacity .22s var(--media-ease),visibility .22s}.media-modal.is-open{opacity:1;visibility:visible}.media-modal__panel{max-width:720px;width:min(100%,720px);padding:clamp(1.2rem,4vw,2.4rem);border:1px solid var(--media-gold);background:#080c11;transform:translateY(10px) scale(.97);transition:transform .22s var(--media-ease)}.media-modal.is-open .media-modal__panel{transform:none}.media-modal__close{float:right;border:0;background:none;color:var(--media-gold);font-size:1.4rem;cursor:pointer}.media-modal__panel h3{margin-top:0}.media-modal__panel p{color:rgba(255,255,255,.68);line-height:1.65}
@keyframes media-orbit{to{transform:rotate(342deg)}}@keyframes media-spin{to{transform:rotate(360deg)}}@keyframes media-signal{to{transform:translateX(18%)}}@keyframes media-sheen{50%{transform:translateX(100%)}}@keyframes media-grid{to{transform:rotateX(58deg) rotateZ(-4deg) translateY(2%) scale(1.04)}}@keyframes media-orb{50%{transform:translate(-50%,-50%) scale(1.08)}}@keyframes media-bars{to{transform:scaleY(.55);opacity:.6}}@keyframes media-scan{50%{transform:scaleX(4)}}
@media (max-width:900px){.media-flow{grid-template-columns:repeat(3,minmax(0,1fr))}.media-flow::before{display:none}.evidence-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.media-stage{min-height:290px}.media-orbit{width:110vw;height:110vw;right:-35vw}}
@media (max-width:600px){.media-flow{grid-template-columns:repeat(2,minmax(0,1fr))}.biocredit-media__intro{display:block}.biocredit-media__intro p{margin-top:.7rem}.evidence-grid{grid-template-columns:1fr}.media-stage{min-height:230px}.media-stage__orb{width:82px;height:82px}.media-signal{bottom:8vh;height:15vh}}
@media (hover:hover) and (pointer:fine){[data-tilt]{transform-style:preserve-3d}}
@media (max-width:700px), (prefers-reduced-motion:reduce){.media-hero__video{display:none}.media-particles{display:none}.media-orbit,.media-signal::after,.media-stage::before,.media-stage__grid,.media-stage__orb,.media-stage__orb::after,.feature-visual__ring,.feature-visual__ring::after,.feature-visual__bars i,.motion-principle::after{animation:none!important}.media-step,.media-cta,.media-reveal,.projects-grid .project-card[data-media-tilt]{transition:none}.projects-grid .project-card[data-media-tilt]{transform:none!important}.media-stage__grid{transform:rotateX(58deg) rotateZ(-7deg) translateY(8%)}.media-hero::before{opacity:.42}}
@media (forced-colors:active){.media-hero,.media-stage,.feature-visual,.media-step{forced-color-adjust:none;border-color:CanvasText}.media-cta{border-color:ButtonText;color:ButtonText}}
