/* Scroll Video — Front-end Styles */
.sv-wrapper {
    position: relative;
    width: 100%;
}

.sv-wrapper video {
    position: sticky;
    top: 0;
    width: 100%;
    height: 100vh;
    object-fit: cover;
    display: block;
}

/* ── Hero section: video behind, overlay scrolls away ── */

/*
 * CSS Grid trick: both children (sv-wrapper and sv-hero-overlay) are placed
 * in the exact same grid cell (1/1). The grid height = sv-wrapper height
 * (e.g. 300vh). The overlay is 100vh and anchored to the top of that cell.
 * Since the overlay is NOT sticky, it scrolls away normally while the sticky
 * video remains. No position:absolute, no containing-block dependency.
 */
.sv-hero-section {
    display: grid;
}

.sv-hero-section > .sv-wrapper,
.sv-hero-section > .sv-hero-overlay {
    grid-area: 1 / 1;  /* same cell — stacked on top of each other */
}

.sv-hero-section > .sv-hero-overlay {
    height: 100vh;
    align-self: start; /* anchor to top of the (300vh) grid cell */
    z-index: 10;
    display: flex;
    flex-direction: column;
    pointer-events: none; /* transparent areas don't block video */
}

/* Re-enable pointer events on interactive children */
.sv-hero-overlay header,
.sv-hero-overlay .disputo-page-title,
.sv-hero-overlay #disputo-header-search,
.sv-hero-overlay a,
.sv-hero-overlay input,
.sv-hero-overlay button,
.sv-hero-overlay form {
    pointer-events: auto;
}

/* ── Info Boxes ──────────────────────────────────────────────── */

/*
 * Each .sv-info-box is a full-viewport fixed layer that acts as a
 * flex container for alignment. The visible content lives inside
 * .sv-info-box-inner so that animation transforms don't conflict
 * with centering transforms.
 */
.sv-info-box {
    position: fixed;
    inset: 0;
    display: flex;
    z-index: 200;
    pointer-events: none;
}

/* Alignment variants */
.sv-info-box[data-position="top-left"]      { align-items: flex-start; justify-content: flex-start; }
.sv-info-box[data-position="top-center"]    { align-items: flex-start; justify-content: center;     }
.sv-info-box[data-position="top-right"]     { align-items: flex-start; justify-content: flex-end;   }
.sv-info-box[data-position="middle-left"]   { align-items: center;     justify-content: flex-start; }
.sv-info-box[data-position="middle-center"] { align-items: center;     justify-content: center;     }
.sv-info-box[data-position="middle-right"]  { align-items: center;     justify-content: flex-end;   }
.sv-info-box[data-position="bottom-left"]   { align-items: flex-end;   justify-content: flex-start; }
.sv-info-box[data-position="bottom-center"] { align-items: flex-end;   justify-content: center;     }
.sv-info-box[data-position="bottom-right"]  { align-items: flex-end;   justify-content: flex-end;   }

/* Content wrapper — handles animation */
.sv-info-box-inner {
    pointer-events: auto;
    margin: 24px;
    max-width: 420px;
    opacity: 0;
    transition: opacity 0.45s ease, transform 0.45s ease;
}

/* Animation initial states */
.sv-info-box[data-animation="slide-up"]    .sv-info-box-inner { transform: translateY(32px);  }
.sv-info-box[data-animation="slide-down"]  .sv-info-box-inner { transform: translateY(-32px); }
.sv-info-box[data-animation="slide-left"]  .sv-info-box-inner { transform: translateX(32px);  }
.sv-info-box[data-animation="slide-right"] .sv-info-box-inner { transform: translateX(-32px); }
.sv-info-box[data-animation="zoom"]        .sv-info-box-inner { transform: scale(0.82);       }

/* Visible state — JS adds .sv-box-visible */
.sv-info-box.sv-box-visible .sv-info-box-inner {
    opacity: 1;
    transform: none;
}

/* Hide info boxes on mobile */
@media (max-width: 768px) {
    .sv-info-box { display: none; }
}