/* Homepage 3D enhancement layer. Scoped to avoid affecting inner pages. */
.home-page {
    --c3d-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Hero scene: one restrained camera movement, several physical depth planes. */
.home-page .hero-animation-wrapper {
    perspective: 1200px;
    perspective-origin: 50% 46%;
}

.home-page .hero-illustration {
    transform-style: preserve-3d;
    will-change: transform;
}

.home-page .hero-illustration::after {
    position: absolute;
    z-index: 0;
    right: 12%;
    bottom: 7%;
    left: 12%;
    height: 25%;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(49, 46, 129, 0.24) 0%, rgba(79, 70, 229, 0.08) 42%, transparent 72%);
    content: "";
    filter: blur(18px);
    opacity: 0.7;
    transform: rotateX(72deg) translateZ(-90px);
    pointer-events: none;
}

.home-page .hero-card,
.home-page .hero-orb,
.home-page .hero-particle {
    backface-visibility: hidden;
    transform-style: preserve-3d;
}

.home-page .hero-card--main {
    --c3d-depth: 74px;
    animation-name: c3d-hero-float;
    box-shadow: 0 34px 75px rgba(49, 46, 129, 0.2), 0 8px 20px rgba(15, 23, 42, 0.08);
}

.home-page .hero-card--tasks {
    --c3d-depth: 128px;
    animation-name: c3d-hero-float;
}

.home-page .hero-card--team {
    --c3d-depth: 105px;
    animation-name: c3d-hero-float;
}

.home-page .hero-card--calendar {
    --c3d-depth: 148px;
    animation-name: c3d-hero-float;
}

.home-page .hero-orb--1 { transform: translateZ(-45px); }
.home-page .hero-orb--2 { transform: translateZ(-70px); }
.home-page .hero-orb--3 { transform: translateZ(-25px); }

@keyframes c3d-hero-float {
    0%, 100% {
        transform: translate3d(0, 0, var(--c3d-depth, 0px));
    }
    50% {
        transform: translate3d(0, -12px, var(--c3d-depth, 0px));
    }
}

/* Pointer-reactive cards. JS writes the parent transform; CSS supplies layers. */
.home-page .c3d-tilt {
    --c3d-glare-x: 50%;
    --c3d-glare-y: 50%;
    --c3d-glare-opacity: 0;
    isolation: isolate;
    transform-origin: 50% 50%;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    will-change: transform;
}

.home-page .c3d-tilt::after {
    position: absolute;
    z-index: 20;
    inset: 0;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: inherit;
    background: radial-gradient(circle at var(--c3d-glare-x) var(--c3d-glare-y), rgba(255, 255, 255, 0.36) 0%, rgba(255, 255, 255, 0.12) 18%, transparent 47%);
    content: "";
    mix-blend-mode: soft-light;
    opacity: var(--c3d-glare-opacity);
    transition: opacity 180ms ease;
    pointer-events: none;
}

.home-page .c3d-tilt.card-feature > .icon {
    transform: translateZ(52px);
    transition: transform 300ms var(--c3d-ease), box-shadow 300ms ease;
}

.home-page .c3d-tilt.card-feature > h4 {
    transform: translateZ(36px);
}

.home-page .c3d-tilt.card-feature > p {
    transform: translateZ(22px);
}

.home-page .c3d-tilt.card-feature:hover > .icon {
    transform: translate3d(0, -3px, 56px) scale(1.03);
}

.home-page .c3d-tilt.card-feature:hover > h4 {
    transform: translate3d(0, -3px, 38px);
}

.home-page .c3d-tilt.card-feature:hover > p {
    transform: translate3d(0, -2px, 24px);
}

.home-page .c3d-tilt.pricing-card {
    overflow: hidden;
}

.home-page .c3d-tilt.pricing-card > * {
    position: relative;
    z-index: 3;
    transform: translateZ(26px);
}

.home-page .c3d-tilt.pricing-card > h3,
.home-page .c3d-tilt.pricing-card > .d-flex:first-child {
    transform: translateZ(44px);
}

.home-page .c3d-tilt.pricing-card > .btn {
    transform: translateZ(34px);
    transition: transform 220ms var(--c3d-ease), box-shadow 220ms ease, background-color 220ms ease;
}

.home-page .c3d-tilt.pricing-card > .btn:hover,
.home-page .c3d-tilt.pricing-card > .btn:focus-visible {
    transform: translateZ(38px) scale(1.025);
}

.home-page .c3d-tilt.c3d-active {
    box-shadow: 0 30px 70px rgba(30, 27, 75, 0.2), 0 12px 28px rgba(15, 23, 42, 0.1);
}

/* Touch and compact layouts keep the depth styling but avoid vestibular motion. */
@media (max-width: 991px), (pointer: coarse) {
    .home-page .hero-animation-wrapper {
        perspective: none;
    }

    .home-page .hero-illustration,
    .home-page .c3d-tilt {
        transform: none !important;
        transform-style: flat;
        will-change: auto;
    }

    .home-page .hero-card--main,
    .home-page .hero-card--tasks,
    .home-page .hero-card--team,
    .home-page .hero-card--calendar {
        animation-name: heroFloat;
    }

    .home-page .c3d-tilt.card-feature > .icon,
    .home-page .c3d-tilt.card-feature > h4,
    .home-page .c3d-tilt.card-feature > p,
    .home-page .c3d-tilt.pricing-card > * {
        transform: none;
    }

    .home-page .c3d-tilt::after {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-page .hero-illustration,
    .home-page .c3d-tilt,
    .home-page .c3d-tilt:hover,
    .home-page .c3d-tilt:active {
        transform: none !important;
        transform-style: flat;
        transition: none !important;
        will-change: auto;
    }

    .home-page .hero-card,
    .home-page .hero-orb,
    .home-page .hero-particle {
        animation: none !important;
    }

    .home-page .c3d-tilt.card-feature > .icon,
    .home-page .c3d-tilt.card-feature > h4,
    .home-page .c3d-tilt.card-feature > p,
    .home-page .c3d-tilt.pricing-card > * {
        transform: none !important;
        transition: none !important;
    }

    .home-page .c3d-tilt::after,
    .home-page .hero-illustration::after {
        display: none;
    }
}