/**
 * PARTY KANJI — short-form kanji episodes.
 * Enable: exhibitProfile partyKanji + typography party-kanji
 */

html.kml-typography-party-kanji {
  --pk-bg: #0a0a0c;
  --pk-text: #f4efe4;
  --pk-accent: #e8c547;
  --pk-muted: rgba(244, 239, 228, 0.62);
  /* Final / shock kanji: calm focal presence */
  --pk-giant: clamp(7.5rem, 27.5vmin, 17.5rem);
  /* Component kanji: +~12% over previous polish */
  --pk-component: clamp(3.4rem, 11vmin, 6.85rem);
  --pk-challenge: clamp(1.35rem, 3.8vmin, 2.2rem);
  --pk-brand: clamp(1.8rem, 5vmin, 3rem);
  --pk-tagline: clamp(1rem, 2.6vmin, 1.35rem);
  --pk-disclaimer: clamp(0.75rem, 1.8vmin, 0.95rem);
  --pk-closing: clamp(1.25rem, 3.6vmin, 2rem);
  --pk-pulse-opacity: 0.18;
  --pk-transition-fast: 700ms cubic-bezier(0.22, 1, 0.36, 1);
  --pk-transition-reward: 1800ms cubic-bezier(0.16, 1, 0.3, 1);
  --pk-challenge-fade: 1.25s;
}

.exhibition-root.is-party-kanji {
  background: var(--pk-bg);
}

.exhibition-root.is-party-kanji .exhibition-artwork,
.exhibition-root.is-party-kanji .exhibition-title,
.exhibition-root.is-party-kanji .exhibition-notes,
.exhibition-root.is-party-kanji .exhibition-vignette {
  display: none !important;
}

.exhibition-root.is-party-kanji .exhibition-veil.is-clear {
  opacity: 0;
}

/* ── Party Kanji layer ── */

.party-kanji-layer {
  position: absolute;
  inset: 0;
  z-index: 12;
  display: grid;
  place-items: center;
  pointer-events: none;
  color: var(--pk-text);
  font-family: "Cormorant Garamond", "Noto Serif JP", serif;
}

.party-kanji-phase {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(0.9rem, 2.8vh, 1.7rem);
  /* Slightly roomier padding so larger glyphs keep generous margins */
  padding: clamp(1.75rem, 4.5vw, 3.25rem);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--pk-transition-fast), visibility var(--pk-transition-fast);
}

.party-kanji-phase.is-visible {
  opacity: 1;
  visibility: visible;
}

.party-kanji-phase.is-fading {
  opacity: 0;
  visibility: visible;
}

/* Shock + Final — giant kanji */

.party-kanji-giant {
  font-family: "Yuji Syuku", "Noto Serif JP", serif;
  font-size: var(--pk-giant);
  line-height: 1;
  color: var(--pk-text);
  text-shadow: none;
}

/* ── Museum exhibit intro (parts → whole) ── */

.party-kanji-museum {
  padding: 0;
}

.party-museum-stage {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.party-museum-part {
  position: absolute;
  transform: translate(-50%, -50%);
  font-family: "Yuji Syuku", "Noto Serif JP", serif;
  /* Match component scale bump (~+20%) at authored positions */
  font-size: clamp(4.2rem, 13.2vmin, 9rem);
  line-height: 1;
  color: var(--pk-text);
  text-shadow: none;
  opacity: 0;
  transition: opacity var(--pk-museum-part-fade, 1.4s) ease-in-out;
}

.party-museum-part.is-visible {
  opacity: 1;
}

.party-museum-part.is-leaving {
  opacity: 0;
  transition-duration: var(--pk-museum-parts-out, 1.4s);
}

.party-museum-final {
  position: relative;
  z-index: 2;
  opacity: 0;
  transform: scale(0.96);
  transition:
    opacity var(--pk-museum-final-fade, 1.8s) ease-in-out,
    transform var(--pk-museum-final-fade, 1.8s) ease-in-out;
}

.party-museum-final.is-visible {
  opacity: 1;
  transform: scale(1);
}

.party-museum-meaning {
  position: relative;
  z-index: 2;
  margin-top: clamp(0.75rem, 2.5vh, 1.5rem);
  font-family: "Cormorant Garamond", "Noto Serif JP", serif;
  font-size: clamp(1.35rem, 3.6vmin, 2.2rem);
  font-weight: 500;
  font-style: italic;
  letter-spacing: 0.04em;
  color: var(--pk-muted);
  opacity: 0;
  transition: opacity var(--pk-museum-meaning-fade, 1.1s) ease-in-out;
}

.party-museum-meaning.is-visible {
  opacity: 1;
}

.exhibition-root.is-party-kanji .grade1-confetti-layer {
  position: fixed;
  inset: 0;
  z-index: 30;
  pointer-events: none;
  overflow: hidden;
}

.exhibition-root.is-party-kanji .grade1-confetti-piece {
  position: absolute;
  width: 0.55rem;
  height: 0.9rem;
  border-radius: 0.12rem;
  opacity: 0;
  transform: translate3d(0, 0, 0) rotate(0deg);
  animation: grade1-confetti-fall var(--grade1-confetti-duration, 1.4s)
    cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
}

.party-kanji-giant--enter {
  animation: pk-giant-enter 500ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.party-kanji-giant--reward {
  transform: scale(0.92);
  opacity: 0;
}

.party-kanji-giant--reward.is-reward-glow {
  /* Fade in only — no brightness / gold bloom (fills dense counters at DPR 1). */
  animation: pk-reward-arrive var(--pk-transition-reward) forwards;
}

.party-kanji-challenge {
  font-size: var(--pk-challenge);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pk-accent);
  text-align: center;
  max-width: 28ch;
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity var(--pk-challenge-fade, 1.2s) ease-in-out,
    transform var(--pk-challenge-fade, 1.2s) ease-in-out;
}

.party-kanji-challenge--hidden {
  opacity: 0;
  transform: translateY(0.45rem);
}

.party-kanji-challenge.is-visible {
  animation: pk-challenge-fade var(--pk-challenge-fade, 1.2s) ease-in-out both;
}

/* Reveal — component breakdown */

.party-kanji-playlist {
  font-size: clamp(0.75rem, 1.8vmin, 0.9rem);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--pk-muted);
}

.party-kanji-components {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Extra gap so larger components stay clear of each other */
  gap: clamp(0.95rem, 3.1vw, 1.85rem);
  max-width: min(92vw, 56rem);
  transform: scale(1);
  opacity: 1;
}

.party-kanji-components.is-vertical {
  flex-direction: column;
}

.party-kanji-components.is-horizontal {
  flex-direction: row;
  flex-wrap: wrap;
}

/* Guests gathering — balanced, elegant offsets around centre (not a stiff column). */
.party-kanji-components.is-gathering {
  flex-direction: column;
  align-items: center;
  gap: clamp(0.55rem, 1.8vh, 1.1rem);
}

.party-kanji-components.is-gathering .party-component-cell {
  --pk-scatter-x: 0rem;
  --pk-scatter-y: 0rem;
}

.party-kanji-components.is-gathering .party-component-cell:nth-child(1) {
  --pk-scatter-x: -1.55rem;
  --pk-scatter-y: -0.35rem;
}

.party-kanji-components.is-gathering .party-component-cell:nth-child(2) {
  --pk-scatter-x: 1.35rem;
  --pk-scatter-y: 0.15rem;
}

.party-kanji-components.is-gathering .party-component-cell:nth-child(3) {
  --pk-scatter-x: -0.55rem;
  --pk-scatter-y: 0.45rem;
}

.party-kanji-components.is-gathering .party-component-cell:nth-child(4) {
  --pk-scatter-x: 1.1rem;
  --pk-scatter-y: -0.25rem;
}

.party-kanji-components.is-gathering .party-component-cell:nth-child(5) {
  --pk-scatter-x: -1.2rem;
  --pk-scatter-y: 0.2rem;
}

.party-component-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  opacity: 0;
  transform: scale(0.35) translate(var(--pk-scatter-x, 0), calc(var(--pk-scatter-y, 0) + 0.4rem));
  filter: blur(4px);
}

.party-kanji-components--burst.is-bursting {
  animation: pk-burst 700ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.party-kanji-components--slide .party-component-cell.is-arrived {
  animation: pk-slide-in 750ms cubic-bezier(0.34, 1.35, 0.64, 1) forwards;
}

.party-kanji-components--burst .party-component-cell.is-arrived {
  animation: pk-pop-in 750ms cubic-bezier(0.34, 1.45, 0.64, 1) forwards;
}

.party-component-cell.is-glowing .party-component-kanji {
  text-shadow: none;
}

.party-component-kanji {
  font-family: "Yuji Syuku", "Noto Serif JP", serif;
  font-size: var(--pk-component);
  line-height: 1;
  text-shadow: none;
  transition: none;
}

.party-component-label {
  font-size: clamp(0.8rem, 1.8vmin, 1rem);
  letter-spacing: 0.08em;
  text-transform: lowercase;
  color: var(--pk-muted);
}

.party-kanji-equation {
  font-family: "Yuji Syuku", "Noto Serif JP", serif;
  font-size: clamp(1.6rem, 4.5vmin, 2.8rem);
  letter-spacing: 0.06em;
  text-align: center;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 350ms ease, transform 350ms ease;
}

.party-kanji-equation--hidden {
  opacity: 0;
  transform: translateY(0.5rem);
}

.party-kanji-equation.is-visible {
  animation: pk-equation-in 400ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.party-kanji-equation .party-result {
  color: var(--pk-accent);
}

.party-kanji-reading,
.party-kanji-trivia {
  display: none;
}

/* Final — reward + pulse */

.party-kanji-final-wrap {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  justify-items: center;
}

.party-kanji-component-pulse {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.65rem, 1.9vw, 1.1rem);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
}

.party-kanji-component-pulse.is-vertical {
  flex-direction: column;
}

.party-kanji-component-pulse.is-horizontal {
  flex-direction: row;
}

.party-kanji-component-pulse.is-gathering {
  flex-direction: column;
  gap: clamp(0.45rem, 1.4vh, 0.9rem);
}

.party-kanji-component-pulse.is-gathering .party-component-cell:nth-child(1) {
  --pk-scatter-x: -1.1rem;
  --pk-scatter-y: -0.25rem;
}

.party-kanji-component-pulse.is-gathering .party-component-cell:nth-child(2) {
  --pk-scatter-x: 1rem;
  --pk-scatter-y: 0.1rem;
}

.party-kanji-component-pulse.is-gathering .party-component-cell:nth-child(3) {
  --pk-scatter-x: -0.4rem;
  --pk-scatter-y: 0.35rem;
}

.party-kanji-component-pulse.is-visible {
  opacity: var(--pk-pulse-opacity);
}

.party-kanji-component-pulse.is-pulsing {
  animation: pk-pulse 3.2s ease-in-out;
}

.party-component-cell--pulse .party-component-kanji {
  font-size: clamp(4rem, 13.2vmin, 8.6rem);
  color: var(--pk-text);
}

.party-kanji-final-wrap .party-kanji-giant {
  position: relative;
  z-index: 1;
  /* Keep the completed character the centred focal point */
  margin-inline: auto;
  text-align: center;
}

.party-kanji-final .party-kanji-reading {
  display: block;
  color: var(--pk-accent);
  font-style: normal;
  letter-spacing: 0.18em;
  font-size: clamp(0.95rem, 2.2vmin, 1.15rem);
}

.party-kanji-final .party-kanji-meaning {
  display: block;
  margin-top: 0.15rem;
  font-family: "Cormorant Garamond", "Noto Serif JP", serif;
  font-size: clamp(1.15rem, 2.8vmin, 1.55rem);
  font-style: italic;
  letter-spacing: 0.04em;
  color: var(--pk-muted);
}

/* Proof / stroke-order phase retired — Different Strokes series owns that lesson. */

/* Closing message */

.party-kanji-closing-message {
  margin: 0;
  font-size: var(--pk-closing);
  font-style: italic;
  font-weight: 500;
  line-height: 1.35;
  text-align: center;
  max-width: 22ch;
  color: var(--pk-text);
  letter-spacing: 0.02em;
}

/* End card */

.party-kanji-endcard {
  gap: clamp(0.5rem, 1.5vh, 0.85rem);
}

.party-kanji-brand {
  font-size: var(--pk-brand);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--pk-text);
}

.party-kanji-playlist-end {
  font-size: clamp(0.7rem, 1.6vmin, 0.85rem);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--pk-muted);
}

.party-kanji-tagline {
  font-size: var(--pk-tagline);
  font-style: italic;
  color: var(--pk-accent);
  letter-spacing: 0.04em;
}

.party-kanji-disclaimer {
  margin-top: clamp(0.75rem, 2vh, 1.25rem);
  font-size: var(--pk-disclaimer);
  color: var(--pk-muted);
  letter-spacing: 0.04em;
  text-align: center;
  max-width: 42ch;
}

@keyframes pk-giant-enter {
  from {
    opacity: 0;
    transform: scale(0.88);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes pk-challenge-fade {
  from {
    opacity: 0;
    transform: translateY(0.45rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pk-burst {
  0% {
    transform: scale(1.35);
    opacity: 0.2;
    filter: blur(6px);
  }
  100% {
    transform: scale(1);
    opacity: 1;
    filter: blur(0);
  }
}

@keyframes pk-pop-in {
  0% {
    opacity: 0;
    transform: scale(0.2) translate(var(--pk-scatter-x, 0), calc(var(--pk-scatter-y, 0) + 1rem));
    filter: blur(6px);
  }
  70% {
    transform: scale(1.08) translate(var(--pk-scatter-x, 0), calc(var(--pk-scatter-y, 0) - 0.15rem));
  }
  100% {
    opacity: 1;
    transform: scale(1) translate(var(--pk-scatter-x, 0), var(--pk-scatter-y, 0));
    filter: blur(0);
  }
}

@keyframes pk-slide-in {
  from {
    opacity: 0;
    transform: translate(var(--pk-scatter-x, 0), calc(var(--pk-scatter-y, 0) + 1.5rem));
  }
  to {
    opacity: 1;
    transform: translate(var(--pk-scatter-x, 0), var(--pk-scatter-y, 0));
  }
}

@keyframes pk-equation-in {
  from {
    opacity: 0;
    transform: translateY(0.6rem) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes pk-reward-arrive {
  0% {
    opacity: 0;
    transform: scale(0.96);
    filter: none;
    text-shadow: none;
  }
  100% {
    opacity: 1;
    transform: scale(1);
    filter: none;
    text-shadow: none;
  }
}

@keyframes pk-pulse {
  0%,
  100% {
    opacity: calc(var(--pk-pulse-opacity) * 0.65);
    transform: scale(0.98);
  }
  50% {
    opacity: var(--pk-pulse-opacity);
    transform: scale(1.02);
  }
}