@property --block-frame-spin {
    syntax: "<angle>";
    inherits: true;
    initial-value: 0deg;
}

:root[data-block-frame-custom="1"] :where(
    .p-card, .vn-profile-card, .vn-collapsible-card, .cat-card, .project-card, .proj-card,
    .proj-summary, .proj-summary-item, .proj-team, .proj-empty,
    .hist-toc, .hist-era, .hist-note, .hist-cta,
    .sug-form-card, .sug-item, .sug-empty,
    .partner-card, .partners-empty, .anuncio-box, .antigos-card,
    .team-card, .info-card, .stat-card, .stats-card, .dashboard-card,
    .transp-card, .auth-card, .fieldset-card, .panel-box, .modal-box,
    .comment-card, .profile-review-card, .sekai-comment-box, .profile-bio-box,
    .favorite-character-box, .favorites-library-box, .featured-vn-box, .hub-card, .hub-panel, .shop-admin-card, .g-card, .card,
    .hub-gradient-block, .hub-route-panel, .hub-route-card, .metric-card,
    .progress-mini-card, .project-overview-card, .project-hero-stat, .quick-stat,
    .project-attention-row, .stage-progress-block, .project-stage-card,
    .project-attention-card, .create-card, .note-card, .script-empty,
    .hub-empty-state, .attention-panel, .char-card, .node-card,
    .annotation-card, .scene-card
) {
    position: relative !important;
    border-width: var(--block-frame-width, 2px) !important;
    border-style: var(--block-frame-line, solid) !important;
    border-color: var(--block-frame-a, var(--accent)) !important;
    border-radius: var(--block-frame-radius, var(--radius-md)) !important;
    box-shadow:
        0 0 var(--block-frame-glow, 0) var(--block-frame-a, var(--accent)),
        inset 0 0 var(--block-frame-inset, 0) var(--block-frame-b, var(--accent)) !important;
}

:root[data-block-frame-custom="1"][data-block-frame-gradient="1"]:not([data-block-frame-line="double"]):not([data-block-frame-line="dashed"]) :where(
    .p-card, .vn-profile-card, .vn-collapsible-card, .cat-card, .project-card, .proj-card,
    .proj-summary, .proj-summary-item, .proj-team, .proj-empty,
    .hist-toc, .hist-era, .hist-note, .hist-cta,
    .sug-form-card, .sug-item, .sug-empty,
    .partner-card, .partners-empty, .anuncio-box, .antigos-card,
    .team-card, .info-card, .stat-card, .stats-card, .dashboard-card,
    .transp-card, .auth-card, .fieldset-card, .panel-box, .modal-box,
    .comment-card, .profile-review-card, .sekai-comment-box, .profile-bio-box,
    .favorite-character-box, .favorites-library-box, .featured-vn-box, .hub-card, .hub-panel, .shop-admin-card, .g-card, .card,
    .hub-gradient-block, .hub-route-panel, .hub-route-card, .metric-card,
    .progress-mini-card, .project-overview-card, .project-hero-stat, .quick-stat,
    .project-attention-row, .stage-progress-block, .project-stage-card,
    .project-attention-card, .create-card, .note-card, .script-empty,
    .hub-empty-state, .attention-panel, .char-card, .node-card,
    .annotation-card, .scene-card
) {
    border-color: transparent !important;
    border-image: none !important;
}

:root[data-block-frame-custom="1"][data-block-frame-gradient="1"]:not([data-block-frame-line="double"]):not([data-block-frame-line="dashed"]) :where(
    .p-card, .vn-profile-card, .vn-collapsible-card, .cat-card, .project-card, .proj-card,
    .proj-summary, .proj-summary-item, .proj-team, .proj-empty,
    .hist-toc, .hist-era, .hist-note, .hist-cta,
    .sug-form-card, .sug-item, .sug-empty,
    .partner-card, .partners-empty, .anuncio-box, .antigos-card,
    .team-card, .info-card, .stat-card, .stats-card, .dashboard-card,
    .transp-card, .auth-card, .fieldset-card, .panel-box, .modal-box,
    .comment-card, .profile-review-card, .sekai-comment-box, .profile-bio-box,
    .favorite-character-box, .favorites-library-box, .featured-vn-box, .hub-card, .hub-panel, .shop-admin-card, .g-card, .card,
    .hub-gradient-block, .hub-route-panel, .hub-route-card, .metric-card,
    .progress-mini-card, .project-overview-card, .project-hero-stat, .quick-stat,
    .project-attention-row, .stage-progress-block, .project-stage-card,
    .project-attention-card, .create-card, .note-card, .script-empty,
    .hub-empty-state, .attention-panel, .char-card, .node-card,
    .annotation-card, .scene-card
)::after {
    content: "" !important;
    position: absolute !important;
    z-index: 8 !important;
    inset: calc(var(--block-frame-width, 2px) / -2) !important;
    padding: var(--block-frame-width, 2px) !important;
    border: 0 !important;
    border-radius: calc(var(--block-frame-radius, var(--radius-md)) + var(--block-frame-width, 2px) / 2) !important;
    background: linear-gradient(
        calc(var(--block-frame-angle, 135deg) + var(--block-frame-spin)),
        var(--block-frame-a),
        var(--block-frame-b),
        var(--block-frame-a)
    ) !important;
    pointer-events: none !important;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
    -webkit-mask-composite: xor !important;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
    mask-composite: exclude !important;
}

/* A borda nativa dupla respeita o raio; a segunda cor forma a linha interna. */
:root[data-block-frame-custom="1"][data-block-frame-line="double"] :where(
    .p-card, .vn-profile-card, .vn-collapsible-card, .cat-card, .project-card, .proj-card,
    .proj-summary, .proj-summary-item, .proj-team, .proj-empty,
    .hist-toc, .hist-era, .hist-note, .hist-cta,
    .sug-form-card, .sug-item, .sug-empty,
    .partner-card, .partners-empty, .anuncio-box, .antigos-card,
    .team-card, .info-card, .stat-card, .stats-card, .dashboard-card,
    .transp-card, .auth-card, .fieldset-card, .panel-box, .modal-box,
    .comment-card, .profile-review-card, .sekai-comment-box, .profile-bio-box,
    .favorite-character-box, .favorites-library-box, .featured-vn-box, .hub-card, .hub-panel, .shop-admin-card, .g-card, .card,
    .hub-gradient-block, .hub-route-panel, .hub-route-card, .metric-card,
    .progress-mini-card, .project-overview-card, .project-hero-stat, .quick-stat,
    .project-attention-row, .stage-progress-block, .project-stage-card,
    .project-attention-card, .create-card, .note-card, .script-empty,
    .hub-empty-state, .attention-panel, .char-card, .node-card,
    .annotation-card, .scene-card
) {
    border-image: none !important;
    border-style: double !important;
    border-color: var(--block-frame-a, var(--accent)) !important;
    box-shadow:
        0 0 var(--block-frame-glow, 0) var(--block-frame-a, var(--accent)),
        inset 0 0 0 max(1px, calc(var(--block-frame-width, 2px) / 3)) var(--block-frame-b, var(--accent)),
        inset 0 0 var(--block-frame-inset, 0) var(--block-frame-b, var(--accent)) !important;
}

:root[data-block-frame-custom="1"][data-block-frame-animated="1"] {
    animation: sekai-block-frame-gradient var(--block-frame-speed, 6s) linear infinite;
}

@keyframes sekai-block-frame-gradient {
    to { --block-frame-spin: 360deg; }
}

@media (prefers-reduced-motion: reduce) {
    :root[data-block-frame-custom="1"][data-block-frame-animated="1"] {
        animation: none;
    }
}