/* SWETCH side ads prototype/live effects v0.2.1 */

:root {
    --side-ad-width: 160px;
    --side-ad-height: 600px;
    --side-ad-gap: 24px;
    --side-ad-transition: 900ms;
    color-scheme: dark;
}

/* Live integration: isolated fixed rails outside the existing 1160px content. */
.swetch-side-ad-rail {
    position: fixed;
    z-index: 60;
    top: var(--side-ad-rail-top, max(16px, calc((100vh - var(--side-ad-height)) / 2)));
    display: none;
    width: var(--side-ad-width);
    height: var(--side-ad-height);
    transform: none;
}

body.side-ads-live-ready .swetch-side-ad-rail {
    display: block;
}

body.side-ads-live-ready .wrap {
    width: min(1160px, calc(100% - 400px));
}

.swetch-side-ad-rail--left {
    left: max(12px, calc(50vw - 764px));
}

.swetch-side-ad-rail--right {
    right: max(12px, calc(50vw - 764px));
}

.swetch-side-ad-rail .side-ad-stage {
    width: 100%;
    height: 100%;
}

.swetch-side-ad-rail .side-ad {
    box-shadow: 0 18px 52px rgba(0, 0, 0, .48);
}

* {
    box-sizing: border-box;
}

body.side-ads-demo {
    min-width: 320px;
    margin: 0;
    color: #f4f7fb;
    background:
        radial-gradient(circle at 15% 10%, rgba(93, 52, 255, .14), transparent 30rem),
        radial-gradient(circle at 90% 20%, rgba(16, 220, 176, .1), transparent 26rem),
        #090c12;
    font: 16px/1.5 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.side-ads-demo a {
    color: inherit;
}

.side-ads-demo-header {
    width: min(100% - 32px, 1160px);
    margin: 24px auto 18px;
    padding: 18px 22px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 22px;
    background: rgba(18, 23, 34, .84);
    box-shadow: 0 16px 50px rgba(0, 0, 0, .26);
    backdrop-filter: blur(18px);
}

.side-ads-demo-header__eyebrow {
    margin: 0 0 4px;
    color: #75f1cd;
    font-size: .72rem;
    font-weight: 850;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.side-ads-demo-header h1,
.side-ads-demo-header p {
    margin: 0;
}

.side-ads-demo-header h1 {
    font-size: clamp(1.5rem, 3vw, 2.3rem);
    line-height: 1.05;
}

.side-ads-demo-header p:last-child {
    margin-top: 8px;
    color: #aeb8ca;
}

.side-ads-layout {
    display: grid;
    grid-template-columns: var(--side-ad-width) minmax(680px, 1060px) var(--side-ad-width);
    align-items: start;
    justify-content: center;
    gap: var(--side-ad-gap);
    width: min(100% - 28px, 1450px);
    margin: 0 auto 72px;
}

.side-ads-column {
    position: sticky;
    top: 18px;
    width: var(--side-ad-width);
    height: var(--side-ad-height);
}

.side-ad-stage {
    width: 100%;
    height: 100%;
}

.side-ad-empty {
    display: grid;
    height: 100%;
    place-items: center;
    padding: 18px;
    border: 1px dashed rgba(255, 255, 255, .16);
    border-radius: 22px;
    color: #8893a8;
    font-size: .76rem;
    text-align: center;
}

.side-ad {
    position: relative;
    isolation: isolate;
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 24px;
    color: #fff;
    background: #101521;
    box-shadow: 0 25px 70px rgba(0, 0, 0, .5);
    text-decoration: none;
    transform: translateZ(0);
}

.side-ad::before {
    content: "";
    position: absolute;
    z-index: 2;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(3, 5, 10, .12) 0%, transparent 27%),
        linear-gradient(0deg, rgba(4, 7, 13, .98) 0%, rgba(4, 7, 13, .7) 38%, transparent 67%);
}

.side-ad::after {
    content: "";
    position: absolute;
    z-index: 5;
    inset: 0;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: inherit;
    pointer-events: none;
}

.side-ad:focus-visible {
    outline: 3px solid #75f1cd;
    outline-offset: 4px;
}

.side-ad__media {
    position: absolute;
    z-index: 1;
    inset: 0;
    overflow: hidden;
    background: #111724;
}

.side-ad__frame {
    position: absolute;
    inset: -2%;
    width: 104%;
    height: 104%;
    object-fit: cover;
    object-position: var(--focal-point, 50% 50%);
    opacity: 0;
    transform-origin: center;
    transition:
        opacity var(--side-ad-transition) ease,
        transform var(--side-ad-transition) cubic-bezier(.2, .8, .2, 1),
        filter var(--side-ad-transition) ease;
}

.side-ad__frame.is-current {
    opacity: 1;
}

.side-ad__frame.is-leaving {
    opacity: 0;
}

.side-ad__top,
.side-ad__content {
    position: absolute;
    z-index: 3;
    right: 13px;
    left: 13px;
}

.side-ad__top {
    top: 13px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 7px;
}

.side-ad__disclosure,
.side-ad__source {
    padding: 5px 7px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 999px;
    color: rgba(255, 255, 255, .9);
    background: rgba(4, 7, 13, .66);
    font-size: .56rem;
    font-weight: 850;
    letter-spacing: .06em;
    line-height: 1;
    text-transform: uppercase;
    backdrop-filter: blur(10px);
}

.side-ad__source {
    flex: 0 0 auto;
    color: #75f1cd;
}

.side-ad__content {
    bottom: 15px;
}

.side-ad__label {
    display: block;
    margin-bottom: 8px;
    color: #75f1cd;
    font-size: .66rem;
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.side-ad__title {
    display: block;
    margin-bottom: 9px;
    font-size: 1.24rem;
    font-weight: 950;
    letter-spacing: -.035em;
    line-height: .98;
    text-wrap: balance;
}

.side-ad__description {
    display: -webkit-box;
    margin-bottom: 13px;
    overflow: hidden;
    color: #c9d0dc;
    font-size: .72rem;
    line-height: 1.38;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
}

.side-ad__cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    min-height: 36px;
    padding: 9px 10px;
    border-radius: 12px;
    color: #08110f;
    background: #75f1cd;
    font-size: .7rem;
    font-weight: 900;
    line-height: 1.1;
}

.side-ad__cta::after {
    content: "↗";
    font-size: .95rem;
}

.side-ad__counter {
    display: block;
    margin-top: 8px;
    color: rgba(255, 255, 255, .58);
    font-size: .59rem;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.side-ad:hover .side-ad__cta {
    background: #fff;
}

.side-ad.is-paused .side-ad__counter::before {
    content: "Pausiert · ";
}

.side-ad.fx-zoom .side-ad__frame.is-current {
    animation: side-ad-zoom var(--frame-duration, 8s) linear both;
}

.side-ad.fx-slide .side-ad__frame {
    transform: translateX(45%) skewX(-8deg) scale(1.18);
    filter: blur(8px) brightness(1.3);
}

.side-ad.fx-slide .side-ad__frame.is-current {
    animation: side-ad-speed-slide var(--side-ad-transition) cubic-bezier(.1, .9, .2, 1) both;
}

.side-ad.fx-flip .side-ad__frame {
    transform: perspective(520px) rotateY(72deg) scale(.82);
    filter: brightness(.35) saturate(1.8);
}

.side-ad.fx-flip .side-ad__frame.is-current {
    animation: side-ad-3d-slam var(--side-ad-transition) cubic-bezier(.15, 1.2, .25, 1) both;
}

.side-ad.fx-lift .side-ad__frame {
    transform: translateY(32%) scale(1.22);
    filter: blur(7px) contrast(1.3);
}

.side-ad.fx-lift .side-ad__frame.is-current {
    animation: side-ad-vertical-boost var(--side-ad-transition) cubic-bezier(.12, .95, .2, 1.18) both;
}

.side-ad.fx-glitch .side-ad__frame.is-current {
    animation: side-ad-glitch-sequence var(--frame-duration, 8s) steps(2, end) both;
}

.side-ad.fx-rgb .side-ad__frame.is-current {
    animation: side-ad-rgb-sequence var(--frame-duration, 8s) steps(3, end) both;
}

.side-ad.fx-rgb::after {
    border-color: rgba(80, 235, 255, .45);
    box-shadow: inset 3px 0 rgba(255, 35, 120, .24), inset -3px 0 rgba(35, 220, 255, .24);
    animation: side-ad-rgb-border 1.4s steps(2, end) infinite;
}

.side-ad.fx-scan .side-ad__frame.is-current {
    animation: side-ad-scan-reveal var(--side-ad-transition) cubic-bezier(.2, .85, .2, 1) both;
}

.side-ad.fx-scan::after {
    border: 0;
    border-radius: 0;
    background: linear-gradient(
        180deg,
        transparent 0%,
        transparent 44%,
        rgba(255, 255, 255, .75) 48%,
        rgba(76, 245, 216, .95) 50%,
        rgba(76, 245, 216, .18) 54%,
        transparent 60%
    );
    mix-blend-mode: screen;
    opacity: .8;
    animation: side-ad-scan-line 2.4s cubic-bezier(.25, .8, .25, 1) infinite;
}

.side-ad.fx-impact {
    animation: side-ad-impact-shell var(--frame-duration, 8s) linear infinite;
}

.side-ad.fx-impact .side-ad__frame.is-current {
    animation: side-ad-impact-in var(--side-ad-transition) cubic-bezier(.12, 1.25, .3, 1) both;
}

.side-ads-main {
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 28px;
    background: #0f141e;
    box-shadow: 0 25px 80px rgba(0, 0, 0, .28);
}

.side-ads-main__hero {
    padding: clamp(28px, 6vw, 74px);
    background:
        linear-gradient(110deg, rgba(7, 10, 16, .96), rgba(7, 10, 16, .5)),
        radial-gradient(circle at 82% 20%, rgba(117, 241, 205, .22), transparent 24rem),
        #161d2a;
}

.side-ads-main__logo {
    width: min(220px, 55%);
    height: auto;
}

.side-ads-main__hero h2 {
    max-width: 680px;
    margin: 36px 0 13px;
    font-size: clamp(2.1rem, 6vw, 4.6rem);
    letter-spacing: -.055em;
    line-height: .94;
}

.side-ads-main__hero p {
    max-width: 620px;
    margin: 0;
    color: #aeb8ca;
    font-size: clamp(1rem, 2vw, 1.2rem);
}

.side-ads-main__filters {
    display: flex;
    gap: 9px;
    padding: 16px 22px;
    overflow-x: auto;
    border-block: 1px solid rgba(255, 255, 255, .08);
    background: rgba(11, 15, 23, .96);
}

.side-ads-main__filters span {
    flex: 0 0 auto;
    padding: 8px 13px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 999px;
    color: #aeb8ca;
    font-size: .78rem;
    font-weight: 800;
}

.side-ads-main__filters span:first-child {
    color: #08110f;
    background: #75f1cd;
}

.side-ads-main__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    padding: 22px;
}

.side-ads-fake-card {
    min-height: 340px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 20px;
    background: #151b27;
}

.side-ads-fake-card__art {
    min-height: 190px;
    background:
        radial-gradient(circle at 75% 30%, var(--fake-accent, #6d4aff), transparent 28%),
        linear-gradient(140deg, #293246, #111620 62%);
}

.side-ads-fake-card__body {
    padding: 18px;
}

.side-ads-fake-card__body b {
    display: block;
    margin-bottom: 7px;
    font-size: 1.2rem;
}

.side-ads-fake-card__body p {
    margin: 0;
    color: #9da8bb;
}

.side-ads-mobile-note {
    display: none;
    width: min(100% - 32px, 740px);
    margin: 0 auto 18px;
    padding: 12px 16px;
    border: 1px solid rgba(117, 241, 205, .25);
    border-radius: 14px;
    color: #b9c5d7;
    background: rgba(117, 241, 205, .07);
    font-size: .82rem;
}

@keyframes side-ad-zoom {
    from { transform: scale(1.01); }
    to { transform: scale(1.14); }
}

@keyframes side-ad-glitch-in {
    0% { transform: translateX(-8px); filter: hue-rotate(80deg) contrast(1.4); }
    45% { transform: translateX(5px); clip-path: inset(18% 0 42%); }
    100% { transform: translateX(0); filter: none; clip-path: inset(0); }
}

@keyframes side-ad-glitch-drift {
    0%, 94%, 100% { transform: translateX(0) scale(1.05); filter: none; }
    95% { transform: translateX(-3px) scale(1.055); filter: hue-rotate(45deg); }
    97% { transform: translateX(3px) scale(1.05); }
}

@keyframes side-ad-glitch-sequence {
    0% { transform: translateX(-8px) scale(1.1); filter: hue-rotate(80deg) contrast(1.4); clip-path: inset(0 0 62%); }
    4% { transform: translateX(5px) scale(1.08); clip-path: inset(18% 0 42%); }
    8% { transform: translateX(-3px) scale(1.07); filter: hue-rotate(-45deg) contrast(1.25); clip-path: inset(55% 0 8%); }
    12%, 91%, 100% { transform: translateX(0) scale(1.05); filter: none; clip-path: inset(0); }
    93% { transform: translateX(-4px) scale(1.06); filter: hue-rotate(55deg) contrast(1.35); clip-path: inset(12% 0 54%); }
    95% { transform: translateX(4px) scale(1.05); filter: hue-rotate(-35deg); clip-path: inset(58% 0 9%); }
    97% { transform: translateX(0) scale(1.055); filter: none; clip-path: inset(0); }
}

@keyframes side-ad-speed-slide {
    0% { transform: translateX(52%) skewX(-10deg) scale(1.22); filter: blur(10px) brightness(1.45); }
    58% { transform: translateX(-6%) skewX(2deg) scale(1.1); filter: blur(1px) brightness(1.12); }
    78% { transform: translateX(3%) skewX(-1deg) scale(1.08); }
    100% { transform: translateX(0) skewX(0) scale(1.08); filter: none; }
}

@keyframes side-ad-3d-slam {
    0% { transform: perspective(520px) rotateY(78deg) rotateZ(3deg) scale(.7); filter: brightness(.25) saturate(2); }
    62% { transform: perspective(520px) rotateY(-8deg) rotateZ(-1deg) scale(1.13); filter: brightness(1.35); }
    82% { transform: perspective(520px) rotateY(3deg) scale(1.06); }
    100% { transform: perspective(520px) rotateY(0) scale(1.08); filter: none; }
}

@keyframes side-ad-vertical-boost {
    0% { transform: translateY(38%) scale(1.25); filter: blur(9px) contrast(1.4); }
    55% { transform: translateY(-8%) scale(1.12); filter: blur(1px) brightness(1.25); }
    78% { transform: translateY(3%) scale(1.09); }
    100% { transform: translateY(0) scale(1.08); filter: none; }
}

@keyframes side-ad-rgb-rip {
    0% { transform: translateX(-10px) scale(1.12); filter: hue-rotate(120deg) contrast(1.7); clip-path: inset(0 0 72%); }
    28% { transform: translateX(8px) scale(1.1); clip-path: inset(22% 0 40%); }
    52% { transform: translateX(-5px) scale(1.09); filter: hue-rotate(-70deg) saturate(2); clip-path: inset(58% 0 12%); }
    76% { transform: translateX(3px) scale(1.08); clip-path: inset(8% 0 6%); }
    100% { transform: translateX(0) scale(1.08); filter: none; clip-path: inset(0); }
}

@keyframes side-ad-rgb-pulse {
    0%, 89%, 100% { filter: none; transform: translateX(0) scale(1.08); }
    90% { filter: hue-rotate(110deg) contrast(1.5); transform: translateX(-4px) scale(1.09); }
    92% { filter: hue-rotate(-80deg) saturate(1.8); transform: translateX(5px) scale(1.08); }
    94% { filter: none; transform: translateX(0) scale(1.085); }
}

@keyframes side-ad-rgb-sequence {
    0% { transform: translateX(-10px) scale(1.12); filter: hue-rotate(120deg) contrast(1.7); clip-path: inset(0 0 72%); }
    4% { transform: translateX(8px) scale(1.1); clip-path: inset(22% 0 40%); }
    8% { transform: translateX(-5px) scale(1.09); filter: hue-rotate(-70deg) saturate(2); clip-path: inset(58% 0 12%); }
    12%, 88%, 100% { transform: translateX(0) scale(1.08); filter: none; clip-path: inset(0); }
    90% { transform: translateX(-5px) scale(1.09); filter: hue-rotate(110deg) contrast(1.5); clip-path: inset(8% 0 61%); }
    93% { transform: translateX(5px) scale(1.08); filter: hue-rotate(-80deg) saturate(1.8); clip-path: inset(62% 0 6%); }
    96% { transform: translateX(0) scale(1.085); filter: none; clip-path: inset(0); }
}

@keyframes side-ad-rgb-border {
    0%, 88%, 100% { transform: translateX(0); opacity: .75; }
    90% { transform: translateX(-3px); opacity: 1; }
    94% { transform: translateX(3px); }
}

@keyframes side-ad-scan-reveal {
    0% { transform: scale(1.18); filter: grayscale(1) brightness(.25) contrast(1.8); clip-path: inset(100% 0 0); }
    62% { transform: scale(1.1); filter: grayscale(.2) brightness(1.4) contrast(1.25); clip-path: inset(0); }
    100% { transform: scale(1.08); filter: none; clip-path: inset(0); }
}

@keyframes side-ad-scan-line {
    0% { transform: translateY(-110%); opacity: 0; }
    12% { opacity: .85; }
    72% { opacity: .7; }
    100% { transform: translateY(110%); opacity: 0; }
}

@keyframes side-ad-impact-in {
    0% { transform: scale(1.5) rotate(2deg); filter: blur(10px) brightness(1.8); }
    42% { transform: scale(1.03) rotate(-1deg); filter: blur(0) brightness(1.2); }
    58% { transform: scale(1.14) rotate(.6deg); }
    76% { transform: scale(1.06) rotate(-.25deg); }
    100% { transform: scale(1.08) rotate(0); filter: none; }
}

@keyframes side-ad-impact-shell {
    0%, 91%, 100% { transform: translateZ(0); }
    92% { transform: translate3d(-2px, 1px, 0); }
    93% { transform: translate3d(3px, -1px, 0); }
    94% { transform: translate3d(-1px, 0, 0); }
}

.side-ads-demo.is-compact .side-ads-layout {
    grid-template-columns: repeat(2, var(--side-ad-width));
    width: min(100% - 28px, 1060px);
}

.side-ads-demo.is-compact .side-ads-main {
    grid-column: 1 / -1;
    grid-row: 1;
}

.side-ads-demo.is-compact .side-ads-column {
    position: relative;
    top: auto;
    grid-row: 2;
    margin-top: 4px;
}

.side-ads-demo.is-compact .side-ads-mobile-note {
    display: block;
}

@media (max-width: 720px) {
    .side-ads-layout {
        display: block;
    }

    .side-ads-column,
    .side-ads-demo.is-compact .side-ads-column {
        display: none;
    }

    .side-ads-demo-header {
        margin-top: 14px;
    }

    .side-ads-main__grid {
        grid-template-columns: 1fr;
        padding: 14px;
    }

    .side-ads-main__hero {
        padding: 30px 22px 42px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .side-ad__frame,
    .side-ad__cta,
    .side-ad,
    .side-ad::after {
        transition: none !important;
        animation: none !important;
    }
}