/* Minimal global styles; page styling lives in Tailwind utility classes. */

* {
  box-sizing: border-box;
}

/* Word cycle animation */
.word-cycle-wrapper {
  display: inline-block;
  overflow: visible;
  vertical-align: baseline;
  line-height: 1.15;
}

.word-cycle {
  display: inline-block;
  overflow: visible;
  line-height: 1.15;
  will-change: transform, opacity;
  transition: opacity 0.3s ease, transform 0.3s ease;
  background: linear-gradient(135deg, #6366f1, #a855f7, #c084fc);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  padding: 0 4px;
}

.word-cycle.word-exit {
  opacity: 0;
  transform: translateY(-5px);
}

.word-cycle.word-enter {
  animation: wordEnter 0.4s ease forwards;
}

@keyframes wordEnter {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Photo grid crossfade */
.photo-grid-cell {
  transition: opacity 0.35s ease, transform 0.35s ease;
}

/* Collage shuffle transitions */
.collage-figure {
  position: absolute;
  transition: left 0.65s cubic-bezier(0.4, 0, 0.2, 1),
              top 0.65s cubic-bezier(0.4, 0, 0.2, 1),
              width 0.65s cubic-bezier(0.4, 0, 0.2, 1),
              padding 0.65s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.65s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.65s cubic-bezier(0.4, 0, 0.2, 1),
              z-index 0s;
}
.collage-caption {
  transition: opacity 0.4s ease,
              max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1),
              padding-top 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

/* Hero state: large, centered via absolute left/top */
.collage-hero {
  z-index: 10;
  left: 20%;
  top: 8%;
  width: 60%;
  padding: 0.5rem 0.5rem 0.75rem;
  box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
}
@media (min-width: 640px) {
  .collage-hero { padding: 0.75rem 0.75rem 1.5rem; }
}
.collage-hero .collage-caption { opacity: 1; max-height: 3rem; }

/* Scattered photo state: small */
.collage-photo {
  width: 26%;
  padding: 0.375rem;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}
@media (min-width: 640px) {
  .collage-photo { padding: 0.5rem; }
}
.collage-photo .collage-caption { opacity: 0; max-height: 0; padding-top: 0; }

/* Shuffle button disabled state */
button[data-collage-shuffle-target="button"]:disabled {
  opacity: 0.5;
  cursor: default;
}

@keyframes collage-icon-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.collage-icon-spin {
  animation: collage-icon-spin 0.65s ease-in-out;
}

/* Flash toast animations */
@keyframes flash-slide-in {
  from { opacity: 0; transform: translateY(12px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes flash-progress {
  from { transform: scaleX(1); transform-origin: left; }
  to   { transform: scaleX(0); transform-origin: left; }
}

/* Calendar cross-highlight */
a.calendar-highlight {
  background-color: #818cf8;
  scale: 1.1;
}
li.calendar-highlight {
  background-color: #eef2ff;
  border-radius: 0.75rem;
}