/* FreeToolzHub — Cinematic hero layer (lightweight, AdSense-safe).
   Particle/nebula canvas + glow + 3D card tilt. No Three.js. */
:root{
  --cin-blue:#2563EB;--cin-purple:#7c3aed;--cin-pink:#ec4899;--cin-teal:#14B8A6;--cin-gold:#f59e0b;
}
.fth-hero-section{position:relative;isolation:isolate}
#cin-hero-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:.9}
.fth-hero-section::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(circle at 18% 30%, rgba(124,58,237,.20), transparent 42%),
    radial-gradient(circle at 82% 24%, rgba(236,72,153,.16), transparent 40%),
    radial-gradient(circle at 60% 82%, rgba(20,184,166,.16), transparent 45%);
  animation:cinNebula 18s ease-in-out infinite alternate}
@keyframes cinNebula{0%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(0,-2%,0) scale(1.06)}}
.fth-hero-section > .fth-hero-anim{position:relative;z-index:2}
[data-theme="dark"] .fth-hero-section::before{opacity:1.15}

/* glowing search box in the instant-search + hero */
#seo-intro,.cin-glow{position:relative}
input[placeholder="Search 300+ free tools..."]{transition:box-shadow .3s,border-color .3s}
input[placeholder="Search 300+ free tools..."]:focus{
  border-color:var(--cin-purple)!important;
  box-shadow:0 0 0 4px rgba(124,58,237,.18),0 0 26px -4px rgba(124,58,237,.5),0 0 40px -8px rgba(236,72,153,.35)!important}

/* 3D tilt cards */
.cin-tilt{transform-style:preserve-3d;transition:transform .18s ease,box-shadow .25s ease;will-change:transform}
.cin-tilt:hover{box-shadow:0 22px 50px -18px rgba(37,99,235,.45),0 0 0 1px rgba(124,58,237,.25)}
@media (prefers-reduced-motion:reduce){.fth-hero-section::before{animation:none}.cin-tilt{transition:none}}