/* =============================================================================
   THE SOURCE SITE'S OWN MOTION
   -----------------------------------------------------------------------------
   Approved by Santosh on 17 Oct 2026: the effects Elementor cannot make are the
   original site's own rules, copied here with their numbers unchanged. Each one
   is switched on by a class on the block (Advanced > CSS Classes), so the pages
   stay editable in Elementor without touching this file:

     tq-hand                    a heading that types itself in (tq-motion.js);
                                tq-hand-hero types at the hero's pace
     tq-rv, tq-rv-with          a block that rises 13px into place on entry;
                                tq-rv-with rises with the tq-rv block before it
     tq-k-head ... tq-k-post    the homepage kit: headings uncovered, body copy
                                raised, cards risen and settled, tiles hinged
     tq-k-star, -shot, -nm, -ds the parts that arrive after their block
     tq-wake-hero               the homepage's first screen, swinging up from flat
     tq-hero-h1, -lede, -cta, -note   what arrives on it, in order
     tq-flow                    the light that crosses the ecosystem pipeline
     tq-bar tq-bar-N            a score bar filling on load, N-th in its card
     tq-modecard, tq-rule       a mode card's hover: green name, growing rule,
                                glow (the states themselves are in style.css)
     tq-acc                     a question's "+" turning into a "x" as it opens
     tq-tile, tq-tile-card,     a product tile's lift, glow and tag; the "3
     tq-badge, tq-pill-toggle   modes" pill's colours and chevron
     tq-modes-float             the panel of modes, fading in and dropping 8px
                                into place (its states are in style.css)
     tq-post, tq-play           an article picture's zoom; the play disc
     tq-brush, tq-brush-y       the marks under the hero's two words, drawn once
                                it has typed (spans in the heading's own text,
                                not block classes)
     tq-rm-all                  a page on the homepage's stylesheet, which makes
                                every transition instant for reduced motion

   From the original: assets/css/talbotiq.css (§18, §25, §26, §31, §32, the
   pipeline and the brush) for the homepage, the two overview pages and Book a
   demo; the inline styles of the product, solution, About and Contact pages for
   the rest. The classes rv-head, rv-text, rv-card, rv-wake, rv-wake-now and in,
   and --i, are set by tq-motion.js exactly as the original's scroll.js sets them.

   Nothing here hides anything without html.fx, which the switch in <head> sets
   and takes away again if tq-motion.js never runs (functions.php).
   ========================================================================== */

:root {
  --rv: cubic-bezier(0.2, 0, 0, 1);
  --wake: cubic-bezier(.28, 1.16, .38, 1);
  --ease: cubic-bezier(.22, .61, .36, 1);
}

html { scroll-behavior: smooth; }

/* ---- the first screen waits for tq-motion.js ------------------------------ */
/* On the original, its scripts have run by the time the first screen is
   painted, so all of that screen's motion starts in one frame: the hero's
   swing and rises (CSS), the tiles' hinge and the typing (JavaScript). A
   WordPress page is longer, and its top is painted while the rest of it is
   still arriving, so the JavaScript half would start late, after its content
   had already been seen standing and in full. Until tq-motion.js runs (fx-on)
   and the typewriter has taken over its headings (tt-ready), that screen is
   held in its opening frame: the hero's animations paused at their start, the
   tiles lying flat as they begin, the typed headings not yet shown. The switch
   in <head> takes fx away after two seconds if the script never runs, and all
   of this with it. */
html.fx:not(.fx-on) .tq-wake-hero,
html.fx:not(.fx-on) .tq-wake-hero .tq-hero-h1,
html.fx:not(.fx-on) .tq-hero-lede,
html.fx:not(.fx-on) .tq-hero-cta,
html.fx:not(.fx-on) .tq-hero-note { animation-play-state: paused; }
html.fx:not(.fx-on) .tq-k-wake {
  transform: perspective(760px) rotateX(76deg) scale(.94);
  transform-origin: 50% 100%;
  opacity: 0;
}
html.fx:not(.fx-on) .tq-k-wake .tq-k-nm,
html.fx:not(.fx-on) .tq-k-wake .tq-k-ds { opacity: 0; translate: 0 14px; scale: .965; }
html.fx:not(.tt-ready) .tq-hand .elementor-heading-title { visibility: hidden; }

/* ---- the entrance kit (talbotiq.css §25) --------------------------------- */
/* display headings: uncovered rather than faded */
html.fx .rv-head {
  clip-path: inset(-35% 0 100% 0);
  translate: 0 22px;
  transition: clip-path .66s var(--rv), translate .66s var(--rv);
}
html.fx .rv-head.in { clip-path: inset(-35% 0 -35% 0); translate: 0 0; }

/* body copy: a short rise, no blur */
html.fx .rv-text {
  opacity: 0;
  translate: 0 10px;
  transition: opacity .42s var(--rv), translate .42s var(--rv);
  transition-delay: calc(var(--i, 0) * 45ms);
}
html.fx .rv-text.in { opacity: 1; translate: 0 0; }

/* cards: rise, with a little scale */
html.fx .rv-card {
  opacity: 0;
  translate: 0 18px;
  scale: .985;
  filter: blur(2px);
  transition: opacity .5s var(--rv), translate .5s var(--rv),
              scale .5s var(--rv), filter .5s var(--rv);
  transition-delay: calc(var(--i, 0) * 70ms);
}
html.fx .rv-card.in { opacity: 1; translate: 0 0; scale: 1; filter: blur(0); }

/* the star badge lands after its card. On the original the star (26x34, its
   line box) carries its disc, and grows from its own centre: 31px in and 25px
   down from the disc's corner, which is the box that carries the star here. */
.tq-k-star { transform-origin: 31px 25px; }
html.fx .rv-card .tq-k-star {
  opacity: 0;
  scale: .3;
  transition: opacity .3s var(--rv), scale .44s cubic-bezier(.2, 1.5, .4, 1);
  transition-delay: calc(var(--i, 0) * 70ms + 200ms);
}
html.fx .rv-card.in .tq-k-star { opacity: 1; scale: 1; }

/* pictures: a wipe, with the picture moving inside it (.post .shot, .whyitem .shot) */
.tq-k-post .tq-k-shot { display: block; overflow: clip; border-radius: 10px; }
.tq-k-why .tq-k-shot { display: block; overflow: clip; border-radius: 12px; }
html.fx .rv-card .tq-k-shot {
  clip-path: inset(0 0 100% 0);
  transition: clip-path .72s var(--rv);
  transition-delay: calc(var(--i, 0) * 70ms + 80ms);
}
html.fx .rv-card.in .tq-k-shot { clip-path: inset(0 0 0 0); }
html.fx .rv-card .tq-k-shot img {
  scale: 1.07;
  transition: scale 1s var(--rv);
  transition-delay: calc(var(--i, 0) * 70ms + 80ms);
}
html.fx .rv-card.in .tq-k-shot img { scale: 1; }

@media (prefers-reduced-motion: reduce) {
  html.fx .rv-head, html.fx .rv-text, html.fx .rv-card,
  html.fx .rv-card .tq-k-star {
    transition-duration: .01ms; transition-delay: 0ms;
  }
  html.fx [data-reveal] { transition-duration: .01ms; transition-delay: 0ms; }
}

/* ---- the first screen animates itself (§26) ------------------------------ */
@keyframes rv-uncover { from { clip-path: inset(-35% 0 100% 0); translate: 0 22px; } }
@keyframes rv-rise    { from { opacity: 0; translate: 0 10px; } }
html.fx .tq-wake-hero .tq-hero-h1 { animation: rv-uncover .66s var(--rv) backwards; }
html.fx .tq-hero-lede { animation: rv-rise .42s var(--rv) .09s backwards; }
html.fx .tq-hero-cta  { animation: rv-rise .42s var(--rv) .16s backwards; }
html.fx .tq-hero-note { animation: rv-rise .42s var(--rv) .22s backwards; }
@media (prefers-reduced-motion: reduce) {
  html.fx .tq-wake-hero .tq-hero-h1, html.fx .tq-hero-lede, html.fx .tq-hero-cta {
    animation-duration: .01ms; animation-delay: 0ms;
  }
  html.fx .tq-hero-note { animation: none; }
}

/* ---- the hinge (§32) ------------------------------------------------------ */
/* THE HERO: one panel, on load. On the original the section is the stage (its
   perspective is 1150px, seen from 50% -8%) and the panel inside it swings on
   its bottom edge. Here one block is both, and it carries the same box, so the
   camera goes into the transform: the origin is the original's viewpoint, and
   the swing is moved down to the bottom edge (108% = from -8% to 100%) and back.
   The camera stays put through the swing, as a stage's does, so the end frame
   is written out rather than left to `none`. */
@keyframes tq-wake-hinge {
  from { transform: perspective(1150px) translateY(108%) rotateX(88deg) scale(.955) translateY(-108%); }
  to   { transform: perspective(1150px) translateY(108%) rotateX(0deg) scale(1) translateY(-108%); }
}
html.fx .tq-wake-hero {
  transform-origin: 50% -8%;
  transform-style: preserve-3d;
  animation: tq-wake-hinge 1300ms var(--wake) 140ms backwards;
}

/* THE TILES: ten panels, on entry, staggered */
html.fx .rv-wake {
  transform: perspective(760px) rotateX(76deg) scale(.94);
  transform-origin: 50% 100%;
  opacity: 0;
  transition:
    transform .78s var(--wake),
    opacity .34s linear;
  transition-delay: calc(var(--i) * 52ms);
}
html.fx .rv-wake.in { transform: none; opacity: 1; }
html.fx .rv-wake .tq-k-nm,
html.fx .rv-wake .tq-k-ds {
  opacity: 0;
  translate: 0 14px;
  scale: .965;
  transition:
    opacity .4s linear,
    translate .52s var(--wake),
    scale .52s var(--wake);
  transition-delay: calc(var(--i) * 52ms + 300ms);
}
html.fx .rv-wake .tq-k-ds { transition-delay: calc(var(--i) * 52ms + 380ms); }
html.fx .rv-wake.in .tq-k-nm,
html.fx .rv-wake.in .tq-k-ds { opacity: 1; translate: 0 0; scale: 1; }

/* the same tiles, when they are already on screen at load */
@keyframes wake-cell {
  from { transform: perspective(760px) rotateX(76deg) scale(.94); opacity: 0; }
}
@keyframes wake-cap {
  from { opacity: 0; translate: 0 14px; scale: .965; }
}
html.fx .rv-wake-now {
  transform-origin: 50% 100%;
  animation: wake-cell .78s var(--wake) calc(var(--i) * 52ms) backwards;
}
html.fx .rv-wake-now .tq-k-nm {
  animation: wake-cap .52s var(--wake) calc(var(--i) * 52ms + 300ms) backwards;
}
html.fx .rv-wake-now .tq-k-ds {
  animation: wake-cap .52s var(--wake) calc(var(--i) * 52ms + 380ms) backwards;
}

@media (prefers-reduced-motion: reduce) {
  html.fx .tq-wake-hero { animation-duration: .01ms; animation-delay: 0ms; }
  html.fx .rv-wake-now,
  html.fx .rv-wake-now .tq-k-nm,
  html.fx .rv-wake-now .tq-k-ds { animation-duration: .01ms; animation-delay: 0ms; }
  html.fx .rv-wake,
  html.fx .rv-wake .tq-k-nm,
  html.fx .rv-wake .tq-k-ds {
    transform: none; opacity: 1; translate: none; scale: none;
    transition: none;
  }
}

/* ---- the light on the pipeline -------------------------------------------- */
/* A small light crosses the rail every nine seconds. On the original it is a
   3px strip over the rail (28px down, 12.5% in from each side) whose child,
   lit at its left edge, slides one strip-width across it. Here the block that
   holds the rail draws the strip itself, before the rail and the nodes as on
   the original, and the same light moves across it as a background: the 8x3px
   tile below is the original's gradient, so its centre goes from 0 to 100%.
   Elementor keeps a container's ::before for background overlays, so each of
   its settings is put back to a plain box here. */
.e-con.tq-flow::before {
  content: "";
  display: block;
  position: absolute;
  left: 12.5%; right: 12.5%;
  top: 28px;
  width: auto;
  height: 3px;
  border: 0;
  border-radius: 0;
  mix-blend-mode: normal;
  transition: none;
  pointer-events: none;
  background: radial-gradient(4px 1.5px at 4px 50%, rgb(2 168 133 / .95), rgb(2 168 133 / 0) 100%) no-repeat;
  background-size: 8px 3px;
  animation: tq-coreflow 9s linear infinite;
}
@keyframes tq-coreflow {
  0%   { background-position: -4px 0; opacity: 0; }
  8%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { background-position: calc(100% + 4px) 0; opacity: 0; }
}
/* the rail itself is gone from 900px down, and the light with it (.pipe .flow) */
@media (max-width: 900px) {
  .e-con.tq-flow::before { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .e-con.tq-flow::before { display: none; }
}

/* ---- the product, solution, About and Contact pages ----------------------- */
/* .rv: each block rises 13px into place as it comes into view. */
html.fx .tq-rv, html.fx .tq-rv-with {
  opacity: 0;
  translate: 0 13px;
  transition: opacity .55s ease, translate .55s ease;
}
html.fx .tq-rv.in, html.fx .tq-rv-with.in { opacity: 1; translate: none; }

/* .bar i: the score bars fill on load, each 70ms after the one before it */
@keyframes tq-fill { from { width: 0; } }
.tq-bar { animation: tq-fill .9s cubic-bezier(.2, .8, .2, 1) both; }
.tq-bar-1 { animation-delay: .05s; }
.tq-bar-2 { animation-delay: .12s; }
.tq-bar-3 { animation-delay: .19s; }
.tq-bar-4 { animation-delay: .26s; }
.tq-bar-5 { animation-delay: .33s; }

/* ---- hover and press ------------------------------------------------------ */
/* .modecard: the name greens over .18s, the rule under it grows from its middle
   over .26s and the drawing's glow comes up over .22s. */
.tq-modecard .elementor-heading-title { transition: color .18s; }
.tq-rule .elementor-divider-separator { transition: transform .26s ease; }
.tq-modecard img { transition: filter .22s ease; }
/* .acc summary .pm: the "+" turns into a "x" over .2s as its question opens,
   and back as it closes. */
.tq-acc .e-n-accordion-item-title-icon .e-closed { transition: transform .2s; }
/* .tile: lifts 6px over .22s on the source's own curve (Elementor's lift
   eases in and out), its icon card glows with it, and its tag fades in. */
.e-con.tq-tile { transition: transform .22s var(--ease); }
.e-con.tq-tile-card { transition: box-shadow .22s var(--ease); }
.elementor-element.elementor-widget.tq-badge { transition: opacity .22s var(--ease); }
/* .modes: the pill's colours and its chevron change over .2s */
.tq-pill-toggle .e-n-accordion-item-title { transition: background .2s var(--ease), color .2s var(--ease); }
.tq-pill-toggle .e-n-accordion-item-title-icon .e-closed { transition: transform .2s var(--ease); }
/* .branch: the panel of modes fades in and drops 8px into place over .24s */
.e-con.tq-modes-float { transition: opacity .24s var(--ease), transform .24s var(--ease), visibility .24s; }
/* a.post .thumb: the picture's zoom takes .2s; once the card has come in, the
   reveal's own timing (above) replaces it and the zoom is instant, as on the
   source */
.tq-post .elementor-widget-image img { transition: transform .2s var(--ease); }
/* .ytplay::before: the play disc grows and greens over .2s */
.tq-play .elementor-custom-embed-play { transition: scale .2s var(--ease), background .2s var(--ease); }
/* Links: the source gives no link a transition, so a link's colour or its
   underline changes at once under the pointer. (Astra fades every link, and
   everything inside the header's and the footer's, over .2s.) */
a, .site-header a *, .site-footer a *, .main-header-menu .menu-link { transition: none; }
/* .btn, on the homepage's stylesheet: a button's colour eases over .16s on
   the source's curve. Elementor's fade every property on the default curve;
   the .16s is each button's own setting. The header's button is Astra's. */
html:has(.tq-rm-all) .elementor-widget-button .elementor-button { transition-property: background, transform; transition-timing-function: var(--ease); }
.site-header .ast-custom-button { transition: background .16s var(--ease), transform .16s var(--ease); }

/* ---- reduced motion, as each kind of page has it -------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* the homepage's stylesheet: everything still moves, but instantly */
  html:has(.tq-rm-all) *, html:has(.tq-rm-all) *::before, html:has(.tq-rm-all) *::after {
    transition-duration: .01ms !important; animation-duration: .01ms !important;
  }
  /* the product, solution, About and Contact pages: no animation at all */
  html:has(.tq-rv) * { animation: none !important; }
  .tq-rv, .tq-rv-with { opacity: 1 !important; translate: none !important; transition: none; }
}

/* ---- the brush under the hero's two words --------------------------------- */
/* The sweep belongs to the typewriter: held at nothing while the heading types,
   then drawn left to right, the second mark after the first. */
.tq-hand.tt .tq-brush,
.tq-hand.tt .tq-brush-y { background-size: 0 .80em; }
.tq-hand.tt-done .tq-brush { animation: brush-sweep .42s var(--ease) forwards; }
.tq-hand.tt-done .tq-brush-y { animation: brush-sweep .42s var(--ease) .17s forwards; }
@keyframes brush-sweep {
  from { background-size: 0 .80em; }
  to   { background-size: 100% .80em; }
}
@media (prefers-reduced-motion: reduce) {
  .tq-hand.tt .tq-brush,
  .tq-hand.tt .tq-brush-y { background-size: 100% .80em; }
  .tq-hand.tt-done .tq-brush,
  .tq-hand.tt-done .tq-brush-y { animation: none; }
}

/* ---- the typewriter (§31) ------------------------------------------------- */
/* LAST IN THE FILE ON PURPOSE, as on the original: `html.fx .rv-head.in` and
   `html.fx .rv-head.tt` are equally specific, and the typewriter has to win the
   heading it has taken over. tq-motion.js sets tt and tt-done on the block. */
.tq-hand.tt .tt-c { visibility: hidden; position: relative; }
.tq-hand.tt .tt-c.on { visibility: visible; }
.tq-hand.tt .tt-c.tt-at::after {
  content: "|";
  position: absolute;
  left: 100%;
  top: 0;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 400;
  color: #02A885;
  animation: tt-blink .53s steps(1, end) infinite alternate;
}
@keyframes tt-blink { from { opacity: 1; } to { opacity: 0; } }
html.fx .tq-wake-hero .tq-hero-h1.tt,
html.fx .tq-wake-hero .tq-hero-h1.tt-done { animation: none; }
html.fx .rv-head.tt,
html.fx .rv-head.tt-done { clip-path: none; translate: none; }
@media (prefers-reduced-motion: reduce) {
  .tq-hand.tt .tt-c { visibility: visible; }
  .tq-hand.tt .tt-c.tt-at::after { content: none; }
}