/* GLOBAL ANIMATION */
.fly-in, .left-in, .right-in,
.fly-in-slow, .left-in-slow, .right-in-slow {
  opacity: 0;
  transition: opacity 1s cubic-bezier(0.25, 1, 0.5, 1),
              transform 1s cubic-bezier(0.25, 1, 0.5, 1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

/* SLOW variants override transition duration */
.fly-in-slow, .left-in-slow, .right-in-slow {
  transition-duration: 2s;
}

/* Entry transforms (initial state) */
.fly-in, .fly-in-slow {
  transform: translate3d(0, 40px, 0);
}
.left-in, .left-in-slow {
  transform: translate3d(-40px, 0, 0);
}
.right-in, .right-in-slow {
  transform: translate3d(40px, 0, 0);
}

/* Final state when animated in */
.animate-in {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}



/* Global rise animation */
@keyframes rise-from-baseline {
    0% {
        transform: scaleY(0);
        transform-origin: bottom;
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: scaleY(1);
        transform-origin: bottom;
        opacity: 1;
    }
}

.rise span {
    display: inline-block;
    opacity: 0;
    transform: scaleY(0);
    transform-origin: bottom;
    overflow: hidden;
    animation: rise-from-baseline 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards paused;
}

.rise.visible span {
    animation-play-state: running;
}






/* Global slide-up animation */
@keyframes slide-up {
    0% {
        transform: translateY(100%);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}
.sliding-up {
    display: inline-block;
}
.sliding-up span {
    display: inline-block;
    opacity: 0;
    transform: translateY(100%);
    overflow: hidden; 
    animation: slide-up 0.5s ease-out forwards paused;
}

.sliding-up.visible span {
    animation-play-state: running;
}




.text-container {
  overflow: hidden;
}

.text-line {
  display: block;
  transform: translateY(100%);
  opacity: 0;
}

/* Only animate when class is added */
.text-line.animate {
  animation: slideUpWithFade 1.2s ease forwards;
}

@keyframes slideUpWithFade {
  from {
    transform: translateY(400%) rotateZ(12deg);
    opacity: .5;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}



 .clipp-section {
  height: 100vh;
  background: white;      /* default = light mode */
  color: #000;            /* readable on white */
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
  clip-path: inset(100% 0% 0% 0%);
}

/* Dark mode instance */
@media (prefers-color-scheme: dark) {
  .clipp-section {
    background: #242424;  /* dark background */
    color: #fff;          /* white text */
  }
}


/* IMAGE*/
/* Base: tilt disabled by default (mobile) */
.card-container {
  transform: none;
  transition: transform 0.3s ease; /* Reduced time for faster transition */
  will-change: transform;
  perspective: 1000px;
}

/* Enable tilt on larger screens only */
@media (min-width: 768px) {
  .card-container.tilt-hover {
    transition: transform 0.3s ease; /* Transition on hover */
  }

  .card-container.tilt-hover:hover {
    transform: rotate3d(1, 1, 0, 5deg) scale(0.97); /* Tilt and shrink on hover */
  }
}

/* IMAGE ZOOM EFFECT */
.zoom img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease; /* for zoom-in on hover */
  will-change: transform;
}

.zoom:hover img {
  transform: scale(1.2); /* Zoom-in on hover */
}

/* TEXT-UNDERLINES – Light mode by default */
.underlines {
  position: relative;
  display: inline;
  color: inherit;
  padding-bottom: 2px;
  background-image: linear-gradient(#fff, #fff); /* Light mode: white underline */
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0% 2px;
  transition: background-size 0.4s ease;
}

.underlines:hover {
  background-size: 100% 2px;
}

/* DARK MODE: black underline */
@media (prefers-color-scheme: dark) {
  .underlines {
    background-image: linear-gradient(#ff7b00, #ff7b00); /* Dark mode: black underline */
  }
}






#carouselCards {
  display: flex;
  overflow-x: auto;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory; /* Optional for snapping */
  gap: 24px;
  cursor: grab;
}

#carouselCards > * {
  scroll-snap-align: center; /* Optional for snapping */
  flex-shrink: 0; /* Prevent card shrinking */
}

#prevArrow:disabled,
#nextArrow:disabled {
  opacity: 0.4;
  transition: opacity 0.3s ease;
}

#prevArrow,
#nextArrow {
  transition: opacity 0.3s ease;
}

/* Base Styles for Card */
.card-containers {
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
  width: 85%; /* Or whatever your default width is */
  max-width: 300px; /* Limit max width if needed */
}

/* Desktop Hover Effect: Shrinks the card */
.group:hover .card-containers {
  transform: none; /* No shrink or resize on hover */
}

/* Mobile and Tablet Adjustments: Always show hovered form */
@media (max-width: 768px) {
  .group .absolute {
    opacity: 1 !important;
    display: block !important;
  }

  .card-containers {
    transform: none !important;
    width: 100% !important; /* Keep the width at full size */
    max-width: 300px !important; /* Maintain the max-width limit */
  }

  /* Adjust positions for mobile/tablet */
  .absolute.top-4.left-4 {
    top: 8px;
    left: 8px;
  }

  .absolute.top-4.right-4 {
    top: 8px;
    right: 8px;
  }

  .absolute.bottom-4.left-4 {
    bottom: 16px;
    left: 16px;
  }
}

/* Hover effects for Desktop */
.group:hover .absolute {
  opacity: 1 !important;
}