/* =====================================================================
   GoPentest × Xantus — animation.css
   All motion lives here: keyframes, transitions, scroll reveal.
   Kept deliberately restrained — see /public/js/animation.js for the
   scripts that trigger these classes.
   ===================================================================== */

/* ---------- Scroll reveal (sections fade/rise into view once) ---------- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--reveal-delay, 0s);
}
.reveal.in-view { opacity: 1; transform: translateY(0); }

/* ---------- Hero load-in (single orchestrated sequence, not looping) ---------- */
.hero-enter {
  opacity: 0;
  transform: translateY(14px);
  animation: hero-enter-anim 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: var(--reveal-delay, 0s);
}
@keyframes hero-enter-anim {
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- Status / live indicator pulse ---------- */
@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
.status-dot,
.testi-dot { animation: pulse-dot 2.2s ease-in-out infinite; }

/* ---------- Ticket status glow (verified finding) ---------- */
@keyframes ticket-glow {
  0%, 100% { box-shadow: 0 0 0 rgba(34, 197, 94, 0); }
  50% { box-shadow: 0 0 10px rgba(34, 197, 94, 0.25); }
}
.ticket-dot { animation: pulse-dot 2.2s ease-in-out infinite; }

/* ---------- Testimonial ticker (upward step, JS sets transform) ---------- */
.testi-track {
  transition: transform 0.7s cubic-bezier(0.65, 0, 0.35, 1);
}
.testi-track.no-transition { transition: none; }

/* ---------- Mobile nav open/close ---------- */
.mobile-nav {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.35s ease;
}
.mobile-nav.is-open { max-height: 480px; }

/* ---------- Card hover micro-interaction ---------- */
.service-card,
.threat-card,
.connect-item,
.testi-card,
.plan-card,
.factor-card,
.tools-banner {
  transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}
.service-card:hover { transform: translateY(-3px); }
.service-card.is-attack:hover { border-color: var(--attack); }
.service-card.is-infra:hover { border-color: var(--infra); }
.connect-item:hover { border-color: var(--line-strong); background: var(--ink-800); }
.connect-item.is-attack:hover { border-color: var(--attack); }
.connect-item.is-infra:hover { border-color: var(--infra); }
.connect-item.is-ok:hover { border-color: var(--ok); }
.testi-card:hover { border-color: var(--attack-border); background: var(--ink-700); }

.plan-card:hover { transform: translateY(-3px); }
.plan-card.is-attack:hover { border-color: var(--attack); }
.plan-card.is-infra:hover { border-color: var(--infra); }
.plan-card.is-ok:hover { border-color: var(--ok); }

.btn { transition: background 0.2s ease, transform 0.15s ease, border-color 0.2s ease; }
.btn-primary:hover { background: #c94b09; transform: translateY(-1px); }
.btn-infra:hover { background: #2f6fe0; transform: translateY(-1px); }
.btn-ok:hover { background: #1ba750; transform: translateY(-1px); }
.btn-ghost:hover { background: rgba(255, 255, 255, 0.05); transform: translateY(-1px); }
.btn-outline-attack:hover { background: var(--attack-soft); }
.btn-outline-infra:hover { background: var(--infra-soft); }
.btn-outline-ok:hover { background: var(--ok-soft); }

.primary-nav a,
.feed-footer a,
.testi-footer a,
.footer-copy a { transition: color 0.2s ease; }

/* ---------- FAQ disclosure chevron ---------- */
.faq-chevron { transition: transform 0.25s ease; }
.faq-item[open] .faq-chevron { transform: rotate(180deg); }
.faq-item { transition: border-color 0.2s ease; }
.faq-item[open] { border-color: var(--line-strong); }

/* ---------- Tool card hover ---------- */
.tool-card { transition: transform 0.25s ease, border-color 0.25s ease; }
.tool-card:hover { transform: translateY(-3px); border-color: var(--attack); }
.tool-card:hover .tool-arrow { color: var(--attack); transform: translateX(3px); }
.tool-arrow { display: inline-block; transition: transform 0.2s ease, color 0.2s ease; }

/* ---------- Team page: card lift + scan-line + particles ---------- */
.member-card { transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; }
.member-card:hover { transform: translateY(-6px); }
.member-card.is-attack:hover { box-shadow: 0 16px 40px rgba(232, 89, 12, 0.15); }
.member-card.is-infra:hover { box-shadow: 0 16px 40px rgba(59, 130, 246, 0.15); }
.member-card.is-ok:hover { box-shadow: 0 16px 40px rgba(34, 197, 94, 0.15); }

.member-avatar-ring { transition: box-shadow 0.3s ease; }
.member-card.is-attack:hover .member-avatar-ring { box-shadow: 0 0 20px rgba(232, 89, 12, 0.35); }
.member-card.is-infra:hover .member-avatar-ring { box-shadow: 0 0 20px rgba(59, 130, 246, 0.35); }
.member-card.is-ok:hover .member-avatar-ring { box-shadow: 0 0 20px rgba(34, 197, 94, 0.35); }

@keyframes team-scan-down {
  0% { top: 0; opacity: 1; }
  100% { top: 100%; opacity: 0; }
}
.member-card:hover .team-scanline { animation: team-scan-down 2.4s ease-in-out infinite; opacity: 1; }

@keyframes team-particle-float {
  0% { transform: translateY(100vh); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateY(-10vh); opacity: 0; }
}
.team-particle { animation: team-particle-float linear infinite; }

/* ---------- Reduced motion: respect user preference everywhere ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal,
  .hero-enter {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
  .status-dot,
  .testi-dot,
  .ticket-dot {
    animation: none !important;
  }
  .member-card:hover { transform: none; box-shadow: none; }
  .member-card:hover .team-scanline { animation: none !important; opacity: 0; }
  .team-particle { animation: none !important; display: none; }
  .testi-track { transition: none !important; }
  .service-card:hover,
  .plan-card:hover,
  .tool-card:hover,
  .tool-card:hover .tool-arrow,
  .btn-primary:hover,
  .btn-infra:hover,
  .btn-ok:hover,
  .btn-ghost:hover { transform: none; }
  .faq-chevron,
  .faq-item[open] .faq-chevron { transition: none !important; }
}
/* ---------- Member detail page ---------- */
.skill-bar-fill { transition: width 1.1s cubic-bezier(0.16, 1, 0.3, 1); }
.member-tab-btn { transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease; }
.member-cert-card, .member-project-card, .member-expertise-card, .member-achv-card {
  transition: border-color 0.25s ease, transform 0.25s ease;
}
.member-cert-card:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.member-project-card:hover { border-color: var(--line-strong); }
.member-hero-social-link { transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease; }

@media (prefers-reduced-motion: reduce) {
  .skill-bar-fill { transition: none !important; }
  .member-cert-card:hover, .member-project-card:hover { transform: none; }
}



/* Spinner untuk tombol loading (login/register) */
@keyframes spin { to { transform: rotate(360deg); } }
.spinner { animation: spin .7s linear infinite; }

/* ---------- Dork Finder: transisi hover komponen ---------- */
.dork-check,
.dork-item,
.engine-btn {
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.15s ease;
}
.dork-check:hover { border-color: var(--attack); background: rgba(232, 89, 12, 0.08); }
.dork-item:hover { border-color: var(--attack); }
.engine-btn:hover { background: var(--attack-soft); transform: translateY(-1px); }

@media (prefers-reduced-motion: reduce) {
    .dork-check:hover,
    .engine-btn:hover { transform: none; }
}

/* ---------- XSS Finder: transisi hover & chevron toggle ---------- */
.vuln-item { transition: border-color 0.2s ease; }
.vuln-item:hover { border-color: var(--attack); }

.detail-toggle-btn i { transition: transform 0.2s ease; }
.detail-toggle-btn.is-open i { transform: rotate(180deg); }

@media (prefers-reduced-motion: reduce) {
    .detail-toggle-btn i { transition: none !important; }
}