/*
 * Randkogram — wersja „neon” (v2), nakładana na style.css.
 * Inspiracja: motyw klubowy (Montserrat 900, neonowy róż na nocnym fiolecie).
 * POWRÓT DO v1: usunąć link do neon.css w inc/app.php i przywrócić logo
 * (pełna kopia v1: randkogram/site-v1-kopia-2026-10-27).
 */
:root {
  --paper: #100A19;
  --cream: #1A1126;
  --ink: #FFFFFF;
  --muted: #B8AEC8;
  --line: rgba(255, 255, 255, .12);
  --wine: #FF0057;
  --wine-deep: #0B0612;
  --coral: #FF0057;
  --coral-light: #FF4D88;
  --gold: #FFD910;
  --neon: #FF0057;
  --blue: #2D54FF;
  --serif: 'Montserrat', 'Arial Black', sans-serif;
  --sans: 'Roboto', system-ui, sans-serif;
  --cond: 'Cabin Condensed', 'Roboto Condensed', sans-serif;
  --glow: 0 0 6px rgba(255, 0, 87, .85), 0 0 18px rgba(255, 0, 87, .55), 0 0 42px rgba(255, 0, 87, .3);
}

body { background: var(--paper) var(--grain); color: var(--ink); font-weight: 300; }
/* W v1 „papier” był kolorem jasnego tekstu na ciemnych sekcjach — w neonie tło jest ciemne, więc te miejsca dostają biel. */
.hero, .ribbon, .events, .closing, .booking__event, .booking__event .card__price, .foot a, .foot .logo-neon { color: #fff; }
.foot .logo-neon { justify-self: start; }
a { color: var(--coral-light); }

h1, h2, h3 { font-family: var(--serif); font-weight: 900; text-transform: uppercase; letter-spacing: -.01em; line-height: 1.04; font-variation-settings: normal; }
h1 { font-size: clamp(2.3rem, 5.2vw, 4.4rem); }
h2 { font-size: clamp(1.9rem, 3.8vw, 3.1rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.55rem); letter-spacing: .01em; }
h1 em, h2 em, h3 em { font-style: normal; font-weight: 900; color: var(--neon); text-shadow: var(--glow); font-variation-settings: normal; }

/* Neonowe migotanie — subtelne, raz na kilka sekund */
@keyframes neon-migot {
  0%, 18%, 22%, 52%, 58%, 100% { text-shadow: var(--glow); opacity: 1; }
  20%, 55% { text-shadow: none; opacity: .72; }
}
@keyframes neon-puls {
  0%, 100% { box-shadow: 0 0 10px rgba(255, 0, 87, .55), 0 0 26px rgba(255, 0, 87, .25); }
  50% { box-shadow: 0 0 18px rgba(255, 0, 87, .85), 0 0 46px rgba(255, 0, 87, .4); }
}
@keyframes neon-rysuj { from { stroke-dashoffset: 1800; } to { stroke-dashoffset: 0; } }
@keyframes neon-oddech { 0%, 100% { opacity: .95; } 50% { opacity: .6; } }

/* Przyciski */
.btn { font-family: var(--cond); font-weight: 700; font-size: .95rem; letter-spacing: .08em; background: var(--neon); border: 1px solid var(--neon); color: #fff; border-radius: 0; transition: box-shadow .25s, background .25s, transform .2s; }
.btn:hover { background: #ff1f6c; border-color: #ff1f6c; box-shadow: 0 0 16px rgba(255, 0, 87, .75), 0 0 40px rgba(255, 0, 87, .35); transform: translateY(-1px); }
.btn--big { font-size: 1.05rem; }
.hero .btn--big { animation: neon-puls 2.6s ease-in-out infinite; }
.btn--light { background: transparent; color: #fff; border: 2px solid var(--neon); box-shadow: var(--glow); }
.btn--light:hover { background: var(--neon); color: #fff; }
.btn--ghost { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, .35); }
.btn--ghost:hover { border-color: var(--neon); color: #fff; background: transparent; }
.btn--off, .btn:disabled { background: transparent; color: var(--muted); border-color: var(--line); box-shadow: none; animation: none; }
.link-light { font-family: var(--cond); letter-spacing: .1em; color: #fff; border-bottom-color: var(--neon); }
.sec-head--light h2 { color: #fff; }
.sec-head--light h2 em { color: var(--neon); }
.link-dark { color: var(--coral-light); }

/* Nagłówek i logo */
.top { background: rgba(16, 10, 25, .86); border-bottom: 1px solid rgba(255, 255, 255, .08); }
.nav a:not(.btn) { color: #fff; font-family: var(--sans); font-weight: 400; letter-spacing: .14em; position: relative; }
.nav a:not(.btn)::after { content: ""; position: absolute; left: 0; right: 0; bottom: -8px; height: 2px; background: var(--neon); box-shadow: var(--glow); transform: scaleX(0); transition: transform .25s; }
.nav a:not(.btn):hover { color: #fff; }
.nav a:not(.btn):hover::after { transform: scaleX(1); }

.logo-neon { position: relative; display: inline-flex; align-items: center; padding: 9px 16px 8px; text-decoration: none; font: 900 1.45rem/1 var(--serif); letter-spacing: .02em; color: #fff; text-transform: uppercase; }
.logo-neon::before, .logo-neon::after { content: ""; position: absolute; width: 22px; height: 16px; border: 3px solid var(--neon); filter: drop-shadow(0 0 4px rgba(255, 0, 87, .9)); }
.logo-neon::before { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.logo-neon::after { bottom: 0; right: 0; border-left: 0; border-top: 0; }
.logo-neon__o { display: inline-grid; place-items: center; width: 1.02em; height: 1.02em; margin: 0 .03em; border-radius: 50%; background: var(--neon); box-shadow: 0 0 10px rgba(255, 0, 87, .8); font-size: .78em; }
.logo-neon__o::before { content: "♥"; color: #fff; font-size: .62em; line-height: 1; transform: translateY(.04em); }
.foot .logo-neon { font-size: 1.25rem; }

/* Hero */
.hero { position: relative; background: radial-gradient(800px 500px at 82% 20%, rgba(255, 0, 87, .28), transparent 60%), linear-gradient(90deg, #100A19 0%, rgba(16, 10, 25, .88) 40%, rgba(16, 10, 25, .05) 66%), url(/assets/hero-2.jpg) right center / cover no-repeat, #100A19; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, #100A19 0%, rgba(16, 10, 25, 0) 22%); pointer-events: none; }
.hero__in { position: relative; z-index: 2; }
.hero h1 { color: #fff; }
.hero h1 em { color: var(--neon); animation: neon-migot 7s infinite; }
.eyebrow { color: var(--gold); font-family: var(--cond); font-weight: 700; font-size: .9rem; letter-spacing: .22em; }
.eyebrow::before { background: var(--gold); box-shadow: 0 0 8px rgba(255, 217, 16, .7); }
.lead { font-weight: 300; }
.hero__neon { position: absolute; z-index: 1; right: 7%; top: 9%; width: min(46vw, 560px); height: auto; pointer-events: none; }
.hero__neon polygon { fill: none; stroke: var(--neon); stroke-width: 7; stroke-linejoin: round; stroke-dasharray: 1800; filter: drop-shadow(0 0 6px rgba(255, 0, 87, .95)) drop-shadow(0 0 22px rgba(255, 0, 87, .55)); animation: neon-rysuj 2.6s ease-out .3s both, neon-oddech 4s ease-in-out 3s infinite; }

/* Pasek z hasłami */
.ribbon { background: #0B0612; border-block: 1px solid rgba(255, 0, 87, .55); box-shadow: 0 0 22px rgba(255, 0, 87, .25) inset; }
.ribbon__track { font: italic 800 1.35rem var(--serif); text-transform: uppercase; letter-spacing: .02em; font-variation-settings: normal; color: #fff; }
.ribbon__track span:nth-child(4n+1) { color: var(--neon); text-shadow: var(--glow); }
.ribbon__track i { color: var(--gold); }

/* Manifest */
.intro__kicker { color: var(--gold); font-family: var(--cond); font-weight: 700; }
.intro__text { font: 300 clamp(1.5rem, 2.8vw, 2.2rem)/1.4 var(--sans); letter-spacing: 0; font-variation-settings: normal; color: #fff; }
.intro__text em { font-style: normal; font-weight: 500; color: var(--neon); text-shadow: var(--glow); }

/* Nagłówki sekcji */
.sec-head { border-top-color: rgba(255, 255, 255, .18); }
.sec-head__no { font: 900 1.1rem var(--serif); font-style: normal; color: var(--neon); text-shadow: var(--glow); }

/* Jak to działa */
.step__img::after { border-color: rgba(255, 0, 87, .7); box-shadow: 0 0 14px rgba(255, 0, 87, .45), inset 0 0 14px rgba(255, 0, 87, .25); }
.step__num { font: 900 clamp(2.6rem, 5vw, 3.8rem)/.9 var(--serif); font-style: normal; color: var(--neon); -webkit-text-stroke: 0; text-shadow: var(--glow); opacity: 1; font-variation-settings: normal; letter-spacing: .04em; }
.step__body p { color: var(--muted); font-weight: 300; }

/* Terminy — bilety w neonie */
.events { background: radial-gradient(900px 420px at 50% 0%, rgba(255, 0, 87, .16), transparent 70%), #0B0612; }
.ticket { background: #1A1126; color: #fff; border: 1px solid rgba(255, 0, 87, .55); filter: none; box-shadow: 0 0 22px rgba(255, 0, 87, .25), 0 20px 40px rgba(0, 0, 0, .5); }
.ticket::before, .ticket::after { background: #0B0612; border: 1px solid rgba(255, 0, 87, .55); }
.ticket__stub { background: #22152F; border-right: 2px dashed rgba(255, 255, 255, .22); }
.ticket__day { font: 900 4rem/.9 var(--serif); color: #fff; }
.ticket__month { color: var(--neon); font-family: var(--cond); font-weight: 700; }
.ticket__hour { font: 700 1.1rem var(--cond); font-style: normal; color: var(--gold); }
.card__date { color: var(--gold); font-family: var(--cond); font-weight: 700; font-size: .8rem; }
.card__venue span, .card__desc, .card__left { color: var(--muted); }
.card__foot { border-top-color: rgba(255, 255, 255, .12); }
.card__price { font: 900 2rem/1 var(--serif); color: #fff; }
.empty { border-color: rgba(255, 0, 87, .45); }
.empty__title { font: 900 1.6rem var(--serif); font-style: normal; text-transform: uppercase; }

/* FAQ */
.faq__list { border-top-color: rgba(255, 255, 255, .2); }
.faq details { border-bottom-color: rgba(255, 255, 255, .1); }
.faq summary { font: 500 1.12rem/1.35 var(--sans); letter-spacing: 0; color: #fff; }
.faq summary:hover { color: var(--coral-light); }
.faq summary::after { color: var(--neon); text-shadow: var(--glow); }
.faq details p, .faq__note { color: var(--muted); font-weight: 300; }

/* Zamknięcie */
.closing { background: radial-gradient(700px 360px at 50% 60%, rgba(255, 0, 87, .32), transparent 70%), #100A19; border-top: 1px solid rgba(255, 0, 87, .4); }
.closing__text { font: 900 clamp(2rem, 4.6vw, 3.6rem)/1.06 var(--serif); text-transform: uppercase; letter-spacing: -.01em; font-variation-settings: normal; }
.closing__text em { font-style: normal; color: var(--neon); text-shadow: var(--glow); animation: neon-migot 8s infinite 1.5s; }

/* Stopka */
.foot { background: #0B0612; border-top: 1px solid rgba(255, 255, 255, .06); }

/* Baner cookies */
.cookies { background: #1A1126; border: 1px solid var(--neon); box-shadow: 0 0 22px rgba(255, 0, 87, .3), 0 18px 40px rgba(0, 0, 0, .5); }
.cookies__text { color: #fff; }

/* Rezerwacja, formularze, panel */
.booking__event { background: radial-gradient(500px 300px at 30% 0%, rgba(255, 0, 87, .35), transparent 70%), #1A1126; border: 1px solid rgba(255, 0, 87, .5); }
.booking__event .card__date { color: var(--gold); }
.form { background: #1A1126; border-color: rgba(255, 255, 255, .1); }
.form label, .form legend { color: #fff; font-family: var(--cond); font-weight: 700; }
.form input:not([type=radio]):not([type=checkbox]), .form textarea { color: #fff; border-bottom-color: rgba(255, 255, 255, .25); }
.form input:focus, .form textarea:focus { border-bottom-color: var(--neon); box-shadow: 0 6px 12px -10px rgba(255, 0, 87, .9); }
.form textarea { border-color: rgba(255, 255, 255, .2); }
.pill { border-color: rgba(255, 255, 255, .25); color: #fff; }
.pill:has(input:checked) { border-color: var(--neon); background: rgba(255, 0, 87, .14); box-shadow: 0 0 10px rgba(255, 0, 87, .4); }
.check { color: var(--muted); }
.alert { background: rgba(255, 0, 87, .14); color: #fff; }
.alert--ok { background: rgba(62, 142, 90, .2); }
.todo { background: rgba(255, 217, 16, .08); border-color: var(--gold); color: #fff; }
.arow, .table { background: #1A1126; border-color: rgba(255, 255, 255, .1); color: #fff; }
.table th { background: #22152F; }
.table th, .table td { border-bottom-color: rgba(255, 255, 255, .08); }
.status--paid { background: rgba(62, 142, 90, .25); color: #8fe0aa; }
.status--pending { background: rgba(255, 217, 16, .15); color: var(--gold); }
.lead-dark { font-family: var(--sans); font-weight: 400; }

@media (max-width: 760px) {
  .hero { background: linear-gradient(0deg, #100A19 32%, rgba(16, 10, 25, .45) 100%), url(/assets/hero-2.jpg) 74% center / cover no-repeat, #100A19; }
  .hero__neon { width: 78vw; right: -8%; top: 4%; opacity: .7; }
  .logo-neon { font-size: 1.15rem; }
}
@media (prefers-reduced-motion: reduce) {
  .hero h1 em, .closing__text em, .hero .btn--big, .hero__neon polygon { animation: none; }
}