:root {
    /* Add new variables for animation timing */
    --animation-duration: 60s;
    --fade-in-duration: 3%;
    --display-duration: 35%;
    --fade-out-duration: 45%;

    /* Add carousel-specific variables */
    --carousel-bg: var(--color-secondary-bg);
    --carousel-mobile-height: calc(100dvh - var(--profile-height) - var(--space-md) * 2);
    /* Colors */
    --color-primary-bg: #000;
    --color-primary-text: #f2f2f2;
    --color-secondary-bg: rgb(37 38 50);
    --color-shadow: #0F111F;
    --color-link: #d33;
    --color-text-light: #e8e8e8;

    /* Typography */
    --font-family-base: "LM Roman", Georgia, Palatino, "Palatino Linotype", "Times New Roman", "Times", serif;
    --font-size-xl: 26px;
    --font-size-lg: 18px;
    --font-size-md: 16px;
    --font-size-sm: 14px;
    --font-size-xs: 12px;

    /* Spacing */
    --space-xl: 20px;
    --space-lg: 15px;
    --space-md: 10px;
    --space-sm: 5px;

    /* Dimensions */
    --profile-height: 220px;
    --profile-width: 484px;
    --avatar-size: 100px;
    --border-radius: 10px;
    --avatar-radius: 35px;

    /* Effects */
    --shadow-text-lg: 2px 2px 1px var(--color-shadow);
    --shadow-text-md: 1px 1px 1px var(--color-shadow);
    --shadow-text-sm: 1px 1px 3px black;
}

/* Base styles */
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    background: var(--color-primary-bg);
    color: var(--color-primary-text);
    font-family: var(--font-family-base), serif;
}

/* Layout */
.layout {
    position: relative;
    min-height: 100vh;
}

/* Profile Section */
.profile {
    position: absolute;
    left: var(--space-xl);
    top: var(--space-xl);
    height: var(--profile-height);
    width: var(--profile-width);
    background: var(--color-secondary-bg);
    border-radius: var(--border-radius);
}

.profile__background {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.profile__content {
    position: absolute;
    width: 100%;
    height: 100%;
}

.profile__inner {
    padding: var(--space-lg);
}

.profile__title {
    font-size: var(--font-size-xl);
    text-shadow: var(--shadow-text-lg);
    margin: 0;
}

.profile__subtitle {
    float: right;
    color: var(--color-text-light);
    text-shadow: var(--shadow-text-md);
    font-size: var(--font-size-xs);
    margin-top: -38px;
}

.profile__link {
    color: var(--color-link);
}

.profile__avatar {
    float: left;
    margin-right: var(--space-md);
    border-radius: var(--avatar-radius);
    background: url("../img/avatar.png") no-repeat;
    background-size: cover;
    width: var(--avatar-size);
    height: var(--avatar-size);
}

.profile__text {
    text-align: justify;
    font-size: var(--font-size-md);
    text-shadow: var(--shadow-text-sm);
}

/* Carousel */
.carousel {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.carousel__image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    /* Add a background color while loading */
    background-color: var(--color-secondary-bg);
    /* Add will-change to optimize animation performance */
    will-change: opacity;
    /* Add GPU acceleration */
    transform: translateZ(0);
    /* Add backface visibility to prevent unwanted artifacts */
    backface-visibility: hidden;
    animation: fade 60s linear infinite; /* Reduced total duration */
}

/* Add placeholder styling for failed images */
.carousel__image:not([src]),
.carousel__image[src=""] {
    visibility: hidden;
}

/* Replace @for loop with individual selectors */
.carousel__image:nth-child(1) { animation-delay: 0s; }
.carousel__image:nth-child(2) { animation-delay: 5s; }
.carousel__image:nth-child(3) { animation-delay: 10s; }
.carousel__image:nth-child(4) { animation-delay: 15s; }
.carousel__image:nth-child(5) { animation-delay: 20s; }
.carousel__image:nth-child(6) { animation-delay: 25s; }
.carousel__image:nth-child(7) { animation-delay: 30s; }
.carousel__image:nth-child(8) { animation-delay: 35s; }
.carousel__image:nth-child(9) { animation-delay: 40s; }
.carousel__image:nth-child(10) { animation-delay: 45s; }
.carousel__image:nth-child(11) { animation-delay: 50s; }
.carousel__image:nth-child(12) { animation-delay: 55s; }
.carousel__image:nth-child(13) { animation-delay: 60s; }
.carousel__image:nth-child(14) { animation-delay: 65s; }
.carousel__image:nth-child(15) { animation-delay: 70s; }

@keyframes fade {
    /* Smoother transitions with improved timing */
    0% { opacity: 0; }
    3% { opacity: 1; }    /* Faster fade in */
    35% { opacity: 1; }   /* Longer display time */
    45% { opacity: 0; }   /* Smoother fade out */
    100% { opacity: 0; }
}

/* Media Queries */
@media (min-width: 600px) and (max-width: 1199px) {
    .profile {
        height: 200px;
        width: calc(100% - var(--space-xl) * 2);
    }
}

@media (max-width: 599px) {
    .carousel {
        height: calc(100dvh - var(--profile-height) - var(--space-md) * 2);
        contain: strict;
        top: 240px;
    }

    .carousel__image {
        animation-duration: 45s;
    }
    .profile {
        left: var(--space-md);
        top: var(--space-md);
        height: var(--profile-height);
        width: calc(100% - var(--space-md) * 2);
    }

    .profile__title {
        font-size: var(--font-size-lg);
    }

    .profile__text {
        font-size: var(--font-size-sm);
    }

    .profile__inner {
        padding: var(--space-md);
    }

  .profile__subtitle {
    margin-top: -20px;
  }
}

@media (prefers-reduced-motion: reduce) {
    .carousel__image {
        animation: none;
        opacity: 0;
        transition: opacity 0.5s ease-out;
    }

    /* Show only first image */
    .carousel__image:first-child {
        opacity: 1;
    }
}

.carousel:empty::after {
    content: "No images available";
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--color-text-light);
}
@media (forced-colors: active) {
    .carousel__image {
        /* Ensure images are visible in high contrast mode */
        forced-color-adjust: none;
    }
}

@media print {
    .carousel {
        height: auto;
    }

    .carousel__image {
        animation: none;
        opacity: 1;
        position: relative;
        page-break-inside: avoid;
        margin-bottom: 1em;
    }
}