html {
    scroll-behavior: smooth;
}

body {
    overflow-x: hidden;
}

.hero-section {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 360px;
    background-color: #1c1917;
    background-image: var(--hero-image);
    background-size: cover;
    background-position: center var(--hero-offset, 50%);
}

.hero-section::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background: inherit;
    background-size: cover;
    background-position: center var(--hero-offset, 50%);
    transform: scale(1.06);
    transition: background-position 120ms linear;
}

.hero-section::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(90deg, rgba(28, 25, 23, 0.78), rgba(96, 5, 6, 0.54)),
        linear-gradient(180deg, rgba(28, 25, 23, 0.42), rgba(28, 25, 23, 0.72));
}

.home-hero {
    min-height: 560px;
    --hero-image: url("/gallery/unnamed%20(10).jpeg");
}

.page-hero {
    min-height: 330px;
}

.hero-about {
    --hero-image: url("/gallery/unnamed%20(11).jpeg");
}

.hero-services,
.hero-new-roof {
    --hero-image: url("/gallery/unnamed%20(15).jpeg");
}

.hero-shingles {
    --hero-image: url("/gallery/unnamed%20(15).jpeg");
}

.hero-torch-down {
    --hero-image: url("/gallery/unnamed%20(12).jpeg");
}

.hero-tile {
    --hero-image: url("/gallery/unnamed%20(14).jpeg");
}

.hero-fascia {
    --hero-image: url("/gallery/unnamed%20(17).jpeg");
}

.hero-gallery {
    --hero-image: url("/gallery/unnamed%20(10).jpeg");
}

.hero-contact {
    --hero-image: url("/gallery/unnamed%20(9).jpeg");
}

.hero-silicon {
    --hero-image: url("/gallery/unnamed%20(16).jpeg");
}

.hero-repair {
    --hero-image: url("/gallery/unnamed%20(17).jpeg");
}

.hero-insurance {
    --hero-image: url("/gallery/unnamed%20(18).jpeg");
}

.reveal {
    opacity: 0;
    transform: translate3d(0, 30px, 0);
    transition:
        opacity 760ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 760ms cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--reveal-delay, 0ms);
    will-change: opacity, transform;
}

.reveal-left {
    transform: translate3d(-34px, 18px, 0);
}

.reveal-right {
    transform: translate3d(34px, 18px, 0);
}

.reveal-scale {
    transform: translate3d(0, 24px, 0) scale(0.97);
}

.reveal.is-visible,
.reveal-left.is-visible,
.reveal-right.is-visible,
.reveal-scale.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
}

.soft-card {
    transition:
        transform 320ms ease,
        box-shadow 320ms ease,
        border-color 320ms ease;
}

.soft-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 45px rgba(28, 25, 23, 0.14);
}

.parallax-float {
    will-change: transform;
    transform: translate3d(0, var(--scroll-shift, 0px), 0);
    transition: transform 120ms linear;
}

.whatsapp-float {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 60;
    width: 62px;
    height: 62px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #ffffff;
    background: #25d366;
    box-shadow: 0 12px 28px rgba(28, 25, 23, 0.28);
    font-size: 34px;
    transition:
        transform 260ms ease,
        background-color 260ms ease,
        box-shadow 260ms ease;
    animation: whatsapp-float-in 620ms cubic-bezier(0.22, 1, 0.36, 1) both,
        whatsapp-pulse 2.8s ease-in-out 1.2s infinite;
}

.whatsapp-float:hover,
.whatsapp-float:focus-visible {
    color: #ffffff;
    background: #1fbd5b;
    transform: translateY(-5px) scale(1.04);
    box-shadow: 0 18px 34px rgba(37, 211, 102, 0.34);
}

.whatsapp-float:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: 3px;
}

.whatsapp-float::before {
    content: "";
    position: absolute;
    inset: -7px;
    z-index: -1;
    border: 2px solid rgba(37, 211, 102, 0.42);
    border-radius: 50%;
    animation: whatsapp-ring 2.8s ease-out 1.2s infinite;
}

@keyframes whatsapp-float-in {
    from {
        opacity: 0;
        transform: translate3d(0, 24px, 0) scale(0.82);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
}

@keyframes whatsapp-pulse {
    0%,
    72%,
    100% {
        transform: scale(1);
    }
    82% {
        transform: scale(1.08);
    }
}

@keyframes whatsapp-ring {
    0%,
    68% {
        opacity: 0;
        transform: scale(0.9);
    }
    74% {
        opacity: 0.7;
    }
    100% {
        opacity: 0;
        transform: scale(1.28);
    }
}

@media (max-width: 640px) {
    .home-hero {
        min-height: 520px;
    }

    .page-hero {
        min-height: 300px;
    }

    .whatsapp-float {
        right: 16px;
        bottom: 16px;
        width: 56px;
        height: 56px;
        font-size: 31px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .hero-section,
    .hero-section::before,
    .reveal,
    .reveal-left,
    .reveal-right,
    .reveal-scale,
    .soft-card,
    .parallax-float,
    .whatsapp-float,
    .whatsapp-float::before {
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }

    .reveal,
    .reveal-left,
    .reveal-right,
    .reveal-scale {
        opacity: 1 !important;
    }
}