/* ============================================================
   animations.css — 15 Majestic Animation Systems
   naveedesahar.online
   ============================================================ */

/* ══════════════════════════════════════════════════
   #61 — LOADING SCREEN
══════════════════════════════════════════════════ */
#loader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: #060503;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.8rem;
  transition: opacity 0.9s cubic-bezier(0.4, 0, 0.2, 1),
              visibility 0.9s cubic-bezier(0.4, 0, 0.2, 1);
}

#loader.hide {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.loader-core {
  position: relative;
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Loader pulsing sonar rings */
.loader-sonar {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(201, 168, 76, 0.5);
  width: 80px;
  height: 80px;
  animation: loaderSonar 2.4s ease-out infinite;
}

.ls2 { animation-delay: 0.8s; }
.ls3 { animation-delay: 1.6s; }

@keyframes loaderSonar {
  0%   { width: 80px;  height: 80px;  opacity: 0.7; border-color: rgba(201,168,76,0.6); }
  100% { width: 300px; height: 300px; opacity: 0;   border-color: rgba(201,168,76,0); }
}

/* N·S central text in loader */
.loader-ns {
  font-family: 'Cinzel', serif;
  font-size: 2.6rem;
  font-weight: 700;
  background: linear-gradient(135deg, #ffd94a, #f0d485, #c9a84c, #8b6914);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: loaderNsPulse 1.8s ease-in-out infinite;
  filter: drop-shadow(0 0 20px rgba(201,168,76,0.5));
  position: relative;
  z-index: 2;
}

@keyframes loaderNsPulse {
  0%, 100% { filter: drop-shadow(0 0 15px rgba(201,168,76,0.4)); transform: scale(1);    }
  50%       { filter: drop-shadow(0 0 45px rgba(201,168,76,0.9)); transform: scale(1.06); }
}

.loader-label {
  font-family: 'Raleway', sans-serif;
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.45em;
  text-transform: uppercase;
  color: rgba(201, 168, 76, 0.55);
  animation: loaderLabelFade 2s ease-in-out infinite;
}

@keyframes loaderLabelFade {
  0%, 100% { opacity: 0.4; }
  50%       { opacity: 0.9; }
}

/* Progress bar */
.loader-bar {
  width: 180px;
  height: 1px;
  background: rgba(201, 168, 76, 0.12);
  border-radius: 1px;
  overflow: hidden;
  position: relative;
}

.loader-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, transparent, #c9a84c, #f0d485, #c9a84c, transparent);
  animation: loaderFill 2.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes loaderFill {
  0%   { width: 0%;   opacity: 1; }
  85%  { width: 100%; opacity: 1; }
  100% { width: 100%; opacity: 0; }
}


/* ══════════════════════════════════════════════════
   #76 — SONAR RINGS PULSING FROM LOGO
══════════════════════════════════════════════════ */
.sonar {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(201, 168, 76, 0.55);
  width: 160px;
  height: 160px;
  pointer-events: none;
  animation: sonarPulse 3.6s ease-out infinite;
}

.sn2 { animation-delay: 1.2s; }
.sn3 { animation-delay: 2.4s; }

@keyframes sonarPulse {
  0%   { width: 160px; height: 160px; opacity: 0.65; border-color: rgba(201,168,76,0.55); }
  100% { width: 440px; height: 440px; opacity: 0;    border-color: rgba(201,168,76,0);    }
}


/* ══════════════════════════════════════════════════
   #10 — CTA BUTTON CONTINUOUS SHIMMER
══════════════════════════════════════════════════ */
.cta-text::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    105deg,
    transparent 20%,
    rgba(255, 220, 100, 0.18) 50%,
    transparent 80%
  );
  animation: ctaShimmer 3s ease-in-out infinite;
  opacity: 1 !important; /* override hover-only */
  pointer-events: none;
}

@keyframes ctaShimmer {
  0%   { left: -100%; }
  60%  { left: 160%;  }
  100% { left: 160%;  }
}


/* ══════════════════════════════════════════════════
   #15 — SCROLL INDICATOR DRAWING ITSELF
══════════════════════════════════════════════════ */
.scroll-line {
  width: 1px;
  height: 0;
  background: linear-gradient(to bottom, rgba(201,168,76,0.7), transparent);
  animation: scrollDraw 2s 3s cubic-bezier(0.4, 0, 0.2, 1) forwards,
             scrollPulse 2.5s 5s ease-in-out infinite;
}

@keyframes scrollDraw {
  from { height: 0;    opacity: 0; }
  to   { height: 60px; opacity: 1; }
}


/* ══════════════════════════════════════════════════
   #23 — NAVBAR SHRINK ON SCROLL
══════════════════════════════════════════════════ */
.navbar {
  transition: height 0.45s cubic-bezier(0.4, 0, 0.2, 1),
              background 0.4s,
              border-color 0.4s,
              box-shadow 0.4s !important;
}

.navbar.scrolled {
  height: 52px !important;
}

.navbar.scrolled .nav-site-name {
  font-size: 0.82rem;
  transition: font-size 0.4s ease;
}

.navbar.scrolled .nav-logo-wrap {
  width: 34px;
  height: 34px;
  transition: width 0.4s, height 0.4s;
}


/* ══════════════════════════════════════════════════
   #33 — CLICK RIPPLE ON CARDS
══════════════════════════════════════════════════ */
.ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(201, 168, 76, 0.22);
  transform: scale(0);
  pointer-events: none;
  animation: rippleExpand 0.7s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes rippleExpand {
  to {
    transform: scale(5);
    opacity: 0;
  }
}


/* ══════════════════════════════════════════════════
   #30 — CARDS RIPPLE WAVE ENTRANCE
   (Enhanced stagger — radiates from center)
══════════════════════════════════════════════════ */
.note-card {
  animation: cardWaveIn 0.6s cubic-bezier(0.2, 0.8, 0.3, 1.1) both !important;
}

@keyframes cardWaveIn {
  0%   { opacity: 0; transform: translateY(35px) scale(0.94); }
  70%  { opacity: 1; transform: translateY(-4px) scale(1.01); }
  100% { opacity: 1; transform: translateY(0)   scale(1);    }
}


/* ══════════════════════════════════════════════════
   #66 — SECTIONS ELEVATOR REVEAL
══════════════════════════════════════════════════ */
.elevator {
  opacity: 0;
  transform: translateY(55px);
  transition: opacity 0.95s cubic-bezier(0.2, 0.8, 0.3, 1),
              transform 0.95s cubic-bezier(0.2, 0.8, 0.3, 1);
}

.elevator.risen {
  opacity: 1;
  transform: translateY(0);
}

.elevator-delay-1 { transition-delay: 0.1s; }
.elevator-delay-2 { transition-delay: 0.2s; }
.elevator-delay-3 { transition-delay: 0.32s; }


/* ══════════════════════════════════════════════════
   #83 — CORNER BRACKETS DRAWING THEMSELVES
══════════════════════════════════════════════════ */

/* Reset corners — start hidden */
.corner::before {
  width: 0 !important;
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.corner::after {
  height: 0 !important;
  transition: height 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.35s !important;
}

/* When about section enters view, add .draw class to about-glass */
.about-glass.draw .corner::before { width: 16px  !important; }
.about-glass.draw .corner::after  { height: 16px !important; }

/* Also animate the about rule */
.about-rule {
  width: 0 !important;
  transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.3s !important;
}

.about-glass.draw .about-rule { width: 60px !important; }

/* About title reveal */
.about-title {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s ease 0.2s, transform 0.7s ease 0.2s;
}

.about-glass.draw .about-title {
  opacity: 1;
  transform: translateY(0);
}

/* About body text reveal staggered */
.about-body {
  opacity: 0;
  transform: translateY(15px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.about-glass.draw .about-body:nth-of-type(1) {
  opacity: 1; transform: translateY(0);
  transition-delay: 0.5s;
}

.about-glass.draw .about-body:nth-of-type(2) {
  opacity: 1; transform: translateY(0);
  transition-delay: 0.7s;
}

.about-sig {
  opacity: 0;
  transition: opacity 0.7s ease 1s;
}

.about-glass.draw .about-sig { opacity: 0.75; }


/* ══════════════════════════════════════════════════
   #99 — CARDS SOFT BLUR WHEN OUT OF CENTER VIEW
══════════════════════════════════════════════════ */
.note-card.dim {
  opacity: 0.55;
  filter: blur(1px) brightness(0.8);
  transition: opacity 0.5s ease, filter 0.5s ease !important;
}

.note-card:not(.dim) {
  transition: opacity 0.5s ease, filter 0.5s ease,
              border-color 0.4s, box-shadow 0.4s,
              background 0.4s !important;
}


/* ══════════════════════════════════════════════════
   #9 — STAT NUMBER COUNT-UP GLOW
   (JS handles the counting — CSS adds the glow)
══════════════════════════════════════════════════ */
.stat-val.counting {
  animation: statGlow 0.1s ease-in-out infinite alternate;
}

@keyframes statGlow {
  from { text-shadow: 0 0 10px rgba(201,168,76,0.4); }
  to   { text-shadow: 0 0 30px rgba(201,168,76,0.9), 0 0 60px rgba(201,168,76,0.3); }
}

.stat-val.done {
  animation: statSettle 0.5s ease forwards;
}

@keyframes statSettle {
  0%   { text-shadow: 0 0 40px rgba(201,168,76,1); transform: scale(1.15); }
  100% { text-shadow: 0 0 20px rgba(201,168,76,0.5); transform: scale(1);   }
}


/* ══════════════════════════════════════════════════
   REDUCED MOTION — respect accessibility
══════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  #loader { display: none !important; }
  .sonar  { display: none !important; }
}