/* The opening of the game as a film scene (12 Sep 2026, the owner's wish): the old station and
   the ruins on the island, the camera easing in slowly, the story told a paragraph at a time
   over the island's own sound, and the way in at the end. The game's mono type, on the dark. */
:root { --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace; --ink: #efe9dc; --faint: #bdb5a4; --marker: #ff6a3d; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #0d0d0c; color: var(--ink); font: 16px/1.6 var(--mono); overflow: hidden; }
.scene { position: fixed; inset: 0; overflow: hidden; }
.scene .bg { position: absolute; inset: -2%; background: #0d0d0c url("/static/prints/intro-bg.jpg") center 60% / cover no-repeat;
             transform-origin: 58% 62%; transform: scale(1.0); filter: saturate(.82) contrast(1.04); opacity: 0; transition: opacity 3.5s ease; }
@media (max-width: 1000px) { .scene .bg { background-image: url("/static/prints/intro-bg-1000.jpg"); background-position: 42% 60%; } }
.scene.lit .bg { opacity: 1; animation: drift 90s ease-out forwards; }
@keyframes drift { from { transform: scale(1.0) translate(0, 0); } to { transform: scale(1.14) translate(-1.5%, -1%); } }
.scene .shade { position: absolute; inset: 0; pointer-events: none;
                background: radial-gradient(ellipse at 50% 45%, rgba(0,0,0,0) 35%, rgba(0,0,0,.55) 100%),
                            linear-gradient(to bottom, rgba(0,0,0,.35), rgba(0,0,0,0) 25%, rgba(0,0,0,0) 45%, rgba(0,0,0,.72)); }
.scene .bars::before, .scene .bars::after { content: ""; position: absolute; left: 0; right: 0; height: max(6vh, 44px); background: #000; z-index: 2; transition: height 2.5s ease; }
.scene .bars::before { top: 0; } .scene .bars::after { bottom: 0; }
.scene.lit .bars::before, .scene.lit .bars::after { height: max(4.5vh, 34px); }
header.top { position: fixed; top: 0; left: 0; right: 0; z-index: 5; display: flex; justify-content: space-between; align-items: center;
             height: 4.5vh; min-height: 34px; padding: 0 24px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
header.top .brand { color: var(--ink); font-weight: 700; letter-spacing: .18em; opacity: 0; transition: opacity 2s ease 1s; }
.scene.lit ~ header.top .brand { opacity: .9; }
header.top nav { display: flex; gap: 20px; align-items: center; }
header.top a.login { color: var(--ink); text-decoration: none; font: inherit; font-size: 11px; letter-spacing: .18em; line-height: 1;
                     border: 1px solid rgba(239,233,220,.55); padding: 6px 12px 6px 13px; opacity: .9; transition: background .3s ease, color .3s ease, opacity .3s ease; }
header.top a.login:hover, header.top a.login:focus-visible { background: var(--ink); color: #0d0d0c; opacity: 1; outline: none; }
.story { position: fixed; left: 0; right: 0; bottom: 12vh; z-index: 4; display: flex; justify-content: center; padding: 0 24px; pointer-events: none; }
.story p { position: absolute; bottom: 0; left: 0; right: 0; max-width: 46rem; margin: 0 auto; padding: 0 20px; font-size: clamp(16px, 2.1vw, 22px); line-height: 1.65; text-align: center;
           text-shadow: 0 1px 2px rgba(0,0,0,.9), 0 0 18px rgba(0,0,0,.6); opacity: 0; transform: translateY(8px); transition: opacity 2.2s ease, transform 2.2s ease; }
.story p.on { opacity: 1; transform: none; }
.story p.short { font-size: clamp(18px, 2.6vw, 28px); letter-spacing: .02em; }
.card { position: fixed; inset: 0; z-index: 6; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; background: #0d0d0c; transition: opacity 1.8s ease; }
.card h1 { margin: 0; font-size: clamp(22px, 4vw, 40px); letter-spacing: .12em; text-transform: uppercase; font-weight: 700; }
/* the wordmark (15 Sep 2026): LAST ★ CAPE heavy, the island's name light beneath, spread from the L to the E */
.wordmark { display: inline-flex; flex-direction: column; align-items: stretch; line-height: 1.05; text-transform: uppercase; letter-spacing: .12em; }
.wordmark b { font-weight: 700; margin-right: -.12em; }
.wordmark .star { font-size: 1.25em; vertical-align: .02em; letter-spacing: 0; margin: 0 .12em; line-height: 0; color: var(--marker, #e2542a); }
.wordmark .isle { display: flex; justify-content: space-between; font-weight: 300; letter-spacing: 0; opacity: .7; font-size: .46em; margin-top: -1px; margin-left: .14em; margin-right: 0; }   /* the whole line a bearing to the right, by the owner's eye on his screen: the I under the L */
.wordmark .isle i { font-style: normal; }
header.top .brand.wordmark { font-size: 14px; letter-spacing: .12em; }
.card a.sub { text-decoration: none; margin-top: 8px; }   /* the login link under the way in (was inline; the audit of 16 Sep 2026 found it underlined once moved) */
.card .sub { color: var(--faint); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; }
.card button, .begin a { font: inherit; font-size: 14px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink); background: none;
                         border: 1px solid var(--ink); padding: 12px 26px; cursor: pointer; text-decoration: none; }
.card button:hover, .begin a:hover { background: var(--ink); color: #0d0d0c; }
.card.gone { opacity: 0; pointer-events: none; }
.begin { position: fixed; left: 0; right: 0; bottom: 12vh; z-index: 4; display: flex; justify-content: center; opacity: 0; transition: opacity 2.5s ease; pointer-events: none; }
.begin.on { opacity: 1; pointer-events: auto; }
.sound { position: fixed; left: 24px; bottom: 0; height: max(4.5vh, 34px); display: flex; align-items: center; z-index: 5; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); opacity: 0; transition: opacity 2s ease; }
.scene.lit ~ .sound { opacity: .8; }
.sound button.link { background: none; border: 0; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; padding: 0; }
.sound .vol { display: none; }
.skip { position: fixed; right: 24px; bottom: 0; height: max(4.5vh, 34px); display: flex; align-items: center; z-index: 5; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); text-decoration: none; opacity: 0; transition: opacity 2s ease; }
.scene.lit ~ .skip { opacity: .8; }
.skip:hover { color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .scene.lit .bg { animation: none; } .story p, .card, .begin { transition-duration: .01s; } }
@media (max-width: 600px) { header.top { padding: 0 16px; } .story, .begin { bottom: 14vh; } .sound { left: 16px; } .skip { right: 16px; } }