/**
 * Relay Frontend Styles
 */

/* Ad unit container */
.relay-ad-unit {
    position: relative;
    overflow: hidden;
}

/* Loading / placeholder state */
.relay-ad-placeholder {
    position: relative;
    background: #f0f0f0;
    overflow: hidden;
    min-height: 100px;
}

.relay-ad-placeholder::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.4) 50%,
        transparent 100%
    );
    animation: relay-skeleton-pulse 1.5s ease-in-out infinite;
}

@keyframes relay-skeleton-pulse {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

/* Loaded state */
.relay-ad-unit.relay-loaded {
    animation: relay-fade-in 0.3s ease-in;
}

@keyframes relay-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Error state */
.relay-ad-unit.relay-error {
    display: none;
}

/* Auto-insert spacing */
.relay-auto-insert {
    margin: 1.5em 0;
    clear: both;
}