/* The underwater journey plays by itself; only "Next" hurries it along. */
#intro.scroll-story{pointer-events:none;transition:none;will-change:opacity}
#intro.scroll-story .mcentre{transition:none;will-change:opacity}
#intro.scroll-story .mtrack{animation-play-state:paused}
#intro.scroll-story .mrow{transition:none;will-change:transform}
#intro.scroll-story .dank{pointer-events:none;transition:none;background:rgba(4,17,27,.76);justify-content:center;overflow:hidden}
#intro .dank p{text-align:left;text-wrap:pretty}
#intro #dankText{text-align:center}
#intro.scroll-story .dank-logos{padding:24px;background:#f4f2ee;border-radius:3px;color:#1a1e1f}
#intro.scroll-story .dank-logo-beschriftet span{color:#1a1e1f}
#intro.scroll-story .dank-hfk{background-color:#f4f2ee}
.voyage-brand{position:fixed;left:50%;top:0;z-index:65;pointer-events:none;transform:translateX(-50%);background:#f1f1e6;opacity:0;will-change:opacity}
#diveWater{background:transparent;overflow:hidden;touch-action:manipulation}
#diveWater.on{pointer-events:auto}
#diveWater[hidden]{display:none}
#diveWater:focus{outline:none}
.voyage-ocean{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
#diveWater .dive-bubbles{opacity:0;pointer-events:none}
.voyage-particle{position:absolute;left:0;top:0;display:block;border:1px solid rgba(223,242,244,.6);border-radius:50%;background:rgba(194,229,234,.2);will-change:transform}
.voyage-copy{position:absolute;inset:15% 0;display:grid;place-items:center;padding:36px;pointer-events:none}
.voyage-text{grid-area:1/1;width:min(46ch,100%);text-align:left;color:#f0f2e9;opacity:0;text-shadow:0 2px 18px #03101e}
.voyage-text h2{margin:0 0 18px;font:400 clamp(21px,2.2vw,30px)/1.35 var(--display);letter-spacing:.01em;text-wrap:pretty}
.voyage-text p{margin:0;font:400 clamp(17px,1.45vw,21px)/1.65 var(--text);text-wrap:pretty}

@media(max-width:600px){
  #intro.scroll-story .dank-logos{padding:20px 12px;width:min(358px,94vw)}
  .voyage-copy{padding:24px}
  .voyage-text h2{font-size:21px;margin-bottom:16px}
  .voyage-text p{font-size:17px;line-height:1.6}
}
@media(max-height:500px){
  #intro.scroll-story .dank{gap:14px}
  #intro.scroll-story .dank-logos{padding:12px;grid-template-columns:repeat(4,minmax(0,1fr));row-gap:12px}
  .voyage-copy{inset:12% 0}.voyage-text{width:min(50ch,100%)}.voyage-text h2{font-size:20px;margin-bottom:12px}.voyage-text p{font-size:16px}
}
@media(prefers-reduced-motion:reduce){.dive-bubbles{display:none}}
.voyage-credits{position:absolute;inset:15% 0;display:grid;place-items:center;padding:36px;pointer-events:none}
.voyage-credit{grid-area:1/1;display:flex;flex-direction:column;align-items:center;gap:24px;width:min(660px,100%);color:#f0f2e9;opacity:0;text-shadow:0 2px 18px #03101e}
.voyage-credit p{margin:0;width:min(32ch,100%);text-align:left;text-wrap:pretty;font:400 clamp(21px,2.55vw,34px)/1.5 var(--display)}
.voyage-credit:first-child p{font-size:16px;max-width:44ch}
.voyage-credit .dank-logos{width:100%;padding:22px;box-sizing:border-box;gap:24px;background:#f4f2ee;border-radius:2px;text-shadow:none}
.voyage-credit .dank-logos img{max-height:62px;max-width:100%;height:auto}
.voyage-credit .dank-logos img[src$="deutsches-meeresmuseum.png"]{height:80px;max-height:80px}
.voyage-credit .dank-logos img[src$="universum-bremen-neu.png"]{height:56px;max-height:56px}
.voyage-credit .dank-logo-beschriftet span{color:#1a1e1f}
@media(max-width:600px){
  .voyage-credits{padding:36px}
  .voyage-credit{gap:18px}
  .voyage-credit p{font-size:clamp(19px,5.5vw,25px)}
  .voyage-credit:first-child p{font-size:13px;line-height:1.5}
  .voyage-credit .dank-logos{padding:16px 12px;gap:14px}
  .voyage-credit .dank-logos img{max-height:46px}
  .voyage-credit .dank-logos img[src$="deutsches-meeresmuseum.png"]{height:72px;max-height:72px}
  .voyage-credit .dank-logos img[src$="universum-bremen-neu.png"]{height:46px;max-height:46px}
}
@media(max-height:500px){
  .voyage-credits{padding:18px 32px;inset:12% 0}
  .voyage-credit{gap:12px;width:min(540px,100%)}
  .voyage-credit p{font-size:21px}
  .voyage-credit:first-child p{font-size:12px;max-width:none}
  .voyage-credit .dank-logos{grid-template-columns:repeat(4,minmax(0,1fr));padding:12px;gap:12px}
  .voyage-credit .dank-logos img{max-height:42px}
  .voyage-credit .dank-logos img[src$="deutsches-meeresmuseum.png"]{height:56px;max-height:56px}
  .voyage-credit .dank-logos img[src$="universum-bremen-neu.png"]{height:42px;max-height:42px}
}

/* Credits form centred, single-line acknowledgements; the controller measures
   their final font so even the long institution line fits a narrow phone. */
.voyage-credit p{width:max-content;max-width:none;text-align:center;white-space:nowrap;text-wrap:nowrap;flex-shrink:0}
.voyage-credit:first-child p{max-width:none}

.voyage-copy{inset:90px 0;place-items:center}
.voyage-text{text-align:center}
@media(max-width:600px){
  .voyage-copy,.voyage-credits{inset:78px 0;place-items:center;padding:24px}
  .voyage-text{width:min(46ch,100%)}
}
@media(max-height:500px){
  .voyage-copy,.voyage-credits{inset:80px 0 56px;padding:16px 28px}
}

/* "Next" moves straight on to the following text. It sits centred below the
   texts, in the inverted colours of the welcome's start button. */
.voyage-next{
  position:absolute;left:50%;bottom:max(30px,calc(env(safe-area-inset-bottom) + 14px));transform:translateX(-50%);
  min-width:132px;padding:14px 22px;font-size:10px;letter-spacing:.22em;text-transform:uppercase;white-space:nowrap;
  --control-fill:#f0f2e9;--control-edge:#f0f2e9;color:#06192a;
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .35s ease,visibility 0s linear .35s;
}
.voyage-next.ready{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .35s ease}
.voyage-next:hover{--control-fill:#c9e3e6;--control-edge:#c9e3e6}
.voyage-next:focus-visible{outline:2px solid #f0f2e9;outline-offset:4px}
@media(max-height:500px){
  .voyage-next{bottom:max(10px,env(safe-area-inset-bottom));min-height:40px;padding:10px 20px}
}