/* ============================================================
   VYNK CREATIVE — animations.css
   Keyframes, cursor customizado, preloader, motion states
   ============================================================ */

/* ---------------- Custom cursor ---------------- */
.cursor-dot, .cursor-ring{
  position:fixed;
  top:0; left:0;
  pointer-events:none;
  z-index:9999;
  border-radius:50%;
  transform: translate(-50%,-50%);
  will-change: transform;
}
.cursor-dot{
  width:6px; height:6px;
  background: var(--white);
  opacity:0;
  transition: opacity .2s ease;
}
.cursor-ring{
  width:40px; height:40px;
  border:1px solid rgba(246,245,250,0.4);
  opacity:0;
  transition: width .3s var(--ease), height .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease), opacity .2s ease;
  display:flex; align-items:center; justify-content:center;
}
.cursor-dot.is-active, .cursor-ring.is-active{ opacity:1; }
.cursor-ring span{
  opacity:0;
  font-family: var(--f-display);
  font-size:10px;
  font-weight:600;
  letter-spacing:0.05em;
  text-transform:uppercase;
  white-space:nowrap;
  transition: opacity .25s ease;
}
.cursor-ring.hovering{ width:56px; height:56px; border-color:transparent; background:var(--purple); }
.cursor-ring.viewing{ width:110px; height:110px; border-color:transparent; background:var(--purple); }
.cursor-ring.viewing span{ opacity:1; color:var(--bg); }
.no-cursor .cursor-dot,.no-cursor .cursor-ring{ display:none; }

@media (pointer:coarse){
  .cursor-dot,.cursor-ring{ display:none !important; }
  body{ cursor:auto; }
}

/* ---------------- Preloader ---------------- */
#preloader{
  position:fixed; inset:0; z-index:10000;
  background: var(--bg);
  display:flex; align-items:center; justify-content:center;
  transition: opacity .8s var(--ease), visibility .8s var(--ease);
}
#preloader.done{ opacity:0; visibility:hidden; }
.preload-mark{ width:52px; opacity:0; animation: preloadFade 1.4s var(--ease) forwards; }
@keyframes preloadFade{ 0%{opacity:0; transform:scale(.85);} 60%{opacity:1;} 100%{opacity:1; transform:scale(1);} }

/* ---------------- Scroll cue ---------------- */
.scroll-cue .line-anim::after{
  content:''; position:absolute; top:-100%; left:0; width:100%; height:100%;
  background:var(--purple);
  animation: scrollDrop 2.2s ease-in-out infinite;
}
@keyframes scrollDrop{ 0%{top:-100%;} 60%{top:100%;} 100%{top:100%;} }

/* ---------------- Seam mark reveal ---------------- */
.seam-mark{ opacity:0; transform: scale(.3) rotate(20deg); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.seam-mark.in-view{ opacity:1; transform: scale(1) rotate(0deg); animation: seamPulse 4.5s ease-in-out .9s infinite; }
@keyframes seamPulse{
  0%,100%{ filter:brightness(1); }
  50%{ filter:brightness(1.35); }
}

/* ---------------- WhatsApp float pulse ---------------- */
.wa-float::before{
  content:'';
  position:absolute; inset:0;
  border-radius:100px;
  border:1px solid rgba(138,118,255,0.5);
  opacity:0;
  animation: waPulse 3.2s ease-out infinite;
}
@keyframes waPulse{
  0%{ opacity:.55; transform:scale(1); }
  100%{ opacity:0; transform:scale(1.35); }
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}