/* ============================================================
   FUTURE MARKETING STUDIO — ANIMATIONS
   All keyframes, entrance animations, and motion effects
   ============================================================ */

/* ── HERO LOAD ANIMATIONS ─────────────────────────────────── */
@keyframes heroIn {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes heroInLeft {
  from { opacity: 0; transform: translateX(-24px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes heroInScale {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── SCROLL INDICATOR ─────────────────────────────────────── */
@keyframes scrollPulse {
  0%,100% { opacity: 0.3; transform: scaleY(1); }
  50%     { opacity: 0.9; transform: scaleY(1.15); }
}
@keyframes scrollBounce {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(6px); }
}

/* ── RED DOT PULSE ────────────────────────────────────────── */
@keyframes pulse {
  0%,100% {
    opacity: 1;
    box-shadow: 0 0 0 0 rgba(224, 36, 36, 0.45);
  }
  50% {
    opacity: 0.7;
    box-shadow: 0 0 0 6px rgba(224, 36, 36, 0);
  }
}

/* ── LOADER ───────────────────────────────────────────────── */
@keyframes loaderSlide {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
@keyframes loaderPulse {
  0%,100% { opacity: 0.35; }
  50%     { opacity: 1; }
}

/* ── LINE DRAW ────────────────────────────────────────────── */
@keyframes drawLine {
  from { transform: scaleX(0); transform-origin: left; }
  to   { transform: scaleX(1); transform-origin: left; }
}
@keyframes drawLineV {
  from { transform: scaleY(0); transform-origin: top; }
  to   { transform: scaleY(1); transform-origin: top; }
}

/* ── GRAIN DRIFT ──────────────────────────────────────────── */
@keyframes grainDrift {
  0%, 100% { transform: translate(0, 0); }
  10%  { transform: translate(-2%, -3%); }
  20%  { transform: translate(3%, 1%); }
  30%  { transform: translate(-1%, 2%); }
  40%  { transform: translate(2%, -1%); }
  50%  { transform: translate(-3%, 3%); }
  60%  { transform: translate(1%, -2%); }
  70%  { transform: translate(-2%, 1%); }
  80%  { transform: translate(3%, -3%); }
  90%  { transform: translate(-1%, 2%); }
}

/* ── FLOAT ────────────────────────────────────────────────── */
@keyframes float {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-10px); }
}

/* ── SHIMMER ──────────────────────────────────────────────── */
@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

/* ── COUNT UP (JS-triggered, uses CSS custom property) ─────── */
@keyframes countUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── SKILL BAR FILL ───────────────────────────────────────── */
@keyframes fillBar {
  from { width: 0 !important; }
}

/* ── IMAGE PARALLAX PLACEHOLDER ──────────────────────────── */
.parallax-bg {
  will-change: background-position;
}

/* ── STAGGER CHILDREN UTILITY ─────────────────────────────── */
.stagger-children > * { opacity: 0; transform: translateY(20px); }
.stagger-children.visible > * {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}
.stagger-children.visible > *:nth-child(1) { transition-delay: 0.05s; }
.stagger-children.visible > *:nth-child(2) { transition-delay: 0.12s; }
.stagger-children.visible > *:nth-child(3) { transition-delay: 0.19s; }
.stagger-children.visible > *:nth-child(4) { transition-delay: 0.26s; }
.stagger-children.visible > *:nth-child(5) { transition-delay: 0.33s; }
.stagger-children.visible > *:nth-child(6) { transition-delay: 0.40s; }

/* ── HERO ELEMENTS (applied inline via animation-delay) ────── */
.hero-animate-1 {
  opacity: 0;
  animation: heroIn 0.7s var(--ease-out) forwards;
  animation-delay: 0.25s;
}
.hero-animate-2 {
  opacity: 0;
  animation: heroIn 0.65s var(--ease-out) forwards;
  animation-delay: 0.42s;
}
.hero-animate-3 {
  opacity: 0;
  animation: heroIn 0.65s var(--ease-out) forwards;
  animation-delay: 0.56s;
}
.hero-animate-4 {
  opacity: 0;
  animation: heroIn 0.65s var(--ease-out) forwards;
  animation-delay: 0.70s;
}
.hero-animate-5 {
  opacity: 0;
  animation: heroIn 0.7s var(--ease-out) forwards;
  animation-delay: 0.86s;
}
.hero-animate-6 {
  opacity: 0;
  animation: heroIn 0.7s var(--ease-out) forwards;
  animation-delay: 1.02s;
}
.hero-animate-scroll {
  opacity: 0;
  animation: heroIn 0.6s var(--ease-out) forwards;
  animation-delay: 1.3s;
}

/* ── CARD HOVER EFFECTS ───────────────────────────────────── */
.card-hover {
  transition: transform var(--t-med) var(--ease), border-color var(--t-med);
}
.card-hover:hover { transform: translateY(-3px); }

/* ── IMAGE ZOOM HOVER ─────────────────────────────────────── */
.img-zoom {
  overflow: hidden;
}
.img-zoom img {
  transition: transform 0.8s var(--ease);
}
.img-zoom:hover img { transform: scale(1.04); }

/* ── UNDERLINE REVEAL ─────────────────────────────────────── */
.underline-reveal {
  position: relative;
  display: inline-block;
}
.underline-reveal::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0;
  width: 100%; height: 1px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-med) var(--ease);
}
.underline-reveal:hover::after { transform: scaleX(1); }

/* ── GRAIN ANIMATION (noise layer) ───────────────────────── */
.noise-overlay {
  animation: grainDrift 0.8s steps(1) infinite;
}