/* ==========================================================================
   LP02 · UNIT 4 · KEEP THE CLIENT RELATIONSHIP — exploded 3D layers
   --------------------------------------------------------------------------
   Visual idea: from the front you only see the advisor with the client;
   scroll, and the stack tilts and separates to reveal what stands BEHIND
   that relationship — the Fatorly e-invoicing platform, onboarding path
   and support.
   • One custom property, --p (0 → 1), drives everything: tilt, layer gap,
     label opacity. rel.js writes it from a LIVE getBoundingClientRect()
     reading (smoothed with gsap.quickTo). Default --p: 1 = static
     fallback (fully exploded, everything readable).
   • Pinning is pure CSS sticky (CLAUDE.md §5 Resilient Pinning):
       desktop — the copy column AND the 3D stage stick side by side;
       mobile  — the copy scrolls normally, only the 3D stage pins.
   • The three sentences "light up" in turn as the layers separate.
   ========================================================================== */

.rel {
  --p: 1;
  background: linear-gradient(180deg, var(--c-white) 0%, #EAF5F7 100%);
}

.rel__decor {
  background:
    radial-gradient(ellipse 45% 50% at 75% 55%, rgba(0, 169, 182, 0.14), transparent 70%),
    radial-gradient(ellipse 35% 40% at 5% 10%, rgba(1, 62, 106, 0.05), transparent 70%);
}

[dir="rtl"] .rel__decor {
  scale: -1 1;
}

.rel__layout {
  display: grid;
  gap: clamp(2rem, 5vw, 3rem);
}

@media (min-width: 48rem) {
  .rel__layout {
    grid-template-columns: 0.85fr 1.15fr;
    gap: clamp(2rem, 4vw, 4rem);
  }
}

/* ---------------------------------------------------------------------------
   Copy column
   --------------------------------------------------------------------------- */
.rel__copy {
  display: grid;
  gap: var(--space-lg);
  align-content: start;
  justify-items: center;
  text-align: center;
}

@media (min-width: 48rem) {
  .rel__copy {
    justify-items: start;
    text-align: start;
    align-self: start;
  }

  .rel.is-scrolly .rel__copy {
    position: sticky;
    inset-block-start: calc(var(--header-h) + 14vh);
  }
}

.rel__lines {
  display: grid;
  gap: var(--space-md);
  max-inline-size: 30rem;
  text-align: start;
}

/* Each sentence: unlit = slate (AA), lit = ink with a teal rule */
.rel__line {
  position: relative;
  padding-inline-start: var(--space-md);
  color: var(--c-slate);
  transition: color 0.45s var(--ease-out);
}

.rel__line::before {
  content: "";
  position: absolute;
  inset-block: 0.3em;
  inset-inline-start: 0;
  inline-size: 3px;
  border-radius: var(--r-pill);
  background-color: var(--c-teal);
  transform: scaleY(0);
  transform-origin: 50% 0%;
  transition: transform 0.45s var(--ease-out);
}

.rel__line.is-lit,
.rel:not(.is-scrolly) .rel__line {
  color: var(--c-ink);
}

.rel__line.is-lit::before,
.rel:not(.is-scrolly) .rel__line::before {
  transform: scaleY(1);
}

.rel__line--key {
  font-family: var(--ff-display);
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: var(--lh-tight);
}

/* ---------------------------------------------------------------------------
   Track + sticky 3D stage
   --------------------------------------------------------------------------- */
.rel__track {
  position: relative;
}

/* No overflow clipping here: when exploded, the deeper layers project
   downward and must stay fully visible. The stack is sized so its
   projection fits the stage (and `main` keeps a sticky-safe x-clip). */
.rel__stage {
  display: grid;
  place-items: center;
  min-block-size: 30rem;
  perspective: 1600px;
}

.rel.is-scrolly .rel__track {
  block-size: 240vh;
}

.rel.is-scrolly .rel__stage {
  position: sticky;
  inset-block-start: var(--header-h);
  block-size: calc(100svh - var(--header-h));
}

/* The stack: tilts from front-on (p = 0) to isometric (p = 1) */
.layers {
  --tilt-z: -32deg;

  position: relative;
  inline-size: min(76%, 22rem);
  aspect-ratio: 4 / 3;
  transform-style: preserve-3d;
  /* As the layers separate they project downward (≈ 3 × 4.25rem × sin 56°),
     so the whole stack is lifted by the same amount to stay centred. */
  transform:
    translateY(calc(var(--p) * -5.5rem))
    rotateX(calc(var(--p) * 56deg))
    rotateZ(calc(var(--p) * var(--tilt-z)));
}

[dir="rtl"] .layers {
  --tilt-z: 32deg;
}

/* Every layer sits in the same spot; --z pushes it back as --p grows */
.layer {
  position: absolute;
  inset: 0;
  border-radius: 20px;
  transform: translateZ(calc(var(--z) * (-2px - var(--p) * 4.25rem)));
  backface-visibility: hidden;
}

/* Front: the advisor with the client */
.layer--you {
  overflow: hidden;
  border: 3px solid var(--c-white);
  box-shadow: 0 30px 60px -20px rgba(2, 17, 58, 0.45);
}

.layer--you img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.layer__tags {
  position: absolute;
  inset-block-end: 0.75rem;
  inset-inline-start: 0.75rem;
  display: flex;
  gap: 0.375rem;
}

.layer__tag {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding-block: 0.3rem;
  padding-inline: 0.625rem;
  border-radius: var(--r-pill);
  background-color: var(--c-white);
  color: var(--c-ink);
  font-size: 0.75rem;
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}

.layer__tag svg {
  inline-size: 0.875rem;
  block-size: 0.875rem;
  color: var(--c-deep-teal);
}

/* Fatorly layers behind */
.layer--fatorly {
  display: flex;
  align-items: flex-end;
  padding: 0.875rem;
  border: 1px solid rgba(0, 169, 182, 0.55);
  background:
    radial-gradient(ellipse 80% 80% at 100% 0%, rgba(0, 169, 182, 0.35), transparent 70%),
    rgba(2, 17, 58, var(--alpha, 0.92));
  box-shadow: 0 20px 40px -24px rgba(2, 17, 58, 0.6);
}

.layer--fatorly:nth-child(3) { --alpha: 0.86; }
.layer--fatorly:nth-child(4) { --alpha: 0.8; }

/* Edge "rails" — fine lines that read as stacked hardware */
.layer--fatorly::before {
  content: "";
  position: absolute;
  inset-block-start: 0.875rem;
  inset-inline: 0.875rem;
  block-size: 2px;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--c-teal), transparent);
  opacity: 0.6;
}

.layer__label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding-block: 0.4rem;
  padding-inline: 0.5rem 0.75rem;
  border-radius: var(--r-pill);
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--c-on-dark);
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
  opacity: clamp(0, calc(var(--p) * 2 - 0.6), 1);
}

.layer__label svg {
  inline-size: 1rem;
  block-size: 1rem;
  color: var(--c-teal);
}

.layer__mark {
  position: absolute;
  inset-block-start: 1.5rem;
  inset-inline-end: 0.875rem;
  inline-size: 2rem;
  block-size: 2rem;
  padding: 0.25rem;
  border-radius: 8px;
  background-color: var(--c-white);
}

/* Soft floor shadow under the stack */
.layers__floor {
  position: absolute;
  inset: 8% -6% -14% -6%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(2, 17, 58, 0.22), transparent 65%);
  transform: translateZ(calc(-3 * (2px + var(--p) * 4.25rem) - 2rem));
  filter: blur(6px);
}

/* Mobile: a slightly smaller stack and a shorter lift */
@media (max-width: 47.99rem) {
  .layers {
    inline-size: min(70%, 17rem);
    transform:
      translateY(calc(var(--p) * -4.5rem))
      rotateX(calc(var(--p) * 56deg))
      rotateZ(calc(var(--p) * var(--tilt-z)));
  }
}