/* Botanical studies: static by default, a single finite entrance on first view. */
.ms-home-v2 .ms-sensation-card {
  min-height: 300px;
  gap: 18px;
}
.ms-home-v2 .ms-family-icon.ms-family-botanical {
  width: 144px;
  max-width: 100%;
  height: 116px;
  flex: 0 0 116px;
  margin: -1px 0 0 -4px;
  pointer-events: none;
}
.ms-home-v2 .ms-family-botanical svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  stroke-width: 1.3;
}
.ms-home-v2 .ms-botanical-wash {
  fill: currentColor;
  fill-opacity: .045;
}
.ms-home-v2 .ms-botanical-detail { opacity: .58; }
.ms-home-v2 .ms-family-copy { min-height: 54px; margin-top: auto; }
.ms-home-v2 .ms-botanical-part,
.ms-home-v2 .ms-botanical-petal {
  transform-box: view-box;
  transform-origin: 72px 70px;
}
.ms-home-v2 .ms-botanical-petal { transform-origin: 62px 65px; }
.ms-home-v2 .ms-botanical-jasmine { transform-origin: 113px 83px; }
.ms-home-v2 .ms-botanical-vanilla { transform-origin: 53px 42px; }

@media (prefers-reduced-motion: no-preference) {
  .ms-home-v2 .ms-family-playing .ms-botanical-part {
    animation: ms-botanical-arrive 950ms var(--ms-ease-out, cubic-bezier(.23, 1, .32, 1)) 140ms both;
  }
  .ms-home-v2 .ms-family-playing .ms-botanical-step-2 { animation-delay: 270ms; }
  .ms-home-v2 .ms-family-playing .ms-botanical-step-3 { animation-delay: 400ms; }
  .ms-home-v2 .ms-family-playing .ms-botanical-petal-left {
    animation: ms-botanical-open-left 1100ms var(--ms-ease-out, cubic-bezier(.23, 1, .32, 1)) 200ms both;
  }
  .ms-home-v2 .ms-family-playing .ms-botanical-petal-right {
    animation: ms-botanical-open-right 1100ms var(--ms-ease-out, cubic-bezier(.23, 1, .32, 1)) 260ms both;
  }
  .ms-home-v2 .ms-family-playing .ms-botanical-jasmine,
  .ms-home-v2 .ms-family-playing .ms-botanical-vanilla { animation-name: ms-botanical-unfurl; }
}
@keyframes ms-botanical-arrive {
  from { opacity: 0; transform: translateY(7px) rotate(-4deg) scale(.95); }
  to { opacity: 1; transform: translateY(0) rotate(0) scale(1); }
}
@keyframes ms-botanical-open-left {
  from { opacity: .15; transform: rotate(23deg) scale(.95); }
  to { opacity: 1; transform: rotate(0) scale(1); }
}
@keyframes ms-botanical-open-right {
  from { opacity: .15; transform: rotate(-23deg) scale(.95); }
  to { opacity: 1; transform: rotate(0) scale(1); }
}
@keyframes ms-botanical-unfurl {
  from { opacity: 0; transform: rotate(-15deg) scale(.9); }
  to { opacity: 1; transform: rotate(0) scale(1); }
}

/* A pointer opens the study a little further; leaving reverses from its current pose. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .ms-home-v2 .ms-family-botanical .ms-botanical-part,
  .ms-home-v2 .ms-family-botanical .ms-botanical-petal {
    transition: transform 240ms var(--ms-ease-out, cubic-bezier(.23, 1, .32, 1));
  }
  .ms-home-v2 .ms-sensation-card:hover { transform: none; }

  .ms-home-v2 .ms-sensation-citrus:hover:not(.ms-family-playing) .ms-botanical-part {
    transform: translateY(-3px) rotate(-2deg);
  }
  .ms-home-v2 .ms-sensation-citrus:hover:not(.ms-family-playing) .ms-botanical-step-2 {
    transform: translate(1px, -5px) rotate(4deg);
  }
  .ms-home-v2 .ms-sensation-citrus:hover:not(.ms-family-playing) .ms-botanical-step-3 {
    transform: translate(2px, -2px) rotate(-5deg);
  }
  .ms-home-v2 .ms-sensation-floral:hover:not(.ms-family-playing) .ms-botanical-petal-left {
    transform: rotate(-8deg);
  }
  .ms-home-v2 .ms-sensation-floral:hover:not(.ms-family-playing) .ms-botanical-petal-right {
    transform: rotate(8deg);
  }
  .ms-home-v2 .ms-sensation-floral:hover:not(.ms-family-playing) .ms-botanical-jasmine {
    transform: rotate(7deg) scale(1.025);
  }
  .ms-home-v2 .ms-sensation-wood:hover:not(.ms-family-playing) .ms-botanical-part {
    transform: translateY(-2px) rotate(-3deg);
  }
  .ms-home-v2 .ms-sensation-wood:hover:not(.ms-family-playing) .ms-botanical-step-2 {
    transform: translateY(-1px) rotate(2deg);
  }
  .ms-home-v2 .ms-sensation-wood:hover:not(.ms-family-playing) .ms-botanical-step-3 {
    transform: translate(1px, -2px) rotate(-4deg);
  }
  .ms-home-v2 .ms-sensation-amber:hover:not(.ms-family-playing) .ms-botanical-part {
    transform: rotate(2deg);
  }
  .ms-home-v2 .ms-sensation-amber:hover:not(.ms-family-playing) .ms-botanical-vanilla {
    transform: rotate(-6deg) scale(1.025);
  }
  .ms-home-v2 .ms-sensation-amber:hover:not(.ms-family-playing) .ms-botanical-step-3 {
    transform: translateY(-2px) rotate(-2deg);
  }

  /* Keyboard focus settles immediately, including when the pointer is over the card. */
  .ms-home-v2 .ms-sensation-card:focus-visible .ms-botanical-part,
  .ms-home-v2 .ms-sensation-card:focus-visible .ms-botanical-petal {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}
@media (max-width: 1100px) {
  .ms-home-v2 .ms-sensation-card { min-height: 292px; }
}
@media (max-width: 600px) {
  .ms-home-v2 .ms-sensation-card { min-height: 266px; gap: 14px; }
  .ms-home-v2 .ms-family-copy { min-height: 64px; }
  .ms-home-v2 .ms-family-icon.ms-family-botanical {
    width: 128px;
    height: 103px;
    flex-basis: 103px;
    margin-left: -3px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ms-home-v2 .ms-family-botanical * { animation: none !important; }
}