/* ==========================================================
   CMNS — Micro-interactions
   page loader · scroll progress · custom cursor · back-to-top
   ========================================================== */

/* ── Page Loader ── */
#page-loader {
  position: fixed;
  inset: 0;
  background: var(--bg-page);
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  transition: opacity 500ms ease, visibility 500ms ease;
}
[data-theme="dark"] #page-loader { background: #050505; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #page-loader { background: #050505; }
}
#page-loader.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.loader-logo img {
  height: 56px;
  width: auto;
  display: block;
  filter:
    drop-shadow(0 0 18px rgba(252, 116, 4, 0.70))
    drop-shadow(0 0 4px rgba(0, 0, 0, 0.90));
  animation: loader-pulse 1.4s ease-in-out infinite;
}
@keyframes loader-pulse {
  0%, 100% { filter: drop-shadow(0 0 18px rgba(252,116,4,0.70)) drop-shadow(0 0 4px rgba(0,0,0,0.90)); }
  50%       { filter: drop-shadow(0 0 32px rgba(252,116,4,1.00)) drop-shadow(0 0 6px rgba(0,0,0,0.90)); }
}

.loader-ring {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 2.5px solid rgba(252, 116, 4, 0.18);
  border-top-color: #fc7404;
  animation: spin 0.75s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Scroll Progress Bar ── */
#scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0%;
  z-index: 1002;
  background: linear-gradient(90deg, #fc7404 0%, #ffb347 60%, #fc7404 100%);
  background-size: 200% 100%;
  animation: progress-shimmer 2s linear infinite;
  box-shadow: 0 0 10px rgba(252, 116, 4, 0.55), 0 0 4px rgba(252, 116, 4, 0.30);
  transition: width 80ms linear;
  border-radius: 0 2px 2px 0;
  pointer-events: none;
}
@keyframes progress-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Custom cursor disabled */
#cursor-dot, #cursor-ring { display: none !important; }

/* ── Back to Top ── */
#back-to-top {
  position: fixed;
  bottom: 100px; right: 24px;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: linear-gradient(135deg, #fc7404, #e06500);
  border: none;
  cursor: none;
  z-index: 490;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow:
    0 4px 20px rgba(252, 116, 4, 0.45),
    0 1px 4px rgba(0,0,0,0.15);
  opacity: 0;
  transform: translateY(20px) scale(0.80);
  transition: opacity 300ms ease, transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 200ms ease;
  pointer-events: none;
}
#back-to-top.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
#back-to-top:hover {
  box-shadow:
    0 8px 30px rgba(252, 116, 4, 0.60),
    0 2px 8px rgba(0,0,0,0.15);
  transform: translateY(-3px) scale(1.06);
}
#back-to-top .material-symbols-rounded { font-size: 22px; }

@media (pointer: coarse) {
  #back-to-top { cursor: pointer; }
}
@media (max-width: 768px) {
  #back-to-top { bottom: 84px; right: 16px; }
}