/* =========================================================
   TANÉA — THE JOURNEY
   SIGNATURE ANIMATION
   ========================================================= */


/* =========================================================
   01. JOURNEY LINE
   ========================================================= */

.journey-line {
    position: fixed;

    top: 0;
    right: 4vw;

    width: 1px;
    height: 100vh;

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

    z-index: 20;

    pointer-events: none;
}


/* Progress line */

.journey-progress {
    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 0;

    background: var(--accent);

    transform-origin: top;

    transition:
        height 0.15s linear;
}


/* =========================================================
   02. JOURNEY DOT
   ========================================================= */

.journey-line::before {

    content: "";

    position: absolute;

    top: 20%;

    left: 50%;

    width: 7px;
    height: 7px;

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

    border-radius: 50%;

    background: var(--accent);

    box-shadow:
        0 0 0 5px rgba(255, 255, 255, 0.08),
        0 0 20px rgba(255, 255, 255, 0.2);
}


/* =========================================================
   03. JOURNEY DOT — BOTTOM
   ========================================================= */

.journey-line::after {

    content: "";

    position: absolute;

    bottom: 8%;

    left: 50%;

    width: 5px;
    height: 5px;

    transform:
        translateX(-50%);

    border-radius: 50%;

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

}


/* =========================================================
   04. SCROLL REVEAL
   ========================================================= */

.reveal {

    opacity: 0;

    transform:
        translateY(40px);

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

}


.reveal.is-visible {

    opacity: 1;

    transform:
        translateY(0);

}


/* =========================================================
   05. EXPERIENCE CARD DELAY
   ========================================================= */

.experience-card:nth-child(1) {
    transition-delay: 0.05s;
}

.experience-card:nth-child(2) {
    transition-delay: 0.12s;
}

.experience-card:nth-child(3) {
    transition-delay: 0.19s;
}

.experience-card:nth-child(4) {
    transition-delay: 0.26s;
}


/* =========================================================
   06. GALLERY DELAY
   ========================================================= */

.gallery-item:nth-child(1) {
    transition-delay: 0.05s;
}

.gallery-item:nth-child(2) {
    transition-delay: 0.12s;
}

.gallery-item:nth-child(3) {
    transition-delay: 0.19s;
}

.gallery-item:nth-child(4) {
    transition-delay: 0.26s;
}


/* =========================================================
   07. SUBTLE IMAGE MOVEMENT
   ========================================================= */

.discover-image,
.room-showcase,
.map-container {

    overflow: hidden;

}


.discover-image img,
.room-showcase img,
.map-container img {

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

}


.discover-image:hover img,
.room-showcase:hover img,
.map-container:hover img {

    transform:
        scale(1.025);

}


/* =========================================================
   08. BUTTON MICRO INTERACTION
   ========================================================= */

.btn {

    transition:
        transform 0.3s ease,
        background 0.3s ease,
        color 0.3s ease,
        border-color 0.3s ease;

}


.btn:hover {

    transform:
        translateY(-2px);

}


/* =========================================================
   10. REDUCED MOTION
   ========================================================= */

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

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

        scroll-behavior: auto !important;

        transition-duration:
            0.01ms !important;

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

    }

}

/* =========================================================
   TANÉA — JOURNEY WAYPOINTS
   ========================================================= */

.journey-marker {
    position: absolute;

    left: 50%;

    width: 7px;
    height: 7px;

    transform:
        translateX(-50%);

    border-radius: 50%;

    background: var(--bg-dark);

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

    z-index: 3;

    transition:
        width 0.4s ease,
        height 0.4s ease,
        background 0.4s ease,
        box-shadow 0.4s ease;
}


/* Waypoint positions */

.journey-marker {
    position: absolute;

    left: 50%;

    width: 7px;
    height: 7px;

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

    border-radius: 50%;

    background: var(--bg-dark);

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

    z-index: 3;

    transition:
        width 0.4s ease,
        height 0.4s ease,
        background 0.4s ease,
        box-shadow 0.4s ease;
}


/* Active waypoint */

.journey-marker.active {
    width: 11px;
    height: 11px;

    background:
        var(--accent);

    border-color:
        var(--accent);

    box-shadow:
        0 0 0 5px
        rgba(200, 169, 138, 0.12),
        0 0 18px
        rgba(200, 169, 138, 0.25);
}