/* ========================================
   KEERTHI SHIKARA
   CINEMATIC ANIMATIONS
======================================== */


/* ========================================
   LOADER
======================================== */

@keyframes loaderProgress {

    0% {
        width: 0;
    }

    100% {
        width: 100%;
    }
}


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

@keyframes heroZoom {

    0% {
        transform: scale(1.08);
    }

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


/* ========================================
   SCROLL LINE
======================================== */

@keyframes scrollLine {

    0% {
        top: -60%;
    }

    50% {
        top: 100%;
    }

    100% {
        top: 100%;
    }
}


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

.hero-eyebrow,
.hero h1,
.hero-description,
.hero-button {

    opacity: 0;

    transform: translateY(35px);
}

body.page-loaded .hero-eyebrow {

    animation:
        heroReveal 1s 0.3s cubic-bezier(.22, 1, .36, 1) forwards;
}

body.page-loaded .hero h1 {

    animation:
        heroReveal 1.2s 0.45s cubic-bezier(.22, 1, .36, 1) forwards;
}

body.page-loaded .hero-description {

    animation:
        heroReveal 1s 0.8s cubic-bezier(.22, 1, .36, 1) forwards;
}

body.page-loaded .hero-button {

    animation:
        heroReveal 1s 1s cubic-bezier(.22, 1, .36, 1) forwards;
}


@keyframes heroReveal {

    to {

        opacity: 1;

        transform:
            translateY(0);
    }
}

/* ========================================
   INTRO SECTION REVEAL
======================================== */

.reveal {

    opacity: 0;

    transform:
        translateY(60px);

    transition:
        opacity 1s cubic-bezier(.22, 1, .36, 1),

        transform 1s cubic-bezier(.22, 1, .36, 1);
}

.reveal.revealed {

    opacity: 1;

    transform:
        translateY(0);
}


/* Slight delay for content */

.intro-content.reveal {

    transition-delay:
        150ms;
}

/* ========================================
   CINEMATIC POLISH
======================================== */


/* ========================================
   SECTION REVEAL
======================================== */

.reveal {
    opacity: 0;

    transform: translateY(45px);

    transition:
        opacity 1000ms cubic-bezier(.22, 1, .36, 1),
        transform 1200ms cubic-bezier(.22, 1, .36, 1);
}

.reveal.revealed {
    opacity: 1;

    transform: translateY(0);
}


/* ========================================
   IMAGE REVEAL
======================================== */

.intro-image-wrap,
.boat-image-wrap,
.gallery-image-wrap,
.review-image-wrap {
    overflow: hidden;
}


/* Images begin slightly zoomed */

.intro-image,
.boat-image,
.gallery-image,
.review-image {
    transform: scale(1.08);

    transition:
        transform 1600ms cubic-bezier(.22, 1, .36, 1);
}


/* When visible */

.revealed .intro-image,
.revealed .boat-image,
.revealed .gallery-image,
.revealed .review-image {
    transform: scale(1);
}


/* ========================================
   TEXT REVEAL DELAY
======================================== */

.reveal:nth-child(2) {
    transition-delay: 120ms;
}

.reveal:nth-child(3) {
    transition-delay: 220ms;
}

.reveal:nth-child(4) {
    transition-delay: 320ms;
}


/* ========================================
   EXPERIENCE HOVER
======================================== */

.experience-item {
    transition:
        padding-left 700ms cubic-bezier(.22, 1, .36, 1),
        opacity 400ms ease;
}

.experience-item:hover {
    padding-left: 1.5rem;
}


/* ========================================
   JOURNEY CARD HOVER
======================================== */

.journey-card {
    transition:
        transform 800ms cubic-bezier(.22, 1, .36, 1),
        opacity 500ms ease;
}

.journey-card:hover {
    transform: translateY(-8px);
}


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

.gallery-item img {
    transition:
        transform 1600ms cubic-bezier(.22, 1, .36, 1),
        filter 800ms ease;
}

.gallery-item:hover img {
    transform: scale(1.05);
}


/* ========================================
   BUTTON MOTION
======================================== */

.hero-button,
.nav-book,
.booking-submit,
.footer-book-button {
    transition:
        transform 500ms cubic-bezier(.22, 1, .36, 1),
        background 400ms ease,
        color 400ms ease;
}

.hero-button:hover,
.nav-book:hover {
    transform: translateY(-3px);
}


/* ========================================
   LINK ARROWS
======================================== */

.text-link-arrow,
.experience-arrow,
.contact-arrow {
    transition:
        transform 500ms cubic-bezier(.22, 1, .36, 1);
}

.text-link:hover .text-link-arrow {
    transform: translate(5px, -5px);
}


/* ========================================
   SECTION NUMBER
======================================== */

.intro-number {
    transition:
        transform 1600ms cubic-bezier(.22, 1, .36, 1),
        opacity 1000ms ease;
}

.revealed .intro-number {
    transform: translateY(-10px);
}


/* ========================================
   SMOOTH IMAGE MOVEMENT
======================================== */

.hero-image,
.backwaters-main-image {
    will-change: transform;
}


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

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

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;

        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;

        transition-duration: 0.01ms !important;
    }

    .hero-image,
    .backwaters-main-image,
    .intro-image,
    .boat-image,
    .gallery-image,
    .review-image {
        transform: none !important;
    }

}

/* ========================================
   CINEMATIC SECTION TRANSITION
======================================== */

section {
    position: relative;
}


/* Fine transition line */

section:not(.hero)::before {
    content: "";

    position: absolute;

    top: 0;
    left: 6vw;
    right: 6vw;

    height: 1px;

    background: linear-gradient(90deg,
            transparent,
            rgba(216, 169, 40, 0.35),
            transparent);

    opacity: 0.5;

    pointer-events: none;
}

/* ========================================
   CINEMATIC HEADINGS
======================================== */

section h2,
section h3 {
    text-wrap: balance;
}


/* Italic editorial words */

section h2 span,
section h3 span {
    transition:
        letter-spacing 1000ms cubic-bezier(.22, 1, .36, 1);
}

section .revealed h2 span,
section .revealed h3 span {
    letter-spacing: -0.02em;
}

/* KEERTHI SHIKARA — MAP VISIBILITY FIX */
.contact-map {
    position: relative;
    overflow: hidden;
    min-height: 420px;
    background: #dfe5df;
}
.keerti-location-map {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 420px;
    z-index: 1;
    background: #dfe5df;
}
.keerti-location-map .leaflet-pane,
.keerti-location-map .leaflet-control-container {
    z-index: 400;
}
.keerti-location-map .leaflet-tile-pane {
    z-index: 200;
}
.map-location-card {
    z-index: 1000 !important;
}
@media (max-width: 768px) {
    .contact-map,
    .keerti-location-map {
        min-height: 300px;
    }
}