/* Back link
   ========================================================================== */

.back-link__icon {
  display: inline-block;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask-image: url('/assets/img/icons/left.svg');
  mask-image: url('/assets/img/icons/left.svg');
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

/* Cursor
   ========================================================================== */
   /* Ocultar cursor nativo en todo el sitio (solo desktop) */
   @media (hover: hover) and (pointer: fine) {
     * {
       cursor: none !important;
     }
     
     .custom-cursor {
       display: flex;
     }
   }
   
   /* Ocultar custom cursor en dispositivos táctiles */
   @media (hover: none) or (pointer: coarse) {
     .custom-cursor {
       display: none !important;
     }
   }
   
   /* Cursor personalizado - Estado por defecto (14x14) */
   .custom-cursor {
     position: fixed;
     top: 0;
     left: 0;
     width: 14px;
     height: 14px;
     background: var(--pure-black);
     border-radius: 50%;
     pointer-events: none;
     z-index: 9999;
     display: flex;
     align-items: center;
     justify-content: center;
     visibility: visible;
     opacity: 0; /* Empieza invisible, JS lo muestra al mover mouse */
     transition: width 0.3s ease, height 0.3s ease, background 0.0s ease, mix-blend-mode 0.3s ease;
     mix-blend-mode: normal;
   }
   
   
   
   /* Estado en enlaces (48x48 con efecto inversión) */
   .custom-cursor.on-link {
     width: 48px;
     height: 48px;
     background: var(--white);
     mix-blend-mode: difference;
   }
   
   /* Estado en project-card (90x90 con texto) */
   .custom-cursor.on-project {
     width: 120px;
     height: 120px;
     background: linear-gradient(180deg, #000000e0 10%, #000000b3);
     backdrop-filter: blur(6px);
     -webkit-backdrop-filter: blur(6px);
     mix-blend-mode: darken;
     outline-color:color-mix(in oklab, #0303021f 50%, transparent);
     box-shadow: 0 0 #0000, 0 0 #0000, 0 0 #0000, 0 0 #0000, 0 12px 12px 2px #0000001a, 0 2px 4px -1px #0000000f;
   }

   
   
   /* Texto del cursor (solo visible en project-card) */
   .cursor-text {
     color: white;
     font-size: 20px;
     font-weight: 500;
     text-align: center;
     user-select: none;
     opacity: 0;
     transition: opacity 0.3s ease;
   }
   
   .custom-cursor.on-project .cursor-text {
     opacity: 1;
   }


/* Branding
   ========================================================================== */
p {
  font-size: clamp(var(--text-lg),  1.033rem + 0.393vw, var(--text-2xl));
  color: var(--pure-black);
  font-weight: var(--font-normal);
  line-height: var(--leading-normal);
  line-break: strict;
  word-break: keep-all;
}

h1, h2, h3, h4, h5 {
  color: var(--pure-black);
  line-break: strict;
  word-break: keep-all;
}

h1, h2, h3 {
  font-family: var(--display);
  font-weight: var(--font-normal);
  line-break: strict;
  word-break: keep-all;
}

html, body, p, li, a, * {
    font-family: var(--text);
    font-weight: var(--font-normal);
}



/* Marquee
   ========================================================================== */

.marquee-overlay-wrapper {
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
}


.marquee-overlay {
  display: inline-flex; /* dos spans en fila */
  animation: marquee-overlay-left 20s linear infinite;
}

.marquee-overlay span {
  padding-right: 1rem; /* espacio entre repeticiones */
}

@keyframes marquee-overlay-left {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Toast
   ========================================================================== */

.toast {
  position: fixed;
  left: 50%;
  bottom: var(--space-10);              /* ajusta si usas otro token */
  transform: translateX(-50%) translateY(150%);
  opacity: 0;
  pointer-events: none;
  z-index: 9999;
  transition: opacity 0.25s ease-out, transform 0.25s ease-out;
}

.toast.is-visible {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}


/* Transition & Effect Utilities
   ========================================================================== */

.fade {
  transition: all 300ms linear 700ms;
  -webkit-transform: translate3d(0,0,0);
  -moz-transform: translate3d(0,0,0);
  -ms-transform: translate3d(0,0,0);
  -o-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
  opacity: 1;
}

.effect {
  transform: skew(0deg);
  transition: transform .93s cubic-bezier(.165,.84,.44,1),
              opacity .93s cubic-bezier(.165,.84,.44,1);
  transition-behavior: normal, normal;
  transition-duration: 0.65s, 0.65s;
  transition-timing-function: cubic-bezier(0.165, 0.84, 0.2, 1),
                              cubic-bezier(0.165, 0.84, 0.2, 1);
  transition-delay: 0s, 0s;
  transition-property: transform, opacity;
}

.effect:hover {
  transform: skew(.82deg, .82deg);
}

.effect.project-card:hover {
    opacity: .75;
}

.split {
  opacity: 0;
  contain: layout style paint;
  content-visibility: auto;
}

.split * {
  will-change: transform;
  font-family: var(--display);
  font-weight: var(--font-normal);
}

p.split * {
  font-family: var(--text);
  font-weight: var(--font-normal);
}

.home .split * {
  font-weight: var(--font-medium);
}

.line {
  transform: translateZ(0);
  will-change: transform;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.split-container {
  contain: layout;
  isolation: isolate;
}

[data-gsap] {
  will-change: transform, opacity;
}

.animation-complete {
  will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
  .split,
  .line,
  [data-gsap] {
    will-change: auto;
    animation: none !important;
    transition: none !important;
  }
}


/* Link
   ========================================================================== */

a.link,
button.link {
    -webkit-transition: .1s color linear;
    transition: .1s color linear;
}

button.link {
    position: relative;
}

a.link:hover,
button.link:hover {
    color: var(--pure-black);
}

a.link:before,
button.link:before {
    content: "";
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -4px;
    left: 0;
    margin-top: 0px;
    background-color: var(--pure-black);
    -webkit-transition: all .2s cubic-bezier(.615,.19,.305,.91);
    transition: all .2s cubic-bezier(.615,.19,.305,.91);
    -webkit-transition-timing-function: cubic-bezier(.615,.19,.305,.91);
    transition-timing-function: cubic-bezier(.615,.19,.305,.91);
}

a.link:hover:before,
button.link:hover:before {
    width: 99%;
}

a.link.active:hover:before,
button.link.active:hover:before {
    width: 99%;
}


/* FOOTER
   ========================================================================== */

.contact, .contact #content-smoother {min-height: 100vh;}

#footer-wrapper {
  position: absolute;
  bottom: 96px;
  z-index: 1;
}

.theme-dark #footer-wrapper {
  
}

/* LOGO CARRUSEL */

/* ====== BASE ====== */
.wordCarousel {
  position: relative;
  color: var(--pure-black, #101010);
  display: inline-block;
  height: 26px;
}

/* Ventana que recorta la lista vertical */
.wordCarousel > .-words {
  overflow: hidden;
  position: relative;
  height: 70px;        /* alto visible */
  padding-top: 10px;
  margin-top: -10px;
  float: right;
}

/* Cada ítem ocupa 45px de alto + 45px separación */
.wordCarousel li {
  height: 45px;
  margin-bottom: 45px;
  display: block;
  will-change: margin-top;
}

/* “Cortina” opcional */
.wordCarousel::after {
  content: "";
  position: absolute;
  top: 24px;
  width: 150px;
  height: 50px;
  pointer-events: none;
}




/* ====== ESTADO INICIAL ====== */
.flip16 {
  margin-top: -1440px;   /* 16 * 90px */
  animation: none;
}

/* ====== ANIMACIÓN ====== */
.wordCarousel:hover .flip16 { 
  animation: flip16 24s cubic-bezier(0.23, 1, 0.32, 1.2) forwards; 
}

@keyframes flip16 {
  0%   { margin-top: -1440px; }

  2%   { margin-top: -1350px; }   6%   { margin-top: -1350px; }
  8%   { margin-top: -1260px; }   12%  { margin-top: -1260px; }
  14%  { margin-top: -1170px; }   18%  { margin-top: -1170px; }
  20%  { margin-top: -1080px; }   24%  { margin-top: -1080px; }
  26%  { margin-top: -990px;  }   30%  { margin-top: -990px;  }
  32%  { margin-top: -900px;  }   36%  { margin-top: -900px;  }
  38%  { margin-top: -810px;  }   42%  { margin-top: -810px;  }
  44%  { margin-top: -720px;  }   48%  { margin-top: -720px;  }
  50%  { margin-top: -630px;  }   54%  { margin-top: -630px;  }
  56%  { margin-top: -540px;  }   60%  { margin-top: -540px;  }
  62%  { margin-top: -450px;  }   66%  { margin-top: -450px;  }
  68%  { margin-top: -360px;  }   72%  { margin-top: -360px;  }
  74%  { margin-top: -270px;  }   78%  { margin-top: -270px;  }
  80%  { margin-top: -180px;  }   84%  { margin-top: -180px;  }
  86%  { margin-top: -90px;   }   90%  { margin-top: -90px;   }
  92%  { margin-top: 0px;     }   100% { margin-top: 0px;     }
}


/* ====== ACCESIBILIDAD ====== */
@media (prefers-reduced-motion: reduce) {
  .wordCarousel:hover .flip16 {
    animation: none !important;
    margin-top: 0 !important;
  }
}