/* ================================================================
   KEY TOPICS  —  Cinematic two-column editorial parallax layout
   Scoped to #topics only. No global overrides.
   ================================================================ */

/* Reset .wrapper .inner padding — layout handled by .keytopics-inner */
#topics > .inner {
  padding: 0 !important;
  max-width: none !important;
  width: 100% !important;
  height: 100%;
}

/* ── Scroll-space wrapper — tall container that gives the sticky section room to scroll through ── */
#topics-scroll-space {
  position: relative;
  background: #111213; /* opaque so it fully covers the sticky about section below */
  /* height is set by JS based on card count */
}

/* Section background — sticky inside the scroll-space */
#topics.wrapper {
  background: #111213;
  overflow: clip;
  position: sticky;
  top: 0;
  height: 100vh;
  z-index: 1;  /* lower than subsequent sections so they slide over it */
}

/* ── IR Wavefront Canvas ── */
.wavefront-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

/* ── NIR Component image — wavefront emitter ── */
.keytopics-component-wrap {
  position: relative;
  width: 200px;           /* bigger diode */
  margin: 2.5rem auto 0;
  opacity: 0;
  transform: translateY(40px) scale(0.88);
  transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
  flex-shrink: 0;
}

.keytopics-component-wrap.component-in {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.keytopics-component-img {
  width: 100%;
  height: auto;
  display: block;
  /* Tint white areas to near-black background color */
  mix-blend-mode: lighten;
  filter: drop-shadow(0 0 14px rgba(255,31,107,0.65));
}

.keytopics-component-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,31,107,0.38) 0%, transparent 70%);
  animation: nir-pulse 2.4s ease-in-out infinite;
  pointer-events: none;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.8s ease;
}

.keytopics-component-wrap.component-in .keytopics-component-glow {
  opacity: 1;
}

@keyframes nir-pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1);    opacity: 0.5; }
  50%       { transform: translate(-50%, -50%) scale(1.35); opacity: 1;   }
}

@media (prefers-reduced-motion: reduce) {
  .keytopics-component-glow { animation: none; }
}

/* Ensure content sits above the canvas */
.keytopics-section {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
}

/* ── Two-column editorial grid ── */
.keytopics-inner {
  display: grid;
  grid-template-columns: 38% 1fr;
  max-width: 1400px;
  margin: 0 auto;
  padding: 6rem 5rem 4rem;
  gap: 0 5rem;
  align-items: center;  /* vertically centre both columns */
  box-sizing: border-box;
  height: 100vh;
  overflow: visible;  /* allow cards to start below and slide in */
}

/* ── LEFT COLUMN: JS drives translateY during entry phase, then locks ── */
.keytopics-left {
  align-self: center;
  overflow: visible;  /* allow large title to be fully visible */
  min-width: 0;
  will-change: transform;  /* JS clears this once settled */
}

/* Title wrap: no longer sticky — the whole left col is JS-driven ── */
.keytopics-title-wrap {
  position: relative;
  top: auto;
  padding-top: 0;
  display: flex;
  flex-direction: column;
}

/* ── KEY / TOPICS words: mask-rise animation (2-col only) ── */

/* Mask wrapper injected by JS — clips the word below overflow:hidden */
.keytopics-word-mask {
  display: block;
  overflow: hidden;
  /* give it the same line-height as the word so mask exactly contains it */
  line-height: 0.88;
  padding-bottom: 0.06em; /* keeps descenders visible */
}

/* On mobile: no clipping needed — diagonal entrance uses opacity+translate */
@media (max-width: 1024px) {
  .keytopics-word-mask {
    overflow: visible;
    line-height: inherit;
    padding-bottom: 0;
  }
}

/* Each word on its own line — dominant cinematic scale */
.keytopics-word {
  display: block;
  font-family: 'Bebas Neue', Impact, 'Arial Narrow', sans-serif;
  font-size: clamp(3.5rem, 7vw, 9rem);
  font-weight: 900;
  color: #ffffff;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  line-height: 0.85;
}

/* Animated state driven by JS adding .word-in to .keytopics-word-mask */
/* Desktop (>1024px): mask-rise from below */
@media (min-width: 1025px) {
  .keytopics-title-wrap {
    align-items: flex-end; /* right-align word blocks within the flex column */
  }
  .keytopics-word {
    text-align: right;
    transform: translateY(110%);
    transition: transform 2.15s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .keytopics-word-mask.word-in .keytopics-word {
    transform: translateY(0);
  }
}

/* Tablet+mobile: dramatic diagonal entrance like Conference Venue */
@media (max-width: 1024px) {
  .keytopics-word:first-child {
    opacity: 0;
    transform: translateX(120px) translateY(-80px) skewX(-12deg);
    transition: opacity 0.85s ease 0s, transform 1.1s cubic-bezier(0.16,1,0.3,1) 0s;
  }
  .keytopics-word:last-of-type {
    opacity: 0;
    transform: translateX(-120px) translateY(80px) skewX(12deg);
    transition: opacity 0.85s ease 0.1s, transform 1.1s cubic-bezier(0.16,1,0.3,1) 0.1s;
  }
  .keytopics-word-mask.word-in .keytopics-word:first-child,
  .keytopics-word-mask.word-in .keytopics-word:last-of-type {
    opacity: 1;
    transform: none;
  }
  /* Override: target the word directly when mask gets word-in */
  .keytopics-word-mask.word-in .keytopics-word {
    opacity: 1;
    transform: none !important;
  }
}

/* Accent bar — hidden */
.keytopics-accent-line {
  display: none;
}

/* Conference name subtitle */
.keytopics-conference-name {
  display: block;
  margin-top: 1rem;
  font-size: clamp(0.6rem, 0.85vw, 0.82rem);
  font-weight: 400;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.40);
  line-height: 1.65;
  text-align: right;
  max-width: 26ch;
  align-self: flex-end;
}

/* ── RIGHT COLUMN: editorial topic stack ── */
.keytopics-right {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
  position: relative;
  align-self: center;
}

/* Each topic — absolute stack; JS sets transform to reveal/stack ── */
.topic-item {
  position: absolute;
  width: 100%;
  padding: 0;
  border-radius: 3px;
  border: none;
  background: #3b0b17;
  box-sizing: border-box;
  overflow: hidden;
  /* start well below — JS drives a dramatic slide-up into position */
  transform: translateY(380px);
  opacity: 0;
  will-change: transform, opacity;
  pointer-events: none;   /* hidden cards must not eat clicks */
  box-shadow: 0 2px 24px rgba(0,0,0,0.55);
}

.topic-item.stacked {
  box-shadow: 0 8px 40px rgba(0,0,0,0.7);
}

/* .visible — JS drives opacity/transform directly; enable pointer events */
.topic-item.visible {
  pointer-events: auto;
}

/* Inner padding wrapper keeps left bar separate from content */
.topic-item-inner {
  padding: 2rem 2.4rem 2rem 2.6rem;
}

/* Topic heading — no background, plain white */
.topic-title {
  font-family: 'Bebas Neue', Impact, 'Arial Narrow', sans-serif;
  font-size: clamp(1.6rem, 3.4vw, 8rem);
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: 0.8;
  color: #ffb3cc;
  text-transform: uppercase;
  margin: 0 0 1rem 0;
  padding: 0;
  background: none;
  display: block;
}

/* Description — clean, readable */
.topic-desc {
  font-size: clamp(0.95rem, 1.15vw, 1.2rem);
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.78);
  max-width: 560px;
  margin: 0;
}

/* ── TABLET / MOBILE (≤1024px): single-column — stacking animation stays ON ── */
@media (max-width: 1024px) {
  /* Keep sticky stacking — scroll-space height is set by JS */
  #topics.wrapper {
    position: sticky;
    top: 0;
    height: 100vh;
  }

  /* Single column: title row (auto) then cards row (fills remaining height) */
  .keytopics-inner {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    padding: 2.5rem 1.5rem 1.5rem;
    gap: 1.5rem 0;
    height: 100vh;
    overflow: hidden;
    align-items: start;        /* title stays top; right col stretches */
  }

  .keytopics-left {
    align-self: start;
    will-change: transform;
  }

  /* Mobile title: venue-style — KEY small on top, TOPICS large below */
  .keytopics-title-wrap {
    align-items: flex-start;
    flex-direction: column;
    gap: 0;
    padding-top: 0;
  }

  .keytopics-word:first-child {
    font-size: clamp(1.4rem, 4.5vw, 2.5rem);
    color: rgba(255,255,255,0.28);  /* dimmed, like venue-title-line1 */
    line-height: 1;
  }

  .keytopics-conference-name {
    font-size: clamp(0.6rem, 1.8vw, 0.82rem);
    text-align: left;
    align-self: flex-start;
    max-width: 30ch;
    margin-top: 0.75rem;
  }

  .keytopics-word:last-of-type {
    font-size: clamp(2.8rem, 7vw, 5rem);
    color: #ffffff;
    line-height: 0.85;
  }

  /* Keep component visible on mobile — bigger on tablets/iPads */
  .keytopics-component-wrap {
    display: block;
    width: clamp(90px, 12vw, 160px);
    margin: 0.5rem 0 0;
  }

  /* Right column: fills grid row, cards anchor to bottom */
  .keytopics-right {
    position: relative;
    align-self: end;           /* anchor stack to bottom of grid row */
  }

  .topic-item {
    padding: 1.5rem 1.5rem;
    border-radius: 8px;
  }

  .topic-title {
    font-size: clamp(1.5rem, 4.5vw, 2.5rem);
  }

  .topic-desc {
    font-size: 0.9rem;
    max-width: 100%;
  }
}

/* ── MEDIUM: 701–1024px — two-column if title width < 45% ── */
/* At these widths the title (KEY/TOPICS Bebas) occupies ~38–42% max */
@media (min-width: 701px) and (max-width: 1024px) {
  .keytopics-inner {
    grid-template-columns: 40% 1fr;
    grid-template-rows: 1fr;
    padding: 3.5rem 2.5rem 2.5rem;
    gap: 0 3rem;
    align-items: center;
  }

  .keytopics-left {
    align-self: center;
  }

  /* Title: right-aligned like desktop, large word sizing */
  .keytopics-title-wrap {
    align-items: flex-end;
    flex-direction: column;
    gap: 0;
  }

  .keytopics-word:first-child {
    font-size: clamp(1.5rem, 4vw, 3rem);
    color: rgba(255,255,255,0.28);
    line-height: 1;
    text-align: right;
  }

  .keytopics-conference-name {
    font-size: clamp(0.58rem, 1vw, 0.78rem);
    align-self: flex-end;
    text-align: right;
    max-width: 26ch;
    margin-top: 0.9rem;
  }

  .keytopics-word:last-of-type {
    font-size: clamp(3rem, 7vw, 6rem);
    color: #ffffff;
    line-height: 0.85;
    text-align: right;
  }

  /* Component below title, larger */
  .keytopics-component-wrap {
    width: clamp(100px, 14vw, 180px);
    margin: 1rem auto 0;
  }

  .keytopics-right {
    align-self: center;
  }
}

/* ── MOBILE (≤600px) — phones: iPhone, Galaxy, Pixel ── */
@media (max-width: 600px) {
  .keytopics-inner {
    padding: 2rem 1.25rem 1rem;
    gap: 1rem 0;
  }

  .keytopics-component-wrap {
    width: clamp(80px, 18vw, 130px);
  }

  .topic-item {
    padding: 1.4rem 1.25rem;
  }

  .topic-title {
    font-size: clamp(1.4rem, 6vw, 2.2rem);
    padding: 0;
  }

  .topic-desc {
    font-size: 0.88rem;
  }
}

/* ── SMALL PHONE (≤390px) — iPhone SE, iPhone 12 mini, Galaxy A series ── */
@media (max-width: 390px) {
  .keytopics-inner {
    padding: 1.75rem 1rem 0.75rem;
    gap: 0.75rem 0;
  }

  .keytopics-component-wrap {
    width: clamp(70px, 18vw, 100px);
  }

  .topic-item {
    padding: 1.2rem 1rem;
  }

  .topic-title {
    font-size: clamp(1.2rem, 6.5vw, 1.8rem);
  }
}

/* ── REDUCED MOTION: skip all transitions and parallax ── */
@media (prefers-reduced-motion: reduce) {
  .topic-item {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .keytopics-title-wrap {
    will-change: auto;
  }
}

/* ── Scroll / swipe-up reveal hint ── */
.topics-reveal-hint {
  position: absolute;
  top: -3.2rem;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.5s ease;
  z-index: 20;
}
/* On mobile the parent .keytopics-inner has overflow:hidden, so
   top:-3.2rem gets clipped. Reposition inside the card area instead
   (cards start hidden/translated, so the top of rightCol is empty). */
@media (max-width: 1024px) {
  .topics-reveal-hint {
    top: 0.8rem;
  }
}
.topics-reveal-hint.hidden {
  opacity: 0;
}
.topics-reveal-hint-text {
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.38);
  font-family: inherit;
}
.topics-reveal-hint-text .hint-desktop { display: inline; }
.topics-reveal-hint-text .hint-mobile  { display: none; }
@media (hover: none) and (pointer: coarse) {
  .topics-reveal-hint-text .hint-desktop { display: none; }
  .topics-reveal-hint-text .hint-mobile  { display: inline; }
}
.topics-reveal-arrow {
  width: 18px;
  height: 18px;
  color: rgba(255,31,107,0.6);
  animation: hint-bounce 1.4s ease-in-out infinite;
}
@keyframes hint-bounce {
  0%,100% { transform: translateY(0);    opacity: 0.5; }
  50%      { transform: translateY(-7px); opacity: 1;   }
}

/* ── Card navigation buttons ── */
.card-nav {
  position: absolute;
  bottom: 1.1rem;
  right: 1.5rem;
  display: flex;
  gap: 6px;
  z-index: 10;
  align-items: center;
}

.card-nav-btn {
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.32);
  width: 28px;
  height: 28px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: color 0.18s;
}

.card-nav-btn:hover {
  color: #ff1f6b;
}

.card-nav-btn svg {
  display: block;
}