/* =========================================================
   VELVET CIRCUIT PRESS
   BASIC SINGLE-BACKGROUND LANDING PAGE
   ========================================================= */


/* ---------- RESET ---------- */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    min-height: 100%;
}

body {
    min-height: 100vh;
    margin: 0;

    overflow-x: hidden;

    background-color: #111111;
    color: #f2eee7;

    font-family: Georgia, "Times New Roman", serif;
}


/* ---------- BACKGROUND STAGE ---------- */

/*
    The background is sized according to its HEIGHT.

    It keeps its natural aspect ratio and remains centered.

    On narrow screens, the extra width is cropped from the
    left and right instead of squeezing the image.
*/

.page-background {
    position: fixed;
    inset: 0;

    z-index: 0;

    background-image: url("../images/UC_Vis_Logo_02.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: auto 100%;

    pointer-events: none;
}


/*
    Dark overlay that keeps text readable without permanently
    darkening the original background image.
*/

.page-background::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.42),
            rgba(0, 0, 0, 0.18) 35%,
            rgba(0, 0, 0, 0.35)
        );
}

/* =========================================================
   SVG WING SHINE
   ========================================================= */

.wing-shine-svg {
    position: fixed;

    top: 0;
    left: 50%;

    z-index: 1;

    height: 100vh;
    width: auto;

    transform: translateX(-50%);

    overflow: visible;
    pointer-events: none;
}

.wing-shine-ring {
    fill: none;

    stroke: rgba(255, 248, 225, 0.72);
    stroke-width: 52;

    opacity: 0;

    filter:
        blur(10px)
        drop-shadow(0 0 12px rgba(255, 190, 75, 0.55));

    animation:
        wing-ring-test
        6s
        ease-out
        infinite;
}

@keyframes wing-ring-test {
    0% {
        r: 15px;
        opacity: 0;
    }

    8% {
        opacity: 0.25;
    }

    18% {
        opacity: 0.45;
    }

    58% {
        r: 700px;
        opacity: 0.65;
    }

    82% {
        r: 950px;
        opacity: 0.25;
    }

    100% {
        r: 1150px;
        opacity: 0;
    }
}
/* ---------- PAGE STRUCTURE ---------- */


.page-shell {
    position: relative;
    z-index: 2;

    min-height: 100vh;

    display: grid;
    grid-template-rows: 1fr auto;

    width: 100%;
}



/* ---------- HEADER ---------- */

.site-header {
    position: fixed;
    top: 0;
    left: 0;

    z-index: 10;

    display: flex;
    justify-content: space-between;
    align-items: center;

    width: 100%;

    padding:
        clamp(0.75rem, 2vh, 1.25rem)
        clamp(1rem, 3vw, 2rem);

    /*pointer-events: none;*/
}
.header-logo {
    display: block;

    width: clamp(90px, 12vw, 90px);

    filter:
        sepia(1)
        saturate(2)
        hue-rotate(-10deg)
        brightness(1.1);
        
    opacity: 0.9;

    transition:
        opacity 180ms ease,
        transform 180ms ease;
}

.header-logo img {
    display: block;

    width: 100%;
    height: auto;
}

.header-logo:hover,
.header-logo:focus-visible {
    opacity: 1;
    transform: scale(1.03);
}
.header-email {
    display: grid;
    place-items: center;

    width: 2.6rem;
    height: 2.6rem;

    color: #d4b06a;

    background: rgba(12, 10, 10, 0.58);

    border: 1px solid rgba(218, 184, 118, 0.38);
    border-radius: 50%;

    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);

    transition:
        color 180ms ease,
        background 180ms ease,
        transform 180ms ease;
}

.header-email svg {
    width: 1.3rem;
    height: 1.3rem;

    fill: currentColor;
}

.header-email:hover,
.header-email:focus-visible {
    color: #fff4d5;
    background: rgba(55, 40, 20, 0.78);
    transform: scale(1.07);
}

.site-logo {
    /*display: block;

    width: min(72vw, 420px);
    height: auto;

    width: 100%;
    height: 100%;
    margin-top: 295px;

    object-fit: contain;*/

    /*position: fixed;
    inset: 0;

    z-index: -1;

    width: 100%;
    height: 100%;

    background-image: url("../images/VCP_Logo_Magic_Sorta.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: auto 100%;

    pointer-events: none;
    filter:
        drop-shadow(0 4px 12px rgba(0, 0, 0, 0.65));*/
        /*position: absolute;
        inset: 0;

        width: 100%;
        height: 100%;

        object-fit: contain;

        pointer-events: none;

        filter:
            drop-shadow(0 0 8px rgba(255, 190, 70, 0.55))
            drop-shadow(0 0 20px rgba(255, 145, 25, 0.28));*/
    }



/* ---------- MAIN CONTENT ---------- */

.site-main {
    display: flex;
    justify-content: center;
    align-items: flex-end;

    width: 100%;

    padding:
        clamp(2rem, 6vh, 5rem)
        clamp(1.25rem, 5vw, 4rem);

    padding-bottom: 2vh;
}

.intro-panel {
    width: min(100%, 900px);
    
    padding:
        clamp(1rem, 4vw, 1rem);

    text-align: center;

    background: rgba(12, 10, 10, 0.66);

    border: 1px solid rgba(218, 184, 118, 0.38);
    border-radius: 0.4rem;

    box-shadow:
        0 1rem 3rem rgba(0, 0, 0, 0.55);

    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}


/* ---------- TYPOGRAPHY ---------- */

.eyebrow {
    margin:
        0
        0
        0.8rem;

    color: #d4b06a;

    font-size: clamp(0.8rem, 1.5vw, 1rem);
    letter-spacing: 0.18em;
    line-height: 1.4;

    text-transform: uppercase;
}

h1 {
    margin:
        0
        0
        1.25rem;

    color: #f2e4c6;

    font-size: clamp(2.2rem, 7vw, 5rem);
    font-weight: normal;
    line-height: 0.98;

    text-shadow:
        0 4px 16px rgba(0, 0, 0, 0.8);
}

.intro-copy,
.status-copy {
    max-width: 42rem;

    margin-left: auto;
    margin-right: auto;

    font-size: clamp(1rem, 2vw, 1.25rem);
    line-height: 1.65;

    text-wrap: pretty;
}

.intro-copy {
    margin-top: 0;
    margin-bottom: 1.25rem;
}

.status-copy {
    margin-top: 0;
    margin-bottom: 0;

    color: #d6c9b3;

    font-style: italic;
}


/* ---------- FOOTER ---------- */

.site-footer {
    display: flex;
    justify-content: center;
    align-items: center;

    padding:
        1rem
        1.25rem
        1.4rem;

    text-align: center;
    flex-direction: column;
    gap: 0.01rem;
}

.contact-line a {
    color: #d4b06a;
    text-decoration: none;
}

.contact-line a:hover,
.contact-line a:focus-visible {
    text-decoration: underline;
}
.site-footer p {
    margin: 0;

    color: rgba(242, 238, 231, 0.72);

    font-size: clamp(0.75rem, 1.5vw, 0.9rem);
    line-height: 1.4;

    text-shadow:
        0 2px 8px rgba(0, 0, 0, 0.9);
}


/* ---------- SMALL SCREENS ---------- */

@media (max-width: 900px) {

    /*
        The artwork remains centered and height-scaled.
        Only the horizontal crop changes naturally with
        the narrower viewport.
    */

    .page-background {
        background-position: center center;
        background-size: auto 100%;
    }

    .site-header {
        padding-top: 1.5rem;
    }

    .site-logo {
        background-position: center center;
        background-size: auto 100%;
    }

     .site-main {
        align-items: flex-end;

        padding:
            1.75rem
            1rem
            4vh;
    }

    .intro-panel {
        padding:
            1.5rem
            1.2rem;

        background: rgba(12, 10, 10, 0.72);
    }

    h1 {
        line-height: 1.04;
    }

}


/* ---------- VERY SHORT SCREENS ---------- */

@media (max-height: 650px) {

    .site-header {
        padding-top: 1rem;
    }

    .site-main {
        align-items: flex-end;
        padding-top: 1rem;
        padding-bottom: 2vh;
    }

    .intro-panel {
        padding-top: 1.2rem;
        padding-bottom: 1.2rem;
    }

    .intro-copy,
    .status-copy {
        line-height: 1.45;
    }

}