/* ============================================================
   GAGOC — 05 COMPONENTS (CSS)
   Куди: Bricks → Settings → Custom CSS (глобально).
   Сигнатурні елементи оригіналу. Усі Tailwind-директиви @apply
   тут уже розгорнуто у звичайний CSS (Bricks не має Tailwind).
   ============================================================ */

/* ---------- Залежні keyframes ---------- */
@keyframes gradient-shift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
@keyframes shimmer       { 0%,100% { background-position: 200% 50%; } 50% { background-position: 0% 50%; } }
@keyframes float         { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes glow-pulse    { 0%,100% { box-shadow: 0 0 20px hsl(var(--primary) / 0.3); } 50% { box-shadow: 0 0 40px hsl(var(--primary) / 0.5); } }
@keyframes scroll-bounce { 0%,100% { transform: translateX(-50%) translateY(0); opacity: 1; } 50% { transform: translateX(-50%) translateY(12px); opacity: 0.4; } }

/* ---------- СИГНАТУРНА КНОПКА (magnetic slide-fill) ----------
   У Bricks: елементу Button дай клас .btn-magnetic, текст/іконку
   загорни так, щоб вони були прямими дітьми (z-index спливання). */
.btn-magnetic {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 2rem;            /* py-4 px-8 */
  font-weight: 600;
  overflow: hidden;
  text-transform: uppercase;
  background: transparent;
  border: 1px solid hsl(var(--primary));
  color: hsl(var(--foreground));
  transition: color .4s var(--snap), border-color .4s var(--snap),
              transform .3s var(--spring-bounce), box-shadow .4s var(--snap);
  will-change: transform;
}
.btn-magnetic::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(105deg, hsl(var(--primary)) 0%, hsl(var(--primary) / 0.9) 50%, hsl(350 75% 55%) 100%);
  transform: translateX(-101%) skewX(-8deg);
  transition: transform .5s var(--snap); z-index: 0;
}
.btn-magnetic::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 0%, hsl(var(--pure) / 0.25) 50%, transparent 100%);
  transform: translateX(-100%); transition: transform .8s var(--snap); z-index: 1;
}
.btn-magnetic > * { position: relative; z-index: 2; transition: transform .4s var(--spring-bounce); }
.btn-magnetic:hover { transform: translateY(-3px); box-shadow: 0 10px 30px hsl(var(--primary) / 0.25); }
.btn-magnetic:hover::before { transform: translateX(0) skewX(-8deg); }
.btn-magnetic:hover::after  { transform: translateX(100%); transition-delay: .15s; }
.btn-magnetic:hover > *     { transform: translateY(-1px); }
.btn-magnetic:focus-visible { outline: none; box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--primary) / 0.5); }
.btn-magnetic:active        { transform: translateY(0) scale(.98); transition-duration: .1s; }
.btn-magnetic .arrow-icon       { transition: transform .4s var(--spring-bounce); }
.btn-magnetic:hover .arrow-icon { transform: translateX(5px); }

/* Градієнтний варіант (текст завжди видимий) */
.btn-magnetic-gradient {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  padding: 1rem 2rem; font-weight: 600; overflow: hidden; text-transform: uppercase;
  border: none; isolation: isolate; color: #fff;
  background: linear-gradient(90deg, hsl(359 100% 60%) 0%, hsl(350 85% 55%) 50%, hsl(340 70% 50%) 100%);
  background-size: 200% 100%;
  animation: gradient-shift 6s ease-in-out infinite;
  transition: transform .3s var(--spring-bounce), box-shadow .4s var(--snap);
  will-change: transform;
}
.btn-magnetic-gradient:hover { transform: translateY(-3px); box-shadow: 0 10px 30px hsl(var(--primary) / 0.3); }

/* ---------- КАРТКИ: glow + 3D tilt ---------- */
.card-glow { position: relative; transition: all .4s var(--snap); }
.card-glow::before {
  content: ''; position: absolute; inset: -1px;
  background: linear-gradient(135deg, hsl(359 100% 60% / 0.6) 0%, hsl(350 85% 55% / 0.4) 50%, hsl(359 100% 60% / 0.6) 100%);
  border-radius: inherit; opacity: 0; z-index: -1; transition: opacity .4s ease;
}
.card-glow:hover::before { opacity: 1; }

.card-3d {
  transition: transform .5s var(--snap), box-shadow .5s var(--snap);
  transform-style: preserve-3d; perspective: 1000px; will-change: transform;
}
.card-3d:hover {
  transform: translateY(-10px) rotateX(5deg) rotateY(-3deg);
  box-shadow: 0 25px 50px hsl(var(--primary) / 0.15), 0 0 80px hsl(var(--primary) / 0.08);
}

/* ---------- Градієнтний текст + crimson-glow ---------- */
.text-gradient {
  -webkit-background-clip: text; background-clip: text; color: transparent;
  background-image: linear-gradient(135deg, hsl(var(--pure)) 0%, hsl(var(--pure) / 0.7) 100%);
}
/* Червоний акцент-варіант (для highlight-частини заголовків, як heroTitleHighlight) */
.text-gradient-crimson {
  -webkit-background-clip: text; background-clip: text; color: transparent;
  background-image: var(--gradient-crimson);
}
.glow-crimson { filter: drop-shadow(0 0 20px hsl(var(--primary) / 0.4)); }

/* ---------- Скрол-індикатор героя ---------- */
.animate-scroll-indicator { animation: scroll-bounce 2s var(--spring-bounce) infinite; }

@media (prefers-reduced-motion: reduce) {
  .btn-magnetic-gradient, .animate-scroll-indicator { animation: none !important; }
}