/* The original logo stays intact; its only coloured part is the heart. */
.home-intro{display:none;position:fixed;inset:0;z-index:10000;background:#fff;place-items:center;pointer-events:none}
.home-intro-logo{position:relative;width:340px;max-width:78vw}
.home-intro-logo img{display:block;width:100%;height:auto}
.home-intro-base{filter:grayscale(1)}
.home-intro-heart{position:absolute;inset:0;clip-path:inset(77.4% 7.8% 22.6% 73.5%)}
.home-intro-roll-heart{display:none!important;position:absolute;left:73.607%;top:50.481%;width:18.182%!important;height:auto;z-index:2;transform-origin:50% 50%;backface-visibility:hidden}
.home-intro-roll-preview .home-intro-logo{isolation:isolate}
/* Multiplication keeps the original black lettering in front of the moving
   heart while the white areas let it show through. Mask the stationary heart. */
.home-intro-roll-preview .home-intro-base{position:relative;z-index:3;filter:none;mix-blend-mode:multiply;mask-image:url("assets/images/logo-without-heart-mask.svg");mask-size:100% 100%;mask-repeat:no-repeat;-webkit-mask-image:url("assets/images/logo-without-heart-mask.svg");-webkit-mask-size:100% 100%;-webkit-mask-repeat:no-repeat}
.home-intro-roll-preview .home-intro-heart{display:none}
@media(prefers-reduced-motion:no-preference){
  /* Fill 1.4s, hold 0.3s, then fade 0.6s: total 2.3s. */
  .home-intro-active .home-intro{display:grid;animation:home-intro-dismiss 600ms ease-out 1700ms forwards}
  .home-intro-active .home-intro-heart{animation:home-intro-fill 1400ms ease-in-out both}
  /* Alternative preview: roll 1.8s, hold 0.4s, fade 0.5s = 2.7s. */
  .home-intro-active.home-intro-roll-preview .home-intro{animation:home-intro-dismiss 500ms ease-out 2200ms forwards}
  .home-intro-active.home-intro-roll-preview .home-intro-roll-heart{display:block!important;will-change:transform;animation:home-intro-roll 1800ms cubic-bezier(.22,.61,.36,1) both}
}
@keyframes home-intro-fill{
  from{clip-path:inset(77.4% 7.8% 22.6% 73.5%)}
  to{clip-path:inset(50.5% 7.8% 22.6% 73.5%)}
}
@keyframes home-intro-dismiss{to{opacity:0;visibility:hidden}}
@keyframes home-intro-roll{
  /* One interpolation keeps translation and rotation moving together, without
     restarting the easing at intermediate stops or reversing at the end. */
  from{transform:translate3d(-245%,0,0) rotate(-360deg)}
  to{transform:translate3d(0,0,0) rotate(0)}
}