/**
 * Royal Section Divider Widget CSS
 * Multi-layer animated wave dividers using CSS shape() with SVG fallback
 */

/* ===========================
   BASE CONTAINER
   =========================== */
.royal-section-divider-wrap {
    position: relative;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    pointer-events: none;
}

.royal-section-divider-wrap.rsd-position-top {
    top: 0;
    left: 0;
}

.royal-section-divider-wrap.rsd-position-bottom {
    bottom: 0;
    left: 0;
}

/* ===========================
   LAYER SYSTEM
   =========================== */
.rsd-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.rsd-layer:first-child {
    position: relative;
}

/* ===========================
   SVG FALLBACK RENDERING
   =========================== */
.royal-section-divider-wrap svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* ===========================
   CANVAS (shape() path rendering)
   =========================== */
.rsd-canvas-wrap {
    position: relative;
    width: 100%;
    overflow: hidden;
    line-height: 0;
}

.rsd-canvas {
    display: block;
    width: 100%;
}

/* ===========================
   MULTI-LAYER WRAPPER
   =========================== */
.rsd-layers-container {
    position: relative;
    width: 100%;
    line-height: 0;
}

.rsd-single-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

.rsd-single-layer:first-child {
    position: relative;
}

/* ===========================
   GRADIENT SVG DEFS
   =========================== */
.rsd-gradient-defs {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* ===========================
   BLUR / GLOW EFFECTS
   =========================== */
.rsd-blur-enabled svg path,
.rsd-blur-enabled canvas {
    filter: blur(0px);
}

.rsd-glow-enabled .rsd-single-layer svg path {
    filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.3));
}

.rsd-glow-enabled.rsd-glow-custom .rsd-single-layer svg path {
    filter: var(--rsd-glow-filter, drop-shadow(0 0 8px rgba(0,0,0,0.3)));
}

/* ===========================
   INFINITE FLOAT ANIMATION
   =========================== */
@keyframes rsd-float-horizontal {
    0%   { transform: translateX(0); }
    50%  { transform: translateX(-20px); }
    100% { transform: translateX(0); }
}

@keyframes rsd-float-vertical {
    0%   { transform: translateY(0); }
    50%  { transform: translateY(-8px); }
    100% { transform: translateY(0); }
}

@keyframes rsd-morph-wave {
    0%   { d: path(var(--rsd-path-start, '')); }
    50%  { d: path(var(--rsd-path-mid, '')); }
    100% { d: path(var(--rsd-path-start, '')); }
}

@keyframes rsd-wave-shift {
    0%   { transform: translateX(0%); }
    100% { transform: translateX(-50%); }
}

.rsd-animate-float .rsd-single-layer:nth-child(1) svg {
    animation: rsd-float-horizontal var(--rsd-anim-speed, 6s) ease-in-out infinite;
}
.rsd-animate-float .rsd-single-layer:nth-child(2) svg {
    animation: rsd-float-horizontal var(--rsd-anim-speed-2, 9s) ease-in-out infinite reverse;
}
.rsd-animate-float .rsd-single-layer:nth-child(3) svg {
    animation: rsd-float-vertical var(--rsd-anim-speed-3, 12s) ease-in-out infinite;
}

/* Continuous wave shift (tiling SVG trick) */
.rsd-animate-continuous .rsd-wave-tile {
    display: flex;
    width: 200%;
    animation: rsd-wave-shift var(--rsd-wave-speed, 8s) linear infinite;
}

.rsd-animate-continuous .rsd-wave-tile svg {
    width: 50%;
    flex-shrink: 0;
}

/* ===========================
   HOVER MORPHING
   =========================== */
.rsd-hover-morph {
    cursor: default;
}

.rsd-hover-morph .rsd-single-layer svg path {
    transition: d 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===========================
   SCROLL TRIGGER STATES
   =========================== */
.rsd-scroll-trigger-active {
    /* JS will update CSS vars */
    --rsd-scroll-height: 100%;
}

/* ===========================
   FLIP (top/bottom)
   =========================== */
.rsd-divider-top .rsd-layers-container {
    transform: rotate(0deg);
}

.rsd-divider-bottom .rsd-layers-container {
    transform: scaleY(-1);
}

/* Horizontal flip */
.rsd-flip-h .rsd-layers-container {
    transform: scaleX(-1);
}

.rsd-divider-bottom.rsd-flip-h .rsd-layers-container {
    transform: scaleX(-1) scaleY(-1);
}

/* ===========================
   RESPONSIVE
   =========================== */
@media (max-width: 1024px) {
    .rsd-layer-wrapper {
        --rsd-height-tablet: var(--rsd-height-tablet, var(--rsd-height, 80px));
    }
}

@media (max-width: 767px) {
    .rsd-layer-wrapper {
        --rsd-height-mobile: var(--rsd-height-mobile, var(--rsd-height, 60px));
    }
}

/* ===========================
   PRESET BADGES (editor only)
   =========================== */
.elementor-editor-active .royal-section-divider-wrap::before {
    content: attr(data-preset-label);
    position: absolute;
    top: 4px;
    left: 4px;
    background: rgba(0,0,0,0.5);
    color: #fff;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 3px;
    z-index: 100;
    pointer-events: none;
    font-family: monospace;
    white-space: nowrap;
}