/* Slide-in reveal animations for sections */

:root {
  --reveal-distance: 60px;
  --reveal-duration: 800ms;
  --reveal-ease: cubic-bezier(.22, 1, .36, 1); /* snappier ease-out */
  --reveal-scale: 1;
  --reveal-blur: 0px;
  --hover-duration: 320ms;
  --hover-ease: cubic-bezier(.28, .84, .42, 1);
  --hover-glow: 0 22px 45px rgba(211, 171, 103, 0.45);
  --hover-outline: rgba(211, 171, 103, 0.55);
}

/*
  Elements marked with [data-reveal] start slightly translated and transparent,
  then transition to their natural position once they receive .is-visible.
  JS adds [data-reveal] only when scripting is available so there's no FOIT.
*/
[data-reveal] {
  opacity: 0;
  transform: translateY(var(--reveal-distance)) scale(var(--reveal-scale));
  filter: blur(var(--reveal-blur));
  transition: transform var(--reveal-duration) var(--reveal-ease),
              opacity var(--reveal-duration) var(--reveal-ease),
              filter var(--reveal-duration) var(--reveal-ease);
  transition-delay: 0ms;
  will-change: transform, opacity, filter;
}

[data-reveal].is-visible {
  opacity: 1;
  transform: none;
  filter: none;
  transition-delay: var(--reveal-delay, 0ms);
}

/* Directional variants (optional) */
[data-reveal="up"] { transform: translateY(var(--reveal-distance)) scale(var(--reveal-scale)); }
[data-reveal="down"] { transform: translateY(calc(var(--reveal-distance) * -1)) scale(var(--reveal-scale)); }
[data-reveal="left"] { transform: translateX(var(--reveal-distance)) scale(var(--reveal-scale)); }
[data-reveal="right"] { transform: translateX(calc(var(--reveal-distance) * -1)) scale(var(--reveal-scale)); }
[data-reveal="fade"] {
  opacity: 0;
  transform: scale(var(--reveal-scale));
  filter: blur(var(--reveal-blur));
}

[data-reveal="fade"].is-visible {
  opacity: 1;
  transform: none;
  filter: none;
  transition: opacity var(--reveal-duration) var(--reveal-ease),
              transform var(--reveal-duration) var(--reveal-ease),
              filter var(--reveal-duration) var(--reveal-ease);
  transition-delay: var(--reveal-delay, 0ms);
}

/* Optional per-element delay via CSS variable (applied once element reveals) */
/* Optional per-element delay via CSS variable */

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* Simple fade-in utility for hero/frontpage */
.fade-in {
  opacity: 0;
  animation: kde-fade-in 900ms ease-out forwards;
}

@keyframes kde-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes kde-glint {
  0% {
    transform: translateX(-120%) rotate(8deg);
    opacity: 0;
  }
  45% {
    opacity: 0.6;
  }
  100% {
    transform: translateX(140%) rotate(8deg);
    opacity: 0;
  }
}

@keyframes kde-float {
  0%,
  100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -4px, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .fade-in {
    opacity: 1 !important;
    animation: none !important;
  }
}