/* Stake Landing Page - Optimized Styles */

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Simple scrollbar */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: #0b0f17;
}

::-webkit-scrollbar-thumb {
    background: #1e2330;
    border-radius: 3px;
}

/* Selection color */
::selection {
    background: rgba(30, 144, 255, 0.25);
    color: #ffffff;
}

/* Focus styles for accessibility */
a:focus-visible,
button:focus-visible {
    outline: 2px solid #1e90ff;
    outline-offset: 2px;
}

/* Simple button styles - no complex effects */
.btn-primary {
    background-color: #1e90ff;
    color: #ffffff;
    transition: background-color 0.2s ease;
}

.btn-primary:hover {
    background-color: #0d7ae9;
}

.btn-secondary {
    background-color: #151921;
    color: #ffffff;
    border: 1px solid #2a3040;
    transition: background-color 0.2s ease;
}

.btn-secondary:hover {
    background-color: #1e2330;
}

/* Responsive typography adjustments */
@media (max-width: 640px) {
    h1 {
        font-size: 1.875rem !important;
        line-height: 1.3 !important;
    }
    
    h2 {
        font-size: 1.5rem !important;
    }
}

/* Prevent horizontal scroll */
body {
    overflow-x: hidden;
}

/* ============================================
   SKELETON LOADING STYLES
   ============================================ */

/* Base skeleton animation */
@keyframes skeleton-loading {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

/* Skeleton shimmer effect */
.skeleton {
    background: linear-gradient(
        90deg,
        #1e2330 25%,
        #2a3040 50%,
        #1e2330 75%
    );
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s ease-in-out infinite;
    position: relative;
    overflow: hidden;
}

/* Skeleton variants for different elements */
.skeleton-text {
    background: linear-gradient(
        90deg,
        #1e2330 25%,
        #2a3040 50%,
        #1e2330 75%
    );
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s ease-in-out infinite;
    border-radius: 4px;
}

.skeleton-image {
    background: linear-gradient(
        90deg,
        #151921 25%,
        #1e2330 50%,
        #151921 75%
    );
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s ease-in-out infinite;
}

.skeleton-card {
    background: linear-gradient(
        90deg,
        #151921 25%,
        #1e2330 50%,
        #151921 75%
    );
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s ease-in-out infinite;
    border-radius: 16px;
}

.skeleton-button {
    background: linear-gradient(
        90deg,
        #1e2330 25%,
        #2a3040 50%,
        #1e2330 75%
    );
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s ease-in-out infinite;
    border-radius: 8px;
}

/* Skeleton sizes */
.skeleton-h-4 { height: 16px; }
.skeleton-h-6 { height: 24px; }
.skeleton-h-8 { height: 32px; }
.skeleton-h-10 { height: 40px; }
.skeleton-h-12 { height: 48px; }
.skeleton-h-16 { height: 64px; }
.skeleton-h-20 { height: 80px; }
.skeleton-h-32 { height: 128px; }
.skeleton-h-44 { height: 176px; }
.skeleton-h-full { height: 100%; }

.skeleton-w-full { width: 100%; }
.skeleton-w-3\/4 { width: 75%; }
.skeleton-w-5\/6 { width: 83.33%; }
.skeleton-w-4\/5 { width: 80%; }
.skeleton-w-1\/2 { width: 50%; }
.skeleton-w-1\/3 { width: 33.33%; }
.skeleton-w-16 { width: 64px; }
.skeleton-w-12 { width: 48px; }
.skeleton-w-10 { width: 40px; }

/* Image wrapper with skeleton */
.lazy-image-wrapper {
    position: relative;
    overflow: hidden;
    background-color: #151921;
}

.lazy-image-wrapper .skeleton-image {
    position: absolute;
    inset: 0;
    z-index: 1;
    transition: opacity 0.3s ease;
}

.lazy-image-wrapper img {
    position: absolute;
    inset: 0;
    z-index: 2;
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* When wrapper has loaded class, show image and hide skeleton */
.lazy-image-wrapper.loaded img {
    opacity: 1;
}

.lazy-image-wrapper.loaded .skeleton-image {
    opacity: 0;
    pointer-events: none;
}

/* Card skeleton layout */
.card-skeleton {
    background: #151921;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #2a3040;
}

.card-skeleton .card-skeleton-image {
    height: 176px;
    background: linear-gradient(
        90deg,
        #0b0f17 25%,
        #151921 50%,
        #0b0f17 75%
    );
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s ease-in-out infinite;
}

.card-skeleton .card-skeleton-content {
    padding: 24px;
}

/* ============================================
   CARD CONTENT SKELETON STATES
   ============================================ */

/* Hide actual content initially, show skeleton */
.card-body-content .actual-content,
.card-overlay-content .actual-content {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.card-body-content .skeleton-text,
.card-body-content .skeleton-button,
.card-body-content .skeleton-list,
.card-overlay-content .skeleton-text {
    opacity: 1;
    transition: opacity 0.3s ease;
}

/* When card is loaded - hide skeleton, show content */
.lazy-card.loaded .card-body-content .actual-content,
.lazy-card.loaded .card-overlay-content .actual-content {
    opacity: 1;
}

.lazy-card.loaded .card-body-content .skeleton-text,
.lazy-card.loaded .card-body-content .skeleton-button,
.lazy-card.loaded .card-body-content .skeleton-list,
.lazy-card.loaded .card-overlay-content .skeleton-text {
    opacity: 0;
    pointer-events: none;
}

/* Position skeleton over actual content */
.card-body-content {
    position: relative;
}

.card-body-content .skeleton-text,
.card-body-content .skeleton-button {
    position: absolute;
    left: 24px;
    right: 24px;
}

/* Position individual skeletons */
.card-body-content .skeleton-text:nth-of-type(1) { top: 24px; }
.card-body-content .skeleton-list { 
    position: absolute; 
    top: 64px; 
    left: 24px; 
    right: 24px;
}
.card-body-content .skeleton-text:nth-of-type(2) { top: 156px; }
.card-body-content .skeleton-text:nth-of-type(3) { top: 184px; }
.card-body-content .skeleton-text:nth-of-type(4) { top: 212px; }
.card-body-content .skeleton-button { 
    top: 252px; 
    left: 24px; 
    right: 24px;
}

/* Skeleton list items */
.skeleton-list .skeleton-text {
    position: relative !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
}

/* ============================================
   ERROR STATE FOR FAILED IMAGES
   ============================================ */

/* Error state styling */
.lazy-image-wrapper.error {
    background-color: #1a1f2a;
}

.lazy-image-wrapper.error .skeleton-image {
    opacity: 0;
    animation: none;
    background: #2a1f1f;
}

.lazy-image-wrapper.error::after {
    content: '\f127';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #5a4040;
    font-size: 24px;
    z-index: 3;
}

.lazy-image-wrapper.error img {
    opacity: 0;
}

/* Skeleton fade out transition */
.skeleton,
.skeleton-text,
.skeleton-image,
.skeleton-card,
.skeleton-button {
    transition: opacity 0.3s ease;
}

/* Hidden state for skeleton removal */
.skeleton-hidden {
    opacity: 0 !important;
    pointer-events: none;
}

/* ============================================
   OPTIMIZATION: PAUSE ANIMATION WHEN OFFSCREEN
   ============================================ */

.lazy-card:not(.loaded) .skeleton,
.lazy-card:not(.loaded) .skeleton-text,
.lazy-card:not(.loaded) .skeleton-image,
.lazy-card:not(.loaded) .skeleton-button {
    animation-play-state: running;
}

.lazy-card.loaded .skeleton,
.lazy-card.loaded .skeleton-text,
.lazy-card.loaded .skeleton-image,
.lazy-card.loaded .skeleton-button {
    animation-play-state: paused;
}

/* Content fade-in animation when loaded */
@keyframes content-fade-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.content-loaded {
    animation: content-fade-in 0.4s ease-out forwards;
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .skeleton,
    .skeleton-text,
    .skeleton-image,
    .skeleton-card,
    .skeleton-button,
    .card-skeleton .card-skeleton-image {
        animation: none;
        background: #1e2330;
    }
    
    .content-loaded {
        animation: none;
        opacity: 1;
        transform: none;
    }
}