/* **************** FILE NAME: style.css **************** */
@import url('variables.css');

/* ################ BODY-STYLE ################ */
body {
    margin: 0;
    padding: 0;
    height: 100vh;
    box-sizing: border-box;
    font-family: var(--font-fam-1);
    line-height: var(--line-height-normal);
    letter-spacing: var(--letter-spacing-normal);
    background-color: var(--clr-bg-1);
    color: var(--clr-txt-1);
    transition: background-color var(--anim-med), color var(--anim-med), opacity var(--anim-med);
    overflow-x: hidden;
    overflow: hidden;
}

/* ---- Dynamic typography ---- */
body {
    font-size: var(--font-size-responsive);
    line-height: var(--line-height-normal);
    letter-spacing: calc(1px + 0.4vw); /* Adjusts spacing based on viewport width */
}

@media (max-width: 768px) {
    body {
        font-weight: var(--font-weight-n);
    }
}

/* ---- Link and Button Hover ---- */
a, .button {
    opacity: 0.4;
    transition: opacity var(--anim-med), transform var(--anim-med) ease-in-out, color var(--anim-med) ease;
}

a:hover {
    opacity: 1;
    transform: scale(1.02);
    color: var(--clr-link-h);
}

.button {
    background-color: var(--clr-btn-primary);
    opacity: 0.4;
    transition: background-color var(--anim-med), opacity var(--anim-med);
    border: none;
    padding: 10px 20px;
}

.button:hover {
    background-color: var(--clr-btn-primary-hover);
    opacity: 1;
}

/* ################ MAIN CONTENT STYLE ################ */
main {
    padding: 0;
}

/* ---- Hero-Section-Style ---- */
.hero-section {
    padding: var(--padding-responsive-1);
    background-color: var(--clr-bg-2);
}


/* ################ SCROLLING SECTION STYLE ################ */
.scrolling-section {
    padding: var(--space-lg) var(--space-md);
    background-color: var(--clr-bg-1);
    position: relative;
}

.content-block {
    margin-bottom: var(--space-lg);
    transition: all 0.3s ease;
    opacity: 0;
    transform: translateY(100px);
    width: 80%;
    margin: 0 auto var(--space-lg);
    background-color: var(--clr-bg-2); /* Add a background color for visibility */
    padding: var(--space-md); /* Add padding for content spacing */
    border-radius: var(--border-r-md); /* Add border radius for rounded corners */
}


/* ################ DRUMROLL HEADER STYLE ################ */
.drumroll-header {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    height: 100vh;
    background-color: var(--clr-bg-header);
    position: relative;
    overflow: hidden;
    flex-direction: column;
}

.drumroll-header .header-content {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    flex-direction: column;
    position: relative;
    height: 100%;
}

.drumroll-header #text-wrapper {
    position: absolute;
    top: var(--text-wrapper-padding);
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    z-index: 2;
    left: 55%; /* Initial position for larger screens */
    transform: translateX(-55%); /* Center based on initial left */
}

.drumroll-header #changingTextContainer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 0.35em;
}

.drumroll-header #fixedTextContainer {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 0.35em;
}

.drumroll-header #changingText {
    font-size: var(--font-size-drumroll);
    color: var(--clr-txt-1);
    text-align: right;
    min-width: 200px;
}

.drumroll-header #fixedText {
    font-size: var(--font-size-drumroll);
    color: var(--clr-txt-1);
    text-align: left;
}

.drumroll-header #canvas-container {
    width: 100%;
    height: calc(100vh - var(--text-wrapper-padding) - 50px); /* Adjust this value to move up the canvas */
    position: absolute;
    top: calc(var(--text-wrapper-padding) - 50px); /* Adjust this value to move up the canvas */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

/* ------------ Drumroll Flash Animation ------------ */
.flash {
    animation: flashAnimation 0.4s ease-in-out;
}

@keyframes flashAnimation {
    0%, 100% { opacity: 1; }
    0% { opacity: 0; }
}

/* ------------ Drumroll Responsive Adjustments ------------ */
@media (max-width: 1200px) {
    .drumroll-header #text-wrapper {
        left: 50%;
        transform: translateX(-50%);
    }
}

@media (max-width: 768px) {
    .drumroll-header #text-wrapper {
        left: 45%;
        transform: translateX(-56%);
    }
}









/* ################ CAROUSEL STYLE ################ */
.carousel-section {
    
    width: 100vw; /* Full viewport width */
    overflow: hidden;
    position: relative;
}

.carousel {
    display: flex; /* Align slides horizontally */
    width: 100%; /* Full width */
    height: 100vh; /* Full height of the viewport */
    overflow: hidden;
}

.carousel-slide {
    flex: 0 0 100%; /* Each slide takes up 100% of the carousel width */
    height: 100%; /* Full height of the viewport */
    background-size: cover;
    background-position: center;
    transition: transform var(--anim-med) ease-in-out;
}

.prev, .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    margin-top: -22px;
    padding: 16px;
    color: white;
    font-weight: bold;
    font-size: 18px;
    transition: var(--anim-med) ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
}

.next {
    right: 0;
    border-radius: 3px 0 0 3px;
}

.prev:hover, .next:hover {
    background-color: var(--clr-hover);
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}


/* ################ ABOUT SECTION ################ */
/* About section styles */
.about-section {
    padding: var(--padding-responsive-2);
    background-color: var(--clr-bg-2);
    border-radius: var(--border-r-md);
    box-shadow: var(--shadow-medium);
}

.about-content {
    max-width: var(--content-max-width);
    margin: var(--margin-vertical-auto);
}

.about-content h2 {
    font-size: var(--font-size-h2);
    color: var(--clr-txt-1);
    margin-bottom: var(--space-sm);
}

.about-content p {
    font-size: var(--font-size-b);
    color: var(--clr-txt-2);
    line-height: var(--line-height-normal);
    margin-bottom: var(--space-md);
}





/* ################ PRODUCT GRID STYLE ################ */
/* Product grid styles */
.products-grid {
    display: grid;
    gap: var(--space-md);
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    padding: var(--padding-responsive-1);
}

.product {
    background-color: var(--clr-bg-2);
    padding: var(--space-md);
    border-radius: var(--border-r-md);
    text-align: center;
}

.product img {
    width: 100%;
    border-radius: var(--border-r-sm);
    transition: transform var(--anim-fast) var(--trans-func), filter var(--anim-fast) var(--trans-func);
}

.product-link {
    text-decoration: none;
    color: inherit;
}

.product-link:hover img {
    transform: scale(1.05);
    filter: var(--filter-grayscale);
}

.product h2 {
    margin-top: var(--space-sm);
    font-size: var(--font-size-b);
    color: var(--clr-txt-1);
}

.product p {
    color: var(--clr-txt-2);
}

.shopify-buy-button {
    background-color: var(--clr-btn-primary);
    color: var(--clr-txt-1);
    border: none;
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--border-r-sm);
    font-size: var(--font-size-b);
    cursor: pointer;
    transition: background-color var(--anim-fast) var(--trans-func);
    margin-top: var(--space-sm);
    display: inline-block;
    text-align: center;
}

.shopify-buy-button:hover {
    background-color: var(--clr-btn-primary-hover);
}

.shopify-buy-button:active {
    background-color: var(--clr-btn-active);
}

/* ################ PRODUCT_TEMPLATE PAGE STYLE ################ */
/* Product template styles */
.product-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-xxl) 0;
    background-color: var(--clr-bg-2);
    border-radius: var(--border-r-md);
    width: 100%;
}

.product-image img {
    width: 100%;
    max-width: 500px;
    border-radius: var(--border-r-sm);
    box-shadow: var(--shadow-small);
}

.product-details {
    margin-top: var(--space-md);
    text-align: center;
    width: 100%;
    max-width: 800px;
}

.product-details h1 {
    font-size: var(--font-size-h1);
    color: var(--clr-txt-1);
}

.product-description {
    font-size: var(--font-size-b);
    color: var(--clr-txt-2);
    margin-top: var(--space-sm);
}

.product-price {
    font-size: var(--font-size-b-lg);
    color: var(--clr-txt-1);
    margin-top: var(--space-sm);
}

.buy-button {
    background-color: var(--clr-btn-primary);
    color: var(--clr-txt-1);
    border: none;
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--border-r-sm);
    font-size: var(--font-size-b);
    cursor: pointer;
    transition: background-color var(--anim-fast) var(--trans-func);
    margin-top: var(--space-md);
    display: inline-block;
    text-align: center;
}

.buy-button:hover {
    background-color: var(--clr-btn-primary-hover);
}

.buy-button:active {
    background-color: var(--clr-btn-active);
}




/* ################ SMOOTH PAGE TRANSITION ################ */
body {
    animation: fadeInAnimation var(--anim-med) ease;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

@keyframes fadeInAnimation {
    0% { opacity: 0; }
    100% { opacity: 1; }
}




/* ++++++++++++++++ file end here ++++++++++++++++ /*