/* --- Design tokens --- */
:root {
    /* Using vmin makes layout scale with the *ratio* of the screen */
    --u: 1vmin;

    --bg: rgb(36, 31, 57);
    /* fallback if image missing */
    --accent: #2EA24F;
    /* main green */
    --accent-bright: #4ade80;
    /* accent green for highlights */
    --text: 240, 240, 240;
    /* white text as rgb triplet for rgba use */

    /* Positioning roughly like your comp */
    --rail-left: clamp(12rem, 20vw, 48rem);
    --rail-top: clamp(6rem, 14vh, 20rem);

    /* Typography */
    --link-size: clamp(24px, 6.2vmin, 72px);
    --link-weight: 500;
    --row-gap: clamp(1.2rem, 6vmin, 5rem);

    /* Underline look */
    --ul-thickness: 2px;
    --ul-offset: .22em;
    --ul-color: rgba(var(--text), .85);
}

/* --- Page background --- */
html,
body {
    height: 100%;
}

body {
    margin: 0;
    background: var(--bg) center/cover no-repeat fixed;
    color: rgb(var(--text));
    font-family: "Cinzel", serif;

    /* Replace with your real image */
    background-image: url("background.png");
}

/* Black overlay that starts covering everything and fades out */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    background: #000000;
    pointer-events: none;
    opacity: 1;
    z-index: 9999;
    animation: fadeOutOverlay 1s ease-out forwards;
    will-change: opacity;
    transform: translateZ(0);
}

/* Subtle dark veil for readability over busy photos */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .25);
    pointer-events: none;
}

/* --- Left rail --- */
.hero {
    min-height: 100svh;
    /* accounts for mobile safe viewport */
    position: relative;
}

.left-rail {
    position: absolute;
    left: var(--rail-left);
    top: var(--rail-top);
    display: flex;
    flex-direction: column;
    gap: var(--row-gap);

    /* Initial state for text animation - optimized */
    opacity: 0;
    transform: translateY(2rem) translateZ(0);
    animation: fadeInText 0.8s ease-out 0.2s forwards;

    /* Enable hardware acceleration */
    will-change: opacity, transform;
}

/* --- Links (desktop/landscape) --- */
.navlink {
    position: relative;
    /* needed for ::after underline */
    display: inline-block;
    /* makes width = text content */
    color: rgba(var(--text), .92);
    font-weight: var(--link-weight);
    font-size: var(--link-size);
    line-height: 1.05;
    text-decoration: none;
    /* disable built-in underline */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, .45);
    transition: transform .18s ease, color .18s ease;
    letter-spacing: 0.05em;
    /* consistent spacing */
}

/* Green first letter */
.navlink::first-letter {
    color: var(--accent);
    font-weight: 600;
}

/* Custom underline (hidden by default) */
.navlink::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -0.15em;
    /* adjust vertical offset */
    height: var(--ul-thickness);
    width: 100%;
    /* matches the inline-block width */
    background-color: var(--ul-color);
    transform: scaleX(0);
    /* collapsed */
    transform-origin: left;
    /* animate left → right */
    transition: transform 0.3s ease;
}

/* Hover state */
.navlink:hover {
    transform: translateX(.4rem);
    color: rgb(var(--text));
}

/* Animate underline on hover */
.navlink:hover::after {
    transform: scaleX(1);
}

/* Accessibility */
.navlink:focus-visible {
    outline: 3px solid rgba(255, 255, 255, .35);
    outline-offset: 4px;
}


/* Green first letter like the comp */
.navlink::first-letter {
    color: var(--accent);
    font-weight: 600;
}

/* Accessibility */
.navlink:focus-visible {
    outline: 3px solid rgba(255, 255, 255, .35);
    outline-offset: 4px;
}

/* Mobile: keep proportions; nudge margins a bit */
@media (max-width: 640px) {
    :root {
        --rail-left: clamp(1rem, 5vw, 3rem);
        --rail-top: clamp(2rem, 10vh, 6rem);
    }
}

/* ===== Portrait / tall screens: vertical columns ===== */
@media (orientation: portrait),
(max-aspect-ratio: 1/1) {

    /* swap background image for mobile */
    body {
        background-image: url("background-mobile.png");
    }

    /* center the column group and space it similar to the mock */
    .left-rail {
        position: absolute;
        top: clamp(3rem, 7vh, 6rem);
        left: 50%;
        transform: translateX(-50%) translateZ(0);
        flex-direction: row;
        /* columns instead of a vertical list */
        align-items: flex-start;
        gap: clamp(2rem, 6vw, 5rem);
        /* horizontal gap between columns */

        /* Override animation for mobile layout - optimized */
        opacity: 0;
        animation: fadeInTextMobile 0.8s ease-out 0.2s forwards;
        will-change: opacity, transform;
    }

    /* each nav link becomes a vertical word */
    .navlink {
        /* size tracks the short side to keep proportions right */
        font-size: clamp(28px, 6.5vmin, 72px);
        line-height: 1.05;
        text-decoration: none;
        /* no underline in this layout */
        writing-mode: vertical-rl;
        /* top-to-bottom */
        text-orientation: upright;
        /* keep letters upright (not rotated) */
        letter-spacing: 0.06em;
        /* slight spacing between letters */
        transform: none;
        /* reset horizontal hover transform */
        transition: all 0.3s ease;
        /* smooth transitions for mobile interactions */
        border-radius: 8px;
        /* subtle rounded corners for touch targets */
        padding: 0.5rem 0.3rem;
        /* better touch target size */
    }

    /* first letter sits at the top and can be a touch larger */
    .navlink::first-letter {
        color: var(--accent);
        font-weight: 600;
        font-size: 1.18em;
        transition: all 0.3s ease;
    }

    /* Enhanced hover effects for mobile */
    .navlink:hover {
        transform: translateY(-0.25rem) scale(1.05);
        letter-spacing: 0.08em;
        color: var(--accent-bright);
        /* Turn entire text accent green on hover */
        text-shadow: 0 0 15px rgba(74, 222, 128, 0.6),
            0 0 30px rgba(74, 222, 128, 0.4),
            1px 1px 2px rgba(0, 0, 0, 0.8);
        /* Glowing effect */
    }

    /* Active/touch state for better mobile feedback */
    .navlink:active {
        transform: translateY(-0.1rem) scale(1.02);
        color: var(--accent-bright);
        /* Brighter green when pressed */
        text-shadow: 0 0 20px rgba(74, 222, 128, 0.8),
            0 0 40px rgba(74, 222, 128, 0.6),
            1px 1px 2px rgba(0, 0, 0, 0.9);
        /* Stronger glow when pressed */
        background: rgba(74, 222, 128, 0.1);
        /* Subtle background glow */
    }

    /* Focus state for accessibility */
    .navlink:focus-visible {
        outline: 3px solid rgba(74, 222, 128, 0.6);
        outline-offset: 4px;
        color: var(--accent-bright);
        text-shadow: 0 0 10px rgba(74, 162, 79, 0.5);
    }
}

/* --- Page Load Animations --- */
@keyframes fadeOutOverlay {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes fadeInText {
    from {
        opacity: 0;
        transform: translateY(2rem) translateZ(0);
    }

    to {
        opacity: 1;
        transform: translateY(0) translateZ(0);
    }
}

@keyframes fadeInTextMobile {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(2rem) translateZ(0);
    }

    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0) translateZ(0);
    }
}

/* --- Hint styling --- */
.hint {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    
    /* Initial state for animation */
    opacity: 0;
    animation: fadeInHint 1s ease-out 2s forwards;
}

.hint p {
    margin: 0;
    padding: 0.75rem 1.5rem;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(var(--text), 0.2);
    border-radius: 25px;
    
    font-family: "Open Sans", sans-serif;
    font-size: clamp(14px, 2.5vmin, 18px);
    font-weight: 400;
    color: rgba(var(--text), 0.8);
    text-align: center;
    
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}

.hint:hover p {
    background: rgba(0, 0, 0, 0.8);
    color: rgba(var(--text), 0.95);
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.4);
}

@keyframes fadeInHint {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(1rem);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* Mobile adjustments for hint */
@media (max-width: 640px) {
    .hint {
        bottom: 1.5rem;
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        width: calc(100% - 2rem);
        max-width: 300px;
    }
    
    .hint p {
        padding: 0.6rem 1.2rem;
        font-size: clamp(12px, 3vw, 16px);
        white-space: nowrap;
    }
}

/* Portrait/mobile specific adjustments */
@media (orientation: portrait), (max-aspect-ratio: 1/1) {
    .hint {
        bottom: max(1.5rem, env(safe-area-inset-bottom, 1.5rem));
    }
}