/* ==========================================
   Project: Luxuo Galaxy Watch Ultra 2
   ========================================== */

/* Reset & Global Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: "Times New Roman", Times, serif;
    color: #000000;
    overflow-x: hidden;
    text-align: center;
}

.body-text {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    line-height: 1.8;
    margin: 0 auto;
    width: 100%;
}

.body-text p {
    width: 95%;
    padding: 0 25px;
    margin: 0 auto;
    font-size: clamp(13px, 1.2vw, 19px);
    font-weight: 500;
}

/* Hero Section (Pure Absolute Positioning - No Grid Rows) */
.hero-section {
    position: relative;
    width: 100%;
    background-color: #000000;
}

.hero-section .grid-container {
    background: #000000 url('Asset/1. Open/BG.png') no-repeat center top;
    background-size: cover;
    aspect-ratio: 1920 / 3610;
}

.hero-section .grid-item {
    position: absolute;
}

.hero-top-watch {
    grid-column: 1 / 13;
    top: 0;
    width: 100%;
}

.hero-title {
    grid-column: 2 / 12;
    top: 30.69%;
    width: 100%;
}

.hero-sub-title {
    grid-column: 4 / 10;
    top: 43.78%;
    width: 100%;
}

.hero-chapeau {
    grid-column: 2 / 12;
    top: 59.92%;
    width: 100%;
    z-index: 1;
}

.hero-bottom-watch {
    grid-column: 1 / 13;
    top: 63.97%;
    width: 100%;
    z-index: 0;
}

/* Paragraph Sections Base Grid Styles */
.paragraph-section {
    width: 100%;
    overflow: hidden;
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    position: relative;
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    aspect-ratio: 1920 / 3800;
}

.grid-item {
    position: absolute;
    height: auto;
}

/* Paragraph 1 - Configured with CSS Grid Rows & Dynamic Push */
.paragraph-1 .grid-container {
    background-color: white;
    padding-bottom: 60px;
    height: auto;
    aspect-ratio: unset;
    grid-template-rows: auto;
}

.paragraph-1 .grid-item {
    position: relative;
}

.p1-top-image {
    grid-row: 1 / 2;
    grid-column: 1 / 13;
    width: 100%;
}

.p1-watch {
    grid-row: 2 / 3;
    grid-column: 7 / 12;
    width: 103%;
    margin-top: -72%;
    z-index: 1;
}

.p1-screens {
    grid-row: 2 / 3;
    grid-column: 2 / 6;
    width: 100%;
    align-self: center;
    margin-top: -37%;
    z-index: 2;
}

.p1-title {
    grid-row: 3 / 4;
    grid-column: 3 / 11;
    width: 100%;
    margin: 3rem 0;
}

.p1-body {
    grid-row: 4 / 5;
    grid-column: 3 / 11;
    width: 100%;
}

/* Paragraph 2 - Configured with CSS Grid Rows & Dynamic Push */
.paragraph-2 {
    background: #080808 url('Asset/3. Paragraph 2/BG.png') no-repeat center top;
    background-size: cover;
    color: #ece3dc;
}

.paragraph-2 .grid-container {
    padding-bottom: 60px;
    height: auto;
    aspect-ratio: unset;
    grid-template-rows: auto;
}

.paragraph-2 .grid-item {
    position: relative;
}

.p2-top-image {
    grid-row: 1 / 2;
    grid-column: 1 / 13;
    width: 100%;
}

.p2-watch-bg {
    grid-row: 5 / 6;
    grid-column: 1 / 13;
    width: 100%;
    margin-top: -5%;
}

.p2-title {
    grid-row: 2 / 3;
    grid-column: 3 / 11;
    width: 100%;
    align-self: center;
    z-index: 2;
    margin: 5% 0;
}

.p2-body-1 {
    grid-row: 4 / 5;
    grid-column: 3 / 11;
    margin: 0rem auto;
    width: 90%;
}

/* Paragraph 2 Watch & Icons Wrapper Grid Container */
.p2-watch-wrapper {
    grid-row: 5 / 6;
    grid-column: 1 / 13;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    position: relative;
    width: 100%;
    margin: 3rem 0;
}

.p2-watch {
    grid-column: 4 / 10;
    width: 100%;
    position: relative;
    z-index: 1;
    top: 29%;
}

/* Paragraph 2 Icons positioned relative to wrapper grid */
.p2-icon {
    position: absolute;
    width: 75%;
    max-width: 240px;
    z-index: 10;
    transition: transform 0.3s ease;
}

/* .p2-icon:hover {
    transform: scale(1.1);
} */

.p2-icon-1 {
    grid-column: 4 / 6;
    top: 87%;
    left: -20%;
    z-index: 0;
}

.p2-icon-2 {
    grid-column: 3 / 5;
    top: 57.00%;
    left: -18%;
    z-index: 0;
}

.p2-icon-3 {
    grid-column: 3 / 5;
    top: 27.00%;
    z-index: 0;
}

.p2-icon-4 {
    grid-column: 6 / 8;
    top: 13.5%;
    left: 12%;
    z-index: 0;
}

.p2-icon-5 {
    grid-column: 9 / 11;
    top: 27.00%;
    left: 20%;
    z-index: 0;
}

.p2-icon-6 {
    grid-column: 10 / 12;
    top: 57.00%;
    left: -13%;
    z-index: 0;
}

.p2-icon-7 {
    grid-column: 9 / 11;
    top: 87%;
    left: -11%;
    z-index: 0;
}

.p2-body-2 {
    grid-row: 6 / 7;
    grid-column: 3 / 11;
    width: 100%;
    margin-top: 4rem;
    justify-content: center;
    color: #ece3dc;
}

/* Paragraph 3 - Configured with CSS Grid Rows & Dynamic Push */
.paragraph-3 {
    background: #020202 url('Asset/4. Paragraph 3/BG.png') no-repeat top;
    background-size: cover;
    color: #ffffff;
}

.paragraph-3 .grid-container {
    /* padding-bottom: 60px; */
    height: auto;
    aspect-ratio: unset;
    grid-template-rows: auto;
}

.paragraph-3 .grid-item {
    position: relative;
}

.p3-title-1 {
    grid-row: 1 / 2;
    grid-column: 3 / 12;
    width: 100%;
    left: -6%;
    margin-top: 80px;
}

.p3-top-watch {
    grid-row: 2 / 3;
    grid-column: 1 / 13;
    width: 100%;
    margin: 1.5rem 0;
}



.p3-title-2 {
    grid-row: 3 / 4;
    grid-column: 2 / 11;
    width: 100%;
    left: 6%;
    /* margin-top: 40px; */
}

.p3-body {
    grid-row: 4 / 5;
    grid-column: 3 / 11;
    width: 100%;
    color: #000000;
    margin-top: 25px;
}

.p3-icons {
    grid-row: 5 / 6;
    grid-column: 2 / 11;
    width: 100%;
    left: 6%;
    margin-top: 40px;
}

.p3-bottom-watches {
    grid-row: 6 / 7;
    grid-column: 1 / 13;
    width: 100%;
    margin-top: 30px;
}

/* Paragraph 4 - Configured with CSS Grid Rows & Dynamic Push */
.paragraph-4 {
    background: #000000 url('Asset/5. Paragraph 4/BG.png') no-repeat top;
    background-size: cover;
    color: #000000;
}

.paragraph-4 .grid-container {
    /* padding-bottom: 80px; */
    height: auto;
    aspect-ratio: unset;
    grid-template-rows: auto;
}

.paragraph-4 .grid-item {
    position: relative;
}

.p4-top-watches {
    grid-row: 1 / 3;
    grid-column: 1 / 13;
    width: 100%;
}

.p4-title {
    grid-row: 1/2;
    grid-column: 4 / 11;
    width: 100%;
    top: 80%;
    z-index: 2;
}

.p4-body {
    grid-row: 2 / 4;
    grid-column: 3 / 11;
    width: 100%;
    top: 30%;
    /* top: 65%; */
}

.p4-quote {
    grid-row: 4 / 5;
    grid-column: 4 / 10;
    width: 100%;
    margin-top: 5rem;
}

.p4-icons {
    grid-row: 5 / 6;
    grid-column: 3 / 11;
    width: 100%;
    margin-top: 2rem;
    top: 40%;
    -webkit-transform: translateY(40%);
    z-index: 1;
}

.p4-bottom-watch {
    grid-row: 6 / 7;
    grid-column: 1 / 13;
    width: 100%;
    z-index: 0;
}


.scroll-reveal {
    opacity: 0;
    transform: translateY(40px) scale(0.98);
    filter: blur(3px);
    transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1),
        transform 1.1s cubic-bezier(0.16, 1, 0.3, 1),
        filter 1.1s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform, filter;
}

.scroll-reveal.active {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
}

/* Luxury Depth Zoom Reveal */
.scroll-reveal-zoom {
    opacity: 0;
    transform: scale(0.86) translateY(25px);
    filter: blur(5px);
    transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1),
        transform 1.2s cubic-bezier(0.16, 1, 0.3, 1),
        filter 1.2s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform, filter;
}

.scroll-reveal-zoom.active {
    opacity: 1;
    transform: scale(1) translateY(0);
    filter: blur(0);
}

/* Ambient Floating Animation for Watch Showcase Images */
@keyframes luxuryWatchFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-12px);
    }
}

.hero-top-watch.active,
.p1-watch.active,
.p2-watch.active,
.p3-top-watch.active {
    animation: luxuryWatchFloat 5s ease-in-out infinite alternate;
}

/* Hover Micro-Interactions on Icons */
.p2-icon {
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        filter 0.4s ease;
}

.p2-icon:hover {
    transform: scale(1.02) translateY(-4px) !important;
    filter: drop-shadow(0 6px 12px rgba(255, 102, 0, 0.35));
}

@media (max-width: 1030px) {

    /* .p4-quote,
    .p4-icons,
    .p4-bottom-watch {
        margin-top: 8rem;
    } */

}

/* Responsive Media Queries */
@media (max-width: 920px) {



    .p1-body,
    .p2-body-1,
    .p2-body-2,
    .p3-body,
    .p4-body {
        grid-column: 2 / 12 !important;
        width: 100% !important;
    }

    .body-text {
        gap: 1rem !important;
    }

    .body-text p {
        padding: 0 5px !important;
        line-height: 1.5 !important;
        width: 98%;
    }

    .p4-body {
        top: 0;
        grid-row: 3/4;
    }

    .p2-icon-4 {
        top: 10.5%;
    }

    .p2-icon-2,
    .p2-icon-6 {
        top: 61.00%;
    }

    .p2-icon-1,
    .p2-icon-7 {
        top: 92%;
    }

    .p4-quote {
        margin-top: 3rem;
    }

}

@media (max-width: 480px) {
    .body-text {
        gap: 0.6rem !important;
    }

    .body-text p {
        font-size: 10px !important;
        padding: 0 5px !important;
        line-height: 1.4 !important;
    }

    .p4-quote {
        margin-top: 2rem;
    }

    .p2-icon-1,
    .p2-icon-7 {
        top: 105%;
    }

    .p3-title-1 {
        margin-top: 4rem;
    }
}