*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --bg: #fff;
  --fg: #0f0f0e;
  --radius: 22px;
  /* Main frame — centred, leaves space left for thumb TL, right for text */
  --frame-w: 47vw;
  --frame-h: 95vh;
  --frame-left: 27vw; /* offset from left so frame sits centre-right */
  --frame-top: 2.5vh;
  /* Text panel — right of frame */
  --text-right: 6.5vw;
  --text-width: 19vw;
}

/* ── RESPONSIVE ROOT ── */
@media (max-width: 1400px) {
  :root {
    --frame-w: 50vw;
    --frame-left: 25vw;
    --text-right: 5vw;
    --text-width: 20vw;
  }
}
@media (max-width: 1200px) {
  :root {
    --frame-w: 55vw;
    --frame-left: 20vw;
    --text-right: 4vw;
    --text-width: 21vw;
  }
}
@media (max-width: 1000px) {
  :root {
    --frame-w: 60vw;
    --frame-left: 15vw;
    --text-right: 3vw;
    --text-width: 22vw;
  }
}

html {
  scroll-behavior: auto;
}
body {
  /* background: #c04b4b; */
  font-family: "Courier Prime", monospace;
  overflow-x: hidden;
}

.before-space,
.after-space {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
}
.before-space p,
.after-space p {
  font-family: "Courier Prime", monospace;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #888;
}

.scroll-section {
  height: 1200vh;
  position: relative;
}

.stage {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: var(--bg);
}

/* ── Heading ── */
.heading-wrap {
  position: absolute;
  top: 55%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  display: flex;
  justify-content: center;
  z-index: 30;
  pointer-events: none;
  /* OPT: bỏ will-change — GSAP tự promote khi scrub bắt đầu */
}
.heading {
  font-size: clamp(4rem, 5vw, 9rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--fg);
  white-space: nowrap;
  transform: scale(0.08);
  transform-origin: center center;
  /* OPT: bỏ will-change: color — color không GPU-accelerated, vô nghĩa
     Chỉ giữ transform vì GSAP animate scale/y trên element này */
  will-change: transform;
}

/* ── Nav ── */
.nav-labels {
  position: absolute;
  bottom: 2.4rem;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  padding: 0 3vw;
  z-index: 20;
  pointer-events: none;
}
.nav-labels span {
  font-family: "Courier Prime", monospace;
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg);
  opacity: 0.5;
}

/* ── Main image frame ── */
.main-frame {
  position: absolute;
  width: var(--frame-w);
  height: var(--frame-h);
  left: var(--frame-left);
  top: var(--frame-top);
  transform: translateY(110%);
  transform-origin: bottom center;
  border-radius: var(--radius);
  overflow: hidden;
  opacity: 0;
  z-index: 5;
  /* OPT: bỏ will-change thường trực — 5 frames × 2 GPU layers = 10 layers idle
     GSAP tự promote khi tween bắt đầu, tự cleanup khi xong */
}
.main-frame .img-inner {
  width: 100%;
  height: 100%;
  transform: scale(1);
  transform-origin: center;
  /* OPT: bỏ will-change — GSAP quản lý */
}
.main-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── Thumb frames ── */
.thumb-frame {
  position: absolute;
  width: 9vw;
  height: 16vh;
  min-width: 100px;
  min-height: 100px;
  border-radius: 16px;
  overflow: hidden;
  opacity: 0;
  z-index: 15;
  /* OPT: bỏ will-change — opacity:0 không visible, GPU layer lãng phí */
}
/* Previous slide → top-left of screen */
.thumb-tl {
  top: 16px;
  left: 16px;
  transform-origin: top left;
}
/* Next slide preview → bottom-right of screen */
.thumb-br {
  bottom: 20px;
  right: 260px;
  transform-origin: bottom right;
}
.thumb-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── RESPONSIVE ── */
@media (max-width: 1400px) {
  .thumb-br {
    right: 200px;
  }
}
@media (max-width: 1200px) {
  .thumb-br {
    right: 120px;
  }
}
@media (max-width: 1000px) {
  .thumb-br {
    right: 80px;
  }
}

/* ── Text panel — right of frame ── */
.text-panel-tech {
  position: absolute;
  right: var(--text-right);
  top: 50%;
  transform: translateY(-50%) translateX(40px);
  width: var(--text-width);
  z-index: 20;
  opacity: 0;
  pointer-events: none;
  /* OPT: bỏ will-change thường trực — GSAP tự promote khi fade/slide */
  background: #000000;
  border-radius: 12px;
  padding: 20px 24px;
}
.text-panel-tech p {
  font-size: clamp(0.9rem, 1.3vw, 1.15rem);
  transform: translateX(-12px);
  font-weight: 700;
  line-height: 1.45;
  color: #fff;
  margin-bottom: 1.4rem;
  letter-spacing: -0.01em;
}
/* .text-panel-tech a {
  font-family: "Courier Prime", monospace;
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #6b1a1a;
  text-decoration: underline;
  text-underline-offset: 4px;
  pointer-events: auto;
  cursor: pointer;
} */