/* ===========================================================
   QR generátor – girly dizajn
   Bootstrap 5 (CDN) + tento vlastný layer.
   =========================================================== */

:root {
    --pink-50:  #fff5fb;
    --pink-100: #ffe3f4;
    --pink-200: #ffc2e6;
    --pink-300: #ff9ed6;
    --pink-400: #ff6fbf;
    --pink-500: #f24aa6;
    --plum-700: #7a2e63;
    --plum-900: #4a1c3c;
    --lav-300:  #c9a7ff;
    --lav-400:  #a97bff;
    --peach-200:#ffd9c9;

    --grad-hero: linear-gradient(120deg, #ff6fbf 0%, #c86bff 55%, #7b8bff 100%);
    --grad-btn:  linear-gradient(120deg, #ff85c8 0%, #ff5fa8 45%, #b56bff 100%);
    --grad-text: linear-gradient(100deg, #ff4fa3 0%, #b45cff 60%, #7d7bff 100%);

    --card-radius: 30px;
    --shadow-soft: 0 30px 70px -25px rgba(210, 60, 140, .55);
    --ring: 0 0 0 4px rgba(255, 130, 200, .28);

    --font-head: "Fredoka", "Nunito", system-ui, sans-serif;
    --font-body: "Nunito", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--font-body);
    color: var(--plum-900);
    background: linear-gradient(135deg, #ffe1f2 0%, #ffe9f6 30%, #f3e6ff 65%, #e6ecff 100%);
    background-attachment: fixed;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/* ---------- dekoratívne pozadie ---------- */
.bg-decor {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: .55;
    animation: float 14s ease-in-out infinite;
}
.blob--1 {
    width: 46vw; height: 46vw; max-width: 460px; max-height: 460px;
    top: -8%; left: -6%;
    background: radial-gradient(circle at 30% 30%, #ff8ecb, #ff5fa8);
}
.blob--2 {
    width: 40vw; height: 40vw; max-width: 420px; max-height: 420px;
    bottom: -12%; right: -8%;
    background: radial-gradient(circle at 60% 40%, #b98bff, #7d7bff);
    animation-delay: -5s;
}
.blob--3 {
    width: 34vw; height: 34vw; max-width: 360px; max-height: 360px;
    top: 45%; right: 12%;
    background: radial-gradient(circle at 50% 50%, #ffd0a8, #ff9ec9);
    opacity: .4;
    animation-delay: -9s;
}

.sparkle {
    position: absolute;
    color: #fff;
    text-shadow: 0 0 12px rgba(255, 150, 210, .9);
    font-size: 1.6rem;
    opacity: .85;
    animation: twinkle 3.2s ease-in-out infinite;
}
.sparkle--1 { top: 14%; left: 16%; font-size: 2rem; }
.sparkle--2 { top: 24%; right: 18%; animation-delay: .8s; }
.sparkle--3 { bottom: 26%; left: 22%; font-size: 2.4rem; animation-delay: 1.4s; }
.sparkle--4 { bottom: 18%; right: 26%; animation-delay: 2s; }

/* ---------- layout ---------- */
.page {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 40px 18px 32px;
}

/* ---------- karta (glassmorphism) ---------- */
.qr-card {
    width: 100%;
    max-width: 460px;
    background: rgba(255, 255, 255, .62);
    backdrop-filter: blur(22px) saturate(150%);
    -webkit-backdrop-filter: blur(22px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: var(--card-radius);
    box-shadow: var(--shadow-soft);
    padding: 38px 32px 34px;
    animation: card-in .7s cubic-bezier(.18, .89, .32, 1.28) both;
}

/* ---------- hlavička ---------- */
.qr-card__head { text-align: center; margin-bottom: 26px; }

.qr-logo {
    width: 74px; height: 74px;
    margin: 0 auto 16px;
    border-radius: 24px;
    display: grid;
    place-items: center;
    background: var(--grad-hero);
    box-shadow: 0 14px 30px -8px rgba(220, 70, 150, .7);
    animation: heartbeat 2.4s ease-in-out infinite;
}
.qr-logo__glyph { font-size: 2rem; color: #fff; line-height: 1; }

.qr-title {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: clamp(1.9rem, 6vw, 2.5rem);
    margin: 0 0 6px;
    letter-spacing: -.5px;
    background: var(--grad-text);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.qr-subtitle {
    margin: 0;
    color: var(--plum-700);
    font-weight: 600;
    font-size: .98rem;
    opacity: .85;
}

/* ---------- formulár ---------- */
.qr-form { display: flex; flex-direction: column; gap: 18px; }

.field { display: flex; flex-direction: column; gap: 8px; }
.field__label {
    font-family: var(--font-head);
    font-weight: 600;
    font-size: .95rem;
    color: var(--plum-700);
    padding-left: 4px;
}
.field__input {
    width: 100%;
    resize: vertical;
    min-height: 96px;
    padding: 15px 18px;
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--plum-900);
    background: rgba(255, 255, 255, .85);
    border: 2px solid var(--pink-200);
    border-radius: 18px;
    outline: none;
    transition: border-color .2s, box-shadow .2s, background .2s;
}
.field__input::placeholder { color: #d59ac0; }
.field__input:focus {
    border-color: var(--pink-400);
    background: #fff;
    box-shadow: var(--ring);
}
.field__input--error { border-color: #ff5f8f; }
.field__error {
    margin: 0;
    padding-left: 4px;
    color: #e33a72;
    font-weight: 700;
    font-size: .88rem;
}

/* ---------- glow tlačidlo ---------- */
.btn-glow {
    position: relative;
    width: 100%;
    border: none;
    cursor: pointer;
    padding: 16px 22px;
    border-radius: 18px;
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 1.1rem;
    color: #fff;
    background: var(--grad-btn);
    background-size: 180% 180%;
    box-shadow: 0 16px 30px -10px rgba(230, 70, 150, .75);
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: transform .18s ease, box-shadow .18s ease, background-position .6s ease;
    animation: hue 6s ease infinite;
}
.btn-glow::before {
    content: "";
    position: absolute;
    top: 0; left: -120%;
    width: 60%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
    transform: skewX(-20deg);
    transition: left .6s ease;
}
.btn-glow:hover {
    transform: translateY(-3px) scale(1.015);
    box-shadow: 0 22px 40px -10px rgba(230, 70, 150, .9);
    background-position: right center;
}
.btn-glow:hover::before { left: 130%; }
.btn-glow:active { transform: translateY(-1px) scale(.99); }
.btn-glow__icon { font-size: 1.15rem; }

/* ---------- výsledok ---------- */
.result {
    margin-top: 28px;
    padding-top: 26px;
    border-top: 1px dashed var(--pink-200);
    text-align: center;
    animation: result-in .55s cubic-bezier(.18, .89, .32, 1.28) both;
}
.result__frame {
    position: relative;
    display: inline-block;
    padding: 16px;
    border-radius: 26px;
    background: #fff;
    box-shadow: 0 18px 40px -14px rgba(210, 70, 150, .6);
}
.result__frame::before {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 30px;
    padding: 4px;
    background: var(--grad-hero);
    background-size: 200% 200%;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: hue 5s ease infinite;
}
.result__img {
    display: block;
    width: 260px;
    max-width: 100%;
    height: auto;
    border-radius: 12px;
}
.result__caption {
    margin: 16px auto 18px;
    max-width: 90%;
    color: var(--plum-700);
    font-weight: 600;
    font-size: .9rem;
    word-break: break-word;
    opacity: .85;
}
.btn-download {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    padding: 13px 26px;
    border-radius: 16px;
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 1rem;
    color: var(--plum-900);
    background: #fff;
    border: 2px solid var(--pink-300);
    box-shadow: 0 10px 22px -12px rgba(210, 70, 150, .7);
    transition: transform .18s ease, box-shadow .18s ease, background .2s;
}
.btn-download:hover {
    transform: translateY(-2px);
    background: var(--pink-50);
    color: var(--pink-500);
    box-shadow: 0 16px 28px -12px rgba(210, 70, 150, .85);
}
.btn-download__icon { font-size: 1.05rem; }

/* ---------- pätička ---------- */
.footer-note {
    position: relative;
    z-index: 1;
    margin: 0;
    color: var(--plum-700);
    font-weight: 600;
    font-size: .85rem;
    opacity: .75;
}
.footer-note strong { color: var(--pink-500); }

/* ---------- padajúce srdiečka (JS) ---------- */
.heart-fx {
    position: fixed;
    top: -30px;
    z-index: 5;
    font-size: 1.4rem;
    pointer-events: none;
    will-change: transform, opacity;
    animation: fall linear forwards;
}

/* ---------- animácie ---------- */
@keyframes float {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(20px, -30px) scale(1.08); }
}
@keyframes twinkle {
    0%, 100% { opacity: .25; transform: scale(.8); }
    50%      { opacity: .95; transform: scale(1.15); }
}
@keyframes card-in {
    from { opacity: 0; transform: translateY(26px) scale(.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes result-in {
    from { opacity: 0; transform: translateY(18px) scale(.92); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes heartbeat {
    0%, 100% { transform: scale(1); }
    18%      { transform: scale(1.12); }
    32%      { transform: scale(1); }
}
@keyframes hue {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}
@keyframes fall {
    to { transform: translateY(105vh) rotate(220deg); opacity: 0; }
}

/* ---------- responzivita ---------- */
@media (max-width: 480px) {
    .qr-card { padding: 30px 22px 28px; border-radius: 26px; }
    .result__img { width: 220px; }
    .sparkle { display: none; }
}

/* ---------- prístupnosť: menej pohybu ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}