/* --- Animations --- */
[data-animation] {
    opacity: 0;
    animation-fill-mode: both;
}

.pb-animated {
    opacity: 1;
}

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeInUp { from { opacity: 0; transform: translate3d(0, 100%, 0); } to { opacity: 1; transform: none; } }
@keyframes fadeInDown { from { opacity: 0; transform: translate3d(0, -100%, 0); } to { opacity: 1; transform: none; } }
@keyframes fadeInLeft { from { opacity: 0; transform: translate3d(-100%, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes fadeInRight { from { opacity: 0; transform: translate3d(100%, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes zoomIn { from { opacity: 0; transform: scale3d(.3, .3, .3); } to { opacity: 1; transform: none; } }
@keyframes bounceIn {
  from, 20%, 40%, 60%, 80%, to { animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); }
  0% { opacity: 0; transform: scale3d(.3, .3, .3); }
  20% { transform: scale3d(1.1, 1.1, 1.1); }
  40% { transform: scale3d(.9, .9, .9); }
  60% { opacity: 1; transform: scale3d(1.03, 1.03, 1.03); }
  80% { transform: scale3d(.97, .97, .97); }
  to { opacity: 1; transform: scale3d(1, 1, 1); }
}

.animate-fadeIn { animation-name: fadeIn; }
.animate-fadeInUp { animation-name: fadeInUp; }
.animate-fadeInDown { animation-name: fadeInDown; }
.animate-fadeInLeft { animation-name: fadeInLeft; }
.animate-fadeInRight { animation-name: fadeInRight; }
.animate-zoomIn { animation-name: zoomIn; }
.animate-bounceIn { animation-name: bounceIn; }

/* --- Responsive Visibility --- */
/* In Edit Mode (if body has preview-mode class, apply these rules) */
body.preview-mode .hide-desktop { display: none !important; }
@media (max-width: 1024px) { body.preview-mode .hide-tablet { display: none !important; } }
@media (max-width: 768px) { body.preview-mode .hide-mobile { display: none !important; } }

/* In Live Site (Standard Breakpoints) */
@media (min-width: 1025px) {
    .hide-desktop:not(.pb-element-edit) { display: none !important; }
}
@media (max-width: 1024px) and (min-width: 768px) {
    .hide-tablet:not(.pb-element-edit) { display: none !important; }
}
@media (max-width: 767px) {
    .hide-mobile:not(.pb-element-edit) { display: none !important; }
}

/* In Edit Mode - Visual Indication */
.hide-desktop, .hide-tablet, .hide-mobile {
    position: relative;
}
.hide-desktop::after, .hide-tablet::after, .hide-mobile::after {
    content: '👁';
    position: absolute;
    top: 2px;
    right: 25px;
    font-size: 10px;
    opacity: 0.5;
    pointer-events: none;
    z-index: 10;
}

/* --- Shape Divider --- */
.pb-shape-divider {
    position: absolute;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    z-index: 1;
    pointer-events: none;
}
.pb-shape-divider-top { top: 0; }
.pb-shape-divider-bottom { bottom: 0; }

.pb-shape-divider svg {
    display: block;
    width: calc(100% + 1.3px);
    height: 100px;
    transform: rotateY(0deg);
}

.pb-shape-flip-x svg { transform: scaleX(-1); }
.pb-shape-flip-y svg { transform: scaleY(-1); }
.pb-shape-invert svg { transform: scale(-1, -1); }