/* Shared geometry is defined in roya-shape.css. */
body .site-primary-button, .nav-project-button::before { clip-path: var(--roya-shape); }
/* Shared outline action follows the Roya shape. */
body .site-secondary-button {
    --secondary-color: #1c5fba;
    position: relative;
    isolation: isolate;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--secondary-color);
    box-shadow: none;
    backdrop-filter: none;
}
body .site-secondary-button.site-secondary-button { border-radius: 0; }
.site-secondary-button::before,
.site-secondary-button::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: -1;
}
.site-secondary-button::before {
    background: currentColor;
    /* The inner polygon leaves a true transparent centre and a continuous diagonal border. */
    clip-path: polygon(evenodd, 0 0, 100% 0, 100% 100%, 14px 100%, 0 calc(100% - 12px), 0 0,
        2px 2px, 2px calc(100% - 13px), 15px calc(100% - 2px), calc(100% - 2px) calc(100% - 2px), calc(100% - 2px) 2px, 2px 2px);
}
.site-secondary-button::after {
    background: currentColor;
    opacity: 0;
    clip-path: var(--roya-shape);
    transition: opacity 180ms ease;
}
body .site-secondary-button:hover { background: transparent; color: var(--secondary-color); }
.site-secondary-button:hover::after { opacity: .08; }
body .site-secondary-button:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.dark .site-secondary-button,
.home-hero .site-secondary-button { --secondary-color: #7ed4fa; }
.dark .site-secondary-button,
.dark .site-secondary-button:hover { background: transparent; color: var(--secondary-color); }
body .app-showcase-secondary.site-secondary-button { min-width: 210px; }
body .motion-icon-button {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; padding: 0; border: 1px solid #b6cee2;
    border-radius: 50%; color: #112c5b; background: transparent;
}
body .feedback-toggle.motion-icon-button { display: flex; }
body .motion-icon-button.motion-icon-button { width: 44px; height: 44px; padding: 0; border-radius: 50%; }
.motion-icon-button:hover { background: rgb(21 139 211 / 10%); }
.motion-icon-button:focus-visible { outline: 2px solid #158bd3; outline-offset: 4px; }
.motion-icon-button svg { width: 18px; height: 18px; }
.motion-icon-button .motion-play-icon { display: none; }
.motion-icon-button[aria-pressed="true"] .motion-pause-icon { display: none; }
.motion-icon-button[aria-pressed="true"] .motion-play-icon { display: block; }
.dark .motion-icon-button { color: #7ed4fa; border-color: #527893; }
@media (prefers-reduced-motion: reduce) { .site-secondary-button::after { transition: none; } }