:root {
    /* Core Colors */
    --color-background-primary: #1c0f31;
    --color-background-secondary: #2c1a4d;
    --color-background-accent: rgba(168, 85, 247, 0.15);

    /* Accent Colors */
    --color-accent-primary: #a855f7;
    --color-accent-light: #d6aaff;

    /* Text Colors */
    --color-text-primary: #f1e6ff;
    --color-text-secondary: #d8c4f2;
    --color-text-muted: #b8b8d0;

    /* Border Colors */
    --color-border-primary: #3b2a5b;
    --color-border-accent: rgba(99, 102, 241, 0.2);

    /* Status Colors */
    --color-status-success-bg: rgba(6, 78, 59, 0.5);
    --color-status-success-border: #047857;

    --color-status-error-bg: rgba(127, 29, 29, 0.5);
    --color-status-error-border: #991b1b;

    --color-status-warning-bg: rgba(120, 53, 15, 0.5);
    --color-status-warning-border: #92400e;

    --color-status-obstruction-bg: rgba(251, 191, 36, 0.5);
    --color-status-obstruction-border: #fbbf24b2;

    /* Loading & UI */
    --color-loading-spinner: rgba(99, 102, 241, 0.12);
    --color-shadow-primary: rgba(0, 0, 0, 0.2);
    --color-shadow-secondary: rgba(0, 0, 0, 0.3);
    --color-shadow-card: rgba(0, 0, 0, 0.5);

}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

::-webkit-scrollbar {
    width: 4px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--color-background-secondary);
    border-radius: 2px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-accent-primary);
}

body {
    display: grid;
    grid-template-areas: "header main" "footer footer";
    grid-template-columns: 340px 1fr;
    grid-template-rows: 1fr auto;
    min-height: 100vh;
    background: var(--color-background-primary);
    color: var(--color-text-primary);
    font-family: 'Atkinson Hyperlegible', sans-serif;
    line-height: 1.6;
}

@media (max-width: 768px) {
    body {
        grid-template-areas: "header" "main" "footer";
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr auto;
    }
}

header {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    flex-direction: column;
    grid-area: header;
    height: 100vh;
    padding: 40px 24px;
    background: var(--color-background-secondary);
    border-right: 1px solid var(--color-border-primary);
    box-shadow: 0 1px 3px var(--color-shadow-primary);
}

@media (max-width: 768px) {
    header {
        position: static;
        height: auto;
        padding: 24px;
        border-right: none;
        border-bottom: 1px solid var(--color-border-primary);
    }
}

.container {
    max-width: 100%;
}

.header-content {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

h1 {
    align-self: center;
    margin-bottom: -8px;
    text-align: center;
    width: 100%;
}

h1 img {
    width: 100%;
}

@media (max-width: 768px) {
    h1 {
        margin-top: 16px;
        font-size: 1.8rem;
    }
}

.subtitle {
    text-align: center;
    font-size: 0.9rem;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 0.3px;
    color: var(--color-text-secondary);
}

.filters {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

@media (max-width: 768px) {
    .filters {
        gap: 16px;
    }
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

@media (max-width: 768px) {
    .filter-group {
        min-width: auto;
    }
}

label {
    margin-left: .5rem;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

select,
input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--color-border-primary);
    border-radius: 8px;
    background: var(--color-background-secondary);
    color: var(--color-text-primary);
    font-family: 'Atkinson Hyperlegible', sans-serif;
    font-size: 0.9rem;
    font-weight: 400;
    line-height: 1.4;
    transition: all 0.2s ease;
}

option {
    background-color: var(--color-background-primary);
    color: var(--color-text-primary);
    font-family: 'Atkinson Hyperlegible', sans-serif;
    font-size: 0.9rem;
    font-weight: 400;
    line-height: 1.4;
}

select:hover,
input:hover {
    border-color: var(--color-accent-light);
}

select:focus,
input:focus {
    outline: none;
    border-color: var(--color-accent-primary);
    box-shadow: 0 0 0 3px var(--color-background-accent);
}

.search-box {
    position: relative;
    display: flex;
    align-items: center;
}

.search-icon {
    position: absolute;
    left: 12px;
    z-index: 1;
    font-size: 0.95rem;
    color: var(--color-text-secondary);
    pointer-events: none;
}

.search-box input {
    padding-left: 38px;
}

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-moz-search-cancel-button {
    height: 16px;
    width: 16px;
    background: var(--color-text-primary);
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E") no-repeat center;
    cursor: pointer;
    opacity: 0.6;
}

input[type="search"]::-webkit-search-cancel-button:hover,
input[type="search"]::-moz-search-cancel-button:hover {
    opacity: 1;
    background: var(--color-accent-primary);
}

input[type="search"]::-moz-search-cancel-button {
    border: none;
}

main {
    display: flex;
    flex-direction: column;
    grid-area: main;
    padding: 40px;
    min-height: calc(100vh - 140px);
    background: var(--color-background-primary);
}

@media (max-width: 768px) {
    main {
        height: auto;
        padding: 24px;
        min-height: calc(100vh - 120px);
    }
}

.cards-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    align-content: start;
    padding-bottom: 100px;
    /* Estimativa segura para que o último elemento, neste caso as redes sociais, fique coberto pelo rodapé */
}

@media (max-width: 768px) {
    .cards-container {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 20px;
    }
}

@media (min-width: 1400px) {
    .cards-container {
        grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
        gap: 40px;
    }
}

.card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--color-border-primary);
    border-radius: 8px;
    background: var(--color-background-secondary);
    box-shadow: 0 1px 3px var(--color-shadow-card);
    height: 100%;
}

.card::before {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    content: '';
    background: linear-gradient(90deg, var(--color-accent-primary), var(--color-accent-light));
}

.card-header {
    position: relative;
    overflow: hidden;
}

.card-photo {
    display: block;
    width: 100%;
    height: 220px;
    object-fit: cover;
    background: var(--color-border-primary);
    transition: transform 0.3s ease;
}

.card:hover .card-photo {
    transform: scale(1.02);
}

.copy-icon {
    visibility: hidden;
    opacity: 0;
    padding: 8px;
    border: none;
    border-radius: 4px;
    background: none;
    color: var(--color-text-secondary);
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.card:hover .copy-icon {
    visibility: visible;
    opacity: 0.6;
}

.copy-icon:hover {
    opacity: 1;
    color: var(--color-accent-primary);
}

.copy-icon:focus-visible {
    visibility: visible;
    opacity: 1;
    color: var(--color-accent-primary);
    outline: 2px solid var(--color-accent-light);
    outline-offset: 2px;
}

.card-body {
    display: flex;
    flex-direction: column;
    padding: 20px;
    flex: 1 1 auto;
    /* ocupa todo o espaço disponível */
}

.card-name {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 10px;
    font-family: 'Exo 2', sans-serif;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.card-info {
    margin-bottom: 18px;
    font-size: 0.9rem;
    font-weight: 400;
    line-height: 1.4;
    color: var(--color-text-secondary);
}

.party-badge {
    display: inline-block;
    padding: 6px 12px;
    border: 1px solid var(--color-border-accent);
    border-radius: 6px;
    background: var(--color-background-accent);
    color: var(--color-accent-light);
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    margin-bottom: 10px;
    flex-shrink: 0;
    box-shadow: 0 1px 2px var(--color-shadow-secondary);
}

.votings {
    margin-bottom: 18px;
}

.voting-title {
    margin-bottom: 12px;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

.voting-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--color-border-primary);
}

.voting-name {
    flex: 1;
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    overflow-wrap: anywhere;
}

.voting-name a {
    color: var(--color-accent-light);
    text-decoration: none;
    font-weight: 500;
    padding: 0.05rem 0.2rem;
    transition: color 0.3s ease, box-shadow 0.3s ease;
    display: inline;
    box-shadow: inset 0 -0.6em 0 rgba(147, 112, 219, 0.15);
    transition: box-shadow 0.3s ease, color 0.3s ease;
}

.voting-name a:hover,
.voting-name a:focus-visible {
    color: var(--color-text-primary);
    box-shadow: inset 0 -1.2em 0 rgba(147, 112, 219, 0.15);
}

.voting-name a:focus-visible {
    outline: 2px solid var(--color-accent-primary);
    outline-offset: 2px;
}

.voting-status {
    padding: 5px 10px;
    border: 1px solid;
    border-radius: 6px;
    min-width: 70px;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
    white-space: nowrap;
    flex-shrink: 0;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.voting-status.uhu {
    background: var(--color-status-success-bg);
    color: var(--color-text-primary);
    border-color: var(--color-status-success-border);
}

.voting-status.boo {
    background: var(--color-status-error-bg);
    color: var(--color-text-primary);
    border-color: var(--color-status-error-border);
}

.voting-status.abstention {
    background: var(--color-status-warning-bg);
    color: var(--color-text-primary);
    border-color: var(--color-status-warning-border);
}

.voting-status.obstruction {
    background: var(--color-status-obstruction-bg);
    color: var(--color-text-primary);
    border-color: var(--color-status-obstruction-border);
}

.social-links {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: auto;
    /* empurra pro fim do card-body */
}

.social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-secondary);
    text-decoration: none;
    font-size: 1rem;
    transition: all 0.2s ease;
}

.social-link:hover {
    color: var(--color-accent-primary);
    transform: scale(1.08);
}

.social-link:focus-visible {
    outline: 2px solid var(--color-accent-primary);
    outline-offset: 2px;
}

.no-results {
    grid-column: 1 / -1;
    padding: 60px 20px;
    text-align: center;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.4;
    color: var(--color-text-secondary);
}

.loading {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 30px 20px;
    color: var(--color-accent-primary);
}

@media (min-width: 769px) {
    .loading {
        position: fixed;
        top: 50%;
        left: 60%;
        z-index: 9999;
        padding: 20px;
        border-radius: 8px;
        background: transparent;
        transform: translate(-50%, -50%);
    }
}

.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid var(--color-loading-spinner);
    border-top-color: var(--color-accent-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.footer-toggle {
    position: absolute;
    top: 20px;
    right: 24px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-border-primary);
    border-radius: 6px;
    background: transparent;
    color: var(--color-text-secondary);
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.footer-toggle:hover {
    border-color: var(--color-accent-primary);
    color: var(--color-accent-primary);
    background: rgba(168, 85, 247, 0.1);
}

.footer-toggle:focus-visible {
    outline: 2px solid var(--color-accent-light);
    outline-offset: 2px;
}

@media (max-width: 768px) {
    .footer-toggle {
        top: 16px;
        right: 16px;
        width: 36px;
        height: 36px;
        font-size: 1rem;
    }
}

/* Footer Drawer */
.footer-drawer {
    position: fixed;
    top: 0;
    right: -420px;
    width: 420px;
    height: 100vh;
    display: flex;
    flex-direction: column;
    z-index: 2000;
    background: var(--color-background-secondary);
    border-left: 1px solid var(--color-border-primary);
    border-top: none;
    box-shadow: -2px 0 12px var(--color-shadow-secondary);
    transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.footer-drawer.open {
    right: 0;
}

@media (max-width: 768px) {
    .footer-drawer {
        width: 100%;
        right: -100%;
        height: 100%;
    }

    .footer-drawer.open {
        right: 0;
    }
}

.footer-drawer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1900;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.footer-drawer.open~.footer-drawer-overlay {
    opacity: 1;
    pointer-events: auto;
}

[inert] {
    opacity: 0.6;
    pointer-events: none;
}

[inert] * {
    pointer-events: none;
}

.footer-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 24px 28px 20px;
    background: linear-gradient(135deg, var(--color-background-secondary) 0%, rgba(168, 85, 247, 0.03) 100%);
    position: relative;
}

.footer-drawer-header::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 6px;
    background-repeat: repeat-x;
    background-size: 15px 8px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='8' viewBox='0 0 20 8'><path d='M0 4 Q5 0 10 4 T20 4' fill='none' stroke='%233b2a5b' stroke-width='1.5'/></svg>");
}

.footer-drawer-title {
    margin: 0;
    font-family: 'Exo 2', sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--color-text-primary);
}

.footer-drawer-close {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1px solid var(--color-border-primary);
    border-radius: 6px;
    background: transparent;
    color: var(--color-text-secondary);
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.footer-drawer-close:hover {
    border-color: var(--color-accent-primary);
    color: var(--color-accent-primary);
    background: rgba(168, 85, 247, 0.1);
}

.footer-drawer-close:focus-visible {
    outline: 2px solid var(--color-accent-light);
    outline-offset: 2px;
    border-color: var(--color-accent-primary);
}

@media (max-width: 768px) {
    .footer-drawer-header {
        padding: 20px 24px 16px;
    }

    .drawer-scroll-content {
        padding: 24px;
        gap: 28px;
    }
}

.drawer-scroll-content {
    padding: 28px;
    padding-bottom: 96px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.footer-drawer-content {
    flex: 1;
    overflow-y: auto;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.footer-drawer-content::-webkit-scrollbar {
    width: 4px;
}

.footer-drawer-content::-webkit-scrollbar-track {
    background: transparent;
}

.footer-drawer-content::-webkit-scrollbar-thumb {
    background: var(--color-border-primary);
    border-radius: 2px;
}

.footer-drawer-content::-webkit-scrollbar-thumb:hover {
    background: var(--color-accent-primary);
}

.footer-tagline {
    border-bottom: 1px solid var(--color-border-primary);
    padding-bottom: 16px;
}

.tagline {
    margin: 0;
    font-size: 0.8rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--color-text-secondary);
}

.footer-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.footer-section-title {
    margin-bottom: 10px;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--color-accent-light);
    position: relative;
    padding-bottom: 8px;
}

.footer-section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, var(--color-accent-primary), transparent);
    border-radius: 1px;
}

.footer-text {
    margin: 0;
    font-size: 0.84rem;
    line-height: 1.7;
    font-weight: 400;
    letter-spacing: 0.01em;
    color: var(--color-text-muted);
}

.footer-text a {
    color: var(--color-accent-light);
    text-decoration: none;
    padding: 0.1rem 0.2rem;
    margin: -0.1rem -0.2rem;
    border-radius: 2px;
    transition: color 0.3s ease, box-shadow 0.3s ease;
    box-shadow: inset 0 -0.5em 0 rgba(168, 85, 247, 0.15);
}

.footer-text a:hover,
.footer-text a:focus-visible {
    color: var(--color-text-primary);
    box-shadow: inset 0 -1.2em 0 rgba(168, 85, 247, 0.15);
}

.footer-text a:focus-visible {
    outline: 2px solid var(--color-accent-primary);
    outline-offset: 2px;
}

.footer-credits-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

/* Aplica blur apenas se um cartão estiver em hover */
.footer-credits-grid:has(.credit-item:hover) .credit-item:not(:hover) {
    filter: blur(4px);
    transform: scale(0.95);
}

.credit-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 12px;
    border-radius: 8px;
    position: relative;
    overflow: hidden;
    justify-content: center;
    background: rgba(168, 85, 247, 0.04);
    border: 1px solid rgba(168, 85, 247, 0.08);
    transition: all 0.3s ease;
    transform: scale(1);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.credit-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(168, 85, 247, 0.1), transparent);
    transition: left 0.6s ease;
}

.credit-item:hover {
    transform: scale(1.06);
    background: rgba(168, 85, 247, 0.10);
    border-color: rgba(168, 85, 247, 0.25);
}

.credit-item:hover::before {
    left: 100%;
}

.credit-label {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--color-text-secondary);
    line-height: 1.2;
}

.credit-link {
    color: var(--color-accent-light);
    text-decoration: none;
    font-size: 0.83rem;
    font-weight: 500;
    line-height: 1.3;
    word-break: break-word;
    transition: all 0.3s ease;
}

.credit-link:hover {
    color: var(--color-text-primary);
}

/* ============================
     FLORES PARA YVIES
============================ */

.credit-link-flowers {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 6px;
    overflow: visible;
}
.credit-link-flowers .flowers-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.credit-link-flowers .flowers-text {
    font-size: 0.83rem;
    font-weight: 500;
    z-index: 2;
    padding: 3px 10px;
    border-radius: 4px;
    background: rgba(214, 170, 255, 0.18);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    transition: all 0.4s ease;
}

.credit-link-flowers .flower {
    display: grid;
    grid-template-columns: 1em 1em;
    position: absolute;
    z-index: 1;
    transition: grid-template-columns 0.7s ease;
}

/* Petalas em estilo cristal */
.credit-link-flowers .petal {
    height: 0.9em;
    width: 0.9em;
    border-radius: 40% 70% / 7% 90%;
    background: linear-gradient(135deg,
            rgba(214, 170, 255, 0.25),
            rgba(168, 85, 247, 0.22));
    border: 1px solid rgba(214, 170, 255, 0.35);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);

    transition: width 0.7s ease, height 0.7s ease, background 0.6s ease;
}

.credit-link-flowers .petal.two {
    transform: rotate(90deg);
}

.credit-link-flowers .petal.three {
    transform: rotate(270deg);
}

.credit-link-flowers .petal.four {
    transform: rotate(180deg);
}

.credit-link-flowers .flower1 {
    top: -12px;
    left: -13px;
    transform: rotate(5deg);
}

.credit-link-flowers .flower2 {
    bottom: -5px;
    left: 8px;
    transform: rotate(35deg);
}

.credit-link-flowers .flower3 {
    bottom: -15px;
    transform: rotate(0deg);
}

.credit-link-flowers .flower4 {
    top: -14px;
    transform: rotate(15deg);
}

.credit-link-flowers .flower5 {
    right: 11px;
    top: -3px;
    transform: rotate(25deg);
}

.credit-link-flowers .flower6 {
    right: -15px;
    bottom: -15px;
    transform: rotate(30deg);
}

.credit-link-flowers:hover .petal {
    background: linear-gradient(135deg,
            rgba(214, 170, 255, 0.40),
            rgba(168, 85, 247, 0.35));
    border-color: rgba(214, 170, 255, 0.55);

    width: 1.35em;
    height: 1.35em;
}

.credit-link-flowers:hover .flower {
    grid-template-columns: 1.3em 1.3em;
}

.credit-link-flowers:hover .flowers-text {
    background: rgba(214, 170, 255, 0.28);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}

.credit-link-flowers:hover .flower1 {
    animation: flower1 15s linear infinite;
}

.credit-link-flowers:hover .flower2 {
    animation: flower2 13s linear infinite;
}

.credit-link-flowers:hover .flower3 {
    animation: flower3 16s linear infinite;
}

.credit-link-flowers:hover .flower4 {
    animation: flower4 17s linear infinite;
}

.credit-link-flowers:hover .flower5 {
    animation: flower5 20s linear infinite;
}

.credit-link-flowers:hover .flower6 {
    animation: flower6 15s linear infinite;
}

@keyframes flower1 {
    from {
        transform: rotate(5deg);
    }

    to {
        transform: rotate(365deg);
    }
}

@keyframes flower2 {
    from {
        transform: rotate(35deg);
    }

    to {
        transform: rotate(-325deg);
    }
}

@keyframes flower3 {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes flower4 {
    from {
        transform: rotate(15deg);
    }

    to {
        transform: rotate(375deg);
    }
}

@keyframes flower5 {
    from {
        transform: rotate(25deg);
    }

    to {
        transform: rotate(-335deg);
    }
}

@keyframes flower6 {
    from {
        transform: rotate(30deg);
    }

    to {
        transform: rotate(390deg);
    }
}

/* Como contribuir */
.contribution-methods {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

/* Cards de contribuição */
.contribution-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    border-radius: 8px;
    background: rgba(168, 85, 247, 0.04);
    border: 1px solid rgba(168, 85, 247, 0.08);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.contribution-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(168, 85, 247, 0.1), transparent);
    transition: left 0.6s ease;
}

.contribution-item:hover {
    background: rgba(168, 85, 247, 0.10);
    border-color: rgba(168, 85, 247, 0.25);
    transform: translateX(4px);
}

.contribution-item:hover::before {
    left: 100%;
}

/* Ícones com efeito sutil */
.contribution-icon {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(168, 85, 247, 0.1);
    color: var(--color-accent-light);
    font-size: 1.1rem;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.contribution-item:hover .contribution-icon {
    background: rgba(168, 85, 247, 0.2);
    transform: scale(1.1);
}

/* Conteúdo textual */
.contribution-content {
    flex: 1;
    min-width: 0;
}

.contribution-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    margin-bottom: 4px;
    display: block;
}

.contribution-value {
    font-size: 0.82rem;
    color: var(--color-accent-light);
    word-break: break-word;
    line-height: 1.4;
}

.contribution-value a {
    color: inherit;
    text-decoration: none;
    padding: 0.1rem 0.2rem;
    margin: -0.1rem -0.2rem;
    border-radius: 2px;
    transition: all 0.3s ease;
    box-shadow: inset 0 -0.5em 0 rgba(168, 85, 247, 0.15);
}

.contribution-value a:hover {
    color: var(--color-text-primary);
    box-shadow: inset 0 -1.2em 0 rgba(168, 85, 247, 0.15);
}

/* Copy wrapper for Pix/Bitcoin keys
   - show the copy button when interacting with the whole contribution item
   - always visible on touch devices (no hover) */
.copy-wrapper {
    display: inline-block;
}

.copy-value {
    font-family: monospace, ui-monospace, SFMono-Regular, Menlo, Monaco, 'Roboto Mono', 'Courier New', monospace;
}

.contribution-item .contribution-content {
    padding-right: 54px;
}

.copy-button {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border: none;
    background-color: transparent;
    color: var(--color-text-secondary);
    padding: 0;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    visibility: hidden;
    opacity: 0;
}

/* icons inside button */
.copy-button .clipboard,
.copy-button .checkmark {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1rem;
}

.copy-button .checkmark {
    display: none;
    color: var(--color-status-success-border);
}

/* Show the button when interacting with the entire contribution item (hover or keyboard focus) */
.contribution-item:hover .copy-button,
.contribution-item:focus-within .copy-button,
.copy-button:focus-visible {
    visibility: visible;
    opacity: 0.95;
    color: var(--color-accent-primary);
    background: var(--color-background-accent);
}

/* When copied: switch icons */
.copy-button.copied .clipboard {
    display: none;
}

.copy-button.copied .checkmark {
    display: block;
}

@media (hover: none) and (pointer: coarse) {

    /* Remove tap highlight globally on touch devices */
    * {
        -webkit-tap-highlight-color: transparent;
    }

    /* Keep the copy button visible and tappable on touch devices */
    .copy-button {
        visibility: visible;
        opacity: 0.95;
        background: var(--color-background-accent);
        padding: 0;
        pointer-events: auto;
    }

    /* Default visible state for the small copy icon on cards.
       Neutralize hover-specific transitions/variants so it does not flash
       hover visuals on first tap. Preserve focus-visible for accessibility. */
    .copy-icon {
        visibility: visible;
        opacity: 0.95;
        pointer-events: auto;
        color: var(--color-text-secondary);
        /* avoid hover flicker by disabling transition on touch devices */
        transition: none;
        background: none;
        padding: 8px;
    }

    /* Neutralize any :hover rules that would change visuals on touch */
    .card:hover .copy-icon,
    .copy-icon:hover {
        opacity: 0.95;
        color: var(--color-text-secondary);
    }

    /* Em vez de hover, touch usa active */
    .card .copy-icon:active {
        color: var(--color-accent-primary);
        opacity: 1;
    }
}

/* Contato */
.contact-links {
    width: 100%;
    justify-content: center;
    display: flex;
    gap: 14px;
}

.contact-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
    max-width: 180px;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    background: rgba(168, 85, 247, 0.08);
    color: var(--color-accent-light);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
    cursor: pointer;
    transition: all 0.3s ease;
}

.contact-link:hover {
    background: rgba(168, 85, 247, 0.15);
    color: var(--color-text-primary);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.report-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    width: 100%;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 8px;
    border: 1px solid rgba(168, 85, 247, 0.05);
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    background: rgba(168, 85, 247, 0.03);
    color: var(--color-accent-light);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
}

.report-link::before {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    content: '';
    height: 0;
    background: linear-gradient(135deg, var(--color-accent-primary), var(--color-accent-light));
    opacity: 0.05;
    transition: height 0.3s ease;
}

.report-link:hover {
    background: rgba(127, 29, 29, 0.4);
    border-color: var(--color-status-error-border);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(153, 27, 27, 0.25);
}

.report-link:hover::before {
    height: 100%;
}

.contact-link i,
.report-link i {
    font-size: 1rem;
    position: relative;
    z-index: 0;
}

.footer-meta {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 20px 28px;
    background: var(--color-background-secondary);
    flex-shrink: 0;
    overflow: visible;
}

.footer-meta::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 6px;
    background-repeat: repeat-x;
    background-size: 15px 8px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='8' viewBox='0 0 20 8'><path d='M0 4 Q5 0 10 4 T20 4' fill='none' stroke='%233b2a5b' stroke-width='1.5'/></svg>");
}

.footer-meta-text {
    margin: 0;
    color: var(--color-accent-light);
    letter-spacing: 0.5px;
    text-shadow: 0 1px 1px rgba(0,0,0,0.05);
    font-size: 0.68rem;
    line-height: 1.5;
    text-align: center;
    font-weight: 400;
}

.footer-meta-text a {
    color: inherit;
    text-decoration: none;
    font-weight: 500;
    position: relative;
    transition: all 0.3s ease;
}

.footer-meta-text a::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--color-accent-light);
    transition: width 0.3s ease;
}

.footer-meta-text a:hover::after {
    width: 100%;
}

/* Rodapé Fixo Original */
.tagline-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    display: block;
    width: 100%;
    padding: 16px 18px;
    background: var(--color-background-secondary);
    border-top: 1px solid var(--color-border-primary);
    color: var(--color-text-secondary);
    font-size: 0.8rem;
    font-weight: 400;
    line-height: 1.5;
    text-align: center;
}

@media (min-width: 769px) {
    .tagline-bar {
        left: 340px;
        width: calc(100% - 340px);
    }
}

.tagline-bar p {
    margin: 0;
}

.tagline-bar a {
    color: var(--color-accent-light);
    position: relative;
    text-decoration: none;
    transition: color 0.3s ease, background-color 0.3s ease;
    display: inline-block;
    padding: 0.05rem 0.2rem;
}

.tagline-bar a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background-color: rgba(168, 85, 247, 0.15);
    transition: height 0.3s ease;
}

.tagline-bar a:hover::after,
.tagline-bar a:focus-visible::after {
    height: 100%;
}

.tagline-bar a:hover {
    color: var(--color-text-primary);
}

.tagline-bar a:focus-visible {
    outline: 2px solid var(--color-accent-primary);
    outline-offset: 2px;
}

/* Accessibility: respect users who prefer reduced motion
   - Desativa animações, transições e comportamento de scroll suave
   - Evita transform/hover/active motion indesejada
   - Mantém estilos de foco acessíveis (outline, box-shadow) pra usabilidade
*/
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-delay: 0s !important;
        animation-iteration-count: 1 !important;
        animation-name: none !important;
        animation-play-state: paused !important;
        transition-duration: 0s !important;
        transition-delay: 0s !important;
        transition-property: none !important;
        scroll-behavior: auto !important;
        scroll-snap-type: none !important;
        will-change: auto !important;
    }

    /* Evita movimento por transform em interações (hover/focus/active) */
    *:hover,
    *:focus,
    *:active {
        transform: none !important;
    }

    /* Garantir que componentes conhecidos que usam keyframes/transitions sejam totalmente parados */
    .spinner,
    .credit-item::before,
    .credit-link-flowers .flower,
    .credit-link-flowers .petal {
        animation: none !important;
        transition: none !important;
    }
}