@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap');

:root {
    --bg: #080b16;
    --surface: rgba(20, 26, 47, .72);
    --surface-strong: #151c33;
    --text: #f4f7ff;
    --muted: #abb7d3;
    --primary: #6d8cff;
    --primary-light: #9bb0ff;
    --accent: #55e6c1;
    --border: rgba(161, 180, 255, .16);
    --shadow: 0 20px 60px rgba(0, 0, 0, .35);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
    min-height: 100vh;
    overflow-x: hidden;
    color: var(--text);
    font-family: 'Inter', 'Segoe UI', sans-serif;
    line-height: 1.7;
    background:
        radial-gradient(circle at 12% 8%, rgba(91, 111, 255, .24), transparent 28rem),
        radial-gradient(circle at 88% 20%, rgba(72, 223, 192, .14), transparent 24rem),
        linear-gradient(135deg, #080b16 0%, #0d1226 54%, #080b16 100%);
    animation: storm-flash 22s linear infinite;
}

body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    opacity: .32;
    background-image: linear-gradient(rgba(173, 192, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(173, 192, 255, .05) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: linear-gradient(to bottom, black, transparent 75%);
    pointer-events: none;
}

/* Delikatny piorun w tle: pojawia się tylko na moment, bez zasłaniania treści. */
body::after {
    content: '';
    position: fixed;
    top: -4vh;
    left: 72%;
    z-index: -1;
    width: clamp(70px, 10vw, 145px);
    height: min(74vh, 720px);
    opacity: 0;
    pointer-events: none;
    background: linear-gradient(90deg, transparent 43%, #dff9ff 48%, #fff 51%, #a9d8ff 54%, transparent 59%);
    clip-path: polygon(47% 0, 63% 0, 54% 19%, 76% 19%, 47% 43%, 61% 43%, 28% 73%, 42% 73%, 17% 100%, 28% 76%, 14% 76%, 38% 49%, 24% 49%, 51% 25%, 38% 25%);
    filter: drop-shadow(0 0 5px #e9fbff) drop-shadow(0 0 17px #68baff) drop-shadow(0 0 42px rgba(87, 125, 255, .8));
    transform: rotate(7deg);
    animation: lightning-strike 22s linear infinite;
}

a { color: inherit; }

nav {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 4px 10px;
    padding: 13px 24px;
    background: rgba(8, 11, 22, .78);
    border-bottom: 1px solid var(--border);
    backdrop-filter: blur(18px);
}

nav a {
    position: relative;
    padding: 8px 11px;
    color: #c8d2ed;
    font-size: .9rem;
    font-weight: 600;
    letter-spacing: .01em;
    text-decoration: none;
    transition: color .2s ease;
}

nav a::after {
    content: '';
    position: absolute;
    right: 11px;
    bottom: 4px;
    left: 11px;
    height: 2px;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--primary), var(--accent));
    transform: scaleX(0);
    transition: transform .2s ease;
}

nav a:hover, nav a:focus-visible { color: #fff; }
nav a:hover::after, nav a:focus-visible::after { transform: scaleX(1); }

.container {
    width: min(100% - 40px, 1120px);
    margin: 0 auto;
    padding: 72px 0 36px;
    animation: reveal .55s ease both;
}

.card, .announcement {
    position: relative;
    overflow: hidden;
    padding: clamp(28px, 5vw, 52px);
    background: linear-gradient(145deg, rgba(30, 39, 69, .82), rgba(15, 20, 38, .74));
    border: 1px solid var(--border);
    border-radius: 24px;
    box-shadow: var(--shadow);
    backdrop-filter: blur(16px);
}

.card + .card, .card + br + .card, .announcement + .announcement { margin-top: 24px; }

.card::before, .announcement::before {
    content: '';
    position: absolute;
    top: 0;
    right: 8%;
    left: 8%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(167, 187, 255, .72), transparent);
}

.card { text-align: center; }

h1, h2, .section-title {
    color: #fff;
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-weight: 700;
    line-height: 1.15;
}

h1, .title {
    margin-bottom: 20px;
    font-size: clamp(2.15rem, 6vw, 3.6rem);
    letter-spacing: -.055em;
    text-align: center;
    text-shadow: 0 0 28px rgba(109, 140, 255, .22);
}

h2 { margin: 28px 0 8px; font-size: clamp(1.2rem, 3vw, 1.55rem); color: var(--primary-light); }
h1 + h2, .card > h2:first-child { margin-top: 0; }
p { color: var(--muted); }
.card p + p { margin-top: 8px; }

.section-title { margin: 52px 0 24px; font-size: clamp(1.8rem, 4vw, 2.5rem); text-align: center; }
.section-title span, .project span { color: var(--accent); }

.avatar {
    display: block;
    width: min(150px, 45vw);
    aspect-ratio: 1;
    margin: 22px auto;
    object-fit: cover;
    border: 3px solid rgba(155, 176, 255, .75);
    border-radius: 22px;
    box-shadow: 0 0 0 7px rgba(109, 140, 255, .11), 0 16px 32px rgba(0, 0, 0, .34);
    transition: transform .25s ease, box-shadow .25s ease;
}

.avatar:hover { transform: translateY(-5px) rotate(2deg); box-shadow: 0 0 0 7px rgba(85, 230, 193, .15), 0 22px 38px rgba(0, 0, 0, .42); }

.btn, .kategoria-btn, .pobierz-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 24px;
    padding: 13px 23px;
    border: 0;
    border-radius: 12px;
    color: #fff;
    background: linear-gradient(135deg, #758fff, #586ce8);
    box-shadow: 0 10px 24px rgba(79, 100, 232, .28);
    cursor: pointer;
    font: 700 .94rem 'Inter', sans-serif;
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

.btn:hover, .kategoria-btn:hover, .pobierz-btn:hover { transform: translateY(-3px); box-shadow: 0 15px 30px rgba(79, 100, 232, .42); filter: brightness(1.08); }
.btn:focus-visible, .kategoria-btn:focus-visible, .pobierz-btn:focus-visible, nav a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.projects, .lista {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    margin-top: 28px;
}

.project, .produkt {
    padding: 25px;
    background: rgba(25, 32, 57, .68);
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .18);
    text-align: center;
    transition: transform .22s ease, border-color .22s ease, background .22s ease;
}

.project:hover, .produkt:hover { transform: translateY(-6px); border-color: rgba(121, 150, 255, .7); background: rgba(34, 43, 75, .83); }
.produkt h2 { margin-top: 0; }

.wybieranie { margin-bottom: 26px; text-align: center; }
.kategoria-btn { margin: 6px; }

.announcement { margin-top: 20px; padding: 28px; text-align: left; }
.announcement h2 { margin-top: 0; }
.announcement small { display: block; margin-top: 20px; color: #8794b7; }

.eyebrow {
    margin-bottom: 10px;
    color: var(--accent);
    font-size: .73rem;
    font-weight: 800;
    letter-spacing: .16em;
}

.announcements-page { max-width: 900px; }
.announcements-page > .eyebrow, .announcements-page > .title { text-align: center; }

.announcement--featured {
    margin-top: 0;
    padding: clamp(30px, 5vw, 48px);
    border-color: rgba(117, 143, 255, .43);
    background: linear-gradient(140deg, rgba(48, 59, 104, .89), rgba(15, 20, 39, .84));
}

.announcement-label {
    display: inline-block;
    margin-bottom: 16px;
    padding: 5px 10px;
    border: 1px solid rgba(85, 230, 193, .35);
    border-radius: 999px;
    color: var(--accent);
    background: rgba(85, 230, 193, .08);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .1em;
}

.older-announcements-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-top: 18px;
    padding: 18px 22px;
    color: #e8edff;
    background: rgba(23, 30, 54, .66);
    border: 1px solid var(--border);
    border-radius: 15px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .16);
    cursor: pointer;
    font: 700 .95rem 'Inter', sans-serif;
    text-align: left;
    transition: transform .2s ease, border-color .2s ease, background .2s ease;
}

.older-announcements-button:hover { transform: translateY(-3px); border-color: rgba(121, 150, 255, .65); background: rgba(36, 46, 80, .8); }
.older-announcements-button span { color: var(--accent); }

.announcements-modal {
    position: fixed;
    inset: 0;
    width: 100vw;
    max-width: none;
    height: 100vh;
    max-height: none;
    padding: 0;
    overflow: auto;
    color: var(--text);
    background: #11182d;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.announcements-modal::backdrop { background: rgba(3, 5, 13, .76); }
.modal-header { position: sticky; top: 0; z-index: 1; display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 28px max(30px, calc((100vw - 800px) / 2)); background: rgba(17, 24, 45, .94); border-bottom: 1px solid var(--border); backdrop-filter: blur(16px); }
.modal-header .eyebrow { margin-bottom: 4px; }
.modal-header h2 { margin: 0; color: #fff; }
.modal-close { width: 38px; height: 38px; border: 1px solid var(--border); border-radius: 10px; color: #eaf0ff; background: rgba(255, 255, 255, .05); cursor: pointer; font-size: 1.6rem; line-height: 1; transition: background .2s ease, transform .2s ease; }
.modal-close:hover { background: rgba(117, 143, 255, .2); transform: rotate(90deg); }
.older-list { width: min(100% - 40px, 800px); margin: 0 auto; padding: 26px 0 50px; }
.older-list .announcement { padding: 24px; }

.contact-card { max-width: 780px; margin: 0 auto; }
.contact-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 30px; text-align: left; }
.ticket-form { display:grid; gap:12px; margin-top:28px; text-align:left; }
.drop-card{max-width:700px;margin:auto}.drop-card input{width:min(100%,400px);padding:14px;border-radius:12px;border:1px solid var(--border);background:rgba(8,12,28,.45);color:var(--text);font:inherit}.crate{font-size:7rem;margin:25px auto;filter:drop-shadow(0 0 25px rgba(109,140,255,.6))}.crate.opening{animation:crate-open 2.2s ease}.drop-note{margin-top:20px;font-size:.82rem}.drop-claim{max-width:470px;margin:20px auto 0;padding:13px 16px;border:1px solid color-mix(in srgb,var(--accent) 32%,transparent);border-radius:13px;color:var(--text);background:color-mix(in srgb,var(--accent) 9%,transparent);font-size:.9rem;line-height:1.55}.drop-claim a{color:var(--accent);font-weight:800;text-decoration:none}.drop-claim a:hover{text-decoration:underline}.winners{max-width:700px;margin:24px auto}.winner{display:grid;grid-template-columns:1fr auto;gap:5px;padding:12px;border-bottom:1px solid var(--border);text-align:left}.winner span{color:var(--accent)}.winner small{grid-column:1/-1;color:var(--muted)}@keyframes crate-open{20%,60%,90%{transform:rotate(-12deg) scale(1.15)}40%,75%{transform:rotate(12deg) scale(1.2)}100%{transform:scale(1.35);filter:brightness(2) drop-shadow(0 0 45px #fff)}}
.drop-overlay{position:fixed;z-index:1000;inset:0;display:grid;place-items:center;padding:16px;background:rgba(2,4,12,.78);backdrop-filter:blur(7px)}.drop-overlay[hidden]{display:none}.drop-modal{width:min(100%,460px);padding:38px;border:1px solid var(--border);border-radius:24px;color:var(--text);background:#151c33;text-align:center;box-shadow:0 28px 80px rgba(0,0,0,.7)}.drop-modal h2{margin:0 0 14px}.drop-modal p{margin-bottom:14px}.drop-modal .drop-date{margin:0 0 22px;color:var(--muted);font-size:.88rem}
.ticket-form input,.ticket-form select,.ticket-form textarea { width:100%; padding:14px; border:1px solid var(--border); border-radius:12px; color:var(--text); background:rgba(8,12,28,.45); font:inherit; }
.ticket-form textarea { min-height:130px; resize:vertical; }.ticket-form .btn { justify-self:center; margin-top:4px; }.ticket-status { margin-top:22px; color:var(--accent); }
.contact-steps div { padding: 16px; background: rgba(9, 13, 29, .35); border: 1px solid var(--border); border-radius: 14px; }
.contact-steps strong { display: block; margin-bottom: 6px; color: var(--accent); font: 700 1.05rem 'Space Grotesk', sans-serif; }
.contact-steps span { color: var(--muted); font-size: .82rem; line-height: 1.45; }

.error-text { width: min(100% - 40px, 680px); margin: 110px auto; padding: 35px; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 20px; text-align: center; box-shadow: var(--shadow); }

footer { padding: 28px 20px 38px; color: #7f8caf; font-size: .88rem; font-weight: 500; text-align: center; }
footer span + span { margin-left: 8px; }

@keyframes reveal { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }

@keyframes storm-flash {
    0%, 19%, 22%, 50%, 54%, 78%, 82%, 100% { filter: brightness(1); }
    19.4%, 20.6%, 50.5%, 52.5%, 78.5%, 80.5% { filter: brightness(1.18); }
}

@keyframes lightning-strike {
    /* Trzy dłuższe uderzenia, każde w innym miejscu ekranu. */
    0%, 18.8%, 22.2%, 49.8%, 54.2%, 77.8%, 82.2%, 100% { opacity: 0; }

    19% { left: 17%; height: 66vh; transform: rotate(-8deg) scale(.8); opacity: .22; }
    19.3%, 20.5% { left: 17%; height: 66vh; transform: rotate(-8deg) scale(.8); opacity: .9; }
    20.8%, 22% { left: 17%; height: 66vh; transform: rotate(-8deg) scale(.8); opacity: .3; }

    50% { left: 72%; height: 74vh; transform: rotate(7deg) scale(1); opacity: .2; }
    50.4%, 52.4% { left: 72%; height: 74vh; transform: rotate(7deg) scale(1); opacity: .92; }
    52.8%, 54% { left: 72%; height: 74vh; transform: rotate(7deg) scale(1); opacity: .28; }

    78% { left: 47%; height: 56vh; transform: rotate(3deg) scale(.64); opacity: .2; }
    78.4%, 80.4% { left: 47%; height: 56vh; transform: rotate(3deg) scale(.64); opacity: .86; }
    80.8%, 82% { left: 47%; height: 56vh; transform: rotate(3deg) scale(.64); opacity: .25; }
}

@media (max-width: 600px) {
    nav { justify-content: flex-start; padding: 9px 12px; }
    nav a { padding: 7px 8px; font-size: .8rem; }
    .container { width: min(100% - 26px, 1120px); padding-top: 38px; }
    .card, .announcement { border-radius: 18px; }
    .lista, .projects { grid-template-columns: 1fr; }
    .contact-steps { grid-template-columns: 1fr; }
    .modal-header { padding: 22px 20px 18px; }
    .older-list { width: min(100% - 26px, 800px); padding: 20px 0 32px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}