/* =========================================================
   TEN ONE RESORT
   Hero Section
   hero.css
   ========================================================= */


/* =========================================================
   1. HERO SECTION
   ========================================================= */

.hero-section {
    position: relative;

    display: flex;
    align-items: center;

    width: 100%;
    min-height: var(--hero-min-height);
    height: var(--hero-height);

    overflow: hidden;

    isolation: isolate;

    background-color: var(--color-primary-dark);
}


/* =========================================================
   2. HERO BACKGROUND
   ========================================================= */

.hero-background {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;

    z-index: var(--z-negative);

    background-color: var(--color-primary-dark);
}


/* =========================================================
   3. INDIVIDUAL SLIDES
   ========================================================= */

.hero-slide {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;

    opacity: 0;

    transform: scale(1.03);

    visibility: hidden;

    transition:
        opacity var(--hero-slide-duration) var(--ease-smooth),
        transform 6s var(--ease-smooth),
        visibility var(--hero-slide-duration);

    will-change:
        opacity,
        transform;
}


/* =========================================================
   4. SLIDE IMAGES
   ========================================================= */

/*
   Image 1:
   Reservoir / waterfront
*/

.hero-slide:nth-child(1) {
    background-image:
        url("../images/hbg3.webp");

    background-position: center center;
}


/*
   Image 2:
   Main resort exterior
*/

.hero-slide:nth-child(2) {
    background-image:
        url("../images/hbg4.webp");

    background-position: center center;
}


/*
   Image 3:
   Veranda / garden
*/

.hero-slide:nth-child(3) {
    background-image:
        url("../images/tohero1.avif");

    background-position: center center;
}


/*
   Image 4:
   Wide exterior
*/

.hero-slide:nth-child(4) {
    background-image:
        url("../images/tohero22.avif");

    background-position: center center;
}


/* =========================================================
   5. ACTIVE SLIDE
   ========================================================= */

.hero-slide.active {
    opacity: 1;

    visibility: visible;

    transform: scale(1);
}


/* =========================================================
   6. HERO OVERLAY
/* =========================================================
   HERO LIGHT / TEXT READABILITY OVERLAY
   Soft white glow behind the left-side content
   ========================================================= */
.hero-overlay {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    pointer-events: none;

    z-index: 1;

    background:
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.98) 0%,
            rgba(255, 255, 255, 0.80) 10%,
            rgba(255, 255, 255, 0.48) 20%,
            rgba(255, 255, 255, 0.20) 30%,
            rgba(255, 255, 255, 0.06) 40%,
            rgba(255, 255, 255, 0) 50%
        );
}
.hero-overlay::after {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        radial-gradient(
            ellipse 48% 70% at 14% 48%,
            rgba(255, 255, 255, 0.68) 0%,
            rgba(255, 255, 255, 0.38) 32%,
            rgba(255, 255, 255, 0.10) 56%,
            rgba(255, 255, 255, 0) 78%
        );
}
/* =========================================================
   7. HERO CONTENT CONTAINER
   ========================================================= */

.hero-container {
    position: relative;

    z-index: 5;

    display: flex;

    align-items: center;
    justify-content: space-between;

    width: min(
        calc(100% - (var(--container-padding) * 2)),
        var(--container-width-wide)
    );

    min-height: 100%;

    margin-inline: auto;

    padding-top: 120px;
    padding-bottom: 90px;
}


/* =========================================================
   8. HERO CONTENT
   ========================================================= */

.hero-content {
    position: relative;

    width: min(
        100%,
        var(--hero-content-width)
    );

    padding-top: 20px;

    z-index: 2;
}

.hero-content::before {
    content: "";

    position: absolute;

    top: -120px;
    left: -180px;

    width: 760px;
    height: 760px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255, 255, 255, 0.62) 0%,
            rgba(255, 255, 255, 0.42) 28%,
            rgba(255, 255, 255, 0.16) 55%,
            rgba(255, 255, 255, 0) 75%
        );

    filter: blur(8px);

    pointer-events: none;

    z-index: -1;
}
/* =========================================================
   9. EYEBROW
   ========================================================= */

.hero-eyebrow {
    display: inline-flex;

    align-items: center;

    gap: 11px;

    margin-bottom: var(--space-5);

    color: var(--color-primary-light);

    opacity: 0;

    transform: translateY(15px);

    animation:
        hero-content-in 800ms var(--ease-out)
        150ms forwards;
}

.hero-eyebrow-text {
    color: var(--color-primary-light);

    letter-spacing: 0.22em;
}


.hero-eyebrow-icon {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 25px;
    height: 25px;

    flex-shrink: 0;

    color: var(--color-primary-light);

    font-size: var(--icon-md);
}


.hero-eyebrow-text {
    color: var(--color-primary);

    letter-spacing: 0.22em;
}


/* =========================================================
   10. HERO TITLE
   ========================================================= */

.hero-title {
    max-width: 680px;

    margin-bottom: var(--space-4);

    color: var(--color-primary-dark);

    text-shadow: none;

    opacity: 0;

    transform: translateY(25px);

    animation:
        hero-content-in 900ms var(--ease-out)
        250ms forwards;
}

.hero-title span {
    display: block;

    color: var(--color-primary);
}


/* =========================================================
   11. HERO SUBTITLE
   ========================================================= */

.hero-subtitle-line {
    width: 44px;
    height: 1px;

    flex-shrink: 0;

    background-color: var(--color-primary-light);
}


.hero-subtitle-line {
    width: 44px;
    height: 1px;

    flex-shrink: 0;

    background-color: var(--color-primary-light);
}


.hero-subtitle p {
    color: var(--color-primary-light);

    font-weight: var(--font-weight-medium);
}


/* =========================================================
   12. HERO DESCRIPTION
   ========================================================= */

.hero-description {
    width: min(
        100%,
        620px
    );

    margin-bottom: var(--space-6);

    color: var(--color-text-dark);

    text-shadow: none;

    opacity: 0;

    transform: translateY(18px);

    animation:
        hero-content-in 800ms var(--ease-out)
        550ms forwards;
}


/* =========================================================
   13. HERO LOCATION
   ========================================================= */

.hero-location {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    min-height: 52px;

    margin-bottom: var(--space-8);

    padding: 0 18px;

    border: 1px solid rgba(255, 255, 255, 0.8);

    border-radius: 14px;

    color: var(--color-text-dark);

    background:
        rgba(255, 255, 255, 0.88);

    box-shadow:
        0 8px 24px rgba(20, 50, 37, 0.08);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}


.hero-location-icon {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    color: var(--color-primary);

    font-size: var(--icon-md);
}


/* =========================================================
   14. HERO ACTIONS
   ========================================================= */

.hero-actions {
    display: flex;

    align-items: center;

    gap: var(--space-3);

    flex-wrap: wrap;

    opacity: 0;

    transform: translateY(18px);

    animation:
        hero-content-in 800ms var(--ease-out)
        750ms forwards;
}


/* =========================================================
   15. HERO BOOK BUTTON
   ========================================================= */

.hero-book-btn {
    min-width: 195px;

    min-height: 58px;

    border-radius: 15px;
}


/* =========================================================
   16. HERO SECONDARY BUTTON
   ========================================================= */

.hero-actions .btn-secondary {
    min-height: 58px;

    min-width: 210px;

    color: var(--color-primary);

    background-color:
        rgba(255, 255, 255, 0.92);

    border-color:
        rgba(255, 255, 255, 0.95);

    box-shadow:
        0 8px 24px rgba(20, 50, 37, 0.08);
}


.hero-actions .btn-secondary:hover {
    color: var(--color-primary-dark);

    background-color: var(--color-white);

    border-color: var(--color-white);
}


/* =========================================================
   17. HERO HIGHLIGHTS
   ========================================================= */

.hero-highlights {
    display: flex;

    flex-direction: column;

    align-items: stretch;

    gap: var(--space-2);

    width: 265px;

    flex-shrink: 0;

    margin-top: 100px;

    opacity: 0;

    transform: translateX(25px);

    animation:
        hero-highlight-in 900ms var(--ease-out)
        700ms forwards;
}


/* =========================================================
   18. INDIVIDUAL HIGHLIGHT
   ========================================================= */

.hero-highlight {
    display: flex;

    align-items: center;

    gap: 14px;

    min-height: 68px;

    padding:
        0
        18px;

    border: 1px solid rgba(255, 255, 255, 0.26);

    border-radius: 14px;

    color: var(--color-white);

    background:
        rgba(42, 76, 61, 0.72);

    box-shadow:
        0 10px 26px rgba(17, 39, 29, 0.15);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    transition:
        transform var(--transition-base),
        background-color var(--transition-base),
        border-color var(--transition-base);
}


.hero-highlight:hover {
    transform: translateX(-4px);

    background:
        rgba(22, 74, 58, 0.84);

    border-color:
        rgba(255, 255, 255, 0.4);
}


/* =========================================================
   19. HIGHLIGHT ICON
   ========================================================= */

.highlight-icon {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    flex-shrink: 0;

    border-radius: 50%;

    color: var(--color-white);

    background:
        rgba(255, 255, 255, 0.12);

    font-size: var(--icon-md);
}


.highlight-text {
    color: var(--color-white);

    font-size: var(--font-size-sm);

    font-weight: var(--font-weight-medium);
}


/* =========================================================
   20. HERO SLIDER CONTROLS
   ========================================================= */

.hero-slider-controls {
    position: absolute;

    right: 50%;

    bottom: 32px;

    z-index: 10;

    display: flex;

    align-items: center;

    gap: 14px;

    transform: translateX(50%);
}


/* =========================================================
   21. SLIDER ARROWS
   ========================================================= */

.hero-slider-arrow {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    border: 1px solid rgba(255, 255, 255, 0.5);

    border-radius: 50%;

    color: var(--color-white);

    background:
        rgba(22, 74, 58, 0.45);

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    transition:
        transform var(--transition-base),
        background-color var(--transition-base),
        border-color var(--transition-base);
}


.hero-slider-arrow:hover {
    transform: translateY(-2px);

    background:
        rgba(22, 74, 58, 0.78);

    border-color:
        rgba(255, 255, 255, 0.75);
}


.hero-slider-arrow:active {
    transform: translateY(0);
}


/* =========================================================
   22. SLIDER DOTS
   ========================================================= */

.hero-slider-dots {
    display: flex;

    align-items: center;

    gap: 8px;
}


.hero-dot {
    width: 8px;
    height: 8px;

    padding: 0;

    border: 0;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, 0.45);

    opacity: 0.9;

    transform: scale(1);

    transition:
        width var(--transition-base),
        background-color var(--transition-base),
        transform var(--transition-base);
}


.hero-dot:hover {
    background-color:
        rgba(255, 255, 255, 0.8);
}


.hero-dot.active {
    width: 28px;

    border-radius: var(--radius-full);

    background-color:
        var(--color-white);

    transform: scale(1.02);
}


/* =========================================================
   23. SCROLL INDICATOR
   ========================================================= */

.hero-scroll-indicator {
    position: absolute;

    bottom: 28px;
    left: 50%;

    z-index: 10;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 6px;

    color: var(--color-white);

    transform: translateX(-50%);

    opacity: 0;

    animation:
        hero-scroll-in 800ms var(--ease-out)
        1100ms forwards;
}


.scroll-icon {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 48px;
    height: 48px;

    border: 1px solid rgba(255, 255, 255, 0.7);

    border-radius: 50%;

    background:
        rgba(22, 74, 58, 0.25);

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    animation:
        scroll-bounce 2s ease-in-out infinite;
}


.scroll-text {
    color: var(--color-white);

    text-shadow:
        0 2px 8px rgba(0, 0, 0, 0.2);
}


/* =========================================================
   24. ANIMATIONS
   ========================================================= */

@keyframes hero-content-in {

    from {
        opacity: 0;

        transform:
            translateY(25px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }

}


@keyframes hero-highlight-in {

    from {
        opacity: 0;

        transform:
            translateX(25px);
    }

    to {
        opacity: 1;

        transform:
            translateX(0);
    }

}


@keyframes hero-scroll-in {

    from {
        opacity: 0;

        transform:
            translate(-50%, 15px);
    }

    to {
        opacity: 1;

        transform:
            translate(-50%, 0);
    }

}


@keyframes scroll-bounce {

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

    50% {
        transform: translateY(4px);
    }

}


/* =========================================================
   25. TABLET
   ========================================================= */

@media (max-width: 1024px) {

    .hero-container {
        padding-top: 115px;
        padding-bottom: 100px;
    }


    .hero-content {
        max-width: 650px;
    }


    .hero-highlights {
        width: 225px;

        margin-top: 90px;
    }


    .hero-highlight {
        min-height: 62px;

        padding-inline: 14px;
    }


    .highlight-text {
        font-size: var(--font-size-xs);
    }


    .hero-slide:nth-child(1) {
        background-position: 58% center;
    }


    .hero-slide:nth-child(2) {
        background-position: center center;
    }


    .hero-slide:nth-child(3) {
        background-position: center center;
    }


    .hero-slide:nth-child(4) {
        background-position: center center;
    }

}


/* =========================================================
   26. MOBILE
   ========================================================= */

@media (max-width: 768px) {

    .hero-section {
        min-height: 760px;

        height: auto;
    }


    .hero-container {
        display: flex;

        flex-direction: column;

        align-items: flex-start;
        justify-content: center;

        width: calc(
            100% - (var(--container-padding) * 2)
        );

        min-height: 760px;

        padding-top: 125px;
        padding-bottom: 115px;
    }


    .hero-content {
        width: 100%;

        max-width: 100%;

        margin-top: 20px;
    }


    /*
       Stronger mobile overlay so text remains
       readable over the photographs.
    */



    .hero-title {
        color: var(--color-primary-dark);

        text-shadow: none;

    }

    .hero-title span {
    color: var(--color-primary);
    }


    /* Eyebrow */

    .hero-eyebrow {
        color: var(--color-primary-light);
    }

    .hero-eyebrow-text {
        color: var(--color-primary-light);
    }

    .hero-eyebrow-icon {
        color: var(--color-primary-light);
    }



    .hero-subtitle {
        margin-bottom: var(--space-5);
    }


    .hero-subtitle-line {
        background-color:var(--color-primary-light);
    }


    .hero-subtitle p {
        color: var(--color-primary-light);;
    }


    .hero-description {
        color: var(--color-text-dark);
        text-shadow:
            0 2px 10px rgba(0, 0, 0, 0.28);
    }


    .hero-location {
        min-height: 48px;

        margin-bottom: var(--space-6);

        padding-inline: 14px;

        background:
            rgba(255, 255, 255, 0.91);
    }


    .hero-actions {
        width: 100%;

        flex-direction: row;
    }


    .hero-actions .btn {
        flex: 1;

        min-width: 0;
    }


    .hero-highlights {
        position: absolute;

        right: auto;
        bottom: 90px;
        left: 0;

        display: grid;

        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );

        gap: 7px;

        width: 100%;

        margin: 0;

        padding: 0;

        transform: none;
    }


    .hero-highlight {
        min-height: 55px;

        justify-content: center;

        gap: 7px;

        padding-inline: 7px;

        border-radius: 10px;

        text-align: center;
    }


    .highlight-icon {
        width: 26px;
        height: 26px;

        font-size: 12px;
    }


    .highlight-text {
        font-size: 0.63rem;

        line-height: 1.2;
    }


    .hero-slider-controls {
        bottom: 30px;
    }


    .hero-scroll-indicator {
        display: none;
    }


    /* Mobile image positioning */

    .hero-slide:nth-child(1) {
        background-position:
            60% center;
    }


    .hero-slide:nth-child(2) {
        background-position:
            58% center;
    }


    .hero-slide:nth-child(3) {
        background-position:
            center center;
    }


    .hero-slide:nth-child(4) {
        background-position:
            52% center;
    }

}


/* =========================================================
   27. SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .hero-section {
        min-height: 720px;
    }


    .hero-container {
        min-height: 720px;

        padding-top: 110px;
        padding-bottom: 105px;
    }


    .hero-content {
        margin-top: 15px;
    }


    .hero-eyebrow {
        margin-bottom: var(--space-4);
    }


    .hero-title {
        margin-bottom: var(--space-3);
    }


    .hero-subtitle {
        margin-bottom: var(--space-4);
    }


    .hero-description {
        margin-bottom: var(--space-5);
    }


    .hero-location {
        margin-bottom: var(--space-5);

        min-height: 45px;
    }


    .hero-actions {
        gap: 8px;
    }


    .hero-actions .btn {
        min-height: 50px;

        padding-inline: 12px;

        font-size: 0.75rem;
    }


    .hero-highlights {
        bottom: 82px;

        gap: 5px;
    }


    .hero-highlight {
        min-height: 49px;

        border-radius: 9px;
    }


    .highlight-icon {
        display: none;
    }


    .highlight-text {
        font-size: 0.59rem;
    }


    .hero-slider-controls {
        bottom: 25px;

        gap: 10px;
    }


    .hero-slider-arrow {
        width: 36px;
        height: 36px;

        font-size: 11px;
    }


    .hero-dot {
        width: 7px;
        height: 7px;
    }


    .hero-dot.active {
        width: 24px;
    }

}


/* =========================================================
   28. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .hero-slide {
        transition:
            opacity var(--transition-fast);

        transform: none;
    }


    .hero-slide.active {
        transform: none;
    }


    .hero-eyebrow,
    .hero-title,
    .hero-subtitle,
    .hero-description,
    .hero-location,
    .hero-actions,
    .hero-highlights,
    .hero-scroll-indicator {
        animation: none;

        opacity: 1;

        transform: none;
    }


    .scroll-icon {
        animation: none;
    }

}



@media (min-width: 769px) and (max-width: 1024px) {

    .hero-overlay {
        background:
            linear-gradient(
                90deg,
                rgba(255, 255, 255, 0.97) 0%,
                rgba(255, 255, 255, 0.78) 10%,
                rgba(255, 255, 255, 0.46) 21%,
                rgba(255, 255, 255, 0.19) 32%,
                rgba(255, 255, 255, 0.05) 43%,
                rgba(255, 255, 255, 0) 54%
            );
    }

    .hero-overlay::after {
        background:
            radial-gradient(
                ellipse 50% 72% at 13% 48%,
                rgba(255, 255, 255, 0.67) 0%,
                rgba(255, 255, 255, 0.37) 32%,
                rgba(255, 255, 255, 0.10) 56%,
                rgba(255, 255, 255, 0) 78%
            );
    }

}
@media (max-width: 768px) {

    .hero-overlay {
        background:
            linear-gradient(
                180deg,
                rgba(255, 255, 255, 0.92) 0%,
                rgba(255, 255, 255, 0.78) 15%,
                rgba(255, 255, 255, 0.58) 30%,
                rgba(255, 255, 255, 0.30) 45%,
                rgba(255, 255, 255, 0.10) 60%,
                rgba(255, 255, 255, 0.02) 72%,
                rgba(255, 255, 255, 255, 0) 82%
            );
    }

    .hero-overlay::after {
        background:
            radial-gradient(
                ellipse 95% 62% at 24% 25%,
                rgba(255, 255, 255, 0.62) 0%,
                rgba(255, 255, 255, 0.36) 32%,
                rgba(255, 255, 255, 0.12) 55%,
                rgba(255, 255, 255, 0) 78%
            );
    }

}