/* Photo Stack */

.photo-stack {
    position: relative;
    height: 240px;
    margin-top: 25px;

    opacity: 0;
    transform: translateY(50px);

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

.photo-stack.visible {
    opacity: 1;
    transform: translateY(0);
}

.photo-stack img {
    position: absolute;

    width: 140px;
    height: 180px;

    object-fit: cover;

    background: white;
    padding: 8px 8px 25px 8px;

    border-radius: 8px;

    box-shadow:
        0 10px 25px rgba(0,0,0,.15);

    transition:
        transform .35s ease,
        box-shadow .35s ease;

    cursor: pointer;
}

/* Left photo */
.photo-stack img:nth-child(1) {
    left: 0;
    top: 20px;
    transform: rotate(-10deg);
}

/* Middle photo */
.photo-stack img:nth-child(2) {
    left: 70px;
    top: 0;
    transform: rotate(5deg);
}

/* Right photo */
.photo-stack img:nth-child(3) {
    left: 140px;
    top: 25px;
    transform: rotate(12deg);
}

/* Hover effect */
.photo-stack img:hover {
    transform: scale(1.08) rotate(0deg);
    z-index: 100;

    box-shadow:
        0 20px 40px rgba(0,0,0,.25);
}
.photo-stack {
    width: 100%;
    overflow: hidden;
}
/* =====================
   Energy Matching Photos
   ===================== */

.energy-stack {
    position: relative;
    height: 150px;
    margin-top: 20px;
}

/* Base state (HIDDEN until scroll) */
.energy-stack img {
    position: absolute;

    width: 110px;
    height: 130px;

    object-fit: cover;

    background: white;
    padding: 6px 6px 20px 6px;

    border-radius: 6px;

    box-shadow: 0 8px 18px rgba(0,0,0,.15);

    opacity: 0;

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

    transition:
        opacity .8s ease,
        transform .8s ease;
}

/* Positions */

.energy-stack img:first-child {
    left: 10px;
    top: 15px;
    transform: translateY(40px) rotate(-8deg) scale(0.95);
}

.energy-stack img:last-child {
    left: 70px;
    top: 0;
    transform: translateY(40px) rotate(8deg) scale(0.95);
}

/* Reveal state */
.energy-stack.visible img {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Keep their rotation AFTER reveal */
.energy-stack.visible img:first-child {
    transform: translateY(0) rotate(-8deg) scale(1);
}

.energy-stack.visible img:last-child {
    transform: translateY(1) rotate(8deg) scale(2);
}

/* Hover pop */
.energy-stack img:hover {
    z-index: 10;
    transform: scale(1.08) rotate(0deg);
}
/* Relaxed dog */

.energy-stack img:first-child {
    left: 10px;
    top: 15px;
    transform: rotate(-8deg);
}

/* Rocket dog */

.energy-stack img:last-child {
    left: 70px;
    top: 0;
    transform: rotate(0deg);
}

.energy-stack img:hover {
    z-index: 10;

    transform:
        scale(1.08)
        rotate(0deg);

    box-shadow:
        0 18px 35px rgba(0,0,0,.25);
}
/* =========================
   Simple Booking Animation
   ========================= */

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

.booking-step {
    opacity: 0;
    transform: translateY(20px);

    transition:
        opacity 0.6s ease,
        transform 0.6s ease;

    font-weight: 600;
    margin: 10px 0;
}

/* When visible */
.booking-content.visible .booking-step {
    opacity: 1;
    transform: translateY(0);
}

/* stagger effect */
.booking-content.visible .booking-step:nth-child(1) {
    transition-delay: 0.1s;
}

.booking-content.visible .booking-step:nth-child(2) {
    transition-delay: 0.25s;
}

.booking-content.visible .booking-step:nth-child(3) {
    transition-delay: 0.4s;
}