/* ------------------------------------------------------------------
   Giant's Causeway scene — layered over styles.css, which still
   provides the typography and the .stage layout.
   ------------------------------------------------------------------ */

html {
    background: #1b2129;
}

body.causeway {
    background: #1b2129;
}

.scene-poster,
.scene-layer,
.scene-grade {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* Shown until the first WebGL frame lands, and for good when motion is
   reduced or WebGL is unavailable. Framed on the horizon like the canvas. */
.scene-poster {
    z-index: 0;
    background: #1b2129 url("/img/causeway.jpg") 56% 30% / cover no-repeat;
}
@media (max-aspect-ratio: 3/4) {
    .scene-poster { background-position: 56% 50%; }
}
.has-gl .scene-poster { display: none; }

#causeway {
    z-index: 1;
    opacity: 0;
    transition: opacity 2.2s ease-out;
}
#causeway.is-ready { opacity: 1; }

/* Dusk grade and lens falloff: pulls the bright cloud deck down a little
   so the verse stays legible, and darkens the frame edges like a lens. */
.scene-grade {
    z-index: 2;
    background:
        radial-gradient(130% 95% at 50% 45%, transparent 50%, rgba(4, 7, 12, 0.55) 100%),
        linear-gradient(180deg,
            rgba(8, 12, 20, 0.38) 0%,
            rgba(8, 12, 20, 0.10) 32%,
            rgba(8, 12, 20, 0.06) 60%,
            rgba(6, 9, 14, 0.40) 100%);
}

/* Text sits on a photo here, not a night sky: a firmer, neutral scrim
   and shadows instead of the aurora glow. */
.causeway .stage::before {
    background: radial-gradient(62% 46% at 50% 50%,
        rgba(6, 10, 16, 0.62) 0%,
        rgba(6, 10, 16, 0.34) 55%,
        transparent 100%);
}

.causeway .eyebrow h1 {
    color: #d5dde3;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.7);
}

.causeway .eyebrow .rule {
    background: linear-gradient(90deg, transparent, #c9d3da);
}
.causeway .eyebrow .rule:last-child {
    background: linear-gradient(90deg, #c9d3da, transparent);
}

.causeway .line {
    color: #f4f1ec;
    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.55),
        0 2px 22px rgba(0, 0, 0, 0.75);
}

.causeway .line--emphasis {
    color: #ffffff;
    text-shadow:
        0 0 30px rgba(255, 196, 150, 0.30),
        0 1px 2px rgba(0, 0, 0, 0.6),
        0 2px 22px rgba(0, 0, 0, 0.75);
}

.causeway .quote .author {
    color: #e2e7ea;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.7);
}
.causeway .quote .author::before {
    color: #e8b796;
}

.causeway .quote .work {
    color: #c3ccd2;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.7);
}

/* The footer lands on pale basalt: a soft band of shade under it. */
.causeway .site-footer::before {
    content: "";
    position: absolute;
    inset: -4rem 0 0;
    z-index: -1;
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(6, 10, 16, 0.55) 45%,
        rgba(6, 10, 16, 0.78) 100%);
    pointer-events: none;
}

.causeway .site-footer .rule {
    background: linear-gradient(90deg, transparent, #c9d3da, transparent);
}

.causeway .site-nav a {
    color: #e2e7ea;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6), 0 1px 12px rgba(0, 0, 0, 0.8);
}
.causeway .site-nav a:hover,
.causeway .site-nav a:focus-visible {
    color: #ffffff;
    text-shadow: 0 0 18px rgba(255, 196, 150, 0.45), 0 1px 12px rgba(0, 0, 0, 0.8);
}
.causeway .site-nav a:focus-visible { outline-color: #e8b796; }
.causeway .site-nav a[aria-current="page"] { color: #e8b796; }

.causeway .colophon {
    color: #c3ccd2;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.7);
}
.causeway .colophon a:hover,
.causeway .colophon a:focus-visible { color: #ffffff; }
.causeway .colophon a:focus-visible { outline-color: #e8b796; }

@media (prefers-reduced-motion: reduce) {
    #causeway { transition: none; }
}