/* ============== CSS Custom Properties for Hero Gradient ============== */
:root{
  --g1:#5433FF; /* color 1 */
  --g2:#C33764; /* color 2 */
  --g3:#1140fb; /* color 3 */
}

/* Global */
body{
    font-family:'Inter',sans-serif;
    cursor:url('project/Cursor.svg') 4 0, auto;
    background-color: #F8F8FF;
    font-family:"Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
    color:#333333;
}

/* ===== Hero Gradient Text ===== */
.gradient-text{
    font-weight:700;
    background-size:300% 100%;
    background-image:linear-gradient(90deg,var(--g1),var(--g2),var(--g3));
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    animation:gradientShift 6s ease infinite;
    text-transform: uppercase;
}
@keyframes gradientShift{
    0%{background-position:0% 50%;}
    50%{background-position:100% 50%;}
    100%{background-position:0% 50%;}
}

/* ===== Work Item Card ===== */
.work-item .ratio{
    background-size:cover;
    background-position:center;
    /* transition:transform .1s cubic-bezier(.25,.46,.45,.94),box-shadow .1s; */
}
.work-item:focus .ratio,
.work-item:hover .ratio{
    transform:scale(1.01);
    /* box-shadow:0 .75rem 1.5rem rgba(0,0,0,.25); */
    box-shadow: rgb(186, 186, 186) 5px 5px 13px inset, rgb(255, 255, 255) -5px -5px 13px inset;
}
.work-item:focus{
    outline:1px solid var(--g3);
    outline-offset:5px;
    border-radius: 4px;
}

/* Modal content constraints */
.modal-body article{
    max-width:900px;
    margin:auto;
    padding:2rem 1rem;
}
.modal-body img{
    /* width:90vw; */
    width: 100%;
    max-width:900px;
    display:block;
    margin:0 auto 2rem auto;
}
header.py-5{
    margin-bottom:0px;
    padding-bottom:0px!important;
}

#featured.py-5{
    margin-top:0px!important;
    padding-top:0px!important;
}

/* Containers */
.work-item span{
    font-weight: 600!important;
}
.work-item .ratio{
    /* border:1px solid #e9e9f7; */
    box-shadow:  5px 5px 19px #dbdbdb,
             -5px -5px 19px #ffffff;
  -webkit-appearance: none;
  -webkit-box-shadow: 5px 5px 19px #dbdbdb,
             -5px -5px 19px #ffffff;
}
h1{
    font-family: "PT Serif", serif;
    font-style: italic;
    font-weight: 400;
    text-transform: none;
    font-size:30px!important;
}
.lead{
    font-size: 60px;
    line-height: 1;
}
a{
    color:var(--g1);
    cursor:url('project/Cursor-Link.svg') 4 0, auto;
}
h2{
    text-align: center;
    font-weight: 700;
}
h4{
    font-size: 20px;
}
.modal h2{
    text-align: left;
}
.container-sm{
    max-width: 1024px!important;
}
p{
    line-height: 2.4em;
}
footer{
    background-color: #eceeff!important;
}


/* === Gradient Scroll Button === */
.gradient-btn {
  width: 50px;
  height: 90px;
  font-size: 2.5rem;
  font-weight: 700;
  border: none;
  border-radius: 5%;
  background-image: linear-gradient(90deg, var(--g1), var(--g2), var(--g3));
  background-size: 300% 100%;
  color: white;
  animation: gradientShift 6s ease infinite;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.gradient-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}


/* Styling for the horizontal scroll section */
#aboutScrollContainer {
  overflow-x: auto;
  overflow-y: hidden;
  /* Hides the scrollbar */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none;  /* Internet Explorer 10+ */
}

#aboutScrollContainer::-webkit-scrollbar {
  display: none; /* Safari and Chrome */
}

.story-item {
  flex: 0 0 400px; /* Each item will be 400px wide and won't shrink/grow */
  padding:2rem 0rem ;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: left;
  border-right: 0px solid #eee; /* Optional separator */
}

.story-item img {
  max-width: 100%;
  height: auto;
  margin-bottom: 1.5rem;
}

.story-content h4 {
  font-weight: 700;
  color: #333;
}

.story-content p {
  color: #555;
  font-size: 1rem;
  line-height: 2;
  padding:0px 20px;
}

/* --- Fade-in Animation Classes --- */

/* Initial state: element is invisible and slightly moved down */
.fade-in-element {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1.6s ease-out, transform 0.6s ease-out;
}

/* Final state: element is fully visible and in its original position */
.fade-in-element.is-visible {
  opacity: 1;
  transform: translateY(0);
}