/* ============================================================
   13 · Components — preloader, cursor, progress, reveal, WhatsApp
   ============================================================ */

/* Custom cursor */
.cursor-dot, .cursor-ring { display: none; }
@media (pointer: fine) {
  .cursor-dot, .cursor-ring {
    display: block; position: fixed; top: 0; left: 0; z-index: 9999; pointer-events: none;
    border-radius: 50%; transform: translate(-50%, -50%);
  }
  .cursor-dot {
    width: 8px; height: 8px; background: var(--blue-400);
    box-shadow: 0 0 12px rgba(96, 165, 250, .9);
  }
  .cursor-ring {
    width: 38px; height: 38px; border: 1px solid rgba(139, 92, 246, .55);
    transition: width .3s var(--ease), height .3s var(--ease),
                background .3s, border-color .3s;
  }
  .cursor-ring.is-hover {
    width: 62px; height: 62px;
    background: rgba(139, 92, 246, .12);
    border-color: rgba(217, 70, 239, .7);
  }
  body.cursor-off, body.cursor-off a, body.cursor-off button,
  body.cursor-off .cursor-dot, body.cursor-off .cursor-ring {
    cursor: none;
  }
}

/* Scroll progress */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 1200;
  background: transparent;
}
.scroll-progress span {
  display: block; height: 100%; width: 0;
  background: var(--grad);
  box-shadow: 0 0 12px rgba(139, 92, 246, .8);
}

/* Preloader */
.preloader {
  position: fixed; inset: 0; z-index: 2000; display: grid;
  place-items: center; background: var(--ink-950);
  transition: opacity .6s ease, visibility .6s ease;
}
.preloader.done { opacity: 0; visibility: hidden; }
.preloader-mark { position: relative; width: 96px; height: 96px; display: grid; place-items: center; }
.preloader-inner {
  font-family: var(--font-display); font-weight: 800; font-size: 1.6rem;
  letter-spacing: .08em; color: var(--white);
  background: var(--grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.preloader-ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: var(--blue-400);
  border-right-color: var(--violet-500);
  animation: spin 1.1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.preloader-tag {
  position: absolute; bottom: 22vh; font-family: var(--font-mono);
  font-size: .68rem; letter-spacing: .35em; text-transform: uppercase; color: var(--slate-500);
  animation: pulse-soft 1.6s ease-in-out infinite;
}
@keyframes pulse-soft { 0%,100% { opacity: .45; } 50% { opacity: 1; } }

/* Scroll reveal */
.reveal {
  opacity: 0; transform: translateY(34px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.reveal.in { opacity: 1; transform: translateY(0); }
.reveal[data-delay="1"] { transition-delay: .1s; }
.reveal[data-delay="2"] { transition-delay: .2s; }
.reveal[data-delay="3"] { transition-delay: .3s; }
.reveal[data-delay="4"] { transition-delay: .4s; }

/* Floating WhatsApp button */
.wa-float {
  position: fixed; left: 26px; bottom: 26px; z-index: 900;
  width: 56px; height: 56px; border-radius: 50%;
  background: linear-gradient(135deg, #25d366, #128c7e);
  display: grid; place-items: center; color: #fff;
  box-shadow: 0 12px 32px -8px rgba(37, 211, 102, .6);
  transition: transform .3s var(--ease), box-shadow .3s;
}
.wa-float svg { width: 30px; height: 30px; fill: #fff; }
.wa-float:hover { transform: translateY(-4px) scale(1.06); box-shadow: 0 18px 40px -10px rgba(37, 211, 102, .75); }
.wa-float::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: rgba(37, 211, 102, .5);
  animation: wa-ping 2s ease-out infinite; z-index: -1;
}
@keyframes wa-ping {
  0% { transform: scale(1); opacity: .7; }
  80%, 100% { transform: scale(1.65); opacity: 0; }
}
.wa-tip {
  position: absolute; right: calc(100% + 12px); top: 50%; transform: translateY(-50%) translateX(6px);
  background: #fff; color: #0d1526; font-family: var(--font-display);
  font-weight: 600; font-size: .72rem; padding: 7px 12px; border-radius: 8px;
  white-space: nowrap; opacity: 0; pointer-events: none;
  transition: opacity .25s, transform .25s var(--ease);
}
.wa-float:hover .wa-tip { opacity: 1; transform: translateY(-50%) translateX(0); }