@media (prefers-reduced-motion: no-preference) {
  .hims_header {
    animation: motion-header-in 700ms cubic-bezier(.2, .75, .25, 1) both;
  }

  .hims_hero {
    background-position: center calc(50% + var(--hero-shift, 0px));
  }

  .hims_hero::before {
    animation: motion-hero-glow 1600ms ease-out both;
  }

  .hims_hero-content > div:first-child .eyebrow {
    animation: motion-hero-copy-in 700ms 180ms cubic-bezier(.2, .75, .25, 1) both;
  }

  .hims_hero-content > div:first-child h1,
  .m-hero-title {
    animation: motion-hero-copy-in 800ms 300ms cubic-bezier(.2, .75, .25, 1) both;
  }

  .hims_hero-content > div:first-child p,
  .m-hero-sub {
    animation: motion-hero-copy-in 750ms 460ms cubic-bezier(.2, .75, .25, 1) both;
  }

  .hims_hero-content .cta-row,
  .m-hero-btns {
    animation: motion-hero-copy-in 750ms 600ms cubic-bezier(.2, .75, .25, 1) both;
  }

  .hims_hero-content .cta-row .btn:first-child,
  .m-hero-btns > :first-child {
    animation: motion-hero-button-in 650ms 720ms cubic-bezier(.2, .75, .25, 1) both;
  }

  .hims_hero-content .cta-row .btn:last-child,
  .m-hero-btns > :last-child {
    animation: motion-hero-button-in 650ms 840ms cubic-bezier(.2, .75, .25, 1) both;
  }

  .hims_hero-card {
    animation: motion-hero-card-in 900ms 500ms cubic-bezier(.2, .75, .25, 1) both;
  }

  .hims_hero-card .stat {
    animation: motion-hero-copy-in 650ms both;
  }

  .hims_hero-card .stat:nth-child(1) { animation-delay: 700ms; }
  .hims_hero-card .stat:nth-child(2) { animation-delay: 820ms; }
  .hims_hero-card .stat:nth-child(3) { animation-delay: 940ms; }
  .hims_hero-card .stat:nth-child(4) { animation-delay: 1060ms; }

  .m-hero-btns {
    justify-content: center;
  }

  html.motion-ready [data-motion] {
    opacity: 0;
    translate: 0 34px;
    transition:
      opacity 700ms ease,
      translate 800ms cubic-bezier(.22, 1, .36, 1);
    transition-delay: var(--motion-delay, 0ms);
    will-change: opacity, transform;
  }

  html.motion-ready [data-motion].is-visible {
    opacity: 1;
    translate: 0 0;
  }

  html.motion-ready .process-grid > [data-motion] {
    scale: .97;
  }

  html.motion-ready .process-grid > [data-motion].is-visible {
    scale: 1;
  }

  .process-step {
    min-width: 0;
    overflow: hidden;
  }

  .process-step h3 {
    margin: 16px 0 8px;
    overflow-wrap: anywhere;
  }

  .scroll-fill-heading .scroll-fill-word {
    color: #3b3b3b;
    background-image: linear-gradient(
      90deg,
      #fff 0,
      #fff var(--word-fill, 0%),
      #3b3b3b var(--word-fill, 0%),
      #3b3b3b 100%
    );
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: none;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }

  .hims_hero-mobile-image img {
    animation: motion-image-arrive 1200ms cubic-bezier(.2, .75, .25, 1) both;
  }

  .m-hero {
    background-position: center calc(50% + var(--hero-shift, 0px));
  }

  .m-hero-body {
    text-align: center;
  }

  .gallery-item img {
    transition:
      transform 850ms cubic-bezier(.2, .75, .25, 1),
      filter 700ms ease;
  }

  .btn,
  .m-btn-primary,
  .m-btn-secondary,
  .request-form button,
  .hims_nav-toggle {
    transition:
      transform 240ms ease,
      box-shadow 240ms ease,
      background-color 240ms ease,
      color 240ms ease;
  }

  .btn:focus-visible,
  .m-btn-primary:focus-visible,
  .m-btn-secondary:focus-visible,
  .request-form button:focus-visible,
  .hims_nav-toggle:focus-visible,
  .hims_main-nav a:focus-visible {
    outline: 2px solid #ffb7b7;
    outline-offset: 4px;
  }

  .hims_main-nav a {
    position: relative;
  }

  .hims_main-nav a::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -5px;
    left: 0;
    height: 1px;
    background: var(--red);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 260ms ease;
  }

  .hims_main-nav a:hover::after,
  .hims_main-nav a:focus-visible::after,
  .hims_main-nav a.active::after {
    transform: scaleX(1);
    transform-origin: left;
  }

  .floating-whatsapp {
    animation: motion-whatsapp-in 700ms 800ms both;
  }

  .service-card,
  .process-step,
  .testimonial-card,
  .blog-card,
  .video-card,
  .partner-card,
  .story-card,
  .contact-card,
  .hims_hero-card {
    transition:
      transform 320ms cubic-bezier(.2, .75, .25, 1),
      border-color 320ms ease,
      box-shadow 320ms ease;
  }

  .service-card img,
  .blog-card img,
  .video-card img {
    transition: transform 700ms cubic-bezier(.2, .75, .25, 1);
  }

  .service-card,
  .process-step,
  .testimonial-card,
  .blog-card,
  .video-card,
  .gallery-item,
  .story-card,
  .hims_hero-card {
    transform-style: preserve-3d;
  }

  .hims-logo-item {
    transition: transform 300ms ease, filter 300ms ease;
  }
}

@media (min-width: 1101px) {
  .hims_hero-content > div:first-child {
    text-align: left;
  }

  .hims_hero-content > div:first-child .eyebrow,
  .hims_hero-content > div:first-child p {
    margin-inline: 0;
  }

  .hims_hero-content .cta-row {
    justify-content: flex-start;
  }
}

@media (max-width: 1100px) {
  .hims_hero-content > div:first-child {
    text-align: center;
  }

  .hims_hero-content > div:first-child .eyebrow,
  .hims_hero-content > div:first-child p {
    margin-inline: auto;
  }

  .hims_hero-content .cta-row {
    justify-content: center;
  }
}

@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .btn:hover,
  .m-btn-primary:hover,
  .m-btn-secondary:hover,
  .request-form button:hover {
    transform: translateY(-3px);
  }

  .btn-primary:hover {
    box-shadow: 0 10px 28px rgba(177, 31, 31, .3);
  }

  .service-card:hover,
  .process-step:hover,
  .testimonial-card:hover,
  .blog-card:hover,
  .video-card:hover,
  .partner-card:hover,
  .story-card:hover,
  .hims_hero-card:hover {
    transform: translateY(-6px);
    border-color: rgba(177, 31, 31, .55);
    box-shadow: 0 18px 44px rgba(0, 0, 0, .28);
  }

  .service-card:hover img,
  .blog-card:hover img,
  .video-card:hover img {
    transform: scale(1.04);
  }

  .gallery-item:hover img {
    transform: scale(1.07);
    filter: saturate(1.12);
  }

  .hims-logo-item:hover {
    transform: translateY(-4px);
    filter: brightness(1.12);
  }

  .floating-whatsapp:hover {
    transform: translateY(-4px) scale(1.04);
  }
}

@keyframes motion-header-in {
  from {
    opacity: 0;
    transform: translateY(-12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes motion-hero-glow {
  from { opacity: .2; }
  to { opacity: 1; }
}

@keyframes motion-hero-copy-in {
  from {
    opacity: 0;
    translate: 0 20px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}

@keyframes motion-hero-button-in {
  from {
    opacity: 0;
    translate: 0 14px;
    scale: .96;
  }
  to {
    opacity: 1;
    translate: 0 0;
    scale: 1;
  }
}

@keyframes motion-hero-card-in {
  from {
    opacity: 0;
    translate: 0 26px;
    scale: .98;
  }
  to {
    opacity: 1;
    translate: 0 0;
    scale: 1;
  }
}

@keyframes motion-image-arrive {
  from {
    opacity: .35;
    transform: scale(1.08);
    filter: saturate(.7);
  }
  to {
    opacity: 1;
    transform: scale(1);
    filter: saturate(1);
  }
}

@keyframes motion-whatsapp-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(.9);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}