.pdf-section {
  position: relative;
  height: 100vh;
  background-color: var(--color-black);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 40px 36px;
  overflow: hidden;
  transform: translateZ(0);

  & .pdf-glow-dot {
    width: 1200px;
    height: 1200px;
    top: 30%;
    left: 30%;
    transform: translate(-50%, -50%);
    opacity: 0.7;
    z-index: var(--z-bg);
    animation: glow-drift 12s ease-in-out infinite;
  }

  & .pdf-container {
    position: relative;
    z-index: var(--z-content);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    width: 100%;
    height: 100%;
  }

  & .pdf-title {
    color: var(--color-white);
    text-align: center;
    flex-shrink: 0;
  }

  & .pdf-viewer-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-height: 0;
    width: 100%;
    gap: 24px;
  }

  & .pdf-arrow {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    background: var(--color-black-30);
    border: 1px solid var(--color-white-30);
    border-radius: 50%;
    color: var(--color-white);
    font-size: 36px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 7px; /* 56px/8 */
    transition:
      background var(--transition-fast),
      border-color var(--transition-fast);

    &:hover {
      background: var(--color-orange);
      border-color: var(--color-orange);
    }

    &:disabled {
      opacity: 0.2;
      cursor: default;
      pointer-events: none;
    }
  }

  & #pdf-flipbook {
    position: relative;
    display: flex;
    /* height: 58vh; */
    max-height: 60vh;
    width: calc(60vh * 2 / 1.414);
    max-width: 80%;
    aspect-ratio: 2 / 1.414;
    border-radius: var(--radius-lg);
    /* box-shadow:
      0 24px 60px rgba(0, 0, 0, 0.8),
      0 0 0 1px var(--color-white-10); */
    user-select: none;

    & .pdf-page {
      width: 50%;
      height: 100%;
      object-fit: cover;
      display: block;
      flex-shrink: 0;
      position: relative;
      z-index: 2;

      /* visibility:hidden keeps the 50% slot, display:none would collapse it */
      &.hidden {
        visibility: hidden;
      }
    }
  }

  & .pdf-actions {
    display: flex;
    justify-content: center;
    flex-shrink: 0;

    & .btn {
      font-family: Arial, sans-serif;
      font-weight: 700;
      font-size: 14px;
      line-height: 19.6px;
      letter-spacing: 0px;
      text-align: center;
      border-radius: 50px;
      text-transform: none;
    }
  }
}