/* Design For Life — motion and interaction layer.
   Builds on site.css. Everything that moves is opacity/transform/clip-path only,
   hidden states exist only under html.js, and prefers-reduced-motion turns it all off. */

:root {
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-in: cubic-bezier(.55, 0, 1, .45);
  --dur-fast: 180ms;
  --dur: 320ms;
  --dur-slow: 900ms;
}

/* ---------- Details ---------- */
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
::selection { background: var(--color-cta); color: #fff; }
.h1, .h2, .h3, .case__title, .cta-panel__title { text-wrap: balance; }
.body p, .lead, .case__text { text-wrap: pretty; }
:focus-visible { transition: outline-offset var(--dur-fast) var(--ease-out); }

/* ---------- Buttons: fill sweep, lift, press ---------- */
.btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition:
    transform var(--dur) var(--ease-out),
    filter var(--dur) var(--ease-out),
    background-color var(--dur) var(--ease-out);
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--color-cta-hover);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 550ms var(--ease-out);
}
.btn:hover { background: var(--color-cta); transform: translateY(-1px); filter: drop-shadow(4px 5px 8px rgba(0, 0, 0, .24)); }
.btn:hover::before { transform: scaleX(1); transform-origin: left center; }
.btn:active { transform: translateY(0) scale(.98); transition-duration: 90ms; }
.btn--white:hover { background: #fff; }
.btn--white::before { background: #ececec; }
.btn--outline:hover { background: transparent; }
.btn--outline::before { background: rgba(0, 0, 0, .06); }

/* ---------- Underlines that draw in and redraw ---------- */
.menu a:not(.btn),
.text-link,
.case__more,
.back-link,
.footer a {
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
}
.menu a:not(.btn) { background-size: 0% 2px; background-position: 100% calc(100% - 2px); transition: background-size 450ms var(--ease-out); }
.menu a:not(.btn):hover,
.menu a[aria-current="page"] { text-decoration: none; background-size: 100% 2px; background-position: 0 calc(100% - 2px); }

.text-link, .case__more, .back-link { background-size: 100% 1px; }
.text-link:hover, .case__more:hover, .back-link:hover,
.work-item:hover .text-link,
.case:hover .case__more { text-decoration: none; animation: underline-redraw 650ms var(--ease-in-out); }
@keyframes underline-redraw {
  0%      { background-size: 100% 1px; background-position: 100% 100%; }
  49.99%  { background-size: 0% 1px;   background-position: 100% 100%; }
  50%     { background-size: 0% 1px;   background-position: 0 100%; }
  100%    { background-size: 100% 1px; background-position: 0 100%; }
}
.text-link::after { transition: transform var(--dur) var(--ease-out); }
.text-link:hover::after,
.work-item:hover .text-link::after { transform: translateX(3px); }
.back-link::before { transition: transform var(--dur) var(--ease-out); }

.footer a { background-size: 0% 1px; background-position: 100% 100%; transition: background-size 400ms var(--ease-out); }
.footer a:hover { text-decoration: none; background-size: 100% 1px; background-position: 0 100%; }
.footer__legal a { background-size: 100% 1px; }

/* ---------- Image hovers ---------- */
.work-item__media img,
.case__bg,
.cta-panel__media img,
.next-case img {
  transition: transform 1.4s var(--ease-out);
}
.work-item:hover .work-item__media img,
.case:hover .case__bg,
.next-case:hover img { transform: scale(1.02); }
.work-item__media,
.next-case img { will-change: auto; }

.cases-nav button { transition: opacity var(--dur-fast) ease, transform var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out); }
.cases-nav button:not(:disabled):hover { background: #333; }
.cases-nav button:not(:disabled):active { transform: scale(.97); }
.cases.is-draggable { cursor: grab; }
.cases.is-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; user-select: none; }
.cases.is-dragging .case { pointer-events: none; }

/* Form fields */
.form input, .form select, .form textarea { transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); }
.form input:hover, .form select:hover, .form textarea:hover { border-color: #888; }

/* ---------- Mobile menu: fade and slide instead of popping ---------- */
@media (max-width: 1100px) {
  .menu,
  .menu.is-open { display: flex; }
  .menu {
    visibility: hidden;
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out), visibility 0s linear var(--dur);
  }
  .menu.is-open {
    visibility: visible;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    transition: opacity var(--dur) var(--ease-out), transform 450ms var(--ease-out), visibility 0s;
  }
  .menu > * { opacity: 0; transform: translateY(4px); transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); }
  .menu.is-open > * { opacity: 1; transform: none; }
  .menu.is-open > :nth-child(2) { transition-delay: 30ms; }
  .menu.is-open > :nth-child(3) { transition-delay: 60ms; }
  .menu.is-open > :nth-child(4) { transition-delay: 90ms; }
  .menu.is-open > :nth-child(5) { transition-delay: 120ms; }
  .menu.is-open > :nth-child(6) { transition-delay: 150ms; }
  .menu.is-open > :nth-child(7) { transition-delay: 180ms; }
}

/* ---------- Scroll reveals (classes set by js/motion.js) ---------- */
.js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 12px, 0);
  transition:
    opacity 800ms var(--ease-out) var(--delay, 0ms),
    transform 1s var(--ease-out) var(--delay, 0ms);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* Media: the frame opens up while the image settles */
.js [data-reveal="media"] {
  opacity: 1;
  transform: none;
  clip-path: inset(2.5% 2% 2.5% 2% round 16px);
  transition: clip-path 1.1s var(--ease-out) var(--delay, 0ms);
}
.js [data-reveal="media"] img { transform: scale(1.05); transition: transform 1.4s var(--ease-out) var(--delay, 0ms); }
.js [data-reveal="media"].is-in { clip-path: inset(0 0 0 0 round 0); }
.js [data-reveal="media"].is-in img { transform: none; }
.js .work-item:hover [data-reveal="media"].is-in img { transform: scale(1.02); transition-duration: 1.4s; transition-delay: 0ms; }

/* Pills and number circles pop in */
.js [data-reveal="pop"] { transform: scale(.92); }

/* Headline: words rise from behind a mask */
.js [data-reveal="words"] { opacity: 1; transform: none; }
.word { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.word > span { display: inline-block; }
.js [data-reveal="words"] .word > span {
  opacity: 0;
  transform: translate3d(0, 40%, 0);
  transition:
    opacity 900ms var(--ease-out) calc(var(--delay, 0ms) + var(--w, 0) * 30ms),
    transform 1.1s var(--ease-out) calc(var(--delay, 0ms) + var(--w, 0) * 30ms);
}
.js [data-reveal="words"].is-in .word > span { opacity: 1; transform: none; }

/* Gentle parallax on the isometric visuals, where scroll-driven animations exist */
@supports (animation-timeline: view()) {
  .hero__image--iso img,
  .case-visual--iso img {
    animation: drift linear both;
    animation-timeline: view();
    animation-range: cover;
  }
  @keyframes drift {
    from { transform: translate3d(0, 10px, 0); }
    to   { transform: translate3d(0, -10px, 0); }
  }
}

/* ---------- Page transitions (cross-document View Transitions) ---------- */
@view-transition { navigation: auto; }
.site-header { view-transition-name: site-header; }
main { view-transition-name: page; }
::view-transition-group(root) { animation-duration: 600ms; animation-timing-function: var(--ease-in-out); }
::view-transition-old(page) { animation: 280ms var(--ease-in-out) both page-out; }
::view-transition-new(page) { animation: 480ms var(--ease-out) 100ms both page-in; }
@keyframes page-out { to { opacity: 0; } }
@keyframes page-in { from { opacity: 0; } }

/* ---------- Reduced motion: everything visible, nothing moves ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-reveal],
  .js [data-reveal] img,
  .js [data-reveal="words"] .word > span {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    transition: none !important;
  }
  .hero__image--iso img, .case-visual--iso img { animation: none; }
  .btn:hover, .cases-nav button:not(:disabled):hover { transform: none; }
  .work-item:hover .work-item__media img, .case:hover .case__bg, .next-case:hover img { transform: none; }
  .text-link:hover, .case__more:hover, .back-link:hover, .work-item:hover .text-link, .case:hover .case__more { animation: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}