/* --- Globalne Ustawienia i Zmienne --- */
:root {
    --bg-image: url('https://www.transparenttextures.com/patterns/black-marble.png');
    --gold-color: #FFD700;
    --gold-gradient-start: #FAE499;
    --gold-gradient-mid: #D4A95B;
    --gold-gradient-end: #8C6239;
    --text-primary: #F5F5F5;
    --text-secondary: #a0a0a0;
    --font-heading: 'Cormorant Garamond', serif;
    --font-body: 'Poppins', sans-serif;
}

/* ... (reszta globalnych ustawień bez zmian) ... */
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
    font-family: var(--font-body);
    background-color: #101010;
    background-image: var(--bg-image);
    color: var(--text-primary);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    text-align: center;
    overflow: hidden;
    perspective: 1000px;
}
.background-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(ellipse at center, rgba(16, 16, 16, 0.4) 0%, rgba(16, 16, 16, 0.9) 100%); z-index: 1; }

/* --- Interaktywne Płótno --- */
#particleCanvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 2;
    cursor: crosshair;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease;
}
#particleCanvas.visible {
    opacity: 1;
    pointer-events: all;
}


/* --- Kontener Główny --- */
.content-container {
    position: relative;
    z-index: 5;
    max-width: 650px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    opacity: 0;
    animation: fadeIn 2s 0.5s ease-out forwards;
    transition: opacity 0.5s ease;
}
.content-container.hidden {
    opacity: 0;
    pointer-events: none;
}
@keyframes fadeIn { to { opacity: 1; } }

/* --- (Złota kula i typografia bez zmian) --- */
.gold-sphere { width: 150px; height: 150px; border-radius: 50%; margin-bottom: 50px; position: relative; background: radial-gradient(circle at 35% 35%, var(--gold-gradient-start), var(--gold-gradient-mid) 60%, var(--gold-gradient-end)); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4), inset 0 5px 15px rgba(255, 255, 255, 0.2), inset 0 -5px 15px rgba(0, 0, 0, 0.4); animation: float 8s ease-in-out infinite; transition: transform 0.2s ease-out; }
.gold-sphere::after { content: ''; position: absolute; top: 5%; left: 10%; width: 80%; height: 90%; border-radius: 50%; background: radial-gradient(circle at 50% 0, rgba(255, 255, 255, 0.5), transparent 50%); transform: rotate(20deg); opacity: 0.8; }
@keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-20px); } }
h1 { font-family: var(--font-heading); font-size: 3rem; font-weight: 600; letter-spacing: 1px; color: transparent; background: linear-gradient(90deg, #E4C58B, #D0A264, #E4C58B); -webkit-background-clip: text; background-clip: text; text-shadow: 0 2px 20px rgba(255, 215, 0, 0.15); }
p { margin-top: 15px; font-size: 1rem; font-weight: 300; line-height: 1.7; color: var(--text-secondary); max-width: 500px; }

/* --- Przycisk "Fun" --- */
.fun-trigger {
    position: fixed;
    bottom: 25px;
    right: 30px;
    z-index: 10;
    cursor: pointer;
    color: #666;
    transition: color 0.3s ease, transform 0.3s ease;
}
.fun-trigger:hover {
    color: var(--gold-color);
    transform: rotate(90deg) scale(1.1);
}
.fun-trigger.active {
    color: var(--gold-color);
    transform: rotate(45deg);
}

/* --- Stopka --- */
.brand-footer { position: absolute; bottom: 25px; left: 30px; font-size: 0.85rem; color: #666; z-index: 6; }
.brand-footer a { color: #888; text-decoration: none; font-weight: 400; transition: color 0.3s ease; }
.brand-footer a:hover { color: var(--text-primary); }