/* ═══════════════════════════════════════════════════════════════
   SELKERMO LIQUID TECH v7.6 — Shared Enhancement Layer
   Fix specificità CSS per override stili inline
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   LIQUID TEXT — Override ad alta specificità (batte .logo-text inline)
   ═══════════════════════════════════════════════════════════════ */
.liquid-text,
.logo-text.liquid-text,
.brand-name.liquid-text {
  position: relative !important;
  display: inline-block !important;
  background: linear-gradient(
    125deg,
    #7FEEFF 0%,
    #4FE3FF 12%,
    #3EC8F7 25%,
    #2680E9 38%,
    #1035B0 50%,
    #2680E9 62%,
    #3EC8F7 75%,
    #7FEEFF 88%,
    #4FE3FF 100%
  ) !important;
  background-size: 400% 400% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  animation:
    skLiquidFlow 10s cubic-bezier(0.45, 0, 0.55, 1) infinite,
    skLiquidGlow 6s cubic-bezier(0.45, 0, 0.55, 1) infinite !important;
}

@keyframes skLiquidFlow {
  0%   { background-position: 0% 50%; }
  20%  { background-position: 40% 20%; }
  40%  { background-position: 100% 40%; }
  60%  { background-position: 60% 80%; }
  80%  { background-position: 10% 70%; }
  100% { background-position: 0% 50%; }
}

@keyframes skLiquidGlow {
  0%, 100% {
    filter:
      drop-shadow(0 0 30px rgba(79, 227, 255, 0.45))
      drop-shadow(0 0 60px rgba(38, 128, 233, 0.25));
  }
  50% {
    filter:
      drop-shadow(0 0 45px rgba(127, 238, 255, 0.7))
      drop-shadow(0 0 90px rgba(38, 128, 233, 0.45));
  }
}

/* Shine pass — riflesso luminoso che attraversa */
.liquid-text[data-text]::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  background: linear-gradient(
    115deg,
    transparent 35%,
    rgba(255, 255, 255, 0.1) 45%,
    rgba(255, 255, 255, 0.5) 50%,
    rgba(255, 255, 255, 0.1) 55%,
    transparent 65%
  );
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: skLiquidShine 7s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  pointer-events: none;
  z-index: 2;
}

@keyframes skLiquidShine {
  0%   { background-position: 200% center; }
  60%  { background-position: -100% center; }
  100% { background-position: -100% center; }
}

/* ═══ FLUIDITÀ — Transizioni uniformi premium ═══ */
:root {
  --sk-ease-silk: cubic-bezier(0.22, 1, 0.36, 1);
  --sk-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

a, button, .btn, .btn-outline, .card, .service-card, .faq-item,
.nav-link, .footer-col a, input, textarea, select {
  transition-timing-function: var(--sk-ease-silk) !important;
}

/* ═══ BOTTONI PREMIUM ═══ */
.btn,
.btn-outline,
.btn-auth-login,
.btn-auth-register,
.btn-configuratore,
.btn-cart-primary,
.btn-cart-secondary,
.btn-pack,
.btn-generate {
  transition:
    transform 0.55s var(--sk-ease-silk),
    box-shadow 0.55s var(--sk-ease-silk),
    border-color 0.4s var(--sk-ease-silk),
    background 0.4s var(--sk-ease-silk) !important;
  will-change: transform;
}

.btn:not(.btn-outline):not(.btn-auth-login),
.btn-auth-register,
.btn-configuratore,
.btn-cart-primary {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.45) inset,
    0 -1px 0 rgba(0, 0, 0, 0.2) inset,
    0 10px 32px rgba(38, 128, 233, 0.45),
    0 0 0 1px rgba(127, 238, 255, 0.35) inset !important;
}

.btn:not(.btn-outline):not(.btn-auth-login):hover,
.btn-auth-register:hover,
.btn-configuratore:hover,
.btn-cart-primary:hover {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.65) inset,
    0 -1px 0 rgba(0, 0, 0, 0.25) inset,
    0 16px 48px rgba(38, 128, 233, 0.6),
    0 0 40px rgba(79, 227, 255, 0.4),
    0 0 0 1px rgba(127, 238, 255, 0.7) inset !important;
}

.btn:active,
.btn-outline:active,
.btn-auth-login:active,
.btn-auth-register:active,
.btn-configuratore:active,
.btn-cart-primary:active,
.btn-cart-secondary:active {
  transform: translateY(-1px) scale(0.99) !important;
  transition-duration: 0.12s !important;
}

.btn-outline,
.btn-auth-login,
.btn-cart-secondary {
  transition:
    transform 0.55s var(--sk-ease-silk),
    box-shadow 0.55s var(--sk-ease-silk),
    border-color 0.4s var(--sk-ease-silk),
    background 0.4s var(--sk-ease-silk),
    color 0.4s var(--sk-ease-silk) !important;
}
.btn-outline:hover,
.btn-auth-login:hover,
.btn-cart-secondary:hover {
  box-shadow:
    0 1px 0 rgba(255,255,255,0.1) inset,
    0 12px 40px rgba(0, 0, 0, 0.45),
    0 0 40px rgba(79, 227, 255, 0.28) !important;
}

/* ═══ CARD PREMIUM ═══ */
.card,
.service-card,
.pack-card,
.stat-card,
.project-item,
.faq-item,
.final-note,
.cta-configuratore,
.support-card,
.cart-pending,
.ai-chat-demo {
  position: relative;
  transition:
    transform 0.6s var(--sk-ease-silk),
    box-shadow 0.6s var(--sk-ease-silk),
    border-color 0.5s var(--sk-ease-silk),
    background 0.5s var(--sk-ease-silk) !important;
  will-change: transform;
}

.card::after,
.service-card::after,
.pack-card::after,
.stat-card::after,
.ai-chat-demo::after {
  content: '';
  position: absolute;
  top: 0; left: 20%;
  width: 60%; height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(127, 238, 255, 0.55),
    transparent);
  opacity: 0.5;
  transition: opacity 0.6s var(--sk-ease-silk),
              left 0.6s var(--sk-ease-silk),
              width 0.6s var(--sk-ease-silk);
  pointer-events: none;
}

.card:hover::after,
.service-card:hover::after,
.pack-card:hover::after,
.stat-card:hover::after,
.ai-chat-demo:hover::after {
  opacity: 1;
  left: 10%;
  width: 80%;
}

.card:hover,
.service-card:hover,
.pack-card:hover {
  transform: translateY(-5px) !important;
}

.card:hover,
.service-card:hover {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 22px 60px rgba(0, 0, 0, 0.55),
    0 0 50px rgba(79, 227, 255, 0.12) !important;
}

/* ═══ LINK NAV PREMIUM ═══ */
nav a.nav-link {
  position: relative;
  transition: color 0.5s var(--sk-ease-silk),
              background 0.4s var(--sk-ease-silk) !important;
}
nav a.nav-link::after {
  content: '';
  position: absolute;
  left: 50%; bottom: 6px;
  width: 0; height: 1px;
  background: linear-gradient(90deg,
    transparent,
    #4FE3FF,
    transparent);
  transform: translateX(-50%);
  transition: width 0.5s var(--sk-ease-silk);
  box-shadow: 0 0 10px rgba(127, 238, 255, 0.7);
  pointer-events: none;
}
nav a.nav-link:hover::after {
  width: calc(100% - 24px);
}

/* ═══ INPUT PREMIUM ═══ */
input, textarea, select {
  transition:
    border-color 0.4s var(--sk-ease-silk),
    box-shadow 0.4s var(--sk-ease-silk),
    background 0.4s var(--sk-ease-silk) !important;
}

input:focus, textarea:focus, select:focus {
  box-shadow:
    0 0 0 4px rgba(79, 227, 255, 0.12),
    0 0 30px rgba(79, 227, 255, 0.18),
    0 0 60px rgba(79, 227, 255, 0.08) !important;
}

/* ═══ FAQ FLUIDO ═══ */
.faq-answer,
.faq-item .faq-answer {
  transition:
    max-height 0.55s var(--sk-ease-silk),
    padding 0.55s var(--sk-ease-silk),
    opacity 0.4s var(--sk-ease-silk) !important;
}

.faq-question::after {
  transition: transform 0.5s var(--sk-ease-spring) !important;
}

/* ═══ REVEAL FLUIDO ═══ */
.reveal {
  transition:
    opacity 1s var(--sk-ease-silk),
    transform 1s var(--sk-ease-silk) !important;
}

/* ═══ ACCESSIBILITÀ ═══ */
*:focus-visible {
  outline: 2px solid #7FEEFF;
  outline-offset: 3px;
  border-radius: 6px;
}

/* ═══ REDUCED MOTION ═══ */
@media (prefers-reduced-motion: reduce) {
  .liquid-text,
  .liquid-text[data-text]::after {
    animation: none !important;
    background-position: 30% 50% !important;
  }
  * {
    transition-duration: 0.01s !important;
  }
}

/* ═══ OTTIMIZZAZIONE PERFORMANCE ═══ */

/* Riduci carico liquid text (drop-shadow è pesante) */
.liquid-text,
.logo-text.liquid-text,
.brand-name.liquid-text {
  will-change: background-position;
  transform: translateZ(0);
}

/* Su mobile, alleggerisci il glow */
@media (max-width: 768px) {
  .liquid-text,
  .logo-text.liquid-text,
  .brand-name.liquid-text {
    animation:
      skLiquidFlow 12s cubic-bezier(0.45, 0, 0.55, 1) infinite !important;
    filter: drop-shadow(0 0 15px rgba(79, 227, 255, 0.4)) !important;
  }
  .liquid-text[data-text]::after {
    animation-duration: 10s !important;
  }
}

/* Se la pagina è in background, pausa animazioni CSS */
@media (prefers-reduced-motion: reduce) {
  .liquid-text,
  .liquid-text[data-text]::after {
    animation: none !important;
  }
}

/* GPU-friendly transitions */
.card,
.service-card,
.pack-card,
.btn,
.btn-outline {
  transform: translateZ(0);
  backface-visibility: hidden;
}