/* ================= HERO FOTO ================= */
.about-hero {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  height: clamp(650px, calc(100svh - var(--header-h)), 920px);
  padding: clamp(54px, 8vh, 90px) clamp(20px, 4vw, 64px);
  color: var(--ivory);
}
/* Video bersih tanpa gradasi gelap. Desktop: header juga tanpa bayangan di halaman ini */
@media (min-width: 761px) {
  body:has(.about-hero) .site-header.is-scrolled { box-shadow: none; }
}
.about-hero__media {
  position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 50%;
}
.about-hero__media--mobile { display: none; }
/* Ukuran = teks ref "WE ARE JUNE" × 1.5, posisi pas di tengah hero */
.about-hero__title {
  position: relative; z-index: 1; text-align: center;
  font-size: clamp(3.4rem, 6.1vw, 7.5rem); line-height: 1; white-space: nowrap;
  letter-spacing: 0.06em; word-spacing: 0.1em; padding-left: 0.06em;
}

/* ================= JOURNEY ================= */
.journey { position: relative; overflow: hidden; background: var(--sage); color: var(--ivory); padding: clamp(86px, 10vw, 160px) 0 clamp(100px, 12vw, 180px); }
.journey__intro { margin-bottom: clamp(70px, 8vw, 120px); }
.journey__intro h2 { font-size: clamp(3rem, 9.2vw, 9.8rem); line-height: .82; }
/* "JOURNEY" pakai font yang sama persis dengan "THE", cuma warnanya gold */
.journey__intro h2 em {
  color: var(--gold);
  font-family: inherit; font-style: normal; font-weight: inherit; font-stretch: inherit;
  font-size: 1em; letter-spacing: inherit; text-transform: uppercase;
}
.journey__track {
  position: relative; min-height: 820px;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(26px, 4vw, 64px);
}
.journey__line {
  position: absolute; top: 112px; left: calc(50% - 50vw); right: calc(50% - 50vw);
  height: 1px; background: var(--ivory); opacity: .8;
  transform: scaleX(0); transform-origin: left center;
  transition: transform 1.15s var(--ease-soft);
}
.is-drawn .journey__line { transform: scaleX(1); }
.journey-card { position: relative; min-width: 0; }
.journey-card--bottom { padding-top: 86px; }
.journey-card::before { content: ''; position: absolute; top: 30px; left: 0; width: 1px; height: 82px; background: var(--ivory); opacity: .85; }
.journey-card--bottom::before { top: 112px; }
.journey-card__year {
  display: block; height: 112px; padding: 23px 0 0 25px;
  font-family: var(--font-accent); font-style: italic; font-weight: 500;
  font-size: clamp(2rem, 3.2vw, 3.7rem); line-height: 1; color: var(--ivory);
}
.journey-card--bottom .journey-card__year { padding-top: 58px; }
.journey-card__photo { width: min(100%, 250px); aspect-ratio: 1 / 1.12; min-height: 0; margin: 86px 0 30px; outline: 1px solid var(--line-ivory); }
img.journey-card__photo { display: block; height: auto; object-fit: cover; }
.journey-card h3 { width: min(100%, 250px); overflow-wrap: anywhere; font-size: clamp(1.5rem, 2vw, 2.1rem); line-height: 1; margin-bottom: 12px; }
.journey-card p { max-width: 310px; margin: 0; font-size: .98rem; line-height: 1.68; }

html:not(.js) .journey__line { transform: none; }

/* ================= THE MENTORS ================= */
.mentor-feature {
  display: grid; grid-template-columns: 1.08fr .92fr;
  min-height: clamp(460px, 52vw, 720px);
}
.mentor-feature__copy {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  padding: clamp(56px, 8vw, 125px);
  background: var(--sage); color: var(--ivory);
}
.mentor-feature__copy h2 {
  max-width: 11ch;
  font-size: clamp(2.5rem, 4.4vw, 4rem); line-height: .9;
  overflow-wrap: anywhere; text-wrap: balance;
}
.mentor-feature--bert .mentor-feature__copy h2 { max-width: 15ch; font-size: clamp(2.3rem, 3.8vw, 3.6rem); }
.mentor-feature__copy h2 span { color: var(--gold); }
.mentor-feature__description {
  max-width: 46ch; margin: 24px 0 0;
  font-size: clamp(1rem, 1.2vw, 1.125rem); line-height: 1.65;
}
.mentor-feature--rifqyyusuf .mentor-feature__copy {
  background: var(--gold); color: var(--ivory);
}
.mentor-feature--rifqyyusuf .mentor-feature__media { background: var(--gold); }
.mentor-feature--rifqyyusuf .mentor-feature__media::before {
  background:
    radial-gradient(ellipse at 34% 38%, var(--ivory-soft), transparent 22%),
    linear-gradient(145deg, var(--gold), var(--gold));
  opacity: .46;
}
.mentor-feature--bert .mentor-feature__copy {
  background: linear-gradient(115deg, var(--sage) 0%, var(--sage-dark) 48%, var(--gold) 100%);
  color: var(--ivory);
}
.mentor-feature--bert .mentor-feature__media {
  background: linear-gradient(135deg, var(--gold) 0%, var(--ivory) 100%);
}
.mentor-feature--bert .mentor-feature__media::before {
  background:
    radial-gradient(ellipse at 30% 35%, var(--sage) 0%, transparent 30%),
    radial-gradient(ellipse at 72% 65%, var(--gold) 0%, transparent 25%);
  opacity: .34;
}
.mentor-feature__media {
  position: relative; overflow: hidden;
  min-height: 100%; background: var(--sage-dark);
}
.mentor-feature__media::before {
  content: ''; position: absolute; inset: -22%;
  background:
    radial-gradient(ellipse at 30% 35%, var(--ivory-soft), transparent 18%),
    radial-gradient(ellipse at 66% 58%, var(--gold), transparent 24%),
    linear-gradient(145deg, var(--sage-dark), var(--sage));
  opacity: .32; filter: blur(42px); transform: scale(1.08);
}
.mentor-feature__media--two::before {
  background:
    radial-gradient(ellipse at 68% 36%, var(--ivory-soft), transparent 17%),
    radial-gradient(ellipse at 28% 68%, var(--gold), transparent 25%),
    linear-gradient(35deg, var(--sage-dark), var(--sage));
}
.mentor-feature__media--three::before {
  background:
    radial-gradient(ellipse at 46% 30%, var(--ivory-soft), transparent 20%),
    radial-gradient(ellipse at 74% 68%, var(--gold), transparent 20%),
    linear-gradient(120deg, var(--sage-dark), var(--sage));
}
/* Foto mentor, warna asli tanpa filter */
.mentor-feature__img {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%;
}
/* AI Creator Labs: creator1 dan creator2 gantian, masing-masing tampil 2 detik, pindahnya crossfade 0,6 detik.
   Satu putaran 5,2 detik = 2 + 0,6 + 2 + 0,6. */
.mentor-feature__img--swap { z-index: 2; opacity: 0; animation: mentor-swap 5.2s ease-in-out infinite; }
@keyframes mentor-swap {
  0%, 38.46% { opacity: 0; }
  50%, 88.46% { opacity: 1; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .mentor-feature__img--swap { animation: none; }
}
/* Foto mentor = link. Hover: kartu hitam pekat "VISIT <NAMA>" + panah dalam lingkaran (acuan: hover "The Story Behind" Palum). */
.mentor-feature__media { display: block; cursor: pointer; color: var(--ivory); text-decoration: none; -webkit-tap-highlight-color: transparent; }
.mentor-visit {
  position: absolute; inset: 0; z-index: 3;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(18px, 2.4vw, 30px);
  padding: 24px; text-align: center;
  background: var(--visit-card); box-shadow: inset 0 0 120px var(--black);
  opacity: 0; pointer-events: none;
  transition: opacity .5s var(--ease-soft);
}
.mentor-visit__t, .mentor-visit__i {
  opacity: 0; transform: translateY(10px); filter: blur(4px);
  transition: opacity .5s var(--ease-soft) .06s, transform .6s var(--ease-soft) .06s, filter .5s var(--ease-soft) .06s;
}
.mentor-visit__t {
  max-width: 14ch;
  font-family: var(--font-display); font-weight: var(--display-weight); font-stretch: var(--display-stretch);
  font-size: clamp(1.9rem, 3.3vw, 3.2rem); line-height: .95; letter-spacing: .02em; text-transform: uppercase;
  text-wrap: balance;
}
.mentor-visit__i { display: block; width: clamp(48px, 5vw, 66px); height: auto; transition-delay: .14s; }
.mentor-visit__i path { transform: translateX(-3px); transition: transform .5s var(--ease-soft) .2s; }
@media (hover: hover) and (pointer: fine) {
  .mentor-feature__media:hover .mentor-visit { opacity: 1; }
  .mentor-feature__media:hover :is(.mentor-visit__t, .mentor-visit__i) { opacity: 1; transform: none; filter: none; }
  .mentor-feature__media:hover .mentor-visit__i path { transform: none; }
}
.mentor-feature__media:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--ivory); }
.mentor-feature__media:focus-visible .mentor-visit { opacity: 1; }
.mentor-feature__media:focus-visible :is(.mentor-visit__t, .mentor-visit__i) { opacity: 1; transform: none; filter: none; }
.mentor-feature__media:active .mentor-visit__i { transform: scale(.94); transition-duration: .16s; transition-delay: 0s; }
@media (prefers-reduced-motion: reduce) {
  .mentor-visit, .mentor-visit__t, .mentor-visit__i, .mentor-visit__i path { transition-duration: .01s; transition-delay: 0s; filter: none; }
}
.mentors-title {
  display: grid; place-items: center;
  min-height: clamp(420px, 50vw, 680px);
  padding: clamp(72px, 10vw, 150px) 24px;
  background: var(--ink); color: var(--gold); text-align: center;
}
.mentors-title h2 {
  margin: 0; font-size: clamp(4rem, 11vw, 11rem); line-height: .82;
  text-wrap: balance;
}

@media (max-width: 760px) {
  .about-hero { height: calc(100svh - var(--header-h)); min-height: 560px; max-height: 780px; padding: 52px 16px; }
  /* HP pakai video sendiri ("Section 1 mobile.mp4"): framing tiap adegan udah dipotong
     di videonya (sofa di tengah, sofa + buku di tengah, pintu di tengah). */
  .about-hero__media--desktop { display: none; }
  .about-hero__media--mobile { display: block; }
  .journey { padding: 84px 0 110px; }
  .journey__intro { margin-bottom: 64px; }
  .journey__intro h2 { font-size: clamp(2.6rem, 13.5vw, 5rem); }
  .journey__track { display: block; min-height: 0; }
  .journey__line { top: 0; bottom: 0; left: 15px; right: auto; width: 1px; height: auto; transform: scaleY(0); transform-origin: top center; }
  .is-drawn .journey__line { transform: scaleY(1); }
  .journey-card, .journey-card--bottom { padding: 0 0 72px 55px; }
  .journey-card:last-child { padding-bottom: 0; }
  .journey-card::before, .journey-card--bottom::before { top: 18px; left: 9px; width: 13px; height: 1px; }
  .journey-card__year, .journey-card--bottom .journey-card__year { height: auto; padding: 0 0 18px; font-size: 2.35rem; }
  .journey-card__photo { width: min(100%, 290px); margin: 0 0 24px; }
  .journey-card h3 { width: min(100%, 290px); font-size: 2rem; }
  .mentor-feature { grid-template-columns: 1fr; min-height: 0; }
  .mentor-feature__copy { min-height: 0; padding: 64px 20px; }
  .mentor-feature__copy h2 { max-width: 10ch; font-size: clamp(2.35rem, 10.5vw, 3.5rem); }
  .mentor-feature--bert .mentor-feature__copy h2 { max-width: 12ch; font-size: clamp(2.2rem, 9.5vw, 3.2rem); }
  .mentor-feature__description { max-width: 32ch; margin-top: 18px; font-size: 1rem; line-height: 1.65; }
  /* Foto mentor di HP: bingkai 4:3, kepala sampai dagu selalu utuh dengan headroom. */
  .mentor-feature__media { min-height: 0; aspect-ratio: 4 / 3; }
  .mentor-feature__media--one .mentor-feature__img { object-position: 50% 12%; }
  .mentor-feature__media--two .mentor-feature__img { object-position: 50% 20%; }
  .mentor-feature__media--three .mentor-feature__img { object-position: 50% 0%; }
  .mentors-title { min-height: 360px; padding: 72px 20px; }
  .mentors-title h2 { font-size: clamp(3.7rem, 16vw, 5.8rem); }
  html:not(.js) .journey__line { transform: none; }
}

/* Reduced motion: isinya sama persis dengan blok "versi statis" di atas. */
@media (prefers-reduced-motion: reduce) {
  .journey__line { transform: none !important; }
}

/* About footer: restore original alignment. */
.site-footer { text-align: left; }
.site-footer__col { align-items: flex-start; }
.site-footer__bottom { justify-content: space-between; }