/**
 * Hijack Scroll Styles
 * Handles animation for both "reveal" and "replace" modes
 */

/* ========================================
   REVEAL MODE - Items appear progressively
   ======================================== */

/* Base styles for hijackable items */
.hijack-item,
[data-hijack-item] {
    transition: opacity 0.6s ease, transform 0.6s ease;
}

/* Reality columns - WITH animation for fade-up and fade-down */
.r-col,
.r-col-1,
.r-col-2,
.r-col-3,
.reality-col-1,
.reality-col-2,
.reality-col-3,
[data-col] {
    transition: opacity 0.6s ease, transform 0.6s ease;
}

/* Hidden state (default for items without .active) */

.hijack-reveal .hijack-item:not(.active),
.hijack-reveal [data-hijack-item]:not(.active) {
    opacity: 0;
    transform: translateY(30px);
    pointer-events: none;
}

/* Hidden state for Reality columns - fade-down effect (slide DOWN when hiding) */
.hijack-reveal .r-col:not(.active),
.r-col-2:not(.active),
.r-col-3:not(.active),
.reality-col-2:not(.active),
.reality-col-3:not(.active),
[data-col="2"]:not(.active),
[data-col="3"]:not(.active) {
    opacity: 0;
    transform: translateY(30px);
    /* Positive = fade-down (slides DOWN when hiding) */
    pointer-events: none;
}

/* Visible state for general hijack items */
.hijack-item.active,
[data-hijack-item].active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* Visible state for Reality columns */
.r-col.active,
.r-col-1.active,
.r-col-2.active,
.r-col-3.active,
.reality-col-1.active,
.reality-col-2.active,
.reality-col-3.active,
[data-col].active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* Ensure first item is visible by default only in reveal/reality modes */
.hijack-reveal .hijack-item:first-child,
.reality-section-wrapper .hijack-item:first-child,
.r-col-1,
.reality-col-1,
[data-col="1"] {
    opacity: 1;
}

/* In replace mode, first item should obey .active class or be visible only if none are active */
.hijack-replace .hijack-item:first-child:not(.active) {
    opacity: 0;
}

.hijack-replace .hijack-item.active {
    opacity: 1;
    z-index: 2;
}

/* ========================================
   REPLACE MODE - Items swap/replace each other
   ======================================== */

/* Section wrapper for replace mode */
.hijack-replace {
    position: relative;
    min-height: 100vh;
}

/* All items in replace mode are positioned absolutely */
.hijack-replace .hijack-item,
.hijack-replace [data-hijack-item] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.8s ease, transform 0.8s ease;
    pointer-events: none;
}

/* Current/active item in replace mode */
.hijack-replace .hijack-item.active,
.hijack-replace .hijack-item.current,
.hijack-replace [data-hijack-item].active,
.hijack-replace [data-hijack-item].current {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
    position: relative;
    /* First item should be relative to establish height */
}

/* Alternative replace animation - slide */
.hijack-replace.slide-mode .hijack-item,
.hijack-replace.slide-mode [data-hijack-item] {
    transform: translateX(100%);
}

.hijack-replace.slide-mode .hijack-item.active,
.hijack-replace.slide-mode .hijack-item.current,
.hijack-replace.slide-mode [data-hijack-item].active,
.hijack-replace.slide-mode [data-hijack-item].current {
    transform: translateX(0);
}

/* Alternative replace animation - fade only */
.hijack-replace.fade-mode .hijack-item,
.hijack-replace.fade-mode [data-hijack-item] {
    transform: none;
}

.hijack-replace.fade-mode .hijack-item.active,
.hijack-replace.fade-mode .hijack-item.current,
.hijack-replace.fade-mode [data-hijack-item].active,
.hijack-replace.fade-mode [data-hijack-item].current {
    transform: none;
}

/* ========================================
   SECTION WRAPPERS
   ======================================== */

.reality-section-wrapper,
#reality,
[data-section-type="reality"],
[data-hijack-mode] {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
}

/* ========================================
   DEBUG MODE
   ======================================== */

/* Debug mode - add class "debug-hijack" to body to see outlines */
body.debug-hijack .hijack-item,
body.debug-hijack .r-col,
body.debug-hijack .r-col-1,
body.debug-hijack .r-col-2,
body.debug-hijack .r-col-3,
body.debug-hijack .reality-col-1,
body.debug-hijack .reality-col-2,
body.debug-hijack .reality-col-3,
body.debug-hijack [data-col],
body.debug-hijack [data-hijack-item] {
    outline: 2px solid red !important;
}

body.debug-hijack .hijack-item.active,
body.debug-hijack .r-col.active,
body.debug-hijack .r-col-1.active,
body.debug-hijack .r-col-2.active,
body.debug-hijack .r-col-3.active,
body.debug-hijack .reality-col-1.active,
body.debug-hijack .reality-col-2.active,
body.debug-hijack .reality-col-3.active,
body.debug-hijack [data-col].active,
body.debug-hijack [data-hijack-item].active {
    outline: 2px solid green !important;
}

body.debug-hijack .hijack-item.current,
body.debug-hijack [data-hijack-item].current {
    outline: 3px solid blue !important;
}

/* Debug info overlay */
body.debug-hijack::before {
    content: "DEBUG MODE ACTIVE";
    position: fixed;
    top: 10px;
    left: 10px;
    background: rgba(255, 0, 0, 0.8);
    color: white;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: bold;
    z-index: 99999;
    border-radius: 3px;
}