/* One camera language for the interface gallery and its screen previews. */
.project-gallery-actions{display:flex;gap:8px;align-items:center}
.project-demo{height:650px;min-height:0;overflow:hidden;perspective:1500px;perspective-origin:50% 46%;isolation:isolate}
.gallery-panel,.system-shot{position:absolute;top:0;left:50%;height:100%;transform-style:preserve-3d;backface-visibility:hidden;transition:transform .7s cubic-bezier(.22,1,.36,1),opacity .58s ease}
.gallery-panel{width:min(82%,1040px)}
.gallery-panel[data-camera-position="center"],.system-shot[data-camera-position="center"]{z-index:4;opacity:1;transform:translateX(-50%) translateZ(0) rotateY(0) scale(1)}
.gallery-panel[data-camera-position="left"],.system-shot[data-camera-position="left"]{z-index:2;opacity:.48;transform:translateX(-112%) translateZ(-190px) rotateY(35deg) scale(.87)}
.gallery-panel[data-camera-position="right"],.system-shot[data-camera-position="right"]{z-index:2;opacity:.48;transform:translateX(12%) translateZ(-190px) rotateY(-35deg) scale(.87)}
.gallery-panel[data-camera-position="far"],.system-shot[data-camera-position="far"]{z-index:1;opacity:.16;transform:translateX(calc(-50% + var(--camera-far-x))) translateZ(-370px) rotateY(var(--camera-far-rotate)) scale(.72);pointer-events:none}
.gallery-portal{height:100%;overflow:hidden;border:1px solid #5d6859;border-radius:12px;background:#121512;box-shadow:0 32px 75px #000b}
.gallery-panel .system-gallery,.gallery-panel .gallery-portal>.mock-app{height:100%}
.gallery-panel-select{position:absolute;inset:0;z-index:5;width:100%;border:0;background:transparent;cursor:pointer}
.gallery-panel-select[hidden]{display:none}
.gallery-panel-select:focus-visible,.project-demo:focus-visible,.system-camera:focus-visible{outline:2px solid var(--green);outline-offset:-3px}
.system-camera{position:relative;height:530px;overflow:hidden;perspective:1250px;perspective-origin:50% 47%;isolation:isolate}
.system-shot{width:88%}
.system-shot-content,.system-shot .mock-app{height:100%;min-height:0}
.system-shot .mock-layout{min-height:calc(100% - 44px)}
.system-shot[data-camera-position="left"]{transform:translateX(-107%) translateZ(-155px) rotateY(34deg) scale(.88)}
.system-shot[data-camera-position="right"]{transform:translateX(7%) translateZ(-155px) rotateY(-34deg) scale(.88)}
.system-shot[data-camera-position="far"]{transform:translateX(calc(-50% + var(--camera-far-x))) translateZ(-300px) rotateY(var(--camera-far-rotate)) scale(.75)}
.system-shot:not([data-camera-position="center"]){pointer-events:none}
.case-card-feature .system-camera{height:275px}
.case-card-feature .system-shot{width:100%}
.case-card-feature .system-shot[data-camera-position="left"],.case-card-feature .system-shot[data-camera-position="right"]{opacity:.12;transform:translateX(calc(-50% + var(--camera-side-x))) translateZ(-180px) rotateY(var(--camera-far-rotate)) scale(.88)}
.case-card-feature .system-shot[data-camera-position="far"]{opacity:0}
/* The same centered photographic artwork fills desktop, tablet and phone. */
.opening .collage-grid{display:block;transform:scale(var(--photo-scale));transform-origin:50% 50%;will-change:auto}
body.hero-photo-covered .opening .collage-grid{visibility:hidden;transform:none}
.opening .collage-grid>.collage-art{display:none!important}
.opening .collage-grid>.collage-art-team{display:block!important;position:absolute;inset:0;width:100%;height:100%}
.opening .collage-grid>.collage-art-team img{object-position:50% 50%;filter:none}
.opening .collage-grid::after{display:none}
.opening .collage-portal{left:50%;top:50%}
/* Keep the IMG for decoding readiness. Paint both the original vector and
   its emulsion with CSS image geometry: object-fit and mask-size round their
   contain boxes differently, and the mismatch becomes a white rim on zoom. */
.opening .collage-portal img{visibility:hidden;transform:none}
.opening .collage-portal::before{content:'';position:absolute;width:57%;height:78%;left:50%;top:50%;z-index:1;pointer-events:none;opacity:var(--logo-vector-opacity,0);transform:translate(-50%,-50%) scale(var(--logo-scale));transform-origin:center;background:url('assets/isotipo-hannah.svg') center / contain no-repeat}
/* Use the emulsion already in the finished photo, registered to the mark.
   Texture and original vector share the same material-space transform. */
.opening .collage-logo-grain{position:absolute;width:57%;height:78%;left:50%;top:50%;z-index:2;pointer-events:none;opacity:var(--logo-vector-opacity,0);transform:translate(-50%,-50%) scale(var(--logo-scale));transform-origin:center;background:url('assets/logo-emulsion-landscape.webp?v=2') center / contain no-repeat;mix-blend-mode:multiply;mask:url('assets/isotipo-hannah.svg') center / contain no-repeat;-webkit-mask:url('assets/isotipo-hannah.svg') center / contain no-repeat}
body.hero-grain-covered .opening .collage-logo-grain{visibility:hidden}
@media(max-width:1024px){
  .project-demo{height:580px}
  .gallery-panel{width:88%}
  .system-camera{height:470px}
}
@media(max-width:700px){
  .project-demo{height:445px;perspective:900px}
  .gallery-panel{width:95%}
  .gallery-panel[data-camera-position="left"]{transform:translateX(-103%) translateZ(-140px) rotateY(40deg) scale(.9)}
  .gallery-panel[data-camera-position="right"]{transform:translateX(3%) translateZ(-140px) rotateY(-40deg) scale(.9)}
  .gallery-panel[data-camera-position="far"]{opacity:0}
  .system-camera{height:350px;perspective:750px}
  .system-shot{width:96%}
  .system-shot[data-camera-position="left"]{transform:translateX(-102%) translateZ(-115px) rotateY(38deg) scale(.9)}
  .system-shot[data-camera-position="right"]{transform:translateX(2%) translateZ(-115px) rotateY(-38deg) scale(.9)}
  .system-shot[data-camera-position="far"]{opacity:0}
  .project-gallery-actions{gap:5px}
  /* The approved phrase and its material travel with the photograph.
     Keep its colors here so a later treatment only changes these variables. */
  .collage-motto{--motto-color:#f2f3ec;--motto-accent:#c7ff1e;--motto-grain-opacity:.12;position:absolute;z-index:3;left:50%;top:76%;width:90%;margin:0;transform:translate(-50%,-50%) perspective(850px) rotateX(10deg);transform-origin:center;color:var(--motto-color);font:clamp(24px,7.45vw,46px)/1.12 Righteous,Arial,sans-serif;letter-spacing:-.018em;text-align:center;isolation:isolate;pointer-events:none}
  .collage-motto-line{display:block;white-space:nowrap}
  .collage-motto-word{--motto-ink:var(--motto-color);position:relative;display:inline-block;isolation:isolate;color:var(--motto-ink);-webkit-text-fill-color:var(--motto-ink)}
  .collage-motto-accent{--motto-ink:var(--motto-accent)}
  .collage-motto-shade{--motto-veil:.73;position:absolute;z-index:2;left:50%;top:76%;width:162%;height:7.64em;font-size:clamp(24px,7.45vw,46px);transform:translate(-50%,-50%);background:radial-gradient(ellipse closest-side at center,rgba(3,9,6,var(--motto-veil)) 0%,rgba(3,9,6,var(--motto-veil)) 66%,rgba(3,9,6,0) 100%);pointer-events:none}
  .collage-motto-grain{display:none}
  /* Keep the real glyphs opaque. Grain is optional, bounded decoration:
     failed image decoding or text clipping cannot remove the readable ink. */
  @supports ((background-clip:text) or (-webkit-background-clip:text)){
    .collage-motto-grain{display:block;position:absolute;inset:0;z-index:1;opacity:var(--motto-grain-opacity);background-image:url('assets/logo-emulsion-portrait.webp?v=2');background-size:320vw auto;background-repeat:repeat;background-position:43% 47%;background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent;mix-blend-mode:multiply;pointer-events:none;user-select:none}
  }
}
@media(min-width:701px){.collage-motto,.collage-motto-shade{display:none}}
@media(prefers-reduced-motion:reduce){
  .gallery-panel,.system-shot{transition:none}
  .gallery-panel:not([data-camera-position="center"]),.system-shot:not([data-camera-position="center"]){visibility:hidden}
}

@media(max-aspect-ratio:1/1){.opening .collage-logo-grain{background-image:url('assets/logo-emulsion-portrait.webp?v=2')}}