/* ==========================================================================
   Tind-All — OPT-IN EFFECTS (only act where a tm- class is added in Divi)
   Safe to remove: delete assets/css/effects.css and its entry in inc/enqueue.php.
   Works with or without global.css.
   ========================================================================== */

:root {
  /* Approved brand palette (mirrors Divi --gcid-* globals) */
  --tm-teal:        var(--gcid-primary-color, #064f56);
  --tm-teal-deep:   var(--gcid-eqqroitnra, #143f43);
  --tm-teal-accent: #69c9c1;                         /* hero highlight text */
  --tm-plum:        var(--gcid-secondary-color, #a33c73);
  --tm-cream:       var(--gcid-9azvugp92v, #e7e4b5);
  --tm-ink:         var(--gcid-heading-color, #263437);
  --tm-body:        var(--gcid-body-color, #181818);
  --tm-link:        var(--gcid-link-color, #2e86ab);
  --tm-mist:        var(--gcid-m6tu6d6rnx, #f4f7f6);

  /* Motion system */
  --tm-ease:        cubic-bezier(.22, .61, .36, 1);
  --tm-ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --tm-fast:  .2s;
  --tm-med:   .45s;
  --tm-slow:  .8s;

  /* Depth system (teal-tinted shadows read warmer than grey) */
  --tm-shadow-sm: 0 2px 6px rgba(6, 79, 86, .06), 0 1px 2px rgba(6, 79, 86, .08);
  --tm-shadow-md: 0 10px 24px -6px rgba(6, 79, 86, .14), 0 4px 8px -4px rgba(6, 79, 86, .10);
  --tm-shadow-lg: 0 24px 48px -12px rgba(6, 79, 86, .22);
  --tm-radius:    14px;
}

/* --------------------------------------------------------------------------
   2. SCROLL REVEAL (opt-in classes; content is always visible without JS
      and inside the Divi builder)
   -------------------------------------------------------------------------- */
.tm-js .tm-reveal,
.tm-js .tm-reveal-up,
.tm-js .tm-reveal-left,
.tm-js .tm-reveal-right,
.tm-js .tm-reveal-zoom,
.tm-js .tm-stagger > * {
  opacity: 0;
  transition: opacity var(--tm-slow) var(--tm-ease), transform var(--tm-slow) var(--tm-ease), filter var(--tm-slow) var(--tm-ease);
  transition-delay: var(--tm-delay, 0s);
  will-change: opacity, transform;
}
.tm-js .tm-reveal,
.tm-js .tm-reveal-up,
.tm-js .tm-stagger > *  { transform: translateY(28px); }
.tm-js .tm-reveal-left  { transform: translateX(-40px); }
.tm-js .tm-reveal-right { transform: translateX(40px); }
.tm-js .tm-reveal-zoom  { transform: scale(.94); filter: blur(4px); }

.tm-js .tm-in,
.tm-js .tm-stagger.tm-in > * { opacity: 1; transform: none; filter: none; }

/* Headline lines rise in one after another (JS wraps lines) */
.tm-split .tm-line { display: block; overflow: hidden; padding-bottom: .06em; }
.tm-split .tm-line > span { display: inline-block; }
.tm-js .tm-split .tm-line > span { transform: translateY(105%); transition: transform 1s var(--tm-ease); transition-delay: var(--tm-delay, 0s); }
.tm-js .tm-split.tm-in .tm-line > span { transform: none; }

/* --------------------------------------------------------------------------
   3. CARD & SURFACE EFFECTS (opt-in)
   -------------------------------------------------------------------------- */

/* Lift card — service grid, blog cards, org cards, contact option cards */
.tm-card-lift {
  transition: transform var(--tm-med) var(--tm-ease), box-shadow var(--tm-med) var(--tm-ease), background-color var(--tm-med) var(--tm-ease), border-color var(--tm-med) !important;
  position: relative;
}
.tm-card-lift:hover { transform: translateY(-6px); box-shadow: var(--tm-shadow-lg); z-index: 2; }
.tm-card-lift img, .tm-card-lift .et-pb-icon, .tm-card-lift .et_pb_image_wrap {
  transition: transform var(--tm-med) var(--tm-ease-spring);
}
.tm-card-lift:hover img, .tm-card-lift:hover .et-pb-icon { transform: translateY(-3px) rotate(-6deg) scale(1.06); }

/* Rising fill card — teal rises from the bottom on hover and drops back on mouse-out.
   Works on .tm-card-fill AND automatically on your existing .green-on-hover cards
   (its instant background swap is replaced by the rising fill). */
.tm-card-fill,
.et_pb_column.green-on-hover,
.et_pb_module.green-on-hover,
.et_pb_group.green-on-hover { position: relative; isolation: isolate; overflow: hidden; }

.tm-card-fill::before,
.et_pb_column.green-on-hover::before,
.et_pb_module.green-on-hover::before,
.et_pb_group.green-on-hover::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--tm-teal);
  transform: scaleY(0); transform-origin: 50% 100%;
  transition: transform .55s var(--tm-ease);
}
.tm-card-fill:hover::before,
.tm-card-fill:focus-within::before,
.et_pb_column.green-on-hover:hover::before,
.et_pb_module.green-on-hover:hover::before,
.et_pb_group.green-on-hover:hover::before { transform: scaleY(1); }

/* Cancel the old instant background so only the rising fill shows */
html body .et_pb_column.green-on-hover:hover,
html body .et_pb_module.green-on-hover:hover,
html body .et_pb_group.green-on-hover:hover,
html body .tm-card-fill:hover { background-color: transparent !important; }

/* Text and icons fade to white as the fill rises, back to normal as it drops */
.tm-card-fill *, .green-on-hover * {
  transition: color .3s ease, fill .3s ease, stroke .3s ease, filter .3s ease, border-color .3s ease !important;
}
.tm-card-fill:hover *, .green-on-hover:hover * { transition-delay: .12s !important; }
.tm-card-fill:hover, .tm-card-fill:hover h1, .tm-card-fill:hover h2, .tm-card-fill:hover h3, .tm-card-fill:hover h4,
.tm-card-fill:hover p, .tm-card-fill:hover span, .tm-card-fill:hover li { color: #fff !important; }
.tm-card-fill:hover a { color: var(--tm-cream) !important; }
.tm-card-fill:hover svg, .tm-card-fill:hover i { color: #fff !important; fill: #fff !important; stroke: #fff !important; }
.tm-card-fill:hover img { filter: brightness(0) invert(1); }
/* keep Divi buttons inside cards on their own transitions */
.tm-card-fill .et_pb_button, .green-on-hover .et_pb_button { transition-delay: 0s !important; }

/* Cursor spotlight on cards (JS feeds --mx/--my) */
.tm-spotlight { position: relative; overflow: hidden; }
.tm-spotlight::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(231,228,181,.22), transparent 45%);
  opacity: 0; transition: opacity var(--tm-med);
}
.tm-spotlight:hover::after { opacity: 1; }

/* Image zoom inside its frame */
.tm-img-zoom { overflow: hidden; }
.tm-img-zoom img { transition: transform 1.2s var(--tm-ease) !important; }
.tm-img-zoom:hover img { transform: scale(1.06); }

/* 3D tilt for hero mockups / featured images (JS) */
.tm-tilt { transform-style: preserve-3d; transition: transform var(--tm-med) var(--tm-ease); will-change: transform; }

/* Gentle float — hero “Woman-owned” tag, map pins, play buttons */
.tm-float { animation: tm-float 6s ease-in-out infinite; }
@keyframes tm-float {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -10px; }
}

/* Pulse ring — play buttons & the “Meet our team” circle */
.tm-pulse { position: relative; }
.tm-pulse::after {
  content: ""; position: absolute; inset: -6px; border-radius: 50%;
  border: 2px solid var(--tm-cream); opacity: .7;
  animation: tm-pulse 2.4s var(--tm-ease) infinite; pointer-events: none;
}
@keyframes tm-pulse { from { transform: scale(.9); opacity: .7; } to { transform: scale(1.35); opacity: 0; } }

/* Slow-spinning circular text badge (“Meet our team”) */
.tm-spin { animation: tm-spin 18s linear infinite; }
.tm-spin:hover { animation-play-state: paused; }
@keyframes tm-spin { to { rotate: 360deg; } }

/* --------------------------------------------------------------------------
   4. SECTION ATMOSPHERE (opt-in, add to a Section)
   -------------------------------------------------------------------------- */

/* Teal sections: soft light pools + fine grain so flat teal feels premium */
.tm-section-glow { position: relative; isolation: isolate; overflow: hidden; }
.tm-section-glow::before {
  content: ""; position: absolute; inset: -30%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(38% 60% at 15% 25%, rgba(105, 201, 193, .42), transparent 70%),
    radial-gradient(30% 50% at 85% 80%, rgba(231, 228, 181, .22), transparent 70%),
    radial-gradient(25% 40% at 55% 10%, rgba(105, 201, 193, .18), transparent 70%);
  animation: tm-drift 14s ease-in-out infinite alternate;
}
.tm-section-glow::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}
.tm-section-glow::after { opacity: .10; }
@keyframes tm-drift {
  0%   { transform: translate3d(-6%, 0, 0) scale(1); }
  50%  { transform: translate3d(4%, -4%, 0) scale(1.08); }
  100% { transform: translate3d(8%, 3%, 0) scale(1.02); }
}

/* Light sections: faint dotted grid behind content */
.tm-section-dots { position: relative; isolation: isolate; }
.tm-section-dots::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgba(6, 79, 86, .10) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
          mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
}

/* Section divider: soft curved edge at the bottom of a section */
.tm-curve-bottom { clip-path: ellipse(120% 100% at 50% 0%); }

/* --------------------------------------------------------------------------
   5. TYPOGRAPHIC ACCENTS (opt-in) — same fonts, just motion
   -------------------------------------------------------------------------- */

/* Eyebrow labels (“— INTRODUCTION”): the little line draws in */
.tm-eyebrow { position: relative; letter-spacing: .14em !important; }
.tm-js .tm-eyebrow.tm-reveal::before,
.tm-js .tm-eyebrow::before { transition: width var(--tm-slow) var(--tm-ease); }

/* Hand-drawn underline in cream that draws under a phrase (wrap phrase in <span class="tm-scribble">) */
.tm-scribble { position: relative; white-space: nowrap; }
.tm-scribble::after {
  content: ""; position: absolute; left: -2%; right: -2%; bottom: -.12em; height: .35em; z-index: -1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8 C 50 2, 120 2, 198 7' stroke='%23e7e4b5' stroke-width='4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.1s var(--tm-ease) .3s;
}
.tm-in .tm-scribble::after, .tm-scribble.tm-in::after { clip-path: inset(0 0 0 0); }
.tm-js .tm-scribble { isolation: isolate; }

/* Highlight word in hero (“Let’s Make Sure People Know It.”) shimmers once on load */
.tm-shimmer {
  background: linear-gradient(100deg, var(--tm-teal-accent) 40%, #b9ece6 50%, var(--tm-teal-accent) 60%) 0 0 / 250% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  animation: tm-shimmer 2.6s var(--tm-ease) .8s 1 both;
}
@keyframes tm-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* --------------------------------------------------------------------------
   6. COMPONENT RECIPES (opt-in)
   -------------------------------------------------------------------------- */

/* Expanding panels — homepage “We Start By Listening…” strip.
   Add .tm-panels to the ROW, the columns expand on hover. */
@media (min-width: 981px) {
  .tm-panels { display: flex !important; gap: 6px; }
  .tm-panels > .et_pb_column {
    flex: 1 1 0 !important; min-width: 0; width: auto !important; margin: 0 !important;
    transition: flex-grow .7s var(--tm-ease), filter var(--tm-med) !important;
    overflow: hidden; border-radius: 10px; cursor: pointer;
  }
  .tm-panels:hover > .et_pb_column { filter: saturate(.7) brightness(.85); }
  .tm-panels > .et_pb_column:hover { flex-grow: 2.6 !important; filter: none; }
  .tm-panels > .et_pb_column [class*="background"] { transition: transform 1.2s var(--tm-ease); }
  .tm-panels > .et_pb_column:hover [class*="background"] { transform: scale(1.05); }
}

/* Process / timeline steps: connector line fills as you scroll (JS sets --tm-progress) */
.tm-steps { position: relative; }
.tm-steps::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px;
  background: linear-gradient(90deg, var(--tm-cream) calc(var(--tm-progress, 0) * 100%), rgba(231,228,181,.2) 0);
  pointer-events: none;
}

/* Numbered list with animated numbers — homepage “Our Process” */
.tm-numbered { counter-reset: tm; }
.tm-numbered h4, .tm-numbered h3 { position: relative; }

/* Stat tiles — subtle border glow + count-up handled by JS */
.tm-stat { transition: transform var(--tm-med) var(--tm-ease), box-shadow var(--tm-med); }
.tm-stat:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px rgba(231,228,181,.35), 0 18px 40px -18px rgba(0,0,0,.5); }

/* Testimonial cards: clamp long reviews with a “Read more” toggle (JS) */
.tm-clamp .tm-clamp-body { display: -webkit-box; -webkit-line-clamp: var(--tm-lines, 6); -webkit-box-orient: vertical; overflow: hidden; }
.tm-clamp.tm-open .tm-clamp-body { -webkit-line-clamp: unset; display: block; }
.tm-clamp-toggle {
  margin-top: .6em; background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-weight: 600; color: var(--tm-teal);
}
.tm-clamp-toggle::after { content: " ↓"; display: inline-block; transition: transform var(--tm-fast); }
.tm-clamp.tm-open .tm-clamp-toggle::after { transform: rotate(180deg); }

/* Equal-height cards with the link pinned to the bottom (org cards, blog cards) */
.tm-equal { display: flex !important; flex-direction: column; }
.tm-equal > :last-child { margin-top: auto !important; }

/* Resource directory live filter (input injected by JS above .tm-directory) */
.tm-filter {
  display: flex; gap: .75rem; align-items: center; margin: 0 0 1.5rem;
  padding: .35rem .35rem .35rem 1.1rem; border-radius: 999px;
  background: #fff; box-shadow: var(--tm-shadow-md); border: 1px solid rgba(6,79,86,.12);
}
.tm-filter input { flex: 1; border: 0; outline: 0; font: inherit; font-size: 16px; padding: .7rem 0; background: transparent; color: var(--tm-body); }
.tm-filter .tm-filter-count { font-size: 13px; color: var(--tm-teal); background: var(--tm-mist); padding: .45rem .9rem; border-radius: 999px; white-space: nowrap; }
.tm-hide { display: none !important; }

/* Animated SVG paths — CT→MT dashed route, “You → Deirdre → Right Person” line.
   Add .tm-draw to the module containing the SVG. */
.tm-js .tm-draw path, .tm-js .tm-draw line, .tm-js .tm-draw polyline {
  stroke-dasharray: var(--tm-len, 1000); stroke-dashoffset: var(--tm-len, 1000);
  transition: stroke-dashoffset 2.2s var(--tm-ease);
}
.tm-js .tm-draw.tm-in path, .tm-js .tm-draw.tm-in line, .tm-js .tm-draw.tm-in polyline { stroke-dashoffset: 0; }
.tm-dash-flow path[stroke-dasharray], .tm-dash-flow line { animation: tm-dash 1.6s linear infinite; }
@keyframes tm-dash { to { stroke-dashoffset: -24; } }

/* Back-to-top button (footer ↑) */
.tm-to-top { transition: transform var(--tm-fast) var(--tm-ease-spring), background-color var(--tm-fast); }
.tm-to-top:hover { transform: translateY(-4px); background-color: var(--tm-cream) !important; color: var(--tm-teal) !important; }

/* Shared keyframes */
@keyframes tm-fade-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }


/* Respect "reduce motion" */
@media (prefers-reduced-motion: reduce) {
  [class*="tm-"], [class*="tm-"]::before, [class*="tm-"]::after, .tm-stagger > * {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important;
  }
  .tm-js .tm-reveal, .tm-js .tm-reveal-up, .tm-js .tm-reveal-left, .tm-js .tm-reveal-right,
  .tm-js .tm-reveal-zoom, .tm-js .tm-stagger > *, .tm-js .tm-split .tm-line > span { opacity: 1 !important; transform: none !important; filter: none !important; }
  .tm-js .tm-draw path, .tm-js .tm-draw line { stroke-dashoffset: 0 !important; }
}

/* Never hide anything inside the Divi Visual Builder */
.et-fb .tm-reveal, .et-fb .tm-stagger > *, .et-fb [class*="tm-reveal"] { opacity: 1 !important; transform: none !important; }