/* Four characters lean around the outer edges of the navy front-door hero. */
.hero-peeks { display:none; }
body.frontdoor-preview:not(.frontdoor-light) .hero { position:relative; overflow:hidden; isolation:isolate; }
body.frontdoor-preview:not(.frontdoor-light) .hero-content { position:relative; z-index:2; }
body.frontdoor-preview:not(.frontdoor-light) .hero-peeks {
  display:block; position:absolute; inset:0; z-index:1;
  pointer-events:none; user-select:none;
  --peek-x:0%; --peek-y:0px; --peek-turn:0deg; --peek-opacity:1;
}
.hero-peeker {
  position:absolute; width:clamp(260px,25vw,320px); aspect-ratio:1;
  opacity:var(--peek-opacity); will-change:transform;
}
.hero-peeker--left {
  left:-30px; transform-origin:0% 78%;
  transform:translate3d(calc(-1 * var(--peek-x)),var(--peek-y),0) rotate(calc(-1 * var(--peek-turn)));
}
.hero-peeker--right {
  right:-30px; transform-origin:100% 78%;
  transform:translate3d(var(--peek-x),var(--peek-y),0) rotate(var(--peek-turn));
}
.hero-peeker--nurse { top:55px; --wink-delay:1.7s; }
.hero-peeker--doctor { top:40px; --wink-delay:2.3s; }
.hero-peeker--assistant { top:295px; --wink-delay:2.8s; }
.hero-peeker--dentist { top:320px; width:300px; --wink-delay:3.4s; }
.hero-peeker__pose, .hero-peeker__art { position:relative; width:100%; height:100%; }
/* Rotate the complete torso out through the side. No bottom fading or waist crop. */
.hero-peeker--left .hero-peeker__art { transform:rotate(24deg); transform-origin:0% 50%; }
.hero-peeker--right .hero-peeker__art { transform:rotate(-24deg); transform-origin:100% 50%; }
.hero-peeker__art img { display:block; width:100%; height:100%; object-fit:contain; }
.hero-peeker--nurse .hero-peeker__art { clip-path:url(#peek-nurse-silhouette); }
.hero-peeker--doctor .hero-peeker__art { clip-path:url(#peek-doctor-silhouette); }
.hero-peeker--assistant .hero-peeker__art { clip-path:url(#peek-assistant-silhouette); }
.hero-peeker--dentist .hero-peeker__art { clip-path:url(#peek-dentist-silhouette); }
.hero-peeker__wink { position:absolute; inset:0; opacity:0; }
.hero-peeker--nurse .hero-peeker__wink {
  -webkit-mask-image:radial-gradient(ellipse 6% 5% at 57% 38%,#000 75%,transparent 100%);
  mask-image:radial-gradient(ellipse 6% 5% at 57% 38%,#000 75%,transparent 100%);
}
.hero-peeker--assistant .hero-peeker__wink {
  -webkit-mask-image:radial-gradient(ellipse 6% 5% at 57% 34%,#000 75%,transparent 100%);
  mask-image:radial-gradient(ellipse 6% 5% at 57% 34%,#000 75%,transparent 100%);
}
.hero-peeker--doctor .hero-peeker__wink,
.hero-peeker--dentist .hero-peeker__wink {
  -webkit-mask-image:radial-gradient(ellipse 6% 5% at 45% 34%,#000 75%,transparent 100%);
  mask-image:radial-gradient(ellipse 6% 5% at 45% 34%,#000 75%,transparent 100%);
}
.hero-peeks.is-greeting .hero-peeker--left .hero-peeker__pose { animation:peek-hello-left 4.6s ease-in-out both; }
.hero-peeks.is-greeting .hero-peeker--right .hero-peeker__pose { animation:peek-hello-right 4.6s ease-in-out both; }
.hero-peeks.is-greeting .hero-peeker__wink { animation:peek-wink .38s linear var(--wink-delay) both; }
.hero-peeks.is-greeting.is-paused .hero-peeker__pose,
.hero-peeks.is-greeting.is-paused .hero-peeker__wink { animation-play-state:paused; }
@keyframes peek-hello-left {
  0%,100% { transform:translate(0,0) rotate(0); }
  28% { transform:translate(5px,-4px) rotate(1.5deg); }
  62% { transform:translate(2px,2px) rotate(-.7deg); }
}
@keyframes peek-hello-right {
  0%,100% { transform:translate(0,0) rotate(0); }
  36% { transform:translate(-4px,-5px) rotate(-1.3deg); }
  72% { transform:translate(-2px,1px) rotate(.7deg); }
}
@keyframes peek-wink { 0%,100% { opacity:0; } 20%,80% { opacity:1; } }
@media (max-width:1100px) {
  .hero-peeker { width:200px; }
  .hero-peeker--left { left:-32px; }
  .hero-peeker--right { right:-32px; }
  .hero-peeker--nurse { top:80px; }
  .hero-peeker--doctor { top:100px; }
  .hero-peeker--assistant { top:330px; }
  .hero-peeker--dentist { top:337px; }
}
@media (min-width:601px) and (max-width:1100px) {
  body.frontdoor-preview .hero .fd-composer,
  body.frontdoor-preview .hero .fd-actions { max-width:min(750px,calc(100% - 192px)); }
}
@media (max-width:800px) {
  .hero-peeker { width:176px; }
  .hero-peeker--left { left:-26px; }
  .hero-peeker--right { right:-26px; }
  .hero-peeker--nurse { top:110px; }
  .hero-peeker--doctor { top:127px; }
  .hero-peeker--assistant { top:335px; }
  .hero-peeker--dentist { top:348px; }
}
@media (max-width:600px) {
  body.frontdoor-preview .hero-content { padding-bottom:124px; }
  .hero-peeker { width:132px; }
  .hero-peeker--left { left:-20px; }
  .hero-peeker--right { right:-20px; }
  .hero-peeker--nurse { top:70px; }
  .hero-peeker--doctor { top:97px; }
  .hero-peeker--assistant { top:420px; }
  .hero-peeker--dentist { top:420px; }
}
@media (max-width:360px) {
  body.frontdoor-preview .hero-content { padding-bottom:112px; }
  .hero-peeker { width:112px; }
  .hero-peeker--left { left:-16px; }
  .hero-peeker--right { right:-16px; }
  .hero-peeker--nurse { top:72px; }
  .hero-peeker--doctor { top:100px; }
  .hero-peeker--assistant { top:430px; }
  .hero-peeker--dentist { top:430px; }
}
@media (prefers-reduced-motion:reduce) {
  .hero-peeker { transform:none; opacity:1; will-change:auto; }
  .hero-peeks .hero-peeker__pose, .hero-peeks .hero-peeker__wink { animation:none!important; }
  .hero-peeker__wink { display:none; }
}