/* === scroll_reveal === */
/* ScrollReveal targets (opt-in) */
.sr-fade-up,
.sr-fade,
.sr-card {
   will-change: transform, opacity;
}

/* === cursor_dot === */
/* Cursor dot: solo desktop + sin reduced motion */
@media (pointer: fine) and (prefers-reduced-motion: no-preference) {
   /* Oculta el cursor nativo */
   html,
   body,
   #page-scroll,
   a,
   button {
      cursor: none !important;
   }

   .cursor-dot {
      position: fixed;
      left: var(--mx);
      top: var(--my);
      width: 6px;
      height: 6px;
      border-radius: 9999px;

      background: #ecebf3; /* TextColor.BODY */
      opacity: 0.95;

      pointer-events: none;
      z-index: 20000;

      transform: translate(-50%, -50%);
   }
}

/* En touch o reduced motion: no mostrar dot (y no ocultar cursor) */
@media (pointer: coarse), (prefers-reduced-motion: reduce) {
   .cursor-dot {
      display: none;
   }
}

/* === rails_reveal === */
.side-rail {
   opacity: 0;
   filter: blur(6px);
   pointer-events: none;
   transition:
      opacity 1100ms cubic-bezier(0.22, 1, 0.36, 1),
      filter 1100ms cubic-bezier(0.22, 1, 0.36, 1);
   transition-delay: 160ms;
}

/* Cuando sales del hero aparecen */
:root[data-in-hero="false"] .side-rail {
   opacity: 1;
   filter: blur(0px);
   pointer-events: auto;
}

/* Stagger leve: izquierda antes, derecha después */
:root[data-in-hero="false"] .side-rail.left {
   transition-delay: 120ms;
}
:root[data-in-hero="false"] .side-rail.right {
   transition-delay: 260ms;
}

@media (prefers-reduced-motion: reduce) {
   .side-rail {
      opacity: 1;
      filter: none;
      pointer-events: auto;
      transition: none;
      transition-delay: 0ms;
   }
}

/* === hero_links === */
.social-chip {
   display: inline-flex;
   align-items: center;
   gap: 0.5rem;

   padding: 0.45rem 0.7rem;
   border-radius: 999px;

   border: 1px solid rgba(240, 168, 48, 0.22);
   background: rgba(255, 255, 255, 0.03);

   text-decoration: none;
   color: inherit;

   transition:
      transform 140ms ease,
      border-color 140ms ease,
      background 140ms ease,
      box-shadow 140ms ease,
      color 140ms ease;
}

.social-chip:hover {
   transform: translateY(-1px);
   border-color: rgba(240, 168, 48, 0.48);
   background: rgba(255, 255, 255, 0.05);
   box-shadow:
      0 0 0 1px rgba(240, 168, 48, 0.1),
      0 12px 28px rgba(2, 12, 27, 0.35);

   color: var(--accent-gold, #F0A830) !important;
}

.social-chip:visited {
   color: inherit !important;
}

.social-chip:visited:hover {
   color: var(--accent-gold, #F0A830) !important;
}

.social-chip:focus-visible {
   outline: none;
   box-shadow:
      0 0 0 3px rgba(240, 168, 48, 0.22),
      0 0 0 1px rgba(240, 168, 48, 0.35) inset;
}

.social-chip svg {
   opacity: 0.9;
}

/* === navbar_reveal === */
/* Evita flash al cargar: mientras NO exista data-in-hero, asumimos estado "hero" */
:root:not([data-in-hero]) .navbar-pill {
   background: transparent !important;
   border-color: transparent !important;
   box-shadow: none !important;
   backdrop-filter: none !important;
}

/* Navbar motion: entrada más notoria del pill al salir del hero */
.navbar-pill {
   transition:
      background 220ms ease,
      border-color 220ms ease,
      box-shadow 220ms ease,
      backdrop-filter 220ms ease,
      transform 900ms cubic-bezier(0.22, 1, 0.36, 1),
      opacity 900ms cubic-bezier(0.22, 1, 0.36, 1);
   will-change: transform, opacity;
}

/* En hero: el pill queda "más liviano" y un poco arriba (sin romper navegación) */
:root[data-in-hero="true"] .navbar-pill {
   transform: translateY(-10px);
   opacity: 0.92;
}

:root[data-in-hero="false"] .navbar-pill {
   transform: translateY(0);
   opacity: 1;
}

/* Drawer abierto: no queremos movimiento (y ya lo haces transparente en ui_effects.css) */
:root[data-drawer-open="true"] .navbar-pill {
   transform: none !important;
   opacity: 1 !important;
}

@media (prefers-reduced-motion: reduce) {
   .navbar-pill {
      transition:
         background 220ms ease,
         border-color 220ms ease,
         box-shadow 220ms ease;
      transform: none !important;
      opacity: 1 !important;
      filter: none !important;
   }
}

/* === skills_carousel === */
/* ===========================
   Skills Carousel (Flat Marquee)
   - No visible container (transparent)
   - Icons fade at edges (mask-image)
   - Infinite loop (requires 2 identical sets in markup)
   - Hover: only hovered icon becomes normal
   =========================== */

@keyframes skillsMarquee {
   /* moves to the right */
   0% {
      transform: translateX(-50%);
   }
   100% {
      transform: translateX(0);
   }
}

.skills-slider {
   width: 100%;
   max-width: 800px;
   height: clamp(84px, 10vw, 110px);
   position: relative;

   /* No container visuals */
   background: transparent;
   box-shadow: none;
   border-radius: 0;

   /* Keep animation clipped to this width */
   overflow: hidden;

   /* Fade ONLY the icons at start/end (no overlay bands) */
   --fade: clamp(28px, 6vw, 90px);
   -webkit-mask-image: linear-gradient(
      90deg,
      transparent 0,
      #000 var(--fade),
      #000 calc(100% - var(--fade)),
      transparent 100%
   );
   mask-image: linear-gradient(
      90deg,
      transparent 0,
      #000 var(--fade),
      #000 calc(100% - var(--fade)),
      transparent 100%
   );
   -webkit-mask-repeat: no-repeat;
   mask-repeat: no-repeat;
   -webkit-mask-size: 100% 100%;
   mask-size: 100% 100%;
}

.skills-track {
   height: 100%;
   display: flex;
   align-items: center;
   width: max-content;

   /* Space between icons */
   gap: clamp(22px, 3.2vw, 44px);
   padding: 0 clamp(18px, 2.4vw, 32px);

   /* Speed control here */
   animation: skillsMarquee 40s linear infinite;
   will-change: transform;
}

.skills-set {
   display: flex;
   align-items: center;
   gap: inherit; /* same gap as track */
}

/* Icons: always in color, subtle lift on hover */
.skills-icon {
   height: clamp(25px, 2.9vw, 45px);

   width: auto;

   opacity: 0.9;

   transition: transform 160ms ease;
   user-select: none;
   pointer-events: auto;
}

.skills-icon:hover {
   transform: translateY(-1px);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
   .skills-track {
      animation: none;
   }
}
/* Pausar el marquee cuando el cursor está encima del carrusel */
.skills-slider:hover .skills-track {
   animation-play-state: paused;
}