/**
 * Page Transition Overlay Styles
 * Based on demo-2 from https://github.com/ykob/shape-overlays
 */

/* Hide content initially when transitioning in */
body.transition-entering {
    visibility: hidden;
}

body.transition-entering .shape-overlays {
    visibility: visible;
}

body.transition-ready {
    visibility: visible;
}

.shape-overlays {
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
}

.shape-overlays.is-opened {
    pointer-events: auto;
}

/* Blue to white color scheme */
.shape-overlays__path:nth-of-type(1) {
    fill: #4682F9;
}

.shape-overlays__path:nth-of-type(2) {
    fill: #7aa4fb;
}

.shape-overlays__path:nth-of-type(3) {
    fill: #b3cbfd;
}

.shape-overlays__path:nth-of-type(4) {
    fill: #ffffff;
}

/* Transition Title Container - clipped by overlay shape */
.transition-title-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 10000;
    clip-path: url(#transition-clip);
    -webkit-clip-path: url(#transition-clip);
}

/* Transition Title */
.transition-title {
    font-family: 'Product Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: clamp(2.5rem, 8vh, 6rem);
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #1e293b;
    pointer-events: none;
    white-space: nowrap;
    transform: translateY(30px);
    opacity: 0;
}

/* Entering animation (on source page) - starts hidden, below */
.transition-title.is-entering {
    opacity: 0;
    transform: translateY(30px);
    transition: none;
}

/* Visible/stable state - fades in and moves up */
.transition-title.is-visible {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.5s ease-out, transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

/* Static state - no transition, used when new page loads */
.transition-title.is-static {
    opacity: 1;
    transform: translateY(0);
    transition: none !important;
}

/* Exiting animation (on destination page) - fades out and moves up */
.transition-title.is-exiting {
    opacity: 0;
    transform: translateY(-30px);
    transition: opacity 0.5s ease-in, transform 0.6s cubic-bezier(0.55, 0, 1, 0.45);
}