/* One portrait, two typographic planes. Scroll opens space for the visitor. */
.aveiro-opening { --reveal:clamp(0,calc((var(--opening-p) - .24)*2.5),1); }
.opening-stage { background:#f5f3ed; }
.masthead { background:#f5f3ed; }
.opening-images { z-index:1; }
.opening-title { inset:0; text-align:left; z-index:auto; }
.opening-title>p { position:absolute; top:16%; left:var(--gutter); margin:0; font-size:13px; line-height:1.6; z-index:5; }
.opening-title>p>span { display:block; color:var(--muted); font-size:10px; margin-top:3px; }
.aveiro-opening h1 { display:contents; }
.aveiro-opening h1 .hero-line-back { position:absolute; top:27%; left:var(--gutter); right:var(--gutter); z-index:0; font-size:clamp(58px,8.15vw,150px); line-height:1; letter-spacing:-.075em; font-weight:450; color:var(--ink); white-space:nowrap; }
.aveiro-opening h1 .hero-line-front { position:absolute; top:64%; left:var(--gutter); right:var(--gutter); z-index:4; font-size:clamp(65px,10.1vw,180px); line-height:1; letter-spacing:-.075em; font-weight:450; color:var(--blue); white-space:nowrap; }
.opening-portrait { top:22%; left:60%; width:70%; height:65%; z-index:2; overflow:visible; box-shadow:none; mask-image:linear-gradient(#000 0 80%,transparent 100%); }
.opening-portrait img { width:100%; height:100%; object-fit:contain; object-position:center bottom; }
.opening-landscape { inset:30% 22% 17% 38%; clip-path:ellipse(49% 49% at 50% 50%); opacity:.15; background:#d6dce2; }
.opening-landscape img { width:100%; height:100%; object-fit:cover; object-position:50% 50%; transform:none; filter:grayscale(.6); }
.opening-location { position:absolute; z-index:3; top:45%; left:var(--gutter); font-size:11px; line-height:1.8; color:var(--muted); }
.opening-caption { bottom:3%; left:var(--gutter); right:var(--gutter); background:transparent; border-top:1px solid #203b6526; padding:20px 0 0; gap:30px; }
.opening-caption-copy p { font-size:16px; line-height:1.6; letter-spacing:-.025em; }
.opening-contact { gap:45px; font-size:12px; }
.opening-credit { bottom:1%; right:var(--gutter); background:transparent; font-size:6px; opacity:.65; padding:0; }
.is-opening-motion .opening-title { transform:none; opacity:1; }
.is-opening-motion .opening-title>p { opacity:calc(1 - var(--reveal)); transform:translateY(calc(var(--reveal)*-30px)); }
.is-opening-motion .hero-line-back { transform:translateX(calc(var(--reveal)*-12%)) translateY(calc(var(--reveal)*-6svh)); opacity:calc(1 - var(--reveal)); }
.is-opening-motion .hero-line-front { transform:translateX(calc(var(--reveal)*-10%)) translateY(calc(var(--reveal)*8svh)); opacity:calc(1 - var(--reveal)); }
.is-opening-motion .opening-portrait { transform:translateX(calc(-50% + var(--reveal)*22%)) scale(calc(1 - var(--reveal)*.06)); }
.is-opening-motion .opening-landscape { clip-path:ellipse(49% 49% at 50% 50%); opacity:calc(.15 + var(--reveal)*.12); transform:translateX(calc(var(--reveal)*8%)); }
.is-opening-motion .opening-landscape img { transform:scale(calc(1 + var(--reveal)*.06)); }
.is-opening-motion .opening-location { opacity:calc(1 - var(--reveal)); }
.is-opening-motion .opening-caption { padding:20px 0 0; transform:none; box-shadow:none; bottom:3%; }
.is-opening-motion .opening-caption-copy { height:58px; }
.is-opening-motion .opening-follow { top:27%; left:var(--gutter); right:45%; text-align:left; z-index:5; opacity:var(--reveal); transform:translateY(calc((1 - var(--reveal))*35px)); }
.opening-follow h2 { font-size:clamp(34px,4.4vw,70px); line-height:1.12; }
.opening-follow>a { font-size:12px; padding-block:10px; }
@media(min-width:761px) and (max-height:740px) {
 .opening-title>p { top:15%; }
 .aveiro-opening h1 .hero-line-back { top:26%; font-size:7.8vw; }
 .aveiro-opening h1 .hero-line-front { top:61%; font-size:9.5vw; }
 .opening-portrait { top:20%; height:64%; }
 .opening-location { top:44%; }
 .opening-caption-copy p { font-size:14px; }
}
@media(max-width:760px) {
 .opening-title { inset:0; }
 .opening-title>p { top:14%; left:24px; font-size:12px; max-width:none; }
 .opening-title>p>span { font-size:9px; }
 .aveiro-opening h1 .hero-line-back { top:27%; left:24px; right:24px; font-size:9.05vw; letter-spacing:-.065em; }
 .aveiro-opening h1 .hero-line-front { top:66%; left:24px; right:24px; font-size:12.3vw; letter-spacing:-.065em; }
 .opening-portrait { top:30%; height:44%; width:115%; left:54%; mask-image:linear-gradient(#000 0 83%,transparent 100%); }
 .opening-landscape { inset:35% 8% 26% 20%; clip-path:ellipse(49% 49% at 50% 50%); }
 .opening-location { top:21%; left:auto; right:24px; font-size:9px; line-height:1.6; text-align:right; }
 .opening-caption,.is-opening-motion .opening-caption { bottom:4%; left:24px; right:24px; padding:15px 0 0; display:flex; flex-wrap:wrap; gap:6px; }
 .opening-caption-copy { flex-basis:100%; }
 .opening-caption-copy p { font-size:14px; }
 .is-opening-motion .opening-caption-copy { height:48px; }
 .opening-contact { margin-top:0; font-size:11px; padding:8px 0; gap:35px; }
 .opening-credit { bottom:1%; right:24px; font-size:5px; }
 .is-opening-motion .opening-follow { left:24px; right:24px; top:17%; }
 .opening-follow h2 { font-size:9vw; max-width:14ch; }
 .opening-follow>a { font-size:10px; margin-top:8px; }
 .is-opening-motion .opening-portrait { transform:translateX(calc(-50% + var(--reveal)*8%)) translateY(calc(var(--reveal)*5svh)) scale(calc(1 - var(--reveal)*.04)); }
 .is-opening-motion .hero-line-back { transform:translateY(calc(var(--reveal)*-5svh)); }
 .is-opening-motion .hero-line-front { transform:translateY(calc(var(--reveal)*6svh)); }
}
/* Reduced motion, short windows and no JS keep the same cover in normal flow. */
.aveiro-opening:not(.is-opening-motion) .opening-stage { display:block; height:850px; min-height:0; padding:0; }
.aveiro-opening:not(.is-opening-motion) .opening-title { position:absolute; margin:0; }
.aveiro-opening:not(.is-opening-motion) .opening-images { position:absolute; inset:0; height:auto; }
.aveiro-opening:not(.is-opening-motion) .opening-portrait { top:22%; height:65%; width:70%; }
.aveiro-opening:not(.is-opening-motion) .opening-landscape { inset:30% 22% 17% 38%; clip-path:ellipse(49% 49% at 50% 50%); }
.aveiro-opening:not(.is-opening-motion) .opening-caption { position:absolute; padding:20px 0 0; }
.aveiro-opening:not(.is-opening-motion) .opening-next { display:none; }
.aveiro-opening:not(.is-opening-motion) .opening-credit { position:absolute; margin:0; }
@media(max-width:760px) {
 .aveiro-opening:not(.is-opening-motion) .opening-stage { height:780px; }
 .aveiro-opening:not(.is-opening-motion) .opening-portrait { top:30%; height:44%; width:115%; }
 .aveiro-opening:not(.is-opening-motion) .opening-landscape { inset:35% 8% 26% 20%; }
 .aveiro-opening:not(.is-opening-motion) .opening-caption { padding:15px 0 0; }
}
@media(min-width:761px) {
 .aveiro-opening h1 .hero-line-back { top:25%; font-size:7.3vw; }
 .opening-portrait { left:68%; top:23%; height:64%; }
 .opening-landscape { inset:30% 15% 17% 46%; }
 .is-opening-motion .opening-portrait { transform:translateX(calc(-50% + var(--reveal)*12%)) scale(calc(1 - var(--reveal)*.06)); }
 .aveiro-opening:not(.is-opening-motion) .opening-portrait { top:23%; height:64%; }
 .aveiro-opening:not(.is-opening-motion) .opening-landscape { inset:30% 15% 17% 46%; }
}
.aveiro-opening { --depart:clamp(0,calc(var(--opening-p)*4),1); }
.is-opening-motion .opening-title>p,
.is-opening-motion .hero-line-back,
.is-opening-motion .hero-line-front,
.is-opening-motion .opening-location { opacity:calc(1 - var(--depart)); }
.opening-landscape,
.is-opening-motion .opening-landscape,
.aveiro-opening:not(.is-opening-motion) .opening-landscape {
 clip-path:none;
 mask-image:radial-gradient(ellipse at 55% 55%,#000 10%,transparent 70%);
}

/* Scroll score: separate the type, approach the portrait, open the conversation. */
.is-opening-motion { --hero-depart:0; --hero-arrive:0; --hero-line-two:0; --hero-depth:0; --hero-settle:0; }
.is-opening-motion .opening-stage::before { content:""; position:absolute; inset:0; background:#dce5f4; opacity:calc(var(--hero-depth)*.38); pointer-events:none; }
.is-opening-motion .opening-title>p { opacity:calc(1 - var(--hero-depart)); transform:translateY(calc(var(--hero-depart)*-4svh)); }
.is-opening-motion .hero-line-back { opacity:calc(1 - var(--hero-depart)); transform:translate3d(calc(var(--hero-depart)*-23vw),calc(var(--hero-depart)*-9svh),0) scale(calc(1 - var(--hero-depart)*.08)); transform-origin:left center; }
.is-opening-motion .hero-line-front { opacity:calc(1 - var(--hero-depart)); transform:translate3d(calc(var(--hero-depart)*-12vw),calc(var(--hero-depart)*12svh),0) scale(calc(1 + var(--hero-depart)*.20)); transform-origin:left center; }
.is-opening-motion .opening-location { opacity:calc(1 - var(--hero-depart)); transform:translateY(calc(var(--hero-depart)*-2svh)); }
.is-opening-motion .opening-portrait { transform:translate3d(calc(-50% + var(--hero-depth)*10%),calc(var(--hero-depth)*-2svh + var(--hero-settle)*2svh),0) scale(calc(1 + var(--hero-depth)*.19 - var(--hero-settle)*.08)); transform-origin:50% 85%; }
.is-opening-motion .opening-landscape { opacity:calc(.15 + var(--hero-depth)*.16); transform:translate3d(calc(var(--hero-depth)*-7vw),calc(var(--hero-depth)*-3svh),0) scale(calc(1 + var(--hero-depth)*.32)); }
.is-opening-motion .opening-landscape img { transform:none; }
.is-opening-motion .opening-follow { opacity:1; transform:none; top:28%; right:40%; }
.opening-follow h2 .follow-line { display:block; overflow:hidden; padding-bottom:.10em; margin-bottom:-.10em; color:var(--ink); }
.opening-follow h2 .follow-line:last-child { color:var(--blue); }
.opening-follow h2 .follow-line>span { display:block; color:inherit; }
.is-opening-motion .opening-follow h2 .follow-line:first-child>span { transform:translateY(calc((1 - var(--hero-arrive))*115%)); }
.is-opening-motion .opening-follow h2 .follow-line:last-child>span { transform:translateY(calc((1 - var(--hero-line-two))*115%)); }
.is-opening-motion .opening-follow>a { opacity:var(--hero-line-two); transform:translateY(calc((1 - var(--hero-line-two))*20px)); }
@media(max-width:760px) {
 .is-opening-motion .hero-line-back { transform:translate3d(calc(var(--hero-depart)*-15vw),calc(var(--hero-depart)*-8svh),0); }
 .is-opening-motion .hero-line-front { transform:translate3d(calc(var(--hero-depart)*-18vw),calc(var(--hero-depart)*9svh),0) scale(calc(1 + var(--hero-depart)*.12)); }
 .is-opening-motion .opening-portrait { transform:translate3d(calc(-50% + var(--hero-depth)*6%),calc(var(--hero-depth)*7svh - var(--hero-settle)*1svh),0) scale(calc(1 + var(--hero-depth)*.13 - var(--hero-settle)*.05)); }
 .is-opening-motion .opening-follow { top:15%; right:24px; }
 .is-opening-motion .opening-landscape { transform:translate3d(calc(var(--hero-depth)*-5vw),calc(var(--hero-depth)*3svh),0) scale(calc(1 + var(--hero-depth)*.2)); }
}