@import url('tokens.css');
@import url('tokens-primitives.css');
/* Add minimum height to ensure scrolling */
body {
    min-height: 200vh;
}
#project-section
{
   padding:var(--base-148) 0px;
}
#project-section h1
{
    font-size: var(--base-64);
   font-weight: var(--weight-medium);
   color:var(--neutral-80);
   font-family: var(--type-header);
   line-height: 1;
   text-align: center;
   margin:0;
}
#project
{
   display: flex;
   flex-direction: column;
   gap: var(--base-88);
   align-items: center;
}

#project .content h3
{
   font-family: var(--type-body);
   font-size:var(--base-20);
   font-weight: var(--weight-medium);
   padding-top: var(--space-content-xs);
   margin:var(--base-0);
 line-height:var(--line-loose);   
}
#project .container_project
{
   max-width: var(--container-2xl);
   width: 100%;
}
#project .container_project a
{
display:flex;
flex-direction: row;
align-items: center;
justify-content: center;
background-color: var(--color-background-primary);
border-radius: var(--radius-card);
text-decoration: none;
gap:var(--base-56);
}
#project .container_project a:hover
{
   box-shadow: var(--shadow-xl);
   background-color: var(--color-background-primary);
   border-radius: var(--radius-card);
   cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 16 16"><circle cx="8" cy="8" r="6" fill="black" opacity="0.3"/></svg>'), auto;
} 
#project .container_project a:hover .image-1
{
   border-radius: var(--radius-card) 0px 0px var(--radius-card);
}
#project .container_project a h3, #project .container_project a p
{
   color:var(--color-brand-primary);
   padding-top:var(--space-content-xs); 
     line-height: var(--line-loose);
} 
#project .container_project a
{
    width: 100%;
   max-width: 100%;
   height:584px;
   flex-grow: 4;
}
#project .container_project a .image-1, #project .container_project a .image-2, #project .container_project a .image-3
   {
   border-radius: var(--radius-card);
   background-size: cover;
   width: 100%;
   max-width: 100%;
   height:584px;
   flex-grow: 4;
}
 #project .container_project a .image-1
 {
    background-image:url("../img/case-cover-1.png");
   /* background-image:url("../img/video-case-1.gif");*/
 }
 #project .container_project a .image-2
 {
    background-image:url("../img/case-cover-2.png");
 }
  #project .container_project a .image-3
 {
    background-image:url("../img/case-cover-3.png");
 }
#project .container_project a .content
{
   color:var(--neutral-00);
   padding: var(--base-24) var(--base-16);
   text-align: left;
   max-width: 100%;
   width: 83%;
   flex-shrink: 1;
} 
.container_project a .content h3 {
   text-align: left;
   font-size: var(--base-32);
   color:var(--neutral-80);
   padding-bottom: var(--base-16);
}
.container_project a .content p
{
font-size:var(--base-20);
font-family: var(--font-family-secondary);
   color:var(--color-text-secondary);
   font-weight: var(--weight-light);
   padding-bottom: var(--space-content-sm);
text-align: left;
}  
#project h1
{
   font-size: var(--font-size-5xl);
   font-weight: var(--font-weight-medium);
   color:var(color-text-primary);
   font-family: var(--font-family-primary);
}
   /* Animación más específica y robusta */
#project .move  {
    animation: move linear;
    animation-timeline: view();
  }

@keyframes move {
    0% {
        transform: scale(0.8) translate(0px, 0px);
    }
    30% {
      transform: scale(0.9) translate(0px, 0px);
  }
    60% {
        transform: scale(1) translate(0px, 100px);
    }
    75% {
        transform: scale(0.9) translate(0px, 170px);
    }
    90% {
        transform: scale(0.8) translate(0px, 250px);
    }
    100% {
      transform: scale(0.7) translate(0px, 250px);
  }
}



@media screen and (max-width: 1440px) {
    #project .container_project {
        max-width: 90%;
        width: 100%;
        margin: 48px;
    }
    #project .container_project a img {
        max-width: 484px;
    }
    #project .container_project a .content {
        padding: var(--base-16) var(--base-48);
        text-align: left;
        max-width: 100%;
        width: 100%;
    }
}
@media screen and (max-width: 1024px) {
    #project .container_project {
        max-width: 95%;
        width: 100%;
        margin: 0px;
    }
    #project .container_project a {
        width: 100%;
        max-width: 100%;
    }
    #project .container_project a .image {
        width: 100%;
    }
    #project .container_project {
        max-width: 95%;
    }
    #project .container_project a .content {
        padding: 0px var(--base-24) 0px var(--base-24);
        width: 100%;
        max-width: 100%;
    }
    #project .container_project a .content p {
        width: 100%;
        max-width: 100%;
    }
}
@media screen and (max-width: 992px) {
    #project .container_project a .content {
        padding: var(--base-24) 0px;
        width: 90%;
    }
    #project {
        padding: 0px;
        align-items: center;
    }
    #project .container_project a {
        flex-direction: column;
    }
}

@media screen and (max-width: 800px) {
    #project {
        padding: var(--base-96) 0;
        align-items: center;
    }
}

@media screen and (max-width: 480px) {
    #project h1 {
        font-size: var(--base-48);
    }
}