/* =========================================================
   CODERN
   Scroll To Top
   ========================================================= */


/* ---------------------------------------------------------
   Button
   --------------------------------------------------------- */

.scroll-to-top {
  position: fixed;

  right: 32px;
  bottom: 32px;

  z-index: 9000;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 48px;
  height: 48px;

  padding: 0;

  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;

  background:
    rgba(8, 11, 32, 0.82);

  color: #ffc107;

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);

  cursor: pointer;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transform:
    translateY(20px)
    scale(0.8);

  transition:
    opacity 0.2s ease,
    visibility 0.2s ease,
    transform 0.2s ease,
    background-color 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}


/* ---------------------------------------------------------
   Visible State
   --------------------------------------------------------- */

.scroll-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;

  transform:
    translateY(0)
    scale(1);
}


/* ---------------------------------------------------------
   Hover
   --------------------------------------------------------- */

.scroll-to-top:hover {
  background: #ffc107;

  border-color: #ffc107;

  color: #080b20;

  box-shadow:
    0 12px 32px rgba(255, 193, 7, 0.2),
    0 0 24px rgba(255, 193, 7, 0.1);
}


/* ---------------------------------------------------------
   Active
   --------------------------------------------------------- */

.scroll-to-top:active {
  transform:
    translateY(1px)
    scale(0.96);
}


/* ---------------------------------------------------------
   Icon
   --------------------------------------------------------- */

.scroll-to-top__icon {
  width: 20px;
  height: 20px;

  flex-shrink: 0;

  stroke: currentColor;

  stroke-width: 2;

  transition:
    transform 0.3s ease;
}


.scroll-to-top:hover
.scroll-to-top__icon {
  transform: translateY(-2px);
}


/* ---------------------------------------------------------
   Focus
   --------------------------------------------------------- */

.scroll-to-top:focus-visible {
  outline: 2px solid #ffc107;
  outline-offset: 4px;
}


/* ---------------------------------------------------------
   Mobile
   --------------------------------------------------------- */

@media (max-width: 768px) {
  .scroll-to-top {
    right: 20px;
    bottom: 20px;

    width: 44px;
    height: 44px;

    border-radius: 11px;
  }

  .scroll-to-top__icon {
    width: 19px;
    height: 19px;
  }
}


/* ---------------------------------------------------------
   Small Mobile
   --------------------------------------------------------- */

@media (max-width: 480px) {
  .scroll-to-top {
    right: 16px;
    bottom: 16px;
  }
}


/* ---------------------------------------------------------
   Reduced Motion
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .scroll-to-top {
    transition:
      opacity 0.2s ease,
      visibility 0.2s ease;
  }

  .scroll-to-top:hover
  .scroll-to-top__icon {
    transform: none;
  }

  .scroll-to-top:active {
    transform:
      scale(0.98);
  }
}

/* =========================================================
   LIGHT THEME
   ---------------------------------------------------------
   Only visual colors/surfaces change.
   Scroll behavior and animations remain unchanged.
   ========================================================= */

[data-theme="light"] .scroll-to-top {
  border-color: rgba(23, 20, 43, 0.10);

  background:
    rgba(255, 255, 255, 0.88);

  color: var(--color-primary);

  box-shadow:
    0 10px 30px rgba(23, 20, 43, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);
}


/* ---------------------------------------------------------
   LIGHT THEME — HOVER
   --------------------------------------------------------- */

[data-theme="light"] .scroll-to-top:hover {
  background: var(--color-primary);

  border-color: var(--color-primary);

  color: var(--color-on-primary);

  box-shadow:
    0 12px 32px rgba(124, 58, 237, 0.20),
    0 0 24px rgba(139, 92, 246, 0.12);
}


/* ---------------------------------------------------------
   LIGHT THEME — FOCUS
   --------------------------------------------------------- */

[data-theme="light"] .scroll-to-top:focus-visible {
  outline-color: var(--color-primary);
}