/* Source: Desktop / About 사람들 섹션 샘플.html, supplied Claude artifact.
   Preserved timings: inner 60s / outer 100s, face entrance .8s + .15s stagger,
   selection opacity .5s and automatic cycle 7.5s.
   Selection restarts the reading time; pointer presence over a face holds motion briefly.
   Pulse and message motion follow the user's subsequent interaction direction.
   Fonts, accent and page spacing use the Sadari theme; Korean tracking remains normal. */
/* Explicit user overrides: portraits pause and grow on hover; the playback capsule changes background. */
.about2 {
    --about-primary: #e8642c;
    --color-focus: #e8642c;
    --about-inner-duration: 60s;
    --about-outer-duration: 100s;
    --about-selection-duration: .5s;
    --about-face-duration: .8s;
    --about-pulse-scale: 2.35;
}
/* Cover the viewport while allowing smaller screens to grow with the readable content. */
.about2-people {
    --about-cover-top: clamp(24px, 3svh, 40px);
    --about-cover-bottom: clamp(24px, 4svh, 48px);
    display: flex; align-items: center; min-height: 100svh; overflow-x: clip;
    padding-top: calc(var(--header-height) + var(--about-cover-top));
    padding-bottom: var(--about-cover-bottom);
}
.about2-people-layout { grid-template-rows: auto auto; row-gap: clamp(24px, 3svh, 40px); align-content: center; }
.about2-intro h1 { font-size: clamp(26px, min(2.78vw, 4.18svh), 40px); line-height: 1.42; }
.about2-constellation { padding-block: 0; transform: translateY(-12px); }
/* Reserve the final cover layout during loading; reveal only after fonts/images settle. */
html.about2-cover-wait .about2-constellation { opacity: 0; visibility: hidden; }
html.about2-cover-ready .about2-constellation { opacity: 1; visibility: visible; transition: opacity 600ms cubic-bezier(.2,.7,.2,1); }
html.about2-cover-wait .about2-member-node img { animation-play-state: paused; }
.about2-orbit { width: calc(100% - 24px); max-width: min(750px, max(340px, calc(100svh - var(--header-height) - var(--about-cover-top) - var(--about-cover-bottom) - 100px))); }
.about2-orbit-track { position: absolute; inset: 4.666667%; }
.about2-orbit-lines { stroke-width: 1; }
.about2-orbit-lines .about2-inner-ring { stroke-dasharray: 4 5; }
.about2-spokes { position: absolute; inset: 0; width: 100%; height: 100%; stroke: var(--color-rule); stroke-width: 1; pointer-events: none; }
.about2-spokes path { transition: stroke var(--about-selection-duration) ease; }
.about2-spokes path.is-on { stroke: var(--about-primary); }
.about2-signal { --signal-delay: .35s; visibility: hidden; }
.about2-signal.is-on { visibility: visible; }
.about2-spokes clipPath polygon { fill: #fff; stroke: none; }
.about2-message { fill: var(--about-primary); stroke: none; opacity: 0; }
.about2-message circle { fill: var(--about-primary); stroke: var(--color-surface); stroke-width: 1.2px; paint-order: stroke fill; vector-effect: non-scaling-stroke; }
.about2-member-node { position: absolute; left: var(--x); top: var(--y); width: 18.823529%; transform: translate(-50%,-50%); }
.about2-member {
    position: static; display: flex; flex-direction: column; align-items: center; gap: 2px;
    width: 100%; aspect-ratio: auto; border: 0; border-radius: 0; background: none;
    transform: none; font-size: 15px; font-weight: 400; line-height: 1.6;
}
/* Optical scale and centering for the orbit PNGs exclude their orange symbols. */
.about2-face[data-portrait="dandy"] { --face-scale: .994; --face-x: 7.32%; --face-y: -.83%; }
.about2-face[data-portrait="hyolti"] { --face-scale: 1.032; --face-x: -2.72%; --face-y: -1.14%; }
.about2-face[data-portrait="andy"] { --face-scale: 1.147; --face-x: 9.88%; --face-y: -11.16%; }
.about2-face[data-portrait="dion"] { --face-scale: .9; --face-x: 2.25%; --face-y: -.63%; }
.about2-face[data-portrait="mindy"] { --face-scale: 1.047; --face-x: -.58%; --face-y: -1.60%; }
.about2-face[data-portrait="jerry"] { --face-scale: 1.088; --face-x: .76%; --face-y: -8.92%; }
.about2-face[data-portrait="jun"] { --face-scale: 1.022; --face-x: 11.08%; --face-y: -3.27%; }
.about2-face { display: block; position: relative; flex-shrink: 0; width: 100%; aspect-ratio: 1; border-radius: 50%; background: var(--color-surface); }
.about2-face-ink { display: block; width: 100%; height: 100%; transform: translate(var(--face-x,0%),var(--face-y,0%)) scale(var(--face-scale,1)); }
.about2-face img { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; -webkit-user-drag: none; }
/* Face hover is explicitly requested by the user. */
@media (hover: hover) and (pointer: fine) {
    .about2-member .about2-face { transition: transform .2s ease; }
    .about2-member .about2-face:hover { transform: scale(1.05); }
    .about2-playback { transition: background-color .18s ease; }
    .about2-playback:hover { background-color: #fff3ed; }
}
.about2-member .about2-face-ink, .about2-member-name { transition: opacity var(--about-selection-duration) ease, color var(--about-selection-duration) ease; }
.about2-enhanced .about2-member { opacity: 1; color: var(--color-on-surface-muted); }
.about2-enhanced .about2-member .about2-face-ink, .about2-enhanced .about2-member-name { opacity: .5; }
.about2-enhanced .about2-member[aria-selected="true"] :is(.about2-face-ink,.about2-member-name) { opacity: 1; }
.about2-enhanced .about2-member[aria-selected="true"] { opacity: 1; color: var(--about-primary); background: none; transform: none; font-weight: 700; }
.about2-partners li { color: color-mix(in srgb, var(--color-on-surface-muted) 40%, var(--color-surface)); }
.about2-partners .about2-outer-counter { display: block; padding: 4px 10px; background: var(--color-surface); }
.about2-orbit-center { inset: 38%; border: 1px solid var(--about-primary); border-radius: 50%; background: var(--color-surface); font-size: 15px; line-height: 1.65; }
.about2-orbit-center > span { transform: translateY(5px); }
.about2-orbit-center strong { font-weight: 500; }
.about2-orbit-center svg { display: none; }
.about2-center-pulse { position: absolute; inset: 38%; pointer-events: none; }
.about2-center-pulse > span {
    position: absolute; inset: 0; border-radius: 50%; opacity: 0;
    background: radial-gradient(circle closest-side, rgb(232 100 44 / 0) 46%, rgb(232 100 44 / .02) 64%, rgb(232 100 44 / .08) 84%, rgb(232 100 44 / .12) 100%);
}
.about2-orbit-footer { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; margin-top: 24px; }
.about2-orbit-caption { margin: 0; }
.about2-playback {
    position: relative; display: flex; align-items: center; width: min(180px, 100%); min-height: 32px;
    margin-block: 4px; padding: 3px 42px 3px 12px; border: 1px solid var(--color-rule); border-radius: var(--rounded-full);
    background: var(--color-surface);
}
.about2-progress { flex: 1; height: 4px; border-radius: var(--rounded-full); background: var(--color-rule); overflow: hidden; }
.about2-progress-fill { display: block; width: 100%; height: 100%; background: var(--about-primary); transform: scaleX(var(--about-progress, 0)); transform-origin: left center; }
.about2-motion-control { display: inline-flex; gap: 4px; align-items: center; justify-content: center; min-height: 44px; padding-inline: var(--spacing-xs); font: inherit; font-size: 14px; color: var(--color-on-surface-muted); cursor: pointer; }
.about2-motion-control svg { flex-shrink: 0; }
.about2-play-icon, .about2-motion-control[aria-pressed="true"] .about2-pause-icon { display: none; }
.about2-motion-control[aria-pressed="true"] .about2-play-icon { display: block; }
.about2-playback .about2-motion-control { position: absolute; inset: -1px; width: auto; min-height: 0; justify-content: flex-end; padding: 0 14px 0 0; gap: 0; border: 0; border-radius: inherit; background: transparent; }
.about2-profile-head { display: flex; align-items: center; gap: var(--spacing-sm); padding-inline-start: 12px; }
.about2-profile-face { flex: 0 0 128px; width: 128px; height: 128px; }
/* The profile vectors already share an optical size and center. */
.about2-profile-face .about2-face-ink { position: relative; transform: translate(-6px, var(--profile-face-y, 0px)) scale(var(--profile-face-scale, 1)); }
.about2-profile-face[data-portrait="dandy"] { --profile-face-scale: 1.12; }
.about2-profile-face[data-portrait="mindy"] { --profile-face-scale: .84; }
.about2-profile-face[data-portrait="dion"] { --profile-face-scale: .96; }
.about2-profile-face[data-portrait="jun"], .about2-profile-face[data-portrait="jerry"] { --profile-face-y: 6px; }
.about2-profile-face[data-portrait="andy"] { --profile-face-y: 10px; }
.about2-profile-head > div { min-width: 0; }
.about2-profile-head h2 { padding-right: 100px; }
.about2-profiles { position: relative; }
/* Reuse the theme's common_controls type_light buttons, as on AX and the sliders. */
.about2-profile-nav { position: absolute; top: 20px; right: 0; z-index: 2; }
.about2-person-note { padding-top: var(--spacing-sm); border-top: 1px solid var(--color-rule); text-wrap: balance; }
html.about2-booting .about2-profiles,
.about2-enhanced .about2-profiles { display: grid; border-top: var(--about-rule-width) solid var(--color-rule-strong); }
html.about2-booting .about2-profile,
.about2-enhanced .about2-profile {
    grid-area: 1 / 1; align-self: start; margin: 0; border-top: 0;
    visibility: hidden; pointer-events: none; transition: visibility 0s .7s;
}
html.about2-booting .about2:not(.about2-enhanced) .about2-profile:first-of-type { visibility: visible; pointer-events: auto; }
.about2-enhanced .about2-profile.is-active { visibility: visible; pointer-events: auto; transition-delay: 0s; }
/* Keep the rule and navigation still; reveal each piece of the selected introduction. */
.about2-profile-face { --profile-delay: .04s; }
.about2-profile-heading { --profile-delay: .08s; }
.about2-story { --profile-delay: .14s; }
.about2-person-note { --profile-delay: .2s; }
.about2-tags { --profile-delay: .26s; }
.about2-enhanced .about2-profile :is(.about2-profile-face,.about2-profile-heading,.about2-story,.about2-person-note,.about2-tags) {
    opacity: 0; transform: translateY(10px);
    transition: opacity .22s ease, transform .3s ease;
}
.about2-enhanced .about2-profile.is-active :is(.about2-profile-face,.about2-profile-heading,.about2-story,.about2-person-note,.about2-tags) {
    opacity: 1; transform: none;
    transition: opacity .5s ease var(--profile-delay), transform .6s cubic-bezier(.2,.65,.3,1) var(--profile-delay);
}
@keyframes about2-ring-turn { from { transform: rotate(0); } to { transform: rotate(360deg); } }
@keyframes about2-ring-turn-reverse { from { transform: rotate(0); } to { transform: rotate(-360deg); } }
@keyframes about2-face-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes about2-pulse-out {
    0% { transform: scale(1); opacity: 0; }
    20% { opacity: .85; }
    100% { transform: scale(var(--about-pulse-scale)); opacity: 0; }
}
@keyframes about2-message-out {
    0% { transform: translate(0, 0); opacity: 0; }
    2% { opacity: 1; }
    22% { transform: translate(var(--message-x), var(--message-y)); opacity: 1; }
    24%, 100% { transform: translate(var(--message-x), var(--message-y)); opacity: 0; }
}
@keyframes about2-message-in {
    0%, 38% { transform: translate(0, 0); opacity: 0; }
    40% { opacity: 1; }
    60% { transform: translate(var(--reply-x), var(--reply-y)); opacity: 1; }
    62%, 100% { transform: translate(var(--reply-x), var(--reply-y)); opacity: 0; }
}
@media (prefers-reduced-motion: no-preference) {
    html.about2-booting .about2-playback[hidden] { display: flex !important; visibility: hidden; }
    .about2-enhanced .about2-members { animation: about2-ring-turn var(--about-inner-duration) linear infinite; }
    .about2-enhanced .about2-inner-counter { animation: about2-ring-turn-reverse var(--about-inner-duration) linear infinite; }
    .about2-enhanced .about2-partners { animation: about2-ring-turn-reverse var(--about-outer-duration) linear infinite; }
    .about2-enhanced .about2-outer-counter { animation: about2-ring-turn var(--about-outer-duration) linear infinite; }
    .about2-enhanced .about2-member-node img { animation: about2-face-in var(--about-face-duration) ease both; animation-delay: var(--face-delay); }
    .about2-enhanced .about2-center-pulse > span { animation: about2-pulse-out 4s linear infinite; }
    .about2-enhanced .about2-center-pulse > span + span { animation-delay: -2s; }
    .about2-enhanced :where(.about2-signal.is-on) .about2-message-out { animation: about2-message-out 8s linear infinite; animation-delay: var(--signal-delay); }
    .about2-enhanced :where(.about2-signal.is-on) .about2-message-in { animation: about2-message-in 8s linear infinite; animation-delay: var(--signal-delay); }
}
/* A face hover holds the current frame only until the pointer leaves. */
.about2-people[data-motion-paused="true"] :is(.about2-members,.about2-inner-counter,.about2-partners,.about2-outer-counter,.about2-center-pulse > span,.about2-message,.about2-portrait-accent) { animation-play-state: paused; }
@media (min-width: 1201px) and (max-height: 950px) {
    .about2-people { --about-cover-top: 24px; --about-cover-bottom: 24px; }
    .about2-people-layout { row-gap: 24px; }
    .about2-intro > .about2-lead { margin-top: 20px; }
    .about2-story, .about2-tags { margin-top: 20px !important; }
}
@media (min-width: 1201px) and (max-height: 850px) {
    .about2-people-layout { row-gap: 16px; }
    .about2-intro h1 { font-size: clamp(26px, min(2.08vw, 3.9svh), 33px); line-height: 1.35; }
    .about2-intro h1 br:first-child { display: none; }
    .about2-intro .about2-label { margin-bottom: 12px; }
    .about2-intro > .about2-lead { margin-top: 12px; font-size: 16px; line-height: 1.75; }
    .about2-profile { padding-top: 12px; font-size: 16px; line-height: 1.7; }
    .about2-profile-face { flex-basis: 104px; width: 104px; height: 104px; }
    .about2-profile-nav { top: 8px; }
    .about2-profile-head h2 { font-size: 26px; line-height: 1.25; }
    .about2-profile-head h3 { margin-top: 4px; font-size: 17px; line-height: 1.5; }
    .about2-story { margin-top: 12px !important; }
    .about2-person-note { margin-top: 8px !important; padding-top: 10px; }
    .about2-tags { margin-top: 8px !important; }
}
@media (max-width: 1200px) {
    .about2-people { --about-pulse-scale: 1.65; padding-top: calc(var(--header-height) + 32px); padding-bottom: 64px; }
    .about2-people-layout { grid-template-rows: auto auto auto; row-gap: var(--spacing-lg); }
    .about2-constellation { padding-block: 0; }
    .about2-orbit { max-width: 500px; }
    .about2-orbit-footer { margin-top: var(--spacing-md); }
    .about2-orbit-center { inset: 34%; font-size: 14px; }
    .about2-center-pulse { inset: 34%; }
    .about2-profile-face { flex-basis: 104px; width: 104px; height: 104px; }
    .about2-profile-head { align-items: flex-start; }
    .about2-profiles { width: 100%; max-width: 640px; margin-inline: auto; }
}
@media (max-width: 480px) {
    .about2-people { --about-pulse-scale: 1.5; }
    .about2-constellation { margin-inline: 0; }
    .about2-member { font-size: 14px; }
    .about2-partners .about2-outer-counter { padding: 4px; }
    .about2-profile-face { flex-basis: 96px; width: 96px; height: 96px; }
    .about2-orbit-center { inset: 33%; }
    .about2-center-pulse { inset: 33%; }
}
@media (max-width: 600px) {
    html.about2-cover-ready .about2-constellation { transition-duration: 450ms; }
    /* Requested compact orbit labels: secondary names 12px, central copy 13px.
       Keep the three lines centered inside a circle at least 112px across. */
    .about2-partners li { font-size: 12px; line-height: 1.6; }
    .about2-orbit-caption { font-size: 12px; line-height: 1.6; }
    .about2-orbit-center, .about2-center-pulse {
        inset: 50% auto auto 50%; width: max(112px, 36%); height: auto;
        aspect-ratio: 1; transform: translate(-50%, -50%);
    }
    .about2-orbit-center { font-size: 13px; line-height: 1.6; }
    .about2-orbit-center > span { transform: translateY(5px); white-space: nowrap; }
    /* Keep the name and introduction close, with room beside the name for controls. */
    .about2-profile { padding-top: 24px; }
    .about2-profile-head { gap: 12px; padding-inline-start: 0; }
    .about2-profile-face { flex-basis: 80px; width: 80px; height: 80px; }
    .about2-profile-heading { flex: 1; margin-top: 12px; }
    .about2-profile-head h2 { min-height: 0; padding-right: 96px; font-size: 22px; line-height: 1.5; }
    .about2-profile-head h3 { margin-top: 4px; font-size: 15px; line-height: 1.5; }
    .about2-profile-nav { top: 8px; }
    .about2-profile-nav button { width: 44px; height: 44px; box-shadow: none; }
    .about2 .about2-profile[data-about2-panel] .about2-story { margin-top: 16px !important; }
    .about2-person-note { margin-top: 12px !important; padding-top: 12px; }
    .about2-tags { margin-top: 12px !important; }
}
@media (prefers-reduced-motion: reduce) {
    html.about2-cover-ready .about2-constellation { transition: none; }
    .about2-enhanced :is(.about2-profile,.about2-member,.about2-member span,.about2-spokes path,.about2-signal),
    .about2-enhanced :is(.about2-profile,.about2-profile.is-active) :is(.about2-profile-face,.about2-profile-heading,.about2-story,.about2-person-note,.about2-tags) { transition: none; }
    .about2-enhanced .about2-profile { transform: none; }
    .about2-enhanced .about2-member[aria-selected="true"] { transform: none; }
}
@media print {
    html.about2-cover-wait .about2-constellation { opacity: 1; visibility: visible; }
    html.about2-cover-ready .about2-constellation { transition: none; }
    html.about2-booting .about2:not(.about2-enhanced) .about2-profiles { display: block; }
    html.about2-booting .about2:not(.about2-enhanced) .about2-profile { visibility: visible; }
}