/**
 * Smooth Transitions Styles - Sprint 7
 * Styles for element, modal, panel, and content transitions
 */

/* ============================================
   ELEMENT TRANSITIONS
   ============================================ */

.transition-element {
    transition: all 0.3s ease;

.transitioning {
    transition: all 0.3s ease !important;

/* ============================================
   MODAL TRANSITIONS
   ============================================ */

.modal-overlay {
    transition: opacity 0.3s ease;

.modal-content {
    transition: transform 0.3s ease, opacity 0.3s ease;

.modal-overlay[style*="display: flex"] .modal-content {
    animation: modalEnter 0.4s ease-out;

@keyframes modalEnter {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);

    to {
        opacity: 1;
        transform: translateY(0) scale(1);

/* ============================================
   PANEL TRANSITIONS
   ============================================ */

.panel {
    transition: opacity 0.3s ease, transform 0.3s ease;

.panel-enter {
    animation: panelSlideIn 0.3s ease-out;

.panel-exit {
    animation: panelSlideOut 0.3s ease-in;

@keyframes panelSlideIn {
    from {
        opacity: 0;
        transform: translateX(100%);

    to {
        opacity: 1;
        transform: translateX(0);

@keyframes panelSlideOut {
    from {
        opacity: 1;
        transform: translateX(0);

    to {
        opacity: 0;
        transform: translateX(100%);

/* ============================================
   CONTENT TRANSITIONS
   ============================================ */

.transition-content {
    transition: opacity 0.4s ease, transform 0.4s ease;

.content-enter {
    animation: contentFadeIn 0.4s ease-out;

.content-exit {
    animation: contentFadeOut 0.3s ease-in;

@keyframes contentFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);

    to {
        opacity: 1;
        transform: translateY(0);

@keyframes contentFadeOut {
    from {
        opacity: 1;
        transform: translateY(0);

    to {
        opacity: 0;
        transform: translateY(-20px);

/* ============================================
   CROSS-FADE TRANSITION
   ============================================ */

.cross-fade-container {
    position: relative;

.cross-fade-item {
    transition: opacity 0.3s ease;

.cross-fade-item.fade-out {
    opacity: 0;

.cross-fade-item.fade-in {
    opacity: 1;

/* ============================================
   SLIDE TRANSITION
   ============================================ */

.slide-container {
    position: relative;
    overflow: hidden;

.slide-item {
    transition: transform 0.3s ease;

.slide-item.slide-left {
    transform: translateX(-100%);

.slide-item.slide-right {
    transform: translateX(100%);

.slide-item.slide-up {
    transform: translateY(-100%);

.slide-item.slide-down {
    transform: translateY(100%);

.slide-item.slide-active {
    transform: translate(0, 0);

/* ============================================
   RESPECT REDUCED MOTION
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    .transition-element,
    .transitioning,
    .modal-overlay,
    .modal-content,
    .panel,
    .transition-content,
    .cross-fade-item,
    .slide-item {
        animation: none !important;
        transition: none !important;
        transform: none !important;

}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}