/* ── UI Enhancements ──────────────────────────────────────────────────── */

/* 1. Custom Scrollbar */
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: var(--color-primary);
}
::-webkit-scrollbar-thumb {
  background: var(--color-accent-gold);
  border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-accent-gold-hover);
}

/* 2. Elegant Loading Screen */
.preloader {
  position: fixed;
  inset: 0;
  background-color: var(--color-primary);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}
.preloader.fade-out {
  opacity: 0;
  visibility: hidden;
}
.preloader-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}
.preloader-spinner-container {
  position: relative;
  width: 110px;
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.preloader-logo {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--color-accent-gold);
  background-color: var(--color-white);
  box-shadow: 0 0 15px rgba(212, 175, 55, 0.3);
  animation: logo-pulse 2s ease-in-out infinite alternate;
  z-index: 2;
}
.preloader-spinner {
  position: absolute;
  inset: 0;
  border: 3px solid transparent;
  border-top-color: var(--color-accent-gold);
  border-radius: 50%;
  animation: spin-clockwise 1.2s linear infinite;
  z-index: 1;
}
.preloader-spinner::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 2px solid transparent;
  border-bottom-color: rgba(212, 175, 55, 0.4);
  border-radius: 50%;
  animation: spin-counter 2s linear infinite;
}
.preloader-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: var(--color-white);
  text-align: center;
}
.preloader-title {
  font-family: var(--font-english-head);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--color-white);
  letter-spacing: 0.05em;
  display: none;
}
body.lang-am .preloader-title {
  font-family: var(--font-amharic);
  font-size: 1.2rem;
}
.preloader-subtitle {
  font-size: 0.78rem;
  color: var(--color-accent-gold);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-weight: 500;
  display: none;
}
/* Display block for language active */
html.lang-en span.preloader-title[data-lang="en"] { display: block; }
html.lang-am span.preloader-title[data-lang="am"] { display: block; }
html.lang-en span.preloader-subtitle[data-lang="en"] { display: block; }
html.lang-am span.preloader-subtitle[data-lang="am"] { display: block; }

@keyframes spin-clockwise {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes spin-counter {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(-360deg); }
}
@keyframes logo-pulse {
  0% { transform: scale(0.96); box-shadow: 0 0 10px rgba(212, 175, 55, 0.25); }
  100% { transform: scale(1.04); box-shadow: 0 0 25px rgba(212, 175, 55, 0.5); }
}

/* 3. Glassmorphism for Service Cards */
.service-card {
  background: rgba(23, 42, 69, 0.65) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  transition: var(--transition-smooth) !important;
}
.service-card:hover {
  background: rgba(23, 42, 69, 0.85) !important;
  border-color: rgba(212, 175, 55, 0.4) !important;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3), 0 0 15px rgba(212, 175, 55, 0.1) !important;
  transform: translateY(-8px) !important;
}

/* 4. Advanced Micro-interactions */
/* Button Shine Effect */
.btn-primary {
  position: relative;
  overflow: hidden;
}
.btn-primary::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 100%);
  transform: skewX(-25deg);
  transition: var(--transition-fast);
}
.btn-primary:hover::after {
  animation: shine 0.75s ease-out forwards;
}
@keyframes shine {
  100% { left: 200%; }
}

/* Icon Scaling in features & services */
.feature-item .feature-icon i,
.service-card-icon i {
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.feature-item:hover .feature-icon i,
.service-card:hover .service-card-icon i {
  transform: scale(1.2);
}

/* Gallery hover overlay upgrade */
.gallery-item-overlay {
  background: linear-gradient(to top, rgba(10, 25, 47, 0.9) 0%, rgba(212, 175, 55, 0.2) 100%) !important;
}
.gallery-element {
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1) !important;
}
.gallery-item:hover .gallery-element {
  transform: scale(1.08) !important;
}

/* 5. Animated Hero Gradient */
.hero-overlay {
  background: linear-gradient(
    180deg,
    rgba(10, 25, 47, 0.4) 0%,
    rgba(10, 25, 47, 0.7) 50%,
    rgba(10, 25, 47, 0.9) 100%
  ) !important;
  background-size: 100% 200% !important;
  animation: gradientShift 10s ease infinite alternate !important;
}
@keyframes gradientShift {
  0% { background-position: 0% 0%; }
  100% { background-position: 0% 100%; }
}