/* FreeToolzHub — homepage animation (SAFE BY DESIGN).
   No element is ever hidden by opacity that depends on JS/observers/animation
   completion. Entrance is transform-only, so even if an animation is throttled
   or frozen the content is always fully visible & readable.
   Decorative motion (orbs, shimmer, hover) never affects content visibility. */

/* ---- hero entrance: transform-only slide-up, staggered. Opacity stays 1. ---- */
@media (prefers-reduced-motion: no-preference) {
  .fth-hero-anim > * { animation: fthSlide 0.6s cubic-bezier(0.16, 1, 0.3, 1) both; }
  .fth-hero-anim > *:nth-child(1) { animation-delay: 0.04s; }
  .fth-hero-anim > *:nth-child(2) { animation-delay: 0.12s; }
  .fth-hero-anim > *:nth-child(3) { animation-delay: 0.20s; }
  .fth-hero-anim > *:nth-child(4) { animation-delay: 0.28s; }
  .fth-hero-anim > *:nth-child(5) { animation-delay: 0.36s; }

  /* floating aurora behind hero (decorative, behind content) */
  .fth-hero-orb { animation: fthFloat 9s ease-in-out infinite; }
  .fth-hero-orb.b { animation-delay: -4.5s; animation-duration: 11s; }

  /* scroll reveal: NEVER hides content. JS adds .in on scroll; that only adds
     a transform slide to the inner cards. Base state is always fully visible. */
  .fth-reveal.in .fth-stagger > * { animation: fthSlide 0.5s cubic-bezier(0.16, 1, 0.3, 1) both; }
  .fth-reveal.in .fth-stagger > *:nth-child(2){animation-delay:.05s}
  .fth-reveal.in .fth-stagger > *:nth-child(3){animation-delay:.10s}
  .fth-reveal.in .fth-stagger > *:nth-child(4){animation-delay:.15s}
  .fth-reveal.in .fth-stagger > *:nth-child(5){animation-delay:.20s}
  .fth-reveal.in .fth-stagger > *:nth-child(6){animation-delay:.25s}
  .fth-reveal.in .fth-stagger > *:nth-child(7){animation-delay:.30s}
  .fth-reveal.in .fth-stagger > *:nth-child(8){animation-delay:.35s}
}

@keyframes fthSlide { from { transform: translateY(16px); } to { transform: none; } }

/* ---- page entrance for All Tools + tool pages (transform-only, replays on
   navigation because React remounts the nodes). Content never hidden. ---- */
@media (prefers-reduced-motion: no-preference) {
  .fth-page-enter { animation: fthSlide 0.55s cubic-bezier(0.16, 1, 0.3, 1) both; }
  .fth-page-enter.d1 { animation-delay: 0.08s; }
  .fth-page-enter.d2 { animation-delay: 0.16s; }
  .fth-anim-in > * { animation: fthSlide 0.5s cubic-bezier(0.16, 1, 0.3, 1) both; }
  .fth-anim-in > *:nth-child(2){animation-delay:.05s}
  .fth-anim-in > *:nth-child(3){animation-delay:.10s}
  .fth-anim-in > *:nth-child(4){animation-delay:.15s}
  .fth-anim-in > *:nth-child(5){animation-delay:.20s}
  .fth-anim-in > *:nth-child(6){animation-delay:.25s}
  .fth-anim-in > *:nth-child(7){animation-delay:.30s}
  .fth-anim-in > *:nth-child(8){animation-delay:.35s}
  .fth-anim-in > *:nth-child(n+9){animation-delay:.40s}
}
@keyframes fthFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(18px, -22px) scale(1.06); }
}

/* pillar + card hover lift */
.fth-pillar { transition: transform 0.25s ease, box-shadow 0.25s ease; }
.fth-pillar:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }

/* animated gradient shimmer on the hero accent — solid-color fallback first */
.fth-shimmer { color: var(--color-primary); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .fth-shimmer {
    background: linear-gradient(100deg, var(--color-primary), var(--teal-500), var(--sky-500), var(--color-primary));
    background-size: 300% 100%;
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  }
  @media (prefers-reduced-motion: no-preference) {
    .fth-shimmer { animation: fthShimmer 6s linear infinite; }
  }
}
@keyframes fthShimmer { to { background-position: 300% 0; } }

/* home social icons hover */
.fth-social:hover { transform: translateY(-3px); background: var(--gradient-brand) !important; color: #fff !important; border-color: transparent !important; box-shadow: var(--shadow-brand-soft); }

/* ===== UI polish batch (typing, shapes, chips, ripple, icon hover) ===== */
.fth-caret{display:inline-block;width:3px;height:.85em;background:var(--color-primary);margin-left:5px;vertical-align:-0.06em;border-radius:2px}
@media (prefers-reduced-motion: no-preference){.fth-caret{animation:fthBlink 1s steps(2) infinite}}
@keyframes fthBlink{50%{opacity:0}}

.fth-shape{position:absolute;pointer-events:none;opacity:.55;border:2px solid var(--blue-300);z-index:0}
@media (prefers-reduced-motion: no-preference){.fth-shape{animation:fthDrift 12s ease-in-out infinite}}
.fth-shape.s1{width:26px;height:26px;border-radius:50%;top:22%;left:7%;border-color:var(--sky-400)}
.fth-shape.s2{width:20px;height:20px;border-radius:5px;top:62%;left:13%;transform:rotate(24deg);border-color:var(--teal-400);animation-delay:-3s}
.fth-shape.s3{width:32px;height:32px;border-radius:50%;top:26%;right:9%;border-color:var(--blue-400);animation-delay:-6s}
.fth-shape.s4{width:16px;height:16px;border-radius:4px;top:68%;right:15%;transform:rotate(-18deg);border-color:var(--sky-500);animation-delay:-9s}
@keyframes fthDrift{0%,100%{translate:0 0}50%{translate:12px -24px}}

.fth-quick-chip{font-family:var(--font-body);font-size:13px;font-weight:600;padding:7px 14px;border-radius:var(--radius-full);border:1px solid var(--border-color);background:var(--bg-card);color:var(--text-muted);cursor:pointer;transition:color var(--dur-base) var(--ease-out),border-color var(--dur-base),transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base)}
.fth-quick-chip:hover{color:var(--color-primary);border-color:var(--color-primary);transform:translateY(-2px);box-shadow:var(--shadow-brand-soft)}

.fth-ripple{position:absolute;border-radius:50%;background:color-mix(in srgb, currentColor 22%, transparent);transform:scale(0);animation:fthRipple .55s var(--ease-out) forwards;pointer-events:none;z-index:2}
@keyframes fthRipple{to{transform:scale(1);opacity:0}}

.fth-tool-grid svg{transition:transform var(--dur-base) var(--ease-spring)}
@media (prefers-reduced-motion: no-preference){.fth-tool-grid > *:hover svg{transform:rotate(-6deg) scale(1.12)}}

/* ===== animated colorful tool-page icon tile ===== */
.fth-tool-icon{position:relative;width:64px;height:64px;flex-shrink:0;border-radius:var(--radius-xl);display:grid;place-items:center;overflow:hidden;color:#fff;background:linear-gradient(135deg,var(--color-primary),var(--sky-500) 55%,var(--teal-500));box-shadow:var(--shadow-brand-soft)}
.fth-tool-icon svg{position:relative;z-index:2;filter:drop-shadow(0 2px 4px rgba(0,0,0,.18))}
.fth-tool-icon::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(135deg,transparent,rgba(255,255,255,.28));opacity:0}
.fth-tic-shape{position:absolute;z-index:0;border-radius:50%;background:rgba(255,255,255,.28);pointer-events:none}
.fth-tic-shape.a{width:34px;height:34px;top:-12px;right:-10px}
.fth-tic-shape.b{width:20px;height:20px;bottom:-8px;left:-6px;border-radius:6px;background:rgba(255,255,255,.22)}
.fth-tic-shape.c{width:12px;height:12px;top:44%;left:10%;background:rgba(255,255,255,.35)}
@media (prefers-reduced-motion: no-preference){
  .fth-tool-icon{background-size:180% 180%;animation:fthTicGrad 7s ease infinite}
  .fth-tool-icon svg{animation:fthTicPop .5s var(--ease-spring) both}
  .fth-tic-shape.a{animation:fthTicFloat 5s ease-in-out infinite}
  .fth-tic-shape.b{animation:fthTicFloat 6s ease-in-out infinite reverse}
  .fth-tic-shape.c{animation:fthTicFloat 4.5s ease-in-out infinite}
}
.fth-tool-icon:hover svg{transform:rotate(-8deg) scale(1.1)}
.fth-tool-icon:hover::after{opacity:1}
@keyframes fthTicGrad{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes fthTicPop{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}
@keyframes fthTicFloat{0%,100%{transform:translate(0,0)}50%{transform:translate(3px,-5px)}}