/* 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;
}

/* Generation progress blob animations */
@keyframes blob-morph-1 {
  0%, 100% { d: path('M100,40 C130,40 160,60 160,100 C160,140 130,160 100,160 C70,160 40,140 40,100 C40,60 70,40 100,40 Z'); }
  25% { d: path('M110,35 C150,45 170,70 165,110 C160,150 125,170 90,165 C55,160 30,135 35,95 C40,55 70,25 110,35 Z'); }
  50% { d: path('M95,30 C135,35 165,65 160,105 C155,145 130,175 85,165 C40,155 25,125 30,90 C35,55 55,25 95,30 Z'); }
  75% { d: path('M105,38 C145,48 165,75 155,115 C145,155 115,170 80,160 C45,150 30,120 40,85 C50,50 65,28 105,38 Z'); }
}
@keyframes blob-drift-1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(12px, -8px) scale(1.05); }
  66% { transform: translate(-8px, 10px) scale(0.95); }
}
@keyframes blob-drift-2 {
  0%, 100% { transform: translate(0, 0) scale(1) rotate(0deg); }
  33% { transform: translate(-15px, 12px) scale(1.1) rotate(20deg); }
  66% { transform: translate(10px, -14px) scale(0.9) rotate(-15deg); }
}
@keyframes blob-drift-3 {
  0%, 100% { transform: translate(0, 0) scale(1) rotate(0deg); }
  33% { transform: translate(10px, 8px) scale(0.92) rotate(-25deg); }
  66% { transform: translate(-12px, -6px) scale(1.08) rotate(15deg); }
}
@keyframes bg-shift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
.generating-blobs { filter: blur(8px); }
.blob-1 { animation: blob-drift-1 6s ease-in-out infinite; will-change: transform; }
.blob-2 { animation: blob-drift-2 8s ease-in-out infinite; will-change: transform; }
.blob-3 { animation: blob-drift-3 7s ease-in-out infinite; will-change: transform; }
[data-progress-panel] {
  contain: content;
}
[data-progress-panel] .bg-gradient-to-br {
  background-size: 200% 200%;
  animation: bg-shift 4s ease-in-out infinite;
  will-change: background-position;
}