/**
 * TenderPipe Page Loader & Transitions
 * Plumbing-themed pipe network animation with smooth page transitions
 */

/* ============================================
   GLOBAL SCROLLBAR FIX
   ============================================ */

/**
 * Reserve space for scrollbar to prevent layout shift when toggling overflow.
 * This prevents content from shifting when modals open or page transitions occur.
 * Applied globally since modals can appear on any page.
 */
html {
    scrollbar-gutter: stable;
}

/**
 * Prevent scrolling during page load
 */
body.tp-page-loading {
    overflow: hidden;
}

/* ============================================
   PAGE LOADER OVERLAY
   ============================================ */

.tp-page-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    visibility: visible;
    transition: opacity 200ms ease-in-out, visibility 200ms ease-in-out;
    overflow: hidden;
}

.tp-page-loader.loaded {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* ============================================
   PIPE NETWORK ANIMATION
   ============================================ */

.tp-pipe-network {
    width: 200px;
    height: 200px;
    position: relative;
}

/* Center Hub (Orange Junction) */
.tp-pipe-hub {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    background: linear-gradient(135deg, #FF6B35 0%, #FF8555 100%);
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    box-shadow:
        0 0 0 3px rgba(255, 107, 53, 0.2),
        inset 0 2px 4px rgba(0, 0, 0, 0.1);
    z-index: 10;
    animation: tp-hub-pop 0.3s ease-out 0s forwards;
}

/* Blue Pipe Base Styling */
.tp-pipe-h,
.tp-pipe-v,
.tp-pipe-d {
    background: linear-gradient(180deg, #0066CC 0%, #004C99 50%, #0066CC 100%);
    box-shadow:
        inset 0 1px 2px rgba(255, 255, 255, 0.2),
        inset 0 -1px 2px rgba(0, 0, 0, 0.2),
        0 2px 4px rgba(0, 102, 204, 0.1);
    position: absolute;
}

/* Horizontal Pipes */
.tp-pipe-h {
    height: 10px;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 5px;
    width: 0;
}

.tp-pipe-h.left {
    right: 50%;
    margin-right: 10px;
    animation: tp-pipe-grow-h 0.5s ease-out 0.8s forwards;
}

.tp-pipe-h.right {
    left: 50%;
    margin-left: 10px;
    animation: tp-pipe-grow-h 0.5s ease-out 0.3s forwards;
}

/* Vertical Pipes */
.tp-pipe-v {
    width: 10px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 5px;
    height: 0;
}

.tp-pipe-v.top {
    bottom: 50%;
    margin-bottom: 10px;
    animation: tp-pipe-grow-v 0.5s ease-out 1.3s forwards;
}

.tp-pipe-v.bottom {
    top: 50%;
    margin-top: 10px;
    animation: tp-pipe-grow-v 0.5s ease-out 1.8s forwards;
}

/* Diagonal Pipes */
.tp-pipe-d {
    width: 10px;
    height: 0;
    border-radius: 5px;
}

.tp-pipe-d.tl {
    bottom: 50%;
    right: 50%;
    margin-right: 10px;
    margin-bottom: 10px;
    transform: rotate(-45deg);
    transform-origin: bottom right;
    animation: tp-pipe-grow-d 0.5s ease-out 2.8s forwards;
}

.tp-pipe-d.tr {
    bottom: 50%;
    left: 50%;
    margin-left: 10px;
    margin-bottom: 10px;
    transform: rotate(45deg);
    transform-origin: bottom left;
    animation: tp-pipe-grow-d 0.5s ease-out 2.3s forwards;
}

.tp-pipe-d.bl {
    top: 50%;
    right: 50%;
    margin-right: 10px;
    margin-top: 10px;
    transform: rotate(45deg);
    transform-origin: top right;
    animation: tp-pipe-grow-d 0.5s ease-out 3.8s forwards;
}

.tp-pipe-d.br {
    top: 50%;
    left: 50%;
    margin-left: 10px;
    margin-top: 10px;
    transform: rotate(-45deg);
    transform-origin: top left;
    animation: tp-pipe-grow-d 0.5s ease-out 3.3s forwards;
}

/* Orange Pipe Connectors (Junction Points) */
.tp-pipe-connector {
    position: absolute;
    width: 14px;
    height: 14px;
    background: linear-gradient(135deg, #FF6B35 0%, #FF8555 100%);
    border-radius: 50%;
    box-shadow:
        0 0 0 2px rgba(255, 107, 53, 0.2),
        inset 0 1px 2px rgba(255, 255, 255, 0.3),
        0 2px 4px rgba(255, 107, 53, 0.2);
    z-index: 5;
    transform: scale(0);
}

/* Cardinal Direction Connectors */
.tp-pipe-connector.c-left {
    top: 50%;
    left: 5%;
    transform: translateY(-50%) scale(0);
    animation: tp-connector-pop-y 0.15s ease-out 1.15s forwards;
}

.tp-pipe-connector.c-right {
    top: 50%;
    right: 5%;
    transform: translateY(-50%) scale(0);
    animation: tp-connector-pop-y 0.15s ease-out 0.65s forwards;
}

.tp-pipe-connector.c-top {
    top: 5%;
    left: 50%;
    transform: translateX(-50%) scale(0);
    animation: tp-connector-pop-x 0.15s ease-out 1.65s forwards;
}

.tp-pipe-connector.c-bottom {
    bottom: 5%;
    left: 50%;
    transform: translateX(-50%) scale(0);
    animation: tp-connector-pop-x 0.15s ease-out 2.15s forwards;
}

/* Diagonal Connectors */
/* Positioned to align with diagonal pipe ends: center (50%) - margin (5%) - diagonal travel (35.35%) ≈ 9.65% */
.tp-pipe-connector.c-tl {
    top: 9.65%;
    left: 9.65%;
    animation: tp-connector-pop 0.15s ease-out 3.15s forwards;
}

.tp-pipe-connector.c-tr {
    top: 9.65%;
    right: 9.65%;
    animation: tp-connector-pop 0.15s ease-out 2.65s forwards;
}

.tp-pipe-connector.c-bl {
    bottom: 9.65%;
    left: 9.65%;
    animation: tp-connector-pop 0.15s ease-out 4.15s forwards;
}

.tp-pipe-connector.c-br {
    bottom: 9.65%;
    right: 9.65%;
    animation: tp-connector-pop 0.15s ease-out 3.65s forwards;
}

/* ============================================
   ANIMATIONS
   ============================================ */

/* Center Hub Pop-in with centering transform */
@keyframes tp-hub-pop {
    0% {
        transform: translate(-50%, -50%) scale(0);
    }
    50% {
        transform: translate(-50%, -50%) scale(1.2);
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
    }
}

/* Horizontal Pipe Growth */
@keyframes tp-pipe-grow-h {
    0% {
        width: 0;
    }
    100% {
        width: 80px;
    }
}

/* Vertical Pipe Growth */
@keyframes tp-pipe-grow-v {
    0% {
        height: 0;
    }
    100% {
        height: 80px;
    }
}

/* Diagonal Pipe Growth */
@keyframes tp-pipe-grow-d {
    0% {
        height: 0;
    }
    100% {
        height: 100px;
    }
}

/* Connector Pop-in (for regular connectors) */
@keyframes tp-connector-pop {
    0% {
        transform: scale(0);
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}

/* Connector Pop-in with Y translation */
@keyframes tp-connector-pop-y {
    0% {
        transform: translateY(-50%) scale(0);
    }
    50% {
        transform: translateY(-50%) scale(1.2);
    }
    100% {
        transform: translateY(-50%) scale(1);
    }
}

/* Connector Pop-in with X translation */
@keyframes tp-connector-pop-x {
    0% {
        transform: translateX(-50%) scale(0);
    }
    50% {
        transform: translateX(-50%) scale(1.2);
    }
    100% {
        transform: translateX(-50%) scale(1);
    }
}

/* ============================================
   PAGE TRANSITION
   ============================================ */

body {
    animation: tp-page-fade-in 200ms ease-in-out;
}

@keyframes tp-page-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

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

@media (max-width: 768px) {
    .tp-pipe-network {
        width: 150px;
        height: 150px;
    }

    .tp-pipe-hub {
        width: 16px;
        height: 16px;
    }

    .tp-pipe-h,
    .tp-pipe-v {
        width: 8px;
        height: 8px;
    }

    @keyframes tp-pipe-grow-h {
        0% {
            width: 0;
        }
        100% {
            width: 60px;
        }
    }

    @keyframes tp-pipe-grow-v {
        0% {
            height: 0;
        }
        100% {
            height: 60px;
        }
    }

    @keyframes tp-pipe-grow-d {
        0% {
            height: 0;
        }
        100% {
            height: 75px;
        }
    }

    .tp-pipe-connector {
        width: 12px;
        height: 12px;
    }

    /* Adjust diagonal connector positions for mobile (75px diagonal / √2 ≈ 53px travel in 150px container) */
    .tp-pipe-connector.c-tl {
        top: 9.33%;
        left: 9.33%;
    }

    .tp-pipe-connector.c-tr {
        top: 9.33%;
        right: 9.33%;
    }

    .tp-pipe-connector.c-bl {
        bottom: 9.33%;
        left: 9.33%;
    }

    .tp-pipe-connector.c-br {
        bottom: 9.33%;
        right: 9.33%;
    }
}

/* ============================================
   ACCESSIBILITY
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    /* Disable all animations */
    .tp-pipe-hub,
    .tp-pipe-h,
    .tp-pipe-v,
    .tp-pipe-d,
    .tp-pipe-connector,
    body {
        animation: none !important;
    }

    .tp-page-loader {
        transition: opacity 100ms linear, visibility 100ms linear;
    }

    /* Show all pipes and connectors at full size immediately */
    .tp-pipe-hub {
        transform: translate(-50%, -50%) scale(1);
    }

    .tp-pipe-h.left,
    .tp-pipe-h.right {
        width: 80px;
    }

    .tp-pipe-v.top,
    .tp-pipe-v.bottom {
        height: 80px;
    }

    .tp-pipe-d {
        height: 100px;
    }

    .tp-pipe-connector.c-left,
    .tp-pipe-connector.c-right {
        transform: translateY(-50%) scale(1);
    }

    .tp-pipe-connector.c-top,
    .tp-pipe-connector.c-bottom {
        transform: translateX(-50%) scale(1);
    }

    .tp-pipe-connector.c-tl,
    .tp-pipe-connector.c-tr,
    .tp-pipe-connector.c-bl,
    .tp-pipe-connector.c-br {
        transform: scale(1);
    }
}

/* Screen reader text */
.tp-loader-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}