/* Shared feedback for every semantic action, including controls added later. */
:root { --interaction-ease: cubic-bezier(.2, .8, .2, 1); }
:is(a[href], button, summary, [role="button"]) {
    -webkit-tap-highlight-color: transparent;
    transition: color .22s, background-color .22s, border-color .22s,
        box-shadow .28s, outline-offset .22s, text-decoration-color .22s,
        background-size .35s var(--interaction-ease), transform .3s var(--interaction-ease),
        scale .32s cubic-bezier(.2, 1.5, .4, 1);
}

:where(a[href], button, summary, [role="button"]):focus-visible {
    outline: 3px solid var(--sub-brand);
    outline-offset: 4px;
}

/* Text links draw their underline without occupying existing arrow pseudo-elements. */
:where(a[href]):not(.logo, .cta, .btn, .social-card, .back-top, .skip-link, .portfolio-item > a, .related-grid > a, .nav a) {
    background-image: linear-gradient(var(--brand), var(--brand));
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: 0 1px;
}

:where(.topbar, .site-footer) a:not(.logo, .back-top) {
    background-image: linear-gradient(var(--accent), var(--accent));
}

:where(a[href]):not(.logo, .cta, .btn, .social-card, .back-top, .skip-link, .portfolio-item > a, .related-grid > a, .nav a):is(:focus-visible, .interaction-activated) {
    background-size: 100% 1px;
}

.nav a::after { transition: width .35s var(--interaction-ease); }
.nav a:is(:focus-visible, .interaction-activated)::after { width: 100%; }

:is(.cta, .btn, .filter-btn, .lang-btn, .nav-toggle, .slider-controls button,
    .portfolio-nav button, .logo-controls button, .lb-close, .lb-prev, .lb-next) {
    transition: color .22s, background-color .22s, border-color .22s, box-shadow .28s,
        transform .3s var(--interaction-ease), scale .32s cubic-bezier(.2, 1.5, .4, 1);
}

/* A single light sweep follows a hover or keyboard focus on primary actions. */
:is(.cta, .btn) { position: relative; isolation: isolate; }
:is(.cta, .btn)::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(110deg, transparent 25%, #ffffff35 48%, transparent 70%);
    background-size: 280% 100%;
    background-position: 110% 0;
    opacity: 0;
    transition: opacity .2s, background-position .7s var(--interaction-ease);
}
:is(.cta, .btn):focus-visible::before { opacity: 1; background-position: -25% 0; }

:is(.cta, .btn) > span[aria-hidden="true"],
.service-title-arrow, .social-arrow, .related-grid a > span[aria-hidden="true"],
.detail-aside a > span[aria-hidden="true"], .wa-menu a::after {
    display: inline-block;
    transition: translate .35s cubic-bezier(.2, 1.4, .3, 1), rotate .35s;
}

:is(.cta, .btn):is(:focus-visible, .interaction-activated) > span[aria-hidden="true"],
.service-card h3 a:is(:focus-visible, .interaction-activated) .service-title-arrow,
.social-card:is(:focus-visible, .interaction-activated) .social-arrow,
.related-grid a:is(:focus-visible, .interaction-activated) > span[aria-hidden="true"],
.detail-aside a:is(:focus-visible, .interaction-activated) > span[aria-hidden="true"],
.wa-menu a:is(:focus-visible, .interaction-activated)::after { translate: 3px -2px; }

.logo-image { transition: scale .4s cubic-bezier(.2, 1.4, .3, 1), rotate .4s; }
.logo:is(:focus-visible, .interaction-activated) .logo-image { scale: 1.07; rotate: -3deg; }
.back-top > span:last-child { transition: translate .35s, background-color .25s, border-color .25s; }
.back-top:is(:focus-visible, .interaction-activated) > span:last-child {
    translate: 0 -4px;
    background: #ffffff16;
    border-color: var(--accent);
}

.social-card, .related-grid a {
    transition: color .22s, border-color .25s, box-shadow .3s,
        transform .35s var(--interaction-ease), scale .32s cubic-bezier(.2, 1.5, .4, 1);
}
.related-grid a:not(.motion-armed):focus-visible { transform: translateY(-4px); }
.portfolio-item a:focus-visible img { transform: scale(1.04); }
.portfolio-item a.interaction-pressed img { transform: scale(1.015); }
.portfolio-item a.interaction-activated::after { opacity: 1; transform: translateY(0) rotate(8deg); }

/* Opening animations retain native menu, dialog, and details behavior. */
.wa-menu:not([hidden]) { transform-origin: top right; animation: jtp-action-menu .32s var(--interaction-ease) both; }
.lightbox[aria-hidden="false"] .lb-inner { animation: jtp-action-viewer .38s var(--interaction-ease) both; }
.faq-list summary { transition: color .22s, background-color .25s, scale .25s; }
.faq-list summary::after {
    content: "";
    top: calc(50% - 10px);
    width: 20px;
    height: 20px;
    background: linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor);
    background-size: 12px 2px, 2px 12px;
    background-position: center;
    background-repeat: no-repeat;
    transform-origin: center;
    transition: transform .35s cubic-bezier(.2, 1.4, .3, 1), background-size .35s, color .25s;
}
.faq-list details[open] summary { color: var(--brand); }
.faq-list details[open] summary::after { content: ""; transform: rotate(180deg); background-size: 12px 2px, 2px 0; }
.faq-list details[open] > p { animation: jtp-action-answer .35s var(--interaction-ease) both; }

/* Supporting browsers smoothly expand AND collapse the native details content. */
@supports (interpolate-size: allow-keywords) and (content-visibility: hidden) {
    .faq-list details { interpolate-size: allow-keywords; }
    .faq-list details::details-content {
        block-size: 0;
        overflow: clip;
        opacity: 0;
        transition: block-size .35s var(--interaction-ease), opacity .25s,
            content-visibility .35s allow-discrete;
    }
    .faq-list details[open]::details-content { block-size: auto; opacity: 1; }
}

/* This clipped, temporary overlay never changes labels or catches a click. */
.interaction-ripple {
    position: fixed;
    z-index: 1000;
    overflow: hidden;
    pointer-events: none;
    contain: strict;
}
.interaction-ripple-wave {
    position: absolute;
    left: var(--interaction-ripple-x);
    top: var(--interaction-ripple-y);
    width: var(--interaction-ripple-size);
    height: var(--interaction-ripple-size);
    margin-left: calc(var(--interaction-ripple-size) / -2);
    margin-top: calc(var(--interaction-ripple-size) / -2);
    border: 1px solid #0058c66b;
    border-radius: 50%;
    background: radial-gradient(circle, #ffffff45 0%, #0058c626 65%, #cc9f1338 100%);
    animation: jtp-interaction-ripple .62s cubic-bezier(.1, .65, .25, 1) both;
}

@media (hover: hover) and (pointer: fine) {
    :where(a[href]):not(.logo, .cta, .btn, .social-card, .back-top, .skip-link, .portfolio-item > a, .related-grid > a, .nav a):hover { background-size: 100% 1px; }
    .nav a:hover::after { width: 100%; }
    :is(.cta, .btn):hover::before { opacity: 1; background-position: -25% 0; }
    .btn:not(.motion-armed):hover { transform: translateY(-2px); box-shadow: 0 8px 20px #11265d12; }
    :is(.cta, .btn):hover > span[aria-hidden="true"],
    .service-card h3 a:hover .service-title-arrow, .social-card:hover .social-arrow,
    .related-grid a:hover > span[aria-hidden="true"], .detail-aside a:hover > span[aria-hidden="true"],
    .wa-menu a:hover::after { translate: 3px -2px; }
    .logo:hover .logo-image { scale: 1.07; rotate: -3deg; }
    .back-top:hover > span:last-child { translate: 0 -4px; background: #ffffff16; border-color: var(--accent); }
    :is(.filter-btn, .lang-btn, .nav-toggle):not(:disabled, [aria-disabled="true"], .motion-armed):hover { box-shadow: 0 4px 12px #11265d12; transform: translateY(-2px); }
    :is(.portfolio-nav button, .logo-controls button, .slider-controls button, .lb-close, .lb-prev, .lb-next):not(:disabled, [aria-disabled="true"]):hover { scale: 1.1; }
    .social-card:hover { box-shadow: 0 12px 28px #11265d0d; }
    .related-grid a:not(.motion-armed):hover { transform: translateY(-4px); box-shadow: 0 10px 24px #11265d0e; }
    .faq-list summary:hover { color: var(--brand); background-color: #c3263905; }
    .faq-list summary:hover::after { color: var(--sub-brand); }
}

/* Press follows hover in the cascade so circular controls also push inward. */
:is(a[href], button, summary, [role="button"]):not(:disabled, [aria-disabled="true"], .skip-link, .motion-armed).interaction-activated {
    scale: .985;
}
:is(a[href], button, summary, [role="button"]):not(:disabled, [aria-disabled="true"], .skip-link, .motion-armed):is(.interaction-pressed, :active) {
    scale: .96;
    transition-duration: .1s;
}
.faq-list details > summary:not(.motion-armed):is(.interaction-pressed, :active, .interaction-activated) { scale: .995; }

@media (max-width: 960px) {
    .nav.is-open ul, .nav ul.is-open { animation: jtp-action-menu .32s var(--interaction-ease) both; }
}

@keyframes jtp-action-menu {
    from { opacity: 0; transform: translateY(-8px) scale(.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes jtp-action-viewer {
    from { opacity: 0; transform: translateY(14px) scale(.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes jtp-action-answer {
    from { opacity: 0; translate: 0 -6px; }
    to { opacity: 1; translate: 0 0; }
}
@keyframes jtp-interaction-ripple {
    0% { scale: .04; opacity: .8; }
    65% { opacity: .35; }
    100% { scale: 1; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    :where(a[href], button, summary, [role="button"]),
    :where(a[href], button, summary, [role="button"])::before,
    :where(a[href], button, summary, [role="button"])::after,
    :where(a[href], button, summary, [role="button"]) :is(span, img),
    .faq-list details::details-content, .faq-list details > p,
    .wa-menu, .nav ul, .lightbox .lb-inner {
        animation: none !important;
        transition: none !important;
    }
    :where(a[href], button, summary, [role="button"]):not(.skip-link),
    :where(a[href], button, summary, [role="button"]) :is(span, img) {
        scale: none !important;
        translate: none !important;
        rotate: none !important;
    }
    :is(.cta, .btn, .social-card, .related-grid a, .filter-btn, .lang-btn, .nav-toggle):hover,
    .related-grid a:focus-visible, .portfolio-item a img { transform: none !important; }
    .interaction-ripple { display: none !important; }
}

@media print {
    .interaction-ripple { display: none !important; }
    :where(a[href], button, summary, [role="button"]) { scale: none !important; }
    .faq-list details > p, .faq-list details::details-content { animation: none !important; transition: none !important; }
}