@import "vars.css";
@import "composition.css";

:root {
    --grid-item-height: 120px; /* iso-grid item height for case-1 */
    --carousel-speed-1: 30s; /* Speed for the first row (e.g., 30 seconds for one full loop) */
    --carousel-speed-2: 35s; /* Speed for the second row (can be different for varied feel) */
    --image-width: 320px; /* Base width of each image item */
    --image-height: 220px; /* Base height of each image item */
    --page-padding: var(--spacing-md);
}

/*** Tags ***/

body {
    margin: 0px;
    padding: 0px;
    color: var(--on-surface);
    background-color: var(--surface);
    background-image: radial-gradient(
        circle at 700% 430%,
        var(--primary-container),
        var(--surface)
    );
    background-repeat: no-repeat;
    background-position: bottom right;
    background-attachment: fixed;
}

main {
    display: flex;
    justify-content: center;
    gap: var(--spacing-md);
    padding: var(--page-padding);
}

footer {
    margin-top: var(--spacing-2xl);
    margin-bottom: var(--spacing-2xl);
}

a {
    text-decoration: none;
    color: var(--on-surface);
}
a:hover {
    text-decoration: underline;
    color: var(--primary);
}

/*** Carousel ***/

/* Main carousel container - equivalent to Tailwind classes */
.carousel-container {
    max-width: 570px; /* max-w-7xl */
    overflow: hidden; /* overflow-hidden */
    padding-top: var(--spacing-md); /* py-6 (part 1) */
    padding-bottom: var(--spacing-md); /* py-6 (part 2) */
    border-radius: var(--spacing-smd); /* rounded-xl (0.75rem) */
    position: relative; /* relative */
}

/* Individual carousel rows - equivalent to Tailwind classes */
.carousel-row {
    display: flex; /* flex */
    white-space: nowrap; /* flex-nowrap */
    animation-iteration-count: infinite; /* Infinite loop */
    animation-timing-function: linear; /* Smooth, constant speed */
    will-change: transform; /* Optimize for animation performance */
    padding-bottom: var(--spacing-md); /* pb-6 */
    padding-top: var(--spacing-md); /* pt-6 */
}

/* First row: Animates to the left */
.carousel-row:first-child {
    animation-name: scroll-left;
    animation-duration: var(--carousel-speed-1);
}

/* Second row: Animates to the right */
.carousel-row:last-child {
    animation-name: scroll-right;
    animation-duration: var(--carousel-speed-2);
}

/* Individual image items within the carousel rows - equivalent to Tailwind classes */
.carousel-item {
    flex-shrink: 0; /* flex-none */
    width: var(--image-width); /* w-64 (approx, using variable) */
    height: var(--image-height); /* h-40 (approx, using variable) */
    margin-right: var(--spacing-md); /* mr-4 */
    background-size: cover; /* bg-cover */
    background-position: center; /* bg-center */
    border-radius: 8px; /* rounded-lg (0.5rem) */
    position: relative;
    overflow: hidden;
    /* transition-all duration-200 ease-out */
    transition: transform 0.2s ease-out;
}

/* Remove margin from the last item in the duplicated set for seamless loop */
.carousel-item:last-child {
    margin-right: 0;
}

/* Keyframes for leftward scroll */
@keyframes scroll-left {
    from {
        transform: translateX(0%);
    }
    to {
        /* Moves the content by the width of the duplicated items.
                   Assumes we have duplicated the items once (e.g., 5 original items, 5 cloned items).
                   So, it moves 50% of the total row's content width. */
        transform: translateX(
            calc(-1 * (var(--image-width) + var(--spacing-md)) * 5)
        );
    }
}

/* Keyframes for rightward scroll */
@keyframes scroll-right {
    from {
        transform: translateX(
            calc(-1 * (var(--image-width) + var(--spacing-md)) * 5)
        );
    }
    to {
        /* Moves the content by the width of the duplicated items in positive direction */
        transform: translateX(0%);
    }
}

/*** Classes ***/

.anchor {
    position: absolute;
    top: 289px;
    /* half the screen width plus half the entire page padding */
    left: calc((100vw / 2) + (var(--page-padding) / 2));
    z-index: 100;
    width: var(--spacing-xl);
    height: var(--spacing-xl);
    background-color: var(--primary);
    border: solid var(--surface) 10px;
    border-radius: var(--spacing-xl);
}

.summary {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
    border-radius: var(--radius-md);
    padding: var(--spacing-xl);
    height: calc(290px - calc(var(--spacing-xl) * 2));
}
.summary > span {
    max-width: 500px;
}

.cases {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    width: 663px;
}

.chips {
    display: flex;
    gap: var(--spacing-xs);
    padding: 0;
    margin: 0;
    transition: all 300ms cubic-bezier(0.5, 0, 0, 1);
}

.chips > li {
    list-style-type: none;
    padding: var(--spacing-xs) var(--spacing-smd);
    border-radius: var(--radius-sm);
    color: var(--on-tertiary-container);
    background-color: var(--tertiary-container);
}

.case {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    border-radius: var(--radius-md);
    padding: var(--spacing-lg);
    background-color: var(--surface-container-low);
    height: calc(227px - calc(var(--spacing-lg) * 2));
    overflow: hidden;
}

.case-link:hover {
    text-decoration: none;
    color: var(--on-surface);
}

.case > span {
    transition: all 300ms cubic-bezier(0.5, 0, 0, 1);
}

.case:hover > .chips {
    transform: translate(0px, -90px);
}

.case:hover > span {
    transform: translate(
        0px,
        calc((var(--spacing-md) + var(--spacing-lg)) * -1)
    );
}

/*** Case-1 ***/

.case-1:hover {
    --border-size: 2px;
    /* fixing padding to perfectly fit the border */
    padding: calc(var(--spacing-lg) - var(--border-size));
    border: var(--border-size) solid transparent;
    border-radius: var(--radius-md);
    background:
        linear-gradient(var(--surface-container), var(--surface-container))
            padding-box,
        linear-gradient(140deg, var(--primary), var(--surface)) border-box;
}

.case-1 > span {
    max-width: 312px;
}

.case-3 > span {
    max-width: 400px;
}

.case-3 > ul {
    margin-left: auto;
}
.case-3 > span {
    margin-left: auto;
    text-align: right;
}

.case-1:hover > .iso-grid {
    transform: scale(1.1, 1.1) translate(160px, -120px) rotateX(30deg)
        rotateZ(-30deg) translateZ(0);
}

.iso-grid {
    display: grid;
    grid-template-columns: repeat(3, auto);
    grid-template-rows: repeat(2, auto);
    gap: var(--spacing-sm);
    will-change: transform;
    transform: translate(180px, -90px) rotateX(30deg) rotateZ(-30deg)
        translateZ(0);
    transform-style: preserve-3d;
    transition: all 300ms cubic-bezier(0.5, 0, 0, 1);
    width: fit-content;
}

.iso-grid > img {
    height: var(--grid-item-height);
    image-rendering: auto;
    backface-visibility: hidden;
    /* filter: sepia(20%); */
}

/*** Case-2 ***/

.case-2:hover {
    --border-size: 2px;
    /* fixing padding to perfectly fit the border */
    padding: calc(var(--spacing-lg) - var(--border-size));
    border: var(--border-size) solid transparent;
    border-radius: var(--radius-md);
    background:
        linear-gradient(var(--surface-container), var(--surface-container))
            padding-box,
        linear-gradient(180deg, var(--primary), var(--surface)) border-box;
}

.case-2 > span {
    max-width: 500px;
}

.case-2 > ul {
    /* margin-left: auto; */
}
.case-2 > span {
    /* margin-left: auto; */
    /* text-align: right; */
}

.case-2 > img {
    transform: scale(0.9, 0.9) translate(-30px, 10px) rotateZ(2.5deg)
        translateZ(0);
    transform-style: preserve-3d;
    transition: all 300ms cubic-bezier(0.5, 0, 0, 1);
}

.case-2:hover > img {
    transform: scale(1, 1) translate(-10px, -20px) rotateZ(2.5deg);
}

/*** Case-3 ***/

.case-3 .iso-grid {
    display: grid;
    grid-template-columns: repeat(4, auto);
    grid-template-rows: repeat(2, auto);
    gap: var(--spacing-xs);
    will-change: transform;
    transform: scale(1.4) translate(50px, 30px) rotateX(30deg) rotateZ(8deg)
        translateZ(0);
    transform-style: preserve-3d;
    transition: all 300ms cubic-bezier(0.5, 0, 0, 1);
    width: fit-content;
}

.case-3:hover > .iso-grid {
    transform: scale(1.5) translate(50px, 0px) rotateX(30deg) rotateZ(5deg)
        translateZ(0);
}

.case-3:hover {
    --border-size: 2px;
    /* fixing padding to perfectly fit the border */
    padding: calc(var(--spacing-lg) - var(--border-size));
    border: var(--border-size) solid transparent;
    border-radius: var(--radius-md);
    background:
        linear-gradient(var(--surface-container), var(--surface-container))
            padding-box,
        linear-gradient(140deg, var(--primary), var(--surface)) border-box;
}

/*** Testemonials ***/

.testemonials {
    padding: var(--spacing-smd) var(--spacing-md);
}

.testemonials-grid {
    display: grid;
    grid-template-columns: repeat(2, 250px);
    grid-template-rows: repeat(3, 136px);
    gap: var(--spacing-xl);
    margin-left: var(--spacing-md);
    margin-top: var(--spacing-md);
}

.testemonial {
    display: flex;
    flex-direction: column;
    color: var(--on-surface-variant);
}

.testemonial > i {
    font-size: var(--spacing-lg);
    margin-bottom: var(--spacing-md);
}

.testemonial > span {
    height: 100%;
}

.testemonial > footer {
    margin: 0;
    padding: 0;
    align-self: flex-end;
    font-size: var(--font-size-xs);
    font-style: italic;
    font-weight: 500;
    margin-top: var(--spacing-sm);
}

/*** Let's connect! ***/

.lets-connect {
    display: flex;
    justify-content: center;
    background-color: var(--on-primary-opacity-08);
    overflow: hidden;
}

.lets-connect > section {
    display: flex;
    flex-direction: row;
    width: 1280px;
    justify-content: flex-start;
    align-items: center;
    margin-left: 140px;
    gap: 40px;
    overflow: hidden;
}

.lets-connect > section > img {
    height: 100%;
    display: block;
    filter: drop-shadow(0px 0px 10px var(--primary-container));
}

.contacts {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-smd);
}

.contacts i {
    font-size: 20px;
}

.contact-link {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--spacing-sm);
}

#screenSizeWarning {
    display: none; /* Hidden by default */
    position: fixed; /* Stays in place when scrolling */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9); /* Dark overlay */
    color: white;
    z-index: 9999; /* Ensures it's on top of everything */
    justify-content: center; /* Center content horizontally */
    align-items: center; /* Center content vertically */
    text-align: center;
    padding: var(--spacing-2xl);
    box-sizing: border-box; /* Include padding in width/height */
    font-family: sans-serif;
}

.warning-content {
    background-color: var(--surface-container-high);
    padding: var(--spacing-xl);
    border-radius: var(--spacing-md);
    max-width: 500px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}

.warning-content h2 {
    color: var(--on-surface);
}

#screenSizeWarning p {
    color: var(--on-surface-variant);
    line-height: 1.4;
}

#closeWarning {
    margin-top: var(--spacing-2xl);
    background-color: var(--primary-container);
    color: var(--on-primary-container);
    border: none;
    padding: var(--spacing-smd) var(--spacing-md);
    border-radius: var(--spacing-xs);
    cursor: pointer;
    font-size: var(--font-size-sm);
    transition: background-color 0.3s ease;
}

#closeWarning:hover {
    background-color: rgba(79, 55, 139, 0.6);
}

/* --- Media Query to SHOW the warning --- */
@media (max-width: 1280px) {
    #screenSizeWarning {
        display: flex; /* Show the warning when screen is 1280px or less */
    }

    /* Optionally, hide the main content when the warning is active */
    #mainContent {
        display: none;
    }
}

/* --- Optional: Styles for screens larger than 1280px (ensure main content is visible) --- */
@media (min-width: 1281px) {
    #mainContent {
        display: block; /* Ensure main content is visible on larger screens */
    }
}