/* Free PDF Tools hub — hero search/filter, tool cards, bridge, closing CTA.
   Page-specific rules only; every colour/space/type value below is a token
   already defined in styles/tokens.css. This file is never loaded outside
   tools.html, so class names intentionally do not collide with home.css. */

/* ---- Hero ---- */
.tools-hero{ position: relative; overflow: hidden; }
.tools-hero__glow{
  position: absolute; inset: -30% -10% -15% -10%;
  background: radial-gradient(60% 60% at 50% 0%, rgba(255,255,255,0.30), transparent 70%);
  z-index: 0; pointer-events: none;
}
.tools-hero__inner{ position: relative; z-index: 1; max-width: 700px; margin-inline: auto; text-align: center; }
.tools-hero__inner .eyebrow{ justify-content: center; }
.tools-hero__inner h1{ margin-top: var(--space-5); }
.tools-hero__inner .lede{ margin-top: var(--space-5); max-width: 560px; margin-inline: auto; }
.tools-hero__note{ margin-top: var(--space-5); font-size: var(--text-small); color: rgba(255,255,255,0.85); }

/* ---- Search ---- */
.tools-search{ position: relative; max-width: 560px; margin: var(--space-7) auto 0; }
.tools-search__icon{
  position: absolute; left: 20px; top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px; color: var(--ink-500); pointer-events: none;
}
.tools-search__input{
  padding-left: 52px; height: 60px; border-radius: var(--radius-full);
  font-size: var(--text-body-lg); box-shadow: var(--shadow-lg); border-color: transparent;
}

/* ---- Category filter chips ---- */
.filter-chips{ display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); margin-top: var(--space-6); }
.filter-chip{ border: none; cursor: pointer; font-family: inherit; }
.filter-chip.is-active{ background: var(--white); color: var(--blue-700); }

/* ---- Section intros (page-local equivalent of the homepage's .section-head) ---- */
.tools-intro{ max-width: 640px; margin-bottom: var(--space-8); }
.tools-intro .eyebrow{ margin-bottom: var(--space-3); }

/* ---- Tool card — richer variant of .tool-tile: icon, title, description, link ---- */
.tool-card{ display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.tool-card[hidden]{ display: none; } /* .tool-card sets display:flex above, so [hidden] alone
                                          would otherwise lose to it — restate it explicitly. */
.tool-card__icon{
  width: 44px; height: 44px; flex-shrink: 0; border-radius: var(--radius-md);
  background: var(--blue-50); color: var(--blue-600);
  display: flex; align-items: center; justify-content: center;
}
.tool-card__icon--lg{ width: 56px; height: 56px; }
.tool-card__icon--lg svg{ width: 26px; height: 26px; }
.tool-card__title{ margin-top: var(--space-1); }
.tool-card__desc{ flex-grow: 1; }
.tool-card__link{ margin-top: var(--space-2); }

.tool-card--featured{ max-width: 400px; width: 100%; margin-inline: auto; padding: var(--space-7); }
.tool-card--featured .tool-card__desc{ font-size: var(--text-body); }

/* ---- "No tools match" empty state ---- */
.tools-empty{ text-align: center; }
.tools-empty__icon{ width: 40px; height: 40px; color: var(--ink-300); margin-inline: auto; }
.tools-empty p{ margin-top: var(--space-5); }
.tools-empty button{ margin-top: var(--space-4); }

/* ---- Bridge: free tools -> e-signature ---- */
.tools-bridge__doc{ max-width: 380px; margin-inline: auto; }
.tools-bridge__actions{ margin-top: var(--space-7); display: flex; gap: var(--space-5); flex-wrap: wrap; align-items: center; }

/* ---- Closing CTA band ---- */
.tools-cta__actions{ margin-top: var(--space-7); display: flex; justify-content: center; gap: var(--space-4); flex-wrap: wrap; }
.tools-cta__note{ margin-top: var(--space-5); font-size: var(--text-small); color: rgba(255,255,255,0.85); }

@media (max-width: 560px){
  .tools-search__input{ height: 54px; font-size: var(--text-body); }
  .tools-search__icon{ left: 18px; }
}

/* ==========================================================================
   Autoplay "tools at work" loop ("Watch them work")
   One shared 15s infinite timeline, same technique as the homepage signing
   loop: every animated element gets its own @keyframes whose appearance
   window is a percentage of the cycle — MERGE ≈2–30%, COMPRESS ≈34–62%,
   CONVERT ≈66–94% — and everything fades to opacity 0 at 96–100% so the
   restart is clean. Pop-ins overshoot via cubic-bezier timing functions
   declared inside their starting keyframes. Silent, no controls.
   ========================================================================== */

.tl-loop-head{ margin-inline: auto; text-align: center; }

/* Pulsing "live" dot in the section eyebrow */
.tl-loop-live-dot{
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--orange-500); margin-right: 2px;
  animation: tl-loop-live-pulse 2s var(--ease-out) infinite;
}
@keyframes tl-loop-live-pulse{
  0%{ box-shadow: 0 0 0 0 rgba(255,122,51,0.45); }
  70%{ box-shadow: 0 0 0 9px rgba(255,122,51,0); }
  100%{ box-shadow: 0 0 0 0 rgba(255,122,51,0); }
}

.tl-loop-demo{ max-width: 640px; margin-inline: auto; }

/* ---- Tool-name label chips in the titlebar (stacked, one at a time) ---- */
.tl-loop-status{ margin-left: auto; position: relative; display: inline-flex; min-width: 96px; height: 24px; }
.tl-loop-chip{ position: absolute; right: 0; top: 0; white-space: nowrap; opacity: 0; }
.tl-loop-chip--merge{    animation: tl-loop-chip-merge    15s linear infinite; }
.tl-loop-chip--compress{ animation: tl-loop-chip-compress 15s linear infinite; }
.tl-loop-chip--convert{  animation: tl-loop-chip-convert  15s linear infinite; }
/* .tl-loop-chip--idle stays hidden — it only surfaces in the reduced-motion
   static state at the bottom of this file. */
@keyframes tl-loop-chip-merge{    0%{opacity:1;} 30%{opacity:1;} 33%{opacity:0;} 100%{opacity:0;} }
@keyframes tl-loop-chip-compress{ 0%,30%{opacity:0;} 33%{opacity:1;} 62%{opacity:1;} 65%{opacity:0;} 100%{opacity:0;} }
@keyframes tl-loop-chip-convert{  0%,62%{opacity:0;} 65%{opacity:1;} 96%{opacity:1;} 100%{opacity:0;} }

/* ---- Stage: three absolutely-stacked scenes inside the window body ---- */
.tl-loop-stage{
  position: relative; min-height: 260px;
  --tl-slide: 430px; /* off-canvas start offset for the merge cards */
  --tl-meet: 96px;   /* where the two cards pause, either side of centre */
}
.tl-loop-scene{
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
}
.tl-loop-scene--merge{    animation: tl-loop-scene-merge    15s linear infinite; }
.tl-loop-scene--compress{ animation: tl-loop-scene-compress 15s linear infinite; }
.tl-loop-scene--convert{  animation: tl-loop-scene-convert  15s linear infinite; perspective: 900px; }
@keyframes tl-loop-scene-merge{    0%,2%{opacity:0;} 4.5%{opacity:1;} 28%{opacity:1;} 31%{opacity:0;} 100%{opacity:0;} }
@keyframes tl-loop-scene-compress{ 0%,33%{opacity:0;} 36%{opacity:1;} 60%{opacity:1;} 63%{opacity:0;} 100%{opacity:0;} }
@keyframes tl-loop-scene-convert{  0%,65%{opacity:0;} 68%{opacity:1;} 96%{opacity:1;} 100%{opacity:0;} }

/* ---- Mini file card, shared across all three vignettes ---- */
.tl-loop-file{
  position: relative;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; white-space: nowrap;
  background: var(--white); border: var(--border-hairline-strong);
  border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
}
.tl-loop-file__icon{
  width: 28px; height: 28px; flex-shrink: 0; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
}
.tl-loop-file__icon--pdf{  background: var(--orange-50); color: var(--orange-700); }
.tl-loop-file__icon--docx{ background: var(--blue-50);   color: var(--blue-700); }
.tl-loop-file__name{ font-size: var(--text-micro); font-weight: 600; color: var(--ink-900); }
.tl-loop-file__meta{ display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }

/* ---- Vignette 1 · MERGE: two cards slide in, squash together, become one ---- */
.tl-loop-file--a,
.tl-loop-file--b{ position: absolute; left: 50%; top: 50%; opacity: 0; }
.tl-loop-file--a{
  transform: translate(calc(-50% - var(--tl-slide)), -50%) scaleX(1);
  animation: tl-loop-merge-a 15s linear infinite;
}
.tl-loop-file--b{
  transform: translate(calc(-50% + var(--tl-slide)), -50%) scaleX(1);
  animation: tl-loop-merge-b 15s linear infinite;
}
@keyframes tl-loop-merge-a{
  0%,2%{ opacity: 0; transform: translate(calc(-50% - var(--tl-slide)), -50%) scaleX(1); animation-timing-function: cubic-bezier(.16,1,.3,1); }
  5%{ opacity: 1; }
  8.5%{ transform: translate(calc(-50% - var(--tl-meet)), -50%) scaleX(1); }
  11%{ transform: translate(calc(-50% - var(--tl-meet)), -50%) scaleX(1); animation-timing-function: cubic-bezier(.6,0,.75,.5); }
  13.8%{ opacity: 1; transform: translate(calc(-50% - 12px), -50%) scaleX(.86); }
  15%{ opacity: 0; transform: translate(-50%, -50%) scaleX(.72); }
  100%{ opacity: 0; transform: translate(-50%, -50%) scaleX(.72); }
}
@keyframes tl-loop-merge-b{
  0%,2%{ opacity: 0; transform: translate(calc(-50% + var(--tl-slide)), -50%) scaleX(1); animation-timing-function: cubic-bezier(.16,1,.3,1); }
  5%{ opacity: 1; }
  8.5%{ transform: translate(calc(-50% + var(--tl-meet)), -50%) scaleX(1); }
  11%{ transform: translate(calc(-50% + var(--tl-meet)), -50%) scaleX(1); animation-timing-function: cubic-bezier(.6,0,.75,.5); }
  13.8%{ opacity: 1; transform: translate(calc(-50% + 12px), -50%) scaleX(.86); }
  15%{ opacity: 0; transform: translate(-50%, -50%) scaleX(.72); }
  100%{ opacity: 0; transform: translate(-50%, -50%) scaleX(.72); }
}

/* "+" badge between the two cards while they wait */
.tl-loop-merge-plus{
  position: absolute; left: 50%; top: 50%; z-index: 2;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--blue-600); color: var(--white);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 3px var(--white);
  opacity: 0; transform: translate(-50%, -50%) scale(.4);
  animation: tl-loop-plus-pop 15s linear infinite;
}
@keyframes tl-loop-plus-pop{
  0%,5%{ opacity: 0; transform: translate(-50%, -50%) scale(.4); animation-timing-function: cubic-bezier(.2,1.4,.4,1); }
  7.5%{ opacity: 1; transform: translate(-50%, -50%) scale(1); }
  10.5%{ opacity: 1; transform: translate(-50%, -50%) scale(1); }
  12.5%{ opacity: 0; transform: translate(-50%, -50%) scale(.6); }
  100%{ opacity: 0; transform: translate(-50%, -50%) scale(.6); }
}

/* Merged result card pops in with a squash-and-settle */
.tl-loop-file--result{
  box-shadow: var(--shadow-md);
  opacity: 0; transform: scale(.72, .82);
  animation: tl-loop-result-pop 15s linear infinite;
}
@keyframes tl-loop-result-pop{
  0%,14.2%{ opacity: 0; transform: scale(.72, .82); animation-timing-function: cubic-bezier(.2,1.4,.4,1); }
  17.2%{ opacity: 1; transform: scale(1, 1); }
  96%{ opacity: 1; transform: scale(1, 1); }
  100%{ opacity: 0; }
}
.tl-loop-tick{
  width: 22px; height: 22px; flex-shrink: 0; margin-left: 2px;
  border-radius: 50%;
  background: var(--success-50); border: 1.5px solid var(--success-500);
  color: var(--success-700);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: scale(.3);
  animation: tl-loop-tick-pop 15s linear infinite;
}
@keyframes tl-loop-tick-pop{
  0%,18.5%{ opacity: 0; transform: scale(.3); animation-timing-function: cubic-bezier(.2,1.5,.4,1); }
  21%{ opacity: 1; transform: scale(1); }
  96%{ opacity: 1; transform: scale(1); }
  100%{ opacity: 0; }
}

/* ---- Vignette 2 · COMPRESS: gentle squeeze, size badge crossfade ---- */
.tl-loop-cmp-card{
  box-shadow: var(--shadow-md);
  animation: tl-loop-cmp-squeeze 15s linear infinite;
}
@keyframes tl-loop-cmp-squeeze{
  0%,34%{ transform: translateY(12px) scale(.97, .97); animation-timing-function: cubic-bezier(.16,1,.3,1); }
  37.5%{ transform: translateY(0) scale(1, 1); }
  43%{ transform: translateY(0) scale(1, 1); animation-timing-function: cubic-bezier(.55,0,.7,.4); }
  45.2%{ transform: translateY(0) scale(.9, .84); animation-timing-function: cubic-bezier(.2,1.5,.4,1); }
  48.5%{ transform: translateY(0) scale(1, 1); }
  100%{ transform: translateY(0) scale(1, 1); }
}
.tl-loop-cmp-size{ position: relative; display: block; height: 20px; min-width: 64px; }
.tl-loop-cmp-size__badge{
  position: absolute; left: 0; top: 0;
  display: inline-flex; align-items: center;
  padding: 2px 8px; border-radius: var(--radius-full);
  font-size: 11px; font-weight: 700; line-height: 1.3;
  opacity: 0;
}
.tl-loop-cmp-size__badge--before{
  background: var(--ink-50); color: var(--ink-700); border: var(--border-hairline);
  animation: tl-loop-cmp-before 15s linear infinite;
}
.tl-loop-cmp-size__badge--after{
  background: var(--success-50); color: var(--success-700); border: 1px solid var(--success-500);
  animation: tl-loop-cmp-after 15s linear infinite;
}
@keyframes tl-loop-cmp-before{ 0%,34%{opacity:0;} 37.5%{opacity:1;} 45%{opacity:1;} 47%{opacity:0;} 100%{opacity:0;} }
@keyframes tl-loop-cmp-after{  0%,46%{opacity:0;} 48%{opacity:1;} 96%{opacity:1;} 100%{opacity:0;} }

/* "-74%" sticker pops onto the card's shoulder */
.tl-loop-cmp-delta{
  position: absolute; top: -11px; right: -12px;
  padding: 3px 8px; border-radius: var(--radius-full);
  background: var(--success-500); color: var(--ink-900);
  font-size: 11px; font-weight: 800; letter-spacing: .02em;
  box-shadow: var(--shadow-sm);
  opacity: 0; transform: scale(.5) rotate(-8deg);
  animation: tl-loop-delta-pop 15s linear infinite;
}
@keyframes tl-loop-delta-pop{
  0%,48.5%{ opacity: 0; transform: scale(.5) rotate(-8deg); animation-timing-function: cubic-bezier(.2,1.4,.4,1); }
  51.5%{ opacity: 1; transform: scale(1) rotate(0deg); }
  96%{ opacity: 1; transform: scale(1) rotate(0deg); }
  100%{ opacity: 0; }
}

/* ---- Vignette 3 · CONVERT: PDF card flips over into a Word card ---- */
.tl-loop-flip{
  position: relative; width: 190px;
  transform-style: preserve-3d;
  transform: translateY(10px) rotateY(0deg);
  animation: tl-loop-flip-turn 15s linear infinite;
}
@keyframes tl-loop-flip-turn{
  0%,66%{ transform: translateY(10px) rotateY(0deg); animation-timing-function: cubic-bezier(.16,1,.3,1); }
  69.5%{ transform: translateY(0) rotateY(0deg); }
  74%{ transform: translateY(0) rotateY(0deg); animation-timing-function: cubic-bezier(.45,0,.7,.5); }
  76%{ transform: translateY(0) rotateY(-14deg); animation-timing-function: cubic-bezier(.3,.75,.35,1.12); }
  83%{ transform: translateY(0) rotateY(180deg); }
  100%{ transform: translateY(0) rotateY(180deg); }
}
.tl-loop-face{
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  box-shadow: var(--shadow-md);
}
.tl-loop-face--back{
  position: absolute; inset: 0;
  transform: rotateY(180deg);
}
.tl-loop-docx-chip{
  position: absolute; top: -11px; right: -12px;
  padding: 3px 8px; border-radius: var(--radius-full);
  background: var(--blue-600); color: var(--white);
  font-size: 11px; font-weight: 800; letter-spacing: .04em;
  box-shadow: var(--shadow-sm);
  opacity: 0; transform: scale(.45);
  animation: tl-loop-docx-pop 15s linear infinite;
}
@keyframes tl-loop-docx-pop{
  0%,84%{ opacity: 0; transform: scale(.45); animation-timing-function: cubic-bezier(.2,1.4,.4,1); }
  87%{ opacity: 1; transform: scale(1); }
  96%{ opacity: 1; transform: scale(1); }
  100%{ opacity: 0; }
}

/* ---- Small screens: tighten the stage ---- */
@media (max-width: 560px){
  .tl-loop-stage{ min-height: 224px; --tl-slide: 300px; --tl-meet: 70px; }
  .tl-loop-file{ padding: 10px 12px; gap: 8px; }
  .tl-loop-file__icon{ width: 24px; height: 24px; }
  .tl-loop-flip{ width: 168px; }
  .tl-loop-status{ min-width: 0; }
}

/* ---- Reduced motion: freeze the loop as the finished MERGE result, with a
   neutral "PDF tools" label chip — complete, never mid-animation. ---- */
@media (prefers-reduced-motion: reduce){
  .tl-loop-live-dot,
  .tl-loop-chip,
  .tl-loop-scene,
  .tl-loop-file--a,
  .tl-loop-file--b,
  .tl-loop-merge-plus,
  .tl-loop-file--result,
  .tl-loop-tick,
  .tl-loop-cmp-card,
  .tl-loop-cmp-size__badge,
  .tl-loop-cmp-delta,
  .tl-loop-flip,
  .tl-loop-docx-chip{ animation: none !important; }

  .tl-loop-scene--merge{ opacity: 1; }
  .tl-loop-scene--compress,
  .tl-loop-scene--convert{ opacity: 0; }
  .tl-loop-file--a,
  .tl-loop-file--b,
  .tl-loop-merge-plus{ opacity: 0; }
  .tl-loop-file--result{ opacity: 1; transform: none; }
  .tl-loop-tick{ opacity: 1; transform: none; }
  .tl-loop-chip--merge,
  .tl-loop-chip--compress,
  .tl-loop-chip--convert{ opacity: 0; }
  .tl-loop-chip--idle{ opacity: 1; }
}