/* Scene composition: images dissolve into the page, without rectangular cuts. */
.course { background: var(--bg); }
.course-intro { position: relative; z-index: 3; padding-bottom: 40px; }
.chapter-stage { background: var(--bg); height: 850px; margin-top: -35px; }
.chapter-images {
  mask-image: linear-gradient(transparent, #000 22%, #000 77%, transparent);
  -webkit-mask-image: linear-gradient(transparent, #000 22%, #000 77%, transparent);
}
.chapter-image { transition: opacity 1.35s ease, transform 3s cubic-bezier(.2,.6,.3,1); transform: scale(1.07); }
.chapter-image.is-leaving { opacity: 1; z-index: 1; transform: scale(1); }
.chapter-image.is-active { z-index: 2; transform: scale(1); }
.chapter-shade { z-index: 3; background: linear-gradient(90deg, #101e20eb, #101e20a1 27%, #101e2010 68%), linear-gradient(0deg, #101e20 0%, transparent 30%, transparent 67%, #101e20 100%); }
.chapter-content { z-index: 4; padding-block: 170px 130px; }
.chapter-counter { align-self: end; opacity: .65; }
.chapter-art-credit { z-index: 5; bottom: 35px; color: #aab9a6; }
.chapter-tabs { position: relative; margin-top: -24px; z-index: 6; }
.chapter-tabs button { border-top: 0; }
.chapter-tabs button::before { content: ''; height: 1px; background: var(--gold); position: absolute; top: 0; left: 0; right: 0; transform-origin: left; transform: scaleX(0); transition: transform .8s cubic-bezier(.2,.7,.3,1); }
.chapter-tabs button[aria-selected=true]::before { transform: scaleX(1); }
.chapter-tabs button[aria-selected=true] .tab-arrow { transform: translate(3px,-3px); }
.tab-arrow { transition: transform .5s; }
.interlude { border: 0; height: 110px; }
.hero-shade { background: linear-gradient(90deg,#08181cf2 0%,#08181cba 25%,#08181c35 55%,transparent 76%), linear-gradient(0deg,#101e20 0%,#101e20bb 14%,transparent 50%,transparent 70%,#08181c55); }
.hero-image { animation: sea-drift 16s ease-in-out infinite alternate; }
.edition-strip { background: var(--bg); border: 0; }
.world { padding-top: 75px; }
.sea-atmosphere { position: absolute; inset: auto 0 3%; width: 100%; height: 43%; z-index: 2; pointer-events: none; opacity: .8; mix-blend-mode: screen; mask-image: linear-gradient(transparent, #000 25%, #000 65%, transparent); }
.scene-mist { position: absolute; pointer-events: none; inset: auto -18% 0; height: 37%; z-index: 3; opacity: .42; background: radial-gradient(ellipse at 24% 65%,#7eaaa526,transparent 47%),radial-gradient(ellipse at 72% 80%,#c4c6a019,transparent 50%); filter: blur(17px); animation: mist-drift 13s ease-in-out infinite alternate; }
.chapter-mist { z-index: 3; height: 42%; }
.hero-content,.hero-bottom { z-index: 5; }
.hero-content > * { animation: hero-arrive 1.25s cubic-bezier(.15,.7,.2,1) both; }
.hero-content > :nth-child(2) { animation-delay: .12s; }
.hero-content > :nth-child(3) { animation-delay: .25s; }
.hero-content > :nth-child(4) { animation-delay: .4s; }
.hero-content > :nth-child(5) { animation-delay: .55s; }
.motion-toggle { position: fixed; right: 22px; bottom: 22px; z-index: 50; background: #0b1719c9; backdrop-filter: blur(10px); border-radius: 40px; padding: 13px 16px; font-size: 7px; letter-spacing: 1px; box-shadow: 0 5px 30px #0002; }
.motion-toggle:hover { background: #172b2ce8; }
.ship-spray { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; transition: opacity .25s; }
.chapter-stage > .ship-spray { mask-image: linear-gradient(transparent,#000 22%,#000 77%,transparent); }
html[data-motion=paused] .ship-spray { opacity: 0; }

/* Captain's harbor: one scene and an illuminated route, no framed table. */
.harbor { position: relative; isolation: isolate; padding-block: 70px 110px; overflow: hidden; background: var(--bg); }
.harbor-backdrop { position: absolute; inset: 0; z-index: -4; overflow: hidden; mask-image: linear-gradient(transparent, #000 23%, #000 77%, transparent); }
.harbor-backdrop img { width: 100%; height: 100%; object-fit: cover; object-position: center 55%; animation: harbor-drift 20s ease-in-out infinite alternate; opacity: .76; }
.harbor-shade { position: absolute; inset: 0; z-index: -3; background: linear-gradient(90deg,#101e20dc 0%,#101e2094 42%,#101e2066 70%,#101e20a8),linear-gradient(0deg,#101e20 0%,transparent 40%,#101e2020 70%,#101e20 100%); }
.harbor .sea-atmosphere { z-index: -2; inset: auto 0 5%; height: 39%; }
.harbor-mist { z-index: -1; opacity: .7; height: 48%; }
.harbor-inner { position: relative; z-index: 2; }
.harbor .section-index { margin-bottom: 100px; }
.harbor-layout { grid-template-columns: 1.2fr 1fr; gap: 90px; align-items: center; min-height: 460px; }
.harbor-pretitle { font-size: 9px; letter-spacing: 2.2px; color: #d1c9b0; margin-bottom: 30px; }
.harbor h2 { font-size: clamp(40px,4.3vw,64px); line-height: 1.32; letter-spacing: -2px; }
.mobile-break { display: none; }
.harbor-copy > p:not(.harbor-pretitle) { font-size: 12px; color: #cad2be; line-height: 2; margin-top: 28px; }
.harbor-signal { display: flex; align-items: center; gap: 17px; margin-top: 34px; }
.harbor-signal > span:last-child { color: #b5c5ad; font-size: 7px; line-height: 2; letter-spacing: 1.5px; }
.harbor-signal b { font-weight: 500; color: var(--gold); }
.signal-orbit { width: 31px; height: 31px; border: 1px solid #d6b27c4d; border-radius: 50%; position: relative; }
.signal-orbit::before { content: ''; position: absolute; inset: 10px; background: var(--gold); border-radius: 50%; box-shadow: 0 0 16px #d6b27c99; }
.signal-orbit::after { content: ''; position: absolute; inset: -1px; border: 1px solid var(--gold); border-radius: 50%; animation: signal-ripple 3s ease-out infinite; }
.boarding-journey { padding: 25px 8px 10px 25px; position: relative; }
.journey-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-bottom: 20px; }
.journey-heading .eyebrow { font-size: 8px; letter-spacing: 2px; }
.journey-heading > span:last-child { font-size: 25px; color: var(--gold); }
.journey-list { list-style: none; margin: 0; padding: 0; position: relative; }
.journey-list::before { content: ''; position: absolute; top: 44px; bottom: 62px; left: 20px; width: 1px; background: linear-gradient(#d6b27c88,#d6b27c11); }
.journey-list::after { content: ''; position: absolute; left: 18px; top: 44px; width: 5px; height: 5px; border-radius: 50%; background: #f3d7a2; box-shadow: 0 0 18px 3px #d6b27c99; animation: route-travel 7s cubic-bezier(.4,0,.3,1) infinite; }
.journey-stop { display: flex; align-items: center; gap: 27px; min-height: 115px; position: relative; padding-block: 18px; }
.journey-marker { width: 41px; height: 41px; flex-shrink: 0; border: 1px solid #d6b27c66; border-radius: 50%; display: grid; place-items: center; font-family: var(--serif); font-size: 13px; color: var(--gold); background: #101e20c9; position: relative; z-index: 1; transition: border-color .5s,box-shadow .5s; }
.journey-stop:first-child .journey-marker { border-color: var(--gold); box-shadow: 0 0 26px #d6b27c1a; }
.journey-state { color: #d3bd94; font-size: 6px; letter-spacing: 2px; }
.journey-stop h3 { font-size: 20px; font-weight: 500; letter-spacing: -.4px; margin-top: 8px; color: #f0e9d6; transition: color .4s,transform .4s; }
.journey-stop p { font-size: 10px; color: #b8c9b6; line-height: 1.8; margin-top: 7px; }
.journey-arrow { margin-left: auto; color: #d6b27c94; font-size: 23px; transition: transform .5s,color .5s; }
.journey-stop:hover .journey-marker { border-color: var(--gold); box-shadow: 0 0 24px #d6b27c33; }
.journey-stop:hover h3 { color: var(--gold); transform: translateX(4px); }
.journey-stop:hover .journey-arrow { color: var(--gold); transform: translate(4px,-4px); }
.journey-note { color: #9caf9a; font-size: 8px; line-height: 2; margin: 16px 0 0 68px; }
.server-address { margin-top: 28px; padding-block: 18px; border-block: 1px solid var(--line); }
.server-address > span { display: block; color: #b5c5ad; font-size: 8px; letter-spacing: 1.6px; margin-bottom: 12px; }
.server-address > code { display: block; color: var(--gold); font-family: monospace; font-size: clamp(17px,2vw,24px); letter-spacing: -.5px; overflow-wrap: anywhere; user-select: all; }
.harbor-layout > *, .journey-stop > div { min-width: 0; }
.journey-stop p code, .questions code { font-size: 1em; overflow-wrap: anywhere; }
.connection-command { margin-top: 48px; padding: 26px 28px; border: 1px solid var(--line); background: #0b1719b3; }
.connection-command h3 { font-family: var(--serif); font-size: 24px; font-weight: 400; color: var(--paper); }
.connection-command > p { margin-top: 14px; font-size: 12px; color: #b8c9b6; line-height: 1.9; }
.connection-command pre { margin-top: 20px; padding: 20px; border-left: 2px solid var(--gold); background: #07191d; color: #f0e9d6; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; line-height: 1.9; }
.connection-command pre:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.harbor-art-credit { color: #8fa08e; font-size: 6px; letter-spacing: 1.5px; text-align: center; margin-top: 85px; }
.enhanced .boarding-journey.reveal.is-visible .journey-stop { animation: journey-arrive .85s cubic-bezier(.2,.7,.3,1) both; }
.enhanced .boarding-journey.reveal.is-visible .journey-stop:nth-child(2) { animation-delay: .18s; }
.enhanced .boarding-journey.reveal.is-visible .journey-stop:nth-child(3) { animation-delay: .36s; }
html[data-motion=paused] .scene-mist,html[data-motion=paused] .harbor-backdrop img,html[data-motion=paused] .signal-orbit::after,html[data-motion=paused] .journey-list::after { animation-play-state: paused; }
@keyframes mist-drift { from { transform: translateX(-4%) scale(1); } to { transform: translateX(5%) scale(1.1); } }
@keyframes harbor-drift { from { transform: scale(1.02) translateY(0); } to { transform: scale(1.08) translateY(-12px); } }
@keyframes hero-arrive { from { opacity: 0; transform: translateY(28px); filter: blur(5px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes journey-arrive { from { opacity: 0; transform: translate(25px,10px); } to { opacity: 1; transform: none; } }
@keyframes signal-ripple { from { transform: scale(.8); opacity: .7; } to { transform: scale(1.8); opacity: 0; } }
@keyframes route-travel { 0% { transform: translateY(0); opacity: 0; } 12% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateY(235px); opacity: 0; } }
@media(max-width:1100px) { .harbor-layout { gap: 45px; } .harbor h2 { font-size: 48px; } .chapter-stage { height: 790px; } }
@media(max-width:760px) {
  .hero-image { object-position: 80% center; }
  .chapter-image[data-chapter-image=battle] { object-position: 88% center; }
  .hero-shade { background: linear-gradient(90deg,#08181cd1,#08181c3b 85%),linear-gradient(0deg,#101e20 0%,#101e20a8 20%,transparent 67%); }
  .hero-credit { text-align: right; }
  .hero-bottom { padding-bottom: 30px; }
  .motion-toggle { right: 12px; bottom: 12px; padding: 11px 13px; font-size: 6px; }
  .world { padding-top: 50px; }
  .chapter-stage { height: auto; min-height: 820px; margin-top: -15px; }
  .chapter-content { min-height: 820px; padding-block: 190px 120px; }
  .chapter-images { mask-image: linear-gradient(transparent,#000 20%,#000 72%,transparent); }
  .chapter-shade { background: linear-gradient(90deg,#101e20c7,#101e2038),linear-gradient(0deg,#101e20 0%,#101e2080 40%,transparent 75%,#101e20 100%); }
  .chapter-art-credit { bottom: 40px; }
  .chapter-counter { top: 95px; }
  .chapter-tabs { margin-top: -22px; }
  .interlude { height: 90px; }
  .harbor { padding-block: 40px 65px; }
  .harbor .section-index { margin-bottom: 55px; }
  .harbor-layout { grid-template-columns: 1fr; gap: 35px; }
  .harbor-backdrop img { object-position: 48% center; opacity: .6; }
  .harbor-shade { background: linear-gradient(90deg,#101e20bb,#101e2055),linear-gradient(0deg,#101e20,transparent 45%,#101e2066 80%,#101e20); }
  .harbor h2 { font-size: clamp(34px,8.8vw,49px); letter-spacing: -1.4px; }
  .mobile-break { display: block; }
  .harbor-pretitle { font-size: 7px; letter-spacing: 1.7px; margin-bottom: 24px; }
  .harbor-copy > p:not(.harbor-pretitle) { font-size: 11px; margin-top: 24px; }
  .harbor-signal { margin-top: 25px; }
  .harbor-signal > span:last-child { font-size: 6px; }
  .boarding-journey { padding: 10px 0 0; }
  .journey-heading .eyebrow { font-size: 7px; letter-spacing: 1.5px; }
  .journey-heading { padding-bottom: 15px; }
  .journey-stop { gap: 20px; min-height: 112px; }
  .journey-stop h3 { font-size: 19px; }
  .journey-stop p { font-size: 9px; }
  .journey-state { font-size: 6px; letter-spacing: 1.5px; }
  .journey-arrow { font-size: 21px; }
  .journey-note { margin-left: 61px; font-size: 7px; }
  .connection-command { margin-top: 32px; padding: 22px 18px; }
  .connection-command pre { padding: 16px 12px; font-size: 11px; }
  .harbor-art-credit { margin-top: 50px; font-size: 5px; }
  .harbor .sea-atmosphere { height: 27%; }
}
@media(prefers-reduced-motion:reduce) { .sea-atmosphere,.ship-spray { display: none; } .scene-mist { animation: none; } .chapter-image { transition: none; } }