@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');
:root{color-scheme:dark;--gold:#dfbf7c;--ink:#071923}*{box-sizing:border-box}body{margin:0;background:var(--ink);color:#f5f2e8;font-family:Manrope,Arial,sans-serif}.scene{position:relative;min-height:100svh;overflow:hidden;isolation:isolate;display:flex;flex-direction:column}.panorama,.shade{position:absolute;inset:0;z-index:-2}.panorama{background:url('assets/port.png') center 55%/cover no-repeat;animation:arrive 2s ease-out both}.shade{z-index:-1;background:linear-gradient(180deg,rgba(3,14,23,.35),rgba(3,14,23,.24) 30%,rgba(3,14,23,.08) 58%,rgba(3,14,23,.8)),radial-gradient(ellipse at 50% 25%,rgba(3,14,23,.52),transparent 70%)}header{display:flex;align-items:center;justify-content:space-between;margin:30px 5vw 0;position:relative;z-index:2}.brand{display:grid;place-items:center;width:154px;height:104px;background:linear-gradient(130deg,#f4e5bf,#c8ae76);border:1px solid #f1dfac80;border-radius:3px 3px 22px 3px;box-shadow:0 12px 40px #0003}.brand img{display:block;width:142px;height:auto}.edition{font-size:10px;letter-spacing:.3em;color:#e1d6b7;border-bottom:1px solid #dfbf7c50;padding-bottom:12px}.message{text-align:center;margin:clamp(28px,6vh,80px) 20px 0;position:relative;z-index:2;animation:reveal 1.4s ease-out both}.eyebrow{font-size:10px;font-weight:600;letter-spacing:.45em;color:var(--gold);display:flex;justify-content:center;align-items:center;gap:13px}.eyebrow span{width:25px;height:1px;background:var(--gold)}h1{font-size:clamp(62px,8vw,124px);line-height:1.1;letter-spacing:-.065em;font-weight:500;margin:20px 0 22px;text-shadow:0 6px 40px #04121c88}h1 em{font-style:normal;font-weight:800;color:var(--gold);background:linear-gradient(110deg,#ac7e35,#f8e4ae 45%,#c79f53 70%,#f3daa0);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}.description{font-size:clamp(14px,1.3vw,19px);font-weight:500;margin:0;color:#f0eee6}.subline{font-size:12px;color:#ccd4d4;margin:12px 0;letter-spacing:.04em}.loading{height:2px;width:110px;background:#ffffff20;margin:30px auto;overflow:hidden}.loading i{display:block;width:45%;height:100%;background:var(--gold);animation:progress 3s ease-in-out infinite}.sea{position:absolute;top:59%;bottom:0;left:0;right:0;pointer-events:none;overflow:hidden}.water-lines{position:absolute;inset:0;opacity:.13;background:repeating-linear-gradient(178deg,transparent 0px,transparent 22px,#b1d2db 23px,transparent 24px);mask-image:linear-gradient(transparent,#000);animation:water 9s ease-in-out infinite alternate}.voyage{position:absolute;top:13%;width:clamp(260px,34vw,560px);left:0;animation:sail 42s linear infinite;will-change:transform}.vessel{position:relative;animation:bob 5s ease-in-out infinite}.vessel svg{width:100%;display:block;filter:drop-shadow(0 15px 10px #00131e55)}.wake{position:absolute;right:88%;bottom:5%;width:160px;height:12px;background:linear-gradient(90deg,transparent,#a7c2c044);border-radius:50%;filter:blur(4px)}footer{margin-top:auto;position:relative;z-index:2;display:flex;justify-content:space-between;gap:20px;padding:32px 5vw;font-size:10px;letter-spacing:.13em;color:#c1c8ca}footer b{color:var(--gold);margin:0 10px;font-weight:400}@keyframes sail{from{transform:translateX(-110%)}to{transform:translateX(105vw)}}@keyframes bob{0%,100%{transform:translateY(0) rotate(-.4deg)}50%{transform:translateY(5px) rotate(.4deg)}}@keyframes water{to{transform:translateX(22px)}}@keyframes progress{0%{transform:translateX(-120%)}100%{transform:translateX(330%)}}@keyframes reveal{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}@keyframes arrive{from{opacity:0;transform:scale(1.035)}to{opacity:1;transform:scale(1)}}@media(min-height:950px){.message{margin-top:10vh}}@media(max-width:600px){header{margin:20px 6vw 0}.brand{width:122px;height:82px}.brand img{width:112px}.edition{font-size:8px;letter-spacing:.15em;max-width:110px;line-height:1.8;text-align:right}.message{margin-top:9vh}.eyebrow{font-size:8px;letter-spacing:.3em}h1{font-size:clamp(54px,13vw,76px);margin:22px 0}.sea{top:61%}.voyage{top:16%;width:300px;animation-duration:30s}footer{padding:24px 6vw;flex-direction:column;gap:10px;font-size:8px}.panorama{background-position:54% center}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important}.voyage{left:calc(50% - 160px);width:320px}}
/* Photographic vessel, naturally blended at the waterline. */
.voyage{width:clamp(380px,43vw,740px);animation-delay:-11s}
.vessel{animation-name:photo-bob}
.ship-photo{display:block;width:100%;height:auto;filter:brightness(.78) saturate(.72) drop-shadow(0 9px 5px #00121e44);mask-image:linear-gradient(to bottom,#000 0%,#000 89%,transparent 99%)}
.wake{bottom:14%;height:5px;opacity:.55}
@keyframes photo-bob{0%,100%{transform:translateY(0) rotate(-.12deg)}50%{transform:translateY(3px) rotate(.12deg)}}
@media(max-width:600px){.voyage{width:380px;top:10%;animation-delay:-10s}}
@media(prefers-reduced-motion:reduce){.voyage{left:calc(50% - 190px);width:380px}}
/* Gold liquid rises through both title words on opening. */
h1 .liquid-word{position:relative;display:inline-block;background:none;color:transparent;-webkit-text-fill-color:transparent;-webkit-text-stroke:.8px #dfbf7c80;isolation:isolate}
h1 .liquid-word::after{content:attr(data-text);position:absolute;inset:0;font:inherit;letter-spacing:inherit;line-height:inherit;white-space:nowrap;background:linear-gradient(172deg,#fff0c4 2%,#e6c47b 24%,#bd8e37 43%,#f8e1a3 51%,#bf923c 58%,#e5bf6a 82%,#f9e3ae);background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent;-webkit-text-stroke:.35px #f2d59488;animation:gold-liquid-rise 3.8s .4s ease-in-out infinite alternate both;pointer-events:none}
@keyframes gold-liquid-rise{0%{clip-path:polygon(0 100%,0 100%,10% 100%,20% 100%,30% 100%,40% 100%,50% 100%,60% 100%,70% 100%,80% 100%,90% 100%,100% 100%,100% 100%)}15%{clip-path:polygon(0 100%,0 88%,10% 84%,20% 87%,30% 91%,40% 88%,50% 84%,60% 87%,70% 91%,80% 88%,90% 84%,100% 87%,100% 100%)}35%{clip-path:polygon(0 100%,0 65%,10% 69%,20% 72%,30% 68%,40% 64%,50% 68%,60% 72%,70% 68%,80% 64%,90% 68%,100% 72%,100% 100%)}55%{clip-path:polygon(0 100%,0 48%,10% 44%,20% 40%,30% 44%,40% 48%,50% 44%,60% 40%,70% 44%,80% 48%,90% 44%,100% 40%,100% 100%)}75%{clip-path:polygon(0 100%,0 20%,10% 24%,20% 28%,30% 24%,40% 20%,50% 24%,60% 28%,70% 24%,80% 20%,90% 24%,100% 28%,100% 100%)}92%{clip-path:polygon(0 100%,0 5%,10% 2%,20% 0%,30% 2%,40% 5%,50% 2%,60% 0%,70% 2%,80% 5%,90% 2%,100% 0%,100% 100%)}100%{clip-path:polygon(0 100%,0 0%,10% 0%,20% 0%,30% 0%,40% 0%,50% 0%,60% 0%,70% 0%,80% 0%,90% 0%,100% 0%,100% 100%)}}
@media(prefers-reduced-motion:reduce){h1 .liquid-word::after{animation:none;clip-path:inset(0)}}

/* Keep copy readable over the illuminated terminal on all screens. */
.message .description{color:#fff;font-weight:700;text-shadow:0 2px 5px #000,0 0 18px #00101f;font-size:clamp(15px,1.3vw,19px)}
.message .subline{color:#f2f4f5;font-weight:500;text-shadow:0 2px 5px #000,0 0 14px #00101f}
.message::before{content:"";position:absolute;z-index:-1;inset:-28px -20px -18px;background:radial-gradient(ellipse,rgba(2,13,24,.62),rgba(2,13,24,.26) 50%,transparent 74%);pointer-events:none}
.edition,footer{color:#f1f3f3;text-shadow:0 2px 5px #000}
@media(max-width:600px){.message{margin-left:18px;margin-right:18px}.message .description{max-width:340px;margin:0 auto;line-height:1.65;padding:0 10px}.message .subline{font-size:12px;line-height:1.6}.message::before{inset:-25px -18px -20px;background:radial-gradient(ellipse,rgba(2,13,24,.76),rgba(2,13,24,.36) 55%,transparent 78%)}footer{line-height:1.6}}
@media(max-height:650px) and (min-width:601px){header{margin-top:16px}.brand{width:122px;height:82px}.brand img{width:112px}.message{margin-top:12px}h1{font-size:72px;margin:12px 0}.loading{margin:18px auto}footer{padding-top:20px;padding-bottom:20px}}
@media(max-width:360px){h1{font-size:49px}.edition{font-size:7px;max-width:95px}.message{margin-top:7vh}}