/* ============================================================
   ADVANA — rust, balans en hogere bewustwording.
   (Licht arrogant. Dat is niet de bedoeling, dat is de essentie.)
   ============================================================ */

@font-face {
    font-family: 'Jost';
    src: url('/fonts/advana/jost-var.woff2') format('woff2');
    font-weight: 200 700;
    font-display: swap;
}

.av-page {
    font-family: 'Jost', system-ui, sans-serif;
    --av-sage: #A8B89A;
    --av-moss: #6B7A5E;
    --av-olive: #8A9678;
    --av-cream: #F4F1E8;
    --av-sand: #E7E0D2;
    --av-birch: #EFE9DC;
    --av-charcoal: #33342E;
    --av-gold: #B9A063;
    --av-ease: cubic-bezier(.22, .6, .28, 1);
    letter-spacing: .01em;
    font-weight: 300;
}

/* ---- reveals: traag en bewust, zelfde failsafe-contract als de rest ---- */
.av-reveal { opacity: 0; transform: translateY(26px); transition: opacity 1s var(--av-ease), transform 1.1s var(--av-ease); }
.av-reveal.av-in { opacity: 1; transform: none; }
@keyframes av-failsafe { to { opacity: 1; transform: none; } }
.av-reveal:not(.av-armed) { animation: av-failsafe .8s var(--av-ease) 2.8s forwards; }

/* ---- typografie: dun, ruim, bewust ---- */
.av-display { font-weight: 250; letter-spacing: .06em; line-height: 1.08; color: var(--av-charcoal); }
.av-eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: .45em; font-weight: 400; color: var(--av-moss); }
.av-quote { font-weight: 250; letter-spacing: .04em; }

/* ---- kaarten: linnen en berkenhout, nooit een harde schaduw ---- */
.av-card {
    background: #FBF9F3;
    border: 1px solid rgba(107, 122, 94, .18);
    transition: border-color .5s var(--av-ease), transform .5s var(--av-ease), box-shadow .5s var(--av-ease);
}
.av-card:hover { border-color: rgba(107, 122, 94, .45); transform: translateY(-3px); box-shadow: 0 18px 40px -24px rgba(51, 52, 46, .35); }

/* subtiel goud: één haarlijn, meer heeft een bewust merk niet nodig */
.av-gold-line { width: 44px; height: 1px; background: var(--av-gold); }

/* ---- knoppen: ademen bij hover ---- */
.av-btn { transition: background-color .4s var(--av-ease), color .4s var(--av-ease), letter-spacing .4s var(--av-ease), border-color .4s var(--av-ease); letter-spacing: .28em; }
.av-btn:hover { letter-spacing: .36em; }

/* ---- slider ---- */
.av-slide-track { display: flex; transition: transform .9s var(--av-ease); }
.av-thumb { outline: 1px solid transparent; outline-offset: 3px; transition: outline-color .4s, opacity .4s; }
.av-thumb.av-active { outline-color: var(--av-moss); opacity: 1 !important; }

/* ---- de zwevende enso-ring in de hero ---- */
@keyframes av-breathe { 0%, 100% { transform: scale(1); opacity: .5; } 50% { transform: scale(1.06); opacity: .8; } }
.av-breathe { animation: av-breathe 7s ease-in-out infinite; }

/* mist over de hero, want mist is gratis diepgang */
.av-mist { background: linear-gradient(180deg, rgba(244, 241, 232, 0) 40%, var(--av-cream) 100%); }

/* gecapte canvas zoals de andere brandsites */
.av-page { max-width: 1680px; margin-inline: auto; }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
    .av-reveal { transition-duration: .01s; }
    .av-breathe { animation: none; }
}