/* DIO branded opening: questionnaire §6, Q12/Q13/Q28 and the 6 Oct frame ruling.
   Owner revision 7 Oct: the original 179.4px tile with a stronger, faster 8.5s wave. The field may sit
   behind the media. The 7 Oct follow-up extends the fade into the copy area,
   at low contrast, rather than ending the pattern beside the photograph. */
.home-opening,.landing-opening{position:relative;isolation:isolate;background:#fff;overflow:hidden;color:#fff}
.opening-field{position:absolute;inset:0;pointer-events:none;z-index:0;background:linear-gradient(155deg,#34505f 0%,#2f4452 60%,#263d4b 100%)}
.opening-pattern{position:absolute;inset:0;overflow:hidden;-webkit-mask-image:url(assets/arch-tile.svg),linear-gradient(90deg,rgba(0,0,0,.025),rgba(0,0,0,.045) 25%,rgba(0,0,0,.10) 40%,rgba(0,0,0,.30) 54%,rgba(0,0,0,.68) 72%,#000 94%),linear-gradient(#000 35%,rgba(0,0,0,.82) 62%,rgba(0,0,0,.36) 82%,transparent);mask-image:url(assets/arch-tile.svg),linear-gradient(90deg,rgba(0,0,0,.025),rgba(0,0,0,.045) 25%,rgba(0,0,0,.10) 40%,rgba(0,0,0,.30) 54%,rgba(0,0,0,.68) 72%,#000 94%),linear-gradient(#000 35%,rgba(0,0,0,.82) 62%,rgba(0,0,0,.36) 82%,transparent);-webkit-mask-size:179.4px 179.4px,100% 100%,100% 100%;mask-size:179.4px 179.4px,100% 100%,100% 100%;-webkit-mask-repeat:repeat,no-repeat,no-repeat;mask-repeat:repeat,no-repeat,no-repeat;-webkit-mask-composite:source-in,source-in;mask-composite:intersect,intersect}
.opening-wave{position:absolute;inset:0 auto 0 0;width:calc(100% + 1765.4px);background:repeating-linear-gradient(115deg,rgba(169,193,209,.09) 0,rgba(169,193,209,.09) 360px,rgba(169,193,209,.3) 530px,rgba(237,135,60,.62) 720px,rgba(237,135,60,.5) 890px,rgba(169,193,209,.14) 1100px,rgba(169,193,209,.09) 1600px);animation:opening-wave 8.5s linear infinite;animation-delay:-2s}
.landing-opening .opening-pattern{left:0}
@keyframes opening-wave{to{transform:translateX(-1765.4px)}}
.home-opening-wrap,.landing-hero{position:relative;z-index:1;padding-bottom:100px}
.home-hero-copy,.landing-lead{position:relative;background:none}
.home-hero-copy h1,.landing-lead h1{color:#fff}
.home-hero-copy>p,.landing-lead p:not(.label){color:#e6edf1}
.home-hero-copy .text-link,.landing-lead>.label{color:#dce6ec}
.home-opening .human-stage figcaption,.landing-opening .landing-human figcaption{color:#e0e9ee}
.home-opening .button,.landing-opening .button{background:var(--steel);color:#fff}
.home-opening .button:hover,.home-opening .button:focus-visible,.landing-opening .button:hover,.landing-opening .button:focus-visible{color:var(--ink)}
.home-opening .text-link:focus-visible,.landing-opening .text-link:focus-visible{outline-color:#fff}
.home-opening .human-boundary{background:transparent}
.home-opening .frame-field{fill:#dce6ec}
.home-opening .frame-outline{vector-effect:non-scaling-stroke}
@media(max-width:700px){
 .home-opening-wrap,.landing-hero{padding-bottom:92px}
 .opening-pattern{--photo-end:calc((100vw - 40px) / 1.18 + 24px);inset:0;height:auto;-webkit-mask-image:url(assets/arch-tile.svg),linear-gradient(#000 0,#000 calc(var(--photo-end) - 75px),rgba(0,0,0,.58) var(--photo-end),rgba(0,0,0,.33) calc(var(--photo-end) + 105px),rgba(0,0,0,.12) calc(var(--photo-end) + 235px),rgba(0,0,0,.025) calc(var(--photo-end) + 415px),transparent 100%);mask-image:url(assets/arch-tile.svg),linear-gradient(#000 0,#000 calc(var(--photo-end) - 75px),rgba(0,0,0,.58) var(--photo-end),rgba(0,0,0,.33) calc(var(--photo-end) + 105px),rgba(0,0,0,.12) calc(var(--photo-end) + 235px),rgba(0,0,0,.025) calc(var(--photo-end) + 415px),transparent 100%)}
 .home-opening .human-stage.is-held .human-boundary{background:transparent}
 .home-opening .phone-held-title{color:var(--navy)}
 .landing-opening .opening-pattern{left:0}
}
@media(prefers-reduced-motion:reduce){.opening-wave{animation:none;background:rgba(169,193,209,.14)}}
.reduce-motion .opening-wave{animation:none!important;background:rgba(169,193,209,.14)!important}

.phone-held-boundary{display:none}
@media(max-width:700px){.human-stage.is-held .human-boundary{display:none}.human-stage.is-held .phone-held-boundary{display:block;width:100%;height:140px}.phone-held-boundary .frame-outline{stroke-width:2;vector-effect:non-scaling-stroke}}

/* Cleared photographs replace the review-only empty rectangles. Copy and media
   own separate tracks; the frame may overlap its field, never its neighbor. */
.home-opening-wrap{grid-template-columns:minmax(0,1fr) minmax(0,1.06fr);padding-block:60px 72px;column-gap:clamp(36px,5vw,84px)}
.home-hero-copy,.landing-lead,.human-stage,.landing-human{min-width:0}
.human-stage.is-cleared{width:100%;max-width:630px}
.human-photo-frame{--photo-cut:64px;position:relative;isolation:isolate;aspect-ratio:1.08;background:var(--orange);clip-path:polygon(var(--photo-cut) 0,100% 0,100% calc(100% - var(--photo-cut)),calc(100% - var(--photo-cut)) 100%,0 100%,0 var(--photo-cut))}
.human-photo-frame>img{position:absolute;inset:3px;width:calc(100% - 6px);height:calc(100% - 6px);max-width:none;object-fit:cover;object-position:56% 38%;--inside-cut:calc(var(--photo-cut) - 1.7574px);clip-path:polygon(var(--inside-cut) 0,100% 0,100% calc(100% - var(--inside-cut)),calc(100% - var(--inside-cut)) 100%,0 100%,0 var(--inside-cut))}
.landing-human .human-photo-frame>img{object-position:50% 42%}
.home-opening .opening-pattern,.landing-opening .opening-pattern{bottom:0}
@media(max-width:1000px) and (min-width:701px){.home-opening-wrap{column-gap:32px;padding-inline:32px}.human-photo-frame{--photo-cut:42px;aspect-ratio:.82}}
@media(max-width:700px){
 .home-opening-wrap{padding:24px 20px 46px;gap:28px}
 .human-stage.is-cleared,.landing-human.is-cleared{width:100%;max-width:none}
 .human-photo-frame{--photo-cut:32px;aspect-ratio:1.18}
 .human-photo-frame>img{inset:2px;width:calc(100% - 4px);height:calc(100% - 4px);--inside-cut:calc(var(--photo-cut) - 1.1716px);object-position:56% 34%}
 .home-opening .opening-pattern,.landing-opening .opening-pattern{height:auto;bottom:0;mask-size:179.4px 179.4px,100% 100%;-webkit-mask-size:179.4px 179.4px,100% 100%}
 .landing-hero{padding-bottom:46px}
}

/* Daniel's supplied orange texture is the introductory photo curtain.
   The orange outline stays solid; the photograph is untouched. */
.home-opening .human-photo-frame::before{content:'';position:absolute;inset:3px;background:#ed873c url('assets/texture-orange.png') repeat 0 0 / 200px 178px;pointer-events:none}
.home-opening .human-photo-frame.has-photo-reveal::after{content:'';position:absolute;inset:3px;z-index:2;background:#ed873c url('assets/texture-orange.png') repeat 0 0 / 200px 178px;pointer-events:none}
.home-opening .human-photo-frame.is-photo-revealing::after{animation:dio-photo-curtain 1.1s cubic-bezier(.45,0,.2,1) both}
@keyframes dio-photo-curtain{from{clip-path:inset(0)}to{clip-path:inset(0 0 0 100%)}}
@media(max-width:700px){.home-opening .human-photo-frame::before,.home-opening .human-photo-frame.has-photo-reveal::after{inset:2px;background-size:160px 142.4px}}
.reduce-motion .home-opening .human-photo-frame::after{content:none!important;animation:none!important}
@media(prefers-reduced-motion:reduce){.home-opening .human-photo-frame::after{content:none!important;animation:none!important}}