/* Motion is attached to real interactions, never to a polling render. */
:root {
  --motion-press: 130ms;
  --motion-fast: 180ms;
  --motion-message: 160ms;
  --motion-photo: 210ms;
  --motion-dialog: 190ms;
  --motion-card: 360ms;
  --motion-ease: cubic-bezier(.2, .75, .25, 1);
}

/* Keep existing touch targets and the portrait's independent -1.2deg tilt. */
body[data-authenticated="true"] :is(.primary, .secondary, .icon-button, .save-photo, .nav-link, .tab, .composer button),
.gallery-controls button,
.expression-options span {
  transition: transform var(--motion-press) var(--motion-ease),
    background-color var(--motion-press) ease, color var(--motion-press) ease;
}
body[data-authenticated="true"] :is(.primary, .secondary, .icon-button, .save-photo, .nav-link, .tab, .composer button):active:not(:disabled),
.gallery-controls button:active:not(:disabled),
.expression-options label:active span { transform: scale(.98); }

.motion-card-enter { animation: solo-card-enter var(--motion-card) var(--motion-ease) both; }
.motion-card-ghost {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  padding: 22px;
  overflow: hidden;
  border-radius: var(--concept-radius-card, 24px);
  background-color: var(--soft);
  background-size: cover;
  background-position: center;
  color: #fff;
  font-size: var(--concept-type-name, 28px);
  font-weight: 750;
  line-height: 1.25;
  overflow-wrap: anywhere;
  text-shadow: 0 1px 8px #30212a80;
  transform: rotate(-1.2deg);
  pointer-events: none;
  user-select: none;
  animation: solo-card-exit var(--motion-dialog) var(--motion-ease) both;
}
.motion-photo-ghost {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-size: cover;
  background-position: center;
  pointer-events: none;
  animation: solo-photo-exit var(--motion-photo) var(--motion-ease) both;
}
.profile-main-photo { position: relative; }
img.motion-photo-enter,
.motion-photo-enter > img { animation: solo-photo-enter var(--motion-photo) var(--motion-ease) both; }
.motion-message-enter { animation: solo-message-enter var(--motion-message) var(--motion-ease) both; }
#dialog[open].motion-dialog-enter { animation: solo-dialog-enter var(--motion-dialog) var(--motion-ease) both; }
#dialog[open].motion-dialog-exit { animation: solo-dialog-exit var(--motion-press) var(--motion-ease) both; }
#dialog[open].motion-dialog-enter::backdrop { animation: solo-dim-enter var(--motion-dialog) ease both; }
#dialog[open].motion-dialog-exit::backdrop { animation: solo-dim-exit var(--motion-press) ease both; }
.motion-badge-change { animation: solo-badge-change var(--motion-fast) var(--motion-ease) both; }
.motion-nav-enter > svg { animation: solo-nav-enter var(--motion-dialog) var(--motion-ease) both; }
body[data-authenticated="true"] .motion-nav-enter.active::before { animation: solo-nav-indicator var(--motion-dialog) var(--motion-ease) both; }
.motion-route-enter { animation: solo-route-enter var(--motion-dialog) var(--motion-ease) both; }
body[data-authenticated="true"] .discovery-actions > .motion-pending[aria-busy="true"] { opacity: .85; }
.motion-pending[aria-busy="true"] > svg { animation: solo-heart-respond var(--motion-photo) var(--motion-ease) both; }
#toast .motion-confirmed { display: inline-flex; align-items: center; color: var(--accent); animation: solo-heart-respond var(--motion-photo) var(--motion-ease) both; }
#toast .motion-confirmed svg { width: 16px; height: 16px; fill: currentColor; }

/* Reuse the existing real-match layout. The CTA stays visible and clickable. */
body[data-authenticated="true"] .concept-match .match-portraits figure {
  animation: solo-match-portrait 400ms var(--motion-ease) 80ms both;
}
body[data-authenticated="true"] .concept-match .match-portraits figure:last-child { animation-delay: 160ms; }
body[data-authenticated="true"] .concept-match .match-heart {
  animation: solo-match-heart 340ms var(--motion-ease) 240ms both;
}
body[data-authenticated="true"] .concept-match .match-heading {
  animation: solo-match-heading 220ms var(--motion-ease) 400ms both;
}
body[data-authenticated="true"] .concept-match > .primary {
  animation: solo-match-cta 250ms var(--motion-ease) 500ms both;
}

@keyframes solo-card-enter {
  from { opacity: .35; transform: translateY(10px) scale(.99); }
  to { opacity: 1; transform: none; }
}
@keyframes solo-card-exit {
  from { opacity: 1; transform: rotate(-1.2deg); }
  to { opacity: 0; transform: rotate(-1.2deg) translateY(-6px) scale(.985); }
}
@keyframes solo-photo-enter {
  from { opacity: .7; transform: scale(1.012); }
  to { opacity: 1; transform: none; }
}
@keyframes solo-photo-exit { from { opacity: 1; } to { opacity: 0; } }
@keyframes solo-message-enter {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
@keyframes solo-dialog-enter {
  from { opacity: .4; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
@keyframes solo-dialog-exit {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: translateY(8px); }
}
@keyframes solo-dim-enter { from { opacity: 0; } to { opacity: 1; } }
@keyframes solo-dim-exit { from { opacity: 1; } to { opacity: 0; } }
@keyframes solo-badge-change {
  0%, 100% { transform: scale(1); }
  45% { transform: scale(1.12); }
}
@keyframes solo-nav-enter {
  from { opacity: .65; transform: translateY(2px); }
  to { opacity: 1; transform: none; }
}
@keyframes solo-nav-indicator {
  from { opacity: .45; transform: scaleX(.55); }
  to { opacity: 1; transform: scaleX(1); }
}
@keyframes solo-route-enter {
  from { opacity: .75; transform: translateY(3px); }
  to { opacity: 1; transform: none; }
}
@keyframes solo-heart-respond {
  0%, 100% { transform: scale(1); }
  45% { transform: scale(1.12); }
}
@keyframes solo-match-portrait {
  from { opacity: .15; transform: translateY(10px) scale(.97); }
  to { opacity: 1; transform: none; }
}
@keyframes solo-match-heart {
  from { opacity: 0; transform: scale(.85); }
  65% { opacity: 1; transform: scale(1.08); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes solo-match-heading {
  from { opacity: .55; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}
@keyframes solo-match-cta { from { opacity: .65; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .motion-card-enter,
  img.motion-photo-enter,
  .motion-photo-enter > img,
  .motion-message-enter,
  #dialog[open].motion-dialog-enter,
  #dialog[open].motion-dialog-exit,
  #dialog[open].motion-dialog-enter::backdrop,
  #dialog[open].motion-dialog-exit::backdrop,
  .motion-badge-change,
  .motion-nav-enter > svg,
  .motion-nav-enter.active::before,
  .motion-route-enter,
  .motion-pending[aria-busy="true"] > svg,
  #toast .motion-confirmed,
  body[data-authenticated="true"] .concept-match :is(.match-portraits figure, .match-heart, .match-heading, .primary) {
    animation: none !important;
    transition: none !important;
  }
  .motion-card-ghost,
  .motion-photo-ghost { display: none !important; }
  body[data-authenticated="true"] :is(.primary, .secondary, .icon-button, .save-photo, .nav-link, .tab, .composer button):active:not(:disabled),
  .gallery-controls button:active:not(:disabled),
  .expression-options label:active span { transform: none; }
}