/* Motion system — calm, spatial and mobile-first.
   JavaScript only adds choreography; content remains fully usable without it. */

:root {
  --motion-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --motion-ease-press: cubic-bezier(0.25, 1, 0.5, 1);
}

.motion-reveal { opacity: 0; }

.route-back-underlay .motion-reveal,
.route-back-underlay .motion-media-sequence img {
  opacity: 1 !important;
  transform: none !important;
}

.motion-media-sequence.motion-media-settled img {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

/* Outcome sections are revealed only by the page-entry controller. This removes
   their old mount animation, which could replay after a same-screen filter or
   state update. */
.outcome-reveal {
  animation: none !important;
}

/* State-local content owns its own short arrival. Stable page chrome, mentors,
   headings and bottom controls are intentionally excluded. */
.profile-flow--step-1 :is(.profile-account-field, .profile-code-request, .profile-consent),
.profile-flow--step-2 .profile-preview {
  animation: motion-local-state-in 360ms var(--motion-ease-out) both;
}

.profile-flow--step-2 .profile-glossary,
.profile-flow--step-2 .profile-saved {
  animation: motion-local-state-in 360ms 70ms var(--motion-ease-out) both;
}

.outcome-subject,
.outcome-report {
  animation: motion-local-state-in 340ms var(--motion-ease-out) both;
}

/* The exploration photos arrive like postcards being placed on the page.
   Images wait for decoding, and the card itself must be visible first. */
.motion-media-sequence img {
  opacity: 0;
  transform: translate3d(0.7rem, 0.55rem, 0) rotate(1.4deg) scale(0.95);
  transform-origin: center bottom;
}

.motion-entered .motion-media-sequence.is-media-ready.is-media-visible img {
  animation: motion-postcard-arrive 480ms var(--motion-ease-out) both;
}

.motion-entered .motion-media-sequence.is-media-ready.is-media-visible img:nth-child(1) { animation-delay: 40ms; }
.motion-entered .motion-media-sequence.is-media-ready.is-media-visible img:nth-child(2) { animation-delay: 115ms; }
.motion-entered .motion-media-sequence.is-media-ready.is-media-visible img:nth-child(3) { animation-delay: 190ms; }
.motion-entered .motion-media-sequence.is-media-ready.is-media-visible img:nth-child(4) { animation-delay: 265ms; }
.motion-entered .motion-media-sequence.is-media-ready.is-media-visible img:nth-child(5) { animation-delay: 340ms; }

.profile-field:focus-within,
.profile-account-field:focus-within,
.outcome-offer-form label:focus-within {
  transition-duration: 180ms;
  transition-timing-function: var(--motion-ease-out);
}

/* Press feedback is scoped to stationary controls so it never replaces the
   transform used by draggable cards, centered labels or page gestures. */
:is(
  .mentor-chat-card,
  .mentor-chat-composer-shell,
  .mentor-company-card,
  .mentor-value-preview,
  .feedback-life-card,
  .mentor-exploration-entry,
  .scene-rating-flow,
  .binary-choice-flow,
  .preference-analysis,
  .mentor-opportunity-card,
  .opportunity-detail,
  .opportunity-feedback,
  .enterprise-preference-question,
  .value-card-flow,
  .outcome-page
) button:not(:disabled) {
  transition: transform 140ms var(--motion-ease-press), background-color 180ms var(--motion-ease-out), border-color 180ms var(--motion-ease-out), color 180ms var(--motion-ease-out);
}

:is(
  .mentor-chat-card,
  .mentor-chat-composer-shell,
  .mentor-company-card,
  .mentor-value-preview,
  .feedback-life-card,
  .mentor-exploration-entry,
  .scene-rating-flow,
  .binary-choice-flow,
  .preference-analysis,
  .mentor-opportunity-card,
  .opportunity-detail,
  .opportunity-feedback,
  .enterprise-preference-question,
  .value-card-flow,
  .outcome-page
) button:not(:disabled):active {
  transform: scale(0.975);
}

@keyframes motion-postcard-arrive {
  from { opacity: 0; transform: translate3d(0.7rem, 0.55rem, 0) rotate(1.4deg) scale(0.95); }
  to { opacity: 1; transform: translate3d(0, 0, 0) rotate(0) scale(1); }
}

@keyframes motion-local-state-in {
  from { opacity: 0; transform: translate3d(0, 0.55rem, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes motion-local-sheet-in {
  from { opacity: 0.55; transform: translate3d(0, 0.7rem, 0) scale(0.99); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes motion-local-card-in {
  from { opacity: 0; transform: translate3d(0.45rem, 0.4rem, 0) rotate(1deg) scale(0.985); }
  to { opacity: 1; transform: translate3d(0, 0, 0) rotate(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .motion-reveal { opacity: 1 !important; }
  .motion-media-sequence img { opacity: 1 !important; transform: none !important; }
  .motion-entered .motion-media-sequence.is-media-ready.is-media-visible img,
  .profile-flow--step-1 :is(.profile-account-field, .profile-code-request, .profile-consent),
  .profile-flow--step-2 .profile-preview,
  .profile-flow--step-2 .profile-glossary,
  .profile-flow--step-2 .profile-saved,
  .outcome-subject,
  .outcome-report { animation: none !important; }
}