/* ==========================================================================
   Pinecap motion-tokens.css v1.0
   Kanonisk motion-fil. Importeras av alla HTML-filer som anvander Pinecap-motion.
   Kompletterar MOTION.md.
   ========================================================================== */

:root {
  /* Duration-tokens */
  --dur-micro:  120ms;
  --dur-short:  240ms;
  --dur-medium: 400ms;
  --dur-long:   700ms;
  --dur-breath: 12000ms;
  --dur-rotate: 120000ms;

  /* Easing-tokens */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
  --ease-sharp:  cubic-bezier(0.33, 0, 0.67, 1);
}

/* ==========================================================================
   Signatursekvenser
   ========================================================================== */

/* Kotte breathing. Opacity-puls pa wordmark-kotte. */
.pinecap-mark--breath {
  animation: pinecap-breath var(--dur-breath) ease-in-out infinite;
}
@keyframes pinecap-breath {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.96; }
}

/* Kotte rotation. Fristaende kotte. 120s per varv. */
.pinecap-mark--rotate {
  animation: pinecap-rotate var(--dur-rotate) var(--ease-sharp) infinite;
  transform-origin: 50% 51.7%;
}
@keyframes pinecap-rotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Scroll reveal. 12px translateY, 700ms ease-out. */
.r {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity var(--dur-long) var(--ease-out),
    transform var(--dur-long) var(--ease-out);
}
.r.v {
  opacity: 1;
  transform: translateY(0);
}

/* Scroll reveal forte (tyngre, 18px, 900ms). */
.r-forte {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 900ms var(--ease-out),
    transform 900ms var(--ease-out);
}
.r-forte.v {
  opacity: 1;
  transform: translateY(0);
}

/* Delay-klasser for staggered reveal (80ms intervall). */
.d1 { transition-delay: 80ms; }
.d2 { transition-delay: 160ms; }
.d3 { transition-delay: 240ms; }
.d4 { transition-delay: 320ms; }

/* Hero-entré. 14px translateY, 800ms. */
.hero-seq {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 800ms var(--ease-out),
    transform 800ms var(--ease-out);
}
.hero-seq.v {
  opacity: 1;
  transform: translateY(0);
}

/* Scroll progress-bar (tunn koppar-linje overst). */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  background: var(--accent, #8A6234);
  z-index: 200;
  width: 0;
  opacity: 0.7;
  pointer-events: none;
  transition: width 100ms linear;
}

/* Nav solidification (transparent till solid vid scroll). */
.nav {
  transition:
    background var(--dur-medium) var(--ease-in-out),
    padding-bottom var(--dur-medium) var(--ease-in-out);
}
.nav-cta {
  opacity: 0;
  pointer-events: none;
  transition: opacity 350ms var(--ease-out);
}
.nav--solid .nav-cta {
  opacity: 1;
  pointer-events: auto;
}

/* ==========================================================================
   Reduced-motion fallback (obligatoriskt per WCAG 2.1)
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  /* Kotte breathing behalls som statisk opacity 1. */
  .pinecap-mark--breath {
    animation: none;
    opacity: 1;
  }
  /* Scroll reveal och hero-entré visas direkt utan transition. */
  .r, .r-forte, .hero-seq {
    opacity: 1 !important;
    transform: none !important;
  }
}