/* Base styles */
body {
    overflow: hidden;
    height: 100vh;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    font-family: "Roboto", -apple-system, BlinkMacSystemFont, sans-serif; /* Use site font */
    touch-action: pan-y; /* Allow vertical panning */
    overscroll-behavior: none; /* Prevent overscroll effects */
}

/* Define CSS custom properties for responsive sizing */
:root {
    --image-size: 500px; /* Base size for desktop */
}

/* Info panel styling */
.info-panel {
    position: fixed;
    top: 50%;                       /* Center vertically */
    right: 20px;                    /* Align to the right with margin */
    transform: translateY(-50%);    /* Perfect vertical centering */
        border-radius: 4px;
    padding: 8px 10px;
    z-index: 1000;
    font-family: "Roboto", sans-serif; /* Use site font */
    font-size: 14px;
    text-align: right;              /* Right-align text */
        max-width: 280px;               /* Limit width for readability */
    width: auto;                    /* Resize dynamically based on content */
    pointer-events: none;           /* Prevent interaction */
    overflow: visible;              /* Ensure text is fully visible */
    white-space: normal;            /* Allow text to wrap */
}

/* Debug info content */
.debug-info {
    font-family: "Roboto", sans-serif; /* Use site font */
    font-size: 14px;
    color: rgba(0, 0, 0, 0.85);       /* High contrast for readability */
    line-height: 1.4;                 /* Comfortable line spacing */
    display: flex;
    flex-direction: column;           /* Stack content vertically */
    overflow: visible;                /* Ensure text is not cut off */
    white-space: normal;              /* Allow text to wrap */
}

/* Two-line layout for debug info */
.debug-info .timestamp-line {
    margin-bottom: 4px;               /* Space between lines */
    font-weight: normal;              /* Non-bold for consistency */
}

.debug-info .location-line {
    font-weight: normal;              /* Non-bold */
    color: rgba(0, 0, 0, 0.7);        /* Slightly lighter color for differentiation */
}

/* Responsive adjustments for smaller screens */
@media (max-width: 767px) {
    .info-panel {
        right: 10px;                  /* Closer to the edge on mobile */
        padding: 6px 8px;
        max-width: 60vw;              /* Allow more width on smaller screens */
    }

    .debug-info {
        font-size: 12px;              /* Slightly smaller text on mobile */
    }
}

/* Image container styling */
.image-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Image wrapper styling */
.image-wrapper {
    position: absolute;
    width: var(--image-size);
    height: var(--image-size);
    transition: transform 1s cubic-bezier(0.25, 0.1, 0.25, 1), opacity 0.3s ease;
    will-change: transform, opacity;
    transform: translateZ(0); /* Hardware acceleration */
}

.image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensure images fill the container */
}

/* Scrolling container */
.scroll-container {
    position: absolute;
    width: 100vw;
    height: 100%;
    transition: transform 1.2s cubic-bezier(0.33, 0.1, 0.67, 0.9); /* Smooth scrolling */
    will-change: transform;
    z-index: 10;
}

/* Responsive image sizes */
@media (max-width: 900px) {
    :root {
        --image-size: 400px;
    }
}

@media (max-width: 767px) {
    :root {
        --image-size: min(50vw, 300px);
    }
}

@media (max-width: 400px) {
    :root {
        --image-size: min(60vw, 250px);
    }
}