/*
 * Customer portal depth layer (ADR-049).
 *
 * Canva-style "living page" treatment for the customer landing shell only:
 * ambient gradient orbs, layered elevation, hover lift and glass surfaces.
 * Scoped to .tka-customer-landing-page; internal panels are untouched.
 * Loaded AFTER customer-portal/home/wizard CSS so it can deepen their look
 * without rewriting them.
 */

/* ---------------------------------------------------------------------------
 * Elevation tokens
 * ------------------------------------------------------------------------- */

.tka-customer-landing-page {
    --tka-depth-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05);
    --tka-depth-shadow-sm:
        0 1px 2px rgba(15, 23, 42, 0.04),
        0 6px 18px -4px rgba(15, 23, 42, 0.08);
    --tka-depth-shadow-md:
        0 2px 4px rgba(15, 23, 42, 0.05),
        0 14px 34px -8px rgba(15, 23, 42, 0.14);
    --tka-depth-shadow-lg:
        0 4px 8px rgba(15, 23, 42, 0.06),
        0 26px 60px -16px rgba(15, 23, 42, 0.22);
    --tka-depth-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.65);
    --tka-depth-ring: 0 0 0 1px rgba(15, 23, 42, 0.04);
}

[data-bs-theme="dark"] .tka-customer-landing-page {
    --tka-depth-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
    --tka-depth-shadow-sm:
        0 1px 2px rgba(0, 0, 0, 0.35),
        0 6px 18px -4px rgba(0, 0, 0, 0.5);
    --tka-depth-shadow-md:
        0 2px 4px rgba(0, 0, 0, 0.4),
        0 14px 34px -8px rgba(0, 0, 0, 0.6);
    --tka-depth-shadow-lg:
        0 4px 8px rgba(0, 0, 0, 0.45),
        0 26px 60px -16px rgba(0, 0, 0, 0.7);
    --tka-depth-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    --tka-depth-ring: 0 0 0 1px rgba(255, 255, 255, 0.05);
}

/* ---------------------------------------------------------------------------
 * Ambient canvas — slow-drifting crimson/neutral orbs behind the content.
 * ------------------------------------------------------------------------- */

.tka-customer-landing-page {
    position: relative;
}

.tka-customer-landing-page::before,
.tka-customer-landing-page::after {
    content: "";
    position: fixed;
    z-index: 0;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(80px);
    opacity: 0.55;
    will-change: transform;
}

.tka-customer-landing-page::before {
    width: 42rem;
    height: 42rem;
    top: -14rem;
    right: -12rem;
    background: radial-gradient(circle at 30% 30%,
        rgba(var(--bs-primary-rgb), 0.18),
        rgba(var(--bs-primary-rgb), 0.05) 55%,
        transparent 75%);
    animation: tka-orb-drift-a 26s ease-in-out infinite alternate;
}

.tka-customer-landing-page::after {
    width: 36rem;
    height: 36rem;
    bottom: -16rem;
    left: -10rem;
    background: radial-gradient(circle at 60% 40%,
        rgba(var(--bs-primary-rgb), 0.10),
        rgba(120, 130, 150, 0.08) 50%,
        transparent 75%);
    animation: tka-orb-drift-b 32s ease-in-out infinite alternate;
}

[data-bs-theme="dark"] .tka-customer-landing-page::before {
    opacity: 0.35;
}

[data-bs-theme="dark"] .tka-customer-landing-page::after {
    opacity: 0.25;
}

.tka-customer-landing-page:has(.tka-customer-landing--home) {
    background: #0a0203;
}

.tka-customer-landing-page:has(.tka-customer-landing--home)::before,
.tka-customer-landing-page:has(.tka-customer-landing--home)::after {
    opacity: 0;
}

@keyframes tka-orb-drift-a {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to { transform: translate3d(-4rem, 3rem, 0) scale(1.08); }
}

@keyframes tka-orb-drift-b {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to { transform: translate3d(3rem, -2.5rem, 0) scale(1.05); }
}

/* Content sits above the ambient layer. */
.tka-customer-landing-main,
.tka-customer-landing-header,
.tka-customer-landing-footer {
    position: relative;
    z-index: 1;
}

/* ---------------------------------------------------------------------------
 * Layered elevation + hover lift on the main surfaces.
 * ------------------------------------------------------------------------- */

.tka-customer-landing-page .tka-customer-landing-showcase__panel-inner {
    box-shadow: var(--tka-depth-shadow-sm), var(--tka-depth-highlight), var(--tka-depth-ring);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.tka-customer-landing-page .tka-customer-landing-showcase__panel-inner:hover {
    transform: translateY(-3px);
    box-shadow: var(--tka-depth-shadow-md), var(--tka-depth-highlight), var(--tka-depth-ring);
}

.tka-customer-landing-page .card,
.tka-customer-landing-page .tka-customer-hero__surface,
.tka-customer-landing-page .tka-customer-landing-hero {
    box-shadow: var(--tka-depth-shadow-sm), var(--tka-depth-highlight), var(--tka-depth-ring);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.tka-customer-landing-page .card:hover,
.tka-customer-landing-page .tka-customer-hero__surface:hover {
    transform: translateY(-3px);
    box-shadow: var(--tka-depth-shadow-md), var(--tka-depth-highlight), var(--tka-depth-ring);
}

.tka-customer-landing-page .tka-customer-landing-hero {
    box-shadow: var(--tka-depth-shadow-md), var(--tka-depth-highlight), var(--tka-depth-ring);
}

.tka-customer-landing-page .tka-customer-summary__panel,
.tka-customer-landing-page .tka-customer-hero__status-icon {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.tka-customer-landing-page .tka-customer-summary__panel:hover {
    transform: translateY(-2px);
    box-shadow: var(--tka-depth-shadow-sm);
}

/* Glass header gets a soft drop instead of a flat border line. */
.tka-customer-landing-header {
    box-shadow: 0 1px 0 rgba(var(--bs-gray-300-rgb, 224, 228, 235), 0.4),
        0 10px 30px -18px rgba(15, 23, 42, 0.25);
}

[data-bs-theme="dark"] .tka-customer-landing-header {
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05),
        0 10px 30px -18px rgba(0, 0, 0, 0.8);
}

/* ---------------------------------------------------------------------------
 * Interactive feedback — press, glow, progress shimmer.
 * ------------------------------------------------------------------------- */

.tka-customer-landing-page .btn {
    transition: transform 0.15s ease, box-shadow 0.15s ease,
        background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.tka-customer-landing-page .btn:active {
    transform: translateY(1px) scale(0.99);
}

.tka-customer-landing-page .btn-primary,
.tka-customer-landing-page .tka-btn-brand {
    box-shadow: 0 6px 16px -6px rgba(var(--bs-primary-rgb), 0.55);
}

.tka-customer-landing-page .btn-primary:hover,
.tka-customer-landing-page .tka-btn-brand:hover {
    transform: translateY(-1px);
}

.tka-customer-landing-page .tka-customer-progress-track__fill {
    position: relative;
    overflow: hidden;
}

.tka-customer-landing-page .tka-customer-progress-track__fill::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg,
        transparent 38%,
        rgba(255, 255, 255, 0.45) 50%,
        transparent 62%);
    transform: translateX(-100%);
    animation: tka-progress-sheen 2.8s ease-in-out infinite;
}

@keyframes tka-progress-sheen {
    0% { transform: translateX(-100%); }
    55%, 100% { transform: translateX(100%); }
}

/* ---------------------------------------------------------------------------
 * Accessibility: respect reduced-motion preferences.
 * ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .tka-customer-landing-page::before,
    .tka-customer-landing-page::after,
    .tka-customer-landing-page .tka-customer-progress-track__fill::after {
        animation: none;
    }

    .tka-customer-landing-page .card,
    .tka-customer-landing-page .tka-customer-hero__surface,
    .tka-customer-landing-page .tka-customer-landing-hero,
    .tka-customer-landing-page .btn {
        transition: none;
    }

    .tka-customer-landing-page .card:hover,
    .tka-customer-landing-page .tka-customer-hero__surface:hover {
        transform: none;
    }
}