/* Shared entrance motion for the site's brand and content hierarchy. */
.brand{animation:logoReveal .7s cubic-bezier(.22,.8,.3,1) both}
.footer-brand{animation-delay:.12s}
.site .brand svg{transform-origin:center;animation:logoMarkPulse 4s ease-in-out 1s infinite}
.site .brand:hover svg{transform:scale(1.1) rotate(-4deg);filter:drop-shadow(0 5px 8px rgba(124,58,237,.24))}
h1{animation:headingReveal .65s cubic-bezier(.22,.8,.3,1) both}
h2{animation:headingReveal .65s cubic-bezier(.22,.8,.3,1) .08s both}
h3{animation:subheadingReveal .55s ease .14s both}
.hero .lead,.prose > p:first-of-type{animation:subheadingReveal .65s ease .18s both}
details.faq{animation:questionReveal .55s ease both}
details.faq:nth-of-type(2){animation-delay:.06s}
details.faq:nth-of-type(3){animation-delay:.12s}
details.faq:nth-of-type(4){animation-delay:.18s}
details.faq:nth-of-type(5){animation-delay:.24s}
details.faq summary{transition:color .2s ease,transform .2s ease}
details.faq summary:hover{color:var(--accent);transform:translateX(4px)}
@keyframes logoReveal{from{opacity:0;transform:translateY(-10px) scale(.92)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes logoMarkPulse{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(1.06) rotate(2deg)}}
@keyframes headingReveal{from{opacity:0;transform:translateY(14px);clip-path:inset(0 0 100% 0)}to{opacity:1;transform:translateY(0);clip-path:inset(0 0 0 0)}}
@keyframes subheadingReveal{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes questionReveal{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:translateX(0)}}
/* ── Textarea / Input focus glow ── */
.tool textarea,
.tool input[type="text"],
.contact-form input,
.contact-form textarea {
  transition:
    border-color .25s ease,
    box-shadow .25s ease,
    background-color .3s ease,
    transform .2s ease;
  outline: none;
}

.tool textarea:focus,
.tool input[type="text"]:focus,
.contact-form input:focus,
.contact-form textarea:focus {
  border-color: var(--accent);
  box-shadow:
    0 0 0 3px rgba(124,58,237,0.18),
    0 0 16px rgba(124,58,237,0.12);
  transform: translateY(-1px);
}

/* Subtle pulse on first focus to draw attention */
@keyframes inputFocusPulse {
  0%   { box-shadow: 0 0 0 0   rgba(124,58,237,0.35), 0 0 0 0 rgba(244,63,142,0.2); }
  50%  { box-shadow: 0 0 0 6px rgba(124,58,237,0.12), 0 0 18px rgba(244,63,142,0.1); }
  100% { box-shadow: 0 0 0 3px rgba(124,58,237,0.18), 0 0 16px rgba(124,58,237,0.12); }
}
.tool textarea:focus,
.tool input[type="text"]:focus {
  animation: inputFocusPulse .4s ease both;
}

/* Floating label lift on focus */
.tool label,
.contact-form label {
  transition: color .2s ease, transform .2s ease;
}
.tool textarea:focus ~ label,
.tool input:focus ~ label,
.contact-form input:focus ~ label,
.contact-form textarea:focus ~ label {
  color: var(--accent);
}

/* Resize handle accent */
.tool textarea {
  resize: vertical;
}

/* ── Tool card entrance ── */
.tool {
  animation: toolSlideIn .55s cubic-bezier(.22,.8,.3,1) .1s both;
}
@keyframes toolSlideIn {
  from { opacity: 0; transform: translateY(18px) scale(.98); }
  to   { opacity: 1; transform: translateY(0)   scale(1);   }
}

@media (prefers-reduced-motion:reduce){
  .brand,.site .brand svg,h1,h2,h3,.hero .lead,.prose > p:first-of-type,details.faq{animation:none!important}
  details.faq summary:hover{transform:none}
  .tool textarea:focus,
  .tool input[type="text"]:focus,
  .contact-form input:focus,
  .contact-form textarea:focus {
    transform: none;
    animation: none !important;
    box-shadow: 0 0 0 3px rgba(124,58,237,0.25);
  }
  .tool { animation: none !important; }
}