/* ═══════════════════════════════════════════════════════════════════════
   FORAS TECH — Animation Layer
   Scroll reveals · Counters · Hero · Micro-interactions · Page transitions
   ═══════════════════════════════════════════════════════════════════════ */

/* ── PAGE TRANSITION ── */
html { scroll-behavior: smooth; }
body { animation: ft-pagein 0.4s ease both; }
@keyframes ft-pagein {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── SCROLL REVEAL BASE ── */
.ft-reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.65s cubic-bezier(.16,1,.3,1),
              transform 0.65s cubic-bezier(.16,1,.3,1);
}
.ft-reveal.ft-up    { transform: translateY(36px); }
.ft-reveal.ft-left  { transform: translateX(-40px); }
.ft-reveal.ft-right { transform: translateX(40px); }
.ft-reveal.ft-scale { transform: scale(.93); }
.ft-reveal.ft-visible {
  opacity: 1;
  transform: none;
}

/* Stagger delays for siblings */
.ft-stagger > *:nth-child(1) { transition-delay: 0s; }
.ft-stagger > *:nth-child(2) { transition-delay: 0.1s; }
.ft-stagger > *:nth-child(3) { transition-delay: 0.2s; }
.ft-stagger > *:nth-child(4) { transition-delay: 0.3s; }
.ft-stagger > *:nth-child(5) { transition-delay: 0.4s; }
.ft-stagger > *:nth-child(6) { transition-delay: 0.5s; }
.ft-stagger > *:nth-child(7) { transition-delay: 0.6s; }
.ft-stagger > *:nth-child(8) { transition-delay: 0.7s; }
.ft-stagger > * { opacity: 0; transform: translateY(28px);
  transition: opacity 0.55s cubic-bezier(.16,1,.3,1), transform 0.55s cubic-bezier(.16,1,.3,1); }
.ft-stagger.ft-visible > * { opacity: 1; transform: none; }

/* ── HERO ANIMATIONS ── */
.hero-anim-1 { animation: heroSlide 0.8s cubic-bezier(.16,1,.3,1) 0.1s both; }
.hero-anim-2 { animation: heroSlide 0.8s cubic-bezier(.16,1,.3,1) 0.25s both; }
.hero-anim-3 { animation: heroSlide 0.8s cubic-bezier(.16,1,.3,1) 0.4s both; }
.hero-anim-4 { animation: heroSlide 0.8s cubic-bezier(.16,1,.3,1) 0.55s both; }
.hero-anim-note { animation: heroNote 0.9s cubic-bezier(.16,1,.3,1) 0.7s both; }
@keyframes heroSlide {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes heroNote {
  from { opacity: 0; transform: translateX(30px); }
  to   { opacity: 1; transform: translateX(0); }
}
.hero-stat-anim { animation: heroSlide 0.7s cubic-bezier(.16,1,.3,1) both; }
.hero-stat-anim:nth-child(1) { animation-delay: 0.7s; }
.hero-stat-anim:nth-child(2) { animation-delay: 0.82s; }
.hero-stat-anim:nth-child(3) { animation-delay: 0.94s; }
.hero-stat-anim:nth-child(4) { animation-delay: 1.06s; }

/* ── STAT COUNTER ── */
.ft-counter { display: inline-block; }

/* ── LIVE DOT PULSE ── */
.live-dot {
  animation: livePulse 2.2s ease-in-out infinite !important;
}
@keyframes livePulse {
  0%,100% { box-shadow: 0 0 0 4px rgba(255,121,0,.18); transform: scale(1); }
  50%      { box-shadow: 0 0 0 9px rgba(255,121,0,.04); transform: scale(1.08); }
}

/* ── PRODUCT CARDS ── */
.product-card {
  transition: background .28s ease, transform .35s cubic-bezier(.16,1,.3,1),
              box-shadow .28s ease !important;
}
.product-card:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 24px 56px rgba(7,29,66,.25) !important;
}
.product-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.05) 0%, transparent 60%);
  opacity: 0;
  transition: opacity .3s;
  pointer-events: none;
}
.product-card:hover::after { opacity: 1; }
.product-card { position: relative; }

/* ── BUTTON ANIMATIONS ── */
.button {
  position: relative;
  overflow: hidden;
  transition: transform .25s cubic-bezier(.16,1,.3,1),
              background .22s ease, opacity .2s ease, box-shadow .25s ease !important;
}
.button::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,.18);
  opacity: 0;
  transition: opacity .25s;
}
.button:hover::after { opacity: 1; }
.button:active { transform: translateY(0) scale(.97) !important; }
.button.primary:hover { box-shadow: 0 8px 28px rgba(255,121,0,.38); }
.button.navy:hover    { box-shadow: 0 8px 28px rgba(7,29,66,.32); }

/* ── TEXT-LINK HOVER ── */
.text-link {
  position: relative;
  transition: color .2s, gap .2s !important;
}
.text-link:hover { gap: 24px !important; }

/* ── TEAM CARDS ── */
.team-card {
  transition: transform .35s cubic-bezier(.16,1,.3,1),
              box-shadow .3s ease !important;
}
.team-card:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 20px 50px rgba(7,29,66,.14) !important;
}
.team-card img {
  transition: transform .5s cubic-bezier(.16,1,.3,1) !important;
}
.team-card:hover img { transform: scale(1.04) !important; }

/* ── PRICE CARDS ── */
.price-card {
  transition: transform .35s cubic-bezier(.16,1,.3,1),
              border-color .25s, box-shadow .3s !important;
}
.price-card:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 20px 48px rgba(7,29,66,.14) !important;
}

/* ── SERVICE ROWS ── */
.service-row {
  transition: padding .25s cubic-bezier(.16,1,.3,1),
              background .2s !important;
  position: relative;
}
.service-row::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--orange);
  transform: scaleY(0);
  transition: transform .3s cubic-bezier(.16,1,.3,1);
  transform-origin: bottom;
}
.service-row:hover::before { transform: scaleY(1); }
.service-row:hover { padding-left: 16px !important; }

/* ── CONTACT CARDS ── */
.contact-card {
  transition: transform .3s cubic-bezier(.16,1,.3,1),
              background .25s, color .25s, box-shadow .3s !important;
}
.contact-card:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 16px 40px rgba(7,29,66,.16) !important;
}

/* ── SYSTEM PANELS ── */
.system-panel {
  transition: box-shadow .3s ease, transform .3s cubic-bezier(.16,1,.3,1) !important;
}
.system-panel:hover {
  box-shadow: 0 12px 40px rgba(7,29,66,.12) !important;
  transform: translateY(-3px) !important;
}
.system-screen {
  transition: transform .35s cubic-bezier(.16,1,.3,1),
              box-shadow .3s !important;
}
.system-screen:hover {
  transform: scale(1.03) rotateY(0deg) !important;
  box-shadow: 0 24px 56px rgba(7,29,66,.18) !important;
}

/* ── DEMO CARDS ── */
.demo-card {
  transition: box-shadow .3s, transform .35s cubic-bezier(.16,1,.3,1) !important;
}
.demo-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 16px 48px rgba(7,29,66,.13) !important;
}

/* ── CERTIFICATE CARDS ── */
.certificate-card {
  transition: transform .3s cubic-bezier(.16,1,.3,1),
              box-shadow .3s !important;
}
.certificate-card:hover {
  transform: translateY(-6px) scale(1.01) !important;
  box-shadow: 0 16px 40px rgba(7,29,66,.14) !important;
}

/* ── PHOTO GRID ── */
.photo-item img {
  transition: transform .5s cubic-bezier(.16,1,.3,1) !important;
}
.photo-item:hover img { transform: scale(1.07) !important; }
.photo-overlay {
  transition: opacity .35s !important;
}
.photo-item:hover .photo-overlay { opacity: 1 !important; }
.photo-caption {
  transition: opacity .35s, transform .35s cubic-bezier(.16,1,.3,1) !important;
}
.photo-item:hover .photo-caption {
  opacity: 1 !important; transform: translateY(0) !important;
}

/* ── DASHBOARD FRAME FLOAT ── */
.dashboard-frame {
  animation: dashFloat 5s ease-in-out infinite;
}
@keyframes dashFloat {
  0%,100% { transform: perspective(1200px) rotateY(-2deg) translateY(0); }
  50%      { transform: perspective(1200px) rotateY(-2deg) translateY(-10px); }
}

/* ── FOOTER SOCIAL LINKS ── */
.socials a {
  transition: background .2s, border-color .2s, transform .2s !important;
}
.socials a:hover {
  transform: translateY(-3px) !important;
  background: var(--orange) !important;
  border-color: var(--orange) !important;
}

/* ── EYEBROW ACCENT LINE ── */
.eyebrow span {
  transition: width .5s cubic-bezier(.16,1,.3,1);
}
.ft-visible .eyebrow span, .hero .eyebrow span {
  width: 26px;
  animation: eyeGrow .6s cubic-bezier(.16,1,.3,1) .2s both;
}
@keyframes eyeGrow {
  from { width: 0; opacity: 0; }
  to   { width: 26px; opacity: 1; }
}

/* ── NAV BUTTON PULSE ── */
.nav-button {
  transition: all .25s cubic-bezier(.16,1,.3,1) !important;
}
.nav-button:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(255,121,0,.35) !important;
  background: var(--orange) !important;
  border-color: var(--orange) !important;
}

/* ── PROOF POINTS ── */
.proof-points div {
  transition: background .2s, padding .2s !important;
}
.proof-points div:hover {
  background: rgba(255,255,255,.05) !important;
  padding-left: 8px !important;
}

/* ── SECTION LINK LIGHT ── */
.section-link-light {
  transition: gap .2s, opacity .2s !important;
}
.section-link-light:hover { gap: 28px !important; }

/* ── MOBILE BURGER ANIMATION ── */
.mob-burger { transition: border-color .2s !important; }

/* ── FOOTER COLUMN LINKS ── */
.footer-col a {
  position: relative;
  transition: color .2s, padding-left .2s !important;
}
.footer-col a:hover { padding-left: 6px !important; }

/* ── DROP PANEL ── */
.drop-panel, .drop-panel.wide {
  animation: dropIn .18s cubic-bezier(.16,1,.3,1) !important;
}

/* ── KB ITEM (admin) ── */
.kb-item { transition: border-color .2s, box-shadow .2s; }
.kb-item:hover { border-color: var(--navy); box-shadow: 0 4px 16px rgba(7,29,66,.08); }

/* ── REDUCE MOTION ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .ft-reveal, .ft-stagger > * { opacity: 1; transform: none; }
}