/* Custom styles for sticky card ordering and z-index */
/* Note: Tailwind utilities are loaded from dist/output.css */

/* Custom Base Styles */
:root {
    --color-yellow: #ffff00;
}

body {
    background-color: #000;
    color: #fff;
}

/* Accessibility: Focus Styles */
/* Default: Hide focus rings for mouse users */
:focus {
    outline: none;
}

/* Show focus rings only for keyboard users */
body.user-is-tabbing :focus,
body.user-is-tabbing *:focus {
    outline: 2px solid var(--color-yellow);
    outline-offset: 2px;
}

/* Modern browser support: use :focus-visible when available */
:focus-visible {
    outline: 2px solid var(--color-yellow);
    outline-offset: 2px;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.no-scrollbar {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}

/* Desktop Player: Idle State (Cinematic Controls Fade) */
.user-idle {
    cursor: none;
}

.user-idle .controls-layer {
    opacity: 0;
    pointer-events: none;
}

.user-idle .close-btn {
    opacity: 0;
    pointer-events: none;
}

/* Note: Controls stay visible if video is paused (logic handles adding class only when playing) */

/* ================================================
   FALLING BEAMS ANIMATION
   ================================================ */
@keyframes beam-fall {
    0% {
        transform: translateY(-100%);
        opacity: 0;
    }

    5% {
        opacity: 0.5;
    }

    50% {
        opacity: 1;
    }

    95% {
        opacity: 0.5;
    }

    100% {
        transform: translateY(120vh);
        opacity: 0;
    }
}

.animate-beam-1 {
    animation: beam-fall 6s linear infinite;
    animation-delay: 0s;
}

.animate-beam-2 {
    animation: beam-fall 8s linear infinite;
    animation-delay: 2s;
}

.animate-beam-3 {
    animation: beam-fall 7s linear infinite;
    animation-delay: 4s;
}

/* ================================================
   ROADMAP ACTIVE STATE STYLES
   ================================================ */
.roadmap-step.is-active .step-marker {
    border-color: rgba(255, 217, 0, 0.5);
    box-shadow: 0 0 30px rgba(255, 217, 0, 0.4);
    background-color: rgba(255, 217, 0, 0.1);
    transform: scale(1.1);
}

.roadmap-step.is-active .step-number {
    color: #ffd900;
}

.roadmap-step.is-active .step-content {
    background-color: rgba(10, 10, 10, 1.0);
    border-color: rgba(255, 217, 0, 0.1);
}

.roadmap-step.is-active .step-icon {
    color: white;
}

/* Last Step Special Shine Animation */
.roadmap-step:last-child .step-marker {
    background: #0a0a0a;
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: none;
    transform: scale(1);
}

.roadmap-step:last-child.is-active .step-marker {
    background: linear-gradient(to bottom right, #ffd900, #ca8a04) !important;
    border-color: transparent;
    box-shadow: 0 0 30px rgba(255, 217, 0, 0.4);
    transform: scale(1.1);
}

.roadmap-step:last-child .step-marker svg {
    color: #737373;
    transition: color 0.5s ease;
}

.roadmap-step:last-child.is-active .step-marker svg {
    color: #000000;
}

/* Goal badge animation */
.roadmap-step:last-child .goal-badge {
    opacity: 0;
    transform: translateX(-10px);
    transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) 0.2s;
}

.roadmap-step:last-child.is-active .goal-badge {
    opacity: 1;
    transform: translateX(0);
}

/* ================================================
   STACKING CARDS TRANSITIONS
   ================================================ */
.sticky-card {
    transition: transform 0.3s ease-out, filter 0.3s ease-out;
    will-change: transform, filter;
}

/* ================================================
   VIDEO CARD ORDERING & Z-INDEX
   Desktop: Landscape first (work1, work5, work6), then Portrait (work2, work3, work4)
   Mobile: Portrait first (work2, work3, work4), then Landscape (work1, work5, work6)

   Z-index must increase with order so later cards stack ON TOP of earlier ones
   ================================================ */

/* Mobile ordering: Charles Dickens(work2), Jane Austen(work3), Oscar Wilde(work4), A Proper Yellow Tale(work8), Making of(work9), A Proper Yellow Story(work7), Little Match Girl(work1), Mintify(work6) */
.sticky-card[data-video-id="work2"] {
    order: 1;
    z-index: 10 !important;
}

.sticky-card[data-video-id="work3"] {
    order: 2;
    z-index: 20 !important;
}

.sticky-card[data-video-id="work4"] {
    order: 3;
    z-index: 30 !important;
}

.sticky-card[data-video-id="work8"] {
    order: 4;
    z-index: 40 !important;
}

.sticky-card[data-video-id="work9"] {
    order: 5;
    z-index: 50 !important;
}

.sticky-card[data-video-id="work7"] {
    order: 6;
    z-index: 60 !important;
}

.sticky-card[data-video-id="work1"] {
    order: 7;
    z-index: 70 !important;
}

.sticky-card[data-video-id="work6"] {
    order: 8;
    z-index: 80 !important;
}

/* Desktop ordering: A Proper Yellow Tale(work8), Making of(work9), Little Match Girl(work1), A Proper Yellow Story(work7), Charles Dickens(work2), Jane Austen(work3), Oscar Wilde(work4), Mintify(work6) */
@media (min-width: 768px) {
    .sticky-card[data-video-id="work8"] {
        order: 1;
        z-index: 10 !important;
    }

    .sticky-card[data-video-id="work9"] {
        order: 2;
        z-index: 20 !important;
    }

    .sticky-card[data-video-id="work1"] {
        order: 3;
        z-index: 30 !important;
    }

    .sticky-card[data-video-id="work7"] {
        order: 4;
        z-index: 40 !important;
    }

    .sticky-card[data-video-id="work2"] {
        order: 5;
        z-index: 50 !important;
    }

    .sticky-card[data-video-id="work3"] {
        order: 6;
        z-index: 60 !important;
    }

    .sticky-card[data-video-id="work4"] {
        order: 7;
        z-index: 70 !important;
    }

    .sticky-card[data-video-id="work6"] {
        order: 8;
        z-index: 80 !important;
    }
}