/* Jenson motion layer
 * Motion only: animated elements always return to the existing page state.
 * Typography, colour, size, spacing and final layout are not changed here.
 */

:root {
  --jenson-motion-duration: .78s;
  --jenson-motion-ease: cubic-bezier(.22, 1, .36, 1);
  --jenson-motion-distance: 26px;
}

/*
 * Fail-open by design:
 * - Elements are visible by default.
 * - JavaScript must add BOTH .jenson-motion-enabled and .jenson-motion-prepared
 *   before an element can be hidden for its entrance animation.
 * - If JavaScript fails at any point, removing .jenson-motion-enabled restores
 *   every element immediately.
 */
html:not(.jenson-motion-enabled) .jenson-motion-reveal,
html:not(.jenson-motion-enabled) .jenson-motion-panel,
html:not(.jenson-motion-enabled) .jenson-motion-media,
html:not(.jenson-motion-enabled) .jenson-motion-line,
html:not(.jenson-motion-enabled) .jenson-motion-stagger-item,
html.jenson-motion-enabled .jenson-motion-reveal:not(.jenson-motion-prepared),
html.jenson-motion-enabled .jenson-motion-panel:not(.jenson-motion-prepared),
html.jenson-motion-enabled .jenson-motion-media:not(.jenson-motion-prepared),
html.jenson-motion-enabled .jenson-motion-line:not(.jenson-motion-prepared),
html.jenson-motion-enabled .jenson-motion-stagger-item:not(.jenson-motion-prepared) {
  opacity: 1 !important;
  translate: none !important;
  scale: 1 !important;
  clip-path: none !important;
}

html.jenson-motion-enabled .jenson-motion-prepared {
  will-change: opacity, translate, scale, clip-path;
}

html.jenson-motion-enabled .jenson-motion-reveal.jenson-motion-prepared {
  opacity: 0;
  translate: 0 var(--jenson-motion-distance);
  transition:
    opacity var(--jenson-motion-duration) ease,
    translate var(--jenson-motion-duration) var(--jenson-motion-ease);
  transition-delay: var(--jenson-motion-delay, 0ms);
}

html.jenson-motion-enabled .jenson-motion-reveal.jenson-motion-prepared[data-jenson-motion-direction="left"] {
  translate: calc(var(--jenson-motion-distance) * -1) 0;
}

html.jenson-motion-enabled .jenson-motion-reveal.jenson-motion-prepared[data-jenson-motion-direction="right"] {
  translate: var(--jenson-motion-distance) 0;
}

html.jenson-motion-enabled .jenson-motion-panel.jenson-motion-prepared {
  opacity: 0;
  translate: 0 32px;
  transition:
    opacity .82s ease,
    translate .88s var(--jenson-motion-ease);
  transition-delay: var(--jenson-motion-delay, 0ms);
}

html.jenson-motion-enabled .jenson-motion-media.jenson-motion-prepared {
  opacity: 0;
  scale: 1.025;
  transition:
    opacity .9s ease,
    translate .9s var(--jenson-motion-ease),
    scale 1.15s var(--jenson-motion-ease);
  transition-delay: var(--jenson-motion-delay, 0ms);
}

html.jenson-motion-enabled .jenson-motion-line.jenson-motion-prepared {
  opacity: 1;
  clip-path: inset(0 100% 0 0);
  transition: clip-path .92s var(--jenson-motion-ease);
  transition-delay: var(--jenson-motion-delay, 0ms);
}

html.jenson-motion-enabled .jenson-motion-stagger-item.jenson-motion-prepared {
  opacity: 0;
  translate: 0 18px;
  transition:
    opacity .62s ease,
    translate .68s var(--jenson-motion-ease);
  transition-delay: var(--jenson-motion-delay, 0ms);
}

html.jenson-motion-enabled .jenson-motion-reveal.jenson-motion-prepared.is-jenson-visible,
html.jenson-motion-enabled .jenson-motion-panel.jenson-motion-prepared.is-jenson-visible,
html.jenson-motion-enabled .jenson-motion-media.jenson-motion-prepared.is-jenson-visible,
html.jenson-motion-enabled .jenson-motion-stagger-item.jenson-motion-prepared.is-jenson-visible {
  opacity: 1;
  translate: none;
  scale: 1;
}

html.jenson-motion-enabled .jenson-motion-line.jenson-motion-prepared.is-jenson-visible {
  clip-path: inset(0 0 0 0);
}

/* Release rendering hints after an entrance finishes. */
html.jenson-motion-enabled .jenson-motion-prepared.jenson-motion-finished {
  will-change: auto;
}

/* Hover and press feedback. Final/resting appearance stays unchanged. */
@media (hover: hover) and (pointer: fine) {
  .jenson-motion-link {
    transition: translate .3s var(--jenson-motion-ease), opacity .3s ease;
  }
  .jenson-motion-link:hover,
  .jenson-motion-link:focus-visible {
    translate: 4px 0;
  }

  .jenson-motion-hover-media {
    overflow: hidden;
  }
  .jenson-motion-hover-media > img,
  img.jenson-motion-hover-image {
    transition: scale .7s var(--jenson-motion-ease);
  }
  .jenson-motion-hover-media:hover > img,
  .jenson-motion-hover-media:focus-within > img,
  img.jenson-motion-hover-image:hover {
    scale: 1.035;
  }
}

.jenson-motion-press {
  transition: scale .22s ease, translate .22s ease;
}
.jenson-motion-press:active {
  scale: .975;
}

/* Form feedback; fields return to their existing appearance when focus leaves. */
.jenson-quote-input,
.jenson-quote-textarea,
.jenson-quote-file-btn,
.jenson-quote-submit {
  transition:
    filter .28s ease,
    box-shadow .28s ease,
    scale .2s ease;
}
.jenson-quote-input:focus,
.jenson-quote-textarea:focus {
  outline: none;
  filter: brightness(1.055);
  box-shadow: 0 0 0 3px rgba(1, 86, 205, .14);
}
.jenson-quote-file-btn:active,
.jenson-quote-submit:active {
  scale: .975;
}

/* Portfolio gallery opening motion. Existing slide navigation remains unchanged. */
.jenson-pg-modal.is-open {
  animation: jenson-modal-backdrop-in .3s ease both;
}
.jenson-pg-modal.is-open .jenson-pg-modal-inner {
  animation: jenson-modal-content-in .48s var(--jenson-motion-ease) both;
}
.jenson-pg-modal.is-open .jenson-pg-modal-title,
.jenson-pg-modal.is-open .jenson-pg-modal-desc,
.jenson-pg-modal.is-open .jenson-pg-modal-count {
  animation: jenson-modal-meta-in .46s .14s var(--jenson-motion-ease) both;
}

@keyframes jenson-modal-backdrop-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes jenson-modal-content-in {
  from { opacity: 0; translate: 0 20px; scale: .985; }
  to { opacity: 1; translate: none; scale: 1; }
}
@keyframes jenson-modal-meta-in {
  from { opacity: 0; translate: 0 10px; }
  to { opacity: 1; translate: none; }
}

@media (max-width: 1023px) {
  :root {
    --jenson-motion-distance: 18px;
    --jenson-motion-duration: .68s;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.jenson-motion-enabled *,
  html.jenson-motion-enabled *::before,
  html.jenson-motion-enabled *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
  }
  html.jenson-motion-enabled .jenson-motion-prepared {
    opacity: 1 !important;
    translate: none !important;
    scale: 1 !important;
    clip-path: none !important;
  }
}