/* ======================================================
   COMMENT SECTION — SCROLL TESTIMONIALS
====================================================== */

.comment-section {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  background: rgb(var(--theme-bg-deep-rgb));
}

.comment-smoke {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 4;
  width: min(94vw, 90vh, 1220px);
  height: auto;
  aspect-ratio: 1;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 12px 18px rgb(var(--theme-shadow-rgb) / 0.2));
  pointer-events: none;
  will-change: opacity;
  transition:
    opacity 70ms steps(1, end),
    visibility 0s linear 140ms;
}

.comment-section.smoke-active .comment-smoke {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.comment-section.smoke-complete .comment-smoke {
  opacity: 0;
  visibility: hidden;
}

.comment-asset {
  position: absolute;
  display: block;
  width: auto;
  user-select: none;
  pointer-events: none;
}

.comment-paper-wrap {
  position: absolute;
  width: min(84vw, 1180px);
  top: 50%;
  left: 50%;
  z-index: 1;
  clip-path: inset(0 50% 0 50%);
  transform: translate(-50%, -50%);
  transform-origin: center center;
  backface-visibility: hidden;
  will-change: clip-path;
  animation: none;
}

.comment-asset--paper {
  position: relative;
  width: 100%;
  height: auto;
  top: auto;
  left: auto;
  z-index: 0;
  transform: none;
}

.comment-asset--handle {
  height: min(72vh, 610px);
  top: 50%;
  left: calc(50% - min(4.5vw, 64px));
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.82);
  transform-origin: center center;
  animation: none;
  z-index: 2;
}

.comment-asset--handle-end {
  left: calc(50% + min(4.5vw, 64px));
  opacity: 0;
  transform: translate(-50%, -50%) scaleX(-1) scale(0.82);
  animation: none;
}

.comment-section.reveal-active .comment-paper-wrap {
  animation: commentPaperUnroll 420ms cubic-bezier(0.16, 1, 0.3, 1) 620ms
    forwards;
}

.comment-section.reveal-active .comment-asset--handle {
  animation:
    commentScrollRevealStart 420ms cubic-bezier(0.16, 1, 0.3, 1) 80ms forwards,
    commentHandleRollStart 420ms cubic-bezier(0.16, 1, 0.3, 1) 620ms forwards;
}

.comment-section.reveal-active .comment-asset--handle-end {
  animation:
    commentScrollRevealEnd 420ms cubic-bezier(0.16, 1, 0.3, 1) 80ms forwards,
    commentHandleRollEnd 420ms cubic-bezier(0.16, 1, 0.3, 1) 620ms forwards;
}

.comment-card-content {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  width: min(58vw, 820px);
  min-height: min(30vw, 360px);
  transform: translate(-50%, -50%);
  display: grid;
  grid-template-columns: minmax(190px, 0.85fr) minmax(320px, 1.55fr);
  align-items: center;
  gap: clamp(28px, 4vw, 64px);
  color: rgb(var(--theme-ink-rgb));
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 500ms cubic-bezier(0.16, 1, 0.3, 1),
    visibility 500ms cubic-bezier(0.16, 1, 0.3, 1);
}

.comment-card-content.active {
  opacity: 1;
  visibility: visible;
}

.comment-brand-mark {
  width: clamp(150px, 13vw, 220px);
  display: block;
  justify-self: center;
  transform: translateX(-18px);
  filter: brightness(0);
  opacity: 0.95;
}

.comment-card-content--molotov .comment-brand-mark {
  width: clamp(240px, 22vw, 370px);
}

.comment-card-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(18px, 2.4vw, 34px);
}

.comment-copy {
  position: relative;
  margin: 0;
  max-width: 680px;
  font-family: var(--font-handwritten);
  font-size: clamp(2rem, 3vw, 3.65rem);
  font-weight: 700;
  line-height: 1.04;
  color: rgb(var(--theme-ink-rgb));
}

.comment-copy::before,
.comment-copy::after {
  position: absolute;
  font-family: var(--font-editorial-serif);
  font-size: clamp(4rem, 7vw, 8rem);
  line-height: 1;
  color: rgb(var(--theme-ink-rgb));
}

.comment-copy::before {
  content: open-quote;
  top: -0.28em;
  left: -0.62em;
}

.comment-copy::after {
  content: close-quote;
  right: -0.48em;
  bottom: -0.62em;
}

.comment-signature {
  align-self: flex-end;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: min(24vw, 360px);
  color: rgb(var(--theme-ink-rgb));
}

.comment-signature-stroke {
  width: min(28vw, 430px);
  height: auto;
  margin-bottom: clamp(2px, 0.35vw, 6px);
  display: block;
  transform: translateY(-12px);
}

.comment-name {
  font-family: var(--font-rock-salt);
  font-size: clamp(1.75rem, 3vw, 3.65rem);
  font-weight: 800;
  line-height: 1.1;
  white-space: nowrap;
}

.comment-role {
  margin-top: clamp(8px, 1vw, 14px);
  font-family: var(--font-rajdhani);
  font-size: clamp(0.68rem, 1.15vw, 1.2rem);
  font-weight: 700;
  letter-spacing: 0.48em;
  text-transform: uppercase;
  white-space: nowrap;
}

.comment-card-content--noju .comment-signature,
.comment-card-content--clik .comment-signature {
  min-width: min(31vw, 470px);
}

.comment-card-content--noju .comment-name,
.comment-card-content--clik .comment-name {
  font-size: clamp(1.45rem, 2.35vw, 3rem);
}

.comment-card-content--clik .comment-role {
  font-size: clamp(0.58rem, 0.92vw, 0.96rem);
  letter-spacing: 0.34em;
}

.comment-pagination {
  position: absolute;
  bottom: clamp(22px, 4vh, 46px);
  left: 50%;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  transform: translate(-50%, 10px);
  opacity: 0;
  visibility: hidden;
}

.comment-section.reveal-active .comment-pagination {
  animation: commentPaginationIn 300ms cubic-bezier(0.16, 1, 0.3, 1) 1120ms both;
}

.comment-pagination__dot {
  width: 14px;
  height: 14px;
  padding: 0;
  border: 2px solid rgb(var(--theme-paper-rgb) / 0.78);
  border-radius: 50%;
  background: transparent;
  box-shadow: 3px 3px 0 rgb(var(--theme-shadow-rgb) / 0.75);
  cursor: pointer;
  transition: background-color 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}

.comment-pagination__dot:hover {
  border-color: rgb(var(--theme-text-rgb));
  background: rgb(var(--theme-primary-rgb) / 0.45);
}

.comment-pagination__dot[aria-current="true"] {
  border-color: rgb(var(--theme-text-rgb));
  background: rgb(var(--theme-primary-rgb));
  box-shadow: 0 0 0 3px rgb(var(--theme-primary-rgb) / 0.42), 3px 3px 0 rgb(var(--theme-shadow-rgb) / 0.75);
}

.comment-pagination__dot:focus-visible {
  outline: 3px solid rgb(var(--theme-text-rgb));
  outline-offset: 4px;
}

@media (max-width: 768px) {
  .comment-smoke {
    width: min(180vw, 940px);
  }

  .comment-paper-wrap {
    width: min(78vh, 700px);
    clip-path: inset(0 50% 0 50%);
    transform: translate(-50%, -50%) rotate(90deg);
    animation: none;
    will-change: clip-path;
  }

  .comment-asset--paper {
    width: 100%;
    transform: none;
  }

  .comment-asset--handle {
    height: min(92vw, 365px);
    top: calc(50% - min(4vh, 34px));
    left: 50%;
    transform: translate(-50%, -50%) rotate(90deg) scale(0.82);
    animation: none;
  }

  .comment-asset--handle-end {
    top: calc(50% + min(4vh, 34px));
    left: 50%;
    transform: translate(-50%, -50%) rotate(90deg) scaleX(-1) scale(0.82);
    animation: none;
  }

  .comment-section.reveal-active .comment-paper-wrap {
    animation: commentPaperUnrollMobile 420ms cubic-bezier(0.16, 1, 0.3, 1)
      620ms forwards;
  }

  .comment-section.reveal-active .comment-asset--handle {
    animation:
      commentScrollRevealTopMobile 420ms cubic-bezier(0.16, 1, 0.3, 1) 80ms forwards,
      commentHandleOpenTopMobile 420ms cubic-bezier(0.16, 1, 0.3, 1) 620ms forwards;
  }

  .comment-section.reveal-active .comment-asset--handle-end {
    animation:
      commentScrollRevealBottomMobile 420ms cubic-bezier(0.16, 1, 0.3, 1) 80ms forwards,
      commentHandleOpenBottomMobile 420ms cubic-bezier(0.16, 1, 0.3, 1) 620ms forwards;
  }

  .comment-card-content {
    width: min(58vw, 270px);
    min-height: min(56vh, 520px);
    transform: translate(-50%, -50%) rotate(-90deg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(14px, 2.3vh, 22px);
    text-align: center;
  }

  .comment-brand-mark {
    width: clamp(92px, 28vw, 132px);
    transform: translateY(-35px);
  }

  .comment-card-content--molotov .comment-brand-mark {
    width: clamp(150px, 44vw, 210px);
  }

  .comment-card-copy {
    align-items: center;
    gap: clamp(28px, 5vh, 44px);
    transform: translateY(10px);
  }

  .comment-copy {
    max-width: 100%;
    font-size: clamp(1.76rem, 7.6vw, 2.55rem);
    line-height: 1.08;
  }

  .comment-copy::before,
  .comment-copy::after {
    font-size: clamp(2.7rem, 12vw, 4rem);
  }

  .comment-copy::before {
    top: -0.58em;
    left: -0.3em;
  }

  .comment-copy::after {
    right: -0.18em;
    bottom: -0.72em;
  }

  .comment-signature {
    align-self: center;
    min-width: 0;
    transform: translateY(20px);
  }

  .comment-card-content--noju .comment-signature,
  .comment-card-content--clik .comment-signature {
    min-width: 0;
  }

  .comment-signature-stroke {
    width: min(46vw, 210px);
    transform: translateY(-4px);
  }

  .comment-name {
    font-size: clamp(1.25rem, 5.2vw, 1.8rem);
    white-space: normal;
  }

  .comment-role {
    font-size: clamp(0.56rem, 2.4vw, 0.78rem);
    letter-spacing: 0.32em;
    white-space: normal;
  }

  .comment-card-content--noju .comment-name,
  .comment-card-content--clik .comment-name {
    font-size: clamp(1.08rem, 4.4vw, 1.55rem);
  }

  .comment-card-content--clik .comment-role {
    font-size: clamp(0.5rem, 2.1vw, 0.68rem);
    letter-spacing: 0.24em;
  }

  .comment-pagination {
    bottom: 18px;
    gap: 10px;
  }

  .comment-pagination__dot {
    width: 12px;
    height: 12px;
  }
}

@keyframes commentHandleRollStart {
  from {
    left: calc(50% - min(4.5vw, 64px));
    transform: translate(-50%, -50%);
  }

  to {
    left: calc(50% - min(42vw, 590px));
    transform: translate(-50%, -50%);
  }
}

@keyframes commentScrollRevealStart {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.82);
    filter: blur(8px);
  }

  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    filter: blur(0);
  }
}

@keyframes commentScrollRevealEnd {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scaleX(-1) scale(0.82);
    filter: blur(8px);
  }

  to {
    opacity: 1;
    transform: translate(-50%, -50%) scaleX(-1) scale(1);
    filter: blur(0);
  }
}

@keyframes commentHandleRollEnd {
  from {
    left: calc(50% + min(4.5vw, 64px));
    transform: translate(-50%, -50%) scaleX(-1);
  }

  to {
    left: calc(50% + min(42vw, 590px));
    transform: translate(-50%, -50%) scaleX(-1);
  }
}

@keyframes commentScrollRevealTopMobile {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(90deg) scale(0.82);
    filter: blur(8px);
  }

  to {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(90deg) scale(1);
    filter: blur(0);
  }
}

@keyframes commentScrollRevealBottomMobile {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(90deg) scaleX(-1) scale(0.82);
    filter: blur(8px);
  }

  to {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(90deg) scaleX(-1) scale(1);
    filter: blur(0);
  }
}

@keyframes commentPaperUnroll {
  0% {
    clip-path: inset(0 50% 0 50%);
  }

  100% {
    clip-path: inset(0 0 0 0);
  }
}

@keyframes commentHandleOpenTopMobile {
  from {
    top: calc(50% - min(4vh, 34px));
    transform: translate(-50%, -50%) rotate(90deg);
  }

  to {
    top: calc(50% - min(40vh, 338px));
    transform: translate(-50%, -50%) rotate(90deg);
  }
}

@keyframes commentHandleOpenBottomMobile {
  from {
    top: calc(50% + min(4vh, 34px));
    transform: translate(-50%, -50%) rotate(90deg) scaleX(-1);
  }

  to {
    top: calc(50% + min(40vh, 338px));
    transform: translate(-50%, -50%) rotate(90deg) scaleX(-1);
  }
}

@keyframes commentPaperUnrollMobile {
  from {
    clip-path: inset(0 50% 0 50%);
  }

  to {
    clip-path: inset(0 0 0 0);
  }
}

@keyframes commentPaginationIn {
  from {
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 10px);
  }

  to {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .comment-smoke {
    display: none;
  }

  .comment-section.reveal-active .comment-paper-wrap {
    clip-path: inset(0);
    animation: none;
  }

  .comment-section.reveal-active .comment-asset--handle {
    left: calc(50% - min(42vw, 590px));
    opacity: 1;
    filter: none;
    transform: translate(-50%, -50%);
    animation: none;
  }

  .comment-section.reveal-active .comment-asset--handle-end {
    left: calc(50% + min(42vw, 590px));
    transform: translate(-50%, -50%) scaleX(-1);
  }

  .comment-section.reveal-active .comment-pagination {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
    animation: none;
  }
}

@media (prefers-reduced-motion: reduce) and (max-width: 768px) {
  .comment-section.reveal-active .comment-asset--handle {
    top: calc(50% - min(40vh, 338px));
    left: 50%;
    transform: translate(-50%, -50%) rotate(90deg);
  }

  .comment-section.reveal-active .comment-asset--handle-end {
    top: calc(50% + min(40vh, 338px));
    left: 50%;
    transform: translate(-50%, -50%) rotate(90deg) scaleX(-1);
  }
}