/* =========================================
   SECTION 02 — PERCEPTION
   ========================================= */

@font-face {
  font-family: 'Inter Lighthouse';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2') format('woff2');
}

@media (min-width: 901px) {
  .perception-section__keyword {
    display: inline-flex;
    justify-content: center;
    font-family: 'Inter Lighthouse', 'Inter', sans-serif;
    font-weight: 400;
    transition: font-weight 1300ms cubic-bezier(.4, 0, .2, 1), color 1300ms cubic-bezier(.4, 0, .2, 1);
  }
  .perception-section__narrative-line {
    transition: color 1300ms cubic-bezier(.4, 0, .2, 1);
  }
  .perception-section__narrative-line[data-emphasis] { color: rgba(255, 255, 255, .68); }
  .perception-section__narrative-line[data-emphasis] .perception-section__keyword {
    color: rgba(255, 255, 255, .95);
    font-weight: 600;
  }
  .perception-section__narrative-line--understood,
  .perception-section__narrative-line--understood[data-emphasis] {
    color: color-mix(in srgb, var(--text-on-dark) calc(100% - var(--understood-emphasis, 0) * 100%), rgba(255, 255, 255, .68));
    transition: none;
  }
  .perception-section__narrative-line--understood .perception-section__keyword,
  .perception-section__narrative-line--understood[data-emphasis] .perception-section__keyword {
    font-weight: calc(400 + 280 * var(--understood-emphasis, 0));
    color: color-mix(in srgb, var(--text-on-dark) calc(100% - var(--understood-emphasis, 0) * 100%), rgba(255, 255, 255, .95));
    transition: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .perception-section__keyword,
  .perception-section__narrative-line { transition: none; }
}

.perception-section {
  position: relative;
  z-index: 10;
  height: 243svh;
  background: #0b0b0b;
  color: #f5f5f3;
  contain: layout;
}

.perception-section::before {
  content: '';
  position: absolute;
  top: -15svh;
  right: 0;
  left: 0;
  z-index: 3;
  height: 45svh;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(46, 46, 46, 0) 0%,
    rgba(46, 46, 46, .12) 8%,
    rgba(46, 46, 46, .35) 16%,
    rgba(46, 46, 46, .62) 23%,
    rgba(46, 46, 46, .84) 29%,
    #2e2e2e 33.33%,
    rgba(46, 46, 46, .96) 40%,
    rgba(46, 46, 46, .86) 50%,
    rgba(46, 46, 46, .68) 62%,
    rgba(46, 46, 46, .46) 74%,
    rgba(46, 46, 46, .25) 84%,
    rgba(46, 46, 46, .1) 93%,
    rgba(46, 46, 46, 0) 100%
  );
}

@media (min-width: 901px) {
  .perception-section {
    --lighthouse-overlap: clamp(220px, 30svh, 330px);
    margin-top: calc(-1 * var(--lighthouse-overlap));
    height: calc(243svh + var(--lighthouse-overlap));
  }

  .perception-section::before {
    content: none;
  }
}

.perception-section__stage {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100svh;
  overflow: hidden;
  background: #0b0b0b;
}

.perception-section__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.perception-section__narrative {
  position: absolute;
  top: 27vh;
  left: var(--page-padding);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: min(52vw, 960px);
  pointer-events: none;
}

.perception-section__narrative-line {
  position: relative;
  width: 100%;
  margin: 0;
  color: var(--text-on-dark);
  font-family: "Inter", -apple-system, sans-serif;
  font-size: clamp(42px, 4vw, 76px);
  font-weight: 400;
  letter-spacing: var(--heading-tracking);
  line-height: 1.06;
  white-space: nowrap;
  opacity: 0;
  filter: blur(12px);
  transform: translate3d(0, 18px, 0);
  transform-origin: left center;
  will-change: opacity, transform, filter;
}

.perception-section__narrative-line--understood {
  margin-top: .24em;
}

@media (max-width: 900px) {
  .perception-section {
    height: 222svh;
  }

  .perception-section__narrative {
    top: 34%;
    width: calc(100% - 2 * var(--page-padding));
  }

  .perception-section__narrative-line {
    font-size: clamp(34px, 8vw, 58px);
    line-height: 1.02;
    white-space: normal;
  }
}

@media (max-width: 720px) {
  /* Stable full-screen canvas even when mobile browser bars collapse.
     The JS timeline measures this same panel for its sticky release. */
  .perception-section__stage { height: 100lvh; }

  .perception-section {
    --lighthouse-overlap: clamp(140px, 22svh, 220px);
    margin-top: calc(-1 * var(--lighthouse-overlap));
    height: calc(222svh + var(--lighthouse-overlap));
  }

  .perception-section::before { content: none; }

  .perception-section__narrative {
    top: 18%;
    left: var(--page-padding);
    display: flex;
    width: 62vw;
    max-width: 17rem;
    align-items: flex-start;
  }

  .perception-section__narrative-line {
    position: relative;
    width: 100%;
    font-size: clamp(2.25rem, 9.5vw, 2.75rem);
    line-height: 1;
    text-align: left;
  }

  .perception-section__narrative-line--understood {
    margin-top: .24em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .perception-section {
    height: 100svh;
  }

  .perception-section__narrative-line--seen,
  .perception-section__narrative-line--understood {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
  }

  .perception-section__narrative-line--seen {
    opacity: .8 !important;
    transform: scale(.93) !important;
  }
}