/* Frameflow Creatives animation layer — adapted for Frameflow Creatives */

/* Preloader */
.ff-preload {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 999999;
  align-items: center;
  justify-content: center;
  background: #fff;
  transition: opacity 0.45s ease, visibility 0.45s ease;
}

.ff-preload.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.ff-preload__spinner {
  width: 48px;
  height: 48px;
  border: 3px solid rgba(67, 38, 146, 0.12);
  border-top-color: #432692;
  border-radius: 50%;
  animation: ff-spin 0.85s linear infinite;
}

@keyframes ff-spin {
  to { transform: rotate(360deg); }
}

/* Hero ambient blobs */
.section-hero--frameflow {
  position: relative;
  overflow: hidden;
}

.ff-hero-blobs {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.ff-hero-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.45;
  animation: ff-blob-float 10s ease-in-out infinite alternate;
}

.ff-hero-blob--1 {
  width: min(420px, 55vw);
  height: min(420px, 55vw);
  top: -8%;
  right: -5%;
  background: radial-gradient(circle, rgba(171, 5, 228, 0.55) 0%, transparent 70%);
}

.ff-hero-blob--2 {
  width: min(360px, 48vw);
  height: min(360px, 48vw);
  bottom: 5%;
  left: -8%;
  background: radial-gradient(circle, rgba(67, 38, 146, 0.5) 0%, transparent 70%);
  animation-delay: -3s;
}

@keyframes ff-blob-float {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(18px, -22px) scale(1.06); }
}

.section-hero--frameflow .container {
  position: relative;
  z-index: 2;
}

/* Hero headline — always readable (hero-animation.js owns hero motion) */
.frameflow-light.home-page .section-hero--frameflow .content-wrap h1.title,
.frameflow-light.home-page .section-hero--frameflow .content-wrap h1 .title1,
.frameflow-light.home-page .section-hero--frameflow .content-wrap h1 .title2,
.frameflow-light.home-page .section-hero--frameflow .content-wrap > .text,
.frameflow-light.home-page .section-hero--frameflow .content-wrap .sub {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Light-page headings — solid brand ink (match testimonials / process titles) */
.frameflow-light.home-page .text-gradient-1,
.frameflow-light.home-page .text-gradient-2,
.frameflow-light.home-page .text-gradient-3,
.frameflow-light.home-page .heading-title.text-gradient-1,
.frameflow-light.home-page .heading-title.text-gradient-2,
.frameflow-light.home-page .heading-title.text-gradient-3 {
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  color: #13072d !important;
  -webkit-text-fill-color: #13072d !important;
}

.frameflow-light.home-page .text-gradient-1 .ff-rev-char,
.frameflow-light.home-page .text-gradient-1 .ff-rev-word,
.frameflow-light.home-page .text-gradient-2 .ff-rev-char,
.frameflow-light.home-page .text-gradient-2 .ff-rev-word,
.frameflow-light.home-page .text-gradient-3 .ff-rev-char,
.frameflow-light.home-page .text-gradient-3 .ff-rev-word {
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  color: #13072d !important;
  -webkit-text-fill-color: #13072d !important;
}

/* Block wrappers from broken splits must not render as gradient bars */
.ff-brand-2026.home-page .text-gradient-1,
.ff-brand-2026.home-page .text-gradient-1 .title1,
.ff-brand-2026.home-page .text-gradient-1 .title2 {
  background: none !important;
  -webkit-text-fill-color: var(--ff-white) !important;
  color: var(--ff-white) !important;
}

.frameflow-light.home-page .heading-title.text-gradient-3 > div:not(.ff-rev-char-clip):not(.ff-rev-word-clip),
.ff-brand-2026.home-page .heading-title.text-gradient-3 > div:not(.ff-rev-char-clip):not(.ff-rev-word-clip) {
  background: none !important;
  -webkit-text-fill-color: inherit;
  color: transparent;
  display: inline;
}

/* Services heading must stay readable — gradient clip renders as a solid bar */
.frameflow-light.home-page .section-services .heading-title.text-gradient-3,
.frameflow-light.home-page .section-services .heading-title.ff-services-heading {
  background: none !important;
  -webkit-text-fill-color: #13072d !important;
  color: #13072d !important;
  padding-bottom: 0;
  margin-bottom: 0;
}

.frameflow-light.home-page .section-services .heading-title.text-gradient-3 > div,
.frameflow-light.home-page .section-services .heading-title.ff-services-heading > div {
  background: none !important;
  -webkit-text-fill-color: inherit !important;
  color: inherit !important;
}

/* title-animation fallback — never leave copy at opacity 0 in viewport */
.frameflow-light.home-page .title-animation {
  min-height: 0.01em;
}

/* Form placeholders — readable contrast */
.frameflow-light.home-page .hero-contact-form input::placeholder,
.frameflow-light.home-page .hero-contact-form textarea::placeholder,
.frameflow-light.home-page .ff-contact-form input::placeholder,
.frameflow-light.home-page .ff-contact-form textarea::placeholder {
  color: rgba(35, 35, 35, 0.52);
  opacity: 1;
}

/* Split-text chars (Frameflow Creatives GSAP) */
.split-text .char-wrapper,
.split-text .word-wrapper {
  display: inline-block;
}

/* Scroll progress ring on go-top */
#goTop .border-progress {
  transition: stroke-dashoffset 0.12s linear;
}

/* Parallax sections */
.parallax-main {
  position: relative;
  overflow: hidden;
}

.parallax-scaleInUp-large img,
.parallax-scaleInUp-large .ff-showreel__link,
.parallax-scaleInUp-large .ff-showreel__media {
  will-change: transform;
}

.ff-ref-project-card > .parallax-main,
.ff-team-card > .parallax-main {
  display: block;
}

.ff-ref-project-card > .parallax-main .ff-ref-project-card__thumb {
  aspect-ratio: 4 / 3;
}

/* Magnific popup — brand overlay */
.mfp-bg {
  background: rgba(19, 7, 45, 0.92);
}

.mfp-close {
  color: #fff;
}

/* WOW animate complement — only when not already revealed */
.wow {
  visibility: hidden;
}

.wow.animated {
  visibility: visible;
}

/* Stagger utility for grid children */
.ff-stagger-children > *:nth-child(1) { animation-delay: 0s; }
.ff-stagger-children > *:nth-child(2) { animation-delay: 0.08s; }
.ff-stagger-children > *:nth-child(3) { animation-delay: 0.16s; }
.ff-stagger-children > *:nth-child(4) { animation-delay: 0.24s; }

/* Card lift on scroll (CSS fallback when reduced motion) */
.ff-cl-card-lift {
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease;
}

.ff-cl-card-lift:hover {
  transform: translateY(-6px);
}

/* ── Frameflow Creatives-style hover zoom ───────────────────────────── */
.hover-img .image,
.ff-ref-project-card__thumb,
.ff-team-card__avatar {
  overflow: hidden;
}

.hover-img .image > img,
.ff-ref-project-card__thumb > img,
.ff-ref-project-card__thumb .image > img,
.ff-team-card__avatar > img,
.ff-team-card__avatar .image > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.5s ease, transform 1.2s cubic-bezier(0, 0, 0.44, 1.18);
}

.hover-img:hover .image > img,
.ff-ref-project-card:hover .ff-ref-project-card__thumb > img,
.ff-ref-project-card:hover .ff-ref-project-card__thumb .image > img,
.ff-team-card:hover .ff-team-card__avatar > img,
.ff-team-card:hover .ff-team-card__avatar .image > img {
  transform: scale(1.08);
}

/* ── Button ripple (Frameflow Creatives ripple keyframe) ────────────── */
@keyframes ff-ripple {
  0% {
    width: 100%;
    height: 100%;
    opacity: 0.85;
  }
  100% {
    width: 160%;
    height: 160%;
    opacity: 0;
  }
}

.frameflow-light .tf-btn,
.frameflow-light .tf-btn-2 {
  position: relative;
  overflow: hidden;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s ease, background-color 0.25s ease;
}

.frameflow-light .tf-btn:not(:disabled):hover,
.frameflow-light .tf-btn-2:not(:disabled):hover {
  transform: translateY(-2px);
}

.frameflow-light .tf-btn::after,
.frameflow-light .tf-btn-2::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: rgba(255, 255, 255, 0.22);
  opacity: 0;
  pointer-events: none;
}

.frameflow-light .tf-btn:active::after,
.frameflow-light .tf-btn-2:active::after {
  animation: ff-ripple 0.55s ease-out;
}

/* ── Scroll indicator bounce ───────────────────────────────── */
@keyframes ff-scroll-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}

.section-hero--frameflow .scroll-more {
  animation: ff-scroll-bounce 2.4s ease-in-out infinite;
}

.section-hero--frameflow .scroll-more i {
  transition: transform 0.3s ease;
}

.section-hero--frameflow .scroll-more:hover i {
  transform: translateY(4px);
}

/* ── Floating decorative motion ────────────────────────────── */
@keyframes ff-float-y {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-14px) scale(1.03); }
}

@keyframes ff-drift-left {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(-10px); }
}

@keyframes ff-drift-right {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(10px); }
}

.ff-about-globe {
  animation: ff-float-y 8s ease-in-out infinite;
}

.box-quotes {
  animation: ff-float-y 9s ease-in-out infinite;
  animation-delay: -2s;
}

/* ── Marquee polish ─────────────────────────────────────────── */
@keyframes ff-marquee-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.tf-marquee .marquee-item,
.infiniteSlide-app .marquee-item {
  margin-right: 48px;
  white-space: nowrap;
}

/* ── Magnific popup fade ─────────────────────────────────────── */
.mfp-fade.mfp-bg {
  opacity: 0;
  transition: opacity 0.35s ease;
}

.mfp-fade.mfp-ready.mfp-bg {
  opacity: 0.92;
}

.mfp-fade.mfp-removing.mfp-bg {
  opacity: 0;
}

.mfp-fade.mfp-wrap .mfp-content {
  opacity: 0;
  transform: scale(0.96) translateY(12px);
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.mfp-fade.mfp-ready.mfp-wrap .mfp-content {
  opacity: 1;
  transform: scale(1) translateY(0);
}

.mfp-fade.mfp-removing.mfp-wrap .mfp-content {
  opacity: 0;
  transform: scale(0.98) translateY(8px);
}

/* ── Accordion & FAQ smooth open ─────────────────────────────── */
.accordion-faq_item .accordion-body,
.accordion-asked-item .accordion-body,
.ff-services-accordion__collapse {
  transition: height 0.35s ease;
}

.accordion-faq_item .accordion-button i,
.accordion-asked-item .accordion-button i {
  transition: transform 0.3s ease;
}

.accordion-faq_item .accordion-button:not(.collapsed) i,
.accordion-asked-item .accordion-button:not(.collapsed) i {
  transform: rotate(180deg);
}

/* ── Pricing & value cards ───────────────────────────────────── */
.ff-pricing-plan,
.ff-value-strip__item,
.ff-trust-grid__item {
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease, border-color 0.35s ease;
}

.ff-pricing-plan:hover,
.ff-value-strip__item:hover,
.ff-trust-grid__item:hover {
  transform: translateY(-4px);
}

.ff-ref-project-card__arrow {
  transition: transform 0.3s ease, color 0.3s ease;
}

.ff-ref-project-card:hover .ff-ref-project-card__arrow {
  transform: translate(3px, -3px);
}

/* ── Header scroll transition ────────────────────────────────── */
.tf-header--cl .header-inner {
  transition: padding 0.35s ease, box-shadow 0.35s ease, background-color 0.35s ease, backdrop-filter 0.35s ease;
}

/* ── Rotating headline text (textanimation.css) — brand colors ─ */
.frameflow-light .animationtext .cd-words-wrapper .item-text,
.frameflow-light .animationtext .cd-words-wrapper .item-text i {
  background: linear-gradient(95.5deg, #AB05E4 0%, #432692 55%, #13072D 100%);
  background-size: 100% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-stroke: 2px transparent;
  -webkit-text-fill-color: #232323;
}

.frameflow-light .animationtext.loading-bar .cd-words-wrapper::after {
  background: linear-gradient(90deg, #432692, #AB05E4);
}

/* ── Inner page title-animation safety net ───────────────────── */
.ff-cl-page .title-animation {
  opacity: 1;
}

.ff-cl-page .title-animation.is-pending {
  opacity: 0;
}

/* ── Link underline slide ───────────────────────────────────── */
.frameflow-light .link-underline.link1 {
  background-size: 0% 2px;
  background-position: 0 100%;
  transition: background-size 0.35s ease, color 0.25s ease;
}

.frameflow-light .link-underline.link1:hover {
  background-size: 100% 2px;
}

/* ── Partner logo hover ──────────────────────────────────────── */
.frameflow-light .section-partner .infiniteSlide_partner img {
  transition: opacity 0.35s ease, transform 0.35s ease, filter 0.35s ease;
}

.frameflow-light .section-partner .infiniteSlide_partner img:hover {
  transform: scale(1.06);
  filter: none;
}

@media (prefers-reduced-motion: reduce) {
  .ff-hero-blob,
  .ff-preload__spinner,
  .section-hero--frameflow .scroll-more,
  .ff-about-globe,
  .box-quotes {
    animation: none;
  }

  .wow {
    visibility: visible !important;
  }

  .hover-img:hover .image > img,
  .ff-ref-project-card:hover .ff-ref-project-card__thumb > img,
  .ff-team-card:hover .ff-team-card__avatar > img,
  .ff-pricing-plan:hover,
  .ff-value-strip__item:hover,
  .ff-trust-grid__item:hover,
  .frameflow-light .tf-btn:hover,
  .frameflow-light .tf-btn-2:hover {
    transform: none;
  }

  .frameflow-light .tf-btn::after,
  .frameflow-light .tf-btn-2::after {
    animation: none;
  }
}