/* ==========================================================================
   Envision Creative: component and motion layer (25 October 2026)
   Enqueued by wp-content/novamira-sandbox/ec-audit-2026.php after style.css.
   Uses the theme's own tokens, easings and #roughen filters.
   Every entrance animation hangs off .is-in, which main.js adds on scroll,
   and adds at once when the visitor prefers reduced motion.
   ========================================================================== */

/* ---------- 1. Tags: hand-drawn, two passes of the pen, like .btn ---------- */
.svc__tags { gap: .65rem .7rem; padding-top: 1.1rem; }

.svc__tags span,
.ec-web__tech {
  position: relative;
  isolation: isolate;
  display: inline-block;
  padding: .42rem .85rem .38rem;
  border: 0;
  border-radius: 0;
  background: none;
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--paper-45);
  rotate: -1.4deg;
  transition: rotate .45s var(--ease-pop), color .35s, translate .45s var(--ease-out);
}
.svc__tags span:nth-child(even),
.ec-web__tech:nth-child(even) { rotate: 1.1deg; }
.svc__tags span:nth-child(3n),
.ec-web__tech:nth-child(3n) { rotate: -.5deg; }

/* pass one: the outline */
.svc__tags span::before,
.ec-web__tech::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border: 1.5px solid var(--paper-25);
  border-radius: var(--wonk-a);
  filter: url(#roughen);
  transition: border-color .35s, background-color .45s, border-radius .5s var(--ease-soft);
}
.svc__tags span:nth-child(even)::before,
.ec-web__tech:nth-child(even)::before { border-radius: var(--wonk-b); }

/* pass two: offset, leaning the other way, fainter */
.svc__tags span::after,
.ec-web__tech::after {
  content: ""; position: absolute; inset: -3px -5px; z-index: -1;
  border: 1px solid var(--paper-25);
  border-radius: var(--wonk-b);
  rotate: 1.8deg;
  opacity: .32;
  filter: url(#roughen);
  pointer-events: none;
  transition: rotate .5s var(--ease-pop), opacity .35s, inset .4s var(--ease-out), border-color .35s;
}

.svc:hover .svc__tags span,
.ec-web__tech:hover { color: var(--paper); rotate: 0deg; translate: 0 -1px; }
.svc:hover .svc__tags span::before,
.ec-web__tech:hover::before {
  border-color: rgba(16, 149, 221, .75);
  background-color: rgba(16, 149, 221, .09);
  border-radius: var(--wonk-c);
}
.svc:hover .svc__tags span::after,
.ec-web__tech:hover::after {
  opacity: .8; rotate: -1.8deg; inset: -5px -8px; border-color: var(--blue-hi);
}

/* ---------- 2. Service icons (Magnific, retraced as filled paths) ---------- */
.svc__ico.ec26-ico { width: 68px; height: 68px; overflow: visible; transform-origin: 35% 70%; transition: transform .6s var(--ease-pop); }
.svc__ico.ec26-ico path {
  fill: var(--blue);
  stroke: none;
  stroke-dasharray: none;
  stroke-dashoffset: 0;
  transition: fill .5s;
}
.svc:hover .svc__ico.ec26-ico { transform: rotate(-7deg) scale(1.08); }
.svc:hover .svc__ico.ec26-ico path { fill: var(--blue-hi); }

/* ---------- 3. Work tiles: an aligned 12-column grid ---------- */
.works.works--bento .work {
  border-radius: 6px;
  aspect-ratio: 4 / 3;
}
@media (min-width: 600px) {
  .works.works--bento {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-rows: clamp(200px, 21vw, 320px);
    grid-auto-flow: dense;
    gap: clamp(.9rem, 1.6vw, 1.4rem);
  }
  .works.works--bento > .work {
    flex: none;
    max-width: none;
    aspect-ratio: auto;
    min-height: 0;
    grid-column: auto / span var(--md-c, 6);
    grid-row: span var(--md-r, 1);
  }
}
@media (min-width: 960px) {
  .works.works--bento > .work {
    grid-column: var(--lg-s, auto) / span var(--lg-c, 6);
    grid-row: span var(--lg-r, 1);
  }
}
/* covers are composed with the key art in the upper half, clear of the label.
   Higher specificity than Elementor's `.elementor img { height: auto }`, which
   otherwise left the cover at its natural height on Elementor pages. */
.works.works--bento .work .work__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 30%;
}
/* every tile except the desktop feature carries a compact label, so the
   cover keeps its upper 60% on phones, tablets and the smaller desktop tiles */
.works.works--bento .work:not(.ec26-big) .work__label { padding: clamp(.85rem, 1.5vw, 1.25rem) clamp(1rem, 1.7vw, 1.4rem); }
.works.works--bento .work:not(.ec26-big) .work__label h3 { font-size: var(--step-1); line-height: 1.15; }
.works.works--bento .work:not(.ec26-big) .work__label p { font-size: .64rem; margin-bottom: .25rem; }
.works.works--bento .work:not(.ec26-big) .work__no { font-size: 1.1rem; margin-bottom: .25rem; }
.works.works--bento .work:not(.ec26-big) .work__go { width: 38px; height: 38px; }
@media (max-width: 959px) {
  .works.works--bento .work.ec26-big .work__label { padding: clamp(.85rem, 1.5vw, 1.25rem) clamp(1rem, 1.7vw, 1.4rem); }
  .works.works--bento .work.ec26-big .work__label h3 { font-size: var(--step-1); line-height: 1.15; }
  .works.works--bento .work.ec26-big .work__label p { font-size: .64rem; margin-bottom: .25rem; }
  .works.works--bento .work.ec26-big .work__no { font-size: 1.1rem; margin-bottom: .25rem; }
}
.works--bento > .work[hidden] { display: none; }

.works--bento .work__img { transition: transform 1.1s var(--ease-out), filter .7s; }
.works--bento .work:hover .work__img { transform: scale(1.05); filter: saturate(1.08); }
.works--bento .work:hover { transform: translateY(-4px); }

/* a hand-drawn frame that draws itself inside the tile on hover */
.works--bento .work::after {
  content: ""; position: absolute; inset: 14px; z-index: 2;
  border: 2px solid var(--paper);
  border-radius: var(--wonk-a);
  rotate: -.6deg;
  opacity: 0;
  filter: url(#roughen);
  pointer-events: none;
  transition: opacity .45s var(--ease-soft), inset .5s var(--ease-out), rotate .5s var(--ease-pop);
}
.works--bento .work:nth-child(even)::after { border-radius: var(--wonk-b); rotate: .7deg; }
.works--bento .work:hover::after { opacity: .55; inset: 10px; rotate: .4deg; }

.work__no {
  display: block;
  width: max-content;
  margin-bottom: .45rem;
  font-family: var(--hand);
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1;
  color: var(--blue-hi);
  rotate: -5deg;
  transition: rotate .45s var(--ease-pop);
}
.works--bento .work:hover .work__no { rotate: 3deg; }
@media (min-width: 960px) {
  .works--bento .work.ec26-big .work__label h3 { font-size: var(--step-3); }
}
.works--bento .work__label { transition: transform .6s var(--ease-out); }
.works--bento .work:hover .work__label { transform: translateY(-4px); }

/* ---------- 4. Reading progress, drawn with the pen ---------- */
.ec26-progress {
  position: fixed; left: 0; top: 0; z-index: 9999;
  width: 100%; height: 3px;
  background: var(--blue);
  transform-origin: 0 50%;
  transform: scaleX(0);
  pointer-events: none;
  filter: url(#roughen-soft);
  display: none;
}
@supports (animation-timeline: scroll()) {
  .ec26-progress { display: block; animation: ec26-progress linear both; animation-timeline: scroll(root); }
}
@keyframes ec26-progress { to { transform: scaleX(1); } }

/* ---------- 5. Entrances (motion only when the visitor allows it) ---------- */
@media (prefers-reduced-motion: no-preference) {

  /* icons wipe in left to right, staggered across the grid */
  .svc__ico.ec26-ico { clip-path: inset(0 100% 0 0); transition: clip-path 1.2s var(--ease-out), transform .6s var(--ease-pop); }
  .is-in .svc__ico.ec26-ico { clip-path: inset(0 0 0 0); }
  .is-in .svc:nth-child(2) .svc__ico.ec26-ico { transition-delay: .12s, 0s; }
  .is-in .svc:nth-child(3) .svc__ico.ec26-ico { transition-delay: .24s, 0s; }
  .is-in .svc:nth-child(4) .svc__ico.ec26-ico { transition-delay: .36s, 0s; }
  .is-in .svc:nth-child(5) .svc__ico.ec26-ico { transition-delay: .48s, 0s; }
  .is-in .svc:nth-child(6) .svc__ico.ec26-ico { transition-delay: .60s, 0s; }

  /* tags stamp on, one after another */
  .svc__tags span, .ec-web__tech { opacity: 0; }
  .is-in .svc__tags span, .is-in .ec-web__tech { animation: ec26-stamp .6s var(--ease-pop) calc(.55s + var(--d, 0s)) both; }
  .svc__tags span:nth-child(2), .ec-web__tech:nth-child(2) { --d: .08s; }
  .svc__tags span:nth-child(3), .ec-web__tech:nth-child(3) { --d: .16s; }
  .svc__tags span:nth-child(4), .ec-web__tech:nth-child(4) { --d: .24s; }
  .svc__tags span:nth-child(5), .ec-web__tech:nth-child(5) { --d: .32s; }

  /* work tiles open from the bottom, the image settles */
  .works--bento .work.rv { clip-path: inset(22% 0 0 0 round 6px); }
  .is-in .works--bento .work.rv {
    clip-path: inset(0 0 0 0 round 6px);
    transition: opacity .9s var(--ease-out), transform .9s var(--ease-out), clip-path 1.25s var(--ease-out);
  }
  .is-in .works--bento .work__img { animation: ec26-settle 1.7s var(--ease-out) backwards; }
  .is-in .works--bento .work:nth-child(2) .work__img { animation-delay: .08s; }
  .is-in .works--bento .work:nth-child(3) .work__img { animation-delay: .16s; }
  .is-in .works--bento .work:nth-child(4) .work__img { animation-delay: .24s; }
  .is-in .works--bento .work:nth-child(5) .work__img { animation-delay: .32s; }
  .is-in .works--bento .work:nth-child(6) .work__img { animation-delay: .40s; }

  /* the eyebrow eye blinks once as its section arrives */
  .is-in .eyebrow::before { animation: ec26-blink 3.2s var(--ease-soft) .7s 1; transform-origin: 50% 50%; }
}

@keyframes ec26-stamp {
  0%   { opacity: 0; scale: .55; }
  60%  { opacity: 1; scale: 1.08; }
  100% { opacity: 1; scale: 1; }
}
@keyframes ec26-settle { from { transform: scale(1.14); } to { transform: scale(1); } }
@keyframes ec26-blink {
  0%, 7%, 100% { transform: scaleY(1); }
  3.5%         { transform: scaleY(.08); }
}

@media (prefers-reduced-motion: reduce) {
  .ec26-progress { display: none; }
}

/* ---------- 6. Tic Tonic hero: the billboard runs full width ----------
   assets/tictonic.css caps the hero as a portrait product plate. The hero is
   now the landscape billboard (2:1), so it spans the column like other heroes. */
.single-ec_project.postid-131 .project__hero { width: 100%; display: block; }
.single-ec_project.postid-131 .project__hero img { width: 100%; height: auto; max-height: none; aspect-ratio: 2400 / 1208; }

/* ---------- 7. Client wall: one card per client ----------
   Markup from novamira-sandbox/ec26-clients.php. Each logo carries its own
   --lw (width, from its measured shape and ink) and --dx/--dy (centres the
   mark when the file has uneven padding). */
.ec26-cw { margin-top: clamp(2.2rem, 4.5vw, 3.6rem); }
.ec26-cw ul { list-style: none; margin: 0; padding: 0; }

.ec26-cw__cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(.55rem, 1vw, .9rem);
}
@media (min-width: 700px)  { .ec26-cw__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 960px)  { .ec26-cw__cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .ec26-cw__cards { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.ec26-cw__item { display: grid; min-width: 0; }

.ec26-cw__card {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-rows: auto 1fr;
  min-height: clamp(168px, 15vw, 218px);
  padding: clamp(.75rem, 1.2vw, 1rem) clamp(.8rem, 1.3vw, 1.1rem);
  border: 1px solid var(--line);
  border-radius: 6px;
  background:
    radial-gradient(110% 80% at 50% 36%, rgba(16, 149, 221, .08), transparent 64%),
    var(--ink-2);
  color: var(--paper);
  text-decoration: none;
  overflow: hidden;
  transition: border-color .45s var(--ease-soft), transform .6s var(--ease-out);
}
.ec26-cw__plate { position: relative; display: block; height: clamp(84px, 8vw, 116px); margin-top: .95rem; }
.ec26-cw__logo {
  position: absolute; left: 50%; top: 50%;
  width: var(--lw, 60%); height: auto;
  transform: translate(calc(-50% + var(--dx, 0%)), calc(-50% + var(--dy, 0%)));
  opacity: .88;
  pointer-events: none;
  transition: transform .7s var(--ease-out), opacity .45s var(--ease-soft);
}
.ec26-cw__no {
  position: absolute; top: clamp(.6rem, 1vw, .85rem); left: clamp(.8rem, 1.3vw, 1.1rem);
  font-family: var(--hand); font-weight: 700; font-size: 1rem; line-height: 1;
  color: var(--blue-hi); rotate: -5deg;
  transition: rotate .45s var(--ease-pop);
}
.ec26-cw__cap { display: grid; align-self: end; gap: .2rem; padding-top: .6rem; padding-right: 2.1rem; min-width: 0; }
.ec26-cw__title { font-size: .88rem; font-weight: 600; line-height: 1.25; }
.ec26-cw__note {
  font-size: .56rem; font-weight: 600; letter-spacing: .13em; line-height: 1.4;
  text-transform: uppercase; color: var(--paper-45);
}
.ec26-cw__go {
  position: absolute; right: clamp(.7rem, 1.2vw, 1rem); bottom: clamp(.7rem, 1.2vw, .95rem);
  display: grid; place-items: center; width: 28px; height: 28px;
  border: 1.5px solid var(--paper-25); border-radius: var(--wonk-a);
  filter: url(#roughen);
  color: var(--paper);
  transition: border-color .35s, background-color .35s, rotate .45s var(--ease-pop);
}
/* the hand-drawn frame that draws itself in on hover, as on the work tiles */
.ec26-cw__frame {
  position: absolute; inset: 9px; z-index: -1;
  border: 1.5px solid var(--paper); border-radius: var(--wonk-b);
  rotate: -.6deg; opacity: 0;
  filter: url(#roughen); pointer-events: none;
  transition: opacity .45s var(--ease-soft), inset .5s var(--ease-out), rotate .5s var(--ease-pop);
}
.ec26-cw__item:nth-child(even) .ec26-cw__frame { border-radius: var(--wonk-a); rotate: .7deg; }
.ec26-cw__card:hover { border-color: rgba(16, 149, 221, .45); }
a.ec26-cw__card:hover { transform: translateY(-3px); }
.ec26-cw__card:hover .ec26-cw__frame { opacity: .32; inset: 6px; rotate: .3deg; }
.ec26-cw__card:hover .ec26-cw__logo { opacity: 1; transform: translate(calc(-50% + var(--dx, 0%)), calc(-50% + var(--dy, 0%))) scale(1.06); }
.ec26-cw__card:hover .ec26-cw__no { rotate: 3deg; }
.ec26-cw__card:hover .ec26-cw__go { border-color: var(--blue-hi); background-color: rgba(16, 149, 221, .14); rotate: -8deg; }
.ec26-cw__card:focus-visible { outline: 3px solid var(--blue-hi); outline-offset: 3px; }

/* "and yours?" always closes the last row, however many clients there are */
.ec26-cw__item--you { grid-column: span var(--y2, 1); }
@media (min-width: 700px)  { .ec26-cw__item--you { grid-column: span var(--y3, 1); } }
@media (min-width: 960px)  { .ec26-cw__item--you { grid-column: span var(--y4, 1); } }
@media (min-width: 1200px) { .ec26-cw__item--you { grid-column: span var(--y5, 1); } }
.ec26-cw__you {
  display: flex; align-items: center; justify-content: center; gap: .7rem;
  min-height: 96px;
  background: var(--ink);
  border-style: dashed;
}
.ec26-cw__you svg { width: 34px; height: 22px; fill: none; stroke: var(--paper-45); stroke-width: 1.6; transition: stroke .4s, transform .6s var(--ease-pop); }
.ec26-cw__you > span:not(.ec26-cw__frame) {
  font-family: var(--hand); font-weight: 700; font-size: clamp(1.05rem, .95rem + .5vw, 1.4rem);
  color: var(--paper-70, rgba(244, 241, 234, .7)); rotate: -3deg; transition: color .4s, rotate .45s var(--ease-pop);
}
.ec26-cw__you:hover > span:not(.ec26-cw__frame) { color: var(--paper); rotate: 0deg; }
.ec26-cw__you:hover svg { stroke: var(--blue-hi); transform: scaleY(.15); }

@media (prefers-reduced-motion: no-preference) {
  /* the cards deal in one after another as the section arrives */
  .ec26-cw__item { opacity: 0; translate: 0 14px; }
  .is-in .ec26-cw__item {
    opacity: 1; translate: 0 0;
    transition: opacity .7s var(--ease-out), translate .8s var(--ease-out);
    transition-delay: calc(.2s + var(--i, 0) * 35ms);
  }
}
@media (prefers-reduced-motion: reduce) {
  .ec26-cw__card, .ec26-cw__logo, .ec26-cw__frame, .ec26-cw__no, .ec26-cw__go { transition: none; }
}

/* phones: two to a row, so the cards carry the logo and the name only */
@media (max-width: 699px) {
  .ec26-cw__card { min-height: 146px; padding: .65rem .7rem; }
  .ec26-cw__plate { height: 70px; margin-top: .75rem; }
  .ec26-cw__no { font-size: .85rem; top: .55rem; left: .7rem; }
  .ec26-cw__title { font-size: 12.5px; line-height: 1.25; }
  .ec26-cw__note { display: none; }
  .ec26-cw__cap { padding-right: 1.7rem; }
  .ec26-cw__go { width: 24px; height: 24px; right: .6rem; bottom: .6rem; }
  .ec26-cw__go svg { width: 10px; height: 10px; }
  .ec26-cw__you { min-height: 80px; }
}