/* ============================================================
   Rankbeta — Services & Features Widget
   Layout, animations, bottle positioning.
   Colors / typography set via Elementor controls.
   ============================================================ */

/* ── Kill inherited border / outline ── */
.rb-sf-section,
.elementor-widget-rankbeta_sf,
.elementor-widget-rankbeta_sf .elementor-widget-container {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* ── Section wrapper: relative anchor for absolute bottle, overflow clips slide-in ── */
.rb-sf-section {
    position: relative;
    width: 100%;
    overflow: hidden;   /* clips the half-off-screen bottle on the right */
}

/* ============================================================
   PANEL 1 — Left content | Right bottle landing zone
   ============================================================ */
.rb-sf-panel-1 {
    position: relative;
    z-index: 1;
    width: 100%;
}

.rb-sf-p1-inner {
    display: flex;
    align-items: center;
    gap: 60px;
    width: 100%;
    box-sizing: border-box;
    padding: 80px 40px;
    margin: 0 auto;
}

.rb-sf-p1-left {
    /* width controlled by Elementor 'p1_left_width' slider — default 38% */
    flex: 0 0 38%;
    width: 38%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Right column: empty bottle landing zone — JS centers bottle here */
.rb-sf-p1-right {
    flex: 1;
    align-self: stretch;
    min-height: 520px;   /* enough room for tall bottle images */
    pointer-events: none;
}

/* 2×2 services grid inside left column */
.rb-sf-services-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    margin-top: 8px;
}

.rb-sf-svc-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rb-sf-svc-icon {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
}
.rb-sf-svc-icon i,
.rb-sf-svc-icon svg { display: block; }

.rb-sf-svc-title {
    margin: 0;
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 700;
    font-size: 17px;
    line-height: 1.3;
}

.rb-sf-svc-desc {
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
    font-size: 13px;
    line-height: 1.7;
}

.rb-sf-svc-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-decoration: none;
    align-self: flex-start;
    transition: gap 0.25s ease, color 0.25s ease;
}
.rb-sf-svc-link:hover { gap: 10px; }

/* ── Shared text elements ── */
.rb-sf-label {
    display: inline-block;
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic;
    font-size: 16px;
}

.rb-sf-p1-heading,
.rb-sf-p2-heading {
    margin: 0;
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 700;
    line-height: 1.2;
}

.rb-sf-p1-text,
.rb-sf-p2-text {
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
    line-height: 1.75;
}

.rb-sf-btn {
    display: inline-block;
    text-decoration: none;
    cursor: pointer;
    align-self: flex-start;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    transition: background-color 0.25s ease, color 0.25s ease,
                border-color 0.25s ease, transform 0.25s ease;
}

/* ============================================================
   BUTTON HOVER ANIMATIONS  (Elementor prefix_class: rb-btn-anim-)
   ============================================================ */
.rb-btn-anim-grow   .rb-sf-btn:hover { transform: scale(1.06); }
.rb-btn-anim-shrink .rb-sf-btn:hover { transform: scale(0.94); }
.rb-btn-anim-float  .rb-sf-btn:hover { transform: translateY(-5px); }
.rb-btn-anim-pulse  .rb-sf-btn:hover { animation: rb-btn-pulse 0.4s ease; }
.rb-btn-anim-bounce .rb-sf-btn:hover { animation: rb-btn-bounce 0.5s ease; }

@keyframes rb-btn-pulse {
    0%, 100% { transform: scale(1); }
    50%       { transform: scale(1.07); }
}
@keyframes rb-btn-bounce {
    0%, 100% { transform: translateY(0); }
    40%      { transform: translateY(-8px); }
    70%      { transform: translateY(-4px); }
}

/* ============================================================
   PANEL 2 — Features: [left col] [bottle center] [right col]
   ============================================================ */
.rb-sf-panel-2 {
    position: relative;
    z-index: 1;
    width: 100%;
}

.rb-sf-p2-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 48px;
    width: 100%;
    box-sizing: border-box;
    padding: 80px 40px;
    margin: 0 auto;
}

.rb-sf-p2-top {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    max-width: 640px;
}

.rb-sf-features-row {
    display: flex;
    align-items: flex-start;
    gap: 40px;
    width: 100%;
}

.rb-sf-feat-left,
.rb-sf-feat-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 36px;
}

/* Center slot: bottle floats to here during Stage 2 */
.rb-sf-feat-center {
    flex: 0 0 260px;
    min-height: 440px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.rb-sf-feat-icon {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
}
.rb-sf-feat-right .rb-sf-feat-icon { align-self: flex-end; }
.rb-sf-feat-icon i,
.rb-sf-feat-icon svg { display: block; }

.rb-sf-feat-title {
    margin: 0;
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.3;
}

.rb-sf-feat-desc {
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
    font-size: 13px;
    line-height: 1.7;
}

.rb-sf-feat-right .rb-sf-feat-item {
    align-items: flex-end;
    text-align: right;
}

/* ============================================================
   ENTRANCE ANIMATIONS — IntersectionObserver adds --visible
   ============================================================ */
.rb-sf-anim {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}

.rb-sf-anim.rb-sf-anim--visible {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================================
   FEATURE ITEMS — revealed when bottle reaches Panel 2 center
   JS adds .rb-sf-feats--visible to .rb-sf-panel-2
   ============================================================ */
.rb-sf-feat-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s ease, transform 0.7s ease;
    will-change: opacity, transform;
}

/* Left column stagger */
.rb-sf-feat-left .rb-sf-feat-item:nth-child(1) { transition-delay: 0.05s; }
.rb-sf-feat-left .rb-sf-feat-item:nth-child(2) { transition-delay: 0.18s; }
.rb-sf-feat-left .rb-sf-feat-item:nth-child(3) { transition-delay: 0.31s; }
.rb-sf-feat-left .rb-sf-feat-item:nth-child(4) { transition-delay: 0.44s; }

/* Right column stagger (interleaved) */
.rb-sf-feat-right .rb-sf-feat-item:nth-child(1) { transition-delay: 0.11s; }
.rb-sf-feat-right .rb-sf-feat-item:nth-child(2) { transition-delay: 0.24s; }
.rb-sf-feat-right .rb-sf-feat-item:nth-child(3) { transition-delay: 0.37s; }
.rb-sf-feat-right .rb-sf-feat-item:nth-child(4) { transition-delay: 0.50s; }

.rb-sf-panel-2.rb-sf-feats--visible .rb-sf-feat-item {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================================
   FLOATING BOTTLE — position:absolute, driven by JS scroll math
   ============================================================ */
.rb-sf-bottle {
    position: absolute;
    z-index: 20;
    pointer-events: none;
    width: 200px;       /* Elementor 'bottle_width' overrides this */
    min-height: 320px;  /* prevents 0-height when image hasn't loaded yet */

    /*
     * STAGE 0 — invisible + shifted down 50 px.
     * JS positions the bottle at the Panel 1 right-column slot immediately,
     * but it stays hidden here until IntersectionObserver fires (~8 % visible).
     *
     * Because the section is tall, only the heading/button + TOP HALF of the
     * bottle are in the viewport when the section first enters from below.
     * The services grid and bottle bottom scroll into view naturally.
     */
    opacity: 0;
    transform: translateY( 50px );
    /*
     * Only opacity + transform are CSS-transitioned.
     * left / top smoothing is handled entirely by the JS lerp loop —
     * the --rb-sf-scroll-smooth custom property is read by JS
     * (not used in CSS transition) to derive the lerpFactor.
     */
    transition: opacity   0.9s cubic-bezier( 0.22, 1, 0.36, 1 ),
                transform  0.9s cubic-bezier( 0.22, 1, 0.36, 1 );
}

/* STAGE 1 — section entered viewport → CSS fade-in-up fires */
.rb-sf-bottle.rb-sf-bottle--ready {
    opacity: 1;
    transform: translateY( 0 );
}

/* Inner wrapper carries the float keyframe animation */
.rb-sf-bottle-inner {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: rb-sf-float 3.5s ease-in-out infinite;
}

/* Soft radial glow circle behind bottle */
.rb-sf-bottle-circle {
    position: absolute;
    border-radius: 50%;
    width: 80%;
    padding-bottom: 80%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 0;
    opacity: 0.22;
    filter: blur(20px);
}

.rb-sf-bottle-img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* Float keyframe — amplitude from CSS custom property */
@keyframes rb-sf-float {
    0%,  100% { transform: translateY(0); }
    50%        { transform: translateY( calc( -1 * var(--rb-sf-float-dist, 14px) ) ); }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* ── 1280px: slightly tighter layout ── */
@media (max-width: 1280px) {
    .rb-sf-p1-inner     { gap: 40px; }
    .rb-sf-feat-center  { flex: 0 0 220px; }
}

/* ── 1024px tablet landscape ── */
@media (max-width: 1024px) {
    .rb-sf-p1-inner {
        gap: 24px;
        padding: 60px 28px;
    }
    .rb-sf-p1-left      { flex: 0 0 46%; width: 46%; }
    .rb-sf-p1-right     { min-height: 420px; }
    .rb-sf-services-grid { gap: 20px; }
    .rb-sf-p2-inner     { padding: 60px 28px; gap: 32px; }
    .rb-sf-features-row { gap: 24px; }
    .rb-sf-feat-center  { flex: 0 0 180px; min-height: 380px; }
    .rb-sf-feat-items-gap { gap: 24px; }
}

/* ── 900px: tablet portrait ── */
@media (max-width: 900px) {
    .rb-sf-p1-left { flex: 0 0 52%; width: 52%; }
    .rb-sf-p1-inner { gap: 16px; }
    .rb-sf-p1-right { min-height: 380px; }
    .rb-sf-feat-center { flex: 0 0 160px; }
}

/* ── 767px: mobile ── */
@media (max-width: 767px) {
    /* Panel 1: stack vertically */
    .rb-sf-p1-inner {
        flex-direction: column;
        padding: 48px 20px;
        gap: 24px;
    }

    /*
     * CRITICAL: !important overrides Elementor-generated inline styles from
     * the responsive 'p1_left_width' slider (e.g. flex:0 0 38%; width:38%).
     * Without !important the left column stays 38% wide on mobile, making all
     * text break word-by-word on narrow screens.
     */
    .rb-sf-p1-left  { flex: none !important; width: 100% !important; gap: 16px; }
    .rb-sf-p1-right { display: none; }   /* not used on mobile */

    /* Services: single column */
    .rb-sf-services-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    /* Panel 2 */
    .rb-sf-p2-inner {
        padding: 48px 20px;
        gap: 28px;
    }
    .rb-sf-features-row {
        flex-direction: column;
        align-items: stretch;   /* stretch so columns fill full width */
        gap: 32px;
    }

    /* Bottle slot in Panel 2 hidden on mobile — JS handles placement via FLIP */
    .rb-sf-feat-center {
        display: none !important;
    }

    /* Feature columns: override any Elementor responsive flex values */
    .rb-sf-feat-left,
    .rb-sf-feat-right { flex: none !important; width: 100% !important; }

    .rb-sf-feat-right .rb-sf-feat-item { align-items: flex-start; text-align: left; }
    .rb-sf-feat-right .rb-sf-feat-icon { align-self: flex-start; }

    /*
     * Bottle on mobile — static in-flow block (no scroll animation).
     * JS (initMobileFeatures) moves the bottle into Panel 1 before the
     * services grid and sets inline styles with !important to show it.
     * Hidden by default here; JS reveals it after repositioning.
     */
    .rb-sf-bottle {
        position: static !important;
        opacity: 0;               /* hidden until JS moves it into Panel 1 */
        width: 180px !important;
        min-height: 260px;
        margin: 32px auto 36px;
        display: block !important;
        align-self: center;
        transform: none !important;
        left: auto;
        top:  auto;
    }
    .rb-sf-bottle-inner {
        min-height: 260px;
        animation: rb-sf-float 3.5s ease-in-out infinite;
        --rb-sf-float-dist: 8px;
    }

    /* Feature items: always visible on mobile (no bottle-trigger needed) */
    .rb-sf-feat-item {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    /* Entrance anims: show immediately on mobile (no scroll IO needed) */
    .rb-sf-anim {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}