/* =============================================================================
   Vaandel Widget Ads — front-end styles
   All theming via CSS custom properties set inline on the .vaa-widget wrapper.
   ========================================================================== */

.vaa-widget {
    box-sizing: border-box;
    width: 100%;
    background-color: var(--vaa-bg, #ededed);
    padding: var(--vaa-pad, 1em);
    border: var(--vaa-border, none);
    text-align: var(--vaa-align, left);
    font-family: var(--vaa-font, inherit);
}
.vaa-widget *,
.vaa-widget *::before,
.vaa-widget *::after {
    box-sizing: border-box;
}

/* --- rotator base --------------------------------------------------------- */
.vaa-rotator {
    position: relative;
    width: 100%;
}
.vaa-track {
    position: relative;
    width: 100%;
}
.vaa-rotator-item {
    width: 100%;
}

/* --- typography ----------------------------------------------------------- */
.vaa-heading {
    margin: 0 0 .35em;
    font-size: 1.25em;
    line-height: 1.3;
    font-weight: 700;
    color: var(--vaa-heading, inherit);
}
.vaa-subheading {
    margin: 0 0 .5em;
    font-size: 1em;
    line-height: 1.35;
    font-weight: 600;
    color: var(--vaa-subheading, inherit);
}
.vaa-body {
    margin: 0 0 .9em;
    line-height: 1.55;
    color: var(--vaa-body, inherit);
}
.vaa-body p {
    margin: 0 0 .75em;
}
.vaa-body p:last-child {
    margin-bottom: 0;
}

/* --- ad / image ----------------------------------------------------------- */
.vaa-ad {
    position: relative;
}
.vaa-ad-imgwrap {
    overflow: hidden;
}
.vaa-ad-img {
    display: block;
    max-width: 100%;
    height: auto;
}
.vaa-ad--img-above .vaa-ad-img {
    margin: 0 0 .9em;
}
.vaa-ad--img-below .vaa-ad-img {
    margin: .9em 0 0;
}

.vaa-media-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1em;
    align-items: center;
}
.vaa-ad--img-right .vaa-media-img {
    order: 2;
}
.vaa-ad--img-right .vaa-media-text {
    order: 1;
}

/* behind image */
.vaa-ad--img-behind {
    position: relative;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
.vaa-ad-overlay {
    position: absolute;
    inset: 0;
    background: #000;
}
.vaa-ad-inner {
    position: relative;
    z-index: 2;
}

/* --- badge ---------------------------------------------------------------- */
.vaa-badge {
    position: absolute;
    top: .5em;
    right: .5em;
    z-index: 6;
    display: inline-block;
    padding: .35em .75em;
    background-color: var(--vaa-accent, #800000);
    color: #fff;
    font-size: .75em;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: .05em;
    animation: vaa-badge-pulse 2.6s ease-in-out infinite;
}

/* --- button --------------------------------------------------------------- */
.vaa-btn {
    display: block;
    width: 100%;
    margin-top: .4em;
    padding: .75em 1em;
    border: 0;
    border-radius: 0;
    background-color: var(--vaa-btn-bg, #800000);
    color: var(--vaa-btn-text, #fff);
    text-align: center;
    text-decoration: none;
    font-weight: 600;
    line-height: 1.3;
    cursor: pointer;
}
.vaa-btn:hover,
.vaa-btn:focus {
    background-color: var(--vaa-btn-hover, #993333);
    color: var(--vaa-btn-text, #fff);
    text-decoration: none;
}

/* ===========================================================================
   Transitions
   ========================================================================== */

/* fade */
.vaa-widget--fade .vaa-track {
    overflow: hidden;
}
.vaa-widget--fade .vaa-rotator-item {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    visibility: hidden;
    z-index: 1;
    transition: opacity .7s ease, visibility .7s ease;
}
.vaa-widget--fade .vaa-rotator-item.is-active {
    opacity: 1;
    visibility: visible;
    position: relative;
    z-index: 2;
}

/* slide */
.vaa-widget--slide .vaa-rotator {
    overflow: hidden;
}
.vaa-widget--slide .vaa-track {
    display: flex;
    width: 100%;
    transform: translateX(calc(var(--vaa-pos, 0) * -100% / var(--vaa-count, 1)));
    transition: transform .7s cubic-bezier(.25, 1, .5, 1);
}
.vaa-widget--slide .vaa-rotator-item {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
}

/* flip */
.vaa-widget--flip .vaa-rotator {
    perspective: 1000px;
}
.vaa-widget--flip .vaa-track {
    overflow: hidden;
}
.vaa-widget--flip .vaa-rotator-item {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    visibility: hidden;
    transform: rotateY(-90deg);
    transform-origin: left center;
    transition: opacity .5s ease, transform .7s ease;
}
.vaa-widget--flip .vaa-rotator-item.is-active {
    opacity: 1;
    visibility: visible;
    transform: rotateY(0);
    position: relative;
    z-index: 2;
}

/* scale */
.vaa-widget--scale .vaa-track {
    overflow: hidden;
}
.vaa-widget--scale .vaa-rotator-item {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    visibility: hidden;
    transform: scale(.94);
    transition: opacity .6s ease, transform .6s ease;
}
.vaa-widget--scale .vaa-rotator-item.is-active {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
    position: relative;
    z-index: 2;
}

/* instant */
.vaa-widget--instant .vaa-rotator-item {
    display: none;
}
.vaa-widget--instant .vaa-rotator-item.is-active {
    display: block;
}

/* ===========================================================================
   Attention effects (opt-in per ad)
   ========================================================================== */

.vaa-effect-pulse .vaa-btn {
    animation: vaa-pulse 2.2s ease-in-out infinite;
}
.vaa-effect-glow .vaa-btn {
    animation: vaa-glow 2.4s ease-in-out infinite;
}
.vaa-effect-pulse_glow .vaa-btn {
    animation: vaa-pulse-glow 2.4s ease-in-out infinite;
}

.vaa-effect-shine .vaa-btn {
    position: relative;
    overflow: hidden;
}
.vaa-effect-shine .vaa-btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: -80%;
    width: 45%;
    height: 100%;
    background: linear-gradient(115deg, transparent, rgba(255, 255, 255, .35), transparent);
    transform: skewX(-20deg);
    animation: vaa-shine 3.6s ease-in-out infinite;
}

.vaa-effect-kenburns .vaa-ad-img {
    animation: vaa-kenburns 14s ease-in-out infinite alternate;
}
.vaa-effect-kenburns.vaa-ad--img-behind {
    animation: vaa-bg-kenburns 14s ease-in-out infinite alternate;
}

@keyframes vaa-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.04); }
}
@keyframes vaa-glow {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--vaa-accent, #800000) 0%, transparent); }
    50%      { box-shadow: 0 0 0 8px color-mix(in srgb, var(--vaa-accent, #800000) 30%, transparent); }
}
@keyframes vaa-pulse-glow {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 color-mix(in srgb, var(--vaa-accent, #800000) 0%, transparent); }
    50%      { transform: scale(1.03); box-shadow: 0 0 0 9px color-mix(in srgb, var(--vaa-accent, #800000) 30%, transparent); }
}
@keyframes vaa-shine {
    0%        { left: -80%; }
    55%, 100% { left: 130%; }
}
@keyframes vaa-kenburns {
    from { transform: scale(1); }
    to   { transform: scale(1.1); }
}
@keyframes vaa-bg-kenburns {
    from { background-size: 100% auto; }
    to   { background-size: 110% auto; }
}
@keyframes vaa-badge-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: .85; transform: scale(1.07); }
}

/* ===========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 560px) {
    .vaa-media-layout {
        grid-template-columns: 1fr;
    }
    .vaa-ad--img-right .vaa-media-img,
    .vaa-ad--img-right .vaa-media-text {
        order: 0;
    }
}

/* ===========================================================================
   Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .vaa-rotator-item {
        transition: none !important;
        animation: none !important;
    }
    .vaa-btn,
    .vaa-badge {
        animation: none !important;
    }
    .vaa-effect-kenburns .vaa-ad-img,
    .vaa-effect-kenburns.vaa-ad--img-behind {
        animation: none !important;
    }
}