/* ==========================================================
   5★CUTS · animations.css
   --------------------------------------------------------
   Допълва css/style.css. Не презаписва съществуващи стилове —
   само добавя. Всичко тук e нова анимационна логика.
   ========================================================== */

/* ==========================================================
   1.  CUSTOM SCISSOR CURSOR
   ========================================================== */
.fsc-cursor {
  position: fixed;
  top: 0; left: 0;
  width: 52px; height: 26px;
  margin-left: -26px;
  margin-top: -13px;
  pointer-events: none;
  z-index: 99999;
  transform: translate3d(-200px, -200px, 0) rotate(-28deg);
  will-change: transform;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.fsc-cursor.ready { opacity: 1; }
.fsc-cursor svg { width: 100%; height: 100%; display: block; overflow: visible; }
.fsc-cursor .fsc-cursor-glow {
  position: absolute;
  inset: -60%;
  background: radial-gradient(circle, rgba(201,169,110,0.32), transparent 60%);
  filter: blur(10px);
  opacity: 0;
  transition: opacity 0.18s ease;
}
.fsc-cursor.snipping .fsc-cursor-glow { opacity: 1; }

.fsc-cursor svg .blade-top,
.fsc-cursor svg .blade-bottom {
  transform-origin: 120px 60px;
  transform-box: view-box;
  transform: rotate(0deg);
  transition: transform 0.14s cubic-bezier(0.4, 0, 0.2, 1);
}
.fsc-cursor.snipping svg .blade-top    { transform: rotate( 14deg); }
.fsc-cursor.snipping svg .blade-bottom { transform: rotate(-14deg); }

@media (hover: hover) and (pointer: fine) {
  body.fsc-has-cursor,
  body.fsc-has-cursor a,
  body.fsc-has-cursor button,
  body.fsc-has-cursor [role="button"] { cursor: none; }
  /* Form fields keep native text cursor */
  body.fsc-has-cursor input,
  body.fsc-has-cursor textarea,
  body.fsc-has-cursor select { cursor: text; }
  body.fsc-has-cursor select { cursor: pointer; }
}
@media (hover: none), (max-width: 900px) {
  .fsc-cursor { display: none !important; }
}

/* Gold sparks on snip click */
.fsc-spark {
  position: fixed;
  width: 4px; height: 4px;
  background: var(--gold-light);
  border-radius: 50%;
  pointer-events: none;
  z-index: 99998;
  box-shadow: 0 0 8px var(--gold);
  animation: fsc-spark-fly 0.65s ease-out forwards;
}
@keyframes fsc-spark-fly {
  0%   { opacity: 1; transform: translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0.2); }
}

/* ==========================================================
   2.  ANIMATED BACKGROUND TOOLS
   --------------------------------------------------------
   Заменя статичните <img> в .barber-bg-tool с inline SVG +
   slow drift поверх съществуващата bob анимация.
   ========================================================== */

/* SVG inside the bg tool wrapper */
.barber-bg-tool .bg-tool-svg {
  width: 100%; height: 100%;
  display: block;
  overflow: visible;
  filter:
    drop-shadow(0 18px 34px rgba(0,0,0,0.55))
    drop-shadow(0 0 18px rgba(217,146,50,0.16));
}

/* Override aspect ratios for animated tools */
.barber-bg-tool.is-anim-scissors {
  aspect-ratio: 2 / 1;
  width: clamp(110px, 10vw, 180px);
}
.barber-bg-tool.is-anim-razor {
  aspect-ratio: 3.2 / 1;
  width: clamp(140px, 12vw, 220px);
}
.barber-bg-tool.is-anim-comb {
  aspect-ratio: 4 / 1;
  width: clamp(160px, 14vw, 260px);
}

/* Add an extra drift wrapper between .barber-bg-tool and .barber-tool-inner */
.barber-tool-drift {
  position: relative;
  width: 100%; height: 100%;
  will-change: transform;
  /* Default animation — overridden per .drift-X class */
  animation: fsc-drift-a 48s ease-in-out infinite alternate;
}
.barber-tool-drift.drift-a { animation: fsc-drift-a 52s ease-in-out infinite alternate; }
.barber-tool-drift.drift-b { animation: fsc-drift-b 56s ease-in-out infinite alternate; }
.barber-tool-drift.drift-c { animation: fsc-drift-c 60s ease-in-out infinite alternate; }
.barber-tool-drift.drift-d { animation: fsc-drift-d 64s ease-in-out infinite alternate; }
.barber-tool-drift.drift-e { animation: fsc-drift-e 50s ease-in-out infinite alternate; }
.barber-tool-drift.drift-f { animation: fsc-drift-f 58s ease-in-out infinite alternate; }

@keyframes fsc-drift-a {
  0%   { transform: translate(0, 0) rotate(0deg); }
  33%  { transform: translate(38px, -22px) rotate(6deg); }
  66%  { transform: translate(70px, 12px) rotate(-4deg); }
  100% { transform: translate(50px, 30px) rotate(8deg); }
}
@keyframes fsc-drift-b {
  0%   { transform: translate(0, 0) rotate(0deg); }
  33%  { transform: translate(-32px, 18px) rotate(-7deg); }
  66%  { transform: translate(-50px, -10px) rotate(5deg); }
  100% { transform: translate(-30px, -36px) rotate(-3deg); }
}
@keyframes fsc-drift-c {
  0%   { transform: translate(0, 0) rotate(0deg); }
  25%  { transform: translate(24px, 28px) rotate(4deg); }
  50%  { transform: translate(48px, -18px) rotate(-6deg); }
  75%  { transform: translate(-14px, -32px) rotate(2deg); }
  100% { transform: translate(-36px, 10px) rotate(7deg); }
}
@keyframes fsc-drift-d {
  0%   { transform: translate(0, 0) rotate(0deg); }
  50%  { transform: translate(60px, 24px) rotate(-9deg); }
  100% { transform: translate(20px, -28px) rotate(5deg); }
}
@keyframes fsc-drift-e {
  0%   { transform: translate(0, 0) rotate(0deg); }
  40%  { transform: translate(-44px, -22px) rotate(8deg); }
  80%  { transform: translate(28px, -38px) rotate(-5deg); }
  100% { transform: translate(46px, 16px) rotate(3deg); }
}
@keyframes fsc-drift-f {
  0%   { transform: translate(0, 0) rotate(0deg); }
  50%  { transform: translate(-58px, 32px) rotate(-7deg); }
  100% { transform: translate(34px, 22px) rotate(6deg); }
}

/* --- Scissors snip animation inside bg tool --- */
.bg-tool-svg.bg-scissors {
  --snip-dur: 5.8s;
}
.bg-tool-svg.bg-scissors .blade {
  transform-origin: 120px 60px;
  transform-box: view-box;
  will-change: transform;
}
.bg-tool-svg.bg-scissors .blade-top    { animation: fsc-scissor-top    var(--snip-dur) cubic-bezier(0.65, 0, 0.35, 1) infinite; }
.bg-tool-svg.bg-scissors .blade-bottom { animation: fsc-scissor-bottom var(--snip-dur) cubic-bezier(0.65, 0, 0.35, 1) infinite; }
.bg-tool-svg.bg-scissors .snip-flash {
  transform-origin: 220px 60px;
  transform-box: view-box;
  opacity: 0;
  animation: fsc-snip-flash var(--snip-dur) ease-out infinite;
}

@keyframes fsc-scissor-top {
  0%, 45%  { transform: rotate(0deg); }
  56%      { transform: rotate(14deg); }
  60%      { transform: rotate(14deg); }
  68%      { transform: rotate(10deg); }
  82%      { transform: rotate(3deg); }
  90%, 100%{ transform: rotate(0deg); }
}
@keyframes fsc-scissor-bottom {
  0%, 45%  { transform: rotate(0deg); }
  56%      { transform: rotate(-14deg); }
  60%      { transform: rotate(-14deg); }
  68%      { transform: rotate(-10deg); }
  82%      { transform: rotate(-3deg); }
  90%, 100%{ transform: rotate(0deg); }
}
@keyframes fsc-snip-flash {
  0%, 54%  { opacity: 0; transform: scale(0.3); }
  58%      { opacity: 0.9; transform: scale(1.4); }
  68%      { opacity: 0; transform: scale(0.4); }
  100%     { opacity: 0; transform: scale(0.3); }
}

/* Staggered timing for multiple scissors */
.bg-tool-svg.bg-scissors.snip-a .blade-top    { animation-delay: 0s; }
.bg-tool-svg.bg-scissors.snip-a .blade-bottom { animation-delay: 0s; }
.bg-tool-svg.bg-scissors.snip-a .snip-flash   { animation-delay: 0s; }
.bg-tool-svg.bg-scissors.snip-b .blade-top    { animation-delay: -1.8s; }
.bg-tool-svg.bg-scissors.snip-b .blade-bottom { animation-delay: -1.8s; }
.bg-tool-svg.bg-scissors.snip-b .snip-flash   { animation-delay: -1.8s; }
.bg-tool-svg.bg-scissors.snip-c .blade-top    { animation-delay: -3.6s; }
.bg-tool-svg.bg-scissors.snip-c .blade-bottom { animation-delay: -3.6s; }
.bg-tool-svg.bg-scissors.snip-c .snip-flash   { animation-delay: -3.6s; }

/* --- Razor shimmer sweep --- */
.bg-tool-svg.bg-razor .shimmer {
  animation: fsc-razor-shimmer 4.2s ease-in-out infinite;
  will-change: transform;
}
.bg-tool-svg.bg-razor.sweep-b .shimmer { animation-delay: -1.4s; }
.bg-tool-svg.bg-razor.sweep-c .shimmer { animation-delay: -2.8s; }
@keyframes fsc-razor-shimmer {
  0%, 15%  { transform: translateX(-180px); opacity: 0; }
  22%      { opacity: 1; }
  45%      { opacity: 1; }
  55%      { transform: translateX(200px); opacity: 0; }
  100%     { transform: translateX(200px); opacity: 0; }
}

.bg-tool-svg.bg-razor .micro-gleam {
  animation: fsc-micro-gleam 5.4s ease-in-out infinite;
}
@keyframes fsc-micro-gleam {
  0%, 20%, 100% { opacity: 0; }
  30%           { opacity: 0.7; }
  35%           { opacity: 0; }
  42%           { opacity: 0.9; }
  50%           { opacity: 0; }
}

/* ==========================================================
   3.  MARQUEE RIBBONS
   ========================================================== */
.fsc-marquee {
  overflow: hidden;
  border-top: 1px solid rgba(201,169,110,0.18);
  border-bottom: 1px solid rgba(201,169,110,0.18);
  background:
    linear-gradient(180deg, rgba(201,169,110,0.05), transparent 50%, rgba(201,169,110,0.05));
  padding: 22px 0;
  position: relative;
  z-index: 5;
}
.fsc-marquee::before,
.fsc-marquee::after {
  content: '';
  position: absolute; top: 0; bottom: 0; width: 120px;
  z-index: 2; pointer-events: none;
}
.fsc-marquee::before { left: 0;  background: linear-gradient(90deg, var(--dark), transparent); }
.fsc-marquee::after  { right: 0; background: linear-gradient(-90deg, var(--dark), transparent); }

.fsc-marquee-track {
  display: flex; align-items: center; gap: 56px;
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.6vw, 2.2rem);
  letter-spacing: 0.2em;
  animation: fsc-marquee 36s linear infinite;
}
.fsc-marquee.reverse .fsc-marquee-track { animation-direction: reverse; }
.fsc-marquee:hover .fsc-marquee-track { animation-play-state: paused; }
.fsc-marquee-track .item { color: var(--white); flex-shrink: 0; }
.fsc-marquee-track .item.gold { color: var(--gold); }
.fsc-marquee-track .dot {
  width: 7px; height: 7px;
  background: var(--gold);
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 8px rgba(201,169,110,0.5);
}
@keyframes fsc-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ==========================================================
   4.  CHAR REVEAL — letter-by-letter section titles
   ========================================================== */
.fsc-reveal {
  display: inline-block;
  overflow: hidden;
  padding: 0.04em 0.06em;
  margin: -0.04em -0.06em;
}
.fsc-reveal .char {
  display: inline-block;
  opacity: 0;
  transform: translateY(115%) rotate(6deg);
  transition:
    opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--i) * 38ms);
}
.fsc-reveal .char.space { width: 0.32em; }
.fsc-reveal.in .char {
  opacity: 1;
  transform: translateY(0) rotate(0);
}

/* ==========================================================
   5.  BUTTON CUT  — мини ножица отрязва стрелката
   ========================================================== */
.btn-gold.fsc-btn-cut,
.btn-outline.fsc-btn-cut {
  position: relative;
  overflow: visible;
}
.btn-gold.fsc-btn-cut .fsc-arrow-wrap,
.btn-outline.fsc-btn-cut .fsc-arrow-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
}
.btn-gold.fsc-btn-cut.btn-large .fsc-arrow-wrap,
.btn-outline.fsc-btn-cut.btn-large .fsc-arrow-wrap {
  width: 22px; height: 22px;
}
.fsc-btn-cut .fsc-arrow-shaft,
.fsc-btn-cut .fsc-arrow-tip {
  stroke-dasharray: 30;
  stroke-dashoffset: 0;
}
.fsc-btn-cut .fsc-cut-scissor {
  position: absolute;
  pointer-events: none;
  width: 30px; height: 16px;
  right: -2px;
  top: 50%;
  transform: translate(60px, -50%) rotate(-30deg) scale(0.5);
  opacity: 0;
  z-index: 2;
}
.fsc-btn-cut .fsc-cut-scissor svg { width: 100%; height: 100%; display: block; overflow: visible; }
.fsc-btn-cut .fsc-cut-scissor .b-top,
.fsc-btn-cut .fsc-cut-scissor .b-bottom {
  transform-origin: 120px 60px;
  transform-box: view-box;
  transform: rotate(0deg);
}

/* Hover sequence */
.fsc-btn-cut.cutting .fsc-cut-scissor {
  animation: fsc-cut-fly 1.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.fsc-btn-cut.cutting .fsc-arrow-shaft {
  animation: fsc-arrow-shaft 1.25s ease-in forwards;
}
.fsc-btn-cut.cutting .fsc-arrow-tip {
  animation: fsc-arrow-tip 1.25s ease-in forwards;
}
.fsc-btn-cut.cutting .fsc-cut-scissor .b-top    { animation: fsc-mini-top    1.25s ease-in-out forwards; }
.fsc-btn-cut.cutting .fsc-cut-scissor .b-bottom { animation: fsc-mini-bottom 1.25s ease-in-out forwards; }

@keyframes fsc-cut-fly {
  0%   { transform: translate(60px, -50%) rotate(-50deg) scale(0.3); opacity: 0; }
  18%  { transform: translate(12px, -50%) rotate(-15deg) scale(1); opacity: 1; }
  35%  { transform: translate(0px, -50%) rotate(-8deg) scale(1.05); opacity: 1; }
  44%  { transform: translate(-3px, -50%) rotate(-4deg) scale(1.1); opacity: 1; }
  60%  { transform: translate(-22px, -50%) rotate(6deg) scale(1); opacity: 1; }
  100% { transform: translate(-80px, -50%) rotate(22deg) scale(0.5); opacity: 0; }
}
@keyframes fsc-arrow-shaft {
  0%, 38%  { stroke-dashoffset: 0; }
  44%      { stroke-dashoffset: 30; }
  70%      { stroke-dashoffset: 30; }
  100%     { stroke-dashoffset: 0; }
}
@keyframes fsc-arrow-tip {
  0%, 38%  { opacity: 1; transform: translate(0,0) rotate(0); }
  42%      { opacity: 1; transform: translate(2px, 2px) rotate(15deg); transform-origin: 12px 12px; }
  60%      { opacity: 0; transform: translate(8px, 22px) rotate(80deg); }
  72%      { opacity: 0; transform: translate(8px, 30px) rotate(80deg); }
  100%     { opacity: 1; transform: translate(0,0) rotate(0); }
}
.fsc-btn-cut .fsc-arrow-tip { transform-box: fill-box; transform-origin: center; }

@keyframes fsc-mini-top {
  0%, 22%  { transform: rotate(0deg); }
  38%      { transform: rotate(11deg); }
  44%      { transform: rotate(14deg); }
  55%      { transform: rotate(11deg); }
  72%      { transform: rotate(2deg); }
  100%     { transform: rotate(0deg); }
}
@keyframes fsc-mini-bottom {
  0%, 22%  { transform: rotate(0deg); }
  38%      { transform: rotate(-11deg); }
  44%      { transform: rotate(-14deg); }
  55%      { transform: rotate(-11deg); }
  72%      { transform: rotate(-2deg); }
  100%     { transform: rotate(0deg); }
}

/* ==========================================================
   6.  BARBER CAROUSEL — мега яка transition между картите
   --------------------------------------------------------
   - Голяма gold ножица прелита през showcase
   - Razor sweep линия с shimmer
   - Flash + glow върху incoming картата
   - Gold искри пръскат от линията
   ========================================================== */
.barbers-showcase {
  position: relative;
}

/* Effects overlay — added by JS */
.fsc-barber-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 6;
  overflow: visible;
}
/* The flying scissor */
.fsc-barber-fx .fsc-fx-scissor {
  position: absolute;
  top: 48%;
  left: 0;
  width: clamp(160px, 18vw, 280px);
  aspect-ratio: 2 / 1;
  transform: translate(-120%, -50%) rotate(-12deg);
  opacity: 0;
  will-change: transform, opacity;
  filter: drop-shadow(0 0 24px rgba(201,169,110,0.6))
          drop-shadow(0 12px 30px rgba(0,0,0,0.5));
}
.fsc-barber-fx .fsc-fx-scissor svg { width: 100%; height: 100%; display: block; overflow: visible; }
.fsc-barber-fx .fsc-fx-scissor svg .b-top,
.fsc-barber-fx .fsc-fx-scissor svg .b-bottom {
  transform-origin: 120px 60px;
  transform-box: view-box;
}

/* The horizontal cut line — appears with snip */
.fsc-barber-fx .fsc-fx-cut-line {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), var(--gold-light), var(--gold), transparent);
  transform: translateY(-50%) scaleX(0);
  transform-origin: center;
  opacity: 0;
  box-shadow: 0 0 16px rgba(232,200,128,0.7);
  will-change: transform, opacity;
}

/* Trigger states */
.barbers-showcase.fsc-sweep-next .fsc-fx-scissor {
  animation: fsc-fx-scissor-next 1.05s cubic-bezier(0.45, 0, 0.35, 1) forwards;
}
.barbers-showcase.fsc-sweep-prev .fsc-fx-scissor {
  animation: fsc-fx-scissor-prev 1.05s cubic-bezier(0.45, 0, 0.35, 1) forwards;
}
.barbers-showcase.fsc-sweep-next .fsc-fx-scissor svg .b-top,
.barbers-showcase.fsc-sweep-prev .fsc-fx-scissor svg .b-top {
  animation: fsc-fx-mini-top 1.05s ease-in-out forwards;
}
.barbers-showcase.fsc-sweep-next .fsc-fx-scissor svg .b-bottom,
.barbers-showcase.fsc-sweep-prev .fsc-fx-scissor svg .b-bottom {
  animation: fsc-fx-mini-bottom 1.05s ease-in-out forwards;
}
.barbers-showcase.fsc-sweep-next .fsc-fx-cut-line,
.barbers-showcase.fsc-sweep-prev .fsc-fx-cut-line {
  animation: fsc-fx-cut-line 1.05s cubic-bezier(0.45, 0, 0.35, 1) forwards;
}
.barbers-showcase.fsc-sweep-prev .fsc-fx-cut-line {
  animation-direction: reverse;
}

@keyframes fsc-fx-scissor-next {
  0%   { left: -10%; opacity: 0; transform: translate(-50%, -50%) rotate(-18deg) scale(0.8); }
  16%  { opacity: 1; }
  46%  { left: 50%; opacity: 1; transform: translate(-50%, -50%) rotate(-2deg) scale(1.05); }
  56%  { left: 60%; opacity: 1; transform: translate(-50%, -50%) rotate(4deg)  scale(1.02); }
  100% { left: 115%; opacity: 0; transform: translate(-50%, -50%) rotate(22deg) scale(0.7); }
}
@keyframes fsc-fx-scissor-prev {
  0%   { left: 110%; opacity: 0; transform: translate(-50%, -50%) rotate(18deg)  scale(0.8); }
  16%  { opacity: 1; }
  46%  { left: 50%;  opacity: 1; transform: translate(-50%, -50%) rotate(2deg)   scale(1.05); }
  56%  { left: 40%;  opacity: 1; transform: translate(-50%, -50%) rotate(-4deg)  scale(1.02); }
  100% { left: -15%; opacity: 0; transform: translate(-50%, -50%) rotate(-22deg) scale(0.7); }
}
@keyframes fsc-fx-mini-top {
  0%, 36%  { transform: rotate(0deg); }
  46%      { transform: rotate(14deg); }
  52%      { transform: rotate(14deg); }
  62%      { transform: rotate(8deg); }
  78%      { transform: rotate(2deg); }
  100%     { transform: rotate(0deg); }
}
@keyframes fsc-fx-mini-bottom {
  0%, 36%  { transform: rotate(0deg); }
  46%      { transform: rotate(-14deg); }
  52%      { transform: rotate(-14deg); }
  62%      { transform: rotate(-8deg); }
  78%      { transform: rotate(-2deg); }
  100%     { transform: rotate(0deg); }
}
@keyframes fsc-fx-cut-line {
  0%   { transform: translateY(-50%) scaleX(0); opacity: 0; transform-origin: left center; }
  20%  { opacity: 0.9; }
  46%  { transform: translateY(-50%) scaleX(1); opacity: 1; transform-origin: left center; }
  56%  { transform: translateY(-50%) scaleX(1); opacity: 0.95; transform-origin: right center; }
  100% { transform: translateY(-50%) scaleX(0); opacity: 0; transform-origin: right center; }
}

/* Flash overlay on the incoming card */
.barber-card .fsc-card-flash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 50%, rgba(232,200,128,0.45), transparent 60%);
  mix-blend-mode: screen;
  opacity: 0;
  z-index: 5;
}
.barbers-showcase.fsc-sweep-next .barber-card.active .fsc-card-flash,
.barbers-showcase.fsc-sweep-prev .barber-card.active .fsc-card-flash {
  animation: fsc-card-flash 1.05s ease-out;
}
@keyframes fsc-card-flash {
  0%, 36%  { opacity: 0; }
  48%      { opacity: 1; }
  60%      { opacity: 0.4; }
  100%     { opacity: 0; }
}

/* Gold border pulse on active during sweep */
.barbers-showcase.fsc-sweep-next .barber-card.active,
.barbers-showcase.fsc-sweep-prev .barber-card.active {
  animation:
    barberCardArrive 0.75s cubic-bezier(0.16, 1, 0.3, 1),
    fsc-card-border-pulse 1.05s ease-out;
}
@keyframes fsc-card-border-pulse {
  0%, 35%  { box-shadow: 0 48px 120px rgba(0,0,0,0.62), 0 0 80px rgba(201,169,110,0.12); }
  50%      { box-shadow: 0 48px 120px rgba(0,0,0,0.62), 0 0 120px rgba(232,200,128,0.55); }
  100%     { box-shadow: 0 48px 120px rgba(0,0,0,0.62), 0 0 80px rgba(201,169,110,0.12); }
}

/* Image shake / "snip jolt" on incoming card image */
.barbers-showcase.fsc-sweep-next .barber-card.active .barber-image-wrap img,
.barbers-showcase.fsc-sweep-prev .barber-card.active .barber-image-wrap img {
  animation: fsc-photo-jolt 1.05s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes fsc-photo-jolt {
  0%   { transform: scale(1.2) translateX(-22px); filter: blur(4px) brightness(0.7) grayscale(0.4); }
  44%  { transform: scale(1.06) translateX(-2px); filter: blur(1px) brightness(0.95) grayscale(0); }
  50%  { transform: scale(1.02) translateX(0)    translateY(-2px); filter: blur(0) brightness(1.2) grayscale(0); }
  60%  { transform: scale(1)    translateX(0); filter: blur(0) brightness(1.05); }
  100% { transform: scale(1)    translateX(0); filter: blur(0) brightness(0.88) grayscale(12%); }
}

/* ==========================================================
   7.  HOVER UPGRADES
   ========================================================== */
/* Underline on nav links has more polished motion */
.nav-links a::after {
  background: linear-gradient(90deg, var(--gold-light), var(--gold));
  height: 1.5px;
  bottom: -5px;
}

/* ==========================================================
   8.  REDUCED MOTION
   ========================================================== */
@media (prefers-reduced-motion: reduce) {
  .fsc-cursor { display: none !important; }
  .barber-tool-drift,
  .bg-tool-svg.bg-scissors .blade,
  .bg-tool-svg.bg-razor .shimmer,
  .bg-tool-svg.bg-razor .micro-gleam,
  .fsc-marquee-track,
  .fsc-reveal .char {
    animation: none !important;
    transition: none !important;
  }
  .fsc-reveal .char { opacity: 1; transform: none; }
}

/* ==========================================================
   9.  MOBILE
   ========================================================== */
@media (max-width: 768px) {
  .fsc-marquee { padding: 16px 0; }
  .fsc-marquee-track { gap: 36px; font-size: 1.3rem; }
  .barber-bg-tool.is-anim-razor { display: none; }   /* Drop razors on mobile for performance */
  .fsc-btn-cut .fsc-cut-scissor { width: 24px; height: 12px; }
}