/* =============================================================
   ProSeller AG – Component & Animation Styles
   ============================================================= */

/* ── Scrollbar ── */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* ── SVG Helpers ── */
.donut-ring {
    transition: stroke-dashoffset 1s ease-in-out;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
}

.custom-icon-stroke {
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

/* ── Step Connector ── */
.step-connector {
    background: linear-gradient(90deg, #e2e8f0 0%, #e2e8f0 100%);
    background-size: 200% 100%;
    transition: background-position 0.5s ease;
}

/* ── Step: force-hover (JS-gesteuert) ── */
[data-step-item].force-hover .group-hover\:border-primary {
    border-color: #005baa;
}

[data-step-item].force-hover .group-hover\:border-accent-orange {
    border-color: #f7941d;
}

[data-step-item].force-hover .group-hover\:border-accent-pink {
    border-color: #e61e54;
}

[data-step-item].force-hover .group-hover\:border-accent-lime {
    border-color: #b3d334;
}

[data-step-item].force-hover .group-hover\:text-primary {
    color: #005baa;
}

[data-step-item].force-hover .group-hover\:text-accent-orange {
    color: #f7941d;
}

[data-step-item].force-hover .group-hover\:text-accent-pink {
    color: #e61e54;
}

[data-step-item].force-hover .group-hover\:text-accent-lime {
    color: #b3d334;
}

[data-step-item].force-hover .group-hover\:scale-110 {
    transform: scale(1.1);
}

[data-step-item].force-hover .group-hover\:-translate-y-2 {
    transform: translateY(-0.5rem);
}

[data-step-item].force-hover .group-hover\:translate-y-2 {
    transform: translateY(0.5rem);
}

[data-step-item].force-hover .group-hover\:h-12 {
    height: 3rem;
}

[data-step-item].force-hover .group-hover\:shadow-glow {
    box-shadow: 0 0 20px rgba(0, 91, 170, 0.15);
}

/* ── Step: is-hovered (scroll-triggered) ── */
[data-step-item].is-hovered>div>div:first-child {
    transform: scale(1.1) !important;
    border-color: #005baa !important;
    box-shadow: 0 0 20px rgba(0, 91, 170, 0.3) !important;
}

[data-step-item].is-hovered>div>div:first-child span {
    color: #005baa !important;
}

[data-step-item].is-hovered .bg-glass-gradient,
[data-step-item].is-hovered [class*="bg-glass-gradient"] {
    transform: translateY(-8px);
}

/* ── Pillar Panel ── */
[data-pillar-panel] {
    overflow: hidden;
    transition: max-height 420ms ease, opacity 300ms ease, margin-top 300ms ease;
}

[data-pillar-panel].is-collapsed {
    max-height: 0;
    opacity: 0;
    margin-top: 0;
    pointer-events: none;
}

[data-pillar-panel].is-open {
    opacity: 1;
    margin-top: 2.5rem;
}

.grid>[data-pillar-panel] {
    grid-column: 1 / -1;
}

[data-pillar-toggle].is-active {
    color: #005baa;
}

/* Pillar colour tokens */
[data-pillar-panel] {
    --pillar: #005baa;
    --pillar-soft: rgba(0, 91, 170, 0.12);
    --pillar-soft-strong: rgba(0, 91, 170, 0.2);
}

[data-pillar-panel][data-theme="marktplatz"] {
    --pillar: #005baa;
    --pillar-soft: rgba(0, 91, 170, 0.12);
    --pillar-soft-strong: rgba(0, 91, 170, 0.2);
}

[data-pillar-panel][data-theme="marketing"] {
    --pillar: #f7941d;
    --pillar-soft: rgba(247, 148, 29, 0.14);
    --pillar-soft-strong: rgba(247, 148, 29, 0.24);
}

[data-pillar-panel][data-theme="ecommerce"] {
    --pillar: #e61e54;
    --pillar-soft: rgba(230, 30, 84, 0.14);
    --pillar-soft-strong: rgba(230, 30, 84, 0.24);
}

[data-pillar-panel][data-theme="allinone"] {
    --pillar: #6b8e00;
    --pillar-soft: rgba(179, 211, 52, 0.18);
    --pillar-soft-strong: rgba(179, 211, 52, 0.28);
}

[data-pillar-shell] {
    background: #ffffff;
    border-color: color-mix(in srgb, var(--pillar) 20%, #cbd5e1 80%);
}

.dark [data-pillar-shell] {
    background: #0f172a;
    border-color: color-mix(in srgb, var(--pillar) 35%, #334155 65%);
}

[data-pillar-kicker] {
    color: var(--pillar) !important;
}

[data-pillar-cta] {
    background: var(--pillar) !important;
    box-shadow: 0 10px 30px -16px var(--pillar-soft-strong);
}

[data-pillar-cta]:hover {
    filter: brightness(0.95);
}

[data-pillar-fact] {
    background: color-mix(in srgb, var(--pillar-soft) 45%, #ffffff 55%);
    border-color: color-mix(in srgb, var(--pillar) 24%, #cbd5e1 76%) !important;
}

.dark [data-pillar-fact] {
    background: color-mix(in srgb, var(--pillar) 18%, #1e293b 82%);
    border-color: color-mix(in srgb, var(--pillar) 35%, #334155 65%) !important;
}

[data-pillar-block] {
    border-color: color-mix(in srgb, var(--pillar) 20%, #cbd5e1 80%) !important;
    background: #f8fafc;
}

.dark [data-pillar-block] {
    border-color: color-mix(in srgb, var(--pillar) 32%, #334155 68%) !important;
    background: #1e293b;
}

/* ── Tier animation ── */
[data-tier].is-active>div:first-child>div:first-child {
    background: rgba(0, 91, 170, 0.2);
    color: #005baa;
}

[data-tier].is-active>div:first-child>div:last-child {
    background: rgba(0, 91, 170, 0.3);
}

[data-tier].is-active h3 {
    color: #005baa;
}

/* ── Animations ── */
@keyframes modalIn {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(10px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes typewriter {
    from {
        width: 0;
    }

    to {
        width: 34ch;
    }
}

@keyframes blink-caret {

    from,
    to {
        border-color: transparent;
    }

    50% {
        border-color: rgba(255, 255, 255, 0.6);
    }
}