@jjlmoya/landings 0.4.0

package/src/landing/team/styles/HumanTouch.css

@@ -0,0 +1,1190 @@
+.human-touch {
+    --human-touch-inverse: #fff;
+
+    position: relative;
+    overflow: hidden;
+}
+
+.human-touch::before,
+.human-touch::after {
+    position: absolute;
+    pointer-events: none;
+    content: "";
+}
+
+.human-touch::before {
+    inset: -15%;
+    background:
+        radial-gradient(circle at 15% 25%, var(--team-pink) 0%, transparent 35%),
+        radial-gradient(circle at 85% 25%, var(--team-mint) 0%, transparent 35%),
+        radial-gradient(circle at 50% 85%, var(--team-gold) 0%, transparent 40%);
+    filter: blur(55px);
+    opacity: 0.8;
+    animation:
+        human-touch-bg-move 8s linear infinite,
+        human-touch-bg-pulse 0.45s cubic-bezier(0.25, 0.8, 0.25, 1) infinite;
+}
+
+.human-touch.is-partying::before {
+    opacity: 1;
+    animation:
+        human-touch-bg-move 1.5s linear infinite,
+        human-touch-bg-pulse 0.18s cubic-bezier(0.25, 0.8, 0.25, 1) infinite;
+}
+
+.human-touch::after {
+    inset: -10%;
+    background:
+        linear-gradient(105deg, transparent 0 44%, var(--team-mint) 45% 46%, transparent 47%),
+        linear-gradient(225deg, transparent 0 53%, var(--team-pink) 54% 55%, transparent 56%);
+    opacity: 0.25;
+    pointer-events: none;
+    animation: human-touch-lasers 3s ease-in-out infinite alternate;
+}
+
+.human-touch.is-partying::after {
+    opacity: 0.74;
+    animation-duration: 0.42s;
+    mix-blend-mode: screen;
+}
+
+.human-touch-shell {
+    position: relative;
+    z-index: 1;
+    display: grid;
+    grid-template-columns: minmax(0, 0.9fr) minmax(320px, 1.1fr);
+    gap: clamp(1.5rem, 5vw, 4rem);
+    align-items: center;
+}
+
+.human-touch-copy {
+    position: relative;
+    background: color-mix(in srgb, var(--team-surface) 72%, transparent);
+    backdrop-filter: blur(12px);
+    border: 1px solid color-mix(in srgb, var(--team-border) 40%, transparent);
+    border-radius: 24px;
+    padding: clamp(1.2rem, 3vw, 2rem);
+    box-shadow: 
+        0 20px 45px rgba(0, 0, 0, 0.15),
+        inset 0 1px 1px rgba(255, 255, 255, 0.05);
+}
+
+.human-touch-copy .team-section-title {
+    text-shadow:
+        0 0 18px color-mix(in srgb, var(--team-mint) 34%, transparent),
+        0 0 42px color-mix(in srgb, var(--team-pink) 24%, transparent);
+    animation: human-touch-title 1.8s ease-in-out infinite;
+}
+
+.human-touch-chipstorm {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.55rem;
+    margin-top: 1.5rem;
+}
+
+.human-touch-chipstorm span {
+    display: inline-flex;
+    border: 1px solid color-mix(in srgb, var(--team-mint) 45%, var(--team-border));
+    border-radius: 999px;
+    padding: 0.5rem 0.72rem;
+    background: color-mix(in srgb, var(--team-surface) 78%, transparent);
+    color: var(--team-ink);
+    font-size: 0.84rem;
+    font-weight: var(--font-weight-bold, 800);
+    box-shadow: 0 0 24px color-mix(in srgb, var(--team-mint) 18%, transparent);
+    animation: human-touch-chip 1.6s ease-in-out infinite;
+}
+
+.human-touch-chipstorm span:nth-child(2n) {
+    border-color: color-mix(in srgb, var(--team-pink) 52%, var(--team-border));
+    animation-delay: -0.4s;
+}
+
+.human-touch-chipstorm span:nth-child(3n) {
+    border-color: color-mix(in srgb, var(--team-gold) 58%, var(--team-border));
+    animation-delay: -0.8s;
+}
+
+.human-touch-board {
+    position: relative;
+    display: grid;
+    gap: 1rem;
+    border: 1px solid color-mix(in srgb, var(--team-mint) 52%, var(--team-border));
+    border-radius: 18px;
+    padding: clamp(1rem, 3vw, 1.4rem);
+    background:
+        linear-gradient(135deg, color-mix(in srgb, var(--team-surface-strong) 90%, transparent), color-mix(in srgb, var(--team-surface) 78%, transparent)),
+        repeating-linear-gradient(90deg, transparent 0 18px, rgba(45, 212, 191, 0.055) 19px 20px);
+    box-shadow:
+        0 30px 90px rgba(0, 0, 0, 0.18),
+        0 0 44px color-mix(in srgb, var(--team-mint) 20%, transparent);
+    animation:
+        human-touch-board 2.4s ease-in-out infinite,
+        human-touch-board-neon 8s linear infinite;
+}
+
+.human-touch.is-partying .human-touch-board {
+    animation:
+        human-touch-board 0.46s ease-in-out infinite,
+        human-touch-board-neon 0.64s linear infinite;
+}
+
+.human-touch.is-partying .human-touch-copy {
+    box-shadow:
+        0 24px 60px rgba(0, 0, 0, 0.22),
+        0 0 44px color-mix(in srgb, var(--team-pink) 28%, transparent),
+        0 0 76px color-mix(in srgb, var(--team-mint) 18%, transparent),
+        inset 0 1px 1px rgba(255, 255, 255, 0.1);
+    animation: human-touch-dopamine-card 0.8s ease-in-out infinite;
+}
+
+.human-touch.is-partying .human-touch-chipstorm span {
+    animation-duration: 0.52s;
+    box-shadow:
+        0 0 24px color-mix(in srgb, var(--team-mint) 28%, transparent),
+        0 0 48px color-mix(in srgb, var(--team-pink) 18%, transparent);
+}
+
+.human-touch-alert {
+    justify-self: start;
+    border-radius: 999px;
+    padding: 0.48rem 0.7rem;
+    background: var(--team-pink);
+    color: var(--human-touch-inverse);
+    font-size: 0.72rem;
+    font-weight: var(--font-weight-bold, 800);
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    box-shadow: 0 0 28px color-mix(in srgb, var(--team-pink) 55%, transparent);
+    animation: human-touch-alert 0.9s steps(2, end) infinite;
+}
+
+.human-touch-card {
+    display: grid;
+    grid-template-columns: minmax(110px, 0.42fr) minmax(0, 1fr);
+    gap: 1rem;
+    align-items: center;
+}
+
+.human-touch-human {
+    position: relative;
+    display: grid;
+    min-height: 180px;
+    place-items: end center;
+    overflow: hidden;
+    border-radius: 14px;
+    background:
+        radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.22), transparent 26%),
+        linear-gradient(180deg, #252a36, #101318);
+}
+
+.human-touch-portrait {
+    position: relative;
+    display: block;
+    width: 100%;
+    height: 100%;
+    min-height: 220px;
+}
+
+.human-touch-portrait-base,
+.human-touch-portrait-wink {
+    display: block;
+    width: 100%;
+    height: 100%;
+    min-height: 220px;
+    object-fit: cover;
+    filter: drop-shadow(0 18px 28px rgba(0, 0, 0, 0.35));
+    animation: human-touch-human 1.2s ease-in-out infinite;
+}
+
+.human-touch-portrait-wink {
+    position: absolute;
+    inset: 0;
+    opacity: 0;
+    animation:
+        human-touch-human 1.2s ease-in-out infinite,
+        human-touch-wink 7s ease-in-out infinite;
+}
+
+.human-touch-human span {
+    position: absolute;
+    right: 0.65rem;
+    bottom: 0.65rem;
+    left: 0.65rem;
+    z-index: 2;
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    border-radius: 12px;
+    padding: 0.55rem 0.65rem;
+    background: rgba(0, 0, 0, 0.54);
+    color: var(--human-touch-inverse);
+    font-size: 0.76rem;
+    font-weight: var(--font-weight-bold, 800);
+    line-height: 1.25;
+    text-align: center;
+    backdrop-filter: blur(8px);
+}
+
+.human-touch-id p {
+    margin: 0;
+    font-size: clamp(2.1rem, 5vw, 4rem);
+    font-weight: var(--font-weight-bold, 800);
+    letter-spacing: 0;
+    line-height: 0.9;
+}
+
+.human-touch-id strong,
+.human-touch-id span {
+    display: block;
+}
+
+.human-touch-id strong {
+    margin-top: 0.45rem;
+    color: var(--team-mint);
+}
+
+.human-touch-id span {
+    margin-top: 0.45rem;
+    color: var(--team-muted);
+    line-height: 1.5;
+}
+
+.human-touch-stats {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 0.8rem;
+}
+
+.human-touch-stats div {
+    border: 1px solid var(--team-border);
+    border-radius: 12px;
+    padding: 0.85rem;
+    background: color-mix(in srgb, var(--team-surface) 78%, transparent);
+    animation: human-touch-stat 1.8s ease-in-out infinite;
+}
+
+.human-touch-stats div:nth-child(2n) {
+    animation-delay: -0.6s;
+}
+
+.human-touch-stats span {
+    display: block;
+    color: var(--team-muted);
+    font-size: 0.74rem;
+    font-weight: var(--font-weight-bold, 800);
+    text-transform: uppercase;
+}
+
+.human-touch-stats strong {
+    display: block;
+    margin-top: 0.3rem;
+    color: var(--team-ink);
+    font-size: 1.05rem;
+}
+
+.human-touch-bob-stamp {
+    position: absolute;
+    right: -1.2rem;
+    bottom: -1.5rem;
+    display: grid;
+    gap: 0.3rem;
+    justify-items: center;
+    width: min(34vw, 190px);
+    rotate: -8deg;
+    animation: human-touch-stamp 1.4s ease-in-out infinite;
+}
+
+.human-touch-bob-stamp img {
+    width: min(100%, 150px);
+    max-height: 230px;
+    height: auto;
+    object-fit: contain;
+    filter: drop-shadow(0 20px 26px rgba(0, 0, 0, 0.36));
+}
+
+.human-touch-bob-stamp span {
+    border: 1px solid color-mix(in srgb, var(--team-gold) 70%, transparent);
+    border-radius: 999px;
+    padding: 0.38rem 0.55rem;
+    background: color-mix(in srgb, var(--team-surface) 86%, transparent);
+    color: var(--team-gold);
+    font-size: 0.7rem;
+    font-weight: var(--font-weight-bold, 800);
+    text-align: center;
+}
+
+.human-touch-party-player {
+    position: absolute;
+    right: clamp(1.2rem, 6vw, 6.5rem);
+    bottom: clamp(1.4rem, 7vw, 5rem);
+    z-index: 2;
+    width: clamp(12rem, 26vw, 22rem);
+    height: clamp(12rem, 26vw, 22rem);
+    pointer-events: none;
+}
+
+.human-touch-party-player::before {
+    position: absolute;
+    inset: 2%;
+    pointer-events: none;
+    border-radius: 50%;
+    background:
+        radial-gradient(circle, color-mix(in srgb, var(--team-gold) 30%, transparent), transparent 22%),
+        radial-gradient(circle, color-mix(in srgb, var(--team-pink) 34%, transparent), transparent 58%),
+        radial-gradient(circle, color-mix(in srgb, var(--team-mint) 22%, transparent), transparent 72%);
+    content: "";
+    filter: blur(18px);
+    opacity: 0.72;
+}
+
+.human-touch-party-player::after {
+    position: absolute;
+    inset: 18%;
+    border: 1px solid color-mix(in srgb, var(--team-mint) 38%, transparent);
+    border-radius: 50%;
+    content: "";
+    opacity: 0.62;
+}
+
+.human-touch.is-partying .human-touch-party-player::before {
+    animation:
+        human-touch-disco-orb 0.36s ease-in-out infinite,
+        human-touch-disco-spin 2.4s linear infinite;
+    opacity: 1;
+}
+
+.human-touch.is-partying .human-touch-party-player::after {
+    animation: human-touch-disco-ring 0.48s ease-out infinite;
+}
+
+.human-touch-audio {
+    display: none;
+}
+
+.human-touch-player-toggle {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    z-index: 3;
+    display: grid;
+    width: clamp(4.2rem, 8vw, 6.2rem);
+    aspect-ratio: 1;
+    place-items: center;
+    border: 1px solid color-mix(in srgb, var(--team-mint) 54%, transparent);
+    border-radius: 50%;
+    color: var(--team-ink);
+    background:
+        radial-gradient(circle at 35% 25%, rgba(255, 255, 255, 0.34), transparent 32%),
+        color-mix(in srgb, var(--team-surface) 58%, transparent);
+    box-shadow:
+        0 0 34px color-mix(in srgb, var(--team-mint) 32%, transparent),
+        0 0 74px color-mix(in srgb, var(--team-pink) 18%, transparent),
+        inset 0 1px 0 rgba(255, 255, 255, 0.2);
+    cursor: pointer;
+    pointer-events: auto;
+    transform: translate(-50%, -50%);
+    backdrop-filter: blur(10px);
+    transition:
+        border-color 160ms ease,
+        box-shadow 160ms ease,
+        transform 160ms ease;
+}
+
+.human-touch-player-toggle:hover,
+.human-touch-player-toggle:focus-visible,
+.human-touch-player-toggle.is-playing {
+    border-color: color-mix(in srgb, var(--team-gold) 78%, transparent);
+    box-shadow:
+        0 0 34px color-mix(in srgb, var(--team-pink) 30%, transparent),
+        0 0 64px color-mix(in srgb, var(--team-mint) 22%, transparent),
+        inset 0 1px 0 rgba(255, 255, 255, 0.26);
+    transform: translate(-50%, -50%) scale(1.08);
+}
+
+.human-touch-player-toggle.is-playing {
+    animation:
+        human-touch-player-bounce 0.38s ease-in-out infinite,
+        human-touch-player-hue 1.2s linear infinite;
+}
+
+.human-touch-player-icon {
+    width: 0;
+    height: 0;
+    margin-left: 0.18rem;
+    border-top: 0.62rem solid transparent;
+    border-bottom: 0.62rem solid transparent;
+    border-left: 0.9rem solid currentcolor;
+}
+
+.human-touch-player-toggle.is-playing .human-touch-player-icon {
+    width: 0.92rem;
+    height: 1.1rem;
+    margin-left: 0;
+    border: 0;
+    background:
+        linear-gradient(90deg, currentcolor 0 34%, transparent 34% 66%, currentcolor 66% 100%);
+}
+
+.human-touch-equalizer {
+    position: absolute;
+    inset: -18% -6% -12%;
+    z-index: 0;
+    display: grid;
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+    gap: clamp(0.8rem, 3vw, 2.6rem);
+    align-items: end;
+    pointer-events: none;
+    opacity: 0.16;
+    mix-blend-mode: screen;
+}
+
+.human-touch-equalizer span {
+    position: relative;
+    width: 100%;
+    height: 42%;
+    border-radius: 999px 999px 0 0;
+    background:
+        linear-gradient(180deg, rgba(255, 255, 255, 0.72), transparent 16%),
+        linear-gradient(180deg, color-mix(in srgb, var(--team-mint) 62%, transparent), transparent 86%);
+    box-shadow:
+        0 0 42px color-mix(in srgb, var(--team-mint) 42%, transparent),
+        0 0 96px color-mix(in srgb, var(--team-mint) 18%, transparent);
+    filter: blur(1.5px);
+    transform-origin: bottom;
+}
+
+.human-touch-equalizer span::after {
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.32), transparent);
+    content: "";
+    opacity: 0.55;
+}
+
+.human-touch-equalizer span:nth-child(2n) {
+    color: var(--team-pink);
+    background:
+        linear-gradient(180deg, rgba(255, 255, 255, 0.72), transparent 16%),
+        linear-gradient(180deg, color-mix(in srgb, var(--team-pink) 62%, transparent), transparent 86%);
+    box-shadow:
+        0 0 42px color-mix(in srgb, var(--team-pink) 42%, transparent),
+        0 0 96px color-mix(in srgb, var(--team-pink) 18%, transparent);
+}
+
+.human-touch-equalizer span:nth-child(3n) {
+    color: var(--team-gold);
+    background:
+        linear-gradient(180deg, rgba(255, 255, 255, 0.72), transparent 16%),
+        linear-gradient(180deg, color-mix(in srgb, var(--team-gold) 62%, transparent), transparent 86%);
+    box-shadow:
+        0 0 42px color-mix(in srgb, var(--team-gold) 42%, transparent),
+        0 0 96px color-mix(in srgb, var(--team-gold) 18%, transparent);
+}
+
+.human-touch.is-partying .human-touch-equalizer {
+    opacity: 0.52;
+}
+
+.human-touch.is-partying .human-touch-equalizer span {
+    animation:
+        human-touch-eq 0.3s ease-in-out infinite,
+        human-touch-eq-spark 0.48s linear infinite;
+}
+
+.human-touch.is-partying .human-touch-equalizer span:nth-child(2) {
+    animation-delay: -0.16s;
+}
+
+.human-touch.is-partying .human-touch-equalizer span:nth-child(3) {
+    animation-delay: -0.3s;
+}
+
+.human-touch.is-partying .human-touch-equalizer span:nth-child(4) {
+    animation-delay: -0.08s;
+}
+
+.human-touch-player-wave span {
+    position: absolute;
+    inset: 14%;
+    border: 1px solid color-mix(in srgb, var(--team-pink) 48%, transparent);
+    border-radius: 50%;
+    opacity: 0.42;
+    box-shadow: 0 0 24px currentcolor;
+}
+
+.human-touch-player-wave span:nth-child(2) {
+    inset: 0;
+    border-color: color-mix(in srgb, var(--team-mint) 42%, transparent);
+}
+
+.human-touch-player-wave span:nth-child(3) {
+    inset: -14%;
+    border-color: color-mix(in srgb, var(--team-gold) 38%, transparent);
+}
+
+.human-touch-player-wave span:nth-child(4) {
+    inset: -28%;
+    border-color: color-mix(in srgb, var(--team-pink) 34%, transparent);
+}
+
+.human-touch-player-wave span:nth-child(5) {
+    inset: -42%;
+    border-color: color-mix(in srgb, var(--team-mint) 28%, transparent);
+}
+
+.human-touch.is-partying .human-touch-player-wave span {
+    animation: human-touch-disco-ring 0.72s ease-out infinite;
+}
+
+.human-touch.is-partying .human-touch-player-wave span:nth-child(2) {
+    animation-delay: -0.36s;
+}
+
+.human-touch.is-partying .human-touch-player-wave span:nth-child(3) {
+    animation-delay: -0.72s;
+}
+
+.human-touch.is-partying .human-touch-player-wave span:nth-child(4) {
+    animation-delay: -0.18s;
+}
+
+.human-touch.is-partying .human-touch-player-wave span:nth-child(5) {
+    animation-delay: -0.54s;
+}
+
+.human-touch-player-bar {
+    position: absolute;
+    right: 3%;
+    bottom: 3%;
+    left: 14%;
+    z-index: 3;
+    overflow: hidden;
+    height: clamp(0.42rem, 0.9vw, 0.72rem);
+    border-radius: 999px;
+    background:
+        linear-gradient(90deg, color-mix(in srgb, var(--team-pink) 10%, transparent), color-mix(in srgb, var(--team-mint) 12%, transparent)),
+        color-mix(in srgb, var(--team-ink) 12%, transparent);
+    opacity: 0.9;
+    box-shadow:
+        0 0 18px color-mix(in srgb, var(--team-pink) 16%, transparent),
+        inset 0 0 0 1px color-mix(in srgb, var(--team-ink) 12%, transparent);
+    pointer-events: auto;
+    cursor: pointer;
+}
+
+.human-touch-player-bar span {
+    display: block;
+    width: 0%;
+    height: 100%;
+    border-radius: inherit;
+    background:
+        radial-gradient(circle at 100% 50%, rgba(255, 255, 255, 0.95), transparent 18%),
+        linear-gradient(90deg, var(--team-pink), var(--team-mint), var(--team-gold));
+    box-shadow:
+        0 0 16px color-mix(in srgb, var(--team-mint) 58%, transparent),
+        0 0 30px color-mix(in srgb, var(--team-pink) 32%, transparent);
+}
+
+.human-touch.is-partying .human-touch-player-bar {
+    animation: human-touch-progress-aura 0.54s ease-in-out infinite;
+}
+
+.human-touch-player-time {
+    position: absolute;
+    right: 0;
+    bottom: 7%;
+    z-index: 3;
+    padding: 0.18rem 0.42rem;
+    border: 1px solid color-mix(in srgb, var(--team-gold) 22%, transparent);
+    border-radius: 999px;
+    color: color-mix(in srgb, var(--team-ink) 82%, transparent);
+    background: color-mix(in srgb, var(--team-surface) 24%, transparent);
+    font-size: clamp(0.72rem, 1.2vw, 0.95rem);
+    font-variant-numeric: tabular-nums;
+    font-weight: var(--font-weight-bold, 800);
+    opacity: 0.86;
+    box-shadow: 0 0 16px color-mix(in srgb, var(--team-gold) 12%, transparent);
+    backdrop-filter: blur(5px);
+}
+
+.human-touch.is-partying .human-touch-player-time {
+    color: var(--team-gold);
+    animation: human-touch-time-glow 0.6s ease-in-out infinite;
+}
+
+.human-touch-disco-lights,
+.human-touch-disco-bursts {
+    position: absolute;
+    inset: -8%;
+    pointer-events: none;
+}
+
+.human-touch-disco-lights span {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 52%;
+    height: 0.16rem;
+    border-radius: 999px;
+    background: linear-gradient(90deg, transparent, var(--team-mint), transparent);
+    opacity: 0;
+    transform-origin: left center;
+    mix-blend-mode: screen;
+    filter: blur(0.5px);
+}
+
+.human-touch-disco-lights span:nth-child(1) {
+    transform: rotate(8deg);
+}
+
+.human-touch-disco-lights span:nth-child(2) {
+    background: linear-gradient(90deg, transparent, var(--team-pink), transparent);
+    transform: rotate(64deg);
+}
+
+.human-touch-disco-lights span:nth-child(3) {
+    background: linear-gradient(90deg, transparent, var(--team-gold), transparent);
+    transform: rotate(126deg);
+}
+
+.human-touch-disco-lights span:nth-child(4) {
+    transform: rotate(190deg);
+}
+
+.human-touch-disco-lights span:nth-child(5) {
+    background: linear-gradient(90deg, transparent, var(--team-pink), transparent);
+    transform: rotate(248deg);
+}
+
+.human-touch-disco-lights span:nth-child(6) {
+    background: linear-gradient(90deg, transparent, var(--team-gold), transparent);
+    transform: rotate(310deg);
+}
+
+.human-touch.is-partying .human-touch-disco-lights span {
+    animation: human-touch-disco-laser 0.44s ease-in-out infinite;
+}
+
+.human-touch.is-partying .human-touch-disco-lights span:nth-child(2n) {
+    animation-delay: -0.16s;
+}
+
+.human-touch.is-partying .human-touch-disco-lights span:nth-child(3n) {
+    animation-delay: -0.29s;
+}
+
+.human-touch-disco-bursts span {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 0.38rem;
+    aspect-ratio: 1;
+    border-radius: 50%;
+    background: var(--team-gold);
+    opacity: 0;
+    box-shadow: 0 0 18px currentcolor;
+}
+
+.human-touch-disco-bursts span:nth-child(2n) {
+    background: var(--team-pink);
+}
+
+.human-touch-disco-bursts span:nth-child(3n) {
+    background: var(--team-mint);
+}
+
+.human-touch.is-partying .human-touch-disco-bursts span {
+    animation: human-touch-disco-burst 0.8s ease-out infinite;
+}
+
+.human-touch.is-partying .human-touch-disco-bursts span:nth-child(1) {
+    --burst-x: -5rem;
+    --burst-y: -4rem;
+}
+
+.human-touch.is-partying .human-touch-disco-bursts span:nth-child(2) {
+    --burst-x: 4rem;
+    --burst-y: -5rem;
+
+    animation-delay: -0.1s;
+}
+
+.human-touch.is-partying .human-touch-disco-bursts span:nth-child(3) {
+    --burst-x: 6rem;
+    --burst-y: 2rem;
+
+    animation-delay: -0.2s;
+}
+
+.human-touch.is-partying .human-touch-disco-bursts span:nth-child(4) {
+    --burst-x: -6rem;
+    --burst-y: 3rem;
+
+    animation-delay: -0.3s;
+}
+
+.human-touch.is-partying .human-touch-disco-bursts span:nth-child(5) {
+    --burst-x: 2rem;
+    --burst-y: 6rem;
+
+    animation-delay: -0.4s;
+}
+
+.human-touch.is-partying .human-touch-disco-bursts span:nth-child(6) {
+    --burst-x: -2rem;
+    --burst-y: -7rem;
+
+    animation-delay: -0.5s;
+}
+
+.human-touch.is-partying .human-touch-disco-bursts span:nth-child(7) {
+    --burst-x: 7rem;
+    --burst-y: -1rem;
+
+    animation-delay: -0.6s;
+}
+
+.human-touch.is-partying .human-touch-disco-bursts span:nth-child(8) {
+    --burst-x: -7rem;
+    --burst-y: -1rem;
+
+    animation-delay: -0.7s;
+}
+
+.human-touch-links {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.7rem;
+}
+
+.human-touch-links a {
+    display: inline-flex;
+    min-height: 2.7rem;
+    align-items: center;
+    border: 1px solid color-mix(in srgb, var(--team-mint) 58%, var(--team-border));
+    border-radius: 999px;
+    padding: 0.55rem 0.9rem;
+    background: color-mix(in srgb, var(--team-surface) 78%, transparent);
+    color: var(--team-ink);
+    font-size: 0.9rem;
+    font-weight: var(--font-weight-bold, 800);
+    text-decoration: none;
+    box-shadow: 0 0 26px color-mix(in srgb, var(--team-mint) 16%, transparent);
+    transition:
+        transform 0.18s ease,
+        border-color 0.18s ease,
+        box-shadow 0.18s ease;
+}
+
+.human-touch-links a:hover {
+    border-color: color-mix(in srgb, var(--team-pink) 70%, var(--team-border));
+    box-shadow: 0 0 34px color-mix(in srgb, var(--team-pink) 20%, transparent);
+    transform: translateY(-3px) rotate(-1deg);
+}
+
+@keyframes human-touch-bg {
+    0%,
+    100% {
+        transform: translate3d(0, 0, 0) rotate(0deg);
+    }
+
+    50% {
+        transform: translate3d(0.8rem, -0.6rem, 0) rotate(1deg);
+    }
+}
+
+@keyframes human-touch-scan {
+    0%,
+    100% {
+        opacity: 0.24;
+        transform: translateX(-1rem);
+    }
+
+    50% {
+        opacity: 0.9;
+        transform: translateX(1rem);
+    }
+}
+
+@keyframes human-touch-title {
+    0%,
+    100% {
+        transform: skewX(0deg);
+    }
+
+    50% {
+        transform: skewX(-2deg);
+    }
+}
+
+@keyframes human-touch-chip {
+    0%,
+    100% {
+        transform: translateY(0) rotate(0deg);
+    }
+
+    50% {
+        transform: translateY(-0.35rem) rotate(1.5deg);
+    }
+}
+
+@keyframes human-touch-board {
+    0%,
+    100% {
+        transform: translateY(0);
+    }
+
+    50% {
+        transform: translateY(-0.35rem);
+    }
+}
+
+@keyframes human-touch-alert {
+    50% {
+        filter: hue-rotate(50deg) brightness(1.25);
+    }
+}
+
+@keyframes human-touch-human {
+    0%,
+    100% {
+        transform: translateY(0) scale(1);
+    }
+
+    50% {
+        transform: translateY(-0.4rem) scale(1.03);
+    }
+}
+
+@keyframes human-touch-wink {
+    0%, 88%, 100% {
+        opacity: 0;
+    }
+
+    90%, 95% {
+        opacity: 1;
+    }
+}
+
+@keyframes human-touch-stat {
+    50% {
+        border-color: color-mix(in srgb, var(--team-mint) 50%, var(--team-border));
+        box-shadow: 0 0 22px color-mix(in srgb, var(--team-mint) 13%, transparent);
+    }
+}
+
+@keyframes human-touch-stamp {
+    0%,
+    100% {
+        transform: rotate(0deg) scale(1);
+    }
+
+    50% {
+        transform: rotate(4deg) scale(1.04);
+    }
+}
+
+@keyframes human-touch-bg-move {
+    0% {
+        transform: translate3d(0, 0, 0) rotate(0deg);
+        filter: blur(55px) hue-rotate(0deg);
+    }
+
+    50% {
+        transform: translate3d(2rem, -2rem, 0) rotate(180deg);
+        filter: blur(45px) hue-rotate(180deg);
+    }
+
+    100% {
+        transform: translate3d(0, 0, 0) rotate(360deg);
+        filter: blur(55px) hue-rotate(360deg);
+    }
+}
+
+@keyframes human-touch-bg-pulse {
+    0%, 100% {
+        opacity: 0.5;
+        filter: brightness(0.8) blur(55px);
+    }
+
+    50% {
+        opacity: 0.95;
+        filter: brightness(1.35) blur(45px);
+    }
+}
+
+@keyframes human-touch-lasers {
+    0% {
+        transform: translateY(-15%) scaleY(1) rotate(-5deg);
+        filter: hue-rotate(0deg) brightness(1);
+    }
+
+    50% {
+        transform: translateY(15%) scaleY(1.2) rotate(5deg);
+        filter: hue-rotate(120deg) brightness(1.8);
+    }
+
+    100% {
+        transform: translateY(-15%) scaleY(1) rotate(-5deg);
+        filter: hue-rotate(240deg) brightness(1.2);
+    }
+}
+
+@keyframes human-touch-board-neon {
+    0%, 100% {
+        border-color: color-mix(in srgb, var(--team-mint) 60%, var(--team-border));
+        box-shadow:
+            0 30px 90px rgba(0, 0, 0, 0.18),
+            0 0 35px color-mix(in srgb, var(--team-mint) 25%, transparent);
+    }
+
+    33% {
+        border-color: color-mix(in srgb, var(--team-pink) 60%, var(--team-border));
+        box-shadow:
+            0 30px 90px rgba(0, 0, 0, 0.18),
+            0 0 35px color-mix(in srgb, var(--team-pink) 25%, transparent);
+    }
+
+    66% {
+        border-color: color-mix(in srgb, var(--team-gold) 60%, var(--team-border));
+        box-shadow:
+            0 30px 90px rgba(0, 0, 0, 0.18),
+            0 0 35px color-mix(in srgb, var(--team-gold) 25%, transparent);
+    }
+}
+
+@keyframes human-touch-party-scan {
+    from {
+        transform: translateX(-48%);
+    }
+
+    to {
+        transform: translateX(48%);
+    }
+}
+
+@keyframes human-touch-disco-orb {
+    0%,
+    100% {
+        filter: blur(18px) hue-rotate(0deg);
+        transform: scale(0.94);
+    }
+
+    50% {
+        filter: blur(11px) hue-rotate(120deg);
+        transform: scale(1.12);
+    }
+}
+
+@keyframes human-touch-disco-spin {
+    from {
+        rotate: 0deg;
+    }
+
+    to {
+        rotate: 360deg;
+    }
+}
+
+@keyframes human-touch-disco-ring {
+    0% {
+        opacity: 0.76;
+        transform: scale(0.78);
+    }
+
+    100% {
+        opacity: 0;
+        transform: scale(1.24);
+    }
+}
+
+@keyframes human-touch-player-bounce {
+    0%,
+    100% {
+        transform: translate(-50%, -50%) scale(1.02) rotate(-1deg);
+    }
+
+    50% {
+        transform: translate(-50%, -50%) scale(1.15) rotate(2deg);
+    }
+}
+
+@keyframes human-touch-player-hue {
+    from {
+        filter: hue-rotate(0deg) saturate(1);
+    }
+
+    to {
+        filter: hue-rotate(360deg) saturate(1.35);
+    }
+}
+
+@keyframes human-touch-dopamine-card {
+    0%,
+    100% {
+        transform: translateY(0) rotate(0deg);
+    }
+
+    50% {
+        transform: translateY(-0.18rem) rotate(-0.35deg);
+    }
+}
+
+@keyframes human-touch-disco-laser {
+    0%,
+    100% {
+        opacity: 0;
+        scale: 0.82 1;
+    }
+
+    50% {
+        opacity: 0.88;
+        scale: 1.18 1;
+    }
+}
+
+@keyframes human-touch-disco-burst {
+    0% {
+        opacity: 0;
+        transform: translate(-50%, -50%) scale(0.4);
+    }
+
+    18% {
+        opacity: 1;
+    }
+
+    100% {
+        opacity: 0;
+        transform: translate(calc(-50% + var(--burst-x)), calc(-50% + var(--burst-y))) scale(1.15);
+    }
+}
+
+@keyframes human-touch-eq {
+    0%,
+    100% {
+        transform: scaleY(0.28);
+    }
+
+    50% {
+        transform: scaleY(1.08);
+    }
+}
+
+@keyframes human-touch-eq-spark {
+    0%,
+    100% {
+        filter: blur(1.5px) hue-rotate(0deg) brightness(1);
+    }
+
+    50% {
+        filter: blur(0.5px) hue-rotate(80deg) brightness(1.45);
+    }
+}
+
+@keyframes human-touch-progress-aura {
+    0%,
+    100% {
+        box-shadow:
+            0 0 18px color-mix(in srgb, var(--team-pink) 16%, transparent),
+            inset 0 0 0 1px color-mix(in srgb, var(--team-ink) 12%, transparent);
+    }
+
+    50% {
+        box-shadow:
+            0 0 28px color-mix(in srgb, var(--team-mint) 34%, transparent),
+            0 0 54px color-mix(in srgb, var(--team-pink) 18%, transparent),
+            inset 0 0 0 1px color-mix(in srgb, var(--team-gold) 18%, transparent);
+    }
+}
+
+@keyframes human-touch-time-glow {
+    0%,
+    100% {
+        text-shadow: 0 0 8px color-mix(in srgb, var(--team-gold) 28%, transparent);
+    }
+
+    50% {
+        text-shadow:
+            0 0 12px color-mix(in srgb, var(--team-gold) 64%, transparent),
+            0 0 24px color-mix(in srgb, var(--team-pink) 32%, transparent);
+    }
+}
+
+.human-touch-ragebait-inline {
+    display: inline-block;
+    border: 1px solid var(--team-pink);
+    border-radius: 4px;
+    padding: 0 0.35rem;
+    color: var(--team-pink);
+    font-weight: var(--font-weight-bold, 800);
+    line-height: 1.2;
+}
+
+.human-touch-ragebait-box {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    margin-top: 1.25rem;
+    border: 1px dashed color-mix(in srgb, var(--team-pink) 45%, transparent);
+    border-radius: 12px;
+    padding: 0.85rem 1.1rem;
+    background: color-mix(in srgb, var(--team-pink) 6%, transparent);
+}
+
+.human-touch-ragebait-badge {
+    flex-shrink: 0;
+    border: 1px solid var(--team-pink);
+    border-radius: 6px;
+    padding: 0.25rem 0.5rem;
+    color: var(--team-pink);
+    font-size: 0.78rem;
+    font-weight: var(--font-weight-bold, 800);
+    letter-spacing: 0.05em;
+    text-transform: uppercase;
+}
+
+.human-touch-ragebait-explanation {
+    margin: 0;
+    color: var(--team-muted);
+    font-size: 0.88rem;
+    line-height: 1.5;
+}
+
+@media (max-width: 560px) {
+    .human-touch-ragebait-box {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 0.6rem;
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .human-touch,
+    .human-touch *,
+    .human-touch::before,
+    .human-touch::after {
+        animation-name: none;
+    }
+}
+
+@media (max-width: 860px) {
+    .human-touch-shell {
+        grid-template-columns: 1fr;
+    }
+}
+
+@media (max-width: 560px) {
+    .human-touch-card,
+    .human-touch-stats {
+        grid-template-columns: 1fr;
+    }
+
+    .human-touch-bob-stamp {
+        position: relative;
+        right: auto;
+        bottom: auto;
+        justify-self: center;
+        margin-top: 0.5rem;
+    }
+}