/* TTC Network v1.2.10 — scoped animation patch.
 * Disable in UX Builder by setting reveal="false".
 * No transform/overflow is applied to the layout, sticky sidebar or nav track.
 */

/* 1. Heading: soft fade-up, once, only when the observer has been installed. */
.ttcn.ttcn--reveal.has-reveal .ttcn__intro-inner {
  opacity: 0;
  transform: translate3d(0, 15px, 0);
  transition: opacity .48s ease, transform .48s cubic-bezier(.2,.7,.2,1);
}
.ttcn.ttcn--reveal.has-reveal .ttcn__intro-inner.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* 2. Gallery: existing intersection-observed reveal + restrained 4-card stagger.
 * Each gallery item is revealed only once; no re-animation on reverse scroll. */
.ttcn.ttcn--reveal.has-reveal .ttcn-tile {
  transition: opacity .5s ease, transform .5s cubic-bezier(.2,.72,.2,1);
}
.ttcn.ttcn--reveal.has-reveal .ttcn-tile.is-visible:nth-child(4n + 1) { transition-delay: 0ms; }
.ttcn.ttcn--reveal.has-reveal .ttcn-tile.is-visible:nth-child(4n + 2) { transition-delay: 65ms; }
.ttcn.ttcn--reveal.has-reveal .ttcn-tile.is-visible:nth-child(4n + 3) { transition-delay: 130ms; }
.ttcn.ttcn--reveal.has-reveal .ttcn-tile.is-visible:nth-child(4n + 4) { transition-delay: 195ms; }

/* 3. Left navigator: active marker and text move without resizing rows. */
.ttcn .ttcn-nav__title {
  transition: transform .28s cubic-bezier(.2,.7,.2,1);
}
.ttcn .ttcn-nav__item.is-active .ttcn-nav__title,
.ttcn .ttcn-nav__button:hover .ttcn-nav__title,
.ttcn .ttcn-nav__button:focus-visible .ttcn-nav__title {
  transform: translate3d(4px, 0, 0);
}
.ttcn .ttcn-nav__item::after {
  content: "";
  position: absolute;
  z-index: 1;
  left: clamp(7px, 1vw, 15px);
  top: 50%;
  width: 3px;
  height: 32px;
  border-radius: 4px;
  background: #fff;
  opacity: 0;
  transform: translateY(-50%) scaleY(.4);
  transition: opacity .28s ease, transform .28s ease;
  pointer-events: none;
}
.ttcn .ttcn-nav__item.is-active::after {
  opacity: 1;
  transform: translateY(-50%) scaleY(1);
}

@media (max-width: 849px) {
  /* The mobile navigation is a swipeable strip, not sticky. */
  .ttcn .ttcn-nav__item::after { left: 5px; height: 25px; }
  .ttcn.ttcn--reveal.has-reveal .ttcn__intro-inner {
    transform: translate3d(0, 9px, 0);
    transition-duration: .34s;
  }
  .ttcn.ttcn--reveal.has-reveal .ttcn__intro-inner.is-visible { transform: none; }
  .ttcn.ttcn--reveal.has-reveal .ttcn-tile { transition-duration: .36s; }
  .ttcn.ttcn--reveal.has-reveal .ttcn-tile.is-visible:nth-child(4n + 2) { transition-delay: 40ms; }
  .ttcn.ttcn--reveal.has-reveal .ttcn-tile.is-visible:nth-child(4n + 3) { transition-delay: 80ms; }
  .ttcn.ttcn--reveal.has-reveal .ttcn-tile.is-visible:nth-child(4n + 4) { transition-delay: 120ms; }
}

@media (hover: none) {
  .ttcn .ttcn-nav__button:hover .ttcn-nav__title { transform: none; }
  .ttcn .ttcn-nav__item.is-active .ttcn-nav__title { transform: translate3d(4px,0,0); }
}

@media (prefers-reduced-motion: reduce) {
  .ttcn .ttcn__intro-inner,
  .ttcn .ttcn-tile,
  .ttcn .ttcn-nav__title,
  .ttcn .ttcn-nav__item::after {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
  .ttcn .ttcn-nav__item::after { opacity: 0 !important; }
  .ttcn .ttcn-nav__item.is-active::after { opacity: 1 !important; }
}