/* ==========================================================================
   UI Enhancements — purely additive, zero layout/theme changes
   Only: scroll animations, hover polish, shadow refinements, transitions
   ========================================================================== */

/* ---------- Dropdown caret — Bootstrap native border-triangle, with open/close flip ---------- */
.dropdown-toggle::after {
  display: inline-block !important;
  margin-left: 0.35em !important;
  vertical-align: 0.15em !important;
  content: "" !important;
  border-top: 0.35em solid !important;
  border-right: 0.35em solid transparent !important;
  border-bottom: 0 !important;
  border-left: 0.35em solid transparent !important;
  font-family: inherit !important;
  font-weight: inherit !important;
  transition: transform 0.2s ease !important;
}
.dropdown-toggle.show::after {
  transform: rotate(-180deg) !important;
}

/* ---------- Carousel controls — FA solid needs font-weight 900 ---------- */
.carousel-control-prev::before,
.carousel-control-next::before {
  font-weight: 900 !important;
  font-family: "Font Awesome 6 Free" !important;
}

/* ---------- Smooth scroll ---------- */
html { scroll-behavior: smooth; }

/* ---------- Font rendering ---------- */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---------- Scroll-reveal animation ---------- */
.sr-item {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.sr-item.sr-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger siblings inside a row */
.row > .sr-item:nth-child(1) { transition-delay: 0s; }
.row > .sr-item:nth-child(2) { transition-delay: 0.1s; }
.row > .sr-item:nth-child(3) { transition-delay: 0.2s; }
.row > .sr-item:nth-child(4) { transition-delay: 0.3s; }
.row > .sr-item:nth-child(5) { transition-delay: 0.4s; }
.row > .sr-item:nth-child(6) { transition-delay: 0.5s; }

/* Sections slide up as a whole unit */
main section.sr-item {
  transform: translateY(24px);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .sr-item {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ---------- Buttons — subtle lift on hover ---------- */
.btn {
  transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}
.btn:active {
  transform: translateY(0);
}

/* ---------- Cards — gentle lift ---------- */
.card {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.1) !important;
}

/* ---------- Nav links — smooth underline (skip dropdown toggles) ---------- */
header .navbar .nav-link {
  position: relative;
  transition: color 0.2s ease;
}
header .navbar .nav-link:not(.dropdown-toggle)::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 1rem;
  right: 1rem;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transform: scaleX(0);
  transition: transform 0.25s ease;
  opacity: 0.6;
}
header .navbar .nav-link:not(.dropdown-toggle):hover::after {
  transform: scaleX(1);
}

/* ---------- Dropdown menu — fade in ---------- */
header .dropdown-menu {
  animation: dropFade 0.18s ease;
}
@keyframes dropFade {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Icon wraps — subtle scale on hover ---------- */
.icon-wrap {
  transition: transform 0.2s ease;
}
.icon-wrap:hover {
  transform: scale(1.1);
}

/* ---------- Invest steps — smooth active state ---------- */
.invest-step {
  transition: box-shadow 0.25s ease, border-color 0.25s ease !important;
}

/* ---------- Images — subtle scale on hover ---------- */
.in-stena-2 .image-decor img,
.in-stena-3 .mockup {
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.in-stena-2 .image-decor img:hover,
.in-stena-3 .mockup:hover {
  transform: scale(1.02);
}

/* ---------- Award items — lift ---------- */
.award-item {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.award-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

/* ---------- To-top button ---------- */
.to-top {
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.to-top:hover {
  transform: translateY(-3px);
  opacity: 0.85;
}

/* ---------- Footer nav links ---------- */
.in-stena-footer .nav-link {
  transition: color 0.2s ease, opacity 0.2s ease;
}
.in-stena-footer .nav-link:hover {
  opacity: 0.75;
}

/* ---------- Social media links ---------- */
.social-media-list a {
  transition: opacity 0.2s ease, transform 0.2s ease;
  display: inline-block;
}
.social-media-list a:hover {
  opacity: 0.75;
  transform: translateY(-2px);
}

/* ---------- Breadcrumb links ---------- */
.section-breadcrumb .breadcrumb-item a {
  transition: opacity 0.2s ease;
}
.section-breadcrumb .breadcrumb-item a:hover {
  opacity: 0.75;
}

/* ---------- Table rows ---------- */
.table tbody tr {
  transition: background 0.15s ease;
}

/* ---------- Form inputs — focus glow ---------- */
.form-control:focus,
.input-group .form-control:focus {
  box-shadow: 0 0 0 3px rgba(12, 51, 240, 0.15);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

/* ---------- Currency images (trading pages) ---------- */
.currency-image {
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}
.currency-image:hover {
  transform: scale(1.05) !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12) !important;
}

/* ---------- Breathing buttons (trading pages) ---------- */
.breathing {
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
.breathing:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15) !important;
}

/* ---------- Custom scrollbar (webkit) ---------- */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: #0c33f0; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #0a28c0; }

/* ---------- Text selection ---------- */
::selection {
  background: rgba(12, 51, 240, 0.18);
  color: inherit;
}