/* ============================================================
   Atelier Linnea — Utilities & motion
   Reveal-on-scroll, keyframes, tiny helpers.
   ============================================================ */

/* ---- Reveal on scroll (elements start hidden only when JS is present) ---- */
html.js .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity var(--dur-f) var(--ease), transform var(--dur-f) var(--ease);
  transition-delay: var(--rd, 0s);
  will-change: opacity, transform;
}

html.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

html.js .reveal-scale {
  opacity: 0;
  transform: scale(0.96);
  transition: opacity var(--dur-f) var(--ease), transform var(--dur-f) var(--ease);
  transition-delay: var(--rd, 0s);
}

html.js .reveal-scale.is-visible { opacity: 1; transform: none; }

/* ---- Keyframes ---- */
@keyframes float-y {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

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

@keyframes slide-up {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: none; }
}

/* Hero entrance (staggered via --rd) */
.hero .animate-in {
  opacity: 0;
  animation: slide-up 1s var(--ease-2) forwards;
  animation-delay: var(--rd, 0s);
}

/* ---- Helpers ---- */
.u-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.u-center { text-align: center; justify-items: center; }
.u-mt-sm { margin-top: 1.6rem; }
.u-mt-md { margin-top: clamp(2.4rem, 5vw, 4rem); }
.u-mt-lg { margin-top: clamp(3.5rem, 7vw, 6rem); }
.u-mb-lg { margin-bottom: clamp(3.5rem, 7vw, 6rem); }

.u-hidden-mobile { display: none; }
@media (min-width: 640px) { .u-hidden-mobile { display: initial; } }

.u-flow > * + * { margin-top: 1.1rem; }

/* Text sizes */
.u-lead { font-size: var(--fs-lead); color: var(--muted); }
.u-muted { color: var(--muted); }