@keyframes screenIn {
  from { opacity: 0.98; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}
@keyframes sheetUp {
  from { transform: translateY(28%); }
  to { transform: none; }
}
@keyframes sheetScrimIn {
  from { background: rgba(28,20,24,0); }
  to { background: rgba(28,20,24,0.28); }
}
@keyframes riseIn {
  from { opacity: 0.96; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
@keyframes fadeLift {
  from { opacity: 0.97; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}
@keyframes pulseRose {
  0%, 100% { box-shadow: 0 0 0 0 rgba(244,63,122,0.35); transform: scale(1); }
  50% { box-shadow: 0 0 0 12px rgba(244,63,122,0); transform: scale(1.06); }
}
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@keyframes spotDrift {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(10px, -8px); }
}
@keyframes spotDriftAlt {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-8px, 6px); }
}
@keyframes tabPop {
  0% { transform: scale(1); }
  45% { transform: scale(1.1); }
  100% { transform: scale(1.06); }
}
@keyframes photoIn {
  from { opacity: 0.92; }
  to { opacity: 1; }
}
@keyframes softFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

.rise { animation: riseIn 360ms cubic-bezier(0.22, 1, 0.36, 1) both; }
.rise-d1 { animation-delay: 40ms; }
.rise-d2 { animation-delay: 80ms; }
.rise-d3 { animation-delay: 120ms; }
.rise-d4 { animation-delay: 160ms; }

.mic-pulse.recording {
  animation: pulseRose 900ms ease-in-out infinite;
  background: var(--rose) !important;
  color: #fff !important;
}

.hero-wash {
  background: linear-gradient(180deg, #FFF0F5 0%, #FFF8F6 72%);
}

.shimmer-line {
  height: 4px;
  width: 48px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--rose-soft), var(--rose), var(--rose-soft));
  background-size: 200% 100%;
  animation: shimmer 2.4s linear infinite;
}

.masonry-item { animation: fadeLift 280ms cubic-bezier(0.22, 1, 0.36, 1) both; }
.look-card .cover,
.look-ed-cover,
.looksheet-cover,
.template-card .preview-photo {
  animation: photoIn 280ms ease both;
}

/* Layout 3 living layers — keep subtle; avoid opacity dips that read as a mask flash */
.glow-spot-a { animation: spotDrift 7s ease-in-out infinite; }
.glow-spot-b { animation: spotDriftAlt 8.5s ease-in-out infinite; }
.glow-spot-c { animation: spotDrift 6.2s ease-in-out infinite; animation-delay: -2s; }
.glow-spot-d { animation: spotDriftAlt 9s ease-in-out infinite; }
.glow-spot-e { animation: spotDrift 7.5s ease-in-out infinite; animation-delay: -1.5s; }

.tab img {
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), opacity 180ms ease, width 180ms ease, height 180ms ease, filter 180ms ease;
}
.tab.active img {
  animation: tabPop 300ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.btn {
  transition: transform 120ms ease, background 150ms ease, opacity 150ms ease, box-shadow 180ms ease;
}
.btn-primary:active { transform: scale(0.97); }
.chip {
  transition: transform 140ms ease, background 160ms ease, color 160ms ease;
}
.chip:active { transform: scale(0.96); }

@media (prefers-reduced-motion: reduce) {
  .rise, .masonry-item, .look-card .cover, .look-ed-cover, .looksheet-cover, .template-card .preview-photo,
  .glow-spot-a, .glow-spot-b, .glow-spot-c, .glow-spot-d, .glow-spot-e,
  .tab.active img, .screen.active {
    animation: none !important;
  }
}