/* Rules the Style panel can't express yet. Everything else lives in styles/webcontra.css. */

/* The dimmed page behind the calendar modal. */
.calendar-modal::backdrop {
  background: rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(4px);
}

/* Days before today can't be picked. */
.calendar-day:disabled {
  opacity: 0.3;
  cursor: default;
  background: transparent;
}

/* Headline filled by its animated gradient. Safari still wants the prefixes. */
.hero-label-h1 {
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Animations. Classes in the Style panel refer to these by name. */
@keyframes page-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}

@keyframes pop-in {
  from { opacity: 0; transform: scale(0.6); }
  to { opacity: 1; transform: none; }
}

@keyframes modal-in {
  from { opacity: 0; transform: translateY(12px) scale(0.96); }
  to { opacity: 1; transform: none; }
}

@keyframes ring-pulse {
  0% { box-shadow: 0 0 0 0 rgba(17, 17, 17, 0.18); }
  70% { box-shadow: 0 0 0 16px rgba(17, 17, 17, 0); }
  100% { box-shadow: 0 0 0 0 rgba(17, 17, 17, 0); }
}

@keyframes shimmer {
  from { background-position: 200% center; }
  to { background-position: -200% center; }
}

@keyframes slow-zoom {
  from { transform: scale(1); }
  to { transform: scale(1.12); }
}

@keyframes grid-pan {
  from { background-position: 0 0, 0 0; }
  to { background-position: 56px 56px, 56px 56px; }
}

@keyframes blob-drift-a {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(8vw, 6vh) scale(1.15); }
}

@keyframes blob-drift-b {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-10vw, -5vh) scale(0.9); }
}

@keyframes blob-drift-c {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(6vw, -8vh) scale(1.1); }
}

/* For people who have asked their device for less motion: everything
   arrives already in place and nothing drifts. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}