/* Ryan Short — Selected Work photographic case study upgrade.
 * Scoped to the Work section. V3.1 optimized orbital hero remains unchanged. */
.work-feature { background:radial-gradient(ellipse at 62% 35%,#173d73 0%,#0b1b36 48%,#070d1c 82%); }
.work-feature::before { opacity:.55; }
.work-feature__browser {
  width:min(82%,1080px);height:81%;min-height:240px;
  border:1px solid #385a8f;border-radius:12px;
  transform:perspective(1200px) rotateY(-3deg) rotateZ(-2.1deg) translateY(17px);
  box-shadow:0 34px 100px #020714b8,0 0 0 9px #ffffff06;
  will-change:auto;
}
.work-feature__browser .mini-browser__bar {height:34px;flex-shrink:0;background:#101827}
.work-feature__browser .mini-browser__bar i {font-size:9px;font-style:normal;white-space:nowrap}
.work-feature__viewport {position:relative;height:calc(100% - 34px);overflow:hidden;background:#0a1428;}
.work-feature__fallback {height:100%;padding:clamp(20px,4vw,67px)}
.work-feature__fallback strong {font-size:clamp(30px,5vw,76px)}
.work-feature__screenshot {
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;
  opacity:0;transition:opacity .4s ease-out,transform .7s cubic-bezier(.22,1,.36,1);
  pointer-events:none;
}
.work-feature.has-screenshot .work-feature__screenshot {opacity:1}
.work-feature.has-screenshot .work-feature__fallback {visibility:hidden}
.project__trigger:hover .work-feature__browser,
.project__trigger:focus-visible .work-feature__browser {
  transform:perspective(1200px) rotateY(-1deg) rotateZ(-.7deg) translateY(6px) scale(1.008);
}
.project__trigger:hover .work-feature__screenshot,
.project__trigger:focus-visible .work-feature__screenshot {transform:scale(1.018)}
.work-feature__label {
  position:absolute;bottom:24px;left:26px;z-index:2;
  padding:10px 13px;border:1px solid #acc9fa50;
  background:#050b17c9;backdrop-filter:blur(5px);
  color:#d6e8ff;font:700 9px var(--body);letter-spacing:.17em;
}
.work-feature__label i {font-style:normal;color:var(--cyan);margin-inline:7px}
.project__stack {display:flex;flex-wrap:wrap;gap:8px;margin-top:15px}
.project__stack span {font:600 10px var(--body);color:#c2d0e2;border:1px solid #475268;border-radius:99px;padding:6px 10px}
/* The full-card case-study action is still keyboard accessible. */
.work .project__trigger:focus-visible{outline:2px solid var(--cyan);outline-offset:6px}
/* Respect reduced motion and avoid a persistent GPU layer on idle cards. */
@media (prefers-reduced-motion: reduce) {
  .work-feature__screenshot,.work-feature__browser{transition:none!important}
  .project__trigger:hover .work-feature__screenshot {transform:none}
}
@media(max-width:760px){
 .work-feature__browser{width:87%;height:74%;min-height:190px;transform:rotate(-2deg) translateY(8px)}
 .project__trigger:hover .work-feature__browser{transform:rotate(-1deg) translateY(4px)}
 .work-feature__label{bottom:14px;left:14px;font-size:8px;padding:8px}
 .work-feature__browser .mini-browser__bar i{font-size:7px;letter-spacing:.07em}
 .project__stack span{font-size:9px}
}
@media(max-width:390px){
 .work-feature__browser{width:91%;height:71%;min-height:0}
 .work-feature__label{letter-spacing:.08em}
}