/* ==========================================================================
   Het Neurokompas V2 — animations.css
   Subtiele premium animaties, transitions en reduced-motion ondersteuning
   ========================================================================== */

:root {
  --ease-out-soft: cubic-bezier(.22, .61, .36, 1);
  --ease-premium: cubic-bezier(.16, 1, .3, 1);
  --ease-standard: cubic-bezier(.4, 0, .2, 1);
  --duration-fast: 160ms;
  --duration-base: 240ms;
  --duration-slow: 520ms;
}

/* --------------------------------------------------------------------------
   Algemene reveal helpers
   -------------------------------------------------------------------------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity var(--duration-slow) var(--ease-premium),
    transform var(--duration-slow) var(--ease-premium);
}

[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

[data-reveal="fade"] {
  transform: none;
}

[data-reveal="left"] {
  transform: translateX(-18px);
}

[data-reveal="right"] {
  transform: translateX(18px);
}

[data-reveal="scale"] {
  transform: scale(.975);
}

[data-reveal="left"].is-visible,
[data-reveal="right"].is-visible {
  transform: translateX(0);
}

[data-reveal="scale"].is-visible {
  transform: scale(1);
}

/* --------------------------------------------------------------------------
   Pagina/step overgang
   -------------------------------------------------------------------------- */

.step-panel {
  animation: stepEnter 520ms var(--ease-premium) both;
}

.step-panel.is-leaving {
  animation: stepLeave 220ms var(--ease-standard) both;
}

@keyframes stepEnter {
  from {
    opacity: 0;
    transform: translateY(16px) scale(.995);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes stepLeave {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-8px);
  }
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero__eyebrow,
.hero__title,
.hero__intro,
.hero__actions,
.hero__visual {
  animation: heroRise 720ms var(--ease-premium) both;
}

.hero__eyebrow {
  animation-delay: 40ms;
}

.hero__title {
  animation-delay: 100ms;
}

.hero__intro {
  animation-delay: 165ms;
}

.hero__actions {
  animation-delay: 235ms;
}

.hero__visual {
  animation-delay: 160ms;
}

@keyframes heroRise {
  from {
    opacity: 0;
    transform: translateY(22px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --------------------------------------------------------------------------
   Historisch kompas
   -------------------------------------------------------------------------- */

.compass-visual {
  transform-origin: center;
  animation: compassFloat 8s ease-in-out infinite;
}

.compass-visual::after {
  animation: compassGlow 5.6s ease-in-out infinite;
}

@keyframes compassFloat {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-6px) rotate(.35deg);
  }
}

@keyframes compassGlow {
  0%,
  100% {
    opacity: .32;
    transform: scale(.98);
  }
  50% {
    opacity: .52;
    transform: scale(1.025);
  }
}

/* --------------------------------------------------------------------------
   Kompasroute / voortgang
   -------------------------------------------------------------------------- */

.compass-route__line-fill {
  transition: width 620ms var(--ease-premium);
}

.compass-route__node {
  transition:
    transform var(--duration-base) var(--ease-premium),
    border-color var(--duration-base) ease,
    background var(--duration-base) ease,
    color var(--duration-base) ease,
    box-shadow var(--duration-base) ease;
}

.compass-route__node.is-active {
  animation: routePulse 1.8s ease-in-out infinite;
}

.compass-route__node.is-complete {
  animation: routeComplete 420ms var(--ease-premium) both;
}

@keyframes routePulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(168, 111, 70, .16);
  }
  50% {
    box-shadow: 0 0 0 7px rgba(168, 111, 70, 0);
  }
}

@keyframes routeComplete {
  0% {
    transform: scale(.88);
  }
  65% {
    transform: scale(1.08);
  }
  100% {
    transform: scale(1);
  }
}

/* --------------------------------------------------------------------------
   Kaart staggering
   -------------------------------------------------------------------------- */

.choice-grid > *,
.process-grid > *,
.result__summary-grid > * {
  animation: cardRise 520ms var(--ease-premium) both;
}

.choice-grid > *:nth-child(1),
.process-grid > *:nth-child(1),
.result__summary-grid > *:nth-child(1) {
  animation-delay: 40ms;
}

.choice-grid > *:nth-child(2),
.process-grid > *:nth-child(2),
.result__summary-grid > *:nth-child(2) {
  animation-delay: 85ms;
}

.choice-grid > *:nth-child(3),
.process-grid > *:nth-child(3),
.result__summary-grid > *:nth-child(3) {
  animation-delay: 130ms;
}

.choice-grid > *:nth-child(4),
.process-grid > *:nth-child(4),
.result__summary-grid > *:nth-child(4) {
  animation-delay: 175ms;
}

.choice-grid > *:nth-child(5) {
  animation-delay: 220ms;
}

.choice-grid > *:nth-child(6) {
  animation-delay: 265ms;
}

@keyframes cardRise {
  from {
    opacity: 0;
    transform: translateY(16px) scale(.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* --------------------------------------------------------------------------
   Selecties
   -------------------------------------------------------------------------- */

.choice-card.is-selected,
.choice-card[aria-checked="true"],
.goal-card.is-selected,
.goal-card[aria-checked="true"] {
  animation: selectCard 280ms var(--ease-premium);
}

@keyframes selectCard {
  0% {
    transform: scale(1);
  }
  45% {
    transform: scale(.988);
  }
  100% {
    transform: scale(1);
  }
}

.question-card__input:checked + .question-card__box {
  animation: selectQuestion 240ms var(--ease-premium);
}

@keyframes selectQuestion {
  from {
    transform: scale(.994);
  }
  to {
    transform: scale(1);
  }
}

/* --------------------------------------------------------------------------
   Knoppen en links
   -------------------------------------------------------------------------- */

.button,
button,
.nav-link,
.direction-card__link,
.report-card__link {
  transition:
    transform var(--duration-fast) var(--ease-out-soft),
    box-shadow var(--duration-base) ease,
    background-color var(--duration-base) ease,
    color var(--duration-base) ease,
    border-color var(--duration-base) ease,
    opacity var(--duration-base) ease;
}

.button:hover,
button:not(:disabled):hover {
  transform: translateY(-2px);
}

.button:active,
button:not(:disabled):active {
  transform: translateY(0) scale(.985);
}

.button svg,
.direction-card__link svg,
.report-card__link svg {
  transition: transform var(--duration-base) var(--ease-premium);
}

.button:hover svg,
.direction-card__link:hover svg,
.report-card__link:hover svg {
  transform: translateX(3px);
}

/* --------------------------------------------------------------------------
   Resultaatrapport
   -------------------------------------------------------------------------- */

.result-hero {
  animation: reportReveal 720ms var(--ease-premium) both;
}

.report-card,
.direction-card {
  animation: reportCardReveal 560ms var(--ease-premium) both;
}

.report-card:nth-child(2),
.direction-card:nth-child(2) {
  animation-delay: 70ms;
}

.report-card:nth-child(3),
.direction-card:nth-child(3) {
  animation-delay: 120ms;
}

.report-card:nth-child(4),
.direction-card:nth-child(4) {
  animation-delay: 170ms;
}

@keyframes reportReveal {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes reportCardReveal {
  from {
    opacity: 0;
    transform: translateY(14px) scale(.992);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.score-meter__fill,
.theme-meter__fill {
  transform-origin: left center;
  animation: meterGrow 760ms var(--ease-premium) both;
}

@keyframes meterGrow {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

/* --------------------------------------------------------------------------
   Achtergrond subtiel laten leven
   -------------------------------------------------------------------------- */

.page-background::before {
  animation: backgroundDrift 22s ease-in-out infinite alternate;
}

@keyframes backgroundDrift {
  from {
    transform: scale(1.015) translate3d(0, 0, 0);
  }
  to {
    transform: scale(1.045) translate3d(-.4%, -.25%, 0);
  }
}

/* --------------------------------------------------------------------------
   Loading helper
   -------------------------------------------------------------------------- */

.is-loading {
  position: relative;
  pointer-events: none;
}

.is-loading::after {
  content: "";
  width: 18px;
  height: 18px;
  margin-left: 10px;
  display: inline-block;
  vertical-align: middle;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spinner .7s linear infinite;
}

@keyframes spinner {
  to {
    transform: rotate(360deg);
  }
}

/* --------------------------------------------------------------------------
   Toast / feedback
   -------------------------------------------------------------------------- */

.toast {
  animation: toastIn 420ms var(--ease-premium) both;
}

.toast.is-hiding {
  animation: toastOut 220ms var(--ease-standard) both;
}

@keyframes toastIn {
  from {
    opacity: 0;
    transform: translateY(12px) scale(.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes toastOut {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(7px);
  }
}

/* --------------------------------------------------------------------------
   Toegankelijkheid
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    transition-delay: 0ms !important;
  }

  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }

  .compass-visual {
    transform: none !important;
  }
}