/**
 * SPL Energetica — componenti UX
 *
 * Pulsanti: wiggle + shine di default su .bricks-button (palette SPL / Poppins).
 * Varianti: spl-btn--primary | --secondary | --accent | --text | --header-cta
 * Card / sezioni: spl-card | spl-panel | spl-lift | spl-header-glass | …
 */

/* ==========================================================================
   Pulsanti — default Bricks (wiggle + shine)
   ========================================================================== */

.bricks-button,
.spl-btn,
a.spl-btn,
button.spl-btn {
  position: relative;
  margin: 0;
  padding: 17px 35px;
  outline: none;
  text-decoration: none;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 0.5em;
  cursor: pointer;
  text-transform: uppercase;
  font-family: var(--spl-font, "Poppins", system-ui, sans-serif);
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 0.7px;
  line-height: 1.2;
  border-radius: 10px;
  background-color: var(--spl-paper, #fff);
  border: 1px solid rgba(22, 87, 184, 0.6);
  color: var(--spl-blue, #1657b8);
  z-index: 0;
  overflow: hidden;
  isolation: isolate;
  transition: all 0.3s cubic-bezier(0.02, 0.01, 0.47, 1);
}

.bricks-button::after,
.spl-btn::after {
  content: "";
  position: absolute;
  top: -50px;
  left: -75px;
  width: 50px;
  height: 155px;
  z-index: 1;
  pointer-events: none;
  opacity: 0.45;
  background: var(--spl-ok, #20945f);
  transform: rotate(35deg);
  transition: left 550ms cubic-bezier(0.19, 1, 0.22, 1);
}

.bricks-button > *,
.spl-btn > * {
  position: relative;
  z-index: 2;
}

.bricks-button:hover,
.spl-btn:hover {
  animation: spl-btn-wiggle 0.7s ease-in-out both;
}

.bricks-button:hover::after,
.spl-btn:hover::after {
  left: 120%;
}

.bricks-button:hover > *,
.spl-btn:hover > * {
  animation: spl-btn-storm 0.7s ease-in-out both;
  animation-delay: 0.06s;
}

.bricks-button:focus-visible,
.spl-btn:focus-visible {
  outline: 2px solid var(--spl-blue);
  outline-offset: 3px;
}

.bricks-button[class*="primary"]:not(.outline),
.spl-btn--primary,
.bricks-button.spl-btn--primary {
  background-color: var(--spl-accent-2);
  background-image: var(--spl-gradient-cta);
  border-color: transparent;
  color: var(--spl-on-accent, #1c2635);
  font-weight: 700;
  box-shadow: var(--spl-shadow-cta);
}

.bricks-button[class*="primary"]:not(.outline)::after,
.spl-btn--primary::after,
.bricks-button.spl-btn--primary::after {
  background: rgba(255, 255, 255, 0.55);
  opacity: 0.7;
}

.bricks-button[class*="primary"]:not(.outline):hover,
.spl-btn--primary:hover,
.bricks-button.spl-btn--primary:hover {
  background-color: var(--spl-blue);
  background-image: var(--spl-gradient-cta-hover);
  color: #fff;
  box-shadow: var(--spl-shadow-hover);
}

.spl-btn--header-cta,
.bricks-button.spl-btn--header-cta {
  background-color: var(--spl-accent-2);
  background-image: var(--spl-gradient-cta);
  border-color: transparent;
  color: var(--spl-on-accent, #1c2635);
  font-weight: 700;
  box-shadow: var(--spl-shadow-cta);
  white-space: nowrap;
}

.spl-btn--header-cta::after,
.bricks-button.spl-btn--header-cta::after {
  background: rgba(255, 255, 255, 0.55);
  opacity: 0.7;
}

.spl-btn--header-cta:hover,
.bricks-button.spl-btn--header-cta:hover {
  background-image: var(--spl-gradient-cta-hover);
  color: #fff;
}

.spl-btn--secondary,
.bricks-button.spl-btn--secondary,
.bricks-button[class*="secondary"],
.bricks-button[class*="light"] {
  background: var(--spl-paper, #fff);
  background-image: none;
  color: var(--spl-blue);
  border: 1px solid rgba(22, 87, 184, 0.6);
  box-shadow: none;
}

.spl-btn--secondary:hover,
.bricks-button.spl-btn--secondary:hover {
  color: var(--spl-deep);
  border-color: var(--spl-blue);
}

.spl-btn--accent,
.bricks-button.spl-btn--accent,
.bricks-button[class*="dark"]:not(.outline),
.bricks-button[class*="info"]:not(.outline) {
  background: var(--spl-blue);
  background-image: none;
  border-color: transparent;
  color: #fff;
  font-weight: 700;
  box-shadow: 0 12px 26px rgba(22, 87, 184, 0.24);
}

.spl-btn--accent::after,
.bricks-button.spl-btn--accent::after,
.bricks-button[class*="dark"]:not(.outline)::after,
.bricks-button[class*="info"]:not(.outline)::after {
  background: rgba(255, 255, 255, 0.45);
}

.spl-btn--accent:hover,
.bricks-button.spl-btn--accent:hover {
  background: var(--spl-deep);
  color: #fff;
}

.spl-btn--text,
.bricks-button.spl-btn--text {
  min-height: auto;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--spl-blue);
  box-shadow: none;
  overflow: visible;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  animation: none;
}

.spl-btn--text::after,
.bricks-button.spl-btn--text::after {
  display: none;
}

.spl-btn--text:hover,
.bricks-button.spl-btn--text:hover {
  animation: none;
  color: var(--spl-deep);
}

@keyframes spl-btn-wiggle {
  0%   { transform: rotate(0deg) translate3d(0, 0, 0); }
  25%  { transform: rotate(3deg) translate3d(0, 0, 0); }
  50%  { transform: rotate(-3deg) translate3d(0, 0, 0); }
  75%  { transform: rotate(1deg) translate3d(0, 0, 0); }
  100% { transform: rotate(0deg) translate3d(0, 0, 0); }
}

@keyframes spl-btn-storm {
  0%   { transform: translate3d(0, 0, 0) translateZ(0); }
  25%  { transform: translate3d(4px, 0, 0) translateZ(0); }
  50%  { transform: translate3d(-3px, 0, 0) translateZ(0); }
  75%  { transform: translate3d(2px, 0, 0) translateZ(0); }
  100% { transform: translate3d(0, 0, 0) translateZ(0); }
}

@media (prefers-reduced-motion: reduce) {
  .bricks-button,
  .spl-btn,
  .bricks-button::after,
  .spl-btn::after,
  .bricks-button > *,
  .spl-btn > * {
    transition: none !important;
    animation: none !important;
  }

  .bricks-button:hover,
  .spl-btn:hover {
    transform: none !important;
  }

  .bricks-button:hover::after,
  .spl-btn:hover::after {
    left: -75px;
  }
}

/* ==========================================================================
   Card (utility) — dimensione fissa + ombra SPL
   Classi Bricks: card | shadow | card shadow
   ========================================================================== */

.card {
  width: 190px;
  height: 254px;
  background: var(--spl-paper, #fff);
  border-radius: 10px;
  border: 1px solid var(--spl-line, #d9e5f3);
  transition: border-radius 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.card:hover {
  border-radius: 14px;
}

.shadow {
  box-shadow:
    inset 0 -3em 3em rgba(8, 34, 72, 0.08),
    0 0 0 2px var(--spl-line, #d9e5f3),
    0.3em 0.3em 1em rgba(8, 34, 72, 0.18);
}

.card.shadow {
  box-shadow:
    inset 0 -3em 3em rgba(8, 34, 72, 0.08),
    0 0 0 2px rgba(22, 87, 184, 0.18),
    0.3em 0.3em 1em rgba(8, 34, 72, 0.18);
}

.card.shadow:hover {
  box-shadow:
    inset 0 -3em 3em rgba(8, 34, 72, 0.06),
    0 0 0 2px rgba(22, 87, 184, 0.28),
    0.35em 0.35em 1.15em rgba(8, 34, 72, 0.22);
}

/* ==========================================================================
   Card / panel — top bar colorata + lift hover
   ========================================================================== */

.spl-card,
.spl-panel,
.spl-case,
.spl-lift {
  position: relative;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(217, 229, 243, 0.96);
  border-radius: var(--spl-radius);
  box-shadow: var(--spl-shadow-sm);
  transition:
    transform var(--spl-duration) var(--spl-ease),
    box-shadow var(--spl-duration) var(--spl-ease),
    border-color var(--spl-duration) var(--spl-ease);
}

.spl-card,
.spl-panel,
.spl-case {
  padding: 24px;
}

.spl-card::before,
.spl-panel::before,
.spl-case::before,
.spl-bar-top::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 6px;
  background: var(--spl-blue);
  border-radius: var(--spl-radius) var(--spl-radius) 0 0;
}

.spl-bar-top--accent::before,
.spl-accent-bar--orange::before {
  background: var(--spl-accent);
}

.spl-bar-top--ok::before,
.spl-accent-bar--ok::before {
  background: var(--spl-ok);
}

.spl-bar-top--sky::before,
.spl-accent-bar--sky::before {
  background: var(--spl-sky);
}

/* Alternanza automatica in griglia Bricks (figli diretti) */
.spl-grid-accent > *:nth-child(4n + 2)::before {
  background: var(--spl-accent);
}

.spl-grid-accent > *:nth-child(4n + 3)::before {
  background: var(--spl-ok);
}

.spl-grid-accent > *:nth-child(4n + 4)::before {
  background: var(--spl-sky);
}

.spl-card:hover,
.spl-panel:hover,
.spl-case:hover,
.spl-lift:hover {
  transform: translateY(-4px);
  border-color: rgba(22, 87, 184, 0.26);
  box-shadow: var(--spl-shadow-md);
}

/* Icona path-card */
.spl-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: var(--spl-radius);
  background: var(--spl-blue-soft);
  color: var(--spl-blue);
  font-weight: 900;
  margin-bottom: 18px;
}

.spl-icon--accent {
  background: var(--spl-orange-soft);
  color: #a85600;
}

.spl-icon--ok {
  background: var(--spl-green-soft);
  color: var(--spl-ok);
}

.spl-icon--sky {
  background: var(--spl-sky-soft);
  color: #087da4;
}

/* Tag / pill */
.spl-tag {
  display: inline-flex;
  padding: 6px 9px;
  border-radius: 999px;
  background: var(--spl-blue-soft);
  color: var(--spl-blue);
  font-size: 13px;
  font-weight: 700;
}

.spl-tag--accent {
  background: var(--spl-orange-soft);
  color: #a85600;
}

.spl-tag--ok {
  background: var(--spl-green-soft);
  color: var(--spl-ok);
}

/* ==========================================================================
   Header glass + barra brand
   ========================================================================== */

.spl-header-glass {
  background: rgba(255, 255, 255, 0.92) !important;
  border-bottom: 1px solid rgba(217, 229, 243, 0.86);
  box-shadow: var(--spl-shadow-header);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

.spl-header-glass.spl-brand-bar,
.spl-brand-bar {
  position: relative;
}

.spl-brand-bar::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--spl-gradient-brand);
  z-index: 2;
  pointer-events: none;
}

/* Nav link hover (link dentro header) */
.spl-nav-link {
  padding: 10px;
  border-radius: var(--spl-radius);
  color: #31445f;
  font-size: 14px;
  font-weight: 700;
  transition: background var(--spl-duration) ease, color var(--spl-duration) ease;
}

.spl-nav-link:hover,
.spl-nav-link[aria-current="page"],
.spl-nav-link.current-menu-item,
.current-menu-item > .spl-nav-link {
  background: var(--spl-blue-soft);
  color: var(--spl-blue);
}

/* ==========================================================================
   Sezioni / hero accenti
   ========================================================================== */

.spl-section-soft {
  background:
    var(--spl-gradient-soft),
    var(--spl-soft);
}

.spl-hero-dark {
  color: #fff;
  background:
    var(--spl-gradient-hero),
    var(--spl-deep);
  position: relative;
  overflow: hidden;
}

.spl-hero-dark::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 8px;
  background: var(--spl-gradient-brand);
  pointer-events: none;
}

.spl-hero-grid::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 58px 58px;
  -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.12));
  mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.12));
  pointer-events: none;
}

.spl-eyebrow {
  margin: 0 0 14px;
  color: var(--spl-blue);
  font-size: 14px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.spl-eyebrow--pill {
  display: inline-flex;
  align-items: center;
  padding: 8px 11px;
  border-radius: var(--spl-radius);
  color: #cfe3ff;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.spl-lead {
  max-width: 690px;
  font-size: 20px;
  margin: 22px 0 0;
  padding-left: 18px;
  border-left: 5px solid var(--spl-accent);
}

.spl-heading-underline::after {
  content: "";
  display: block;
  width: 88px;
  height: 5px;
  margin-top: 18px;
  border-radius: var(--spl-radius);
  background: linear-gradient(90deg, var(--spl-blue), var(--spl-accent), var(--spl-ok));
}

/* Proof strip glass */
.spl-proof {
  padding: 18px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--spl-radius);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* Media frame */
.spl-media-frame {
  border-radius: var(--spl-radius);
  overflow: hidden;
  box-shadow: var(--spl-shadow-lg);
  border: 1px solid rgba(255, 255, 255, 0.28);
  position: relative;
}

.spl-media-frame img {
  transform: scale(1.015);
  transition: transform 0.6s var(--spl-ease);
}

.spl-media-frame:hover img {
  transform: scale(1.04);
}

/* Step counter circle */
.spl-step {
  position: relative;
  padding: 18px 18px 18px 74px;
  border: 1px solid rgba(217, 229, 243, 0.96);
  border-radius: var(--spl-radius);
  background: #fff;
  box-shadow: var(--spl-shadow-sm);
}

.spl-step::before {
  content: attr(data-step);
  position: absolute;
  left: 18px;
  top: 18px;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--spl-blue), var(--spl-sky));
  color: #fff;
  font-weight: 900;
}

.spl-step--accent::before {
  background: linear-gradient(135deg, var(--spl-accent), var(--spl-sun));
  color: #1c2635;
}

.spl-step--ok::before {
  background: linear-gradient(135deg, var(--spl-ok), #39b879);
}

/* Form shell */
.spl-form-shell {
  padding: clamp(22px, 4vw, 34px);
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(217, 229, 243, 0.96);
  border-radius: var(--spl-radius);
  border-top: 6px solid var(--spl-accent);
  box-shadow: var(--spl-shadow-sm);
}

/* Footer dark */
.spl-footer-dark {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  background:
    linear-gradient(90deg, rgba(22, 87, 184, 0.38), rgba(32, 148, 95, 0.18)),
    var(--spl-deep);
  color: #fff;
}

/* Utility ombre */
.spl-shadow-sm { box-shadow: var(--spl-shadow-sm) !important; }
.spl-shadow-md { box-shadow: var(--spl-shadow-md) !important; }
.spl-shadow-lg { box-shadow: var(--spl-shadow-lg) !important; }

/* Campi form soft focus */
.spl-field input,
.spl-field select,
.spl-field textarea,
.spl-form-shell input:not([type="checkbox"]):not([type="radio"]),
.spl-form-shell select,
.spl-form-shell textarea {
  border-radius: var(--spl-radius);
  border: 1px solid var(--spl-line);
  transition: border-color var(--spl-duration) ease, box-shadow var(--spl-duration) ease;
}

.spl-field input:focus,
.spl-field select:focus,
.spl-field textarea:focus,
.spl-form-shell input:focus,
.spl-form-shell select:focus,
.spl-form-shell textarea:focus {
  border-color: var(--spl-blue);
  box-shadow: 0 0 0 3px rgba(22, 87, 184, 0.15);
  outline: none;
}