/**
 * Smart Scroll UX — Frontend Stylesheet  v1.0.0
 *
 * CSS Custom Properties are injected by PHP via inline style="" on the element.
 * This file provides structure, animation, and hover — no hardcoded colours.
 *
 * NOTE: --ssum-bg is ALWAYS a real colour or gradient string (never the CSS
 * keyword "none") so background:var(--ssum-bg) always resolves correctly.
 */

/* ============================================================
   Reset / Base
   ============================================================ */

#ssum-back-to-top {
  /* Layout */
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             6px;
  box-sizing:      border-box;
  border:          none;
  padding:         0;
  cursor:          pointer;
  text-decoration: none;
  -webkit-user-select: none;
  user-select:     none;
  -webkit-tap-highlight-color: transparent;
  line-height:     1;
  font-family:     inherit;
  font-weight:     600;
  overflow:        visible; /* let progress ring bleed outside */

  /* Dimensions — driven by PHP-injected CSS vars */
  width:         var(--ssum-size, 56px);
  height:        var(--ssum-size, 56px);
  border-radius: var(--ssum-radius, 50%);
  z-index:       var(--ssum-z, 9999);

  /* Colours — --ssum-bg is a real colour/gradient, never "none" */
  background: var(--ssum-bg, #333333);
  color:      var(--ssum-icon-color, #ffffff);

  /* Shadow */
  box-shadow: var(--ssum-shadow, none);

  /* Hidden until JS scrolls past threshold */
  opacity:        0;
  visibility:     hidden;
  pointer-events: none;

  /* Default transition (entrance-fade overrides below) */
  transition:
    opacity        0.3s ease,
    visibility     0.3s ease,
    transform      0.25s ease,
    background     0.2s ease,
    color          0.2s ease,
    box-shadow     0.2s ease,
    filter         0.2s ease;
}

/* JS adds this once scroll threshold is passed */
#ssum-back-to-top.ssum-visible {
  opacity:        var(--ssum-opacity, 1);
  visibility:     visible;
  pointer-events: auto;
}

/* ============================================================
   Hover — pure CSS, no JS required
   ============================================================ */

#ssum-back-to-top.ssum-visible:hover {
  background: var(--ssum-hover-bg, #000000);
  color:      var(--ssum-hover-icon, #ffffff);
}

/* Gradient buttons: same gradient on hover + brightness dim */
#ssum-back-to-top.ssum-gradient.ssum-visible:hover {
  filter: brightness(0.85);
}

/* ============================================================
   Hover Effects (transform / animation)
   ============================================================ */

/* Scale up */
#ssum-back-to-top.ssum-hover-scale.ssum-visible:hover {
  transform: scale(1.12);
}

/* Lift with deeper shadow */
#ssum-back-to-top.ssum-hover-lift.ssum-visible:hover {
  transform:  translateY(-4px);
  box-shadow: 0 10px 28px rgba(0,0,0,0.28) !important;
}

/* Pulse ring */
@keyframes ssum-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(255,255,255,0.55); }
  70%  { box-shadow: 0 0 0 10px rgba(255,255,255,0);   }
  100% { box-shadow: 0 0 0 0   rgba(255,255,255,0);   }
}

#ssum-back-to-top.ssum-hover-pulse.ssum-visible:hover {
  animation: ssum-pulse 0.9s ease-out infinite;
}

/* None — cancel transforms */
#ssum-back-to-top.ssum-hover-none.ssum-visible:hover {
  transform: none !important;
  filter:    none !important;
}

/* ============================================================
   Icon
   ============================================================ */

#ssum-back-to-top .ssum-icon {
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
  width:           calc(var(--ssum-size, 56px) * 0.40);
  height:          calc(var(--ssum-size, 56px) * 0.40);
}

#ssum-back-to-top .ssum-icon svg {
  width:   100%;
  height:  100%;
  display: block;
}

/* ============================================================
   Text Label
   ============================================================ */

#ssum-back-to-top .ssum-text {
  font-size:      calc(var(--ssum-size, 56px) * 0.23);
  font-weight:    700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space:    nowrap;
}

@media (max-width: 767px) {
  #ssum-back-to-top.ssum-hide-text-mobile .ssum-text {
    display: none;
  }
}

/* ============================================================
   Progress Ring
   ============================================================ */

#ssum-back-to-top .ssum-progress-ring {
  position:       absolute;
  top:            -4px;
  left:           -4px;
  width:          calc(100% + 8px);
  height:         calc(100% + 8px);
  pointer-events: none;
  overflow:       visible;
}

#ssum-back-to-top .ssum-ring-fill {
  transition: stroke-dashoffset 0.15s linear;
}

/* ============================================================
   Entrance Animations
   ============================================================ */

/* --- Fade (default) --- */
#ssum-back-to-top.ssum-entrance-fade {
  transition:
    opacity     0.35s ease,
    visibility  0.35s ease,
    transform   0.2s  ease,
    background  0.2s  ease,
    color       0.2s  ease,
    box-shadow  0.2s  ease,
    filter      0.2s  ease;
}

/* --- Slide Up --- */
#ssum-back-to-top.ssum-entrance-slide-up {
  transform: translateY(24px);
  transition:
    opacity     0.35s ease,
    visibility  0.35s ease,
    transform   0.40s cubic-bezier(0.34, 1.56, 0.64, 1),
    background  0.2s  ease,
    color       0.2s  ease,
    box-shadow  0.2s  ease,
    filter      0.2s  ease;
}

#ssum-back-to-top.ssum-entrance-slide-up.ssum-visible {
  transform: translateY(0);
}

/* Mid-right variant slides from right */
#ssum-back-to-top.ssum-pos-mid-right.ssum-entrance-slide-up {
  transform: translateX(24px) translateY(-50%);
}
#ssum-back-to-top.ssum-pos-mid-right.ssum-entrance-slide-up.ssum-visible {
  transform: translateX(0) translateY(-50%);
}

/* --- Bounce --- */
@keyframes ssum-bounce-in {
  0%   { opacity: 0; transform: scale(0.3);  }
  50%  { opacity: 1; transform: scale(1.18); }
  70%             { transform: scale(0.9);  }
  85%             { transform: scale(1.05); }
  100%            { transform: scale(1);    }
}

#ssum-back-to-top.ssum-entrance-bounce.ssum-visible {
  animation: ssum-bounce-in 0.55s cubic-bezier(0.36,0.07,0.19,0.97) both;
}

/* --- Zoom --- */
@keyframes ssum-zoom-in {
  0%   { opacity: 0; transform: scale(0.5); }
  100% { opacity: 1; transform: scale(1);   }
}

#ssum-back-to-top.ssum-entrance-zoom.ssum-visible {
  animation: ssum-zoom-in 0.3s cubic-bezier(0.175,0.885,0.32,1.275) both;
}

/* --- None (instant, no transition) --- */
#ssum-back-to-top.ssum-entrance-none {
  transition: none !important;
}

/* ============================================================
   Mobile Position Overrides (class added by JS)
   ============================================================ */

@media (max-width: 767px) {
  #ssum-back-to-top.ssum-mobile-center {
    left:      50%  !important;
    right:     auto !important;
    transform: translateX(-50%) !important;
  }
  #ssum-back-to-top.ssum-mobile-left {
    right: auto !important;
  }
  #ssum-back-to-top.ssum-mobile-right {
    left: auto !important;
  }
}

/* ============================================================
   Accessibility
   ============================================================ */

#ssum-back-to-top:focus-visible {
  outline:        3px solid #fff;
  outline-offset: 3px;
  box-shadow:     0 0 0 6px rgba(79,70,229,0.5) !important;
}