/* True Increase Motion — front-end styles
   Colors come from CSS variables printed by the plugin (Settings → Motion System). */

/* ---------- Pre-hide (only while JS is confirmed running) ---------- */
.ti-js :is(.ti-up, .ti-left, .ti-right, .ti-scale, .ti-fade, .ti-words, .ti-clip),
.ti-js .ti-stagger > * { visibility: hidden; }

/* ---------- Word split ---------- */
.ti-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.ti-w > span { display: inline-block; will-change: transform; }

/* ---------- Header (Astra #masthead) ---------- */
.ti-header-fx #masthead { position: sticky; top: 0; z-index: 999;
  transition: transform .45s var(--ti-ease), box-shadow .3s, background-color .3s; }
.admin-bar.ti-header-fx #masthead { top: 32px; }
@media (max-width: 782px) { .admin-bar.ti-header-fx #masthead { top: 46px; } }
.ti-header-fx #masthead.ti-scrolled { box-shadow: 0 6px 24px rgba(16, 39, 43, .08);
  background: rgba(255, 255, 255, .92); backdrop-filter: blur(10px); }
.ti-header-fx #masthead.ti-scrolled .site-logo-img img { max-height: 44px; transition: max-height .3s var(--ti-ease); }
.ti-header-fx #masthead.ti-hide { transform: translateY(-100%); }

/* Nav link underline that grows from the left */
.ti-header-fx .main-header-menu > .menu-item > .menu-link {
  background: linear-gradient(var(--ti-teal), var(--ti-teal)) 0 100% / 0 2px no-repeat;
  transition: background-size .35s var(--ti-ease); }
.ti-header-fx .main-header-menu > .menu-item:hover > .menu-link,
.ti-header-fx .main-header-menu > .current-menu-item > .menu-link { background-size: 100% 2px; }

/* Dropdown: items rise in one after another */
.ti-header-fx .main-header-menu .menu-item:hover > .sub-menu > li,
.ti-header-fx .main-header-menu .menu-item:focus-within > .sub-menu > li { animation: ti-drop .4s var(--ti-ease) both; }
.ti-header-fx .main-header-menu .sub-menu > li:nth-child(2) { animation-delay: .05s; }
.ti-header-fx .main-header-menu .sub-menu > li:nth-child(3) { animation-delay: .1s; }
.ti-header-fx .main-header-menu .sub-menu > li:nth-child(4) { animation-delay: .15s; }
@keyframes ti-drop { from { opacity: 0; transform: translateY(10px); } }

/* ---------- Buttons: fill rises, arrow nudges up-right ---------- */
.ti-btn, .ti-btn .wp-block-button__link, .ti-btn .elementor-button {
  position: relative; overflow: hidden; isolation: isolate;
  transition: color .35s var(--ti-ease), transform .35s var(--ti-ease); }
.ti-btn .wp-block-button__link::before, .ti-btn .elementor-button::before, a.ti-btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ti-ink);
  transform: translateY(101%); transition: transform .45s var(--ti-ease); }
.ti-btn:hover .wp-block-button__link::before, .ti-btn:hover .elementor-button::before, a.ti-btn:hover::before { transform: translateY(0); }
.ti-btn:hover .wp-block-button__link, .ti-btn:hover .elementor-button, a.ti-btn:hover { color: #fff; }
.ti-btn :is(.wp-block-button__link, .elementor-button)::after, a.ti-btn::after {
  content: "↗"; display: inline-block; margin-left: .5em; transition: transform .35s var(--ti-ease); }
.ti-btn:hover :is(.wp-block-button__link, .elementor-button)::after, a.ti-btn:hover::after { transform: translate(3px, -3px); }

/* ---------- Cards ---------- */
.ti-lift { transition: transform .4s var(--ti-ease), box-shadow .4s var(--ti-ease); }
.ti-lift:hover { transform: translateY(-8px); box-shadow: 0 22px 44px -18px rgba(14, 138, 140, .35); }

/* ---------- Marquee ---------- */
.ti-marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.ti-marquee-track { display: flex; gap: 64px; width: max-content; align-items: center;
  animation: ti-marquee 38s linear infinite; }
.ti-marquee:hover .ti-marquee-track { animation-play-state: paused; }
.ti-marquee img { height: 40px; width: auto; filter: grayscale(1); opacity: .6; transition: filter .3s, opacity .3s; }
.ti-marquee img:hover { filter: none; opacity: 1; }
@keyframes ti-marquee { to { transform: translateX(calc(-50% - 32px)); } }

/* ---------- Timeline (use with ti-draw) ---------- */
.ti-timeline { position: relative; padding-left: 48px; display: grid; gap: 64px; }
.ti-timeline svg { position: absolute; left: 14px; top: 0; height: 100%; width: 4px; }
.ti-dot { position: absolute; left: 6px; width: 20px; height: 20px; border-radius: 50%;
  background: #fff; border: 4px solid var(--ti-teal); }

/* ---------- Pinned stepper ---------- */
.ti-steps.is-pinned { display: grid; position: relative; min-height: 70vh; align-items: center; }
.ti-steps.is-pinned > .ti-step { grid-area: 1 / 1; }
.ti-steps-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: color-mix(in srgb, var(--ti-teal) 18%, transparent); }
.ti-steps-bar::after { content: ""; position: absolute; inset: 0; background: var(--ti-teal);
  transform-origin: left; transform: scaleX(var(--p, 0)); }

/* ---------- Stacking cards (needs overflow: visible on all ancestors) ---------- */
.ti-stack > * { position: sticky; top: calc(110px + var(--i, 0) * 22px); transform-origin: 50% 0;
  box-shadow: 0 -10px 40px rgba(16, 39, 43, .08); }
@media (max-width: 1023px) { .ti-stack > * { position: static; } }

/* ---------- Network nodes ("Individuals become a team") ---------- */
.ti-nodes { position: relative; height: 340px; }
.ti-nodes svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ti-nodes .n { position: absolute; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: var(--ti-teal); }
.ti-nodes .n.lead { width: 24px; height: 24px; margin: -12px 0 0 -12px; background: var(--ti-cta); }

/* ---------- Brand arrow hero ---------- */
.ti-arrow-hero { position: relative; min-height: min(88vh, 760px); display: grid; align-items: center; overflow: hidden; background: #fff; }
.ti-arrow-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ti-arrow-copy { position: relative; max-width: 620px; padding: 0 6vw; }

/* ---------- Forms ---------- */
.ti-form :is(input:not([type=submit]):not([type=checkbox]):not([type=radio]), textarea, select) {
  border: 0; border-bottom: 1px solid #c9d6d7; border-radius: 0;
  background: linear-gradient(var(--ti-teal), var(--ti-teal)) 0 100% / 0 2px no-repeat;
  transition: background-size .45s var(--ti-ease), border-color .3s; }
.ti-form :is(input, textarea, select):focus { outline: none; background-size: 100% 2px; border-color: transparent; }
.ti-form [type=submit] { transition: background-color .3s, width .4s var(--ti-ease); }
.ti-form [type=submit].ti-sent { background: var(--ti-teal) !important; color: transparent !important; position: relative; }
.ti-form [type=submit].ti-sent::after { content: "✓"; color: #fff; position: absolute; inset: 0; display: grid; place-items: center; font-size: 1.3em; }

/* ---------- Page transition curtain ---------- */
.ti-curtain { position: fixed; inset: 0; z-index: 99999; background: var(--ti-teal); pointer-events: none; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .ti-marquee-track { animation: none; }
  .ti-header-fx #masthead, .ti-btn, .ti-lift { transition-duration: .01ms !important; }
  .ti-stack > * { position: static; }
}