/* =====================================================
   Rich Media Headline Widget — rmh-widget.css v1.5
   Layout only. All animations handled by Elementor.
   ===================================================== */

.rmh-wrap {
    display: block;
    margin: 0;
    padding: 0;
    font-size: clamp(2rem, 6vw, 5rem);
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: #fff;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Inline layout */
/* Inline layout — items are inline-block so GSAP transforms work on ALL item types.
   display:inline breaks CSS transforms (x, y, scale etc) — inline-block fixes this.
   line-height on the wrap keeps text baseline consistent. */
.rmh-wrap.rmh-layout-inline { display: block; }
/* Text items: inline so they flow naturally in the headline */
.rmh-layout-inline .rmh-item-text  { display: inline; }
/* Media items: inline-block for vertical-align control */
.rmh-layout-inline .rmh-item-media { display: inline-block; vertical-align: middle; }
/* Animated items need inline-block for GSAP transforms — but only when animation is set */
.rmh-layout-inline .rmh-item-text.rmh-has-anim  { display: inline-block; }
/* Force consistent font rendering — prevents thick/bold artifact during GPU compositing.
   transform:translateZ(0) creates a new compositing layer which locks in antialiasing. */
.rmh-wrap {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.rmh-item-text.rmh-has-anim {
    /* translateZ forces GPU layer, consistent rendering during animation */
    transform: translateZ(0);
}

/* Stacked layout */
.rmh-wrap.rmh-layout-stacked { display: flex; flex-direction: column; align-items: center; }
.rmh-layout-stacked .rmh-item,
.rmh-layout-stacked .rmh-item-media { display: block; margin-bottom: 0.2em; }

/* Media frame */
.rmh-media-frame { display: inline-block; overflow: hidden; }

/* Media fills frame */
.rmh-media-img,
.rmh-media-video { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Text span */
.rmh-text { display: inline; }

/* Elementor invisible — used by Elementor's own animation system */
.elementor-invisible { visibility: hidden; }

@media (max-width: 767px) {
    .rmh-wrap { font-size: clamp(1.4rem, 7vw, 2.5rem); }
}

/* =====================================================
   ANIMATION KEYFRAMES — bundled so animate.css isn't
   required as an external dependency.
   ===================================================== */

/* rmh-has-anim: inline-block already set globally above */
.animated { animation-fill-mode: both; animation-duration: 1s; display: inline-block; }
.animated-slow { animation-duration: 1.5s !important; }
.animated-fast  { animation-duration: 0.5s !important; }

@keyframes fadeIn        { from{opacity:0} to{opacity:1} }
@keyframes fadeInUp      { from{opacity:0;transform:translate3d(0,40px,0)} to{opacity:1;transform:translate3d(0,0,0)} }
@keyframes fadeInDown    { from{opacity:0;transform:translate3d(0,-40px,0)} to{opacity:1;transform:translate3d(0,0,0)} }
@keyframes fadeInLeft    { from{opacity:0;transform:translate3d(-40px,0,0)} to{opacity:1;transform:translate3d(0,0,0)} }
@keyframes fadeInRight   { from{opacity:0;transform:translate3d(40px,0,0)} to{opacity:1;transform:translate3d(0,0,0)} }
@keyframes zoomIn        { from{opacity:0;transform:scale3d(0.4,0.4,0.4)} to{opacity:1;transform:scale3d(1,1,1)} }
@keyframes zoomInUp      { from{opacity:0;transform:scale3d(0.4,0.4,0.4) translate3d(0,60px,0)} to{opacity:1;transform:scale3d(1,1,1) translate3d(0,0,0)} }
@keyframes zoomInDown    { from{opacity:0;transform:scale3d(0.4,0.4,0.4) translate3d(0,-60px,0)} to{opacity:1;transform:scale3d(1,1,1) translate3d(0,0,0)} }
@keyframes zoomInLeft    { from{opacity:0;transform:scale3d(0.4,0.4,0.4) translate3d(-60px,0,0)} to{opacity:1;transform:scale3d(1,1,1) translate3d(0,0,0)} }
@keyframes zoomInRight   { from{opacity:0;transform:scale3d(0.4,0.4,0.4) translate3d(60px,0,0)} to{opacity:1;transform:scale3d(1,1,1) translate3d(0,0,0)} }
@keyframes bounceIn      { 0%{opacity:0;transform:scale3d(0.3,0.3,0.3)} 50%{opacity:1;transform:scale3d(1.05,1.05,1.05)} 70%{transform:scale3d(0.9,0.9,0.9)} 100%{transform:scale3d(1,1,1)} }
@keyframes bounceInUp    { 0%{opacity:0;transform:translate3d(0,80px,0)} 60%{opacity:1;transform:translate3d(0,-20px,0)} 80%{transform:translate3d(0,6px,0)} 100%{transform:translate3d(0,0,0)} }
@keyframes bounceInDown  { 0%{opacity:0;transform:translate3d(0,-80px,0)} 60%{opacity:1;transform:translate3d(0,20px,0)} 80%{transform:translate3d(0,-6px,0)} 100%{transform:translate3d(0,0,0)} }
@keyframes bounceInLeft  { 0%{opacity:0;transform:translate3d(-100px,0,0)} 60%{opacity:1;transform:translate3d(20px,0,0)} 80%{transform:translate3d(-6px,0,0)} 100%{transform:translate3d(0,0,0)} }
@keyframes bounceInRight { 0%{opacity:0;transform:translate3d(100px,0,0)} 60%{opacity:1;transform:translate3d(-20px,0,0)} 80%{transform:translate3d(6px,0,0)} 100%{transform:translate3d(0,0,0)} }
@keyframes slideInUp     { from{transform:translate3d(0,100%,0)} to{transform:translate3d(0,0,0)} }
@keyframes slideInDown   { from{transform:translate3d(0,-100%,0)} to{transform:translate3d(0,0,0)} }
@keyframes slideInLeft   { from{transform:translate3d(-100%,0,0)} to{transform:translate3d(0,0,0)} }
@keyframes slideInRight  { from{transform:translate3d(100%,0,0)} to{transform:translate3d(0,0,0)} }
@keyframes rotateIn      { from{opacity:0;transform:rotate3d(0,0,1,-200deg)} to{opacity:1;transform:translate3d(0,0,0)} }
@keyframes rotateInDownLeft  { from{opacity:0;transform-origin:left bottom;transform:rotate3d(0,0,1,-45deg)} to{opacity:1;transform-origin:left bottom;transform:translate3d(0,0,0)} }
@keyframes rotateInDownRight { from{opacity:0;transform-origin:right bottom;transform:rotate3d(0,0,1,45deg)} to{opacity:1;transform-origin:right bottom;transform:translate3d(0,0,0)} }
@keyframes flipInX       { from{opacity:0;transform:perspective(400px) rotate3d(1,0,0,90deg)} to{opacity:1;transform:perspective(400px)} }
@keyframes flipInY       { from{opacity:0;transform:perspective(400px) rotate3d(0,1,0,90deg)} to{opacity:1;transform:perspective(400px)} }
@keyframes bounce        { 0%,100%{transform:translate3d(0,0,0)} 25%{transform:translate3d(0,-20px,0)} 75%{transform:translate3d(0,-10px,0)} }
@keyframes pulse         { 0%,100%{transform:scale3d(1,1,1)} 50%{transform:scale3d(1.08,1.08,1.08)} }
@keyframes rubberBand    { 0%,100%{transform:scale3d(1,1,1)} 30%{transform:scale3d(1.25,0.75,1)} 60%{transform:scale3d(0.85,1.1,1)} 80%{transform:scale3d(1.05,0.95,1)} }
@keyframes shake         { 0%,100%{transform:translate3d(0,0,0)} 20%,60%{transform:translate3d(-10px,0,0)} 40%,80%{transform:translate3d(10px,0,0)} }
@keyframes tada          { 0%,100%{transform:scale3d(1,1,1)} 10%,20%{transform:scale3d(0.9,0.9,0.9) rotate3d(0,0,1,-3deg)} 30%,50%,70%,90%{transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg)} 40%,60%,80%{transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg)} }
@keyframes wobble        { 0%,100%{transform:none} 15%{transform:translate3d(-20px,0,0) rotate3d(0,0,1,-5deg)} 45%{transform:translate3d(15px,0,0) rotate3d(0,0,1,3deg)} 75%{transform:translate3d(-8px,0,0) rotate3d(0,0,1,-2deg)} }
@keyframes lightSpeedIn  { from{opacity:0;transform:translate3d(100%,0,0) skewX(-30deg)} 60%{opacity:1;transform:skewX(20deg)} 80%{transform:skewX(-5deg)} to{transform:none} }
@keyframes rollIn        { from{opacity:0;transform:translate3d(-100%,0,0) rotate3d(0,0,1,-120deg)} to{opacity:1;transform:none} }