/* =========================================================
   PREMIUM ANIMATION & HOVER EFFECTS
   Pravya
========================================================= */


/* =========================================================
   GLOBAL
========================================================= */

html {
    scroll-behavior: smooth;
}

body {
    overflow-x: hidden;
}


/* Smooth transitions */

a,
button,
img,
input,
textarea,
select,
.highlight-item,
.amenity-card,
.plan-card,
.gallery-card,
.pricing-table tr,
.location-tab,
.location-panel,
.footer-column,
.sticky-features > div {
    transition:
        transform 0.35s ease,
        opacity 0.35s ease,
        background-color 0.35s ease,
        color 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease,
        filter 0.35s ease;
}


/* =========================================================
   SCROLL REVEAL
========================================================= */

.section,
.enquire-section,
.footer {
    opacity: 0;
    transform: translateY(50px);

    transition:
        opacity 0.9s ease,
        transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.section.reveal,
.enquire-section.reveal,
.footer.reveal {
    opacity: 1;
    transform: translateY(0);
}


/* =========================================================
   SECTION HEADINGS
========================================================= */

.section-heading {
    position: relative;
}

.section-heading span {
    display: inline-block;

    opacity: 0;

    transform: translateY(15px);

    transition:
        opacity 0.7s ease 0.1s,
        transform 0.7s ease 0.1s;
}

.section-heading h2 {
    opacity: 0;

    transform: translateY(20px);

    transition:
        opacity 0.8s ease 0.2s,
        transform 0.8s ease 0.2s;
}

.section-heading .heading-line {
    width: 0;

    transition:
        width 0.8s ease 0.45s;
}

.section.reveal .section-heading span,
.enquire-section.reveal .section-heading span {
    opacity: 1;
    transform: translateY(0);
}

.section.reveal .section-heading h2,
.enquire-section.reveal .section-heading h2 {
    opacity: 1;
    transform: translateY(0);
}

.section.reveal .section-heading .heading-line,
.enquire-section.reveal .section-heading .heading-line {
    width: 70px;
}


/* =========================================================
   NAVBAR
========================================================= */

.desktop-nav a {
    position: relative;
    overflow: hidden;
}

.desktop-nav a::before {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 0;
    height: 2px;

    background: currentColor;

    transition:
        width 0.35s ease;
}

.desktop-nav a:hover::before {
    width: 100%;
}

.desktop-nav a i {
    transition:
        transform 0.3s ease;
}

.desktop-nav a:hover i {
    transform:
        translateY(-3px)
        scale(1.15);
}


/* Logo */

.logo {
    transition:
        transform 0.4s ease,
        filter 0.4s ease;
}

.logo:hover {
    transform: scale(1.05);

    filter:
        drop-shadow(
            0 5px 15px rgba(0, 0, 0, 0.25)
        );
}


/* =========================================================
   NAV BROCHURE
========================================================= */

.nav-brochure {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.nav-brochure::before {
    content: "";

    position: absolute;

    top: 0;
    left: -120%;

    width: 70%;
    height: 100%;

    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.4),
        transparent
    );

    transform: skewX(-25deg);

    transition:
        left 0.65s ease;

    z-index: -1;
}

.nav-brochure:hover::before {
    left: 140%;
}

.nav-brochure:hover {
    transform: translateY(-4px);

    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.18);
}


/* =========================================================
   BUTTONS
========================================================= */

.primary-btn,
.table-btn,
.plan-overlay button,
.mobile-nav button {
    position: relative;

    overflow: hidden;

    isolation: isolate;
}


/* Shine */

.primary-btn::before,
.table-btn::before,
.plan-overlay button::before,
.mobile-nav button::before {
    content: "";

    position: absolute;

    top: 0;
    left: -120%;

    width: 70%;
    height: 100%;

    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.4),
        transparent
    );

    transform: skewX(-25deg);

    transition:
        left 0.65s ease;

    z-index: -1;
}

.primary-btn:hover::before,
.table-btn:hover::before,
.plan-overlay button:hover::before,
.mobile-nav button:hover::before {
    left: 140%;
}


/* Button hover */

.primary-btn:hover,
.table-btn:hover,
.plan-overlay button:hover,
.mobile-nav button:hover {
    transform: translateY(-4px);

    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.18);
}


/* Button press */

.primary-btn:active,
.nav-brochure:active,
.table-btn:active {
    transform:
        translateY(-1px)
        scale(0.98);
}


/* =========================================================
   HERO SECTION
========================================================= */

.hero {
    overflow: hidden;
}


/* =========================================================
   HERO IMAGE ZOOM
========================================================= */

.hero-slide img {
    transform: scale(1.05);

    transition:
        transform 8s cubic-bezier(0.22, 1, 0.36, 1);
}

.hero-slide.active img {
    transform: scale(1.12);
}


/* =========================================================
   HERO OVERLAY
========================================================= */

.hero-overlay {
    transition:
        opacity 1s ease,
        background 1s ease;
}


/* =========================================================
   HERO CONTENT
========================================================= */

.hero-content {
    animation:
        heroContentReveal
        1.2s
        cubic-bezier(0.22, 1, 0.36, 1)
        both;
}

@keyframes heroContentReveal {

    from {
        opacity: 0;

        transform:
            translateY(60px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }

}


/* =========================================================
   HERO LEFT CARD
   PREMIUM ANIMATION
========================================================= */

.hero-card {
    position: relative;

    transform-origin: center center;

    will-change: transform;

    animation:
        heroCardEntrance
        1.2s
        cubic-bezier(0.22, 1, 0.36, 1)
        both,

        heroCardFloat
        5s
        ease-in-out
        1.2s
        infinite;

    transition:
        box-shadow 0.5s ease,
        filter 0.5s ease;
}


/* Card entrance */

@keyframes heroCardEntrance {

    from {
        opacity: 0;

        transform:
            translateX(-80px)
            translateY(30px)
            scale(0.92);
    }

    to {
        opacity: 1;

        transform:
            translateX(0)
            translateY(0)
            scale(1);
    }

}


/* Continuous floating */

@keyframes heroCardFloat {

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

    25% {
        transform:
            translateY(-5px)
            rotate(-0.2deg);
    }

    50% {
        transform:
            translateY(-10px)
            rotate(0.2deg);
    }

    75% {
        transform:
            translateY(-5px)
            rotate(-0.2deg);
    }

}


/* Card hover */

.hero-card:hover {
    filter: brightness(1.03);

    box-shadow:
        0 25px 60px rgba(0, 0, 0, 0.25);
}


/* =========================================================
   HERO CARD GLOW
========================================================= */

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

    position: absolute;

    inset: -2px;

    border-radius: inherit;

    background: linear-gradient(
        120deg,
        transparent,
        rgba(200, 154, 61, 0.4),
        transparent
    );

    opacity: 0;

    z-index: -1;

    transition:
        opacity 0.5s ease,
        transform 0.5s ease;
}

.hero-card:hover::before {
    opacity: 1;

    transform:
        scale(1.02);
}


/* =========================================================
   HERO CARD TOP
========================================================= */

.hero-top {
    position: relative;

    overflow: hidden;
}


/* Moving shine */

.hero-top::after {
    content: "";

    position: absolute;

    top: 0;
    left: -120%;

    width: 80%;
    height: 100%;

    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.45),
        transparent
    );

    transform: skewX(-25deg);

    animation:
        heroCardShine
        4s
        ease-in-out
        infinite;
}

@keyframes heroCardShine {

    0% {
        left: -120%;
    }

    35%,
    100% {
        left: 140%;
    }

}


/* =========================================================
   HERO CARD CONTENT
========================================================= */

.hero-card h1 {
    animation:
        heroElementReveal
        0.8s
        ease
        0.35s
        both;
}

.hero-card h2 {
    animation:
        heroElementReveal
        0.8s
        ease
        0.45s
        both;
}

.hero-card .hero-by {
    animation:
        heroElementReveal
        0.8s
        ease
        0.55s
        both;
}

.hero-card .hero-location {
    animation:
        heroElementReveal
        0.8s
        ease
        0.65s
        both;
}

.hero-card .hero-offers {
    animation:
        heroElementReveal
        0.8s
        ease
        0.75s
        both;
}

.hero-card .hero-price {
    animation:
        heroElementReveal
        0.8s
        ease
        0.85s
        both;
}

.hero-card .hero-btn {
    animation:
        heroElementReveal
        0.8s
        ease
        1s
        both;
}


@keyframes heroElementReveal {

    from {
        opacity: 0;

        transform:
            translateX(-25px);
    }

    to {
        opacity: 1;

        transform:
            translateX(0);
    }

}


/* =========================================================
   HERO PRICE
========================================================= */

.hero-price strong {
    display: inline-block;

    animation:
        pricePulse
        3s
        ease-in-out
        infinite;
}

@keyframes pricePulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.03);
    }

}


/* =========================================================
   HERO BUTTON
========================================================= */

.hero-btn {
    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}

.hero-btn:hover {
    transform:
        translateY(-4px)
        scale(1.03);

    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.25);
}


/* =========================================================
   HERO ARROWS
========================================================= */

.hero-arrow {
    transition:
        transform 0.35s ease,
        background 0.35s ease,
        opacity 0.35s ease,
        box-shadow 0.35s ease;
}

.hero-arrow:hover {
    transform:
        translateY(-50%)
        scale(1.12);

    box-shadow:
        0 10px 25px rgba(0, 0, 0, 0.2);
}


/* Arrow icon */

.hero-arrow i {
    transition:
        transform 0.3s ease;
}

.hero-prev:hover i {
    transform:
        translateX(-3px);
}

.hero-next:hover i {
    transform:
        translateX(3px);
}


/* =========================================================
   HERO DOTS
========================================================= */

.hero-dots button {
    transition:
        transform 0.3s ease,
        width 0.3s ease,
        background 0.3s ease;
}

.hero-dots button:hover {
    transform:
        scale(1.25);
}


/* =========================================================
   OVERVIEW
========================================================= */

.overview-content {
    transform:
        translateX(-30px);

    opacity: 0;

    transition:
        transform 0.9s ease,
        opacity 0.9s ease;
}

.overview-image {
    transform:
        translateX(30px);

    opacity: 0;

    transition:
        transform 0.9s ease 0.2s,
        opacity 0.9s ease 0.2s;
}

.overview-section.reveal .overview-content {
    transform:
        translateX(0);

    opacity: 1;
}

.overview-section.reveal .overview-image {
    transform:
        translateX(0);

    opacity: 1;
}


/* Overview image */

.overview-image {
    overflow: hidden;
}

.overview-image img {
    transition:
        transform 0.8s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.5s ease;
}

.overview-image:hover img {
    transform:
        scale(1.07);

    filter:
        brightness(1.05);
}


/* =========================================================
   HIGHLIGHTS
========================================================= */

.highlight-item {
    position: relative;

    opacity: 0;

    transform:
        translateY(30px);
}

.highlights-section.reveal .highlight-item {
    opacity: 1;

    transform:
        translateY(0);
}


/* Stagger */

.highlights-section.reveal .highlight-item:nth-child(1) {
    transition-delay: 0.05s;
}

.highlights-section.reveal .highlight-item:nth-child(2) {
    transition-delay: 0.10s;
}

.highlights-section.reveal .highlight-item:nth-child(3) {
    transition-delay: 0.15s;
}

.highlights-section.reveal .highlight-item:nth-child(4) {
    transition-delay: 0.20s;
}

.highlights-section.reveal .highlight-item:nth-child(5) {
    transition-delay: 0.25s;
}

.highlights-section.reveal .highlight-item:nth-child(6) {
    transition-delay: 0.30s;
}

.highlights-section.reveal .highlight-item:nth-child(7) {
    transition-delay: 0.35s;
}

.highlights-section.reveal .highlight-item:nth-child(8) {
    transition-delay: 0.40s;
}


/* Gold border */

.highlight-item::before {
    content: "";

    position: absolute;

    inset: 0;

    border-radius: inherit;

    opacity: 0;

    box-shadow:
        inset 0 0 0 1px
        rgba(200, 154, 61, 0.5);

    transition:
        opacity 0.3s ease;

    pointer-events: none;
}

.highlight-item:hover {
    transform:
        translateY(-7px) !important;

    box-shadow:
        0 15px 35px rgba(0, 0, 0, 0.12);
}

.highlight-item:hover::before {
    opacity: 1;
}


/* Highlight icon */

.highlight-item i {
    transition:
        transform 0.5s ease,
        color 0.35s ease;
}

.highlight-item:hover i {
    transform:
        rotate(360deg)
        scale(1.15);
}


/* =========================================================
   PRICING
========================================================= */

.pricing-table tbody tr {
    opacity: 0;

    transform:
        translateX(-25px);
}

.pricing-section.reveal .pricing-table tbody tr {
    opacity: 1;

    transform:
        translateX(0);
}

.pricing-section.reveal tbody tr:nth-child(1) {
    transition-delay: 0.15s;
}

.pricing-section.reveal tbody tr:nth-child(2) {
    transition-delay: 0.30s;
}

.pricing-section.reveal tbody tr:nth-child(3) {
    transition-delay: 0.45s;
}

.pricing-table tbody tr:hover {
    transform:
        scale(1.015);

    box-shadow:
        0 10px 25px rgba(0, 0, 0, 0.08);
}

.pricing-table tbody tr:hover td {
    color: #111;
}


/* =========================================================
   FLOOR PLANS
========================================================= */

.plan-card {
    overflow: hidden;

    opacity: 0;

    transform:
        translateY(35px);
}

.plans-section.reveal .plan-card {
    opacity: 1;

    transform:
        translateY(0);
}

.plans-section.reveal .plan-card:nth-child(1) {
    transition-delay: 0.15s;
}

.plans-section.reveal .plan-card:nth-child(2) {
    transition-delay: 0.3s;
}


/* Plan image */

.plan-image {
    overflow: hidden;
}

.plan-image img {
    transition:
        transform 0.8s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.5s ease;
}

.plan-card:hover {
    transform:
        translateY(-10px);

    box-shadow:
        0 20px 45px rgba(0, 0, 0, 0.16);
}

.plan-card:hover .plan-image img {
    transform:
        scale(1.1);

    filter:
        brightness(0.75);
}


/* Plan overlay */

.plan-overlay {
    transition:
        opacity 0.4s ease,
        backdrop-filter 0.4s ease;
}

.plan-card:hover .plan-overlay {
    backdrop-filter:
        blur(3px);
}


/* Plan button */

.plan-overlay button {
    opacity: 0;

    transform:
        translateY(20px);

    transition:
        opacity 0.4s ease,
        transform 0.4s ease,
        background 0.3s ease;
}

.plan-card:hover .plan-overlay button {
    opacity: 1;

    transform:
        translateY(0);
}


/* =========================================================
   AMENITIES
========================================================= */

.amenity-card {
    position: relative;

    overflow: hidden;

    opacity: 0;

    transform:
        translateY(35px);
}

.amenities-section.reveal .amenity-card {
    opacity: 1;

    transform:
        translateY(0);
}


/* Stagger */

.amenities-section.reveal .amenity-card:nth-child(1) {
    transition-delay: 0.05s;
}

.amenities-section.reveal .amenity-card:nth-child(2) {
    transition-delay: 0.10s;
}

.amenities-section.reveal .amenity-card:nth-child(3) {
    transition-delay: 0.15s;
}

.amenities-section.reveal .amenity-card:nth-child(4) {
    transition-delay: 0.20s;
}

.amenities-section.reveal .amenity-card:nth-child(5) {
    transition-delay: 0.25s;
}

.amenities-section.reveal .amenity-card:nth-child(6) {
    transition-delay: 0.30s;
}


/* Amenity hover */

.amenity-card:hover {
    transform:
        translateY(-10px)
        scale(1.02) !important;

    box-shadow:
        0 20px 40px rgba(0, 0, 0, 0.2);
}


/* Image */

.amenity-card img {
    transition:
        transform 0.8s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.5s ease;
}

.amenity-card:hover img {
    transform:
        scale(1.12);

    filter:
        brightness(0.72);
}


/* Dark gradient */

.amenity-card::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(0, 0, 0, 0.55),
            transparent 55%
        );

    opacity: 0.7;

    transition:
        opacity 0.4s ease;

    pointer-events: none;
}

.amenity-card:hover::after {
    opacity: 1;
}


/* Amenity text */

.amenity-card div {
    transition:
        transform 0.4s ease,
        letter-spacing 0.4s ease;
}

.amenity-card:hover div {
    transform:
        translateY(-5px);

    letter-spacing:
        1px;
}


/* Amenity list */

.amenity-list span {
    display: inline-block;

    transition:
        transform 0.3s ease,
        background 0.3s ease,
        color 0.3s ease;
}

.amenity-list span:hover {
    transform:
        translateY(-4px);

    background:
        #111;

    color:
        #fff;
}


/* =========================================================
   GALLERY
========================================================= */

.gallery-card {
    position: relative;

    overflow: hidden;
}

.gallery-card img {
    transition:
        transform 0.8s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.5s ease;
}

.gallery-card:hover img {
    transform:
        scale(1.1);

    filter:
        brightness(0.7);
}


/* Gallery overlay */

.gallery-card::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(0, 0, 0, 0.55),
            transparent 55%
        );

    opacity: 0;

    transition:
        opacity 0.4s ease;

    pointer-events: none;
}

.gallery-card:hover::after {
    opacity: 1;
}


/* Gallery text */

.gallery-card span {
    transition:
        transform 0.4s ease,
        opacity 0.4s ease;
}

.gallery-card:hover span {
    transform:
        translateY(-5px);
}


/* Gallery arrows */

.gallery-arrow {
    transition:
        transform 0.35s ease,
        background 0.35s ease,
        box-shadow 0.35s ease;
}

.gallery-arrow:hover {
    transform:
        scale(1.12);

    box-shadow:
        0 10px 25px rgba(0, 0, 0, 0.18);
}


/* =========================================================
   LOCATION
========================================================= */

.location-map {
    overflow: hidden;
}

.location-map iframe {
    transition:
        transform 0.7s ease,
        filter 0.7s ease;
}

.location-map:hover iframe {
    transform:
        scale(1.02);
}


/* Location tabs */

.location-tab {
    position: relative;

    overflow: hidden;
}

.location-tab::after {
    content: "";

    position: absolute;

    bottom: 0;

    left: 50%;

    width: 0;

    height: 3px;

    transform:
        translateX(-50%);

    background:
        currentColor;

    transition:
        width 0.35s ease;
}

.location-tab:hover::after,
.location-tab.active::after {
    width: 70%;
}

.location-tab:hover {
    transform:
        translateY(-4px);
}


/* Location panel */

.location-panel {
    animation:
        locationPanelIn
        0.5s
        ease
        both;
}

@keyframes locationPanelIn {

    from {
        opacity: 0;

        transform:
            translateY(15px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }

}


/* Location items */

.location-panel div {
    transition:
        transform 0.3s ease,
        padding-left 0.3s ease;
}

.location-panel div:hover {
    transform:
        translateX(8px);
}

.location-panel i {
    transition:
        transform 0.3s ease;
}

.location-panel div:hover i {
    transform:
        scale(1.2);
}


/* =========================================================
   ENQUIRY SECTION
========================================================= */

.enquire-subtitle {
    opacity: 0;

    transform:
        translateY(20px);

    transition:
        opacity 0.8s ease 0.25s,
        transform 0.8s ease 0.25s;
}

.enquire-section.reveal .enquire-subtitle {
    opacity: 1;

    transform:
        translateY(0);
}


/* Bottom enquiry */

.bottom-enquiry {
    opacity: 0;

    transform:
        translateY(40px);

    transition:
        opacity 0.9s ease 0.35s,
        transform 0.9s ease 0.35s;
}

.enquire-section.reveal .bottom-enquiry {
    opacity: 1;

    transform:
        translateY(0);
}


/* Bottom form */

.bottom-form {
    transition:
        transform 0.4s ease,
        box-shadow 0.4s ease;
}

.bottom-form:hover {
    transform:
        translateY(-6px);

    box-shadow:
        0 20px 45px rgba(0, 0, 0, 0.15);
}


/* Bottom image */

.bottom-image {
    overflow: hidden;
}

.bottom-image img {
    transition:
        transform 0.8s ease,
        filter 0.5s ease;
}

.bottom-image:hover img {
    transform:
        scale(1.07);

    filter:
        brightness(1.05);
}


/* =========================================================
   FORM INPUTS
========================================================= */

.form-field {
    position: relative;
}

.form-field input {
    transition:
        border-color 0.3s ease,
        box-shadow 0.3s ease,
        transform 0.3s ease;
}

.form-field input:focus {
    transform:
        translateY(-2px);

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

.form-field input::placeholder {
    transition:
        opacity 0.3s ease,
        transform 0.3s ease;
}

.form-field input:focus::placeholder {
    opacity: 0;

    transform:
        translateX(10px);
}


/* =========================================================
   CHECKBOX
========================================================= */

.consent input {
    accent-color:
        #c89a3d;
}


/* =========================================================
   STICKY FORM
========================================================= */

.sticky-form {
    animation:
        stickyFormIn
        1s
        cubic-bezier(0.22, 1, 0.36, 1)
        both;
}

@keyframes stickyFormIn {

    from {
        opacity: 0;

        transform:
            translateX(80px);
    }

    to {
        opacity: 1;

        transform:
            translateX(0);
    }

}


/* Sticky form */

.sticky-form-body {
    transition:
        box-shadow 0.4s ease,
        transform 0.4s ease;
}

/* Sticky features */

.sticky-features > div {
    transition:
        transform 0.35s ease,
        background 0.35s ease;
}

.sticky-features > div:hover {
    transform:
        translateY(-5px);
}

.sticky-features i {
    transition:
        transform 0.35s ease;
}

.sticky-features > div:hover i {
    transform:
        scale(1.2)
        rotate(-5deg);
}


/* =========================================================
   MOBILE BOTTOM BAR
========================================================= */

.mobile-bottom-bar a,
.mobile-bottom-bar button {
    position: relative;

    overflow: hidden;
}

.mobile-bottom-bar a::after,
.mobile-bottom-bar button::after {
    content: "";

    position: absolute;

    left: 50%;
    top: 50%;

    width: 0;
    height: 0;

    border-radius: 50%;

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

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

    transition:
        width 0.5s ease,
        height 0.5s ease;
}

.mobile-bottom-bar a:hover::after,
.mobile-bottom-bar button:hover::after {
    width: 250px;
    height: 250px;
}


/* =========================================================
   FOOTER
========================================================= */

.footer-logo {
    transition:
        transform 0.4s ease,
        filter 0.4s ease;
}

.footer-logo:hover {
    transform:
        scale(1.06);

    filter:
        drop-shadow(
            0 8px 20px rgba(0, 0, 0, 0.25)
        );
}


/* Footer columns */

.footer-column {
    transition:
        transform 0.35s ease;
}

.footer-column:hover {
    transform:
        translateY(-5px);
}

.footer-column h3 {
    transition:
        letter-spacing 0.35s ease;
}

.footer-column:hover h3 {
    letter-spacing:
        1px;
}


/* Footer links */

.footer-links a {
    position: relative;
}

.footer-links a::after {
    content: "";

    position: absolute;

    bottom: -3px;
    left: 0;

    width: 0;
    height: 1px;

    background:
        currentColor;

    transition:
        width 0.3s ease;
}

.footer-links a:hover::after {
    width: 100%;
}

.footer-links a:hover {
    transform:
        translateY(-2px);
}


/* =========================================================
   MODAL
========================================================= */

.modal {
    perspective:
        1000px;
}

.modal-box {
    animation:
        modalIn
        0.45s
        cubic-bezier(0.22, 1, 0.36, 1)
        both;
}

@keyframes modalIn {

    from {
        opacity: 0;

        transform:
            translateY(40px)
            scale(0.92)
            rotateX(4deg);
    }

    to {
        opacity: 1;

        transform:
            translateY(0)
            scale(1)
            rotateX(0);
    }

}


/* Modal close */

.modal-close {
    transition:
        transform 0.35s ease,
        background 0.35s ease;
}

.modal-close:hover {
    transform:
        rotate(90deg)
        scale(1.1);
}


/* =========================================================
   MOBILE MENU
========================================================= */

.mobile-nav {
    transform-origin:
        top center;
}

.mobile-nav a {
    transition:
        transform 0.3s ease,
        padding-left 0.3s ease,
        color 0.3s ease;
}

.mobile-nav a:hover {
    transform:
        translateX(8px);

    padding-left:
        8px;
}


/* =========================================================
   MOBILE MENU BUTTON
========================================================= */

.mobile-menu-btn {
    transition:
        transform 0.3s ease,
        background 0.3s ease;
}

.mobile-menu-btn:hover {
    transform:
        scale(1.08);
}

.mobile-menu-btn:active {
    transform:
        scale(0.92);
}


/* =========================================================
   IMAGE LOADING
========================================================= */

img {
    image-rendering:
        auto;
}


/* =========================================================
   SOFT FLOAT
========================================================= */

@keyframes softFloat {

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

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

}


/* =========================================================
   MOBILE ANIMATIONS
========================================================= */

@media (max-width: 768px) {

    /* -----------------------------------------------------
       HERO
    ----------------------------------------------------- */

    .hero-card {

        animation:
            heroCardEntranceMobile
            0.9s
            cubic-bezier(0.22, 1, 0.36, 1)
            both,

            heroCardFloatMobile
            6s
            ease-in-out
            0.9s
            infinite;
    }


    /* Mobile card entrance */

    @keyframes heroCardEntranceMobile {

        from {
            opacity: 0;

            transform:
                translateY(40px)
                scale(0.95);
        }

        to {
            opacity: 1;

            transform:
                translateY(0)
                scale(1);
        }

    }


    /* Mobile card floating */

    @keyframes heroCardFloatMobile {

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

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

    }


    /* Hero content */

    .hero-content {
        animation-duration:
            0.8s;
    }


    /* Hero card inner content */

    .hero-card h1,
    .hero-card h2,
    .hero-card .hero-by,
    .hero-card .hero-location,
    .hero-card .hero-offers,
    .hero-card .hero-price,
    .hero-card .hero-btn {
        animation-duration:
            0.7s;
    }


    /* -----------------------------------------------------
       SECTIONS
    ----------------------------------------------------- */

    .section {
        transform:
            translateY(30px);
    }


    /* -----------------------------------------------------
       AMENITIES
    ----------------------------------------------------- */

    .amenity-card:hover {
        transform:
            translateY(-5px) !important;
    }


    /* -----------------------------------------------------
       FLOOR PLANS
    ----------------------------------------------------- */

    .plan-card:hover {
        transform:
            translateY(-5px) !important;
    }


    /* -----------------------------------------------------
       HIGHLIGHTS
    ----------------------------------------------------- */

    .highlight-item:hover {
        transform:
            translateY(-5px) !important;
    }


    /* -----------------------------------------------------
       OVERVIEW
    ----------------------------------------------------- */

    .overview-content,
    .overview-image {
        transform:
            translateY(20px);
    }

    .overview-section.reveal .overview-content,
    .overview-section.reveal .overview-image {
        transform:
            translateY(0);
    }


    /* -----------------------------------------------------
       PRICING
    ----------------------------------------------------- */

    .pricing-table tbody tr:hover {
        transform:
            none;
    }


    /* -----------------------------------------------------
       STICKY FORM
    ----------------------------------------------------- */

    .sticky-form {
        animation:
            none;
    }


    /* -----------------------------------------------------
       GALLERY
    ----------------------------------------------------- */

    .gallery-card:hover img {
        transform:
            scale(1.04);
    }


    /* -----------------------------------------------------
       LOCATION
    ----------------------------------------------------- */

    .location-tab:hover {
        transform:
            none;
    }


    /* -----------------------------------------------------
       FOOTER
    ----------------------------------------------------- */

    .footer-column:hover {
        transform:
            none;
    }


    /* -----------------------------------------------------
       BUTTONS
    ----------------------------------------------------- */

    .primary-btn:hover,
    .table-btn:hover,
    .plan-overlay button:hover,
    .mobile-nav button:hover {
        transform:
            translateY(-2px);
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .hero-card {
        animation:
            heroCardEntranceMobile
            0.8s
            cubic-bezier(0.22, 1, 0.36, 1)
            both,

            heroCardFloatMobile
            7s
            ease-in-out
            0.8s
            infinite;
    }

    .hero-card:hover {
        box-shadow:
            0 15px 35px rgba(0, 0, 0, 0.18);
    }

}


/* =========================================================
   ACCESSIBILITY
   REDUCED MOTION
========================================================= */

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

    *,
    *::before,
    *::after {

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            0.01ms !important;

        scroll-behavior:
            auto !important;
    }


    .section,
    .enquire-section,
    .footer,
    .highlight-item,
    .plan-card,
    .amenity-card,
    .pricing-table tbody tr,
    .hero-card {

        opacity:
            1 !important;

        transform:
            none !important;
    }

}