/* V5 / Selected Work: a physically-layered, editorial 3D artwork display.
   Scoped to #work only. V4.8 hero code, images, colors and animations are locked. */
#work { background:#f7f5ef; }
#work .featured-project.v49-case-study {
  border-radius:22px;
  background:#fffcf8;
  box-shadow:0 19px 48px rgba(29,51,36,.085),0 2px 7px rgba(29,51,36,.035);
  border:1px solid rgba(45,71,53,.13);
}
#work .v50-stage {
  --v50-cursor-x:0px;
  --v50-cursor-y:0px;
  --v50-rx:3deg;
  --v50-ry:-8deg;
  --v50-lift:0px;
  --v50-light:45%;
  --v50-shadow-x:12px;
  --v50-shadow-opacity:.30;
  min-height:565px;
  position:relative;
  overflow:hidden;
  perspective:1200px;
  perspective-origin:53% 44%;
  transform-style:preserve-3d;
  background:radial-gradient(ellipse at 48% 35%,#eaf4f6 0%,#dcecf2 31%,#c7dce7 73%,#bfd4df 100%);
  contain:paint;
}
#work .v50-stage::before {
  content:"";z-index:0;pointer-events:none;
  background:radial-gradient(ellipse at 45% 26%,rgba(255,255,255,.55),transparent 53%);
  position:absolute;inset:0;
}
#work .v50-stage::after {
  content:"";position:absolute;left:8%;right:8%;bottom:13%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(85,115,127,.25) 20%,rgba(85,115,127,.22) 80%,transparent);
  pointer-events:none;z-index:0;
}
#work .v50-stage .v49-backplate {
  z-index:1;width:min(68%,358px);max-width:none;
  aspect-ratio:3/4;
  border:1px solid rgba(244,252,249,.56);
  border-radius:14px;
  background:linear-gradient(130deg,rgba(55,108,93,.37),rgba(222,239,233,.14) 54%,rgba(66,119,102,.24));
  box-shadow:0 19px 30px rgba(32,65,68,.17),inset 0 1px 0 rgba(255,255,255,.40);
  transform:translate3d(calc(-50% - 24px),calc(-50% + 18px),-54px) rotateY(-10deg) rotateX(4deg);
  position:absolute;left:50%;top:46%;
  transition:transform .72s cubic-bezier(.17,.78,.23,1);
}
#work .v50-stage .v49-cast-shadow {
  z-index:0;
  width:min(62%,295px);
  height:39px;
  bottom:13.5%;
  left:50%;
  opacity:var(--v50-shadow-opacity);
  background:rgba(25,62,67,.60);
  filter:blur(21px);
  transform:translateX(calc(-50% + var(--v50-shadow-x))) scaleX(1.02);
  transition:transform .45s ease,opacity .45s ease;
}
#work .v50-side-light {
  position:absolute;left:50%;top:46%;width:58%;height:63%;z-index:0;
  transform:translate(-50%,-50%);
  border-radius:50%;pointer-events:none;
  background:radial-gradient(ellipse,rgba(241,248,242,.45),transparent 72%);
}
#work .v49-poster.v50-poster {
  /* Keep artwork pixels untouched: one regular <img> on an actual CSS 3D slab. */
  width:min(66%,340px);
  max-width:none;
  aspect-ratio:3/4;
  position:absolute;
  top:46%;left:50%;
  box-sizing:border-box;
  padding:6px;
  border-radius:12px;
  background:#f9fbfa;
  border:1px solid rgba(252,255,253,.95);
  box-shadow:0 17px 32px rgba(30,58,71,.23),0 5px 12px rgba(30,58,71,.11);
  transform-style:preserve-3d;
  transform-origin:50% 50%;
  transform:translate3d(calc(-50% + var(--v50-cursor-x)),calc(-50% + var(--v50-cursor-y) + var(--v50-lift)),29px) rotateX(var(--v50-rx)) rotateY(var(--v50-ry));
  transition:transform .60s cubic-bezier(.18,.8,.21,1),box-shadow .55s ease;
  will-change:transform;
  -webkit-tap-highlight-color:transparent;
  cursor:pointer;
}
#work .v50-poster::before {
  content:"";position:absolute;inset:0;border-radius:12px;
  transform:translateZ(-11px);background:#819895;
  box-shadow:0 2px 0 #6b8988,0 5px 12px rgba(12,39,45,.18);
  pointer-events:none;
}
#work .v50-poster::after {
  content:"";position:absolute;inset:6px;
  transform:translateZ(5px);border-radius:8px;
  background:radial-gradient(ellipse at var(--v50-light) 10%,rgba(255,255,255,.17),transparent 49%);
  mix-blend-mode:screen;opacity:.70;
  pointer-events:none;
}
#work .v50-poster .v50-card-spine {
  position:absolute;display:block;pointer-events:none;
  background:linear-gradient(90deg,#c4d0d0,#859b9b 55%,#637f80);
  transform-style:preserve-3d;
}
#work .v50-poster .v50-card-spine-left {
  top:0;left:0;height:100%;width:11px;
  transform-origin:0 50%;transform:rotateY(-90deg);
  border-radius:3px 0 0 3px;
  background:linear-gradient(90deg,#7a9490 0%,#b2c8c4 60%,#e7efed 100%);
}
#work .v50-poster .v50-card-spine-right {
  top:0;right:-11px;height:100%;width:11px;
  transform-origin:0 50%;transform:rotateY(90deg);
  border-radius:0 4px 4px 0;
  background:linear-gradient(90deg,#ecf0ed,#b5c6c2 47%,#7c9590);
}
#work .v50-poster .v50-card-spine-bottom {
  bottom:-11px;left:0;width:100%;height:11px;
  transform-origin:50% 0;transform:rotateX(-90deg);
  border-radius:0 0 4px 4px;
  background:linear-gradient(#b1c0bd,#75908b);
}
#work .v50-poster img {
  /* Strict fidelity: no crop effects, no re-paint, no skew or independent image animation. */
  object-fit:cover;
  position:relative;z-index:2;
  transform:translateZ(3px)!important;
  border-radius:7px;
  width:100%;height:100%;
  box-shadow:none!important;
}
#work .v50-stage.is-active .v50-poster,
#work .v50-stage:focus-within .v50-poster {
  box-shadow:0 27px 45px rgba(30,58,71,.27),0 7px 15px rgba(30,58,71,.13);
}
#work .v50-stage.is-active .v49-backplate {
  transform:translate3d(calc(-50% - 26px),calc(-50% + 21px),-56px) rotateY(-7deg) rotateX(4deg);
}
#work .v50-stage .featured-image-label {
  background:rgba(250,252,249,.79);
  border-color:rgba(245,255,249,.75);
  color:#254c5a;
}
#work .v50-stage .visual-footnote {
  bottom:20px;right:22px;
}
#work .v50-story .featured-principles>div {border-radius:9px;background:#f4f5ef}
#work .v50-story .featured-principles>div:focus-within,
#work .v50-story .featured-principles>div:hover { transform:translateY(-2px);background:#eaf0e8;box-shadow:0 7px 16px rgba(31,56,37,.06)}
#work .v50-story .feature-link {
  background:linear-gradient(105deg,#1c3728,#2a5138);
  box-shadow:inset 0 1px rgba(255,255,255,.08);
}
/* Section intro remains editorial and easy to scan; no glossy or glowing ornament. */
#work .work-header{margin-bottom:26px}
#work .v50-stage .v49-full-art{background:#fdfdfa}
@media (max-width:900px) {
  #work .v50-stage{min-height:490px}
  #work .v49-poster.v50-poster{width:min(60%,326px)}
}
@media (max-width:600px) {
  #work .v50-stage{min-height:410px;perspective:970px;perspective-origin:52% 47%}
  #work .v49-poster.v50-poster{width:min(63%,260px);top:46%}
  #work .v50-stage .v49-backplate{top:46%;width:min(65%,270px)}
  #work .v50-stage .v49-cast-shadow{bottom:12%;height:27px;filter:blur(15px)}
  #work .v50-stage .visual-footnote{bottom:14px;right:12px}
  #work .v50-stage::after{bottom:11%}
  #work .v50-story .featured-principles>div{min-height:44px}
}
@media (max-width:380px) {
  #work .v50-stage{min-height:365px}
  #work .v49-poster.v50-poster{width:min(61%,235px)}
  #work .v50-stage .v49-backplate{width:min(63%,238px)}
}
@media (hover:none) {
  #work .v49-poster.v50-poster{cursor:default}
}
@media(prefers-reduced-motion:reduce) {
  #work .v49-poster.v50-poster,
  #work .v50-stage .v49-backplate,
  #work .v50-stage .v49-cast-shadow{transition:none!important}
  #work .v49-poster.v50-poster{transform:translate3d(-50%,-50%,29px) rotateX(0deg) rotateY(0deg)!important}
}

/* One compact interaction hint, aligned with the visual's editorial label. */
#work .v50-gesture-hint{position:absolute;right:22px;top:24px;z-index:6;font-size:9px;letter-spacing:.105em;font-weight:800;color:#345b69;background:rgba(250,252,250,.70);border:1px solid rgba(255,255,255,.65);padding:8px 9px;border-radius:6px;pointer-events:none}
#work .v50-hint-mobile{display:none}
#work .v50-poster{touch-action:pan-y}
@media(hover:none){#work .v50-hint-desktop{display:none}#work .v50-hint-mobile{display:inline}}
@media(max-width:600px){#work .v50-gesture-hint{top:15px;right:13px;font-size:8px;padding:6px 7px}}