/*
 * Small public-site stylesheet. The native product UI is implemented in the
 * separate iOS application and does not ship browser-shell CSS from Rails.
 */

input[type="date"] {
  position: relative;
}

input[type="date"]::-webkit-calendar-picker-indicator {
  position: absolute;
  right: 0.75rem;
  cursor: pointer;
}

.marketing-screen-rail {
  overscroll-behavior-x: contain;
  scrollbar-color: rgb(56 189 248 / 55%) transparent;
  scrollbar-width: thin;
}

.marketing-screen-rail::-webkit-scrollbar {
  height: 0.35rem;
}

.marketing-screen-rail::-webkit-scrollbar-thumb {
  background: rgb(56 189 248 / 55%);
  border-radius: 999px;
}

[data-story-screen] {
  opacity: 0;
  pointer-events: none;
  transform: translateY(0.75rem) scale(0.985);
}

[data-story-screen][data-active="true"] {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.marketing-story-step[data-active="true"] .marketing-story-dot {
  box-shadow: 0 0 0 0.4rem rgb(56 189 248 / 14%);
  transform: translateY(-50%) scale(1.12);
}

.marketing-fan-phone--left {
  transform: rotate(-3deg);
}

.marketing-fan-phone--right {
  transform: translateY(2rem) rotate(3deg);
}

@media (prefers-reduced-motion: no-preference) {
  .marketing-button {
    transition: box-shadow 180ms ease, transform 180ms ease;
  }

  .marketing-button:hover,
  .marketing-button:focus-visible {
    box-shadow: 0 0.75rem 1.8rem -1rem rgb(12 27 45 / 48%);
    transform: translateY(-2px);
  }

  .marketing-button:active {
    transform: translateY(0) scale(0.985);
  }

  .marketing-motion-ready [data-reveal] {
    transition: transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--reveal-delay, 0ms);
  }

  .marketing-motion-ready [data-reveal][data-reveal-state="pending"] {
    transform: translateY(1.125rem);
  }

  .marketing-motion-ready [data-reveal="hero-phone"][data-reveal-state="pending"] {
    opacity: 0;
    transform: translateY(1.5rem) rotate(1.5deg) scale(0.975);
  }

  .marketing-motion-ready [data-reveal="hero-phone"] {
    transition: opacity 520ms ease-out,
      transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .marketing-motion-ready [data-reveal="story-line"][data-reveal-state="pending"] {
    transform: scaleY(0);
  }

  .marketing-motion-ready [data-reveal="phone-fan"][data-reveal-state="pending"] {
    opacity: 0;
    transform: translateY(1.5rem) scale(0.985);
  }

  .marketing-motion-ready [data-reveal="phone-fan"] {
    transition: opacity 520ms ease-out,
      transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  [data-story-screen],
  .marketing-story-dot {
    transition: opacity 420ms ease, transform 520ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 420ms ease;
  }

  .marketing-menu[open]::backdrop {
    animation: marketing-backdrop-in 180ms ease-out both;
  }

  .marketing-menu[open] .marketing-menu__panel {
    animation: marketing-menu-in 260ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  @keyframes marketing-backdrop-in {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  @keyframes marketing-menu-in {
    from { transform: translateX(1.25rem); }
    to { transform: translateX(0); }
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
  }

  [data-story-screen],
  .marketing-story-step,
  .marketing-story-dot,
  .marketing-button,
  .marketing-menu::backdrop,
  .marketing-menu__panel {
    animation: none !important;
    transition: none !important;
  }
}