@charset "utf-8";

/* =========================================
   HERSTELCIRKEL
========================================= */

.recovery-nav {
    --recovery-navy: var(--navy, #102f4d);
    --recovery-ivory: var(--ivory, #fffdf8);
    --recovery-gold: var(--gold, #d0a14c);
    --recovery-sand: var(--sand, #e8e2d8);

    position: relative;
    z-index: 1000;
}


/* =========================================
   ACHTERGROND
========================================= */

.recovery-nav__backdrop {
    position: fixed;
    inset: 0;
    z-index: 1000;

    width: 100%;
    height: 100%;

    padding: 0;
    border: 0;

    background:
        linear-gradient(
            180deg,
            rgba(8, 25, 41, 0.42),
            rgba(8, 25, 41, 0.76)
        );

    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        opacity 400ms ease,
        visibility 400ms ease;
}

.recovery-nav.is-open .recovery-nav__backdrop,
.recovery-nav.is-list-open .recovery-nav__backdrop {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}


/* =========================================
   CIRKEL
========================================= */

.recovery-circle {
    position: fixed;
    right: 1rem;
    bottom: calc(1rem + env(safe-area-inset-bottom));
    z-index: 1001;

    width: 4.4rem;
    height: 4.4rem;

    overflow: hidden;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 50% 42%,
            rgba(255, 255, 255, 0.98) 0%,
            var(--recovery-ivory) 54%,
            var(--recovery-sand) 100%
        );

    box-shadow:
        0 1.5rem 4rem rgba(7, 25, 41, 0.28),
        inset 0 0 0 1px rgba(208, 161, 76, 0.26);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: scale(0.08);

    transform-origin:
        calc(100% - 2.2rem)
        calc(100% - 2.2rem);

    transition:
        width 650ms cubic-bezier(0.22, 1, 0.36, 1),
        height 650ms cubic-bezier(0.22, 1, 0.36, 1),
        right 650ms cubic-bezier(0.22, 1, 0.36, 1),
        bottom 650ms cubic-bezier(0.22, 1, 0.36, 1),
        opacity 180ms ease,
        visibility 650ms ease,
        transform 650ms cubic-bezier(0.22, 1, 0.36, 1);
}

.recovery-nav.is-open .recovery-circle {
    right: 50%;
    bottom: 50%;

    width: min(94vw, 32rem);
    height: min(94vw, 32rem);

    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transform:
        translate(50%, 50%)
        scale(1);
}

.recovery-circle__inner {
    position: relative;

    width: 100%;
    height: 100%;

    border-radius: inherit;
}

.recovery-circle__inner::before,
.recovery-circle__inner::after {
    content: "";

    position: absolute;
    left: 50%;
    top: 50%;

    border-radius: 50%;

    pointer-events: none;

    transform: translate(-50%, -50%);
}

.recovery-circle__inner::before {
    width: 75%;
    height: 75%;

    border: 1px solid rgba(208, 161, 76, 0.25);
}

.recovery-circle__inner::after {
    width: 48%;
    height: 48%;

    border: 1px solid rgba(16, 47, 77, 0.08);
}


/* =========================================
   MIDDENLOGO
========================================= */

.recovery-circle__center {
    position: absolute;
    left: 50%;
    top: 51.5%;
    z-index: 4;

    display: grid;
    place-items: center;

    width: clamp(8.25rem, 38vw, 9.5rem);
    height: clamp(8.25rem, 38vw, 9.5rem);

    margin: 0;
    padding: 0;

    overflow: hidden;

    border-radius: 50%;

    transform: translate(-50%, -50%);
}

.recovery-circle__logo {
    display: block;

    width: 100% !important;
    height: 100% !important;

    max-width: none !important;
    max-height: none !important;

    margin: 0;
    padding: 0;

    object-fit: cover;
    object-position: center center;

    border-radius: 50%;

    box-shadow:
        0 0.65rem 1.6rem rgba(16, 47, 77, 0.18);
}


/* =========================================
   MENU-ITEMS
========================================= */

.recovery-circle__item {
    position: absolute;
    z-index: 3;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    width: 6.6rem;
    min-height: 5rem;

    color: var(--recovery-navy);

    text-align: center;
    text-decoration: none;

    opacity: 0;

    transform:
        translate(-50%, -50%)
        scale(0.75);

    transition:
        opacity 300ms ease,
        transform 450ms cubic-bezier(0.22, 1, 0.36, 1);
}

.recovery-circle__item:focus-visible {
    outline: 2px solid var(--recovery-gold);
    outline-offset: 0.3rem;

    border-radius: 1rem;
}

.recovery-circle__icon {
    display: grid;
    place-items: center;

    width: 2.5rem;
    height: 2.5rem;

    margin-bottom: 0.35rem;

    color: var(--recovery-gold);

    border: 1px solid rgba(208, 161, 76, 0.34);
    border-radius: 50%;

    background: rgba(255, 253, 248, 0.72);

    box-shadow:
        0 0.45rem 1rem rgba(16, 47, 77, 0.08);
}

.recovery-circle__icon svg {
    width: 1.15rem;
    height: 1.15rem;

    stroke-width: 1.7;
}

.recovery-circle__label {
    display: block;

    font-size: 0.76rem;
    font-weight: 750;
    line-height: 1.1;
}

.recovery-circle__description {
    display: block;

    max-width: 6rem;
    margin-top: 0.18rem;

    color: rgba(16, 47, 77, 0.6);

    font-size: 0.58rem;
    line-height: 1.2;
}


/* Posities */

.recovery-circle__item--1 {
    left: 50%;
    top: 15%;
}

.recovery-circle__item--2 {
    left: 81%;
    top: 34%;
}

.recovery-circle__item--3 {
    left: 81%;
    top: 68%;
}

.recovery-circle__item--4 {
    left: 50%;
    top: 86%;
}

.recovery-circle__item--5 {
    left: 19%;
    top: 68%;
}

.recovery-circle__item--6 {
    left: 19%;
    top: 34%;
}


/* Items tonen */

.recovery-nav.is-open .recovery-circle__item {
    opacity: 1;

    transform:
        translate(-50%, -50%)
        scale(1);
}

.recovery-nav.is-open .recovery-circle__item--1 {
    transition-delay: 170ms;
}

.recovery-nav.is-open .recovery-circle__item--2 {
    transition-delay: 220ms;
}

.recovery-nav.is-open .recovery-circle__item--3 {
    transition-delay: 270ms;
}

.recovery-nav.is-open .recovery-circle__item--4 {
    transition-delay: 320ms;
}

.recovery-nav.is-open .recovery-circle__item--5 {
    transition-delay: 370ms;
}

.recovery-nav.is-open .recovery-circle__item--6 {
    transition-delay: 420ms;
}


/* =========================================
   ALLE PAGINA'S LIJST
========================================= */

.recovery-list {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 1001;

    max-height: calc(100dvh - 2rem);

    padding:
        1rem
        1rem
        calc(1rem + env(safe-area-inset-bottom));

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: translateY(2rem);

    transition:
        opacity 320ms ease,
        visibility 320ms ease,
        transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.recovery-nav.is-list-open .recovery-list {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transform: translateY(0);
}

.recovery-list__panel {
    width: 100%;
    max-height: calc(100dvh - 2rem);

    overflow-y: auto;

    padding: 1.1rem;

    border: 1px solid rgba(208, 161, 76, 0.28);
    border-radius: 1.6rem;

    background:
        linear-gradient(
            180deg,
            rgba(255, 253, 248, 0.98),
            rgba(247, 245, 241, 0.98)
        );

    box-shadow:
        0 1.5rem 4rem rgba(7, 25, 41, 0.3);
}

.recovery-list__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;

    margin-bottom: 1rem;
}

.recovery-list__eyebrow {
    margin: 0 0 0.25rem;

    color: var(--recovery-gold);

    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.recovery-list__title {
    margin: 0;

    color: var(--recovery-navy);

    font-size: 1.35rem;
    line-height: 1.1;
}

.recovery-list__close {
    display: grid;
    place-items: center;

    flex: 0 0 auto;

    width: 2.4rem;
    height: 2.4rem;

    padding: 0;

    color: var(--recovery-navy);

    border: 1px solid rgba(16, 47, 77, 0.12);
    border-radius: 999px;

    background: rgba(255, 255, 255, 0.62);
}

.recovery-list__close svg {
    width: 1.1rem;
    height: 1.1rem;
}

.recovery-list__groups {
    display: grid;
    gap: 0.75rem;
}

.recovery-list__group {
    padding: 0.8rem;

    border: 1px solid rgba(16, 47, 77, 0.08);
    border-radius: 1.1rem;

    background: rgba(255, 255, 255, 0.52);
}

.recovery-list__main {
    display: flex;
    align-items: center;
    justify-content: space-between;

    color: var(--recovery-navy);

    font-size: 0.98rem;
    font-weight: 800;
    line-height: 1.2;
    text-decoration: none;
}

.recovery-list__main::after {
    content: "→";

    color: var(--recovery-gold);

    font-weight: 800;
}

.recovery-list__sub {
    display: block;

    margin-top: 0.48rem;
    padding-left: 0.75rem;

    color: rgba(16, 47, 77, 0.72);

    font-size: 0.84rem;
    line-height: 1.25;
    text-decoration: none;
}

.recovery-list__sub::before {
    content: "— ";
    color: var(--recovery-gold);
}


/* =========================================
   VASTE KNOP
========================================= */

.recovery-trigger {
    position: fixed;
    right: 1rem;
    bottom:
    calc(
        var(--recovery-footer-offset, 1rem)
        + env(safe-area-inset-bottom)
    );
    z-index: 1002;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    width: 4.4rem;
    height: 4.4rem;

    padding: 0;

    color: var(--recovery-ivory);

    border: 0;
    border-radius: 50%;

    background:
        radial-gradient(
            circle at 35% 25%,
            #214b70 0%,
            var(--recovery-navy) 58%,
            #071b2c 100%
        );

    box-shadow:
        0 0.8rem 1.8rem rgba(7, 25, 41, 0.28),
        inset 0 0 0 1px rgba(255, 255, 255, 0.08);

    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    cursor: pointer;

    transform:
        translateY(0)
        scale(1);

    transition:
        width 360ms cubic-bezier(0.22, 1, 0.36, 1),
        border-radius 360ms cubic-bezier(0.22, 1, 0.36, 1),
        opacity 300ms ease,
        visibility 300ms ease,
        transform 350ms cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 350ms ease;
}

.recovery-trigger:active {
    transform: scale(0.94);
}

.recovery-trigger:focus-visible {
    outline: 3px solid var(--recovery-gold);
    outline-offset: 0.25rem;
}

.recovery-trigger__rings {
    position: absolute;
    inset: 0;

    border-radius: inherit;

    pointer-events: none;
}

.recovery-trigger__ring {
    position: absolute;

    border-radius: inherit;

    transition:
        transform 600ms cubic-bezier(0.22, 1, 0.36, 1),
        opacity 300ms ease;
}

.recovery-trigger__ring--outer {
    inset: 0.22rem;

    border: 1px solid rgba(208, 161, 76, 0.9);
}

.recovery-trigger__ring--inner {
    inset: 0.5rem;

    border: 1px solid rgba(255, 253, 248, 0.18);
}

.recovery-trigger__icon {
    position: relative;
    z-index: 2;

    display: grid;
    place-items: center;

    height: 1.3rem;
}

.recovery-trigger__icon svg {
    width: 1.25rem;
    height: 1.25rem;

    stroke-width: 1.8;

    transition:
        transform 400ms cubic-bezier(0.22, 1, 0.36, 1);
}

.recovery-trigger__text {
    position: relative;
    z-index: 2;

    margin-top: 0.15rem;

    font-size: 0.55rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.13em;
    text-transform: uppercase;

    opacity: 1;

    transition:
        opacity 250ms ease;
}

/* Open toestand */

.recovery-nav.is-open .recovery-trigger {
    transform: rotate(90deg);
}

.recovery-nav.is-open .recovery-trigger__ring--outer {
    transform:
        rotate(180deg)
        scale(0.92);
}

.recovery-nav.is-open .recovery-trigger__ring--inner {
    transform:
        rotate(-180deg)
        scale(1.08);
}

.recovery-nav.is-open .recovery-trigger__text {
    opacity: 0;
}

.recovery-nav.is-open .recovery-trigger__icon svg {
    transform: rotate(45deg);
}


/* Footer-modus: Alle pagina's */

.recovery-nav.is-footer-mode .recovery-trigger {
    right: 50%;

    width: min(14rem, calc(100vw - 2rem));
    height: 3.6rem;

    border-radius: 999px;

    transform:
        translateX(50%)
        translateY(0)
        scale(1);
}

.recovery-nav.is-footer-mode .recovery-trigger__rings {
    opacity: 0;
}

/* Start verborgen */

.recovery-nav.is-start-hidden:not(.is-footer-mode) .recovery-trigger {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform:
        translateY(1.5rem)
        scale(0.85);
}


/* Body wanneer menu openstaat */

body.recovery-menu-open {
    overflow: hidden;
    touch-action: none;
}


/* Minder animatie */

@media (prefers-reduced-motion: reduce) {

    .recovery-circle,
    .recovery-circle__item,
    .recovery-list,
    .recovery-trigger,
    .recovery-trigger__ring,
    .recovery-trigger__icon svg,
    .recovery-trigger__text,
    .recovery-nav__backdrop {
        transition-duration: 1ms !important;
        transition-delay: 0ms !important;
    }
}

/* =========================================
   MENUKNOP VERBERGEN ALS LIJST OPEN IS
========================================= */

.recovery-nav.is-list-open .recovery-trigger {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform:
        translateX(50%)
        translateY(1.5rem)
        scale(0.85);
}