:root {
  --mobile-primary: #000000;
  --mobile-cover-timing: 0.5s;
  --mobile-cover-ease: cubic-bezier(0.66, 0.08, 0.19, 0.97);
  --mobile-cover-stagger: 0.15s;
  --mobile-text-timing: 0.75s;
  --mobile-text-stagger: 0.015s;
  --mobile-text-ease: cubic-bezier(0.38, 0.26, 0.05, 1.07);
  --mobile-title-stagger: 0.05s;
  --mobile-highlight: white;
}

/* Mobile Carousel Wrapper */
.mobile-carousel-wrapper {
  position: relative;
  width: min(85vw, 20rem);
  height: min(85vh, 24rem);
  perspective: 500px;
  transform-style: preserve-3d;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Mobile Card Item (replaces old card container) */
.mobile-card-item {
  position: absolute;
  width: 100%;
  /* background-color: rgba(255, 68, 0, 0.256); */
  /* height: 100%; */
  transform: rotateY(calc(var(--mobile-offset) * 50deg))
    scaleY(calc(1 + var(--mobile-abs-offset) * -0.4))
    translateZ(calc(var(--mobile-abs-offset) * -30rem))
    translateX(calc(var(--mobile-direction) * -5rem));
  filter: blur(calc(var(--mobile-abs-offset) * 1rem));
  transition: all 0.3s ease-out;
  opacity: var(--mobile-opacity);
}

/* Metal Card Styles */
.mobile-metal-card {
  position: relative;
  width: 100%;
  height: 100%;
  aspect-ratio: 1080/1920;
  perspective: 1000px;
  transform: scale(0.7);
}

.mobile-metal-card__cover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 20px;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  transform-style: preserve-3d;
  transform-origin: center center;
  border: 2px solid rgba(0, 0, 0);
  transition: transform 0.35s ease-in-out,
    box-shadow 1s var(--mobile-cover-ease), border 0.35s ease-in-out;
  box-shadow: rgba(255, 255, 255, 0.3) 0 5vw 6vw -8vw,
    rgba(255, 255, 255, 0) 0 4.5vw 5vw -6vw,
    rgba(50, 50, 80, 0.5) 0px 4vw 8vw -2vw, rgba(0, 0, 0, 0.8) 0px 4vw 5vw -3vw;
  z-index: 1;
}

/* Gloss effect */
.mobile-metal-card__cover::after {
  content: "";
  position: absolute;
  z-index: 100;
  top: 0;
  left: 0;
  width: 100%;
  height: 120%;
  background: linear-gradient(
    226deg,
    rgba(255, 255, 255, 0.3) 0%,
    rgba(255, 255, 255, 0.2) 35%,
    rgba(255, 255, 255, 0.1) 42%,
    rgba(255, 255, 255, 0) 60%
  );
  transform: translateY(-20%);
  transition: transform 0.65s cubic-bezier(0.18, 0.9, 0.58, 1);
  border-radius: 12px;
  pointer-events: none;
}

/* Text overlay */
.mobile-metal-card__cover::before {
  content: "";
  position: absolute;
  z-index: 10;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  transform-origin: left;
  transform: scaleX(0);
  transition: all var(--mobile-cover-timing) var(--mobile-cover-ease);
  border-radius: 12px;
}

/* Text content */
.mobile-text {
  position: absolute;
  z-index: 50;
  inset: 20px;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  width: 90%;
  color: white;
}

.mobile-text h2 {
  font-size: clamp(25px, 3.5vw, 30px);
  font-weight: 800;
  margin-bottom: 0.2em;
  margin-top: 0;
  font-family: "Montserrat", sans-serif;
  position: absolute;
  top: 50%;
  left: 50%;
  text-align: center;
  text-wrap: balance;
  width: 100%;
  transform: translateX(-50%) translateY(-50%);
}

.mobile-text p {
  font-size: clamp(20px, 1vw, 25px);
  line-height: 2;
  margin: 0.2em 0 0 0;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  font-family: "Montserrat", sans-serif;
  text-align: center;
  text-shadow: 0 0 5px 2px rgb(0, 0, 0);
  transform: translateX(-50%) translateY(-50%);
}

.mobile-text p .mobile-word {
  color: var(--mobile-highlight);
  display: inline-block;
  opacity: 0;
  transform: translateY(50px);
  transition-property: transform, opacity, color;
  transition-timing-function: var(--mobile-text-ease);
  transition-duration: var(--mobile-text-timing), var(--mobile-text-timing),
    calc(var(--mobile-text-timing) * 2);
}

.mobile-text h2 .mobile-char {
  color: var(--mobile-highlight);
  display: inline-block;
  opacity: 1;
  transform: translateY(0px);
  transition-property: transform, opacity, color;
  transition-timing-function: var(--mobile-text-ease);
  transition-duration: var(--mobile-text-timing), var(--mobile-text-timing),
    calc(var(--mobile-text-timing) * 0.5);
  transition-delay: calc(
    0.1s + var(--mobile-char-index) * var(--mobile-title-stagger)
  );
}

.mobile-text img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40%;
  transform: translateX(-50%) translateY(-50%);
  opacity: 0;
  transition: 0.5s ease-in-out;
}

/* Shadow layer */
.mobile-metal-card::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 5%;
  left: 5%;
  width: 90%;
  height: 90%;
  background: rgba(0, 0, 0, 0.5);
  box-shadow: 0 6px 12px 12px rgba(0, 0, 0, 0.4);
  transform-origin: top center;
  transition: transform 0.35s ease-in-out, opacity 0.5s ease-in-out;
  border-radius: 8px;
}

/* Hover states for desktop */
@media (hover: hover) and (pointer: fine) {
  .mobile-metal-card:hover .mobile-metal-card__cover {
    transform: rotateX(15deg) translateY(-8px) translateZ(20px);
    box-shadow: white 0 5vw 6vw -9vw, var(--mobile-highlight) 0 5.5vw 5vw -7.5vw,
      rgba(50, 50, 80, 0.5) 0px 4vw 8vw -2vw, rgba(0, 0, 0, 0.8) 0px 4vw 5vw -3vw;
    border: 2px solid var(--mobile-primary);
    filter: saturate(1.2) brightness(1.5);
    transition: 1s ease-in-out, box-shadow 1s var(--mobile-cover-ease),
      border 0.35s ease-in-out;
  }

  .mobile-metal-card:hover {
    z-index: 100;
  }

  .mobile-metal-card:hover .mobile-metal-card__cover::after {
    transform: translateY(0%);
  }

  .mobile-metal-card:hover .mobile-metal-card__cover::before {
    transform: scaleX(1);
  }

  .mobile-metal-card:hover::before {
    opacity: 0.6;
    transform: rotateX(7deg) translateY(-6px) scale(1.05);
  }

  .mobile-metal-card:hover .mobile-text h2 .mobile-char {
    opacity: 0;
    transform: translateY(-50px);
    color: inherit;
    transition-delay: calc(
      0.1s + var(--mobile-char-index) * var(--mobile-title-stagger)
    );
    user-select: none;
    transition-property: transform, opacity, color;
    transition-timing-function: var(--mobile-text-ease);
    transition-duration: var(--mobile-text-timing), var(--mobile-text-timing),
      calc(var(--mobile-text-timing) * 0.3);
  }

  .mobile-metal-card:hover .mobile-text p .mobile-word {
    opacity: 1;
    transform: translateY(0);
    user-select: none;

    color: inherit;
    transition-delay: calc(
      0.3s + var(--mobile-word-index) * var(--mobile-text-stagger)
    );
  }

  .mobile-metal-card:hover .mobile-text img {
    opacity: 1;
  }
}

/* Touch-active styles (modified - no scale animations) */
.mobile-metal-card.mobile-touch-active .mobile-metal-card__cover {
  transform: rotateY(5deg);
  box-shadow: white 0 5vw 6vw -9vw, var(--mobile-highlight) 0 5.5vw 5vw -7.5vw,
    rgba(50, 50, 80, 0.5) 0px 4vw 8vw -2vw, rgba(0, 0, 0, 0.8) 0px 4vw 5vw -3vw;
  border: 2px solid var(--mobile-primary);
  filter: saturate(1.2) brightness(1.5);
  transition: 1s ease-in-out, box-shadow 1s var(--mobile-cover-ease),
    border 0.35s ease-in-out;
}

.mobile-metal-card.mobile-touch-active {
  z-index: 100;
}

.mobile-metal-card.mobile-touch-active .mobile-metal-card__cover::after {
  transform: translateY(0%);
}

.mobile-metal-card.mobile-touch-active .mobile-metal-card__cover::before {
  transform: scaleX(1);
}

.mobile-metal-card.mobile-touch-active::before {
  opacity: 0.6;
  transform: rotateY(2deg);
}

.mobile-metal-card.mobile-touch-active .mobile-text h2 .mobile-char {
  opacity: 0;
  transform: translateY(-50px);
  color: inherit;
  transition-delay: calc(
    0.1s + var(--mobile-char-index) * var(--mobile-title-stagger)
  );
  transition-property: transform, opacity, color;
  transition-timing-function: var(--mobile-text-ease);
  transition-duration: var(--mobile-text-timing), var(--mobile-text-timing),
    calc(var(--mobile-text-timing) * 0.3);
}

.mobile-metal-card.mobile-touch-active .mobile-text p .mobile-word {
  opacity: 1;
  transform: translateY(0);
  color: inherit;
  transition-delay: calc(
    0.3s + var(--mobile-word-index) * var(--mobile-text-stagger)
  );
}

.mobile-metal-card.mobile-touch-active .mobile-text img {
  opacity: 1;
}

/* Optional: Scroll-based activation styles */
.mobile-metal-card.mobile-scroll-active .mobile-metal-card__cover {
  transform: rotateY(5deg);
  box-shadow: white 0 5vw 6vw -9vw, var(--mobile-highlight) 0 5.5vw 5vw -7.5vw,
    rgba(50, 50, 80, 0.5) 0px 4vw 8vw -2vw, rgba(0, 0, 0, 0.8) 0px 4vw 5vw -3vw;
  border: 2px solid var(--mobile-primary);
  filter: saturate(1.2) brightness(1.5);
  transition: 1s ease-in-out, box-shadow 1s var(--mobile-cover-ease),
    border 0.35s ease-in-out;
}

/* Navigation buttons */
.mobile-nav-button {
  color: var(--primary);
  font-size: 2.5rem;
  position: absolute;
  top: calc(50% - 1.25rem);
  z-index: 100;
  cursor: pointer;
  user-select: none;
  background: rgba(255, 255, 255, 0.2);
  border: none;
  border-radius: 50%;
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
  touch-action: manipulation;
}

.mobile-nav-button:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.1);
}

.mobile-nav-button:active {
  transform: scale(0.95);
  background: rgb(255, 255, 255);
}

.mobile-nav-button i {
  vertical-align: middle;
}

.mobile-nav-left {
  left: -4rem;
}

.mobile-nav-right {
  right: -4rem;
}

/* Mobile-specific optimizations */
@media (max-width: 768px) {
  .mobile-carousel-wrapper {
    width: 90vw;
    height: 70vh;
  }

  .mobile-nav-button {
    font-size: 2rem;
    width: 2.5rem;
    height: 2.5rem;
  }
}

@media (max-width: 480px) {
  .mobile-carousel-wrapper {
    width: 100vw;
    height: 65vh;
  }

  .mobile-nav-left {
    left: 0.25rem;
  }

  .mobile-nav-right {
    right: 0.25rem;
  }
}