/* GoodWide: lightweight motion layer on top of the Webflow export.
   Only opacity / translate are animated (GPU-friendly). `translate` is used
   instead of `transform` so it never fights Webflow IX hover transforms. */

/* Smooth cross-page transition (no JS; ignored by unsupported browsers) */
@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: gw-vt-out .28s cubic-bezier(.4, 0, 1, 1) both;
}

::view-transition-new(root) {
  animation: gw-vt-in .45s cubic-bezier(.16, 1, .3, 1) both;
}

@keyframes gw-vt-out {
  to { opacity: 0; translate: 0 -12px; }
}

@keyframes gw-vt-in {
  from { opacity: 0; translate: 0 16px; }
}

/* Scroll progress bar (CSS scroll-driven animation, no JS) */
.gw-progress {
  display: none;
}

@supports (animation-timeline: scroll()) {
  .gw-progress {
    z-index: 9999;
    pointer-events: none;
    background: var(--heading, #111);
    height: 2px;
    display: block;
    position: fixed;
    inset: 0 0 auto;
    transform-origin: 0 50%;
    animation: gw-progress linear both;
    animation-timeline: scroll(root block);
  }

  @keyframes gw-progress {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
  }
}

/* Page title (h1) letters rise in on load */
.gw-char {
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  display: inline-block;
}

/* started by enhance.js in step with the intro that reveals the title block */
.gw-go .gw-char {
  animation: gw-rise .9s cubic-bezier(.16, 1, .3, 1) both;
  animation-delay: calc(var(--gw-start, 0ms) + var(--i, 0) * 45ms + 80ms);
}

@keyframes gw-rise {
  from { opacity: 0; translate: 0 .35em; filter: blur(6px); }
}

/* Scroll reveal: hidden state only applies once enhance.js has run */
.gw-js .gw-reveal {
  opacity: 0;
  translate: 0 32px;
  transition: opacity .8s cubic-bezier(.16, 1, .3, 1), translate .9s cubic-bezier(.16, 1, .3, 1);
  transition-delay: var(--gw-delay, 0ms);
}

.gw-js .gw-reveal.is-in {
  opacity: 1;
  translate: 0 0;
}

/* Case cards (enhance.js adds .gw-case). The steps share --gw-delay so cards
   that enter together still run left to right. */
.gw-js .gw-case {
  opacity: 0;
  translate: 0 80px;
  rotate: 2.5deg;
  transform-origin: 0 100%;
  transition: opacity .6s cubic-bezier(.16, 1, .3, 1), translate 1.1s cubic-bezier(.16, 1, .3, 1), rotate 1.1s cubic-bezier(.16, 1, .3, 1);
  transition-delay: var(--gw-delay, 0ms);
}

.gw-js .gw-case .block-project-a {
  clip-path: inset(100% 0 0 0 round var(--radius-16));
  transition: clip-path 1.1s cubic-bezier(.76, 0, .24, 1), transform .6s cubic-bezier(.16, 1, .3, 1);
  transition-delay: calc(var(--gw-delay, 0ms) + .1s), 0s;
}

.gw-js .gw-case .thumbnail {
  scale: 1.4;
  transition: scale 1.6s cubic-bezier(.16, 1, .3, 1) calc(var(--gw-delay, 0ms) + .3s);
}

.gw-js .gw-case .text-block-project-a {
  clip-path: inset(0 100% 0 0 round var(--radius-16));
  transition: clip-path .9s cubic-bezier(.76, 0, .24, 1) calc(var(--gw-delay, 0ms) + .45s);
}

.gw-js .gw-case .text-block-project-a > * {
  opacity: 0;
  translate: 0 .8em;
  transition: opacity .6s ease, translate .8s cubic-bezier(.16, 1, .3, 1);
  transition-delay: calc(var(--gw-delay, 0ms) + .75s);
}

.gw-js .gw-case .text-block-project-a > * + * {
  transition-delay: calc(var(--gw-delay, 0ms) + .85s);
}

.gw-js .gw-case.is-in {
  opacity: 1;
  translate: 0 0;
  rotate: 0deg;
}

.gw-js .gw-case.is-in .block-project-a,
.gw-js .gw-case.is-in .text-block-project-a {
  clip-path: inset(0 0 0 0 round var(--radius-16));
}

.gw-js .gw-case.is-in .thumbnail {
  scale: 1;
}

.gw-js .gw-case.is-in .text-block-project-a > * {
  opacity: 1;
  translate: 0 0;
}

/* Case detail photos and videos: curtain wipe from the bottom. The clip sits
   on the child: a fully clipped target never reports as intersecting. */
.gw-wipe {
  border-radius: var(--radius-16);
  overflow: hidden;
}

.gw-js .gw-wipe > * {
  clip-path: inset(100% 0 0 0);
  scale: 1.15;
  transition: clip-path 1.1s cubic-bezier(.76, 0, .24, 1), scale 1.4s cubic-bezier(.16, 1, .3, 1);
  transition-delay: var(--gw-delay, 0ms);
}

.gw-js .gw-wipe.is-in > * {
  clip-path: inset(0 0 0 0);
  scale: 1;
}

/* Section headings: each line rises out of a mask */
.gw-line {
  padding-bottom: .12em;
  margin-bottom: -.12em;
  display: block;
  overflow: hidden;
}

.gw-line-in {
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  display: inline-block;
}

.gw-js .gw-lines .gw-line-in {
  translate: 0 110%;
  transition: translate 1.1s cubic-bezier(.16, 1, .3, 1);
  transition-delay: calc(var(--i, 0) * 120ms + 150ms);
}

.gw-js .gw-lines.is-in .gw-line-in {
  translate: 0 0;
}

/* Accent copy: emphasised words are inked from grey to black, line by line */
.gw-js .gw-ink {
  -webkit-text-fill-color: transparent;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  background-image: linear-gradient(90deg, var(--heading) 50%, var(--gray) 50%);
  background-position: 100% 0;
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  transition: background-position 1.4s cubic-bezier(.65, 0, .35, 1) .5s;
}

.gw-js .gw-ink.is-in {
  background-position: 0 0;
}

/* Section label dot: one ripple when the label comes into view */
.gw-ping .circle-subtitle {
  position: relative;
}

.gw-ping .circle-subtitle:after {
  content: "";
  border: 1px solid currentColor;
  border-color: var(--heading);
  border-radius: 50%;
  opacity: 0;
  position: absolute;
  inset: 0;
}

.gw-ping.is-in .circle-subtitle:after {
  animation: gw-ping 1.4s cubic-bezier(.16, 1, .3, 1) .3s;
}

@keyframes gw-ping {
  from { opacity: .8; scale: 1; }
  to { opacity: 0; scale: 4; }
}

/* Case cards tilt toward the cursor (set by enhance.js) */
@media (hover: hover) and (min-width: 992px) {
  .case .block-project-a {
    transition: transform .6s cubic-bezier(.16, 1, .3, 1);
  }

  .button, .nav-button {
    transition: opacity .5s cubic-bezier(.25, 1, .5, 1), translate .5s cubic-bezier(.16, 1, .3, 1);
  }
}

/* Links in case details: underline slides in and out instead of fading */
.text-content a {
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 100% 1px;
  transition: background-size .5s cubic-bezier(.65, 0, .35, 1), opacity .3s;
}

@media (hover: hover) {
  .text-content a:hover {
    opacity: 1;
    background-position: 100% 100%;
    background-size: 0 1px;
  }
}

/* Case detail images: slow zoom on hover */
.case-image-link {
  border-radius: var(--radius-16);
  overflow: hidden;
}

.case-image-link .case-image {
  transition: scale .8s cubic-bezier(.16, 1, .3, 1), clip-path 1.1s cubic-bezier(.76, 0, .24, 1) var(--gw-delay, 0ms);
}

.case-image-link:hover .case-image {
  scale: 1.03;
}

@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }

  .gw-progress {
    animation: none;
  }

  .gw-js .gw-reveal {
    opacity: 1;
    translate: none;
    transition: none;
  }

  .gw-js .gw-case, .gw-js .gw-case .block-project-a, .gw-js .gw-case .thumbnail,
  .gw-js .gw-case .text-block-project-a, .gw-js .gw-case .text-block-project-a > * {
    opacity: 1;
    clip-path: none;
    scale: none;
    translate: none;
    rotate: none;
    transition: none;
  }

  .gw-js .gw-wipe > *, .gw-js .gw-lines .gw-line-in, .gw-js .gw-ink {
    clip-path: none;
    scale: none;
    translate: none;
    background-position: 0 0;
    transition: none;
  }

  .gw-ping.is-in .circle-subtitle:after {
    animation: none;
  }

  .case-image-link .case-image {
    transition: none;
  }
}

/* SP hamburger menu (≤991px): enhance.js takes over from Webflow's nav
   (it renames .w-nav-button to .gw-nav-button) to animate open and close */
.gw-nav-button {
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  user-select: none;
  display: none;
  position: relative;
}

.gw-nav-backdrop {
  z-index: 776;
  pointer-events: none;
  background-color: #0000;
  position: fixed;
  inset: 0;
  transition: background-color .45s cubic-bezier(.16, 1, .3, 1);
}

@media screen and (max-width: 991px) {
  .gw-nav-button {
    display: block;
  }

  /* hamburger → × */
  .gw-nav-button .menu-icon {
    width: 1em;
    height: 1em;
    position: relative;
  }

  .gw-nav-button .menu-icon:before,
  .gw-nav-button .menu-icon:after {
    content: "";
    background-color: currentColor;
    border-radius: 2px;
    width: .7em;
    height: 1.5px;
    position: absolute;
    top: 50%;
    left: .15em;
    transition: translate .45s cubic-bezier(.16, 1, .3, 1), rotate .45s cubic-bezier(.16, 1, .3, 1);
  }

  .gw-nav-button .menu-icon:before {
    translate: 0 -.17em;
  }

  .gw-nav-button .menu-icon:after {
    translate: 0 .17em;
  }

  .gw-menu-open .gw-nav-button .menu-icon:before {
    translate: 0 0;
    rotate: 45deg;
  }

  .gw-menu-open .gw-nav-button .menu-icon:after {
    translate: 0 0;
    rotate: -45deg;
  }

  .gw-menu-open .gw-nav-backdrop {
    pointer-events: auto;
    background-color: #0000004d;
  }

  /* dropdown panel: unfolds from the top with a soft scale */
  .navbar.w-nav .nav-menu.gw-nav-menu {
    visibility: hidden;
    opacity: 0;
    clip-path: inset(0 0 100% 0 round var(--radius-16));
    transform-origin: 50% 0;
    flex-flow: column;
    align-items: stretch;
    padding: .8em 0;
    display: flex;
    position: absolute;
    top: calc(100% + .6em);
    scale: .96;
    transition: clip-path .35s cubic-bezier(.4, 0, .2, 1), opacity .3s ease, scale .35s cubic-bezier(.4, 0, .2, 1), visibility 0s linear .35s;
  }

  .gw-menu-open .navbar.w-nav .nav-menu.gw-nav-menu {
    visibility: visible;
    opacity: 1;
    clip-path: inset(0 0 0 0 round var(--radius-16));
    scale: 1;
    transition: clip-path .6s cubic-bezier(.16, 1, .3, 1), opacity .3s ease, scale .6s cubic-bezier(.16, 1, .3, 1), visibility 0s;
  }

  .gw-nav-menu .nav-link {
    text-align: center;
    opacity: 0;
    translate: 0 -.6em;
    padding-top: .9em;
    padding-bottom: .9em;
    transition: opacity .2s ease, translate .2s ease;
  }

  .gw-menu-open .gw-nav-menu .nav-link {
    opacity: 1;
    translate: 0 0;
    transition: opacity .5s cubic-bezier(.16, 1, .3, 1), translate .6s cubic-bezier(.16, 1, .3, 1);
  }

  .gw-menu-open .gw-nav-menu .nav-link:nth-child(1) { transition-delay: .1s; }
  .gw-menu-open .gw-nav-menu .nav-link:nth-child(2) { transition-delay: .16s; }
  .gw-menu-open .gw-nav-menu .nav-link:nth-child(3) { transition-delay: .22s; }
  .gw-menu-open .gw-nav-menu .nav-link:nth-child(4) { transition-delay: .28s; }

  .gw-nav-menu .nav-link {
    margin: 0 1.6em;
  }

  .gw-nav-menu .nav-link + .nav-link {
    border-top: 1px solid #0000000f;
  }
}

@media (prefers-reduced-motion: reduce) {
  .navbar.w-nav .nav-menu.gw-nav-menu,
  .gw-menu-open .navbar.w-nav .nav-menu.gw-nav-menu,
  .gw-nav-menu .nav-link,
  .gw-menu-open .gw-nav-menu .nav-link,
  .gw-nav-backdrop,
  .gw-nav-button .menu-icon:before,
  .gw-nav-button .menu-icon:after {
    transition-duration: 0s;
    transition-delay: 0s;
  }
}