/* Full-bleed coaching scene. Only edge crops of the supplied symbol cover the photo. */
.photo-interlude{position:relative;isolation:isolate;overflow:hidden;width:100%;height:clamp(420px,48vw,690px);background:var(--c-brand-tint24)}
.interlude-slides{position:absolute;inset:0;overflow:hidden;isolation:isolate;opacity:1;transform:none;transition:opacity 900ms ease,transform 1400ms cubic-bezier(.22,1,.36,1)}
.interlude-slides img,.interlude-slides canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:58% 46%;pointer-events:none}
.interlude-slides img{opacity:0}.interlude-slides img:first-child{opacity:1}
.interlude-slides canvas{z-index:5}
.photo-interlude.is-ready:not(.is-seen) .interlude-slides{opacity:0;transform:scale(1.035)}
.interlude-ornaments{position:absolute;inset:0;z-index:8;pointer-events:none;overflow:hidden}
/* The supplied symbol keeps its proportions. Scale and viewport crops create the three compositions. */
.interlude-pattern{position:absolute;inset:0;pointer-events:none;visibility:hidden}
.photo-interlude[data-scene="0"]:is([data-scene-phase="enter"],[data-scene-phase="hold"],[data-scene-phase="exit"]) .interlude-pattern--0,
.photo-interlude[data-scene="1"]:is([data-scene-phase="enter"],[data-scene-phase="hold"],[data-scene-phase="exit"]) .interlude-pattern--1,
.photo-interlude[data-scene="2"]:is([data-scene-phase="enter"],[data-scene-phase="hold"],[data-scene-phase="exit"]) .interlude-pattern--2{visibility:visible}
.interlude-edge{position:absolute;inset-block:0;width:36%;overflow:hidden;pointer-events:none}
.interlude-edge--right{right:0;mask-image:linear-gradient(90deg,transparent,#000 18%)}
.interlude-edge--left{left:0;mask-image:linear-gradient(270deg,transparent,#000 18%)}
.interlude-curve{position:absolute;color:var(--c-brand-tint18);opacity:1}
.interlude-curve svg{display:block;width:100%;height:auto;overflow:hidden}
.interlude-curve--crown{width:clamp(760px,64vw,1020px);right:-22vw;top:-6%}
.interlude-curve--lower{width:clamp(650px,55vw,880px);left:-8vw;bottom:-5%}
.interlude-pattern--1 .interlude-curve--lower{left:-4vw;bottom:0}
.interlude-curve--cross{width:clamp(700px,60vw,1000px);right:-9vw;top:-24%}
.interlude-pen{stroke-dasharray:1 1;stroke-dashoffset:1}
.photo-interlude[data-scene="0"]:is([data-scene-phase="enter"],[data-scene-phase="hold"]) .interlude-pattern--0 .interlude-pen,
.photo-interlude[data-scene="1"]:is([data-scene-phase="enter"],[data-scene-phase="hold"]) .interlude-pattern--1 .interlude-pen,
.photo-interlude[data-scene="2"]:is([data-scene-phase="enter"],[data-scene-phase="hold"]) .interlude-pattern--2 .interlude-pen{animation:var(--draw-name,interlude-draw) 3200ms var(--draw-ease,cubic-bezier(.33,.2,.55,1)) both}
.photo-interlude[data-scene="0"][data-scene-phase="exit"] .interlude-pattern--0 .interlude-pen,
.photo-interlude[data-scene="1"][data-scene-phase="exit"] .interlude-pattern--1 .interlude-pen,
.photo-interlude[data-scene="2"][data-scene-phase="exit"] .interlude-pattern--2 .interlude-pen{animation:var(--erase-name,interlude-erase) 1200ms var(--erase-ease,cubic-bezier(.4,0,.55,1)) both}
.photo-interlude[data-motion-state="suspended"] .interlude-pen{animation-play-state:paused!important}
@keyframes interlude-draw{0%{stroke-dashoffset:1;opacity:0}8%{opacity:1}100%{stroke-dashoffset:0;opacity:1}}
@keyframes interlude-erase{0%{stroke-dashoffset:0;opacity:1}85%{opacity:1}100%{stroke-dashoffset:-1;opacity:0}}
/* The stem reaches the fork before the two original branches are revealed. */
.interlude-pen--stem{--draw-name:interlude-stem-in;--erase-name:interlude-stem-out;--draw-ease:linear;--erase-ease:linear}
.interlude-pen--branch{--draw-name:interlude-branch-in;--erase-name:interlude-branch-out;--draw-ease:linear;--erase-ease:linear}
@keyframes interlude-stem-in{0%{stroke-dashoffset:1;opacity:0}8%{opacity:1}52%,100%{stroke-dashoffset:0;opacity:1}}
@keyframes interlude-branch-in{0%,42%{stroke-dashoffset:1;opacity:0}50%{opacity:1}100%{stroke-dashoffset:0;opacity:1}}
@keyframes interlude-stem-out{0%{stroke-dashoffset:0;opacity:1}48%{opacity:1}56%,100%{stroke-dashoffset:-1;opacity:0}}
@keyframes interlude-branch-out{0%,42%{stroke-dashoffset:0;opacity:1}90%{opacity:1}100%{stroke-dashoffset:-1;opacity:0}}
@media(max-width:767px){
 .photo-interlude{height:clamp(360px,115vw,500px)}
 .interlude-edge{width:34%}
 .interlude-curve--crown{width:320%;right:-100%;top:0}
 .interlude-curve--lower{width:350%;left:-40%;bottom:-10%}
 .interlude-pattern--1 .interlude-curve--lower{width:320%;left:-22%;bottom:-4%}
 .interlude-curve--cross{width:400%;right:-100%;top:-20%}
}
@media(prefers-reduced-motion:reduce){
 .interlude-slides,.interlude-curve{transition:none!important;transform:none!important}
 .interlude-pen{animation:none!important}
 .photo-interlude.is-ready:not(.is-seen) .interlude-slides{opacity:1}
 .photo-interlude .interlude-curve{display:none}
}