@tailwind base;
@tailwind components;
@tailwind utilities;

[x-cloak] {
    display: none !important;
}

@layer base {
    html {
        scroll-behavior: smooth;
    }

    body {
        line-height: 1.65;
        background:
            linear-gradient(rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.9)),
            url('/assets/images/hillcrest-floral-background.png');
        background-attachment: fixed;
        background-size: 700px auto;
    }

    h1, h2, h3, h4 {
        letter-spacing: -0.01em;
    }

    :focus-visible {
        outline: 2px solid var(--color-accent);
        outline-offset: 2px;
    }

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

        *, *::before, *::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
        }
    }
}

@layer components {
    .hc-main-menu-panel {
        border: 1px solid rgba(63, 74, 92, 0.12);
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(246, 249, 252, 0.92));
        box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
    }

    .hc-nav-link {
        letter-spacing: 0.01em;
        font-size: 0.88rem;
    }

    .hc-nav-link-hover {
        border: 1px solid transparent;
    }

    .hc-nav-link-hover:hover {
        color: #8a6d31;
        border-color: rgba(185, 145, 71, 0.45);
        background: rgba(185, 145, 71, 0.2);
        box-shadow: 0 4px 10px rgba(185, 145, 71, 0.18);
    }

    .hc-nav-link-active {
        border: 1px solid #b99147;
        background: #b99147;
        box-shadow: 0 4px 12px rgba(185, 145, 71, 0.28);
    }

    .hc-mobile-nav-link {
        @apply block rounded-lg px-3.5 py-2.5 text-[0.95rem] font-semibold text-neutral-700 transition;
        border: 1px solid rgba(63, 74, 92, 0.1);
        background: rgba(255, 255, 255, 0.9);
    }

    .hc-mobile-nav-link:hover {
        color: #8a6d31;
        border-color: rgba(185, 145, 71, 0.5);
        background: rgba(185, 145, 71, 0.18);
        box-shadow: 0 6px 14px rgba(185, 145, 71, 0.16);
    }

    .hc-mobile-nav-link-active {
        color: white;
        border-color: #b99147;
        background: #b99147;
    }

    .section-shell {
        @apply mx-auto max-w-7xl px-4 lg:px-8;
    }

    .section-gap {
        @apply py-12 lg:py-20;
    }

    .section-gap,
    .floral-panel {
        position: relative;
    }

    .section-gap::before,
    .floral-panel::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(115deg, rgba(185, 145, 71, 0.05), transparent 42%, rgba(105, 130, 104, 0.04));
        opacity: 0.35;
        pointer-events: none;
        transition: opacity 500ms ease;
    }

    .section-gap:hover::before,
    .floral-panel:hover::before {
        opacity: 0.5;
    }

    .section-contrast-navy {
        @apply border-y;
        border-color: rgba(63, 74, 92, 0.15);
        background:
            linear-gradient(135deg, rgba(63, 74, 92, 0.12), rgba(255, 255, 255, 0.94)),
            url('/assets/images/hillcrest-floral-background.png');
        background-size: 760px auto;
    }

    .section-contrast-gold {
        background:
            linear-gradient(135deg, rgba(185, 145, 71, 0.12), rgba(255, 255, 255, 0.93)),
            url('/assets/images/hillcrest-floral-background.png');
        background-size: 760px auto;
    }

    .section-contrast-sage {
        background:
            linear-gradient(135deg, rgba(105, 130, 104, 0.1), rgba(255, 255, 255, 0.94)),
            url('/assets/images/hillcrest-floral-background.png');
        background-size: 760px auto;
    }

    .hc-card {
        @apply rounded-2xl border border-neutral-200 bg-white p-6 shadow-sm transition;
        position: relative;
        overflow: hidden;
        transform: translateY(0) scale(1);
        transition:
            transform 220ms ease,
            box-shadow 220ms ease,
            border-color 220ms ease,
            background-color 220ms ease;
    }

    .hc-card::before {
        content: '';
        position: absolute;
        inset: 0;
        background:
            radial-gradient(circle at top right, rgba(185, 145, 71, 0.08), transparent 36%),
            radial-gradient(circle at bottom left, rgba(105, 130, 104, 0.06), transparent 34%);
        pointer-events: none;
    }

    .hc-card > * {
        position: relative;
        z-index: 1;
    }

    .hc-card:hover {
        @apply shadow-xl;
        border-color: rgba(185, 145, 71, 0.38);
        transform: translateY(-3px) scale(1.004);
        box-shadow: 0 14px 28px rgba(47, 55, 68, 0.1);
    }

    .hc-card:hover::before {
        background:
            radial-gradient(circle at top right, rgba(185, 145, 71, 0.18), transparent 38%),
            radial-gradient(circle at bottom left, rgba(105, 130, 104, 0.13), transparent 36%);
    }

    .hc-btn-primary {
        @apply inline-flex min-h-[44px] items-center justify-center rounded-lg bg-[var(--color-accent)] px-5 py-3 text-sm font-semibold text-white transition;
        box-shadow: 0 10px 22px rgba(185, 145, 71, 0.24);
        transition: transform 180ms ease, box-shadow 180ms ease, opacity 180ms ease;
    }

    .hc-btn-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 16px 30px rgba(185, 145, 71, 0.34);
    }

    .hc-btn-secondary {
        @apply inline-flex min-h-[44px] items-center justify-center rounded-lg border border-[var(--color-primary)] bg-white px-5 py-3 text-sm font-semibold text-[var(--color-primary)] transition;
        transition: transform 180ms ease, background-color 180ms ease, color 180ms ease, box-shadow 180ms ease;
    }

    .hc-btn-secondary:hover {
        color: white;
        background-color: var(--color-primary);
        transform: translateY(-2px);
        box-shadow: 0 14px 26px rgba(63, 74, 92, 0.18);
    }

    .ambient-blob {
        position: absolute;
        border-radius: 999px;
        filter: blur(32px);
        opacity: 0.45;
        pointer-events: none;
        animation: float-soft 10s ease-in-out infinite;
    }

    .ambient-blob-one {
        width: 320px;
        height: 320px;
        left: -80px;
        top: -40px;
        background: rgba(185, 145, 71, 0.35);
    }

    .ambient-blob-two {
        width: 280px;
        height: 280px;
        right: -70px;
        bottom: -60px;
        background: rgba(63, 74, 92, 0.2);
        animation-delay: 1.5s;
    }

    .floral-panel {
        position: relative;
        overflow: hidden;
        background:
            linear-gradient(rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.94)),
            url('/assets/images/hillcrest-floral-background.png');
        background-size: 760px auto;
    }

    .floral-soft {
        position: relative;
    }

    .floral-soft::after {
        content: '';
        position: absolute;
        width: 220px;
        height: 220px;
        right: -80px;
        top: -70px;
        border-radius: 999px;
        background:
            radial-gradient(circle, rgba(185, 145, 71, 0.14), transparent 62%),
            radial-gradient(circle at 30% 30%, rgba(105, 130, 104, 0.12), transparent 48%);
        pointer-events: none;
    }

    .section-orb {
        position: absolute;
        border-radius: 999px;
        pointer-events: none;
        filter: blur(34px);
        opacity: 0.35;
        z-index: 0;
    }

    .section-orb-accent {
        background: rgba(185, 145, 71, 0.34);
    }

    .section-orb-primary {
        background: rgba(63, 74, 92, 0.2);
    }

    .leaf-accent {
        position: relative;
        padding-left: 1.25rem;
    }

    .leaf-accent::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0.55rem;
        width: 0.55rem;
        height: 0.55rem;
        border-radius: 999px 0 999px 999px;
        background: var(--color-accent);
        transform: rotate(-35deg);
    }

    .masonry-grid {
        column-count: 1;
        column-gap: 1rem;
    }

    .masonry-item {
        display: inline-block;
        width: 100%;
        margin-bottom: 1rem;
        break-inside: avoid;
        transition: transform 260ms ease, box-shadow 260ms ease, border-color 260ms ease;
    }

    .masonry-item:hover {
        transform: translateY(-8px) rotate(-0.4deg);
        border-color: rgba(185, 145, 71, 0.55);
        box-shadow: 0 22px 45px rgba(47, 55, 68, 0.16);
    }

    .auto-gallery {
        position: relative;
        overflow: hidden;
    }

    .auto-gallery::before,
    .auto-gallery::after {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        z-index: 2;
        width: clamp(3rem, 10vw, 9rem);
        pointer-events: none;
    }

    .auto-gallery::before {
        left: 0;
        background: linear-gradient(90deg, rgba(250, 247, 241, 0.98), transparent);
    }

    .auto-gallery::after {
        right: 0;
        background: linear-gradient(270deg, rgba(250, 247, 241, 0.98), transparent);
    }

    .auto-gallery-track {
        display: inline-flex;
        width: max-content;
        min-width: max-content;
        animation: gallery-scroll 38s linear infinite;
        will-change: transform;
    }

    .auto-gallery-set {
        display: flex;
        flex: 0 0 auto;
        gap: 1.25rem;
        padding-right: 1.25rem;
    }

    .auto-gallery:hover .auto-gallery-track,
    .auto-gallery:focus-within .auto-gallery-track {
        animation-play-state: paused;
    }

    .auto-gallery-card {
        @apply overflow-hidden rounded-[1.75rem] border border-neutral-200 bg-white shadow-sm;
        width: clamp(18rem, 34vw, 32rem);
        aspect-ratio: 4 / 3;
        flex: 0 0 auto;
        box-shadow: 0 18px 36px rgba(47, 55, 68, 0.12);
    }

    .auto-gallery-card img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .team-card {
        @apply overflow-hidden rounded-2xl border border-neutral-200 bg-white/90 transition;
        position: relative;
        transform: translateY(0);
        box-shadow: 0 8px 18px rgba(47, 55, 68, 0.05);
        transition:
            transform 240ms ease,
            box-shadow 240ms ease,
            border-color 240ms ease;
    }

    .team-card:hover {
        border-color: rgba(185, 145, 71, 0.36);
        transform: translateY(-3px);
        box-shadow: 0 14px 24px rgba(47, 55, 68, 0.08);
    }

    .service-hero-panel {
        background:
            linear-gradient(132deg, rgba(255, 255, 255, 0.95), rgba(248, 245, 238, 0.9)),
            url('/assets/images/hillcrest-floral-background.png');
        background-size: 840px auto;
    }

    .service-pillar {
        @apply rounded-2xl border bg-white p-5 shadow-sm transition;
        border-color: rgba(63, 74, 92, 0.12);
    }

    .service-pillar:hover {
        transform: translateY(-3px);
        border-color: rgba(185, 145, 71, 0.42);
        box-shadow: 0 14px 26px rgba(47, 55, 68, 0.11);
    }

    .service-parallax-band {
        background:
            linear-gradient(130deg, rgba(255, 255, 255, 0.86), rgba(249, 247, 242, 0.9)),
            url('/assets/images/hillcrest-floral-background.png');
        background-size: 840px auto;
        background-attachment: fixed;
    }

    .service-grid-card:hover {
        background: linear-gradient(165deg, rgba(255, 255, 255, 0.98), rgba(249, 245, 236, 0.95));
    }

    .service-showcase {
        border-color: rgba(63, 74, 92, 0.14);
        background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(250, 247, 241, 0.94));
    }

    .service-showcase:hover {
        border-color: rgba(185, 145, 71, 0.45);
        box-shadow: 0 18px 35px rgba(47, 55, 68, 0.12);
    }

    .service-text-card {
        @apply rounded-xl border p-4 shadow-sm transition;
        border-color: rgba(63, 74, 92, 0.14);
    }

    .service-text-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 14px 24px rgba(47, 55, 68, 0.12);
    }

    .service-text-card-accent {
        border-color: rgba(185, 145, 71, 0.65);
        background: linear-gradient(155deg, #b99147, #a6823e);
    }

    .service-text-card-light {
        background: linear-gradient(160deg, rgba(255, 255, 255, 0.98), rgba(249, 245, 236, 0.95));
    }

    .micro-float {
        animation: float-soft 8s ease-in-out infinite;
    }

    .scroll-progress {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 60;
        width: var(--scroll-progress, 0%);
        height: 3px;
        background: linear-gradient(90deg, var(--color-accent), var(--color-primary));
        transition: width 120ms linear;
    }

    @media (min-width: 768px) {
        .masonry-grid {
            column-count: 2;
            column-gap: 1.25rem;
        }
    }

    @media (min-width: 1280px) {
        .masonry-grid {
            column-count: 3;
            column-gap: 1.25rem;
        }
    }
}

@keyframes float-soft {
    0%, 100% {
        transform: translateY(0px) translateX(0px);
    }
    50% {
        transform: translateY(-14px) translateX(8px);
    }
}

@keyframes gallery-scroll {
    0% {
        transform: translate3d(0, 0, 0);
    }

    100% {
        transform: translate3d(-50%, 0, 0);
    }
}