/* ==========================================================================
   about.css — Sticky background with scrolling content track
   The bokeh background is pinned (never moves).
   The .about-track is 300vh tall and scrolls naturally inside the sticky
   viewport — texts are at fixed positions in the track and never fade.
   As you scroll, the track moves up revealing new rows while old ones
   scroll out the top. No opacity animations.
   ========================================================================== */

.about-section {
  position: relative;
  height: 300vh;
  background: var(--black);
  color: var(--white);
}

/* ── Sticky stage: pinned to viewport, background stays fixed inside ── */
.about-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  overflow: hidden;
}

/* ── Fixed bokeh background (never scrolls) ── */
.about-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url('https://framerusercontent.com/images/K2BxDYIucnlvMskKxMYEgh9eAWY.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: saturate(1.25) contrast(1.05) hue-rotate(-3deg);
  transform: scale(1.05);
}

.about-vignette {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center, transparent 0%, rgba(13, 13, 13, 0.45) 70%, rgba(13, 13, 13, 0.8) 100%),
    linear-gradient(180deg, rgba(13, 13, 13, 0.35) 0%, rgba(13, 13, 13, 0.55) 50%, rgba(13, 13, 13, 0.75) 100%);
}

/* ── Track: 300vh tall, translated up by JS based on scroll progress ── */
.about-track {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  height: 300vh;
  padding: 0 var(--gutter);
  will-change: transform;
}

/* ── Each row is exactly 100vh, stacked vertically ── */
.about-row {
  position: relative;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
}

/* ── Character-by-character typing effect for headlines ── */
.about-headline {
  position: relative;
}

.about-line {
  display: block;
  overflow: hidden;
  /* Each line is a block, chars inside are inline */
}

.about-line .char {
  display: inline-block;
  opacity: 0;
  transform: translate3d(0, 0.5em, 0);
  transition:
    opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform, opacity;
}

/* When the row becomes visible, chars type in with stagger */
.about-row.is-visible .about-line .char {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition-delay: calc(var(--line-delay, 0ms) + var(--char-i, 0) * 32ms);
}

/* ── Blinking caret at the end of the headline ── */
.about-caret {
  display: inline-block;
  width: 0.06em;
  height: 0.82em;
  background: currentColor;
  margin-left: 0.06em;
  vertical-align: baseline;
  position: relative;
  top: 0.08em;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.about-row.is-visible .about-caret {
  opacity: 1;
  animation: caret-blink 1.05s step-end infinite;
  /* Caret appears after the last char is typed */
  animation-delay: calc(var(--line-delay, 0ms) + var(--char-i, 0) * 32ms + 200ms);
}

@keyframes caret-blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

.about-row--top-left {
  justify-content: flex-start;
  text-align: left;
}

.about-row--bottom-right {
  justify-content: flex-end;
  text-align: right;
}

.about-row--center {
  justify-content: center;
  align-items: center;
}

/* ── Huge headline text ── */
.about-headline {
  font-family: var(--display);
  font-size: clamp(64px, 12vw, 180px);
  font-weight: 900;
  letter-spacing: -0.05em;
  line-height: 0.88;
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.about-line {
  display: block;
}

.about-line--red { color: var(--red); }
.about-line--white { color: var(--white); }

/* ── Middle content (last row) — stats, play reel, description ── */
.about-middle-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 60px;
  align-items: center;
  width: 100%;
  max-width: 1100px;
}

.about-visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translate3d(0, 60px, 0) scale(0.88);
  transition:
    opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: 0.1s;
}

.about-row.is-visible .about-visual {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

.about-play {
  position: relative;
  width: clamp(180px, 22vw, 240px);
  aspect-ratio: 16/9;
  border-radius: 50%/40%;
  overflow: hidden;
  background: var(--text);
  display: grid;
  place-items: center;
  cursor: pointer;
  border: none;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
  transition: transform 0.4s var(--ease);
}

.about-play:hover { transform: scale(1.04); }

.about-play::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('https://framerusercontent.com/images/HhbqgYv2UOsfZ8hEm0HUAmzCqw.jpg?width=400');
  background-size: cover;
  background-position: center;
  opacity: 0.55;
}

.about-play-text {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--white);
  text-transform: uppercase;
}

.about-play-text::after {
  content: '';
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--white);
  display: grid;
  place-items: center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5v14l11-7z' fill='%23000'/%3E%3C/svg%3E");
  background-size: 14px;
  background-repeat: no-repeat;
  background-position: center;
}

.about-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-bottom: 28px;
  width: 100%;
}

.stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  opacity: 0;
  transform: translate3d(0, 35px, 0);
  transition:
    opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(0.35s + var(--stat-i, 0) * 0.14s);
}

.about-row.is-visible .stat {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.stat-num {
  font-family: var(--display);
  font-size: clamp(32px, 3.5vw, 48px);
  font-weight: 700;
  color: var(--white);
  line-height: 1;
  letter-spacing: -0.04em;
}

.stat-num em {
  color: var(--red);
  font-style: italic;
  font-weight: 700;
}

.stat-label {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
  font-weight: 500;
  letter-spacing: 0.02em;
}

.about-desc {
  font-size: 15px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.7);
  max-width: 620px;
  opacity: 0;
  transform: translate3d(0, 25px, 0);
  transition:
    opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.8s,
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.8s;
}

.about-row.is-visible .about-desc {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* ── Responsive ── */
@media (max-width: 1024px) {
  .about-section { height: 280vh; }
  .about-track { height: 280vh; }
  .about-middle-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .about-visual { order: -1; }
  .about-headline { font-size: clamp(48px, 12vw, 100px); }
}

@media (max-width: 640px) {
  .about-section { height: auto; min-height: 260vh; }
  .about-track { height: auto; min-height: 260vh; }
  .about-row--top-left,
  .about-row--bottom-right {
    justify-content: center;
    text-align: center;
  }
  .about-headline { font-size: clamp(36px, 12vw, 60px); }
  .about-stats { grid-template-columns: 1fr; gap: 16px; }
  .about-middle-text { text-align: center; }
  .about-desc { font-size: 14px; }
}

@media (max-width: 400px) {
  .about-headline { font-size: clamp(28px, 10vw, 40px); }
}