/* IUBOS V7 - true-to-photo hoisting scene. Exact selected photograph is the finishing frame. */
.crane-photo-hero{position:relative;isolation:isolate;background:#061525;overflow:hidden}
.crane-photo-hero .port-environment{position:absolute;inset:0;z-index:0;background:radial-gradient(ellipse at 72% 65%,#152b40,#061525 75%);pointer-events:none}
.crane-photo-hero .port-backdrop{position:absolute;inset:0;background-image:url('../img/crane-night-background.webp')!important;background-repeat:no-repeat!important;background-size:var(--crane-photo-width,cover)!important;background-position:var(--crane-photo-x,center) var(--crane-photo-y,center)!important;transform:none!important;animation:none!important;filter:none!important;transition:none!important}
.crane-photo-hero .port-glow,.crane-photo-hero .port-gridlines,.crane-photo-hero .port-shimmer{display:none!important}
.crane-photo-hero .crane-photo-stage{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1;contain:layout paint}
.crane-photo-hero .crane-photo-cargo{position:absolute;top:0;left:0;width:0;height:0;z-index:2;transform:translate3d(0,calc(-1 * var(--crane-travel,116px)),0);will-change:transform;}
.crane-photo-hero.crane-ready .crane-photo-cargo{animation:craneHoistDown 4.4s .45s cubic-bezier(.3,0,.14,1) both}
.crane-photo-hero .crane-photo-load-image{width:100%;height:100%;display:block;object-fit:fill;filter:drop-shadow(0 18px 15px rgba(0,0,0,.19));pointer-events:none;user-select:none}
.crane-photo-hero .crane-photo-ropes{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:1;pointer-events:none}
.crane-photo-hero .crane-rope{stroke:#a0a2a4;stroke-width:1.8;stroke-linecap:round;opacity:.85;vector-effect:non-scaling-stroke;filter:drop-shadow(1px 0px 1px #060b13)}
.crane-photo-hero .crane-rope:nth-child(2n){stroke:#49525b;stroke-width:2.5}
.crane-photo-hero .crane-photo-final{position:absolute;inset:0;background-image:url('../img/crane-night-original.webp');background-repeat:no-repeat;background-size:var(--crane-photo-width,cover);background-position:var(--crane-photo-x,center) var(--crane-photo-y,center);opacity:0;z-index:4;pointer-events:none}
.crane-photo-hero.crane-ready .crane-photo-final{animation:cranePhotoFinal 4.4s .45s linear both}
/* This left-side gradient is intentional: the original image remains exact on the right and legible on the left. */
.crane-photo-hero::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:2;background:linear-gradient(90deg,rgba(3,12,24,.91) 0%,rgba(4,14,27,.83) 25%,rgba(5,17,32,.55) 40%,rgba(6,18,31,.06) 64%,transparent 86%)}
.crane-photo-hero .hero-v3-layout{position:relative;z-index:4}
.crane-photo-hero .hero-story{position:relative;z-index:5;pointer-events:auto}
.crane-photo-hero .hero-lower{position:relative;z-index:6;pointer-events:auto}
@keyframes craneHoistDown{0%{transform:translate3d(0,calc(-1 * var(--crane-travel,116px)),0)}71%{transform:translate3d(0,-10px,0)}90%{transform:translate3d(0,1.5px,0)}100%{transform:translate3d(0,0,0)}}
@keyframes cranePhotoFinal{0%,92%{opacity:0}100%{opacity:1}}
@media(max-width:850px){.crane-photo-hero{min-height:850px}.crane-photo-hero::after{background:linear-gradient(180deg,rgba(3,12,24,.98) 0%,rgba(3,12,24,.94) 29%,rgba(3,12,24,.72) 54%,rgba(3,12,24,.08) 76%,rgba(3,12,24,.10) 100%)}.crane-photo-hero .hero-v3-layout{min-height:850px}.crane-photo-hero .hero-lower{bottom:16px}}
@media(max-width:600px){.crane-photo-hero{min-height:790px}.crane-photo-hero .hero-v3-layout{min-height:790px}.crane-photo-hero .hero-lower{gap:14px}}
@media(prefers-reduced-motion:reduce){.crane-photo-hero .crane-photo-cargo{animation:none!important;transform:none!important}.crane-photo-hero .crane-photo-final{animation:none!important;opacity:1!important}}
/* Keep replay/scroll controls in their original bottom-left position on wide screens. */
@media(min-width:851px){.crane-photo-hero .hero-lower{position:absolute;left:0;right:0;bottom:18px;justify-content:flex-start;width:max-content;max-width:100%}}