/* PRINTGATS · una fotografía recortada en piezas rectangulares que se recompone. */
.hero-story{
  --cut-complete:0;
  --cut-visibility:1;
  --headline-visibility:1;
}
.hero-story__intro{opacity:1}
.hero-story__eyebrow,.hero-story__headline{opacity:var(--headline-visibility);transition:opacity .08s linear}
.hero-story__fragments{z-index:5;pointer-events:none}

.hero-cut{
  position:absolute;
  left:50%;
  top:51%;
  width:min(35vw,520px);
  height:min(66vh,690px);
  margin:0;
  overflow:visible;
  opacity:var(--cut-visibility);
  perspective:1200px;
  transform:translate(-50%,-50%);
  transform-style:preserve-3d;
  isolation:isolate;
  will-change:opacity;
}
.hero-cut__slices,.hero-cut__complete{position:absolute;inset:0;width:100%;height:100%}
.hero-cut__slices{
  z-index:2;
  opacity:calc(1 - var(--cut-complete));
  transform:translateZ(0);
  transform-style:preserve-3d;
  will-change:opacity;
}
.image-slice{
  position:absolute;
  display:block;
  overflow:hidden;
  border:0;
  background:#aab1bd;
  backface-visibility:hidden;
  clip-path:none;
  contain:layout paint;
  transform-origin:center;
  will-change:transform,filter;
}
.image-slice::after{
  position:absolute;
  inset:0;
  content:"";
  pointer-events:none;
  background:linear-gradient(135deg,rgba(255,255,255,.34),transparent 20%,transparent 80%,rgba(22,29,39,.12));
  mix-blend-mode:soft-light;
  opacity:var(--slice-loose,1);
}
.image-slice img{position:absolute;display:block;max-width:none;object-fit:cover;backface-visibility:hidden}

/* Las siete regiones cubren exactamente el 100% de la misma fotografía. */
.image-slice--a{left:0;top:0;width:45%;height:40%}.image-slice--a img{left:0;top:0;width:222.222222%;height:250%}
.image-slice--b{left:45%;top:0;width:55%;height:40%}.image-slice--b img{left:-81.818182%;top:0;width:181.818182%;height:250%}
.image-slice--c{left:0;top:40%;width:30%;height:35%}.image-slice--c img{left:0;top:-114.285714%;width:333.333333%;height:285.714286%}
.image-slice--d{left:30%;top:40%;width:40%;height:35%}.image-slice--d img{left:-75%;top:-114.285714%;width:250%;height:285.714286%}
.image-slice--e{left:70%;top:40%;width:30%;height:60%}.image-slice--e img{left:-233.333333%;top:-66.666667%;width:333.333333%;height:166.666667%}
.image-slice--f{left:0;top:75%;width:35%;height:25%}.image-slice--f img{left:0;top:-300%;width:285.714286%;height:400%}
.image-slice--g{left:35%;top:75%;width:35%;height:25%}.image-slice--g img{left:-100%;top:-300%;width:285.714286%;height:400%}

.hero-cut__complete{
  z-index:3;
  display:block;
  object-fit:cover;
  border-radius:clamp(10px,1.35vw,22px);
  opacity:var(--cut-complete);
  pointer-events:none;
  will-change:opacity;
}
.hero-story[data-cut-locked] .hero-cut{overflow:hidden;border-radius:clamp(10px,1.35vw,22px)}
.hero-story[data-cut-locked] .hero-cut__slices{will-change:auto}
.hero-story[data-cut-locked] .image-slice{filter:none!important;will-change:auto}

.hero-story__feature{opacity:clamp(0,calc((var(--story-progress) - .62)*4.25),1);transform:none}
.hero-story__object{transform:translate(-50%,-50%) rotateX(calc(var(--story-y)*-2deg)) rotateY(calc(var(--story-x)*3deg));clip-path:none}
.hero-story__object img{transform:scale(1) translate3d(calc(var(--story-x)*-8px),calc(var(--story-y)*-7px),0)}

/* Fondo ambiental: una deriva casi monocromática y muy lenta. */
.hero-story__stage{
  background:#d3d9e5;
  isolation:isolate;
}
.hero-story__stage::before{z-index:1;opacity:.42}
.hero-story__stage::after{
  position:absolute;
  z-index:0;
  inset:-20%;
  content:"";
  pointer-events:none;
  background:
    radial-gradient(ellipse at 18% 30%,rgba(247,242,236,.72) 0,rgba(247,242,236,.2) 27%,transparent 52%),
    radial-gradient(ellipse at 76% 22%,rgba(188,201,216,.48) 0,rgba(188,201,216,.14) 30%,transparent 56%),
    radial-gradient(ellipse at 72% 80%,rgba(226,211,205,.45) 0,rgba(226,211,205,.12) 26%,transparent 52%),
    radial-gradient(ellipse at 30% 78%,rgba(203,213,223,.42) 0,transparent 50%);
  filter:blur(48px) saturate(.78);
  opacity:.7;
  transform:translate3d(-2%,-1%,0) scale(1.04);
  animation:heroAmbientDrift 34s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes heroAmbientDrift{
  0%{transform:translate3d(-2.5%,-1.5%,0) scale(1.04) rotate(-.5deg)}
  50%{transform:translate3d(2%,1.5%,0) scale(1.09) rotate(.6deg)}
  100%{transform:translate3d(-.5%,2.5%,0) scale(1.06) rotate(-.2deg)}
}

/* El resultado final usa la misma fotografía ya ensamblada: sin salto de color ni paralaje. */
.hero-story__object{opacity:0;pointer-events:none}
.hero-story[data-cut-locked] .hero-cut,
.hero-story[data-cut-locked] .hero-cut__complete{
  transform:translate(-50%,-50%);
  filter:none;
}
.hero-story[data-cut-locked] .hero-cut__complete{transform:none}
.hero-story[data-cut-locked] .hero-story__object,
.hero-story[data-cut-locked] .hero-story__object img{transform:none!important}

/* El concepto final se lee completo por delante de la imagen, como un contorno editorial. */
.hero-story__giant{
  z-index:7;
  right:var(--pad);
  left:var(--pad);
  top:9vh;
  width:auto;
  font-size:clamp(64px,9.4vw,150px);
  letter-spacing:-.055em;
  text-align:center;
  transform:none;
  color:rgba(17,19,24,.06);
  -webkit-text-stroke:clamp(1px,.1vw,2px) rgba(17,19,24,.62);
  text-stroke:clamp(1px,.1vw,2px) rgba(17,19,24,.62);
  opacity:1;
  pointer-events:none;
}

@media(prefers-reduced-motion:reduce){
  .hero-story__stage::after{animation:none;transform:none}
}

@media(max-width:900px){.hero-cut{top:47%;width:72vw;height:55vh}.hero-story__feature{transform:none}}
@media(max-width:900px){.hero-story__giant{top:12vh;font-size:clamp(54px,11vw,92px)}}
@media(max-width:520px){.hero-cut{width:76vw;height:55vh}.hero-story__giant{top:14vh;font-size:14vw}}
@media(prefers-reduced-motion:reduce){
  .hero-story__eyebrow,.hero-story__headline{opacity:1}
  .hero-cut{display:none}
  .hero-story__feature{opacity:.22}
  .hero-story__object{right:5vw;left:auto;top:52%;width:30vw;height:58vh;transform:translateY(-50%)}
}