/* ==========================================================================
   MAYUR BIKASH GOGOI - HARDWARE ACCELERATED ANIMATIONS & CURSOR
   High performance 60fps animations, GPU accelerated transitions
   ========================================================================== */

/* Page Loading Screen */
.loading-screen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background-color: var(--bg-primary);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.loading-screen.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.loading-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.loading-monogram {
  font-size: 2.25rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 4px;
}

.loading-monogram::after {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--accent);
}

.loading-name {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-muted);
}

.loading-progress-track {
  width: 120px;
  height: 3px;
  border-radius: 3px;
  background-color: var(--surface-border);
  overflow: hidden;
  position: relative;
}

.loading-progress-bar {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 40%;
  border-radius: 3px;
  background-color: var(--accent);
  animation: smoothProgress 1.1s infinite ease-in-out;
}

@keyframes smoothProgress {
  0% { left: -40%; width: 40%; }
  50% { left: 30%; width: 50%; }
  100% { left: 100%; width: 40%; }
}

/* GPU-Accelerated Scroll Reveals */
.reveal-on-scroll,
.reveal-item {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1), transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal-on-scroll.is-visible,
.reveal-item.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* Stagger delays for child items */
.stagger-1 { transition-delay: 0.06s; }
.stagger-2 { transition-delay: 0.12s; }
.stagger-3 { transition-delay: 0.18s; }
.stagger-4 { transition-delay: 0.24s; }

/* Custom Desktop Cursor (Fine Pointer Only) */
@media (pointer: fine) and (hover: hover) {
  /* Hide default cursor on desktop */
  body.has-custom-cursor {
    cursor: default;
  }

  .cursor-dot {
    position: fixed;
    top: 0;
    left: 0;
    width: 6px;
    height: 6px;
    background-color: var(--accent);
    border-radius: 50%;
    pointer-events: none;
    z-index: 10000;
    will-change: transform;
    transition: opacity 0.15s ease, background-color 0.2s ease, transform 0.1s ease;
  }

  .cursor-ring {
    position: fixed;
    top: 0;
    left: 0;
    width: 32px;
    height: 32px;
    margin-left: -16px;
    margin-top: -16px;
    border: 1.5px solid var(--accent);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    will-change: transform;
    opacity: 0.6;
    transition: width 0.25s cubic-bezier(0.16, 1, 0.3, 1),
                height 0.25s cubic-bezier(0.16, 1, 0.3, 1),
                margin 0.25s cubic-bezier(0.16, 1, 0.3, 1),
                background-color 0.2s ease,
                border-color 0.2s ease,
                opacity 0.2s ease;
  }

  /* Interactive Hover State */
  body.cursor-hover .cursor-ring {
    width: 50px;
    height: 50px;
    margin-left: -25px;
    margin-top: -25px;
    border-color: var(--accent-hover);
    background-color: rgba(37, 99, 235, 0.08);
    opacity: 0.9;
  }

  body.cursor-hover .cursor-dot {
    background-color: var(--accent-hover);
    transform: scale(1.4);
  }

  /* Photo & Gallery Hover State */
  body.cursor-photo .cursor-ring {
    width: 60px;
    height: 60px;
    margin-left: -30px;
    margin-top: -30px;
    border-color: var(--accent);
    background-color: rgba(37, 99, 235, 0.12);
    border-style: solid;
    opacity: 1;
  }

  /* Active Click State */
  body.cursor-click .cursor-ring {
    transform: scale(0.85);
    background-color: rgba(37, 99, 235, 0.2);
  }

  /* Dark mode cursor adjustments */
  [data-theme="dark"] .cursor-ring {
    border-color: var(--accent);
  }
  
  [data-theme="dark"] body.cursor-hover .cursor-ring {
    background-color: rgba(59, 130, 246, 0.15);
  }
}

/* Reduced Motion Fallback */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }

  .reveal-on-scroll,
  .reveal-item {
    opacity: 1 !important;
    transform: none !important;
  }

  .cursor-dot, .cursor-ring, .loading-screen {
    display: none !important;
  }
}