/* ==========================================================================
   Kaldrin Developments — motion
   Initial states apply only when JS is running and motion is allowed,
   so content is always visible without scripts or with reduced motion.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
  /* ---- Generic reveal ---- */
  .js [data-reveal] {
    opacity: 0;
    transform: translateY(22px);
    transition:
      opacity var(--dur-slow) var(--ease-out) var(--d, 0ms),
      transform var(--dur-reveal) var(--ease-out) var(--d, 0ms);
  }
  .js [data-reveal].is-in { opacity: 1; transform: none; }

  /* ---- Headline line reveal: each line rises out of its own mask ---- */
  .js [data-split] .line > span {
    transform: translateY(108%);
    opacity: 0;
    filter: blur(6px);
    transition: transform var(--dur-reveal) var(--ease-out), opacity 900ms var(--ease-out), filter 1400ms var(--ease-out);
  }  .js [data-split] .line:nth-child(2) > span { transition-delay: 90ms; }
  .js [data-split] .line:nth-child(3) > span { transition-delay: 180ms; }
  .js [data-split].is-in .line > span { transform: none; opacity: 1; filter: none; }

  /* ---- Section dividers draw across as each section arrives ---- */
  .js .section { border-top-color: transparent; }
  .js .section::after {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--line);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 1600ms var(--ease-out);
    pointer-events: none;
  }
  .js .section.is-in::after { transform: scaleX(1); }

  /* ---- Ink in: headlines settle onto the page like fresh print ---- */
  .js [data-ink] {
    opacity: 0;
    filter: blur(8px);
    transform: translateY(10px) scale(1.02);
    transform-origin: left bottom;
    transition: opacity 1100ms var(--ease-out), filter 1300ms var(--ease-out), transform 1600ms var(--ease-out);
  }
  .js [data-ink].is-in { opacity: 1; filter: blur(0); transform: none; }

  /* ---- Develop: photos come up from overexposed white, like a print in the tray ---- */
  .js [data-develop] a, .js [data-develop] .develop__target {
    opacity: 0;
    filter: brightness(2.4) contrast(0.5) blur(3px);
    transform: scale(1.03);
    transition: opacity 900ms var(--ease-out), filter 1800ms var(--ease-out) 150ms, transform 2200ms var(--ease-out);
  }
  .js [data-develop].is-in a, .js [data-develop].is-in .develop__target { opacity: 1; filter: none; transform: none; }

  /* ---- Drawn rules ---- */
  .js [data-draw] { transform: scaleX(0); transition: transform 1400ms var(--ease-out) 300ms; }
  .js [data-draw].is-in { transform: scaleX(1); }

  /* ---- Hover: buttons lift a touch (magnetic pull is added by js/modules/magnetic.js) ---- */
  @media (hover: hover) {
    .btn { transition: background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), translate 500ms var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
    .btn--solid:hover { box-shadow: 0 10px 28px -14px rgba(220, 212, 199, 0.45); }
    .text-link { background: linear-gradient(currentColor, currentColor) 0 calc(100% - 8px) / 0 1px no-repeat; transition: color var(--dur-base) var(--ease-out), background-size var(--dur-slow) var(--ease-out); }
    .text-link:hover { background-size: calc(100% - 44px) 1px; }
    .brand { transition: opacity var(--dur-base) var(--ease-out); }
    .brand:hover { opacity: 0.8; }
  }
}

/* Reduced motion: no transitions beyond simple state changes */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
  }
}