/* ==========================================================================
   Live Trend Demos
   Each .trend-demo is a self-contained CSS vignette demonstrating one trend.
   Demos set their own colors/fonts explicitly so they read the same
   under every active site theme.
   ========================================================================== */

.trend-demo {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    margin: 1rem 0;
    isolation: isolate;
    font-family: system-ui, -apple-system, sans-serif;
    text-transform: none;
    letter-spacing: normal;
}

.trend-demo i,
.trend-demo b {
    display: block;
    font-style: normal;
}

.trend-demo .demo-word {
    position: relative;
    z-index: 2;
    font-size: clamp(0.8rem, 2vw, 1rem);
    font-weight: 400;
    letter-spacing: 0.3em;
    text-transform: lowercase;
}

/* --- Neuro-Morphism: soft pulsing organic blobs on a calm dark field ----- */
.demo-neuro-morphism {
    background: radial-gradient(circle at 60% 40%, #12281f 0%, #0a0f0d 70%);
    color: #9ff5d4;
}

.demo-neuro-morphism .nm-blob {
    position: absolute;
    border-radius: 46% 54% 60% 40% / 50% 45% 55% 50%;
    filter: blur(2px);
    animation: nm-morph 8s ease-in-out infinite alternate;
}

.demo-neuro-morphism .nm-b1 {
    width: 45%;
    height: 62%;
    left: 12%;
    top: 16%;
    background: radial-gradient(circle at 35% 35%, rgba(0, 255, 170, 0.55), rgba(0, 255, 170, 0.08) 70%);
}

.demo-neuro-morphism .nm-b2 {
    width: 38%;
    height: 55%;
    right: 10%;
    bottom: 12%;
    background: radial-gradient(circle at 60% 60%, rgba(120, 220, 255, 0.4), rgba(120, 220, 255, 0.05) 70%);
    animation-delay: -4s;
}

@keyframes nm-morph {
    0% {
        border-radius: 46% 54% 60% 40% / 50% 45% 55% 50%;
        transform: scale(1);
    }

    100% {
        border-radius: 58% 42% 44% 56% / 42% 58% 42% 58%;
        transform: scale(1.12);
    }
}

/* --- Holographic Flat: iridescent diffraction sheen, zero shadows -------- */
.demo-holographic-flat {
    background: #0d0d12;
}

.demo-holographic-flat .holo-card {
    width: 58%;
    aspect-ratio: 8 / 5;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: clamp(1.1rem, 3vw, 1.6rem);
    font-weight: 800;
    letter-spacing: 0.4em;
    text-indent: 0.4em;
    color: rgba(255, 255, 255, 0.92);
    background:
        linear-gradient(115deg,
            #ff8ae2 0%, #ffd76e 18%, #8affc1 36%, #7ad8ff 54%,
            #b18aff 72%, #ff8ae2 90%);
    background-size: 300% 300%;
    animation: holo-sheen 6s linear infinite;
}

@keyframes holo-sheen {
    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 300% 50%;
    }
}

/* --- AI Nostalgia: RGB-split glitch type --------------------------------- */
.demo-ai-nostalgia {
    background:
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 3px),
        #16060d;
}

.demo-ai-nostalgia .glitch-word {
    position: relative;
    font-family: 'Courier New', monospace;
    font-size: clamp(1.2rem, 3.5vw, 2rem);
    font-weight: 700;
    color: #fff;
}

.demo-ai-nostalgia .glitch-word::before,
.demo-ai-nostalgia .glitch-word::after {
    content: attr(data-text);
    position: absolute;
    inset: 0;
    opacity: 0.8;
}

.demo-ai-nostalgia .glitch-word::before {
    color: #ff0055;
    animation: glitch-shift 2.5s steps(2, jump-none) infinite;
}

.demo-ai-nostalgia .glitch-word::after {
    color: #00ccff;
    animation: glitch-shift 2.5s steps(2, jump-none) infinite reverse;
}

@keyframes glitch-shift {
    0%, 88% {
        transform: translate(0, 0);
        clip-path: inset(0 0 0 0);
    }

    90% {
        transform: translate(-4px, 2px);
        clip-path: inset(20% 0 40% 0);
    }

    94% {
        transform: translate(4px, -2px);
        clip-path: inset(60% 0 10% 0);
    }

    98% {
        transform: translate(-2px, 0);
        clip-path: inset(0 0 70% 0);
    }
}

/* --- Bio-Luminescent UI: glowing organisms in the deep ------------------- */
.demo-bio-luminescent-ui {
    background: radial-gradient(ellipse at 50% 120%, #001a33 0%, #000210 70%);
    color: #d6ff4d;
}

.demo-bio-luminescent-ui .bio-orb {
    position: absolute;
    border-radius: 50%;
    animation: bio-drift 7s ease-in-out infinite alternate;
}

.demo-bio-luminescent-ui .bio-o1 {
    width: 14%;
    aspect-ratio: 1;
    left: 18%;
    top: 25%;
    background: #ccff00;
    box-shadow: 0 0 25px 8px rgba(204, 255, 0, 0.55);
}

.demo-bio-luminescent-ui .bio-o2 {
    width: 8%;
    aspect-ratio: 1;
    right: 22%;
    top: 40%;
    background: #33ffd5;
    box-shadow: 0 0 20px 6px rgba(51, 255, 213, 0.5);
    animation-delay: -2.5s;
}

.demo-bio-luminescent-ui .bio-o3 {
    width: 5%;
    aspect-ratio: 1;
    left: 48%;
    bottom: 18%;
    background: #66aaff;
    box-shadow: 0 0 15px 5px rgba(102, 170, 255, 0.5);
    animation-delay: -5s;
}

.demo-bio-luminescent-ui .demo-word {
    margin-top: 42%;
    text-shadow: 0 0 12px rgba(214, 255, 77, 0.7);
}

@keyframes bio-drift {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-14px);
    }
}

/* --- Zero-UI Spatial: containerless panes floating in depth -------------- */
.demo-zero-ui-spatial {
    background: linear-gradient(180deg, #f4f6f8, #e7ebef);
    color: #333;
    perspective: 600px;
}

.demo-zero-ui-spatial .sp-pane {
    position: absolute;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(4px);
    box-shadow: 0 25px 40px -20px rgba(30, 50, 70, 0.35);
    animation: sp-float 6s ease-in-out infinite alternate;
}

.demo-zero-ui-spatial .sp-p1 {
    width: 42%;
    height: 38%;
    left: 14%;
    top: 18%;
    transform: rotateY(18deg) rotateX(4deg);
}

.demo-zero-ui-spatial .sp-p2 {
    width: 32%;
    height: 30%;
    right: 14%;
    bottom: 20%;
    transform: rotateY(-16deg) rotateX(-3deg);
    animation-delay: -3s;
}

@keyframes sp-float {
    from {
        margin-top: 0;
    }

    to {
        margin-top: -10px;
    }
}

/* --- Sustainable 4.0: dithered, system-font, featherweight --------------- */
.demo-sustainable-4-0 {
    flex-direction: column;
    gap: 0.5rem;
    background:
        repeating-conic-gradient(#2e3b2e 0% 25%, #253225 0% 50%) 0 0 / 6px 6px;
    color: #aaffaa;
}

.demo-sustainable-4-0 .eco-stat {
    font-family: 'Courier New', monospace;
    font-size: clamp(1.4rem, 4vw, 2.4rem);
    font-weight: 700;
    background: #0d140d;
    padding: 0.2em 0.5em;
    border: 1px solid #aaffaa;
}

.demo-sustainable-4-0 .demo-word {
    font-family: 'Courier New', monospace;
    background: #0d140d;
    padding: 0.2em 0.6em;
}

/* --- Acid Graphics: broken grid, hard shadows, vibrating neon type ------- */
.demo-acid-graphics {
    background:
        linear-gradient(rgba(204, 255, 0, 0.25) 1px, transparent 1px),
        linear-gradient(90deg, rgba(204, 255, 0, 0.25) 1px, transparent 1px),
        #000;
    background-size: 28px 28px;
}

.demo-acid-graphics .acid-word {
    font-family: 'Courier New', monospace;
    font-size: clamp(1.4rem, 4vw, 2.4rem);
    font-weight: 900;
    letter-spacing: 0.2em;
    color: #ccff00;
    background: #000;
    border: 3px double #ccff00;
    padding: 0.2em 0.5em;
    box-shadow: 8px 8px 0 #ff00cc;
    transform: rotate(-4deg);
    animation: acid-jitter 0.35s steps(2, jump-none) infinite;
}

@keyframes acid-jitter {
    0% {
        transform: rotate(-4deg) translate(0, 0);
    }

    50% {
        transform: rotate(-3deg) translate(2px, -2px);
    }

    100% {
        transform: rotate(-4deg) translate(-2px, 2px);
    }
}

/* --- Bento Grids: compartmentalized tiles --------------------------------- */
.demo-bento-grids {
    background: #ececec;
    padding: 8%;
}

.demo-bento-grids .bento-box {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 8px;
}

.demo-bento-grids .bento-box i {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.07);
}

.demo-bento-grids .bento-box i:nth-child(1) {
    grid-row: span 2;
    background: linear-gradient(135deg, #fff, #f0f4ff);
}

.demo-bento-grids .bento-box i:nth-child(4) {
    grid-column: span 2;
    background: linear-gradient(135deg, #fff, #fff4ec);
}

/* --- Retro Y2K: chrome type on bubblegum pink ----------------------------- */
.demo-retro-y2k {
    background:
        radial-gradient(circle at 20% 25%, rgba(255, 255, 255, 0.7) 0%, transparent 18%),
        radial-gradient(circle at 78% 70%, rgba(255, 255, 255, 0.5) 0%, transparent 14%),
        linear-gradient(160deg, #ff77d9, #ff00cc);
}

.demo-retro-y2k .chrome-word {
    font-size: clamp(1.8rem, 5vw, 3rem);
    font-weight: 900;
    font-style: italic;
    letter-spacing: 0.05em;
    background: linear-gradient(180deg, #eef6ff 0%, #9db8cc 45%, #4d6a80 50%, #cfe6f5 55%, #ffffff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(2px 3px 0 rgba(60, 0, 60, 0.45));
}

/* --- Synthwave Sunset: neon sun over an infinite grid --------------------- */
.demo-synthwave-sunset {
    background: linear-gradient(180deg, #1b0033 0%, #45045e 45%, #b3126b 60%, #2a0a4a 60%);
}

.demo-synthwave-sunset .sw-sun {
    position: absolute;
    left: 50%;
    top: 52%;
    width: 34%;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: linear-gradient(180deg, #ffe36e 0%, #ff9a3d 45%, #ff2975 100%);
    box-shadow: 0 0 35px rgba(255, 41, 117, 0.75);
    -webkit-mask: linear-gradient(#000 0 62%, transparent 62% 66%, #000 66% 72%, transparent 72% 75%, #000 75% 80%, transparent 80% 83%, #000 83% 100%);
    mask: linear-gradient(#000 0 62%, transparent 62% 66%, #000 66% 72%, transparent 72% 75%, #000 75% 80%, transparent 80% 83%, #000 83% 100%);
}

.demo-synthwave-sunset .sw-grid {
    position: absolute;
    left: -25%;
    right: -25%;
    top: 60%;
    bottom: 0;
    background:
        linear-gradient(rgba(0, 255, 249, 0.55) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 255, 249, 0.55) 1px, transparent 1px);
    background-size: 100% 18px, 48px 100%;
    transform: perspective(180px) rotateX(55deg);
    transform-origin: top center;
    animation: sw-scroll 1.6s linear infinite;
}

.demo-synthwave-sunset .sw-word {
    position: relative;
    z-index: 2;
    margin-top: -38%;
    font-size: clamp(1.1rem, 3vw, 1.7rem);
    font-weight: 900;
    font-style: italic;
    letter-spacing: 0.45em;
    text-indent: 0.45em;
    color: #fff;
    text-shadow: 0 0 8px #00fff9, 0 0 20px #ff2975;
}

@keyframes sw-scroll {
    from {
        background-position: 0 0, 0 0;
    }

    to {
        background-position: 0 18px, 0 0;
    }
}

/* --- Ultra Minimal: one dot, maximal whitespace --------------------------- */
.demo-ultra-minimal {
    background: #ffffff;
    border: 1px solid #eee;
}

.demo-ultra-minimal .min-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #000;
}

/* --- Accessibility: respect reduced motion -------------------------------- */
@media (prefers-reduced-motion: reduce) {

    .trend-demo *,
    .trend-demo *::before,
    .trend-demo *::after {
        animation: none !important;
    }
}