/* Welcome cover — fullscreen Spark-style inbox greeting.
   Loaded separately after application.css in the layout. */

/* Background layers (cover-1 photo, cover-2 photo, aurora gradient). Only the
   .cover-bg-active layer is shown; the toggle cycles through them. */
.cover-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 600ms ease;
}

.cover-bg-active {
  opacity: 1;
}

img.cover-bg {
  object-fit: cover;
}

/* Legibility overlay over the background so white text reads well */
.cover-photo-overlay {
  background: linear-gradient(
    to bottom,
    rgba(8, 12, 32, 0.32),
    rgba(8, 12, 32, 0.08) 45%,
    rgba(8, 12, 32, 0.42)
  );
}

/* Aurora/gradient style used by cover-2 cycle state */
.cover-blob {
  position: absolute;
  border-radius: 9999px;
  filter: blur(70px);
  opacity: 0.65;
  will-change: transform;
  animation: cover-float 22s ease-in-out infinite;
}

.cover-blob-a {
  width: 55vmax;
  height: 55vmax;
  top: -18vmax;
  left: -14vmax;
  background: radial-gradient(circle at 30% 30%, rgba(96, 165, 250, 0.85), rgba(59, 130, 246, 0.0) 70%);
}

.cover-blob-b {
  width: 45vmax;
  height: 45vmax;
  bottom: -16vmax;
  right: -12vmax;
  background: radial-gradient(circle at 60% 40%, rgba(167, 139, 250, 0.8), rgba(129, 140, 248, 0.0) 70%);
  animation-delay: -8s;
}

.cover-blob-c {
  width: 40vmax;
  height: 40vmax;
  top: 30%;
  right: 22%;
  background: radial-gradient(circle at 50% 50%, rgba(79, 70, 229, 0.65), rgba(30, 64, 175, 0.0) 72%);
  animation-delay: -15s;
}

/* Deep forest-green aurora blobs (reuse .cover-blob base) */
.cover-blob-green-a {
  width: 55vmax;
  height: 55vmax;
  top: -18vmax;
  left: -14vmax;
  background: radial-gradient(circle at 30% 30%, rgba(52, 211, 153, 0.55), rgba(16, 185, 129, 0.0) 70%);
}

.cover-blob-green-b {
  width: 45vmax;
  height: 45vmax;
  bottom: -16vmax;
  right: -12vmax;
  background: radial-gradient(circle at 60% 40%, rgba(132, 204, 22, 0.5), rgba(101, 163, 13, 0.0) 70%);
  animation-delay: -8s;
}

.cover-blob-green-c {
  width: 40vmax;
  height: 40vmax;
  top: 30%;
  right: 22%;
  background: radial-gradient(circle at 50% 50%, rgba(22, 101, 52, 0.7), rgba(6, 78, 59, 0.0) 72%);
  animation-delay: -15s;
}

@keyframes cover-float {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(3vmax, -2vmax, 0) scale(1.08); }
}

.cover-grain {
  mix-blend-mode: overlay;
  opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
}

/* Blurred "loading" state — cleared once the active background image loads */
.cover-loading {
  filter: blur(14px);
  opacity: 0.4;
  transform: scale(1.03);
  will-change: filter, opacity, transform;
  transition:
    filter 700ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 700ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

.cover-loading.cover-loaded {
  filter: blur(0);
  opacity: 1;
  transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .cover-loading {
    filter: none;
    opacity: 1;
    transform: none;
    transition: none;
  }

  .cover-bg,
  .cover-bg-active {
    transition: none;
  }

  .cover-blob {
    animation: none;
  }
}

/* Transparent burger-menu dropdown on the cover */
.cover-menu {
  animation: cover-menu-in 150ms ease-out;
}

/* The cover's create-event dialog: skip the shared modal fade/scale animation,
   which is unreliable inside the cover's transformed/blurred loading region. */
dialog.cover-modal {
  animation: none !important;
  opacity: 1;
}

@keyframes cover-menu-in {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cover-menu {
    animation: none;
  }
}

.cover-reveal {
  opacity: 0;
  animation: cover-reveal 700ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes cover-reveal {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

li[data-reveal] {
  opacity: 0;
  animation: cover-reveal 600ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@media (prefers-reduced-motion: reduce) {
  .cover-reveal,
  li[data-reveal] {
    animation: none;
    opacity: 1;
    transform: none;
  }
}