/* ==========================================================================
   Framer-Style Sticky Card Stack Section Transitions & Glowing Cursor FX
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Navbar Layer Safety
   -------------------------------------------------------------------------- */
.ftco-navbar-light,
.ftco-navbar-light.scrolled {
  z-index: 9999 !important;
}

/* --------------------------------------------------------------------------
   2. Glowing Mouse Pointer / Cursor Dot & Ambient Halo
   -------------------------------------------------------------------------- */
.custom-cursor-dot,
.custom-cursor-glow {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 999999;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              width 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              height 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              background 0.25s ease;
  will-change: transform, opacity;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Sharp inner glowing dot (Hidden per user request) */
.custom-cursor-dot {
  display: none !important;
}

/* Ambient trailing glow halo (Pure soft glow with zero circle borders/lines) */
.custom-cursor-glow {
  width: 90px;
  height: 90px;
  background: radial-gradient(circle, rgba(255, 189, 57, 0.65) 0%, rgba(255, 189, 57, 0.25) 40%, rgba(255, 189, 57, 0.05) 65%, transparent 80%);
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  filter: blur(8px);
}

/* Visible active state */
.custom-cursor-active .custom-cursor-dot,
.custom-cursor-active .custom-cursor-glow {
  opacity: 1;
}

/* Hovering interactive links/buttons/cards */
.custom-cursor-hover .custom-cursor-glow {
  width: 130px;
  height: 130px;
  background: radial-gradient(circle, rgba(255, 189, 57, 0.8) 0%, rgba(255, 189, 57, 0.38) 45%, rgba(255, 189, 57, 0.08) 70%, transparent 85%);
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  filter: blur(10px);
}

/* Active click state */
.custom-cursor-down .custom-cursor-dot {
  transform: translate(-50%, -50%) scale(0.6);
}

.custom-cursor-down .custom-cursor-glow {
  transform: translate(-50%, -50%) scale(0.85);
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Disable custom pointer on touch devices where mouse cursor doesn't exist */
@media (hover: none) and (pointer: coarse) {
  .custom-cursor-dot,
  .custom-cursor-glow {
    display: none !important;
  }
}

/* --------------------------------------------------------------------------
   3. Framer Sticky Card-Stacking Architecture
   -------------------------------------------------------------------------- */
/* Parent page scroll container setup */
html, body {
  overflow-x: hidden;
  background: #000000;
}

/* Section Stack Containers */
.sticky-stack-section {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  background: #000000;
  will-change: transform, opacity;
  transform-origin: center top;
}

/* Desktop & Laptop Sticky Card Stacking */
@media (min-width: 768px) {
  .sticky-stack-section {
    position: sticky;
    top: 0;
    margin-bottom: 18vh;
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
    box-shadow: 0 -30px 60px rgba(0, 0, 0, 0.95), 0 -1px 0 rgba(255, 189, 57, 0.2);
    transition: transform 0.1s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.15s ease, border-radius 0.2s ease;
  }

  #home-section.sticky-stack-section {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    box-shadow: none;
    margin-bottom: 10vh;
  }
}

/* Distinct z-index hierarchy so each subsequent section glides UP over the previous one */
#home-section.sticky-stack-section { z-index: 10; }
#about-section.sticky-stack-section { z-index: 11; background: #040406; }
#resume-section.sticky-stack-section { z-index: 12; background: #08080c; }
#services-section.sticky-stack-section { z-index: 13; background: #000000; }
#skills-section.sticky-stack-section { z-index: 14; background: #06060a; }
#projects-section.sticky-stack-section { z-index: 15; background: #000000; }
#blog-section.sticky-stack-section { z-index: 16; background: #08080e; }
#section-counter.sticky-stack-section { z-index: 17; background: #000000; }

/* Highlight Callout Section */
.ftco-hireme.sticky-stack-section {
  z-index: 18;
  background: linear-gradient(135deg, #0e1208 0%, #17220b 50%, #080c04 100%);
  box-shadow: 0 -30px 60px rgba(0, 0, 0, 0.95), 0 -2px 15px rgba(255, 189, 57, 0.35);
  border-top: 1px solid rgba(255, 189, 57, 0.5);
}

#contact-section.sticky-stack-section { z-index: 19; background: #000000; }
footer.ftco-footer.sticky-stack-section { z-index: 20; background: #020202; margin-bottom: 0 !important; }

/* Subtle luminous top border for card stack depth */
.sticky-stack-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 189, 57, 0.2) 25%, rgba(255, 189, 57, 0.5) 50%, rgba(255, 189, 57, 0.2) 75%, transparent 100%);
  pointer-events: none;
  z-index: 5;
}

/* --------------------------------------------------------------------------
   4. In-Section Motion Elements & Scroll-Driven Card Fade In / Fade Out
   -------------------------------------------------------------------------- */
/* Giant watermark titles */
.heading-section h1.big {
  will-change: transform, opacity;
  transition: transform 0.1s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.15s ease;
  display: inline-block;
  white-space: nowrap;
}

/* Scroll-driven Fade-In & Fade-Out Cards */
.resume-wrap,
.services-1,
.progress-wrap,
.project,
.blog-entry,
.block-18,
.contact-info .box,
.contact-form {
  will-change: transform, opacity, box-shadow;
  transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.3s ease;
}

/* About Me Image Custom Ultra-Slow Fade Profile */
.img-about,
.img-about .img {
  will-change: transform, opacity;
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Card Hover Elevation */
.resume-wrap:hover {
  box-shadow: 0 16px 32px rgba(255, 189, 57, 0.12) !important;
}
.project:hover {
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.7), 0 0 30px rgba(255, 189, 57, 0.25) !important;
}
.contact-info .box:hover {
  box-shadow: 0 15px 30px rgba(255, 189, 57, 0.12) !important;
}

/* --------------------------------------------------------------------------
   5. Reduced Motion Accessibility
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .sticky-stack-section {
    position: relative !important;
    top: auto !important;
    transform: none !important;
    margin-bottom: 0 !important;
  }
  .custom-cursor-dot,
  .custom-cursor-glow,
  .heading-section h1.big,
  .resume-wrap,
  .services-1,
  .progress-wrap,
  .project,
  .blog-entry,
  .block-18,
  .contact-info .box,
  .img-about {
    transform: none !important;
    opacity: 1 !important;
    transition: none !important;
  }
}

/* --------------------------------------------------------------------------
   6. Marketing & Technical Toolkit - Animated Glowing Tracking Line
   -------------------------------------------------------------------------- */
#skills-section .progress {
  height: 10px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border-radius: 6px !important;
  border: 1px solid rgba(255, 189, 57, 0.25) !important;
  overflow: visible !important;
  position: relative;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.8) !important;
}

#skills-section .progress-bar {
  height: 100% !important;
  border-radius: 6px !important;
  background: linear-gradient(90deg, #ffbd39 0%, #ff9d00 50%, #ff6a00 100%) !important;
  box-shadow: 0 0 14px rgba(255, 189, 57, 0.9), 0 0 28px rgba(255, 189, 57, 0.45) !important;
  position: relative;
  width: 0%;
  transition: width 1.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
  will-change: width;
}

/* Glowing tip head dot on tracking line */
#skills-section .progress-bar::after {
  content: '' !important;
  position: absolute !important;
  top: 50% !important;
  right: -6px !important;
  transform: translateY(-50%) scale(0) !important;
  width: 14px !important;
  height: 14px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  box-shadow: 0 0 10px #ffffff, 0 0 22px rgba(255, 189, 57, 1), 0 0 40px rgba(255, 189, 57, 0.9) !important;
  opacity: 0;
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
  z-index: 10;
  pointer-events: none;
}

/* Show tip when filled */
#skills-section .progress-bar.animated-fill::after {
  opacity: 1 !important;
  transform: translateY(-50%) scale(1) !important;
}

/* Glowing skill percentage text */
#skills-section .skill-percentage {
  color: #ffbd39 !important;
  text-shadow: 0 0 12px rgba(255, 189, 57, 0.6);
  font-weight: 700;
  font-size: 18px;
}

/* ==========================================================================
   Stunning High-Tech Portfolio Preloader Screen
   ========================================================================== */
#ftco-loader {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: #0b0f19 !important;
  background: radial-gradient(circle at 50% 45%, #151d30 0%, #080b12 75%) !important;
  z-index: 999999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 1 !important;
  visibility: visible !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              visibility 0.7s linear !important;
  overflow: hidden;
}

#ftco-loader.fade-out {
  opacity: 0 !important;
  transform: scale(1.05) !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Ambient glowing backdrop orb */
.loader-bg-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 380px;
  height: 380px;
  background: radial-gradient(circle, rgba(255, 189, 57, 0.22) 0%, rgba(255, 189, 57, 0.05) 50%, transparent 75%);
  filter: blur(50px);
  pointer-events: none;
  animation: loaderPulse 3s ease-in-out infinite alternate;
}

@keyframes loaderPulse {
  0% { transform: translate(-50%, -50%) scale(0.85); opacity: 0.6; }
  100% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; }
}

.loader-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
  max-width: 420px;
  width: 90%;
}

/* Glowing Logo Ring */
.loader-logo-ring {
  position: relative;
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
}

.loader-logo-ring .ring-spinner {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(255, 189, 57, 0.12);
  border-top-color: #ffbd39;
  border-right-color: #ffbd39;
  animation: loaderSpin 1.1s cubic-bezier(0.5, 0.1, 0.5, 0.9) infinite;
  box-shadow: 0 0 18px rgba(255, 189, 57, 0.4);
}

@keyframes loaderSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loader-logo-ring .ring-core {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #0f172a;
  border: 1px solid rgba(255, 189, 57, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 30px rgba(255, 189, 57, 0.25), inset 0 0 15px rgba(255, 189, 57, 0.1);
}

.loader-logo-ring .logo-initials {
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: 28px;
  letter-spacing: 1.5px;
  color: #ffbd39;
  text-shadow: 0 0 14px rgba(255, 189, 57, 0.85);
}

/* Brand Text */
.loader-brand {
  margin-bottom: 28px;
}

.loader-name {
  font-family: 'Poppins', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 2px;
  margin: 0 0 6px 0;
  text-transform: uppercase;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.loader-tagline {
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: #a1a1aa;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  margin: 0;
}

/* Progress Box & Bar */
.loader-progress-box {
  width: 100%;
  max-width: 280px;
}

.loader-bar-track {
  height: 5px;
  width: 100%;
  background: rgba(255, 255, 255, 0.07);
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  border: 1px solid rgba(255, 189, 57, 0.2);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6);
}

.loader-bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #ff9800 0%, #ffbd39 60%, #fff 100%);
  border-radius: 10px;
  box-shadow: 0 0 14px rgba(255, 189, 57, 0.9), 0 0 25px rgba(255, 189, 57, 0.5);
  transition: width 0.08s linear;
}

.loader-status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  font-family: 'Poppins', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  color: #71717a;
}

.loader-percent {
  color: #ffbd39;
  font-weight: 700;
  text-shadow: 0 0 8px rgba(255, 189, 57, 0.6);
}