/* Base font + Geist override */
body { font-family: 'Inter', sans-serif; }
.font-geist { font-family: 'Geist', sans-serif !important; }

/* ---------------- Keyframe animations ---------------- */
@keyframes fadeSlideIn {
  0% { opacity: 0; transform: translateY(30px); filter: blur(8px); }
  100% { opacity: 1; transform: translateY(0); filter: blur(0px); }
}
@keyframes columnReveal {
  0% { clip-path: inset(0 0 100% 0); opacity: 0; }
  100% { clip-path: inset(0 0 0% 0); opacity: 1; }
}
.col-anim {
  animation: columnReveal 1.4s cubic-bezier(0.16, 1, 0.3, 1) backwards;
  will-change: clip-path;
}
.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.3s; }
.delay-4 { animation-delay: 0.4s; }
.delay-5 { animation-delay: 0.5s; }
.delay-6 { animation-delay: 0.6s; }
.delay-7 { animation-delay: 0.7s; }

/* Animation play-state controlled by IntersectionObserver */
.animate-on-scroll { animation-play-state: paused !important; }
.animate-on-scroll.animate { animation-play-state: running !important; }

/* ---------------- Shiny CTA button ---------------- */
@property --gradient-angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@property --gradient-angle-offset { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@property --gradient-percent { syntax: "<percentage>"; initial-value: 20%; inherits: false; }
@property --gradient-shine { syntax: "<color>"; initial-value: #dc2626; inherits: false; }
.shiny-cta {
  --gradient-angle: 0deg;
  --gradient-angle-offset: 0deg;
  --gradient-percent: 20%;
  --gradient-shine: #dc2626;
  position: relative;
  overflow: hidden;
  border-radius: 9999px;
  padding: 1.25rem 3rem;
  font-size: 1.125rem;
  line-height: 1.2;
  font-weight: 500;
  color: #ffffff;
  background: linear-gradient(#000000, #000000) padding-box,
    conic-gradient(from calc(var(--gradient-angle) - var(--gradient-angle-offset)),
      transparent 0%, #dc2626 5%, var(--gradient-shine) 15%, #dc2626 30%, transparent 40%, transparent 100%) border-box;
  border: 2px solid transparent;
  box-shadow: inset 0 0 0 1px #1a1818;
  outline: none;
  transition: --gradient-angle-offset 800ms cubic-bezier(0.25, 1, 0.5, 1),
    --gradient-percent 800ms cubic-bezier(0.25, 1, 0.5, 1),
    --gradient-shine 800ms cubic-bezier(0.25, 1, 0.5, 1),
    box-shadow 0.3s;
  cursor: pointer;
  isolation: isolate;
  outline-offset: 4px;
  z-index: 0;
  animation: border-spin 2.5s linear infinite;
}
@keyframes border-spin { to { --gradient-angle: 360deg; } }
.shiny-cta:active { transform: translateY(1px); }
.shiny-cta::before {
  content: '';
  pointer-events: none;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
  --size: calc(100% - 6px);
  --position: 2px;
  --space: 4px;
  width: var(--size);
  height: var(--size);
  background: radial-gradient(circle at var(--position) var(--position), white 0.5px, transparent 0) padding-box;
  background-size: var(--space) var(--space);
  background-repeat: space;
  mask-image: conic-gradient(from calc(var(--gradient-angle) + 45deg), black, transparent 10% 90%, black);
  border-radius: inherit;
  opacity: 0.4;
}
.shiny-cta::after {
  content: '';
  pointer-events: none;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  width: 100%;
  aspect-ratio: 1;
  background: linear-gradient(-50deg, transparent, #dc2626, transparent);
  mask-image: radial-gradient(circle at bottom, transparent 40%, black);
  opacity: 0.6;
  animation: shimmer 4s linear infinite;
}
.shiny-cta span { position: relative; z-index: 2; display: inline-block; }
.shiny-cta span::before {
  content: '';
  pointer-events: none;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
  --size: calc(100% + 1rem);
  width: var(--size);
  height: var(--size);
  box-shadow: inset 0 -1ex 2rem 4px #dc2626;
  opacity: 0;
  border-radius: inherit;
  transition: opacity 800ms cubic-bezier(0.25, 1, 0.5, 1);
  animation: breathe 4.5s linear infinite;
}
@keyframes shimmer { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes breathe {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -50%) scale(1.20); }
}

/* ---------------- Progressive blur (top fade) ---------------- */
.gradient-blur {
  position: fixed;
  z-index: 5;
  inset: 0 0 auto 0;
  height: 12%;
  pointer-events: none;
}
.gradient-blur > div,
.gradient-blur::before,
.gradient-blur::after { position: absolute; inset: 0; }
.gradient-blur::before { content: ""; z-index: 1; backdrop-filter: blur(0.5px); mask: linear-gradient(to top, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 12.5%, rgba(0,0,0,1) 25%, rgba(0,0,0,0) 37.5%); }
.gradient-blur > div:nth-of-type(1) { z-index: 2; backdrop-filter: blur(1px); mask: linear-gradient(to top, rgba(0,0,0,0) 12.5%, rgba(0,0,0,1) 25%, rgba(0,0,0,1) 37.5%, rgba(0,0,0,0) 50%); }
.gradient-blur > div:nth-of-type(2) { z-index: 3; backdrop-filter: blur(2px); mask: linear-gradient(to top, rgba(0,0,0,0) 25%, rgba(0,0,0,1) 37.5%, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 62.5%); }
.gradient-blur > div:nth-of-type(3) { z-index: 4; backdrop-filter: blur(4px); mask: linear-gradient(to top, rgba(0,0,0,0) 37.5%, rgba(0,0,0,1) 50%, rgba(0,0,0,1) 62.5%, rgba(0,0,0,0) 75%); }
.gradient-blur > div:nth-of-type(4) { z-index: 5; backdrop-filter: blur(8px); mask: linear-gradient(to top, rgba(0,0,0,0) 50%, rgba(0,0,0,1) 62.5%, rgba(0,0,0,1) 75%, rgba(0,0,0,0) 87.5%); }
.gradient-blur > div:nth-of-type(5) { z-index: 6; backdrop-filter: blur(16px); mask: linear-gradient(to top, rgba(0,0,0,0) 62.5%, rgba(0,0,0,1) 75%, rgba(0,0,0,1) 87.5%, rgba(0,0,0,0) 100%); }
.gradient-blur > div:nth-of-type(6) { z-index: 7; backdrop-filter: blur(32px); mask: linear-gradient(to top, rgba(0,0,0,0) 75%, rgba(0,0,0,1) 87.5%, rgba(0,0,0,1) 100%); }
.gradient-blur::after { content: ""; z-index: 8; backdrop-filter: blur(64px); mask: linear-gradient(to top, rgba(0,0,0,0) 87.5%, rgba(0,0,0,1) 100%); }

/* ---------------- Editor visibility helper ---------------- */
.invisible { visibility: hidden !important; }

/* ---------------- Marquee infinite scroll (logos band) ---------------- */
@keyframes infinite-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.animate-infinite-scroll { animation: infinite-scroll 40s linear infinite; }
.group:hover .animate-infinite-scroll { animation-play-state: paused; }

/* ---------------- Border gradient utility ---------------- */
[style*="--border-gradient"]::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: var(--border-radius-before, inherit);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  background: var(--border-gradient);
  pointer-events: none;
}

/* ---------------- 3D transform utilities ---------------- */
.perspective-none { perspective: none !important; }
.perspective-dramatic { perspective: 100px !important; }
.perspective-near { perspective: 300px !important; }
.perspective-normal { perspective: 500px !important; }
.perspective-midrange { perspective: 800px !important; }
.perspective-distant { perspective: 1200px !important; }
.transform-style-preserve-3d { transform-style: preserve-3d !important; }
.transform-style-flat { transform-style: flat !important; }

/* ---------------- Phone preview / Stats card animations ---------------- */
@keyframes bar-grow {
  0% { transform: scaleY(0); opacity: 0; }
  25% { transform: scaleY(1); opacity: 1; }
  75% { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(0); opacity: 0; }
}
@keyframes tooltip-fade {
  0% { opacity: 0; transform: translateY(5px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes progress-loop {
  0% { width: 0; opacity: 0.5; }
  40% { width: var(--target-width); opacity: 1; }
  80% { width: var(--target-width); opacity: 1; }
  100% { width: var(--target-width); opacity: 0; }
}

/* ---------------- Brand identity loop card ---------------- */
@keyframes brandIdentityLoop {
  0%   { opacity: 0; transform: scale(0.94) translateY(4px); filter: blur(2px); }
  5%   { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); }
  55%  { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); }
  65%  { opacity: 0; transform: scale(0.98) translateY(-2px); filter: blur(2px); }
  100% { opacity: 0; transform: scale(0.94) translateY(4px); filter: blur(2px); }
}
.animate-brand-item { animation: brandIdentityLoop 8s cubic-bezier(0.4, 0, 0.2, 1) infinite both; }

/* ---------------- Web Design wireframe loop ---------------- */
@keyframes frameUp {
  0% { transform: translateY(30px); opacity: 0; }
  18% { transform: translateY(0); opacity: 1; }
  78% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(30px); opacity: 0; }
}
@keyframes stepFadeUp {
  0%, 20% { transform: translateY(10px); opacity: 0; }
  35% { transform: translateY(0); opacity: 1; }
  78% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(10px); opacity: 0; }
}
@keyframes shimmerMove {
  0%, 35% { opacity: 0; transform: translateX(-20%); }
  55% { opacity: 1; transform: translateX(0); }
  78% { opacity: 1; transform: translateX(20%); }
  100% { opacity: 0; transform: translateX(20%); }
}
.wf {
  will-change: transform, opacity;
  backface-visibility: hidden;
  transform: translateZ(0);
}

/* ---------------- UI/UX cursor simulation ---------------- */
@keyframes cursor-sim-path {
  0%   { transform: translate3d(20px, 20px, 0) scale(1); }
  25%  { transform: translate3d(-168px, -52px, 0) scale(1); }
  32%  { transform: translate3d(-168px, -52px, 0) scale(1); }
  35%  { transform: translate3d(-168px, -52px, 0) scale(0.9); }
  38%  { transform: translate3d(-168px, -52px, 0) scale(1); }
  55%  { transform: translate3d(-72px, -52px, 0) scale(1); }
  65%  { transform: translate3d(-72px, -52px, 0) scale(1); }
  100% { transform: translate3d(20px, 20px, 0) scale(1); }
}

/* ---------------- Strategy / metrics counter ---------------- */
@property --num { syntax: '<integer>'; initial-value: 0; inherits: false; }
@keyframes countUp {
  0%   { --num: 0; opacity: 0; transform: translateY(10px); filter: blur(4px); }
  15%  { opacity: 1; transform: translateY(0); filter: blur(0); }
  35%  { --num: 127; }
  85%  { --num: 127; opacity: 1; transform: translateY(0); filter: blur(0); }
  100% { --num: 140; opacity: 0; transform: translateY(-10px); filter: blur(4px); }
}
@keyframes barCycle {
  0%   { transform: scaleY(0); opacity: 0; }
  15%  { transform: scaleY(1.05); opacity: 1; }
  25%  { transform: scaleY(1); opacity: 1; }
  85%  { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(0); opacity: 0; }
}
.animate-metric-count {
  animation: countUp 6s cubic-bezier(0.22, 1, 0.36, 1) infinite;
  counter-reset: num var(--num);
}
.animate-metric-count::after { content: "+" counter(num) "%"; }
.animate-bar-loop {
  animation: barCycle 6s cubic-bezier(0.22, 1, 0.36, 1) infinite;
  transform-origin: bottom;
  will-change: transform, opacity;
}

/* ---------------- Floating 3D scene ---------------- */
@keyframes float-visual {
  0%, 100% { transform: translateY(0px) rotateX(0deg) rotateZ(0deg); }
  50% { transform: translateY(-15px) rotateX(5deg) rotateZ(2deg); }
}
.visual-anim { animation: float-visual 6s ease-in-out infinite; }