/* ============================================================
   SCROLL-STORY.CSS
   Visual styles for: Strengths story, About animations,
   Contact typographic moment
   ============================================================ */

/* ═══════════════════════════════════════════════════
   STRENGTHS WORD-BEAT SEQUENCE
   Pinned section before the card grid
   ═══════════════════════════════════════════════════ */

.strengths-story {
  position: relative;
  height: 350vh;
}

.strengths-story-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: clip;
  background: var(--color-bg-light);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Progress dots — right edge */
.str-dots {
  position: absolute;
  right: 3vw;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 10;
}

.str-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(50, 64, 79, 0.2);
  transition: background 0.3s, transform 0.3s;
}

.str-dot.is-on {
  background: var(--color-text-on-light);
  transform: scale(1.7);
}

/* Each beat */
.str-beat {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  padding: 0 9vw;
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  pointer-events: none;
}

.str-beat.is-active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.str-beat.is-past {
  opacity: 0;
  transform: translateY(-50px);
}

/* Beat 1 — "Humble." left, thin */
.str-beat--1 { justify-content: flex-start; }
.str-beat--1 .str-word {
  font-family: 'Inter', sans-serif;
  font-size: clamp(4.5rem, 14vw, 15rem);
  font-weight: 300;
  letter-spacing: -0.04em;
  line-height: 0.9;
  color: var(--color-text-on-light);
}

/* Beat 2 — "Technical." centered, outlined */
.str-beat--2 { justify-content: center; }
.str-beat--2 .str-word {
  font-family: 'Inter', sans-serif;
  font-size: clamp(3.5rem, 11vw, 12rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 0.9;
  text-align: center;
  color: transparent;
  -webkit-text-stroke: 2px var(--color-text-on-light);
}

/* Beat 3 — "Curious." right, heavy */
.str-beat--3 { justify-content: flex-end; }
.str-beat--3 .str-word {
  font-family: 'Inter', sans-serif;
  font-size: clamp(4rem, 15vw, 16rem);
  font-weight: 900;
  letter-spacing: -0.05em;
  line-height: 0.88;
  text-align: right;
  color: var(--color-text-on-light);
}

/* Beat body text */
.str-body {
  font-family: 'Geist', sans-serif;
  font-size: clamp(0.85rem, 1.4vw, 1.05rem);
  font-weight: 400;
  line-height: 1.65;
  color: rgba(50, 64, 79, 0.6);
  max-width: 42ch;
  margin-top: 1.4rem;
  transform: translateY(14px);
  opacity: 0;
  transition: transform 0.55s cubic-bezier(0.16,1,0.3,1) 0.2s,
              opacity  0.55s ease 0.2s;
}

.str-beat.is-active .str-body {
  transform: translateY(0);
  opacity: 1;
}

/* Beat sub-label */
.str-label {
  position: absolute;
  bottom: 9vh;
  right: 9vw;
  font-family: 'Geist Mono', monospace;
  font-size: 0.65rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(50,64,79,0.35);
  opacity: 0;
  transition: opacity 0.4s ease 0.35s;
}

.str-beat.is-active .str-label { opacity: 1; }

/* ═══════════════════════════════════════════════════
   ABOUT — TIMELINE DRAW
   ═══════════════════════════════════════════════════ */

/* Replace pseudo-element with real track div */
.experience-list {
  position: relative;
}

.experience-list::before {
  display: none; /* replaced by .timeline-draw-track */
}

/* The drawn line — grows via JS */
.timeline-draw-track {
  position: absolute;
  left: 7px;
  top: 8px;
  width: 2px;
  height: 0%;
  background: linear-gradient(to bottom, var(--color-bg-primary), rgba(13, 46, 41, 0.15));
  border-radius: 100px;
  transition: height 0.06s linear;
  z-index: 0;
}

/* Items start hidden, appear as line reaches them */
.experience-item {
  opacity: 0;
  transform: translateX(-12px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.experience-item.tl-visible {
  opacity: 1;
  transform: translateX(0);
}

/* ═══════════════════════════════════════════════════
   ABOUT — SKILLS SCATTER → LAND
   ═══════════════════════════════════════════════════ */

.about-skill-pill {
  transform: translate(var(--pill-tx, 0px), var(--pill-ty, 0px))
             rotate(var(--pill-rot, 0deg))
             scale(var(--pill-sc, 0.5));
  opacity: 0;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              opacity  0.5s ease;
}

.about-skill-pill.pill-landed {
  transform: translate(0, 0) rotate(0deg) scale(1);
  opacity: 1;
}

/* ═══════════════════════════════════════════════════
   CONTACT — TYPOGRAPHIC BIG MOMENT
   ═══════════════════════════════════════════════════ */

.contact-big-heading {
  text-align: left;
  padding: 12vh 7vw 6vh;
  overflow: hidden;
}

.contact-big-line {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: clamp(4rem, 13vw, 14rem);
  font-weight: 900;
  line-height: 0.92;
  letter-spacing: -0.04em;
  color: var(--color-text-primary);

  /* Start clipped below */
  clip-path: inset(0 0 100% 0);
  transform: translateY(30px);
  transition: clip-path 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform  0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.contact-big-line em {
  font-style: normal;
  color: var(--color-accent-primary);
}

.contact-big-line.line-in {
  clip-path: inset(0 0 0% 0);
  transform: translateY(0);
}

/* Adjust existing header so it sits below the big type */
.contact-section .contact-header {
  display: none; /* big heading replaces it */
}

/* Cards: stagger up from below when section enters view */
.contact-cards {
  transform: translateY(40px);
  opacity: 0;
  transition: transform 0.7s cubic-bezier(0.16,1,0.3,1) 0.3s,
              opacity  0.6s ease 0.3s;
}

.contact-cards.cards-in {
  transform: translateY(0);
  opacity: 1;
}

/* ═══════════════════════════════════════════════════
   ABOUT SECTION — dark editorial treatment
   ═══════════════════════════════════════════════════ */

.about-section {
  position: relative;
}

.about-section .about-header,
.about-section .about-body { position: relative; z-index: 1; }

/* wave connector: strengths → about */
.about-section + .about-section,
.strengths-section + .about-section {
  margin-top: 0;
}

/* ─── RESPONSIVE ─────────────────────────────────── */
@media (max-width: 768px) {
  .str-beat--2 .str-word {
    -webkit-text-stroke: 1.5px var(--color-text-on-light);
  }
  .contact-big-line {
    font-size: clamp(2.8rem, 14vw, 6rem);
  }
}