<section id="connection-experience">
<style>
@import url('https://fonts.googleapis.com/css2?family=Fahkwang:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');
#connection-experience {
position: relative;
background: radial-gradient(circle at 50% 50%, #121212 0%, #080808 100%);
padding-block: var(--et-spacing-vertical-lg, 100px);
padding-inline: var(--et-spacing-horizontal);
overflow: hidden;
border-top: 1px solid rgba(255, 255, 255, 0.08);
border-bottom: none;
font-family: 'Fahkwang', sans-serif;
}
#connection-experience::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(circle at 10% 30%, rgba(241, 223, 138, 0.05) 0%, transparent 50%),
radial-gradient(circle at 90% 80%, rgba(241, 223, 138, 0.03) 0%, transparent 40%);
pointer-events: none;
z-index: 1;
}
#connection-experience .experience-container {
position: relative;
z-index: 10;
margin-inline: auto;
max-width: 72rem;
}
/* NAGŁÓWEK I INTRO */
#connection-experience .header-group {
text-align: center;
margin-bottom: 64px;
}
#connection-experience .tag {
color: var(--et-colors-brand, #f1df8a);
font-weight: 600;
font-size: 13px;
letter-spacing: 0.15em;
text-transform: uppercase;
margin-bottom: 12px;
display: block;
font-family: 'Fahkwang', sans-serif;
}
#connection-experience .heading {
color: #ffffff;
font-weight: 600;
font-size: 32px;
line-height: 1.25;
letter-spacing: -0.02em;
margin-bottom: 24px;
text-wrap: balance;
font-family: 'Fahkwang', sans-serif;
}
@media (min-width: 640px) {
#connection-experience .heading {
font-size: 44px;
}
}
#connection-experience .intro-paragraph {
color: #9ca3af;
font-size: 17px;
line-height: 1.8;
max-width: 44rem;
margin-inline: auto;
text-wrap: balance;
font-family: 'Fahkwang', sans-serif;
}
#connection-experience .intro-paragraph strong {
color: #ffffff;
}
#connection-experience .intro-paragraph span.brand-glow {
color: var(--et-colors-brand, #f1df8a);
}
/* CZTERY KROKI */
#connection-experience .steps-flow-container {
position: relative;
margin-block: 60px 0;
}
@media (min-width: 1024px) {
#connection-experience .steps-flow-line {
position: absolute;
top: 48px;
left: 12.5%;
right: 12.5%;
height: 2px;
background: linear-gradient(to right,
rgba(241, 223, 138, 0.05) 0%,
rgba(241, 223, 138, 0.7) 30%,
rgba(241, 123, 138, 0.7) 70%,
rgba(241, 223, 138, 0.05) 100%
);
box-shadow: 0 0 12px rgba(241, 223, 138, 0.4);
z-index: 1;
}
}
#connection-experience .steps-grid {
display: grid;
grid-template-columns: 1fr;
gap: 40px;
position: relative;
z-index: 2;
}
@media (min-width: 640px) {
#connection-experience .steps-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
#connection-experience .steps-grid {
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
}
#connection-experience .step-card {
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 12px;
padding: 32px 24px;
text-align: center;
transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
#connection-experience .step-card:hover {
background: rgba(255, 255, 255, 0.04);
border-color: rgba(241, 223, 138, 0.35);
transform: translateY(-5px);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
}
#connection-experience .step-badge {
width: 42px;
height: 42px;
background: rgba(241, 223, 138, 0.1);
border: 1px solid rgba(241, 223, 138, 0.4);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--et-colors-brand, #f1df8a);
font-weight: 700;
font-size: 16px;
margin: 0 auto 20px;
box-shadow: 0 0 15px rgba(241, 223, 138, 0.15);
transition: all 0.3s ease;
font-family: 'Fahkwang', sans-serif;
}
#connection-experience .step-card:hover .step-badge {
background: var(--et-colors-brand, #f1df8a);
color: #000000;
box-shadow: 0 0 20px rgba(241, 223, 138, 0.4);
}
#connection-experience .step-title {
color: #ffffff;
font-size: 18px;
font-weight: 600;
margin-bottom: 12px;
letter-spacing: -0.01em;
font-family: 'Fahkwang', sans-serif;
}
#connection-experience .step-desc {
color: #9cb3af;
font-size: 14px;
line-height: 1.6;
font-family: 'Fahkwang', sans-serif;
}
/* ========================================================================= */
/* SEKCYJNE ROZSZERZENIE: INTERAKTYWNA PREZENTACJA WIRU KLEPSYDRY I 10 EMOCJI */
/* ========================================================================= */
#connection-experience .interactive-echo-section {
border-top: 1px solid rgba(255, 255, 255, 0.08);
padding-top: 80px;
margin-top: 80px;
position: relative;
}
#connection-experience .demo-tag-disclaimer {
position: absolute;
top: 16px;
right: 0;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.12em;
color: rgba(255, 255, 255, 0.35);
font-weight: 600;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.06);
padding: 4px 12px;
border-radius: 4px;
font-family: 'Fahkwang', sans-serif;
}
#connection-experience .echo-interactive-grid {
display: grid;
grid-template-columns: 1fr;
gap: 32px;
margin-top: 40px;
align-items: stretch;
max-width: 66rem;
margin-inline: auto;
}
@media (min-width: 1024px) {
#connection-experience .echo-interactive-grid {
grid-template-columns: 1fr 1fr;
gap: 40px;
}
}
/* TYLKO PANEL LEWY */
#connection-experience .left-interaction-panel {
background: rgba(14, 14, 14, 0.55);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 16px;
padding: 28px 24px;
display: flex;
flex-direction: column;
gap: 20px;
box-shadow: 0 15px 35px rgba(0,0,0,0.5);
}
#connection-experience .panel-section-title {
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.12em;
color: rgba(255, 255, 255, 0.4);
font-weight: 700;
margin-bottom: 2px;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
padding-bottom: 8px;
}
#connection-experience .counter-indicator-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 4px;
}
#connection-experience .counter-main-num {
font-size: 15px;
font-weight: 700;
color: #ffffff;
}
#connection-experience .counter-particles-num {
font-size: 13px;
font-weight: 700;
color: var(--active-theme-color, #f1df8a);
opacity: 0.95;
}
#connection-experience .counter-subinfo {
font-size: 12px;
color: var(--active-theme-color, #f1df8a);
font-weight: 600;
}
/* Pigułki aktywnych Echo */
#connection-experience .added-echoes-tags-wrapper {
display: flex;
flex-wrap: wrap;
gap: 6px;
min-height: 38px;
padding: 10px;
background: rgba(0,0,0,0.25);
border-radius: 8px;
border: 1px dashed rgba(255, 255, 255, 0.05);
}
#connection-experience .added-eco-tag {
font-size: 10.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 4px 10px;
border-radius: 12px;
color: #000000;
display: inline-flex;
align-items: center;
gap: 4px;
animation: spawnTag 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes spawnTag {
0% { transform: scale(0.6); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
/* Wybór emocji */
#connection-experience .emotion-selector-pills {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 8px;
}
#connection-experience .emotion-pill {
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.1);
padding: 8px 16px;
font-size: 13px;
font-weight: 600;
border-radius: 20px;
color: rgba(255,255,255,0.7);
cursor: pointer;
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
font-family: inherit;
}
#connection-experience .emotion-pill:hover {
background: rgba(255, 255, 255, 0.08);
color: #ffffff;
}
/* Kolorowania aktywne dla poszczególnych emocji */
#connection-experience .emotion-pill.active-pill[data-emotion="szczescie"] {
background: rgba(241, 223, 138, 0.2);
border-color: #f1df8a;
color: #f1df8a;
}
#connection-experience .emotion-pill.active-pill[data-emotion="duma"] {
background: rgba(168, 85, 247, 0.2);
border-color: #a855f7;
color: #c084fc;
}
#connection-experience .emotion-pill.active-pill[data-emotion="strach"] {
background: rgba(255, 255, 255, 0.12);
border-color: #cbd5e1;
color: #ffffff;
}
#connection-experience .emotion-pill.active-pill[data-emotion="milosc"] {
background: rgba(244, 63, 94, 0.2);
border-color: #f43f5e;
color: #fda4af;
}
#connection-experience .emotion-pill.active-pill[data-emotion="samotnosc"] {
background: rgba(14, 165, 233, 0.2);
border-color: #0ea5e9;
color: #38bdf8;
}
/* Suwak intensywności */
#connection-experience .slider-container {
display: flex;
flex-direction: column;
gap: 10px;
}
#connection-experience .slider-labels-row {
display: flex;
justify-content: space-between;
font-size: 13px;
color: #ffffff;
}
#connection-experience .intensity-val-glow {
font-weight: 700;
color: var(--active-theme-color, #f1df8a);
transition: color 0.3s;
}
#connection-experience .range-slider-input {
-webkit-appearance: none;
width: 100%;
height: 6px;
border-radius: 3px;
background: rgba(255, 255, 255, 0.1);
outline: none;
}
#connection-experience .range-slider-input::-webkit-slider-thumb {
-webkit-appearance: none;
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--active-theme-color, #f1df8a);
box-shadow: 0 0 10px var(--active-theme-color, #f1df8a);
cursor: pointer;
transition: background 0.3s, box-shadow 0.3s;
}
/* Etap 2: Bryła wizualizacyjna Echo */
#connection-experience .blob-visualizer-container {
background: rgba(10, 10, 10, 0.7);
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 12px;
padding: 16px;
text-align: center;
position: relative;
}
#connection-experience .interactive-organic-visualizer {
aspect-ratio: 1 / 1;
width: 100%;
max-width: 125px;
margin: 8px auto 0;
background: radial-gradient(circle at center, var(--active-theme-glow-rgba, rgba(241, 223, 138, 0.15)) 0%, transparent 70%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
position: relative;
transition: background 0.3s;
}
#connection-experience .interactive-organic-blob {
width: 65px;
height: 65px;
background: var(--active-theme-gradient, radial-gradient(circle at 30% 30%, #f1df8a 0%, #cca43b 70%));
border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
box-shadow: 0 0 25px var(--active-theme-color, #f1df8a), inset -4px -4px 10px rgba(0,0,0,0.4);
transform-style: preserve-3d;
transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s, background 0.3s;
position: relative;
z-index: 2;
}
#connection-experience .interactive-organic-visualizer::after {
content: "";
position: absolute;
width: 65px;
height: 65px;
background: var(--active-theme-color, #f1df8a);
border-radius: inherit;
filter: blur(12px);
transition: background 0.3s;
opacity: 0.25;
z-index: 1;
}
#connection-experience .sub-caption-bottom {
font-size: 11.5px;
color: rgba(255, 255, 255, 0.35);
margin-top: 10px;
font-style: italic;
}
#connection-experience .limit-reached-message {
display: none;
background: rgba(241, 223, 138, 0.08);
border: 1px solid var(--et-colors-brand, #f1df8a);
border-radius: 10px;
padding: 16px;
color: #ffffff;
font-size: 13.5px;
line-height: 1.6;
text-align: center;
animation: spawnTag 0.4s ease;
font-weight: 500;
}
/* PRAWY PANEL: VIVID AURUM */
#connection-experience .right-sculpture-panel {
background: rgba(14, 14, 14, 0.55);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 16px;
padding: 28px 24px;
display: flex;
flex-direction: column;
gap: 16px;
box-shadow: 0 15px 35px rgba(0,0,0,0.5);
position: relative;
}
#connection-experience .sculpture-header-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 2px;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
padding-bottom: 8px;
}
#connection-experience .sculpture-mode-selector {
display: flex;
gap: 8px;
}
#connection-experience .sculpture-mode-btn {
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.15);
color: rgba(255, 255, 255, 0.5);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
padding: 6px 12px;
border-radius: 4px;
cursor: pointer;
transition: all 0.3s;
}
#connection-experience .sculpture-mode-btn.active {
background: rgba(255, 255, 255, 0.1);
color: #ffffff;
border-color: rgba(255, 255, 255, 0.4);
}
/* Canvas / Swarm container dla Tornado Klepsydry */
#connection-experience .canvas-swarm-wrapper {
position: relative;
width: 100%;
aspect-ratio: 16 / 11;
background: #050506;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 12px;
overflow: hidden;
box-shadow: inset 0 0 50px rgba(0,0,0,0.95);
}
#connection-experience #canvas-aurum-swarm {
display: block;
width: 100%;
height: 100%;
}
/* Flying spark overlay */
#connection-experience .flying-spark {
position: fixed;
pointer-events: none;
z-index: 100005;
border-radius: 50%;
background: radial-gradient(circle at 35% 35%, #ffffff 0%, var(--active-theme-color, #f1df8a) 60%, transparent 100%);
box-shadow: 0 0 20px var(--active-theme-color, #f1df8a), 0 0 35px var(--active-theme-color, #f1df8a);
opacity: 0;
transition: opacity 0.1s;
}
/* Przyciski operacyjne */
#connection-experience .interactive-action-pills {
display: flex;
justify-content: center;
gap: 12px;
margin-top: 4px;
}
#connection-experience .add-trigger-btn {
background: var(--active-theme-color, #f1df8a);
border: 1px solid var(--active-theme-color, #f1df8a);
color: #000000;
font-weight: 700;
font-size: 14px;
padding: 10px 24px;
border-radius: 30px;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
font-family: inherit;
box-shadow: 0 4px 15px rgba(138, 138, 241, 0.2);
}
#connection-experience .add-trigger-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(241, 223, 138, 0.4);
}
#connection-experience .add-trigger-btn:disabled {
background: rgba(255,255,255,0.06);
border-color: rgba(255,255,255,0.08);
color: rgba(255,255,255,0.25);
cursor: not-allowed;
transform: none;
box-shadow: none;
}
#connection-experience .reset-demo-btn {
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.2);
color: rgba(255, 255, 255, 0.6);
font-weight: 600;
font-size: 13px;
padding: 10px 20px;
border-radius: 30px;
cursor: pointer;
transition: all 0.3s;
font-family: inherit;
}
#connection-experience .reset-demo-btn:hover {
border-color: rgba(255, 255, 255, 0.4);
color: #ffffff;
}
#connection-experience .dynamic-effect-caption-wrapper {
margin-top: 4px;
}
#connection-experience .dynamic-caption-container {
font-size: 13.5px;
line-height: 1.6;
color: #9cb1af;
padding: 12px 16px;
background: rgba(255, 255, 255, 0.02);
border-left: 2px solid var(--active-theme-color, #38bdf8);
border-radius: 0 6px 6px 0;
transition: border-color 0.3s;
font-family: 'Fahkwang', sans-serif;
}
#connection-experience .dynamic-caption-container strong {
color: #ffffff;
}
#connection-experience .dynamic-caption-container .variable-emotion {
color: var(--active-theme-color, #f1df8a);
font-weight: 600;
transition: color 0.3s;
}
/* LEJEK DECYZYJNY DLA "JEDNO ECHO" */
#connection-experience .decision-block-wrapper {
margin-block: 40px 0;
text-align: center;
background: rgba(255, 255, 255, 0.01);
padding: 36px 32px;
border-radius: 12px;
border: 1px dashed rgba(255, 255, 255, 0.08);
box-shadow: 0 15px 35px rgba(0,0,0,0.3);
max-width: 44rem;
margin-inline: auto;
}
#connection-experience .decision-question {
font-size: 20px;
color: #ffffff;
font-weight: 600;
margin-bottom: 24px;
letter-spacing: -0.01em;
font-family: 'Fahkwang', sans-serif;
}
#connection-experience .decision-btn-group {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 16px;
}
@media (min-width: 640px) {
#connection-experience .decision-btn-group {
flex-direction: row;
gap: 18px;
}
}
#connection-experience .btn-decision {
padding: 14px 32px;
font-size: 14.5px;
font-weight: 700;
text-decoration: none;
border-radius: 30px;
transition: all 0.3s ease;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
font-family: 'Fahkwang', sans-serif;
}
#connection-experience .btn-decision-primary {
background: var(--et-colors-brand, #f1df8a);
color: #000000;
border: 1px solid var(--et-colors-brand, #f1df8a);
box-shadow: 0 4px 15px rgba(138, 138, 241, 0.2);
}
#connection-experience .btn-decision-primary:hover {
box-shadow: 0 8px 25px rgba(241, 223, 138, 0.4);
transform: translateY(-2px);
}
#connection-experience .btn-decision-secondary {
background: transparent;
color: #ffffff;
border: 1px solid rgba(255, 255, 255, 0.25);
}
#connection-experience .btn-decision-secondary:hover {
border-color: var(--et-colors-brand, #f1df8a);
color: var(--et-colors-brand, #f1df8a);
transform: translateY(-2px);
}
/* PODSUMOWANIE WYRÓŻNIONE */
#connection-experience .highlight-quote-box {
border-left: 3px solid var(--et-colors-brand, #f1df8a);
background: rgba(241, 223, 138, 0.04);
padding: 24px 32px;
border-radius: 0 12px 12px 0;
max-width: 44rem;
margin: 80px auto 40px;
text-align: left;
}
#connection-experience .highlight-quote-text {
color: #ffffff;
font-size: 19px;
font-weight: 500;
line-height: 1.6;
font-style: italic;
margin: 0;
font-family: 'Fahkwang', sans-serif;
}
#connection-experience .highlight-quote-text strong {
color: var(--et-colors-brand, #f1df8a);
font-style: normal;
}
@media (prefers-reduced-motion: reduce) {
#connection-experience .organic-echo-blob {
animation: none !important;
}
#connection-experience .organic-echo-visualizer::after {
animation: none !important;
}
}
</style>
<div class="experience-container">
<!-- ETAP 1: WYJAŚNIENIE CZTERECH KROKÓW (Wstęp i Proces) -->
<div class="header-group">
<span class="tag">VIVIDI.FORLIFE × VIVID AURUM</span>
<h2 class="heading">Od Twojej emocji do żywego dzieła</h2>
<p class="intro-paragraph">
Vivid Aurum nie zakończyło się na wystawie. Forma, która wcześniej żyła w świetle i rzeźbach, przeniosła się do <span class="brand-glow">Vividi.ForLife</span>.<br><br>
Kiedy zatrzymujesz się przy sobie i zapisujesz emocję, powstaje Twoje <strong>Echo</strong>: osobisty ślad światła, koloru i formy. Łączy się ono z Echami innych ludzi i staje się częścią rozwijającego się <strong>Vivid Aurum</strong>.
</p>
</div>
<!-- Przepływ etapów -->
<div class="steps-flow-container">
<div class="steps-flow-line" aria-hidden="true"></div>
<div class="steps-grid">
<!-- Krok 1 -->
<div class="step-card">
<div class="step-badge">1</div>
<h3 class="step-title">Zauważasz emocję</h3>
<p class="step-desc">Wybierasz w Vividi.ForLife to, co czujesz, i określasz intensywność doświadczenia.</p>
</div>
<!-- Krok 2 -->
<div class="step-card">
<div class="step-badge">2</div>
<h3 class="step-title">Powstaje Twoje Echo</h3>
<p class="step-desc">Twoja emocja otrzymuje vlastną, unikalną formę wizualną.</p>
</div>
<!-- Krok 3 -->
<div class="step-card">
<div class="step-badge">3</div>
<h3 class="step-title">Echo dołącza do Vivid Aurum</h3>
<p class="step-desc">Łączy się z Echami innych ludzi i wpływa na wspólną kompozycję dzieła.</p>
</div>
<!-- Krok 4 -->
<div class="step-card">
<div class="step-badge">4</div>
<h3 class="step-title">Dzieło wraca do świata</h3>
<p class="step-desc">Wszystkie Echa spotkają się w finałowym performansie podczas Gali Charytatywnej „Zwycięzcy z Samobójstwem".</p>
</div>
</div>
</div>
<!-- ========================================================================= -->
<div class="interactive-echo-section" id="connection-experience-interactive">
<div class="demo-tag-disclaimer">PRZYKŁADOWA WIZUALIZACJA</div>
<!-- Nagłówki podsekcji -->
<div class="header-group interactive-echo-section-header">
<span class="tag">ZOBACZ, JAK TO DZIAŁA</span>
<h2 class="heading">Jedno Echo zmienia całe dzieło</h2>
<p class="intro-paragraph">
Wybierz emocję, określ jej intensywność i zobacz, jak Twoje Echo staje się częścią Vivid Aurum. Podczas tej wizualizacji możesz dodać maksymalnie 10 różnych Echo.
</p>
</div>
<!-- Interaktywna kompozycja demonstracyjna -->
<div class="echo-interactive-grid">
<!-- KOLUMNA LEWA: TWOJE ECHO (OBSŁUGUJE DO 10 PIGUŁEK) -->
<div class="left-interaction-panel">
<!-- PANEL LICZNIKA I DODANYCH TAGÓW -->
<div>
<div class="panel-section-title">Twoje Echa w locie</div>
<div class="counter-indicator-row">
<span class="counter-main-num" id="counter-display">Twoje Echa: 0/10</span>
<span class="counter-particles-num" id="particles-counter-display">Cząstki w Vivid Aurum: 0</span>
</div>
<div class="counter-indicator-row" style="margin-top: 4px;">
<span class="counter-subinfo" id="counter-status">Stwórz pierwsze Echo</span>
</div>
<!-- Wstęga pigułek kafelków Echo -->
<div class="added-echoes-tags-wrapper" id="joined-pills-list" style="margin-top: 10px;">
<!-- Tu trafią dynamicznie dodane Echo -->
</div>
</div>
<!-- DYNAMICZNE OPCJE TWORZENIA KOLEJNEGO ECHO (Blokada przy 10/10) -->
<div id="creation-controls-wrapper">
<div class="panel-section-title" style="margin-top: 10px;">Etap 1: Wybierz nową emocję</div>
<div class="emotion-selector-pills">
<button class="emotion-pill active-pill" data-emotion="samotnosc" data-event="echo_emotion_selected">Samotność</button>
<button class="emotion-pill" data-emotion="milosc" data-event="echo_emotion_selected">Miłość</button>
<button class="emotion-pill" data-emotion="szczescie" data-event="echo_emotion_selected">Szczęście</button>
<button class="emotion-pill" data-emotion="duma" data-event="echo_emotion_selected">Duma</button>
<button class="emotion-pill" data-emotion="strach" data-event="echo_emotion_selected">Strach</button>
</div>
<!-- Interfejs suwaka -->
<div class="slider-container" style="margin-top: 18px;">
<div class="slider-labels-row">
<span>Intensywność doświadczenia</span>
<span class="intensity-label">Intensywność: <span class="intensity-val-glow">8/10</span></span>
</div>
<input type="range" min="0" max="10" value="8" class="range-slider-input" id="echo-intensity-slider" data-event="echo_intensity_changed">
</div>
</div>
<!-- KOMUNIKAT LIMITU 10/10 -->
<div class="limit-reached-message" id="limit-reached-panel">
Dodałaś lub dodałeś 10 Echo. Zobacz, jak wspólnie zmieniły Vivid Aurum.
</div>
<!-- ETAP 2: TWOJE ECHO (WIZUALNA BRYŁA) -->
<div class="blob-visualizer-container" id="blob-preview-panel">
<div class="panel-section-title" style="margin-bottom: 4px;">Etap 2: Twoje Echo</div>
<div class="interactive-organic-visualizer" id="target-echo-emitter">
<div class="interactive-organic-blob" id="echo-organic-blob"></div>
</div>
<p class="sub-caption-bottom">Osobisty ślad emocji tworzony w Vividi.ForLife.</p>
</div>
</div>
<!-- KOLUMNA PRAWA: VIVID AURUM (SPEKTAKULARNY WIR-KLEPSYDRA Z COLORED TAILS) -->
<div class="right-sculpture-panel">
<div class="sculpture-header-row">
<span class="panel-section-title" style="border: none; padding: 0; margin: 0;">Etap 3: Swój Wkład do Vivid Aurum</span>
<div class="sculpture-mode-selector">
<button class="sculpture-mode-btn" id="mode-btn-before" data-event="echo_before_after_viewed">Przed dodaniem</button>
<button class="sculpture-mode-btn active" id="mode-btn-after" data-event="echo_before_after_viewed">Po dodaniu</button>
</div>
</div>
<!-- Gęsty, bajkowy Wir-Klepsydra Canvas -->
<div class="canvas-swarm-wrapper" id="target-sculpture-receiver">
<canvas id="canvas-aurum-swarm"></canvas>
</div>
<!-- CTA Aktywatorowe i Reset -->
<div class="interactive-action-pills">
<button class="add-trigger-btn" id="btn-add-echo" data-event="echo_added_to_aurum">Dodaj Echo do Vivid Aurum</button>
<button class="reset-demo-btn" id="btn-reset-demo" data-event="echo_demo_reset">Zacznij od nowa</button>
</div>
<!-- Dynamiczny opis wpływu -->
<div class="dynamic-effect-caption-wrapper">
<div class="dynamic-caption-container" id="dynamic-log-caption">
Twoje Echo <span class="variable-emotion">Samotności</span> o intensywności <strong>8/10</strong> dodało do Vivid Aurum chłodne, niebieskie światło i stało się częścią wspólnego wiru.
</div>
</div>
</div>
</div>
</div>
<!-- ========================================================================= -->
<div class="highlight-quote-box">
<p class="highlight-quote-text">
<strong>Vivid Aurum</strong> nadaje emocjom ciało. <strong>Vividi.ForLife</strong> pozwala każdemu z nas stać się współautorem dzieła.
</p>
</div>
<!-- ========================================================================= -->
<div class="decision-block-wrapper">
<p class="decision-question">Jak chcesz stać się częścią Vivid Aurum?</p>
<div class="decision-btn-group">
<!-- Chcę współtworzyć dzieło (Gold Primary) -->
<a href="https://vividi.forlife/?utm_source=vividemotio&utm_medium=vivid_aurum&utm_campaign=wspoltworzenie_dziela" class="btn-decision btn-decision-primary" target="_blank" rel="noopener noreferrer" data-event="create_echo">
Chcę współtworzyć dzieło
</a>
<!-- Chcę zobaczyć finał (Outline Secondary to Gala Charytatywna anchor) -->
<a href="#gala-final" class="btn-decision btn-decision-secondary" data-event="see_gala">
Chcę zobaczyć finał
</a>
</div>
</div>
</div>
<!-- Odrywająca się animowana cząstka w locie (Flying spark) overlay -->
<div class="flying-spark" id="live-flying-spark"></div>
</section>
<!-- Skrypt obsługi interaktywnej dla podsekcji "ZOBACZ, JAK TO DZIAŁA" -->
<script>
(function() {
var section = document.getElementById('connection-experience');
if (!section) return;
var rangeSlider = section.querySelector('#echo-intensity-slider');
var intensityText = section.querySelector('.intensity-val-glow');
var echoBlob = section.querySelector('#echo-organic-blob');
var emotionButtons = section.querySelectorAll('.emotion-pill');
var btnAddEcho = section.querySelector('#btn-add-echo');
var btnResetDemo = section.querySelector('#btn-reset-demo');
var modeBtnBefore = section.querySelector('#mode-btn-before');
var modeBtnAfter = section.querySelector('#mode-btn-after');
var dynamicCaption = section.querySelector('#dynamic-log-caption');
var counterDisplay = section.querySelector('#counter-display');
var particlesCounterDisplay = section.querySelector('#particles-counter-display');
var counterStatus = section.querySelector('#counter-status');
var joinedPillsList = section.querySelector('#joined-pills-list');
var creationControls = section.querySelector('#creation-controls-wrapper');
var limitReachedPanel = section.querySelector('#limit-reached-panel');
var blobPreview = section.querySelector('#blob-preview-panel');
var emotionConfig = {
samotnosc: {
name: "Samotności",
hex: "#38bdf8",
glow: "rgba(14, 165, 233, 0.45)",
gradient: "radial-gradient(circle at 30% 30%, #38bdf8 0%, #0369a1 70%)",
desc: "chłodnego niebieskiego światła"
},
milosc: {
name: "Miłości",
hex: "#f43f5e",
glow: "rgba(244, 63, 94, 0.45)",
gradient: "radial-gradient(circle at 30% 30%, #f43f5e 0%, #9f1239 70%)",
desc: "gorącego, pulsującego różowo-czerwonego światła"
},
szczescie: {
name: "Szczęścia",
hex: "#f1df8a",
glow: "rgba(241, 223, 138, 0.45)",
gradient: "radial-gradient(circle at 30% 30%, #f1df8a 0%, #cca43b 70%)",
desc: "świetlistych, złociste promienie"
},
duma: {
name: "Dumy",
hex: "#a855f7",
glow: "rgba(168, 85, 247, 0.45)",
gradient: "radial-gradient(circle at 30% 30%, #a855f7 0%, #6b21a8 70%)",
desc: "głębokiego fioletowego światła"
},
strach: {
name: "Strachu",
hex: "#cbd5e1",
glow: "rgba(203, 213, 225, 0.45)",
gradient: "radial-gradient(circle at 30% 30%, #e2e8f0 0%, #475569 70%)",
desc: "zimnego, srebrzystobiałego blasku"
}
};
var currentEmotion = "samotnosc";
var currentIntensity = 8;
var addedEchoesList = [];
var beforeModeActive = false;
var totalUserParticlesCount = 0;
var canvas = section.querySelector('#canvas-aurum-swarm');
var ctx = canvas.getContext('2d');
var particles = [];
var maxBaseParticles = 210;
var animationFrameId = null;
function HourglassParticle(isUser, config) {
this.isUser = isUser || false;
this.color = config ? config.hex : "rgba(241, 223, 138, 0.55)";
this.intensity = config ? config.intensity : 5;
this.h = Math.random();
if (this.isUser) {
this.h = 0.05 + Math.random() * 0.1;
}
this.angle = Math.random() * Math.PI * 2;
this.pulsePhase = Math.random() * Math.PI;
this.history = [];
this.maxHistoryLength = this.isUser ? (8 + this.intensity * 2) : (12 + Math.floor(Math.random() * 8));
}
HourglassParticle.prototype.update = function(timeSeconds) {
var ascentSpeed = this.isUser ? 0.0016 : 0.0008;
this.h += ascentSpeed;
if (this.h > 1.0) {
this.h = 0;
this.history = [];
}
var relativeH = this.h - 0.5;
var maxRadius = 145;
var minRadius = 15;
this.radius = minRadius + 4 * (relativeH * relativeH) * (maxRadius - minRadius);
var constrictionMultiplier = 1.0 - Math.abs(relativeH) * 1.5;
var baseSpeedRotation = 0.0014 + constrictionMultiplier * 0.0022;
if (this.isUser) {
baseSpeedRotation += (this.intensity / 10) * 0.0015;
}
this.angle += baseSpeedRotation;
this.swayX = Math.sin(timeSeconds * 0.45 + this.h * Math.PI) * 9;
this.swayY = Math.cos(timeSeconds * 0.35 + this.h * Math.PI) * 3;
this.pulsePhase += 0.015;
var wirHeight = 210;
this.y3d = 12 + (1.0 - this.h) * wirHeight - (wirHeight / 2);
};
HourglassParticle.prototype.draw = function(width, height) {
var cosAngle = Math.cos(this.angle);
var sinAngle = Math.sin(this.angle);
var x3d = cosAngle * this.radius + this.swayX;
var z3d = sinAngle * this.radius;
var focalLength = 260;
var scale = focalLength / (focalLength + (z3d + 185));
var screenX = width / 2 + x3d * scale;
var screenY = height / 2 + (this.y3d + this.swayY) * scale;
var baseSize = this.isUser ? 3.8 : (0.42 + Math.random() * 0.53);
var projectedSize = baseSize * scale * (1 + Math.sin(this.pulsePhase) * 0.15);
if (projectedSize < 0.1) return;
this.history.push({ x: screenX, y: screenY, scale: scale });
if (this.history.length > this.maxHistoryLength) {
this.history.shift();
}
var opacityFactor = this.isUser ? 1.0 : (0.55 + scale * 0.35);
if (this.history.length > 2) {
ctx.lineCap = "round";
for (var j = 0; j < this.history.length - 1; j++) {
var pt1 = this.history[j];
var pt2 = this.history[j + 1];
var tailProgress = j / this.history.length;
ctx.strokeStyle = this.isUser ? this.color : "rgba(241, 235, 210, 0.28)";
var alphaCoeff = this.isUser ? (0.35 + (this.intensity / 10) * 0.55) : 0.16;
ctx.globalAlpha = tailProgress * alphaCoeff * pt2.scale * 0.65;
ctx.lineWidth = projectedSize * (0.6 + tailProgress * 1.2);
ctx.beginPath();
ctx.moveTo(pt1.x, pt1.y);
ctx.lineTo(pt2.x, pt2.y);
ctx.stroke();
}
}
ctx.fillStyle = this.isUser ? "#ffffff" : this.color;
ctx.globalAlpha = opacityFactor;
ctx.beginPath();
ctx.arc(screenX, screenY, projectedSize, 0, Math.PI * 2);
ctx.fill();
if (this.isUser) {
ctx.shadowColor = this.color;
ctx.shadowBlur = 12 + (this.intensity / 10) * 18;
ctx.fillStyle = this.color;
ctx.globalAlpha = 0.38 * scale;
ctx.beginPath();
ctx.arc(screenX, screenY, projectedSize * 1.8, 0, Math.PI * 2);
ctx.fill();
ctx.shadowBlur = 0;
}
ctx.globalAlpha = 1.0;
};
function initHourglassWir() {
particles = [];
for (var i = 0; i < maxBaseParticles; i++) {
var randColorVal = Math.random();
var col = "rgba(241, 223, 138, 0.5)";
if (randColorVal > 0.7) {
col = "rgba(255, 255, 255, 0.65)";
} else if (randColorVal > 0.45) {
col = "rgba(245, 225, 205, 0.55)";
}
particles.push(new HourglassParticle(false, { hex: col }));
}
}
function resizeCanvas() {
var dpr = window.devicePixelRatio || 1;
var rect = canvas.getBoundingClientRect();
canvas.width = rect.width * dpr;
canvas.height = rect.height * dpr;
ctx.scale(dpr, dpr);
}
function renderLoop() {
var w = canvas.width / (window.devicePixelRatio || 1);
var h = canvas.height / (window.devicePixelRatio || 1);
ctx.clearRect(0, 0, w, h);
var timeSeconds = Date.now() * 0.001;
for (var i = 0; i < particles.length; i++) {
particles[i].update(timeSeconds);
}
particles.sort(function(a, b) {
var aSin = Math.sin(a.angle) * a.radius;
var bSin = Math.sin(b.angle) * b.radius;
return aSin - bSin;
});
for (var i = 0; i < particles.length; i++) {
if (beforeModeActive && particles[i].isUser) {
continue;
}
particles[i].draw(w, h);
}
ctx.shadowColor = "rgba(241, 223, 138, 0.18)";
ctx.shadowBlur = 35;
ctx.fillStyle = "rgba(241, 190, 80, 0.015)";
ctx.beginPath();
ctx.arc(w / 2, h / 2, 30, 0, Math.PI * 2);
ctx.fill();
ctx.shadowBlur = 0;
animationFrameId = requestAnimationFrame(renderLoop);
}
function updateDemoVisuals() {
var conf = emotionConfig[currentEmotion];
section.style.setProperty('--active-theme-color', conf.hex);
section.style.setProperty('--active-theme-glow-rgba', conf.glow);
section.style.setProperty('--active-theme-gradient', conf.gradient);
intensityText.textContent = currentIntensity + "/10";
var baseScale = 0.55 + (currentIntensity / 10) * 0.85;
var pulseSpeed = 10 - (currentIntensity / 10) * 8.5;
echoBlob.style.transform = 'scale(' + baseScale + ')';
echoBlob.style.animationDuration = pulseSpeed + 's';
echoBlob.style.boxShadow = "0 0 25px " + conf.hex + ", inset -10px -10px 20px rgba(0,0,0,0.5)";
emotionButtons.forEach(function(pill) {
var e = pill.getAttribute('data-emotion');
if (e === currentEmotion) {
pill.classList.add('active-pill');
} else {
pill.classList.remove('active-pill');
}
});
if (addedEchoesList.length >= 10) {
btnAddEcho.disabled = true;
btnAddEcho.style.display = "none";
creationControls.style.display = "none";
blobPreview.style.display = "none";
limitReachedPanel.style.display = "block";
counterStatus.textContent = "Kompozycja pełna";
counterStatus.style.color = "#fda4af";
} else {
if (currentIntensity === 0) {
btnAddEcho.disabled = true;
counterStatus.textContent = "Zwiększ intensywność, aby Twoje Echo mogło dołączyć do dzieła.";
counterStatus.style.color = "#fda4af";
} else {
btnAddEcho.disabled = false;
counterStatus.textContent = "Możesz dodać kolejne Echo";
counterStatus.style.color = conf.hex;
}
btnAddEcho.style.display = "inline-block";
creationControls.style.display = "block";
blobPreview.style.display = "block";
limitReachedPanel.style.display = "none";
}
counterDisplay.textContent = "Twoje Echa: " + addedEchoesList.length + "/10";
particlesCounterDisplay.textContent = "Cząstki w Vivid Aurum: " + totalUserParticlesCount;
}
function flyAndJoinTornado() {
if (addedEchoesList.length >= 10 || currentIntensity === 0) return;
var conf = emotionConfig[currentEmotion];
var newEcho = {
emotion: currentEmotion,
intensity: currentIntensity,
hex: conf.hex,
name: currentEmotion.charAt(0).toUpperCase() + currentEmotion.slice(1)
};
addedEchoesList.push(newEcho);
var pillTag = document.createElement('span');
pillTag.className = "added-eco-tag";
pillTag.style.backgroundColor = conf.hex;
pillTag.style.color = (currentEmotion === "szczescie" || currentEmotion === "strach") ? "#000000" : "#ffffff";
pillTag.innerHTML = newEcho.name + " " + newEcho.intensity + "/10";
joinedPillsList.appendChild(pillTag);
var particleCount = Math.max(0, Math.min(10, Math.round(currentIntensity)));
totalUserParticlesCount += particleCount;
var emitterRect = document.getElementById('target-echo-emitter').getBoundingClientRect();
var receiverRect = document.getElementById('target-sculpture-receiver').getBoundingClientRect();
var startX = emitterRect.left + emitterRect.width / 2;
var startY = emitterRect.top + emitterRect.height / 2;
var endX = receiverRect.left + receiverRect.width / 2;
var endY = receiverRect.top + receiverRect.height * 0.85;
echoBlob.style.transform = 'scale(0)';
echoBlob.style.boxShadow = '0 0 0px transparent';
var currentSpawnIndex = 0;
function spawnNextParticle() {
if (currentSpawnIndex >= particleCount) {
updateDemoVisuals();
dynamicCaption.innerHTML = 'Twoje Echo <span class="variable-emotion">' + conf.name + '</span> o intensywności <strong>' + currentIntensity + '/10</strong> dołączyło do Vivid Aurum niosąc ' + conf.desc + '.';
modeBtnAfter.classList.add('active');
modeBtnBefore.classList.remove('active');
beforeModeActive = false;
setTimeout(function() {
var restoreScale = 0.55 + (currentIntensity / 10) * 0.85;
echoBlob.style.transform = 'scale(' + restoreScale + ')';
echoBlob.style.boxShadow = '0 0 25px ' + conf.hex + ', inset -10px -10px 20px rgba(0,0,0,0.5)';
}, 450);
return;
}
var localSpark = document.createElement('div');
localSpark.className = "flying-spark";
localSpark.style.backgroundColor = conf.hex;
localSpark.style.boxShadow = "0 0 25px " + conf.hex + ", 0 0 40px " + conf.hex;
localSpark.style.width = "24px";
localSpark.style.height = "24px";
localSpark.style.left = startX + "px";
localSpark.style.top = startY + "px";
localSpark.style.opacity = "1";
document.body.appendChild(localSpark);
var duration = 950;
var startLocalTime = null;
var localAngleOffset = Math.random() * Math.PI * 2;
var localRadiusOffset = -15 + Math.random() * 30;
function animateIndividualFly(timestamp) {
if (!startLocalTime) startLocalTime = timestamp;
var elapsed = timestamp - startLocalTime;
var progress = Math.min(elapsed / duration, 1);
var currentX = startX + (endX - startX) * progress;
var curveHeight = -130 - Math.random() * 50;
var currentY = startY + (endY - startY) * progress + Math.sin(progress * Math.PI) * curveHeight;
var size = 24 - (20 * progress);
localSpark.style.width = size + "px";
localSpark.style.height = size + "px";
localSpark.style.left = (currentX - size / 2) + "px";
localSpark.style.top = (currentY - size / 2) + "px";
if (progress < 1) {
requestAnimationFrame(animateIndividualFly);
} else {
localSpark.remove();
var userParticle = new HourglassParticle(true, { hex: conf.hex, intensity: currentIntensity });
userParticle.angle = localAngleOffset;
userParticle.radius += localRadiusOffset;
particles.push(userParticle);
}
}
requestAnimationFrame(animateIndividualFly);
currentSpawnIndex++;
setTimeout(spawnNextParticle, 80 + Math.random() * 70);
}
spawnNextParticle();
}
function restartDemo() {
addedEchoesList = [];
beforeModeActive = false;
totalUserParticlesCount = 0;
joinedPillsList.innerHTML = "";
particles = particles.filter(function(p) {
return !p.isUser;
});
currentEmotion = "samotnosc";
currentIntensity = 8;
rangeSlider.value = 8;
modeBtnAfter.classList.add('active');
modeBtnBefore.classList.remove('active');
updateDemoVisuals();
}
emotionButtons.forEach(function(pill) {
pill.addEventListener('click', function() {
if (addedEchoesList.length >= 10) return;
currentEmotion = pill.getAttribute('data-emotion');
updateDemoVisuals();
});
});
rangeSlider.addEventListener('input', function() {
if (addedEchoesList.length >= 10) return;
currentIntensity = parseInt(rangeSlider.value, 10);
updateDemoVisuals();
});
btnAddEcho.addEventListener('click', function() {
if (addedEchoesList.length < 10 && currentIntensity > 0) {
flyAndJoinTornado();
}
});
btnResetDemo.addEventListener('click', restartDemo);
modeBtnBefore.addEventListener('click', function() {
modeBtnBefore.classList.add('active');
modeBtnAfter.classList.remove('active');
beforeModeActive = true;
});
modeBtnAfter.addEventListener('click', function() {
modeBtnAfter.classList.add('active');
modeBtnBefore.classList.remove('active');
beforeModeActive = false;
});
resizeCanvas();
window.addEventListener('resize', resizeCanvas);
initHourglassWir();
renderLoop();
updateDemoVisuals();
})();
</script>
