@import url('./theme.css');

/* =========================================================
   PAGE BACKGROUND
   Background image, overlay, base typography, and page atmosphere
   ========================================================= */

body {
    margin: 0;
    min-height: 100vh;
    overflow-y: auto;

    background:
        linear-gradient(rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.40)),
        url(../../backgrounds/college_low.webp);

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;

    font-family: 'Bloodborne', serif;
    color: var(--text-primary);

    position: relative;
}

/* =========================================================
   BACKGROUND VIDEOS
   Fog layers and atmospheric motion effects
   ========================================================= */

.video-stack {
    position: fixed;
    inset: 0;

    z-index: 0;

    overflow: hidden;

    pointer-events: none;
}

.bg-video {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    mix-blend-mode: screen;
}

.bg-video-1 {
    opacity: 0.35;

    filter:
        blur(1px);
}

.bg-video-2 {
    opacity: 0.25;

    filter:
        blur(2px);

    transform: scale(1.05);

    animation:
        fogDriftA 28s ease-in-out infinite;
}

.bg-video-3 {
    opacity: 0.35;

    filter:
        blur(3px);

    animation:
        fogDriftB 14s ease-in-out infinite;
}

/* =========================================================
   ATMOSPHERIC ANIMATIONS
   Fog drift and environmental motion behavior
   ========================================================= */

@keyframes fogDriftA {

    0% {
        transform:
            scale(1.05)
            translateX(0);
    }

    50% {
        transform:
            scale(1.08)
            translateX(-2vw);
    }

    100% {
        transform:
            scale(1.05)
            translateX(0);
    }
}

@keyframes fogDriftB {

    0% {
        transform:
            scale(1.18)
            rotate(180deg)
            translateX(-4vw)
            translateY(3vh);

        opacity: 0.048;
    }

    50% {
        transform:
            scale(1.22)
            rotate(180deg)
            translateX(-1vw)
            translateY(1vh);

        opacity: 0.035;
    }

    100% {
        transform:
            scale(1.18)
            rotate(180deg)
            translateX(-4vw)
            translateY(3vh);

        opacity: 0.025;
    }
}

/* =========================================================
   MOONLIGHT
   Moon glow and environmental lighting effects
   ========================================================= */

.moonlight {
    position: fixed;
    inset: 0;

    pointer-events: none;

    z-index: 1;

    filter: blur(8px);

    background:
        radial-gradient(
            circle at 88% 10%,
            rgba(220, 230, 255, 0.24) 0%,
            rgba(150, 170, 210, 0.10) 14%,
            rgba(90, 105, 140, 0.04) 28%,
            rgba(70, 85, 120, 0.03) 42%,
            transparent 72%
        ),

        linear-gradient(
            155deg,
            transparent 0%,
            rgba(200, 215, 255, 0.08) 44%,
            rgba(200, 215, 255, 0.03) 58%,
            transparent 98%
        );

    mix-blend-mode: screen;

    animation:
        moonPulse 38s ease-in-out infinite;
}

/* =========================================================
   BLOODMOON WASH
   Pulsing red atmospheric overlay
   ========================================================= */

.bloodmoon-wash {
    position: fixed;
    inset: 0;

    pointer-events: none;

    z-index: 2;

    background:
        radial-gradient(
            ellipse at 88% 10%,
            rgba(255, 55, 40, 0.34) 0%,
            rgba(190, 20, 25, 0.26) 18%,
            rgba(130, 5, 15, 0.18) 40%,
            rgba(80, 0, 8, 0.10) 68%,
            transparent 100%
        ),

        radial-gradient(
            ellipse at 50% 45%,
            rgba(140, 5, 15, 0.14) 0%,
            rgba(110, 0, 10, 0.10) 45%,
            transparent 90%
        ),

        linear-gradient(
            180deg,
            rgba(90, 0, 8, 0.04),
            rgba(150, 8, 14, 0.18)
        );

    mix-blend-mode: overlay;

    opacity: 0;

    animation:
        bloodMoonCycle var(--bloodmoon-cycle) ease-in-out infinite;
}


/* =========================================================
   BLOODMOON ANIMATION
   Cyclical atmospheric red pulse behavior
   ========================================================= */

@keyframes bloodMoonCycle {

    0% {
        opacity: 0;
    }

    42% {
        opacity: 0;
    }

    60% {
        opacity: 0.30;
    }

    76% {
        opacity: 0.85;
    }

    90% {
        opacity: 0.45;
    }

    100% {
        opacity: 0;
    }
}

/* =========================================================
   MAIN LAYOUT
   Core page positioning and content flow
   ========================================================= */

main {
    position: relative;

    z-index: 10;

    width: min(1000px, 92vw);

    margin: 0 auto;
    padding: 2rem 0 4rem;
}

/* =========================================================
   TITLE IMAGE
   Byrgenwerth logo sizing and placement
   ========================================================= */

.site-title {
    display: block;

    width: min(620px, 78vw);
    height: auto;

    margin: 0 auto;
}

/* =========================================================
   SUBTITLE
   Introductory quote styling and spacing
   ========================================================= */

.subtitle {
    text-align: center;

    margin: 1rem auto 2rem;
}

/* =========================================================
   SERVICES CONTAINER
   Vertical layout for hosted service links
   ========================================================= */

.services {
    width: fit-content;

    margin: 0 auto;
}

/* =========================================================
   SERVICE ROWS
   Individual service row alignment and structure
   ========================================================= */

.services a {
    display: grid;

    grid-template-columns: 40px 260px;
    align-items: center;

    column-gap: 0.5rem;

    padding: 0.5rem 0;

    text-decoration: none;
    color: inherit;

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

/* =========================================================
   RUNE ICONS
   Rune sizing, alignment, and visual treatment
   ========================================================= */

.rune-icon {
    width: 38px;
    height: 38px;

    display: block;

    position: relative;

    /* Aligns rune visually with title baseline */
    top: -2px;

    object-fit: contain;

    opacity: 0.72;

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

/* =========================================================
   SERVICE TEXT
   Service titles and descriptive subtext styling
   ========================================================= */

.service-text {
    text-align: left;
}

.service-title {
    font-family: 'Bloodborne', serif;

    font-size: 1.35rem;
    line-height: 1;

    color: var(--text-secondary);
}

.service-desc {
    font-family:
        'Cormorant Garamond',
        Georgia,
        serif;

    margin-top: 0.25rem;

    color: var(--text-secondary);

    font-size: 0.82rem;

    letter-spacing: 0.08em;

    text-transform: uppercase;

    transform: translateX(-10px);

    filter: blur(5px);

    opacity: 0;

    transition:
        opacity 600ms ease,
        clip-path 900ms ease,
        transform 700ms ease,
        filter 850ms ease;
}

/* =========================================================
   SERVICE HOVER EFFECTS
   Hover animations and interaction feedback
   ========================================================= */

.services a:hover {
    transform: translateX(6px);

    color: #f7f1e4;
}

.services a:hover .service-desc {
    opacity: 1;

    transform: translateX(0);

    filter: blur(0);
}

.services a:hover .rune-icon {
    opacity: 1;

    transform: scale(1.08);

    filter:
        brightness(1.18)
        saturate(1.15)
        drop-shadow(0 0 8px var(--gold-glow));
}

.services a:hover .rune-milkweed {
    filter:
        brightness(1.35)
        saturate(1.4)
        drop-shadow(0 0 4px var(--milkweed-glow-primary))
        drop-shadow(0 0 12px var(--milkweed-glow-secondary));
}

.services a:hover .rune-moon {
    filter:
        brightness(1.45)
        saturate(1.8)
        drop-shadow(0 0 4px var(--moon-glow-primary))
        drop-shadow(0 0 14px var(--moon-glow-secondary));
}

.services a:hover .rune-communion {
    filter:
        brightness(1.45)
        saturate(1.35)
        drop-shadow(0 0 4px var(--communion-glow-primary))
        drop-shadow(0 0 14px var(--communion-glow-secondary));
}

.services a:hover .rune-guidance {
    filter:
        brightness(1.4)
        saturate(1.6)
        drop-shadow(0 0 4px var(--guidance-glow-primary))
        drop-shadow(0 0 14px var(--guidance-glow-secondary));
}

.services a:hover .rune-eye {
    filter:
        brightness(1.45)
        saturate(1.5)
        drop-shadow(0 0 4px var(--eye-glow-primary))
        drop-shadow(0 0 14px var(--eye-glow-secondary));
}

.services a:hover .service-title {
    text-shadow:
        0 0 6px var(--gold-glow);
}

/* =========================================================
   MOONLIGHT ANIMATION
   Subtle pulsing behavior for moonlight overlay
   ========================================================= */

@keyframes moonPulse {

    0% {
        opacity: 0.65;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0.65;
    }
}

/* =========================================================
   RESPONSIVE LAYOUT
   Mobile and narrow-screen adjustments
   ========================================================= */

@media (max-width: 600px) {
    main {
        width: min(100%, 92vw);

        padding: 1.5rem 0 3rem;
    }

    .site-title {
        width: min(520px, 88vw);
    }

    .subtitle {
        margin: 0.75rem auto 1.5rem;

        font-size: 0.95rem;
        line-height: 1.35;
    }

    .services a {
        grid-template-columns: 36px minmax(0, 1fr);

        column-gap: 0.65rem;
    }

    .rune-icon {
        width: 34px;
        height: 34px;
    }

    .service-title {
        font-size: 1.2rem;
    }

    .service-desc {
        font-size: 0.75rem;
    }
}