.poster {
  position: relative;
  isolation: isolate;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #202726;
}
.texture {
  position: absolute; z-index: 0; inset: -3%; pointer-events: none;
  background: url("assets/foto-19.webp") center / cover no-repeat;
  transform: translate3d(var(--px, 0px), var(--py, 0px), 0) scale(1.04);
  will-change: auto;
}
.poster::before {
  content: ""; position: absolute; z-index: 2; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 48% 76% at 82% 25%, rgba(230,239,225,.2), transparent 74%), linear-gradient(90deg, rgba(3,6,7,.08) 0%, rgba(3,6,7,.04) 39%, transparent 67%, rgba(3,7,9,.1) 100%), linear-gradient(0deg, rgba(3,6,7,.13), transparent 36%);
}
.poster::after {
  content: ""; position: absolute; z-index: 15; inset: 0; pointer-events: none; opacity: .1; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.28'/%3E%3C/svg%3E");
}
.hero-photo { position: absolute; z-index: 1; left: -2%; top: -2%; width: 50%; height: 104%; -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 66%, transparent 100%); mask-image: linear-gradient(90deg, #000 0%, #000 66%, transparent 100%); transform: translate3d(var(--px, 0px), var(--py, 0px), 0); will-change: auto; }
.hero-photo img { display: block; width: 100%; height: 100%; object-fit: cover; filter: brightness(.74) saturate(.79) contrast(1.06); }
.hero-photo--cyclist img { object-position: 70% center; }
.hero-photo--hero img { object-position: 72% center; }
.hero-photo--home img { object-position: 40% center; }
.hero-photo--after img { object-position: center; }
.photo-inset {
  position: absolute; z-index: 5; left: 4.5%; bottom: 6%; width: 25%; height: 29%; overflow: hidden;
  border: 1px solid rgba(240,240,232,.22); border-radius: 18px; background: #111;
  box-shadow: 0 20px 45px rgba(0,0,0,.37);
  transform: translate3d(var(--px, 0px), var(--py, 0px), 0) rotate(var(--pr, 0deg)) scale(var(--ps, 1));
  will-change: auto;
}
.photo-inset img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 60% center; filter: brightness(.89) saturate(.87); }
.detail-inset { display: none; }
.screen {
  position: absolute; z-index: 6; aspect-ratio: 1290 / 2796; padding: .32%; overflow: hidden;
  border: 1px solid rgba(255,255,255,.15); border-radius: 8.5% / 3.9%;
  background: #0b0d0d;
  box-shadow: 0 23px 48px rgba(0,0,0,.58), 0 3px 10px rgba(0,0,0,.24);
  transform: translate3d(var(--px, 0px), var(--py, 0px), 0) rotate(calc(var(--r, 0deg) + var(--pr, 0deg))) scale(var(--ps, 1));
  transform-origin: 50% 55%;
  will-change: auto;
}
.screen img { display: block; width: 100%; height: 100%; object-fit: fill; border-radius: 7.6% / 3.5%; background: #050606; }
.screen--hero { top: 1%; left: 40%; width: 25.5%; z-index: 9; }
.screen--lower-left { --r: -3deg; top: 10%; left: 64%; width: 20.5%; z-index: 7; }
.screen--lower-middle { --r: 4deg; top: 18%; right: 2%; width: 17.5%; z-index: 5; }
.screen--lower-right { display: none; }
.lower-light {
  position: absolute; z-index: 1; right: -8%; top: -19%; width: 70%; height: 130%; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(230,239,225,.13), transparent 65%); filter: blur(24px);
  transform: translate3d(var(--px, 0px), var(--py, 0px), 0);
  will-change: auto;
}
.poster--gold .lower-light { background: radial-gradient(ellipse, rgba(235,221,186,.15), transparent 65%); }
.poster--mint .lower-light { background: radial-gradient(ellipse, rgba(215,236,222,.16), transparent 65%); }
.poster--copper .lower-light { background: radial-gradient(ellipse, rgba(240,211,190,.14), transparent 65%); }

/* Keep the cyclist's face in the clear left area, including parallax travel. */
.poster--overview .hero-photo {
  width:57%;
  -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 77%,transparent 100%);
  mask-image:linear-gradient(90deg,#000 0%,#000 77%,transparent 100%);
}
.poster--overview .hero-photo img {
  object-position:94% center;
  filter:brightness(.97) saturate(.94) contrast(1.03);
}
.poster--overview .screen--hero { left:47%; top:5%; width:23%; }
.poster--overview .screen--lower-left { left:69%; top:13%; width:19%; }
.poster--overview .screen--lower-middle { right:1.5%; top:22%; width:16.5%; }
.poster--overview .photo-inset { left:3.5%; bottom:5%; width:21%; height:24%; }

/* The source portraits face right; crop toward their right edge without mirroring.
   Their faces stay left of 40%, while the primary screen begins at 48%.
   Horizontal parallax stays below 1.2% of the poster; phones travel vertically. */
#showcase-capital .hero-photo,
#showcase-movimento .hero-photo {
  width:57%;
  -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 78%,transparent 100%);
  mask-image:linear-gradient(90deg,#000 0%,#000 78%,transparent 100%);
}
#showcase-capital .hero-photo img {
  object-position:96% center;
  filter:brightness(.97) saturate(.94) contrast(1.03);
}
#showcase-movimento .hero-photo img {
  object-position:96% center;
  filter:brightness(.95) saturate(.93) contrast(1.03);
}
#showcase-capital .screen--hero,
#showcase-movimento .screen--hero { left:48%; top:5%; width:23%; }
#showcase-capital .screen--lower-left,
#showcase-movimento .screen--lower-left { left:70%; top:13%; width:18.5%; }
#showcase-capital .screen--lower-middle,
#showcase-movimento .screen--lower-middle { right:1%; top:22%; width:16.5%; }

/* Keep the entire couple in the photograph. A portrait crop cannot hold both
   faces. The full 16:9 photo ends at 54%; screens start at 59%, including travel. */
#showcase-ritmo .hero-photo {
  left:0;
  top:21%;
  width:54%;
  height:54%;
  overflow:hidden;
  border-radius:10px;
  -webkit-mask-image:none;
  mask-image:none;
}
#showcase-ritmo .hero-photo img {
  object-fit:contain;
  object-position:center;
  filter:brightness(.97) saturate(.94) contrast(1.03);
}
#showcase-ritmo .screen--hero { left:59%; top:6%; width:21%; }
#showcase-ritmo .screen--lower-left { left:77.4%; top:15%; width:17.5%; }
#showcase-ritmo .screen--lower-middle { right:.8%; top:24%; width:15.1%; }

@media (prefers-reduced-motion: reduce) {
  .texture, .hero-photo, .photo-inset, .screen, .lower-light { transform: none; will-change: auto; }
}

.poster { margin:0; }
.poster .hero-photo { object-position:70% center; }
.poster img { max-width:none; }