/* ═══════════════════════════════════════════════════════════════
   JURAIQ.DE — Minimal Custom CSS (Tailwind handles the rest)
   Only: keyframes, @property, complex gradients, noise texture
   ═══════════════════════════════════════════════════════════════ */

/* ─── Noise Texture (SVG inline) ─── */
.jq-noise {
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='512' height='512' filter='url(%23n)' opacity='.03'/%3E%3C/svg%3E");
    background-size: 200px;
}

/* ─── Shimmer gradient text ─── */
.jq-shimmer {
    background: linear-gradient(135deg, #c2b3e0 0%, #c9b07c 40%, #e0d0a0 60%, #c2b3e0 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: shimmer 4s ease-in-out infinite;
}
@keyframes shimmer {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}

/* ─── Gold shimmer (for dark breakers/CTA) ─── */
.jq-shimmer-gold {
    background: linear-gradient(135deg, #c9b07c 0%, #d4bc85 40%, #e0d0a0 60%, #c9b07c 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: shimmer 4s ease-in-out infinite;
}

/* ─── Purple → Gold gradient text (for light sections) ─── */
.jq-grad-text {
    background: linear-gradient(135deg, #271a4f 0%, #9b855c 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ─── Serif italic accent ─── */
.jq-serif {
    font-family: 'Instrument Serif', Georgia, serif;
    font-style: italic;
    font-weight: 400;
    letter-spacing: 0;
}

/* ─── Button shine sweep ─── */
.jq-btn-glow {
    position: relative;
    overflow: hidden;
}
.jq-btn-glow::after {
    content: '';
    position: absolute;
    top: -50%; left: -75%;
    width: 50%; height: 200%;
    background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.25) 50%, transparent 60%);
    transition: left .6s cubic-bezier(.22,1,.36,1);
    pointer-events: none;
}
.jq-btn-glow:hover::after {
    left: 125%;
}

/* ─── Animated border (conic gradient — Bento cards) ─── */
@property --border-angle {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}
.jq-animated-border::before {
    content: '';
    position: absolute;
    top: -1px; left: -1px; right: -1px;
    height: 3px;
    background: conic-gradient(from var(--border-angle, 0deg),
        transparent 20%, #271a4f 35%, #9b855c 50%, #271a4f 65%, transparent 80%);
    opacity: 0;
    transition: opacity .4s cubic-bezier(.22,1,.36,1);
    border-radius: 20px 20px 0 0;
}
.jq-animated-border:hover::before {
    opacity: 1;
    animation: border-rotate 3s linear infinite;
}
@keyframes border-rotate {
    to { --border-angle: 360deg; }
}

/* ─── Marquee ─── */
@keyframes marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* ─── Selection color ─── */
::selection {
    background: rgba(39,26,79,.3);
    color: #fff;
}

/* ─── Focus-visible (Accessibility) ─── */
:focus-visible {
    outline: 2px solid #9b855c;
    outline-offset: 2px;
    border-radius: 4px;
}

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

/* ─── Scrollbar styling ─── */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #F8F7F4; }
::-webkit-scrollbar-thumb {
    background: rgba(39,26,79,.15);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(39,26,79,.25);
}

/* ─── Smooth scroll ─── */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 100px;
}