/*
 * Sugarcoat OS cards — compact white surfaces with a restrained animated
 * Indigo border. Scoped to the public Core OS section.
 */
@property --sc-card-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: true;
}

@keyframes sc-card-beam-spin {
    to { --sc-card-angle: 360deg; }
}

html[data-sugarcoat-theme="indigo"].dark .core-os .feature-grid--indigo-beam {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

html[data-sugarcoat-theme="indigo"].dark .core-os .feature-card--indigo-beam {
    --sc-card-angle: 0deg;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 108px;
    padding: 16px 20px;
    margin: 0;
    border: 1px solid oklch(0.92 0 0);
    border-radius: 15px;
    background: oklch(1 0 267.51);
    color: oklch(0.2103 0 267.51);
    box-shadow: 0 8px 24px oklch(0.2571 0.1161 272.24 / 0.065);
    animation: sc-card-beam-spin 3.3s linear infinite;
    transition: transform 180ms ease, box-shadow 180ms ease;
}

html[data-sugarcoat-theme="indigo"].dark .core-os .feature-card--indigo-beam::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    padding: 2px;
    border-radius: inherit;
    pointer-events: none;
    background: conic-gradient(
        from var(--sc-card-angle),
        transparent 0deg 28deg,
        oklch(0.9214 0.0248 257.65 / .20) 46deg,
        oklch(0.7597 0.0804 267.01 / .90) 64deg,
        oklch(0.5144 0.1605 267.44) 80deg,
        oklch(0.6083 0.1247 272.72 / .92) 96deg,
        transparent 124deg 360deg
    );
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask-composite: exclude;
}

html[data-sugarcoat-theme="indigo"].dark .core-os .feature-card--indigo-beam::after {
    content: none;
}

html[data-sugarcoat-theme="indigo"].dark .core-os .feature-card--indigo-beam > * {
    position: relative;
    z-index: 2;
}

html[data-sugarcoat-theme="indigo"].dark .core-os .feature-card__heading {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
}

html[data-sugarcoat-theme="indigo"].dark .core-os .feature-card__number {
    flex: 0 0 auto;
    color: var(--primary);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .04em;
}

html[data-sugarcoat-theme="indigo"].dark .core-os .feature-card__heading h3 {
    margin: 0;
    color: oklch(0.2103 0 267.51);
    font-size: clamp(16px, 1.5vw, 19px);
    line-height: 1.25;
}

html[data-sugarcoat-theme="indigo"].dark .core-os .feature-card--indigo-beam p {
    margin: 7px 0 0;
    color: oklch(0.44 0 0);
    font-size: 13px;
    line-height: 1.45;
}

html[data-sugarcoat-theme="indigo"].dark .core-os .feature-card--indigo-beam:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px oklch(0.2571 0.1161 272.24 / 0.12);
}

@media (max-width: 960px) {
    html[data-sugarcoat-theme="indigo"].dark .core-os .feature-grid--indigo-beam {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    html[data-sugarcoat-theme="indigo"].dark .core-os .feature-grid--indigo-beam {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (prefers-reduced-motion: reduce) {
    html[data-sugarcoat-theme="indigo"].dark .core-os .feature-card--indigo-beam {
        animation: none;
        transition: none;
    }
}