/* Page seams are hiding places, independent of the viewport edges. */
body.frontdoor-preview .section-panel > .section-play {
  --cast-size:184px;
  position:absolute; z-index:3; left:calc(var(--cast-x,68%) - var(--cast-size) / 2);
  top:-112px; width:var(--cast-size); height:112px;
  overflow:hidden; pointer-events:none; user-select:none; background:transparent; border:0;
}
.section-play__reveal { width:100%; height:100%; transform:translateY(105%); transition:transform .7s cubic-bezier(.22,.8,.3,1); }
.section-play__pose { width:100%; height:var(--cast-size); transform-origin:50% 48%; }
.section-play__art { display:block; width:100%; height:100%; transform:rotate(var(--cast-turn)); transform-origin:50% 40%; }
.section-play.is-playing .section-play__reveal { transform:translateY(0); }
.section-play.is-playing .section-play__pose { animation:section-play-bob 4.8s ease-in-out both; }
.section-play__wink { opacity:0; }
.section-play.is-playing .section-play__wink { animation:peek-wink .4s linear 1.35s both; }
.section-play--buddy { --cast-x:32%; }
.section-play--buddy.is-playing .section-play__reveal { transition-delay:.28s; }
.section-play--buddy.is-playing .section-play__pose { animation-delay:.28s; }
.section-play--buddy.is-playing .section-play__wink { animation-delay:1.9s; }
.section-play--wave { --cast-x:35%; }
.section-play--wave .section-play__reveal { transform:translate(12%,105%) rotate(-8deg); }
.section-play--wave.is-playing .section-play__reveal { transform:translate(0,0) rotate(0); }
body.frontdoor-preview .section-panel > .section-play--corner { --cast-x:20%; }
.section-play--corner .section-play__reveal { transform:translate(-18%,105%) rotate(12deg); }
.section-play--corner.is-playing .section-play__reveal { transform:translate(0,0) rotate(0); }
body.frontdoor-preview .section-panel > .section-play--footer { --cast-x:72%; top:auto; bottom:8px; }
body.frontdoor-preview .section-footer:has(.section-play)::after { content:""; position:absolute; bottom:0; left:0; right:0; height:8px; background:#14283e; }
body.frontdoor-preview .section-panel > .section-play--hang { --cast-x:85%; top:0; height:110px; }
.section-play--hang .section-play__reveal { transform:translateY(-110%); }
.section-play--hang .section-play__pose { position:relative; top:-68px; }
.section-play--hang .section-play__art { transform:rotate(164deg); transform-origin:50% 50%; }
.section-play--hang.is-playing .section-play__reveal { transform:translateY(0); }
body.frontdoor-preview .section-panel .play-clearance { padding-bottom:124px; }
body.frontdoor-preview .play-hanging-panel .audience-bento { padding-top:68px; }
@keyframes section-play-bob {
  0%,20%,100% { transform:translateY(0) rotate(0); }
  38% { transform:translateY(-3px) rotate(-2deg); }
  62% { transform:translateY(1px) rotate(1deg); }
}
@media(max-width:800px) {
  body.frontdoor-preview .section-panel > .section-play { --cast-size:160px; height:98px; top:-98px; }
  body.frontdoor-preview .section-panel .play-clearance { padding-bottom:108px; }
  body.frontdoor-preview .section-panel > .section-play--footer { top:auto; }
  body.frontdoor-preview .section-panel > .section-play--hang { --cast-x:78%; top:0; height:94px; }
  .section-play--hang .section-play__pose { top:-58px; }
  body.frontdoor-preview .play-hanging-panel .audience-bento { padding-top:104px; }
}
@media(max-width:600px) {
  body.frontdoor-preview .section-panel > .section-play { --cast-size:144px; height:88px; top:-88px; }
  .section-play--rise { --cast-x:76%; }
  .section-play--buddy { --cast-x:24%; }
  .section-play--wave { --cast-x:38%; }
  body.frontdoor-preview .section-panel > .section-play--corner { --cast-x:30%; }
  body.frontdoor-preview .section-panel > .section-play--footer { --cast-x:66%; top:auto; }
  body.frontdoor-preview .section-panel .play-clearance { padding-bottom:98px; }
  body.frontdoor-preview .section-panel > .section-play--hang { --cast-x:71%; top:0; height:84px; }
  .section-play--hang .section-play__pose { top:-52px; }
  body.frontdoor-preview .play-hanging-panel .audience-bento { padding-top:94px; }
}
@media(prefers-reduced-motion:reduce) {
  body.frontdoor-preview .section-panel > .section-play { display:none; }
  body.frontdoor-preview .section-panel .play-clearance { padding-bottom:48px; }
  body.frontdoor-preview .play-hanging-panel .audience-bento { padding-top:40px; }
}

/* The whole cast greets visitors only after they reach the page bottom. */
body.frontdoor-preview .section-footer.has-finale {
  --finale-art:clamp(140px,15vw,190px);
  --finale-row:118px;
  --finale-height:var(--finale-row);
}
body.frontdoor-preview .section-footer.has-finale .contact-footer { padding-bottom:calc(var(--finale-height) + 32px); }
body.frontdoor-preview .section-footer.has-finale::after {
  content:""; position:absolute; bottom:0; left:0; right:0; height:8px; background:#14283e;
}
body.frontdoor-preview .section-panel > .footer-finale {
  position:absolute; z-index:3; bottom:8px; left:50%; transform:translateX(-50%);
  display:grid; grid-template-columns:repeat(10,minmax(0,1fr));
  width:calc(100% - 32px); max-width:1240px; height:var(--finale-height);
  background:transparent; pointer-events:none; user-select:none; overflow:hidden;
}
.footer-finale__row { display:contents; }
.finale-actor { position:relative; min-width:0; height:var(--finale-row); overflow:hidden; }
.finale-actor__reveal { height:100%; transform:translateY(105%); transition:transform .65s cubic-bezier(.22,.8,.3,1); }
.finale-actor__frame { position:absolute; top:0; left:50%; width:var(--finale-art); height:var(--finale-art); transform:translateX(-50%); }
.finale-actor__pose { width:100%; height:100%; transform-origin:50% 55%; }
.finale-actor__art { position:relative; display:block; width:100%; height:100%; transform:rotate(var(--cast-turn)); transform-origin:50% 40%; }
.finale-actor__art img { display:block; width:100%; height:100%; object-fit:contain; }
.finale-actor__wink { opacity:0; }
img.finale-actor__wink {
  position:absolute; inset:0;
  -webkit-mask-image:radial-gradient(ellipse 6% 5% at var(--eye-x) var(--eye-y),#000 75%,transparent 100%);
  mask-image:radial-gradient(ellipse 6% 5% at var(--eye-x) var(--eye-y),#000 75%,transparent 100%);
}
.footer-finale.is-gathering .finale-actor__reveal { transform:translateY(0); transition-delay:var(--arrival-delay); }
.footer-finale.is-gathering .finale-actor__pose { animation:section-play-bob 3.8s ease-in-out var(--arrival-delay) both; }
.footer-finale.is-gathering .finale-actor__wink { animation:peek-wink .4s linear var(--wink-delay) both; }
@media(max-width:800px) {
  body.frontdoor-preview .section-footer.has-finale {
    --finale-art:clamp(118px,22vw,156px); --finale-row:96px; --finale-height:198px;
  }
  body.frontdoor-preview .section-panel > .footer-finale { display:flex; flex-direction:column; width:calc(100% - 20px); }
  .footer-finale__row { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); height:var(--finale-row); flex:none; overflow:hidden; }
  .footer-finale__row:first-child { margin-bottom:6px; border-bottom:1px solid #213e6026; }
}
@media(max-width:600px) {
  body.frontdoor-preview .section-footer.has-finale { --finale-art:126px; --finale-row:78px; --finale-height:162px; }
  body.frontdoor-preview .section-panel > .footer-finale { width:calc(100% - 16px); }
}
@media(prefers-reduced-motion:reduce) {
  .footer-finale .finale-actor__reveal { transition:none; }
  .footer-finale.is-gathering .finale-actor__pose,.footer-finale.is-gathering .finale-actor__wink { animation:none; }
}