/* =================================================================
   SPLIT CARD SCROLL — adapted from CodePen mechanic to ХАТАН ТААС tokens.
   Interaction logic lives in split-cards.js (GSAP + Lenis + ScrollTrigger).
   Self-contained: remove this file, split-cards.js and their tags +
   restore the factory-trio block to fully revert.
   ================================================================= */

.sticky.scs {
  position: relative;
  width: 100%;
  height: 100svh;
  padding: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  background: #080a0c;            /* matches factory-trio dark */
  color: #fff;
}

/* keep the original factory background image behind the cards */
.scs-bg { position: absolute; inset: 0; z-index: 0; }
.scs-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.scs-bg__dim {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(8,10,12,.55) 0%, rgba(8,10,12,.15) 50%, rgba(8,10,12,.6) 100%),
    linear-gradient(to bottom, rgba(8,10,12,.30), rgba(8,10,12,.50));
}

.scs .sticky-header {
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}
.scs .sticky-header h1 {
  position: relative;
  text-align: center;
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1.02;
  font-size: clamp(2rem, 4.3vw, 3.7rem);
  color: #fff;
  will-change: transform, opacity;
  transform: translateY(40px);
  opacity: 0;
}

.scs .card-container {
  position: relative;
  z-index: 1;
  width: min(75%, 1100px);
  display: flex;
  gap: 30px;
  perspective: 1000px;
}

.scs .card {
  position: relative;
  flex: 1;
  aspect-ratio: 5 / 7;
  transform-style: preserve-3d;
  transform-origin: center center;
}
.scs .card { border-radius: 20px; }

.scs .card-front,
.scs .card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: inherit;
  overflow: hidden;
}
.scs .card-front img { width: 100%; height: 100%; object-fit: cover; display: block; }

.scs .card-back {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: .9rem;
  transform: rotateY(180deg);
  padding: 2.4rem 2rem;
  color: #fff;
}

.scs .card-back span {
  position: absolute;
  top: 1.6rem;
  left: 1.8rem;
  opacity: 0.45;
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
}
.scs .scs-label {
  font-size: clamp(1.4rem, 2vw, 2rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.05;
}
.scs .scs-text {
  font-size: clamp(.95rem, 1.1vw, 1.1rem);
  line-height: 1.55;
  font-weight: 400;
  color: rgba(255,255,255,.82);
  max-width: 30ch;
}

/* brand palette on the backs (teal accent + graphite, no foreign reds) */
.scs #card-1 .card-back { background: linear-gradient(165deg, #1a8c99 0%, #0e5862 100%); }
.scs #card-2 .card-back { background: linear-gradient(177deg, #20252a 0%, #14171a 100%); }
.scs #card-3 .card-back { background: linear-gradient(165deg, #2f3a3c 0%, #15181a 100%); }

@media (max-width: 999px) {
  .sticky.scs {
    height: max-content;
    padding: 4rem 2rem;
    flex-direction: column;
  }
  .scs .sticky-header {
    position: relative;
    top: 0; left: 0;
    transform: none;
    margin-bottom: 3rem;
  }
  .scs .sticky-header h1 { opacity: 1; transform: none; }

  .scs .card-container {
    width: 100%;
    flex-direction: column;
    gap: 2rem;
    transform: none;
  }
  .scs .card {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    border-radius: 20px !important;
    transform: none !important;
  }
  /* on mobile no flip — show the labelled back face content as a normal card */
  .scs .card-back { position: relative; transform: none; border-radius: 20px; }
  .scs .card-front { display: none; }
}