/* Opening sequence for full-screen heroes.
   hero-intro.js sets html.intro before first paint (not for reduced motion);
   without it every [data-intro] element simply shows in its final state.
   Per element: data-intro="rise|fade|line|veil|media|lit|night", style="--d:<delay>" (and --t for duration). */
:root{--intro-out:cubic-bezier(.2,.7,.2,1);--intro-soft:cubic-bezier(.45,0,.2,1)}

/* ---------- media ---------- */
.hero-media{position:absolute;inset:0;z-index:-2;overflow:hidden;container-type:size;background:#0a1219}
.hero-veil{position:absolute;inset:0;z-index:-1;background:#0a1219;opacity:0;pointer-events:none}
/* A box with the picture's aspect ratio that covers the hero like object-fit:cover;
   layers inside it stay registered to the picture. --fx/--fy work like object-position. */
.hero-stage{--ar:1.5;--fx:.5;--fy:.5;position:absolute;left:0;top:0;width:max(100cqw,calc(100cqh * var(--ar)));height:max(calc(100cqw / var(--ar)),100cqh);translate:calc((100cqw - max(100cqw,calc(100cqh * var(--ar)))) * var(--fx)) calc((100cqh - max(calc(100cqw / var(--ar)),100cqh)) * var(--fy))}
.hero-stage>img,.hero-stage>svg,.hero-stage>canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero-stage>img[hidden]{display:none}
.hero-stage--residence{--fx:.68;filter:saturate(.9) brightness(.86)}
.hero-stage--harbour{--ar:1.7768;--fx:.55;filter:var(--hero-finish,saturate(.72) brightness(.8))}
/* Living harbour (water.js): the canvas fades in over the photo once drawing; the camera drifts very slowly. */
.hero-stage canvas{opacity:0;transition:opacity .8s ease}
.hero-stage canvas.is-live{opacity:1}
@keyframes harbour-drift{from{scale:1}to{scale:1.04}}
.hero-stage.is-living{transform-origin:62% 45%;animation:harbour-drift 38s ease-in-out infinite alternate}
.hero-stage .lit{opacity:0;mix-blend-mode:plus-lighter;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent),linear-gradient(transparent,#000 14%,#000 86%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent),linear-gradient(transparent,#000 14%,#000 86%,transparent);
  -webkit-mask-size:var(--ms),var(--ms);mask-size:var(--ms),var(--ms);
  -webkit-mask-position:var(--mp),var(--mp);mask-position:var(--mp),var(--mp);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-composite:source-in;mask-composite:intersect}
@media(max-width:650px){
  /* Phone: the copy fills the lower half, so lift the house into the top half instead of covering. */
  .hero-stage--residence{width:220cqw;height:146.667cqw;translate:-104cqw -6cqw;-webkit-mask-image:linear-gradient(#000 78%,transparent);mask-image:linear-gradient(#000 78%,transparent)}
}

/* The hero runs its own sequence; keep motion-system's scroll entry off its copy. */
[data-scroll-entry]:has([data-intro]){opacity:1!important;translate:none!important;transition:none!important}

/* ---------- headline lines rise out of a mask ---------- */
[data-intro-lines] .ln{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
[data-intro-lines] .ln>span{display:inline-block}

/* ---------- sequence ---------- */
@keyframes intro-rise{from{opacity:0;translate:0 14px}to{opacity:1;translate:0 0}}
@keyframes intro-fade{from{opacity:0}to{opacity:1}}
@keyframes intro-line{from{translate:0 108%}to{translate:0 0}}
@keyframes intro-veil{from{opacity:1}to{opacity:0}}
@keyframes intro-settle{from{scale:1.06}to{scale:1}}
@keyframes intro-photo{0%{opacity:0;scale:1.06}30%{opacity:1}100%{opacity:1;scale:1}}
[data-intro=rise]{--intro-a:intro-rise}
[data-intro=fade],[data-intro=night]{--intro-a:intro-fade}
[data-intro=line]{--intro-a:intro-line;--t:1.1s}
[data-intro=veil]{--intro-a:intro-veil;--t:2.2s;--e:var(--intro-soft)}
[data-intro=media]{--intro-a:intro-settle;--t:3.2s}
[data-intro=photo]{--intro-a:intro-photo;--t:5.5s;--e:cubic-bezier(.25,.6,.3,1)}
[data-intro=lit]{--intro-a:intro-fade;--t:1.3s;--e:var(--intro-soft)}
[data-intro=night]{--t:2.4s;--e:var(--intro-soft)}

.intro :is([data-intro=rise],[data-intro=fade],[data-intro=night],[data-intro=lit],[data-intro=photo]){opacity:0}
.intro [data-intro=veil]{opacity:1}
.intro [data-intro=line]{translate:0 108%}
.intro-go [data-intro]{animation:var(--intro-a) var(--t,.9s) var(--e,var(--intro-out)) var(--d,0s) both}
/* v3 sets animation:none on some hero photos with (0,2,1); win without !important */
html.intro-go body [data-intro=photo]{animation:var(--intro-a) var(--t) var(--e) var(--d,0s) both}

/* Fail-safe: if the start signal never arrives, show everything after 3s. */
@keyframes intro-failsafe{to{opacity:var(--end,1);translate:0 0}}
.intro:not(.intro-go) [data-intro]:not([data-intro=media]){animation:intro-failsafe .4s ease 3s forwards}
.intro:not(.intro-go) [data-intro=veil]{--end:0}

/* Second visit in a session: 0.6s, final picture straight away. */
.intro-short [data-intro]{--d:0s!important;--t:.6s!important}
.intro-short.intro-go :is([data-intro=media],[data-intro=night]){animation:none;opacity:1}
.intro-short [data-intro=lit]{display:none}

/* Click, key, wheel or touch finishes the sequence. */
.intro-skip [data-intro]{--d:0s!important;--t:.35s!important}