/* Basisstijlen die niet met Tailwind-utilities alleen gaan: lettertype, focus,
   het watermerk, en de kleine dingen (scrollbar, reduced motion). */

@font-face { font-family: 'Inter'; font-weight: 400; font-style: normal; font-display: swap; src: url('/fonts/inter-400.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 700; font-style: normal; font-display: swap; src: url('/fonts/inter-700.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 900; font-style: normal; font-display: swap; src: url('/fonts/inter-900.woff2') format('woff2'); }

* { box-sizing: border-box; }
html, body, #root { height: 100%; }
body { margin: 0; background: #f6efe6; position: relative; overflow-x: hidden; }

/* Zachte accentgloed rechtsonder op het canvas (Deel B, LAYOUT). */
body::before {
	content: '';
	position: fixed; right: -10vw; bottom: -10vw; width: 60vw; height: 60vw;
	background: radial-gradient(circle, rgba(231, 116, 53, 0.06) 0%, rgba(231, 116, 53, 0) 70%);
	pointer-events: none; z-index: 0;
}

.gramo-watermark {
	position: fixed; right: 24px; bottom: 16px; width: 220px; height: 220px;
	pointer-events: none; z-index: 0; opacity: 1;
}
@media (max-width: 767px) { .gramo-watermark { width: 140px; height: 140px; } }

:focus-visible { outline: 2px solid #192b49; outline-offset: 2px; border-radius: 8px; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #e9decf; border-radius: 999px; }
::-webkit-scrollbar-track { background: transparent; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

.stagger-1 { animation-delay: 0ms; } .stagger-2 { animation-delay: 90ms; }
.stagger-3 { animation-delay: 180ms; } .stagger-4 { animation-delay: 270ms; }
.stagger-5 { animation-delay: 360ms; } .stagger-6 { animation-delay: 450ms; }
.stagger-7 { animation-delay: 540ms; } .stagger-8 { animation-delay: 630ms; }

.pulse-block { background: #f6efe6; border-radius: 12px; animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }

.panel-enter { animation: panelIn 380ms cubic-bezier(.16,1,.3,1) both; }
@keyframes panelIn { from { transform: translateX(24px); opacity: 0.6; } to { transform: translateX(0); opacity: 1; } }

.modal-enter { animation: modalIn 320ms cubic-bezier(.16,1,.3,1) both; }
@keyframes modalIn { from { transform: scale(0.97) translateY(8px); opacity: 0; } to { transform: scale(1) translateY(0); opacity: 1; } }