/* ============================================
   TSP animations
   Scroll reveals, ambient motion, and hover FX.
   ============================================ */

/* --- Keyframes --- */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}
@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}
@keyframes floatDiamond {
  0%, 100% { transform: translateY(0) rotate(45deg); }
  50%      { transform: translateY(-12px) rotate(45deg); }
}
@keyframes sheen {
  0%   { transform: translateX(-120%) rotate(8deg); }
  100% { transform: translateX(220%) rotate(8deg); }
}
@keyframes pulseDot {
  0%, 100% { box-shadow: 0 0 0 4px rgba(245, 130, 31, .13); }
  50%      { box-shadow: 0 0 0 8px rgba(245, 130, 31, .22); }
}
@keyframes glowPulse {
  0%, 100% { opacity: .55; }
  50%      { opacity: 1; }
}
@keyframes gradientShift {
  from { background-position: 0% 50%; }
  to   { background-position: 100% 50%; }
}
@keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0) rotate(45deg);
    transform: translate3d(100%, 0, 0) rotate(45deg);
  }
  100% {
    opacity: 1;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
  }
}
@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-36px); }
  to   { opacity: 1; transform: none; }
}
@keyframes fadeInRightSoft {
  from { opacity: 0; transform: translateX(36px); }
  to   { opacity: 1; transform: none; }
}
@keyframes heroMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes industriesFloatA {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(45deg); }
  50%      { transform: translate3d(18px, -22px, 0) rotate(45deg); }
}
@keyframes industriesFloatB {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(45deg); }
  50%      { transform: translate3d(-14px, 16px, 0) rotate(45deg); }
}
@keyframes industriesFloatC {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(20px, -18px, 0) scale(1.06); }
}
@keyframes industriesSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* --- Scroll reveal (toggled by the IntersectionObserver in index.html) --- */
.reveal { opacity: 0; transform: translateY(28px); transition: .7s cubic-bezier(.2, .7, .2, 1); }
.reveal.visible { opacity: 1; transform: none; }

/* Staggered entrance for items inside a revealed block */
.reveal.visible .service-card,
.reveal.visible .quote-card,
.reveal.visible .faq-item,
.reveal.visible .industry-card,
.reveal.visible .info-card,
.reveal.visible .brand,
.reveal.visible .contact-way {
  animation: fadeUp .65s cubic-bezier(.2, .7, .2, 1) backwards;
}
.reveal.visible .service-card:nth-child(2),
.reveal.visible .quote-card:nth-child(2),
.reveal.visible .faq-item:nth-child(2),
.reveal.visible .industry-card:nth-child(2),
.reveal.visible .info-card:nth-child(2),
.reveal.visible .brand:nth-child(2),
.reveal.visible .contact-way:nth-child(2) { animation-delay: .12s; }
.reveal.visible .service-card:nth-child(3),
.reveal.visible .quote-card:nth-child(3),
.reveal.visible .faq-item:nth-child(3),
.reveal.visible .industry-card:nth-child(3),
.reveal.visible .info-card:nth-child(3),
.reveal.visible .brand:nth-child(3),
.reveal.visible .contact-way:nth-child(3) { animation-delay: .24s; }
.reveal.visible .service-card:nth-child(4),
.reveal.visible .faq-item:nth-child(4),
.reveal.visible .industry-card:nth-child(4),
.reveal.visible .brand:nth-child(4) { animation-delay: .36s; }
.reveal.visible .service-card:nth-child(5),
.reveal.visible .faq-item:nth-child(5),
.reveal.visible .industry-card:nth-child(5),
.reveal.visible .brand:nth-child(5) { animation-delay: .42s; }
.reveal.visible .service-card:nth-child(6),
.reveal.visible .faq-item:nth-child(6),
.reveal.visible .industry-card:nth-child(6),
.reveal.visible .brand:nth-child(6) { animation-delay: .48s; }
.reveal.visible .faq-item:nth-child(7),
.reveal.visible .industry-card:nth-child(7),
.reveal.visible .brand:nth-child(7) { animation-delay: .54s; }
.reveal.visible .industry-card:nth-child(8) { animation-delay: .58s; }
.reveal.visible .industry-card:nth-child(9) { animation-delay: .62s; }
.reveal.visible .industry-card:nth-child(10) { animation-delay: .66s; }
.reveal.visible .industry-card:nth-child(11) { animation-delay: .7s; }
.reveal.visible .industry-card:nth-child(12) { animation-delay: .74s; }
.reveal.visible .faq-item:nth-child(8),
.reveal.visible .brand:nth-child(8) { animation-delay: .6s; }
.reveal.visible .faq-item:nth-child(9) { animation-delay: .64s; }
.reveal.visible .faq-item:nth-child(10) { animation-delay: .68s; }
.reveal.visible .faq-item:nth-child(11) { animation-delay: .72s; }
.reveal.visible .faq-item:nth-child(12) { animation-delay: .76s; }

@keyframes processHexIn {
  from { opacity: 0; transform: scale(.72); }
  to   { opacity: 1; transform: none; }
}
@keyframes processFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

#process.process-inview .process-tagline {
  animation: fadeInLeft .7s cubic-bezier(.2, .7, .2, 1) both;
}
#process.process-inview .process-step {
  animation: processHexIn .5s cubic-bezier(.2, .7, .2, 1) both;
  animation-delay: calc(.16s + var(--i) * .2s);
}

/* --- About section entrance --- */
#about .about-s1-who-media,
#about .about-s1-who-copy,
#about .about-s1-intro-copy,
#about .about-s1-intro-media,
#about .about-s1-title,
#about .about-s1-brand,
#about .about-s1-list li,
#about .about-nav {
  opacity: 0;
}
#about.about-inview .about-s1-who-media {
  animation: fadeInLeft .75s cubic-bezier(.2, .7, .2, 1) both;
}
#about.about-inview .about-s1-who-copy {
  animation: fadeInRightSoft .75s cubic-bezier(.2, .7, .2, 1) .12s both;
}
#about.about-inview .about-s1-list li {
  animation: fadeUp .55s cubic-bezier(.2, .7, .2, 1) both;
}
#about.about-inview .about-s1-list li:nth-child(1) { animation-delay: .28s; }
#about.about-inview .about-s1-list li:nth-child(2) { animation-delay: .36s; }
#about.about-inview .about-s1-list li:nth-child(3) { animation-delay: .44s; }
#about.about-inview .about-s1-list li:nth-child(4) { animation-delay: .52s; }
#about.about-inview .about-s1-list li:nth-child(5) { animation-delay: .6s; }
#about.about-inview .about-s1-list li:nth-child(6) { animation-delay: .68s; }
#about.about-inview .about-s1-title {
  animation: fadeUp .65s cubic-bezier(.2, .7, .2, 1) both;
}
#about.about-inview .about-s1-intro-media {
  animation: fadeInLeft .75s cubic-bezier(.2, .7, .2, 1) .1s both;
}
#about.about-inview .about-s1-intro-copy {
  animation: fadeInRightSoft .75s cubic-bezier(.2, .7, .2, 1) .18s both;
}
#about.about-inview .about-s1-brand {
  animation: fadeUp .65s cubic-bezier(.2, .7, .2, 1) .28s both;
}
#about.about-inview .about-nav {
  animation: fadeIn .5s ease .45s both;
}
#about.about-inview .about-nav-next {
  animation-delay: .55s;
}

/* --- Services section entrance --- */
#services .services-heading,
#services .services-subheading,
#services .services-footnote,
#services .service-card {
  opacity: 0;
}
#services.services-inview .services-heading {
  animation: fadeUp .65s cubic-bezier(.2, .7, .2, 1) both;
}
#services.services-inview .services-subheading {
  animation: fadeUp .65s cubic-bezier(.2, .7, .2, 1) .08s both;
}
#services.services-inview .service-card {
  animation: fadeUp .6s cubic-bezier(.2, .7, .2, 1) both;
}
#services.services-inview .service-card:nth-child(1) { animation-delay: .12s; }
#services.services-inview .service-card:nth-child(2) { animation-delay: .2s; }
#services.services-inview .service-card:nth-child(3) { animation-delay: .28s; }
#services.services-inview .service-card:nth-child(4) { animation-delay: .36s; }
#services.services-inview .service-card:nth-child(5) { animation-delay: .44s; }
#services.services-inview .service-card:nth-child(6) { animation-delay: .52s; }
#services.services-inview .services-footnote {
  animation: fadeUp .65s cubic-bezier(.2, .7, .2, 1) .6s both;
}

/* --- Services part 2 entrance --- */
#services-2 .services-heading,
#services-2 .services-subheading,
#services-2 .services-2-col {
  opacity: 0;
}
#services-2.services-2-inview .services-heading {
  animation: fadeUp .65s cubic-bezier(.2, .7, .2, 1) both;
}
#services-2.services-2-inview .services-subheading {
  animation: fadeUp .65s cubic-bezier(.2, .7, .2, 1) .08s both;
}
#services-2.services-2-inview .services-2-col {
  animation: fadeUp .6s cubic-bezier(.2, .7, .2, 1) both;
}
#services-2.services-2-inview .services-2-col:nth-child(1) { animation-delay: .14s; }
#services-2.services-2-inview .services-2-col:nth-child(2) { animation-delay: .22s; }
#services-2.services-2-inview .services-2-col:nth-child(3) { animation-delay: .3s; }

/* --- Hero entrance --- */
.fadeInRight {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.fadeIn-delay {
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
}
.hero-marquee-track {
  animation: heroMarquee 28s linear infinite;
}
.hero-marquee:hover .hero-marquee-track {
  animation-play-state: paused;
}

/* --- Ambient motion --- */
.hero-diamond.fadeInRight {
  -webkit-animation-name: fadeInRight, floatDiamond;
  animation-name: fadeInRight, floatDiamond;
  -webkit-animation-duration: 1s, 6s;
  animation-duration: 1s, 6s;
  -webkit-animation-delay: 0s, 1s;
  animation-delay: 0s, 1s;
  -webkit-animation-fill-mode: both, none;
  animation-fill-mode: both, none;
  -webkit-animation-iteration-count: 1, infinite;
  animation-iteration-count: 1, infinite;
  -webkit-animation-timing-function: ease, ease-in-out;
  animation-timing-function: ease, ease-in-out;
}
.hero-float-icon.fadeIn {
  -webkit-animation-name: fadeIn, floatY;
  animation-name: fadeIn, floatY;
  -webkit-animation-duration: 1s, 5.5s;
  animation-duration: 1s, 5.5s;
  -webkit-animation-fill-mode: both, none;
  animation-fill-mode: both, none;
  -webkit-animation-iteration-count: 1, infinite;
  animation-iteration-count: 1, infinite;
  -webkit-animation-timing-function: ease, ease-in-out;
  animation-timing-function: ease, ease-in-out;
}
.hero-float-1.fadeIn { animation-delay: 1s, 2s; -webkit-animation-delay: 1s, 2s; }
.hero-float-2.fadeIn { animation-delay: 1.12s, 2.2s; -webkit-animation-delay: 1.12s, 2.2s; }
.hero-float-3.fadeIn { animation-delay: 1.24s, 2.4s; -webkit-animation-delay: 1.24s, 2.4s; }
.hero-float-4.fadeIn { animation-delay: 1.36s, 1.8s; -webkit-animation-delay: 1.36s, 1.8s; }
.hero-float-5.fadeIn { animation-delay: 1.48s, 2.6s; -webkit-animation-delay: 1.48s, 2.6s; }
.hero-float-6.fadeIn { animation-delay: 1.6s, 2.1s; -webkit-animation-delay: 1.6s, 2.1s; }
.eyebrow:before { animation: pulseDot 2.6s ease-in-out infinite; }
.service-card:after { animation: glowPulse 4.5s ease-in-out infinite; }

/* Animated gradient on primary buttons */
.btn-primary {
  background-size: 200% 100%;
  animation: gradientShift 3.5s ease-in-out infinite alternate;
}

/* --- Hover FX --- */
.nav-links a { position: relative; }
.nav-links a:not(.btn):after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  height: 2px;
  width: 100%;
  border-radius: 2px;
  background: var(--violet);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
}
.nav-links a:hover:after,
.nav-links a.active:after { transform: scaleX(1); }

.btn:hover .arrow,
.btn:hover .btn-icon { animation: nudgeRight .7s ease-in-out infinite; }
.circle-arrow:hover { animation: nudgeRight .7s ease-in-out infinite; }
.logo:hover .logo-img { transform: scale(1.06); }
.logo-img { transition: transform .25s ease; }
.social { transition: transform .2s ease, opacity .2s ease; }
.social:hover { transform: translateY(-3px) scale(1.06); }

/* --- Accessibility: respect reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  *, *:before, *:after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  #about .about-s1-who-media,
  #about .about-s1-who-copy,
  #about .about-s1-intro-copy,
  #about .about-s1-intro-media,
  #about .about-s1-title,
  #about .about-s1-brand,
  #about .about-s1-list li,
  #about .about-nav,
  #services .services-heading,
  #services .services-subheading,
  #services .services-footnote,
  #services .service-card,
  #services-2 .services-heading,
  #services-2 .services-subheading,
  #services-2 .services-2-col,
  #process .process-tagline,
  #process .process-step {
    opacity: 1 !important;
    animation: none !important;
  }
  .fadeInRight,
  .fadeIn,
  .hero-diamond.fadeInRight,
  .hero-float-icon.fadeIn {
    animation: none !important;
    opacity: 1 !important;
  }
  .hero-marquee-track { animation: none !important; transform: none !important; }
  .hero-spotlight { display: none !important; }
  .industries-shape { animation: none !important; }
}