/* ========================================
   MOTYW — 18. URODZINY: NEON / RAVE
   Tu zmieniasz kolory, czcionki i wygląd kart.
   Szkielet strony (układ, okna, formularze) jest w css/baza.css.
   ======================================== */

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

/* ---- PALETA — zmień te wartości, a przemaluje się cała strona ---- */
:root {
    --roz:     #ff2bd6;   /* neonowy róż — główny akcent */
    --cyjan:   #00f0ff;   /* neonowy błękit */
    --limonka: #b6ff00;
    --fiolet:  #8a5bff;
    --zolty:   #ffe14d;
    --noc:     #0a0214;   /* tło */
    --noc-2:   #1b0636;

    --font-display: 'Unbounded', sans-serif;
    --font-body:    'Space Grotesk', sans-serif;
    --font-script:  'Neonderthaw', cursive;
    --display-weight: 800;

    --bg: var(--noc);
    --bg-open: radial-gradient(ellipse at 50% -10%, #3a0b5e 0%, var(--noc) 55%), var(--noc);
    --bg-envelope: radial-gradient(ellipse at 50% 120%, #4a0d6b 0%, var(--noc) 60%);
    --ink: #f4ecff;
    --accent: var(--roz);
    --shadow: 0, 0, 0;

    --card-bg: linear-gradient(165deg, #1d0838 0%, #0e0320 70%);
    --card-ink: #f7f0ff;
    --card-accent: var(--roz);
    --card-line: var(--roz);
    --card-radius: 18px;
    --card-glow: 0 0 34px color-mix(in srgb, var(--card-accent) 55%, transparent);

    --btn-bg: var(--roz);
    --btn-ink: #14021f;
    --btn-shadow: 0 0 18px rgba(255, 43, 214, 0.65);

    --ui-bg: rgba(20, 4, 36, 0.78);
    --ui-ink: #f4ecff;
    --ui-accent: var(--cyjan);
    --ui-border: 1px solid rgba(0, 240, 255, 0.45);

    --panel-bg: #12042a;
    --panel-ink: #f4ecff;
    --panel-border: 1px solid rgba(255, 43, 214, 0.35);
    --field-bg: rgba(255, 255, 255, 0.06);
    --field-border: rgba(255, 255, 255, 0.18);
    --focus-ring: rgba(255, 43, 214, 0.35);
    --overlay: rgba(5, 0, 12, 0.75);
    --map-filter: invert(0.9) hue-rotate(200deg) saturate(1.4) brightness(0.95);

    --deco-opacity: 0.9;
}

/* ========================================
   EKRAN Z KOPERTĄ — lasery i siatka jak w klubie
   ======================================== */

.lasers {
    position: absolute;
    inset: -30%;
    background: repeating-conic-gradient(from 0deg at 50% 100%,
        rgba(255, 43, 214, 0.22) 0deg 1.2deg, transparent 1.2deg 14deg,
        rgba(0, 240, 255, 0.2) 14deg 15deg, transparent 15deg 26deg);
    -webkit-mask-image: radial-gradient(ellipse at 50% 100%, #000 10%, transparent 70%);
    mask-image: radial-gradient(ellipse at 50% 100%, #000 10%, transparent 70%);
    animation: lasers-sweep 9s ease-in-out infinite alternate;
    pointer-events: none;
}

@keyframes lasers-sweep {
    from { transform: rotate(-10deg); }
    to   { transform: rotate(10deg); }
}

.grid-floor {
    position: absolute;
    left: -50%;
    right: -50%;
    bottom: -8%;
    height: 45%;
    background:
        linear-gradient(transparent 0 calc(100% - 2px), rgba(0, 240, 255, 0.55) 0) 0 0 / 100% 42px,
        linear-gradient(90deg, transparent 0 calc(100% - 2px), rgba(255, 43, 214, 0.55) 0) 0 0 / 60px 100%;
    transform: perspective(300px) rotateX(62deg);
    transform-origin: 50% 0;
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 45%);
    mask-image: linear-gradient(to bottom, transparent, #000 45%);
    animation: grid-run 1.6s linear infinite;
    pointer-events: none;
}

@keyframes grid-run {
    to { background-position: 0 42px, 0 0; }
}

.envelope-intro .intro-kicker {
    font-family: var(--font-body);
    font-size: 0.85rem;
    letter-spacing: 6px;
    text-transform: uppercase;
    color: var(--cyjan);
    text-shadow: 0 0 10px var(--cyjan);
}

.envelope-intro .intro-name {
    font-family: var(--font-script);
    font-size: 6rem;
    line-height: 1;
    margin: 0.1em 0 0.45em;   /* ogonek „y" w tej czcionce schodzi bardzo nisko */
    color: #fff;
    text-shadow: 0 0 6px #fff, 0 0 18px var(--roz), 0 0 40px var(--roz), 0 0 80px var(--roz);
    animation: flicker 5s infinite;
}

.envelope-intro .intro-date {
    font-family: var(--font-display);
    font-size: 0.9rem;
    letter-spacing: 5px;
    color: var(--zolty);
    text-shadow: 0 0 10px rgba(255, 225, 77, 0.8);
}

@keyframes flicker {
    0%, 18%, 22%, 25%, 53%, 57%, 100% { opacity: 1; }
    20%, 24%, 55% { opacity: 0.55; }
}

.envelope {
    /* koperta: kolory papieru, podszewki i pieczęci */
    --env-paper:   #25093f;
    --env-paper-2: #14042a;
    --env-edge:    rgba(0, 240, 255, 0.75);
    --env-liner:   #1a0533;
    --env-liner-2: rgba(255, 43, 214, 0.55);
    --env-seal:    #ff2bd6;
    --env-seal-2:  #8f0079;
    --env-seal-3:  #ffa6f1;
    --env-seal-ink:#ffffff;
    --env-letter:  linear-gradient(160deg, #ff2bd6, #8a5bff 60%, #00f0ff);
    --env-ink:     #ffffff;
    --seal-font:   var(--font-display);
    filter: drop-shadow(0 0 14px rgba(255, 43, 214, 0.65)) drop-shadow(0 0 40px rgba(0, 240, 255, 0.25));
}
.env-letter { font-family: var(--font-script); color: #fff; text-shadow: 0 0 8px #fff; }
.env-address { text-shadow: 0 0 6px var(--roz), 0 0 16px var(--roz); font-size: clamp(1.1rem, 5.4vw, 2rem); }

.tap-text { color: var(--cyjan); text-shadow: 0 0 8px var(--cyjan); }

/* ========================================
   KARTY
   ======================================== */

.card {
    box-shadow:
        0 0 0 1.5px color-mix(in srgb, var(--card-accent) 75%, transparent),
        0 0 26px color-mix(in srgb, var(--card-accent) 30%, transparent),
        0 20px 45px rgba(0, 0, 0, 0.6);
}

/* siatka w tle każdej karty */
.card::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(transparent 0 calc(100% - 1px), rgba(255,255,255,0.05) 0) 0 0 / 100% 8cqw,
        linear-gradient(90deg, transparent 0 calc(100% - 1px), rgba(255,255,255,0.05) 0) 0 0 / 8cqw 100%;
    pointer-events: none;
}

.n-pink   { --card-accent: var(--roz);     --card-line: var(--roz);     --btn-bg: var(--roz);     --btn-shadow: 0 0 4cqw rgba(255, 43, 214, 0.7); }
.n-cyan   { --card-accent: var(--cyjan);   --card-line: var(--cyjan);   --btn-bg: var(--cyjan);   --btn-shadow: 0 0 4cqw rgba(0, 240, 255, 0.7); }
.n-lime   { --card-accent: var(--limonka); --card-line: var(--limonka); --btn-bg: var(--limonka); --btn-shadow: 0 0 4cqw rgba(182, 255, 0, 0.6); }
.n-violet { --card-accent: var(--fiolet);  --card-line: var(--fiolet);  --btn-bg: var(--fiolet);  --btn-ink: #fff; --btn-shadow: 0 0 4cqw rgba(138, 91, 255, 0.8); }
.n-yellow { --card-accent: var(--zolty);   --card-line: var(--zolty);   --btn-bg: var(--zolty);   --btn-shadow: 0 0 4cqw rgba(255, 225, 77, 0.6); }

.neon {
    color: #fff;
    text-shadow:
        0 0 0.6cqw #fff,
        0 0 2.4cqw var(--card-accent),
        0 0 6cqw var(--card-accent),
        0 0 12cqw var(--card-accent);
}

.c-kicker { letter-spacing: 1.2cqw; }
.c-h { font-size: 8cqw; text-transform: uppercase; letter-spacing: 0.3cqw; }
.c-timeline time { font-family: var(--font-display); font-size: 3.4cqw; }
.c-timeline li { padding-bottom: 2.2cqw; border-bottom: 1px dashed rgba(255,255,255,0.14); }
.c-timeline li:last-child { border-bottom: 0; }

/* ---- karta 1: tytułowa ---- */

.card-title .card-inner { gap: 0; padding-bottom: 20cqw; }

.hero-18 {
    position: relative;
    width: 100%;
    display: grid;
    place-items: center;
    margin-top: 10cqw;
}

.retro-sun {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 60cqw;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: linear-gradient(180deg, var(--zolty) 0%, var(--roz) 55%, var(--fiolet) 100%);
    --paski: linear-gradient(180deg, #000 0 50%, transparent 50% 54%, #000 54% 62%, transparent 62% 67%,
             #000 67% 74%, transparent 74% 80%, #000 80% 86%, transparent 86% 93%, #000 93%);
    -webkit-mask-image: var(--paski);
    mask-image: var(--paski);
    opacity: 0.85;
    filter: drop-shadow(0 0 5cqw rgba(255, 43, 214, 0.7));
}

.title-18 {
    position: relative;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 44cqw;
    line-height: 1.05;
    color: transparent;
    -webkit-text-stroke: 0.8cqw #fff;
    text-shadow: 0 0 3cqw var(--cyjan), 0 0 8cqw var(--cyjan);
    letter-spacing: -1.5cqw;
}

.title-name {
    position: relative;
    font-family: var(--font-script);
    font-size: 19cqw;
    line-height: 0.9;
    margin-top: -8cqw;
    animation: flicker 6s infinite 1s;
}

.title-sub {
    position: relative;
    font-family: var(--font-display);
    font-size: 4.2cqw;
    letter-spacing: 2.4cqw;
    text-transform: uppercase;
    margin-top: 5cqw;
    color: var(--limonka);
    text-shadow: 0 0 2cqw rgba(182, 255, 0, 0.8);
}

.title-date {
    position: absolute;
    left: 8cqw;
    right: 8cqw;
    bottom: 8cqw;
    display: flex;
    justify-content: space-between;
    padding-top: 3.5cqw;
    border-top: 0.4cqw solid rgba(255, 255, 255, 0.25);
    font-family: var(--font-display);
    font-size: 3.4cqw;
    letter-spacing: 0.6cqw;
}

.title-date b { color: var(--zolty); font-weight: 600; }

/* ---- ikony w kartach ---- */

.c-icon {
    width: 20cqw;
    height: 20cqw;
    color: var(--card-accent);
    filter: drop-shadow(0 0 2cqw var(--card-accent));
}

.c-icon.big { width: 30cqw; height: 30cqw; }

.addr { font-size: 4cqw; line-height: 1.5; }
.addr b { display: block; font-size: 4.6cqw; }

/* ---- karta 3: PRESS PLAY ---- */

.play-ring {
    width: 38cqw;
    aspect-ratio: 1;
    border-radius: 50%;
    display: grid;
    place-items: center;
    border: 1cqw solid var(--card-accent);
    box-shadow: 0 0 5cqw var(--card-accent), inset 0 0 5cqw color-mix(in srgb, var(--card-accent) 60%, transparent);
    animation: ring-pulse 1.6s ease-in-out infinite;
}

.play-ring svg { width: 16cqw; height: 16cqw; margin-left: 2cqw; fill: #fff; filter: drop-shadow(0 0 2cqw var(--card-accent)); }

@keyframes ring-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.06); }
}

.tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.6cqw; margin-top: 2cqw; }
.tags span {
    padding: 1cqw 2.6cqw;
    border-radius: 99px;
    border: 0.3cqw solid rgba(255,255,255,0.3);
    font-size: 2.8cqw;
    letter-spacing: 0.4cqw;
    text-transform: uppercase;
}

/* ---- karta 5: dress code ---- */

.swatches { display: flex; gap: 2.4cqw; justify-content: center; margin: 2cqw 0; }
.swatches i {
    width: 9cqw;
    height: 9cqw;
    border-radius: 50%;
    background: var(--c);
    box-shadow: 0 0 3cqw var(--c);
}

.big-word {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 13cqw;
    line-height: 0.95;
    letter-spacing: -0.3cqw;
}

/* ---- karta 7: korektor ---- */

.eq-card {
    display: flex;
    align-items: flex-end;
    gap: 1.6cqw;
    height: 26cqw;
    margin: 1cqw 0 2cqw;
}

.eq-card i {
    width: 4.4cqw;
    border-radius: 1cqw 1cqw 0 0;
    background: linear-gradient(to top, var(--cyjan), var(--roz));
    box-shadow: 0 0 2.5cqw rgba(255, 43, 214, 0.6);
    animation: eq-card 1.2s ease-in-out infinite;
}

@keyframes eq-card {
    0%, 100% { height: 25%; }
    50%      { height: 100%; }
}

/* ---- karta 8: kolaż z galerii ---- */

.collage { position: relative; width: 70cqw; height: 50cqw; margin-bottom: 2cqw; }
.collage img {
    position: absolute;
    width: 38cqw;
    aspect-ratio: 1;
    object-fit: cover;
    border: 1.4cqw solid #fff;
    border-bottom-width: 5cqw;
    box-shadow: 0 2cqw 5cqw rgba(0,0,0,0.6);
}
.collage img:nth-child(1) { left: 0;    top: 6cqw; transform: rotate(-10deg); }
.collage img:nth-child(2) { right: 0;   top: 4cqw; transform: rotate(9deg); }
.collage img:nth-child(3) { left: 16cqw; top: 0;   transform: rotate(-2deg); z-index: 1; }

/* ---- zakończenie ---- */

.closing .closing-big {
    font-family: var(--font-script);
    font-size: 4.2rem;
    line-height: 1.1;
    color: #fff;
    text-shadow: 0 0 6px #fff, 0 0 18px var(--cyjan), 0 0 42px var(--cyjan);
}

.closing p {
    margin-top: 0.8rem;
    font-size: 0.95rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    opacity: 0.8;
}

/* ---- dekoracje ---- */

.deco { width: 150px; animation: deco-float 6s ease-in-out infinite; }
.deco-r { animation-delay: -3s; }

@keyframes deco-float {
    0%, 100% { translate: 0 0; }
    50%      { translate: 0 -12px; }
}

/* ---- okna ---- */

.sheet-title { text-transform: uppercase; letter-spacing: 1px; font-size: 1.7rem; }
.sheet-kicker { color: var(--cyjan); }
.form-done .done-mark { box-shadow: 0 0 24px var(--roz); }

.countdown-title { font-family: var(--font-body); text-transform: uppercase; letter-spacing: 3px; font-size: 0.72rem; color: var(--roz); }
.countdown-item b { font-family: var(--font-display); text-shadow: 0 0 10px var(--cyjan); }
.music-toggle { color: var(--roz); box-shadow: 0 0 18px rgba(255, 43, 214, 0.5); border-color: rgba(255, 43, 214, 0.6); }

@media (max-width: 768px) {
    .envelope-intro .intro-name { font-size: 4rem; }
    .envelope-intro .intro-kicker { font-size: 0.7rem; letter-spacing: 4px; }
    .envelope-intro .intro-date { font-size: 0.72rem; letter-spacing: 3px; }
    .closing .closing-big { font-size: 3rem; }
    .deco { width: 20vw; }
    .countdown-title { font-size: 0.55rem; }
}