/*
 * Modern 3D UI layer — loaded after style.css on public pages.
 *
 * Static depth (layered shadows, pressable buttons, extruded headings) always applies.
 * Motion is opt-in via classes set by assets/js/ui-3d.js:
 *   html.ui-3d-motion — 3D scroll reveals, hero scroll recede, press feedback
 *   html.ui-3d-tilt   — pointer tilt + glare (fine pointer / hover devices only)
 * Both are skipped for prefers-reduced-motion and lite network tiers.
 *
 * Cards already tilted by the card-motion island (.ne-tilt-card / .ne-tilt-shop)
 * only get glare + pop-out layers here; this file never fights their transform.
 */

:root {
    --u3d-persp: 1100px;
    --u3d-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --u3d-ink: 15, 47, 34;
    --u3d-shadow-rest:
        inset 0 1px 0 rgba(255, 255, 255, 0.65),
        0 1px 2px rgba(var(--u3d-ink), 0.06),
        0 8px 16px -6px rgba(var(--u3d-ink), 0.12),
        0 22px 40px -20px rgba(var(--u3d-ink), 0.3);
    --u3d-shadow-lift:
        inset 0 1px 0 rgba(255, 255, 255, 0.75),
        0 2px 4px rgba(var(--u3d-ink), 0.06),
        0 18px 30px -10px rgba(var(--u3d-ink), 0.2),
        0 44px 70px -28px rgba(var(--u3d-ink), 0.42);
    --u3d-glare: rgba(255, 255, 255, 0.42);
    --u3d-edge: color-mix(in srgb, var(--primary-dark, #0f2f22) 78%, #000);
    --u3d-heading-depth: color-mix(in srgb, var(--primary, #154b34) 22%, transparent);
}

html.appearance-night {
    --u3d-ink: 0, 0, 0;
    --u3d-shadow-rest:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 1px 2px rgba(0, 0, 0, 0.3),
        0 10px 20px -8px rgba(0, 0, 0, 0.45),
        0 26px 44px -20px rgba(0, 0, 0, 0.6);
    --u3d-shadow-lift:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 2px 4px rgba(0, 0, 0, 0.35),
        0 22px 34px -10px rgba(0, 0, 0, 0.55),
        0 48px 80px -28px rgba(0, 0, 0, 0.75);
    --u3d-glare: rgba(255, 255, 255, 0.16);
    --u3d-heading-depth: rgba(0, 0, 0, 0.45);
}

/* ---------- Depth: layered card shadows ---------- */

.service-card,
.h-card-service,
.h-card-blog,
.h-card-review,
.h-card-why,
.h-card-local-seo,
.category-card,
.review-card,
.profile-card,
.site-number-item,
.homepage-shop-card {
    --card-shadow: var(--u3d-shadow-rest);
    --card-shadow-hover: var(--u3d-shadow-lift);
}

.gallery-item {
    box-shadow: var(--u3d-shadow-rest);
    transition: box-shadow 0.3s ease;
}
.gallery-item:hover {
    box-shadow: var(--u3d-shadow-lift);
}

/* Glossy icon tiles that read as raised objects */
.h-card-why-icon {
    background:
        linear-gradient(145deg,
            color-mix(in srgb, var(--primary, #154b34) 6%, #fff) 0%,
            color-mix(in srgb, var(--primary, #154b34) 20%, #fff) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        inset 0 -2px 0 color-mix(in srgb, var(--primary, #154b34) 18%, transparent),
        0 6px 14px -6px color-mix(in srgb, var(--primary, #154b34) 55%, transparent);
}
html.appearance-night .h-card-why-icon {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        0 6px 14px -6px rgba(0, 0, 0, 0.7);
}

/* Subtle extrusion on section headings */
.section-head h2 {
    text-shadow:
        0 1px 0 var(--u3d-heading-depth),
        0 2px 0 color-mix(in srgb, var(--u3d-heading-depth) 60%, transparent),
        0 10px 22px rgba(var(--u3d-ink), 0.12);
}

/* ---------- Pressable 3D buttons ---------- */

/* site-donezo.css sets the hero CTA shadow with !important, so match it here */
html .hero-cta-primary,
html .service-book-btn {
    --u3d-btn-edge: 4px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.28),
        0 var(--u3d-btn-edge) 0 var(--u3d-edge),
        0 calc(var(--u3d-btn-edge) + 10px) 22px -8px rgba(var(--u3d-ink), 0.45) !important;
    transition:
        transform 0.18s var(--u3d-ease),
        box-shadow 0.18s var(--u3d-ease),
        background 0.2s ease,
        color 0.2s ease;
}
html .hero-cta-primary:hover,
html .service-book-btn:hover {
    --u3d-btn-edge: 6px;
    transform: translateY(-2px);
}
html .hero-cta-primary:active,
html .service-book-btn:active {
    --u3d-btn-edge: 1px;
    transform: translateY(3px);
    transition-duration: 0.06s;
}
.hero-cta-ghost {
    backdrop-filter: blur(6px) saturate(1.2);
    -webkit-backdrop-filter: blur(6px) saturate(1.2);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 10px 24px -14px rgba(0, 0, 0, 0.5);
}

/* ---------- Glare + pop-out layers (JS adds .u3d-glare) ---------- */

.u3d-glare {
    position: absolute;
    inset: 0;
    z-index: 5;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(
        circle at var(--u3d-gx, 50%) var(--u3d-gy, 0%),
        var(--u3d-glare) 0%,
        transparent 58%
    );
    mix-blend-mode: soft-light;
    transition: opacity 0.35s ease;
}
html.appearance-night .u3d-glare {
    mix-blend-mode: screen;
}
.is-u3d-active > .u3d-glare {
    opacity: 1;
}

html.ui-3d-tilt .ne-motion-card-shell,
html.ui-3d-tilt .ne-motion-card-shell > .h-card-service,
html.ui-3d-tilt .ne-motion-card-shell > .service-card,
html.ui-3d-tilt .ne-motion-card-shell > .h-card-review,
html.ui-3d-tilt .ne-motion-card-shell > .h-card-blog,
html.ui-3d-tilt .ne-tilt-card .service-body {
    transform-style: preserve-3d;
}
html.ui-3d-tilt .ne-tilt-card .service-thumb,
html.ui-3d-tilt .ne-tilt-card .review-media,
html.ui-3d-tilt .ne-tilt-card .h-card-blog-ph {
    transition: transform 0.45s var(--u3d-ease);
}
html.ui-3d-tilt .ne-tilt-card .service-price,
html.ui-3d-tilt .ne-tilt-card .service-book-btn {
    transition: transform 0.45s var(--u3d-ease), box-shadow 0.18s var(--u3d-ease);
}
html.ui-3d-tilt .ne-tilt-card:hover .service-thumb,
html.ui-3d-tilt .ne-tilt-card:hover .review-media,
html.ui-3d-tilt .ne-tilt-card:hover .h-card-blog-ph {
    transform: translateZ(14px);
}
html.ui-3d-tilt .ne-tilt-card:hover .service-price {
    transform: translateZ(22px);
}
html.ui-3d-tilt .ne-tilt-card:hover .service-book-btn {
    transform: translateZ(30px);
}

/* ---------- Pointer tilt for cards the island does not own ---------- */

html.ui-3d-tilt [data-u3d-tilt] {
    transform:
        perspective(var(--u3d-persp))
        rotateX(var(--u3d-rx, 0deg))
        rotateY(var(--u3d-ry, 0deg))
        translateZ(var(--u3d-z, 0px));
    transform-style: preserve-3d;
    transition:
        transform 0.6s var(--u3d-ease),
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}
html.ui-3d-tilt [data-u3d-tilt].is-u3d-active {
    --u3d-z: 10px;
    will-change: transform;
    transition:
        transform 0.12s linear,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
    box-shadow: var(--u3d-shadow-lift);
}
html.ui-3d-tilt [data-u3d-tilt] .h-card-why-icon,
html.ui-3d-tilt [data-u3d-tilt] .site-number-value,
html.ui-3d-tilt [data-u3d-tilt] .h-card-why-title,
html.ui-3d-tilt [data-u3d-tilt] .overlay {
    transition: transform 0.5s var(--u3d-ease);
}
html.ui-3d-tilt [data-u3d-tilt].is-u3d-active .h-card-why-icon {
    transform: translateZ(34px) scale(1.06);
}
html.ui-3d-tilt [data-u3d-tilt].is-u3d-active .site-number-value {
    transform: translateZ(28px);
}
html.ui-3d-tilt [data-u3d-tilt].is-u3d-active .h-card-why-title,
html.ui-3d-tilt [data-u3d-tilt].is-u3d-active .overlay {
    transform: translateZ(16px);
}

/* ---------- Hero: pointer parallax + scroll recede ---------- */

html.ui-3d-motion .hero-section {
    perspective: 1400px;
}
/* Individual translate/rotate props: the hero columns run entry animations on `transform`. */
html.ui-3d-motion .hero-col--copy {
    translate: calc(var(--u3d-hx, 0) * -12px) calc(var(--u3d-hy, 0) * -9px) 0;
    transition: translate 0.9s var(--u3d-ease);
}
html.ui-3d-motion .hero-visual:not(.hero-visual--empty) {
    translate: calc(var(--u3d-hx, 0) * 16px) calc(var(--u3d-hy, 0) * 12px) 0;
    rotate: y calc(var(--u3d-hx, 0) * 7deg);
    transition: translate 0.9s var(--u3d-ease), rotate 0.9s var(--u3d-ease);
}
html.ui-3d-motion .hero-overlay-spot {
    translate: calc(var(--u3d-hx, 0) * 30px) calc(var(--u3d-hy, 0) * 24px);
    transition: translate 1.1s var(--u3d-ease);
}

@supports (animation-timeline: view()) {
    html.ui-3d-motion .hero-layout {
        animation: u3d-hero-recede linear both;
        animation-timeline: view();
        animation-range: exit 0% exit 100%;
        transform-origin: 50% 0%;
    }
}
@keyframes u3d-hero-recede {
    to {
        transform: perspective(1400px) translate3d(0, 8%, -180px) rotateX(10deg);
        opacity: 0.25;
    }
}

/* ---------- 3D scroll reveals (reuses .scroll-animate from animations.js) ---------- */

html.ui-3d-motion .scroll-animate {
    transform-origin: 50% 100%;
    transition:
        opacity 0.7s var(--u3d-ease),
        transform 0.9s var(--u3d-ease);
}
html.ui-3d-motion .scroll-animate:not(.visible):not(.in-view) {
    transform: perspective(1200px) translate3d(0, 30px, -70px) rotateX(12deg);
}
html.ui-3d-motion .scroll-animate-stagger > * {
    transition:
        opacity 0.6s var(--u3d-ease),
        transform 0.8s var(--u3d-ease);
}
html.ui-3d-motion .scroll-animate-stagger:not(.visible) > * {
    transform: perspective(1000px) translate3d(0, 22px, -50px) rotateX(10deg);
}

/* ---------- Touch: press-in feedback instead of tilt ---------- */

@media (hover: none) {
    html.ui-3d-motion .h-card-why:active,
    html.ui-3d-motion .site-number-item:active,
    html.ui-3d-motion .gallery-item:active,
    html.ui-3d-motion .ne-motion-card-shell > .h-card-service:active,
    html.ui-3d-motion .ne-motion-card-shell > .h-card-review:active,
    html.ui-3d-motion .ne-motion-card-shell > .h-card-blog:active {
        transform: perspective(800px) translateZ(-18px) rotateX(2deg);
        transition: transform 0.12s ease;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-cta-primary,
    .service-book-btn,
    .u3d-glare,
    [data-u3d-tilt] {
        transition: none !important;
    }
    .hero-cta-primary:hover,
    .service-book-btn:hover,
    .hero-cta-primary:active,
    .service-book-btn:active {
        transform: none;
    }
}