/* Make sure page fills viewport */
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    min-height: 100vh;
}

/* Base background – landscape */
body {
    background-color: #000; /* fallback */
    background-image: url("assets/background-horizontal.jpg");
    background-size: cover;
    background-position: 50% 72%; /* <-- your tuned focal point here */
    background-repeat: no-repeat;
    background-attachment: scroll;
    overflow: hidden;

    /* Fade-in for the whole page */
    opacity: 0;
    animation: pageFadeIn 1.2s ease-out forwards;
}

/* Portrait background + its own focal point */
@media (orientation: portrait) {
    body {
        background-image: url("assets/background-vertical.jpg");
        background-position: 55% 72%; /* <-- your tuned portrait focal point */
    }
}

/* Dark cinematic overlay */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;

    /* Soft dark overlay (adjust last number for strength) */
    background: radial-gradient(circle at center,
        rgba(0, 0, 0, 0.05) 0%,
        rgba(0, 0, 0, 0.30) 60%,
        rgba(0, 0, 0, 0.45) 100%
    );

    opacity: 0;
    animation: overlayFade 1.4s ease-out 0.1s forwards;
}

/* Page fade-in */
@keyframes pageFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Overlay fade from strong to subtle */
@keyframes overlayFade {
    from { opacity: 0.9; }
    to   { opacity: 0.4; }  /* tweak between 0.2–0.5 to taste */
}