/**
 * Unified 3D-minimal icon language — brand teal + green gradients.
 */

:root {
    --ui-icon-size: 2.65rem;
    --ui-icon-size-sm: 2.35rem;
    --ui-icon-radius: 14px;
    --ui-icon-stroke: 1.65;
    --ui-icon-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --ui-icon-dur: 0.32s;
}

/* —— Base plate —— */
.ui-icon-3d {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: var(--ui-icon-size);
    height: var(--ui-icon-size);
    border-radius: var(--ui-icon-radius);
    color: var(--ui-icon-fg, var(--text-brand-dark));
    background: var(--ui-icon-bg);
    border: 1px solid var(--ui-icon-border, rgba(255, 255, 255, 0.55));
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.75),
        inset 0 -1px 1px rgba(var(--rgb-teal-deep), 0.06),
        0 6px 18px rgba(var(--rgb-teal-deep), 0.1),
        0 2px 6px rgba(var(--rgb-teal-deep), 0.06);
    transition:
        transform var(--ui-icon-dur) var(--ui-icon-ease),
        box-shadow var(--ui-icon-dur) ease,
        filter var(--ui-icon-dur) ease;
}

.ui-icon-3d svg {
    width: 1.35rem;
    height: 1.35rem;
    overflow: visible;
    stroke-width: var(--ui-icon-stroke);
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.45));
}

.ui-icon-3d svg[stroke-width] {
    stroke-width: var(--ui-icon-stroke);
}

/* Soft “back plate” illusion */
.ui-icon-3d::after {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.35) 0%, transparent 55%);
    pointer-events: none;
    opacity: 0.55;
    z-index: 0;
}

.ui-icon-3d > svg {
    position: relative;
    z-index: 1;
}

/* —— Color variants (brand) —— */
/* Primary: deep → bright teal */
.ui-icon-3d--blue {
    --ui-icon-fg: #0a3d44;
    --ui-icon-bg: linear-gradient(148deg, #dff4f7 0%, #c5eaf0 45%, #a8dde8 100%);
    --ui-icon-border: rgba(var(--rgb-teal-deep), 0.32);
    --ui-icon-glow: rgba(var(--rgb-teal-bright), 0.32);
}

/* Bright teal plate */
.ui-icon-3d--teal {
    --ui-icon-fg: #064854;
    --ui-icon-bg: linear-gradient(148deg, #e8fafc 0%, #c8f0f6 50%, #a8e4ee 100%);
    --ui-icon-border: rgba(var(--rgb-teal-bright), 0.35);
    --ui-icon-glow: rgba(var(--rgb-teal-bright), 0.28);
}

/* Accent: green (replaces gold) */
.ui-icon-3d--gold {
    --ui-icon-fg: #1e4d22;
    --ui-icon-bg: linear-gradient(148deg, #e8f8ea 0%, #cef2d4 48%, #b0e9ba 100%);
    --ui-icon-border: rgba(var(--rgb-green), 0.38);
    --ui-icon-glow: rgba(var(--rgb-green), 0.3);
}

/* Teal + green blend */
.ui-icon-3d--purple {
    --ui-icon-fg: #0d4a52;
    --ui-icon-bg: linear-gradient(148deg, #e4f7f9 0%, #c5ebe0 45%, #b8e8c8 100%);
    --ui-icon-border: rgba(var(--rgb-teal-bright), 0.28);
    --ui-icon-glow: rgba(var(--rgb-green), 0.22);
}

/* —— Hover / focus (parent-driven) —— */
.faq-item__summary:hover .ui-icon-3d,
.faq-item__summary:focus-visible .ui-icon-3d,
.deliver-step:hover .ui-icon-3d,
.industry-card:hover .ui-icon-3d,
.tech-card:hover .ui-icon-3d,
.why-card-wrap:hover .why-card--3d .ui-icon-3d,
.why-card:hover .ui-icon-3d {
    transform: scale(1.05) rotate(2deg);
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.85),
        inset 0 -1px 1px rgba(var(--rgb-teal-deep), 0.05),
        0 12px 28px rgba(var(--rgb-teal-deep), 0.12),
        0 0 24px var(--ui-icon-glow, rgba(var(--rgb-teal-bright), 0.22));
}

/* —— Idle motion (subtle) —— */
@media (prefers-reduced-motion: no-preference) {
    .ui-icon-3d--float {
        animation: ui-icon-breathe 5.5s ease-in-out infinite;
        animation-delay: calc(var(--ui-float-delay, 0) * 0.45s);
    }
}

@keyframes ui-icon-breathe {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-2px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .ui-icon-3d--float {
        animation: none;
    }

    .deliver-step.is-active .deliver-step__icon.ui-icon-3d {
        animation: none;
    }

    .faq-item__summary:hover .ui-icon-3d,
    .deliver-step:hover .ui-icon-3d,
    .industry-card:hover .ui-icon-3d,
    .tech-card:hover .ui-icon-3d,
    .why-card-wrap:hover .why-card--3d .ui-icon-3d {
        transform: none;
    }
}

/* —— FAQ (summary row) —— */
.faq-item__icon.ui-icon-3d {
    width: var(--ui-icon-size-sm);
    height: var(--ui-icon-size-sm);
    border-radius: 12px;
}

.faq-item__icon.ui-icon-3d svg {
    width: 1.15rem;
    height: 1.15rem;
}

/* —— Deliver timeline —— */
.deliver-step__icon.ui-icon-3d {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 12px;
}

.deliver-step__icon.ui-icon-3d svg {
    width: 1.2rem;
    height: 1.2rem;
}

.deliver-step.is-active .deliver-step__icon.ui-icon-3d {
    animation: deliver-icon-nudge 2s ease-in-out infinite;
}

@keyframes deliver-icon-nudge {
    0%,
    100% {
        transform: scale(1) rotate(0deg);
    }
    40% {
        transform: scale(1.05) rotate(-2deg);
    }
    60% {
        transform: scale(1.05) rotate(2deg);
    }
}

/* —— Industries —— */
.industry-card__icon-wrap.ui-icon-3d {
    width: 2.85rem;
    height: 2.85rem;
    margin-bottom: 0.85rem;
}

.industry-card__icon-wrap.ui-icon-3d svg {
    width: 1.35rem;
    height: 1.35rem;
}

/* —— Technology cards —— */
.tech-card__icon.ui-icon-3d {
    width: 3.1rem;
    height: 3.1rem;
    margin-bottom: 0.85rem;
}

.tech-card__icon.ui-icon-3d svg {
    width: 1.45rem;
    height: 1.45rem;
}

.tech-card--featured .tech-card__icon.ui-icon-3d {
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.85),
        0 8px 22px rgba(var(--rgb-green), 0.22),
        0 0 0 1px rgba(var(--rgb-green), 0.25);
}

/* —— Why (homepage 3D cards) —— */
.why-card--3d .why-card__icon--brand.ui-icon-3d {
    width: 3.35rem;
    height: 3.35rem;
    margin: 0 auto 1rem;
    border-radius: 15px;
}

.why-card--3d .why-card__icon--brand.ui-icon-3d svg {
    width: 1.4rem;
    height: 1.4rem;
}

/* —— Management consulting: plain why cards —— */
.why-card:not(.why-card--3d) .why-card__icon.ui-icon-3d {
    width: 3rem;
    height: 3rem;
    margin: 0 auto 1rem;
}

.why-card:not(.why-card--3d) .why-card__icon.ui-icon-3d svg {
    width: 1.3rem;
    height: 1.3rem;
}