/*
 * Opkikker doneer-knop — zwevende ronde doneerknop rechtsonder.
 * Locatie in child theme (Impreza-child): css/opkikker-doneer-knop.css
 *
 * Gedrag: de knop "blobt" zachtjes als vloeistof, schuift na een paar
 * seconden grotendeels de rechterrand in (.is-min) — er blijft dan een
 * kier met een hartje zichtbaar — en komt bij hover, focus of een tik
 * weer tevoorschijn. Zie assets/js/opkikker-doneer-knop.js.
 *
 * Kleuren:
 *   rust  : Opkikkerrood #e62d20, tekst Crème #fff8e8
 *   hover : Boterbloemgeel #ffd441, tekst donkergroen #052218
 */

.opk-doneer {
    --opk-rood: #e62d20;
    --opk-geel: #ffd441;
    --opk-creme: #fff8e8;
    --opk-donker: #052218;
    --opk-rand: 24px;   /* afstand tot de schermrand */
    --opk-kier: 36px;   /* zichtbare kier (met hartje) in geminimaliseerde stand */
    --opk-icoon: 22px;  /* grootte van het hartje */
    position: fixed;
    right: var(--opk-rand);
    bottom: calc(var(--opk-rand) + env(safe-area-inset-bottom, 0px));
    z-index: 99999;
    /* Verende (elastische) beweging, voelt vloeibaar aan */
    transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Geminimaliseerd: een kier met hartje blijft aan de rechterrand zichtbaar.
   De opk-aandacht-animatie (op de aparte translate-property, botst niet met
   de transform) geeft de kier af en toe een duwtje naar binnen. */
.opk-doneer.is-min {
    transform: translateX(calc(100% + var(--opk-rand) - var(--opk-kier)));
    animation: opk-aandacht 8s ease-in-out 3s infinite;
}

/* Volledig buiten beeld: startstand vóór de intro bij een eerste bezoek */
.opk-doneer.is-uit {
    transform: translateX(calc(100% + var(--opk-rand) + 12px));
}

/* JS zet dit kort om een beginstand zonder schuif-animatie neer te zetten */
.opk-doneer.geen-anim {
    transition: none;
}

.opk-doneer__knop {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 92px;
    height: 92px;
    background: var(--opk-rood);
    color: var(--opk-creme);
    font-weight: 700;
    font-size: 18px;
    line-height: 1;
    text-decoration: none;
    border-radius: 46% 54% 52% 48% / 52% 46% 54% 48%;
    box-shadow: 0 6px 18px rgba(16, 16, 15, 0.28);
    animation: opk-blob 7s ease-in-out infinite;
    transition:
        background-color 0.35s ease,
        color 0.35s ease,
        transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.opk-doneer:hover .opk-doneer__knop,
.opk-doneer:focus-within .opk-doneer__knop {
    background: var(--opk-geel);
    color: var(--opk-donker);
    transform: scale(1.08);
    text-decoration: none;
}

.opk-doneer__knop:focus-visible {
    outline: 3px solid var(--opk-donker);
    outline-offset: 3px;
}

.opk-doneer__tekst {
    transition: opacity 0.25s ease;
}

/* Hartje: onzichtbaar in rust, zichtbaar in de kier als de knop is ingeschoven.
   Gecentreerd in het zichtbare deel (de linkerkant van de knop). */
.opk-doneer__icoon {
    position: absolute;
    top: 50%;
    left: calc((var(--opk-kier) - var(--opk-icoon)) / 2);
    width: var(--opk-icoon);
    height: var(--opk-icoon);
    transform: translateY(-50%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.opk-doneer.is-min .opk-doneer__tekst {
    opacity: 0;
}

.opk-doneer.is-min .opk-doneer__icoon {
    opacity: 1;
    /* pas verschijnen als de knop klaar is met inschuiven */
    transition-delay: 0.4s;
    animation: opk-hartslag 2.2s ease-in-out 1s infinite;
}

/* Vloeibare squash & stretch bij het in- en uitschuiven (JS zet .is-wobble) */
.opk-doneer__knop.is-wobble {
    animation:
        opk-blob 7s ease-in-out infinite,
        opk-squash 0.7s ease;
}

/* Organische borderradius-morph: de "vloeistof" in ruststand */
@keyframes opk-blob {
    0%, 100% { border-radius: 46% 54% 52% 48% / 52% 46% 54% 48%; }
    25%      { border-radius: 55% 45% 47% 53% / 47% 55% 45% 53%; }
    50%      { border-radius: 48% 52% 56% 44% / 55% 48% 52% 45%; }
    75%      { border-radius: 53% 47% 45% 55% / 46% 52% 48% 54%; }
}

@keyframes opk-squash {
    0%   { transform: scale(1, 1); }
    30%  { transform: scale(1.18, 0.84); }
    55%  { transform: scale(0.9, 1.1); }
    75%  { transform: scale(1.06, 0.95); }
    100% { transform: scale(1, 1); }
}

/* Dichtgeklapt: af en toe een klein duwtje naar binnen voor wat aandacht */
@keyframes opk-aandacht {
    0%, 86%, 100% { translate: 0 0; }
    89%           { translate: -10px 0; }
    92%           { translate: 0 0; }
    95%           { translate: -6px 0; }
    98%           { translate: 0 0; }
}

/* Subtiele hartslag zodat de kier de aandacht trekt */
@keyframes opk-hartslag {
    0%, 100% { transform: translateY(-50%) scale(1); }
    12%      { transform: translateY(-50%) scale(1.25); }
    24%      { transform: translateY(-50%) scale(1); }
    36%      { transform: translateY(-50%) scale(1.18); }
    48%      { transform: translateY(-50%) scale(1); }
}

/* Mobiel: fors formaat zodat hij goed opvalt, met een ruimere kier */
@media (max-width: 782px) {
    .opk-doneer {
        --opk-rand: 16px;
        --opk-kier: 42px;
        --opk-icoon: 26px;
    }

    .opk-doneer__knop {
        width: 84px;
        height: 84px;
        font-size: 16px;
        box-shadow: 0 5px 15px rgba(16, 16, 15, 0.28);
    }
}

@media (prefers-reduced-motion: reduce) {
    .opk-doneer {
        transition: transform 0.3s ease;
    }

    .opk-doneer.is-min {
        animation: none;
    }

    .opk-doneer__knop,
    .opk-doneer__knop.is-wobble,
    .opk-doneer.is-min .opk-doneer__icoon {
        animation: none;
        transition: background-color 0.35s ease, color 0.35s ease, opacity 0.25s ease;
    }
}