/* ============================================================
   Framer-Style Animations — Vertiqo
   Scroll-reveal, stagger, hover micro-interactions
   ============================================================ */

/* ---------- base state for reveal elements ---------- */
[data-fr] {
  opacity: 0;
  will-change: transform, opacity;
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

/* visible (triggered by IntersectionObserver) */
[data-fr].fr-visible {
  opacity: 1;
  transform: none !important;
}

/* ---------- directional presets ---------- */
[data-fr="fade-up"]    { transform: translateY(60px); }
[data-fr="fade-down"]  { transform: translateY(-60px); }
[data-fr="fade-left"]  { transform: translateX(60px); }
[data-fr="fade-right"] { transform: translateX(-60px); }
[data-fr="fade-in"]    { transform: scale(0.97); }
[data-fr="zoom-in"]    { transform: scale(0.85); }
[data-fr="zoom-out"]   { transform: scale(1.08); }
[data-fr="flip-up"]    { transform: perspective(800px) rotateX(12deg) translateY(40px); }
[data-fr="flip-left"]  { transform: perspective(800px) rotateY(-12deg) translateX(40px); }
[data-fr="blur-in"]    { transform: scale(0.96); filter: blur(10px); }
[data-fr="blur-in"].fr-visible { filter: blur(0); }
[data-fr="slide-up"]   { transform: translateY(100%); }
[data-fr="pop"] {
  transform: scale(0.6);
  transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ---------- stagger delay utility ---------- */
[data-fr-delay="1"] { transition-delay: 0.08s; }
[data-fr-delay="2"] { transition-delay: 0.16s; }
[data-fr-delay="3"] { transition-delay: 0.24s; }
[data-fr-delay="4"] { transition-delay: 0.32s; }
[data-fr-delay="5"] { transition-delay: 0.40s; }
[data-fr-delay="6"] { transition-delay: 0.48s; }
[data-fr-delay="7"] { transition-delay: 0.56s; }
[data-fr-delay="8"] { transition-delay: 0.64s; }

/* custom durations */
[data-fr-duration="fast"]   { transition-duration: 0.4s; }
[data-fr-duration="normal"] { transition-duration: 0.7s; }
[data-fr-duration="slow"]   { transition-duration: 1s; }
[data-fr-duration="slower"] { transition-duration: 1.4s; }

/* ---------- hero entrance sequence ---------- */
.fr-hero-title {
  opacity: 0;
  transform: translateY(50px);
  animation: frHeroTitle 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.3s forwards;
}
.fr-hero-sub {
  opacity: 0;
  transform: translateY(30px);
  animation: frHeroSub 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.55s forwards;
}
.fr-hero-cta {
  opacity: 0;
  transform: translateY(24px) scale(0.95);
  animation: frHeroCta 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.8s forwards;
}
@keyframes frHeroTitle {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes frHeroSub {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes frHeroCta {
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---------- card hover lift ---------- */
.fr-lift {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.35s ease;
}
.fr-lift:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 50px rgba(30, 27, 46, 0.15);
}

/* ---------- image reveal clip ---------- */
.fr-img-reveal {
  overflow: hidden;
  position: relative;
}
.fr-img-reveal::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #1E1B2E;
  transform-origin: left;
  animation: none;
}
.fr-img-reveal.fr-visible::after {
  animation: frImgWipe 0.9s cubic-bezier(0.77, 0, 0.175, 1) forwards;
}
@keyframes frImgWipe {
  0%   { transform: scaleX(1); transform-origin: left; }
  50%  { transform: scaleX(1); transform-origin: right; }
  100% { transform: scaleX(0); transform-origin: right; }
}

/* ---------- text character split (applied via JS) ---------- */
.fr-char {
  display: inline-block;
  opacity: 0;
  transform: translateY(30px) rotate(4deg);
  animation: frCharIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes frCharIn {
  to { opacity: 1; transform: translateY(0) rotate(0deg); }
}

/* ---------- floating / continuous animations ---------- */
.fr-float {
  animation: frFloat 4s ease-in-out infinite;
}
@keyframes frFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}

.fr-pulse {
  animation: frPulse 2.5s ease-in-out infinite;
}
@keyframes frPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.06); opacity: 0.85; }
}

.fr-rotate {
  animation: frRotate 20s linear infinite;
}
@keyframes frRotate {
  to { transform: rotate(360deg); }
}

/* ---------- scroll-triggered counter spring ---------- */
.fr-counter {
  display: inline-block;
  opacity: 0;
  transform: scale(0.5) translateY(20px);
  transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.fr-counter.fr-visible {
  opacity: 1;
  transform: scale(1) translateY(0);
}

/* ---------- staggered list items ---------- */
.fr-stagger > * {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.fr-stagger.fr-visible > *:nth-child(1) { transition-delay: 0.05s; }
.fr-stagger.fr-visible > *:nth-child(2) { transition-delay: 0.12s; }
.fr-stagger.fr-visible > *:nth-child(3) { transition-delay: 0.19s; }
.fr-stagger.fr-visible > *:nth-child(4) { transition-delay: 0.26s; }
.fr-stagger.fr-visible > *:nth-child(5) { transition-delay: 0.33s; }
.fr-stagger.fr-visible > *:nth-child(6) { transition-delay: 0.40s; }
.fr-stagger.fr-visible > *:nth-child(7) { transition-delay: 0.47s; }
.fr-stagger.fr-visible > *:nth-child(8) { transition-delay: 0.54s; }
.fr-stagger.fr-visible > * {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- magnetic button hover (enhanced via JS) ---------- */
.fr-magnetic {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- parallax layer (controlled via JS) ---------- */
.fr-parallax {
  will-change: transform;
  transition: transform 0.1s linear;
}

/* ---------- gradient text shimmer ---------- */
.fr-shimmer {
  background: linear-gradient(
    120deg,
    #7C3AED 0%,
    #A78BFA 30%,
    #C4B5FD 50%,
    #A78BFA 70%,
    #7C3AED 100%
  );
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: frShimmer 4s ease-in-out infinite;
}
@keyframes frShimmer {
  0%   { background-position: 100% 50%; }
  50%  { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

/* ---------- line draw (for SVGs / borders) ---------- */
.fr-draw {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  transition: stroke-dashoffset 1.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.fr-draw.fr-visible {
  stroke-dashoffset: 0;
}

/* ---------- smooth section reveal with backdrop ---------- */
.fr-section-reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.fr-section-reveal.fr-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- scale-rotate entrance ---------- */
[data-fr="twist"] {
  transform: scale(0.8) rotate(-6deg);
}

/* ---------- elastic bounce ---------- */
[data-fr="bounce"] {
  transform: translateY(60px);
  transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ---------- brand logo hover glow ---------- */
.fr-glow {
  transition: filter 0.4s ease, transform 0.4s ease;
}
.fr-glow:hover {
  filter: drop-shadow(0 0 14px rgba(124, 58, 237, 0.4));
  transform: scale(1.08);
}

/* ---------- underline grow on hover ---------- */
.fr-underline {
  position: relative;
  display: inline-block;
}
.fr-underline::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, #7C3AED, #A78BFA);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.fr-underline:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  [data-fr],
  .fr-hero-title,
  .fr-hero-sub,
  .fr-hero-cta,
  .fr-float,
  .fr-pulse,
  .fr-rotate,
  .fr-shimmer,
  .fr-stagger > *,
  .fr-lift,
  .fr-counter,
  .fr-char {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}