/* Journey Hero Animation Styles */

.journey-animation {
    position: absolute;
    top: 0;
    right: 0;
    width: 55%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
    pointer-events: none;
    opacity: 0.7;
    background: transparent;
}

.journey-animation svg {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
}

/* Animation Container */
.journey-svg {
    width: 100%;
    height: 100%;
}

.journey-scene {
    opacity: 0;
    visibility: hidden;
}

.journey-scene.active {
    opacity: 1;
    visibility: visible;
}

/* Stick Figure Styles */
.stick-figure {
    transform-origin: center center;
    will-change: transform;
}

.stick-figure path,
.stick-figure line,
.stick-figure circle,
.stick-figure rect {
    vector-effect: non-scaling-stroke;
}

/* Walking Animation */
@keyframes walk-cycle {
    0%, 100% {
        transform: translateX(0) rotate(0deg);
    }
    25% {
        transform: translateX(5px) rotate(2deg);
    }
    50% {
        transform: translateX(10px) rotate(0deg);
    }
    75% {
        transform: translateX(5px) rotate(-2deg);
    }
}

.stick-figure-walking {
    animation: walk-cycle 0.8s ease-in-out infinite;
}

/* Baggage Styles */
.baggage {
    will-change: transform;
    transform-origin: center center;
}

/* Landmark Styles */
.landmark {
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.landmark.visible {
    opacity: 1;
    transform: scale(1);
}

/* Train Styles */
.train {
    will-change: transform;
    transform-origin: left center;
}

/* Book Styles */
.book {
    will-change: transform, opacity;
    opacity: 0;
}

.book.visible {
    opacity: 1;
}

@keyframes float {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    50% {
        transform: translateY(-10px) rotate(5deg);
    }
}

.book-floating {
    animation: float 2s ease-in-out infinite;
}

/* Twitter Bird Styles */
.twitter-bird {
    will-change: transform;
    transform-origin: center center;
}

@keyframes fly {
    0% {
        transform: translateX(-100px) translateY(0) rotate(0deg);
    }
    50% {
        transform: translateX(0) translateY(-20px) rotate(10deg);
    }
    100% {
        transform: translateX(100px) translateY(0) rotate(0deg);
    }
}

.twitter-bird-flying {
    animation: fly 3s ease-in-out;
}

/* Office Building Styles */
.office-building {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.office-building.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Desk Styles */
.desk {
    opacity: 0;
    transform: translateY(10px);
}

.desk.visible {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

/* Computer Screen Styles */
.computer-screen {
    opacity: 0;
    transform: scale(0.8);
}

.computer-screen.visible {
    opacity: 1;
    transform: scale(1);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

/* Rich Media Ad Styles */
.rich-media-ad {
    opacity: 0;
    transform: scale(0.9) rotate(-2deg);
}

.rich-media-ad.visible {
    opacity: 1;
    transform: scale(1) rotate(0deg);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

/* Chart Styles */
.chart {
    opacity: 0;
}

.chart.visible {
    opacity: 1;
    transition: opacity 0.8s ease;
}

.chart-bar {
    transform-origin: bottom;
    transform: scaleY(0);
    transition: transform 0.8s ease;
}

.chart-bar.visible {
    transform: scaleY(1);
}

/* Bookshelf Styles */
.bookshelf {
    opacity: 0;
    transform: translateX(-20px);
}

.bookshelf.visible {
    opacity: 1;
    transform: translateX(0);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.shelf-book {
    opacity: 0;
    transform: scale(0.8);
}

.shelf-book.visible {
    opacity: 1;
    transform: scale(1);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Year Text Styles */
.year-text {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 1.2rem;
    font-weight: 600;
    color: #1a1a1a;
    opacity: 0;
    transform: translateY(10px);
    white-space: nowrap;
}

.year-text.visible {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

/* Scene Background Overlays */
.scene-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.8s ease;
}

.scene-bg.visible {
    opacity: 1;
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    .journey-animation,
    .journey-scene,
    .stick-figure,
    .baggage,
    .landmark,
    .train,
    .book,
    .twitter-bird,
    .office-building,
    .desk,
    .computer-screen,
    .rich-media-ad,
    .chart,
    .bookshelf,
    .shelf-book,
    .year-text {
        animation: none !important;
        transition: opacity 0.3s ease !important;
    }

    .journey-animation {
        opacity: 0.8;
    }
}

/* Mobile Optimizations */
@media (max-width: 768px) {
    .journey-animation {
        width: 100%;
        opacity: 0.4;
    }

    .year-text {
        font-size: 1rem;
    }
}

/* Loading State */
.journey-animation.loading {
    opacity: 0;
}

.journey-animation.ready {
    opacity: 1;
    transition: opacity 0.5s ease;
}

/* Pause/Play Button */
.journey-controls {
    position: absolute;
    bottom: 20px;
    right: 20px;
    z-index: 10;
    display: flex;
    gap: 10px;
    pointer-events: auto;
}

.journey-control-btn {
    background: rgba(26, 26, 26, 0.8);
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    transition: background 0.3s ease, transform 0.2s ease;
    backdrop-filter: blur(10px);
}

.journey-control-btn:hover {
    background: rgba(26, 26, 26, 0.95);
    transform: scale(1.05);
}

.journey-control-btn:active {
    transform: scale(0.95);
}

/* Accessibility: Screen Reader Only */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}