.calmhaven-video-play-wrapper {
    display: inline-block;
    position: relative;
    text-align: center;
    overflow: visible;
}
.calmhaven-video-play-wrapper {
    width: 100%;           /* full container width */
    max-width: 100%;    
    align-items: center;
    justify-content: center;
    position: relative;
    display: flex;
    justify-content: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}


.calmhaven-video-play-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #ff0000;
    color: #fff;
    text-decoration: none;
    overflow: hidden;
    position: relative;
}

.calmhaven-video-play-button i,
.calmhaven-video-play-button svg,
.calmhaven-custom-svg {
    width: 40px;
    height: 40px;
    max-width: 100%;
    max-height: 100%;
}
/* Wrapper must allow overflow for ripple */
.ripple-wrapper {
    position: relative;
    display: inline-block;
    overflow: visible;
}

/* Ripple attached to wrapper, not button */
.ripple-wrapper::before,
.ripple-wrapper::after {
    content: '';
    position: absolute;
    border: 2px solid rgba(255,255,255,0.6);
    border-radius: 50%;
    width: 120px;          /* initial size of ripple */
    height: 120px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1); /* start outside button */
    transform-origin: center;
    animation: rippleAnim 2s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}

.ripple-wrapper::after {
    animation-delay: 1s; /* stagger second ripple */
}

@keyframes rippleAnim {
    0% {
        transform: translate(-50%, -50%) scale(0.8);  /* slightly smaller than ripple max size */
        opacity: 0.7;
    }
    40% {
        transform: translate(-50%, -50%) scale(1.2); /* expand outward */
        opacity: 0.2;
    }
    60% {
        transform: translate(-50%, -50%) scale(1.2); /* shrink back toward button edge */
        opacity: 0;
    }
    100% {
        transform: translate(-50%, -50%) scale(0.8); /* back to initial */
        opacity: 0.7;
    }
}

/* Button above ripple */
.calmhaven-video-play-button {
    position: relative;
    z-index: 1;
}


/* Attention Grabber Effects */
.attention-waggle .calmhaven-video-play-button { animation: waggle 1s infinite; }
@keyframes waggle {
    0%,100% { transform: rotate(0); }
    25% { transform: rotate(5deg); }
    75% { transform: rotate(-5deg); }
}

.attention-spin .calmhaven-video-play-button {animation: spin 1.5s linear infinite; /* 2s spin + 1s pause */}
@keyframes spin {
    0%   { transform: rotate(0deg); }
    66%  { transform: rotate(360deg); } /* reach full spin at 2s */
    100% { transform: rotate(360deg); } /* hold for 1s */
}

.attention-bounce .calmhaven-video-play-button { animation: bounce 1s infinite; }
@keyframes bounce {
    0%,100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.attention-grow .calmhaven-video-play-button { animation: grow 1.2s infinite alternate; }
@keyframes grow {
    from { transform: scale(1); }
    to { transform: scale(1.2); }
}

.attention-fade .calmhaven-video-play-button { animation: fade 1.5s infinite; }
@keyframes fade {
    0%,100% { opacity: 1; }
    50% { opacity: 0.3; }
}