@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@300;400;700;900&family=Fira+Sans:wght@300;400;500;600;700;900&display=swap');

html { 
    font-size: 20px;
    max-width: 100%;
    box-sizing: border-box;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Merriweather', serif;
    font-size: 0.9rem;
    line-height: 1.4;
    color:#fdf2e6;
    background-color: #262a33;
    max-width: 100%;
    box-sizing: border-box;
}

::selection {
    background: #DCF763;
    color: black;
    text-shadow: none;
}

/* header with symbol */
.transparent-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 40px;
    z-index: 1000;
    background: rgba(38, 42, 51, 0.1);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    padding: 0 20px;
    transition: background 0.3s ease;
}

.transparent-header:hover {
    background: rgba(38, 42, 51, 0.2);
}

.transparent-header .header-logo {
    height: 20px;
}

.transparent-header .header-logo img {
    height: 100%;
    width: auto;
    object-fit: contain;
}

@media (max-width: 768px) {
    .transparent-header {
        height: 30px;
        padding: 0 15px;
    }
    
    .transparent-header .header-logo {
        height: 15px;
    }
}

/* ngl.media chunks of style */
.wide-content {
    width: 1200px;
    position: relative;
    left:50%;
    transform:translateX(-50%);
    max-width: 100vw;
    margin-bottom: 1.5rem;
}

.wp-caption { 
    max-width: 100%;
}

.wp-caption img { 
    border: none; 
    height: auto; 
    margin: 0; 
    max-width: 100%; 
    padding: 0; 
    width: 100%;
}

.wp-caption p.wp-caption-text { 
    display: block; 
    font-family: 'Fira Sans', sans-serif; 
    font-weight: 300; 
    font-size: 0.75rem; 
    line-height: 1.2; 
    margin: 0; 
    padding: 1rem 0; 
    border-bottom: 1px solid rgba(30, 30, 36, 0.5);
}

.aligncenter { 
    display: block; 
    margin: 0.25rem auto 1.5rem;
}
.alignleft { 
    float: left; 
    margin: 0.25rem 1.25rem 1.5rem -237px;
}

.alignright { 
    float: right; 
    margin: 0.25rem -237px 1.5rem 1.25rem;
}

.popper-info-box { 
    position: relative;
    margin-right: -3px;
    z-index: 999;

}

.popper-info-box .popper-word {
    transition: 0.16s;
}

.popper-info-box:hover .popper-word { 
    color: rgba(30,30,36,0.7);
}

.popper-btn-box { 
    display: inline-block; 
    position: relative; 
    margin-top: -0.1rem; 
    margin-bottom: -0.1rem;
}

.popper-btn { 
    position: relative;
    z-index: 999;
    display: inline-block; 
    width: 1rem; 
    height: 1rem; 
    background: #999; 
    color: #fff; 
    border-radius: 50%; 
    line-height: 1.1rem; 
    text-align: center; 
    font-style: italic; 
    font-weight: 900; 
    cursor: pointer;
    border: none;
    font-size: inherit;
    transition: all 0.2s ease;
}

.popper-btn:hover {
    background: #000;
    color: #fff;
}

.popper-btn-box:hover .popper-btn {
    background: #000;
    color: #fff;
}

.popper-info-box:hover .popper-btn, 
.popper-btn-box.popper-active .popper-btn { 
    color: #fff;
}

.popper-box {
    position: absolute;
    width: 12rem; 
    background: #fff; 
    border: 1px solid #D9D9D9; 
    box-shadow: 0px 0px 0.5rem rgba(0, 0, 0, 0.15); 
    padding: 0.8rem; 
    font-size: 0.7rem; 
    line-height: 0.9rem; 
    border-radius: 0.5rem; 
    color: #000; 
    opacity: 0; 
    visibility: hidden; 
    pointer-events: none; 
    top: 50%; 
    transform: translateY(-50%); 
    transition: opacity .16s; 
    z-index: 1000;
}

.popper-box:before { 
    content: ''; 
    display: block; 
    position: absolute; 
    left: -2.2rem; 
    right: -2.2rem; 
    top: -1rem;
    bottom: -1rem;
    z-index: -1;
}

.popper-right .popper-box { 
    right: 2rem;
    z-index: 1000;
}

.popper-left .popper-box { 
    left: 2rem;
    z-index: 1000;
}

.popper-active .popper-box, 
.popper-btn-box:hover .popper-box { 
    visibility: visible; 
    opacity: 1; 
    pointer-events: all;
    z-index: 1000;
}

/* general rules */
a {
    text-decoration: none;
}

.text-content a {
    color:rgba(30,30,36,0.8); box-shadow: inset 0 -1px 0 0 rgba(30,30,36,0.8);
}

.text-content a:hover {
    color:rgba(30,30,36,0.6); box-shadow: inset 0 -1px 0 0 rgba(30,30,36,0.6);
}

/* intro section */
.intro {
    height: 100vh;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    overflow: hidden;
    transition: opacity 0.8s ease;
}

.intro.fade-out {
    opacity: 0;
}

#intro-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
     display: none;
}

.intro-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
    display: block;
}

.intro-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    transition: opacity 0.8s ease;
    z-index: -1;
}

.intro-content {
    max-width: 766px;
    padding: 0 20px;
    z-index: 1;
    font-family: 'Merriweather';
    transition: transform 0.6s ease, opacity 0.6s ease;
    transform: translateY(60px);
}

.intro-content.scroll-up {
    transform: translateY(-20px);
    opacity: 0;
}

.intro h1 {
    font-size: 3.2rem;
    font-weight: 900;
    line-height: 1.1;
    margin-bottom: 1.6rem;
}

.intro p {
    font-size: 1.6rem;
    line-height: 2.1rem;
    font-weight: 300;
    margin-bottom: 1.2rem;
}

.intro-logos-section {
    text-align: center;
    margin-top: 1rem;
    transform: translateY(20px);
}

.intro-logos-text {
    font-family: 'Fira Sans', sans-serif;
    font-size: 0.9rem;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 0.8rem;
}

.intro-logos {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
}

.logo {
    height: 30px;
    transition: opacity 0.3s ease;
}

.intro-date {
    font-family: 'Fira Sans', sans-serif;
    font-size: 0.9rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.intro-authors {
    font-family: 'Fira Sans', sans-serif;
    font-size: 1rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.9);
    margin: 1.5rem 0 1.5rem 0;
    text-align: center;
}

.intro-authors a {
    color: #DCF763;
    text-decoration: none;
    transition: color 0.3s ease;
}

.intro-authors a:hover {
    color: white;
}

/* steps section */
.story-transition {
    height: 100vh;
    padding-top: 30vh;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
    text-align: center;
    position: relative;
    z-index: 3;
    background: transparent;
}

.story-transition.fade-in {
    opacity: 1;
    transform: translateY(0);
}

.story-transition p {
    max-width: 726px;
    font-family: 'Fira Sans';
    margin: 0 auto;
    padding: 20px;
    font-size: 1.2rem;
    line-height: 1.4;
    color: white;
    margin-bottom: 1.125rem;
}

.scrolly-container {
    position: relative;
}

/* map in scrolly */
.map-container {
    position: sticky;
    top: 0;
    height: 100vh;
    z-index: 1;
}

.map-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 10vh;
    background: linear-gradient(
        to bottom,
        #262a33 0%,
        rgba(38, 42, 51, 0.8) 50%,
        transparent 100%
    );
    z-index: 10;
    pointer-events: none;
}

#main-map-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


.step {
    min-height: 120vh;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Fira Sans';
    padding: 4rem 2rem;
    position: relative;
    z-index: 2;
    background: transparent;
    transition: opacity 0.8s ease;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

.step[data-step="2"] {
    background-image: url('../media/scene.png');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
}

.step[data-step="4"] {
    height: 150vh;
}


.step-content {
    max-width: 726px;
    margin: 0 auto;
    padding: 0 20px;
    text-align: center;
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.step-content.active {
    opacity: 1;
    transform: translateY(0);
}

.step-content p {
    font-size: 1.2rem;
    line-height: 1.4;
    color: white;
    margin-bottom: 1.125rem;
}

/* text section */
.text-content-section {
    padding: 4rem 0;
    background: #fdf2e6;
    color: #262a33;
}

.text-content {
    max-width: 726px;
    margin: 0 auto;
    padding: 0 20px;
}

.text-content p {
    position: relative;
    font-size: 0.9rem;
    line-height: 1.4;
    color: #262a33;
    margin-bottom: 1.125rem;
    z-index: 1;
}

.text-content h3 {
    font-size: 1.1rem;
    color: #262a33;
    font-weight: bold;
    margin-bottom: 1.125rem;
    margin-top: 2rem;
}

.text-content p,
.text-content h3 {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.text-content p.fade-in,
.text-content h3.fade-in {
    opacity: 1;
    transform: translateY(0);
}

.intro-video,
#intro-canvas,
.outro-video,
.text-content-section {
    overflow-x: hidden;
}

/* doc icons */
.main-doc-link {
    display: inline-block;
    text-decoration: none;
    margin: 0 5px;
    vertical-align: middle;
    transition: transform 0.2s ease;
}

.main-doc-link:hover {
    transform: scale(1.1);
}

a.main-doc-link,a.ship-doc-link {
    box-shadow: none;
}

a.main-doc-link:hover, a.ship-doc-link:hover {
    box-shadow: none;
}

.doc-icon {
    display: inline-block;
    width: 16px;
    height: 20px;
    background-image: url('../media/doc.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: background-image 0.2s ease;
    cursor: pointer;
}

.main-doc-link:hover .doc-icon {
    background-image: url('../media/doc2.svg');
}

/* modal windows */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.modal.show {
    display: flex;
    opacity: 1;
    align-items: center;
    justify-content: center;
}

.modal-content {
    position: relative;
    max-width: 90%;
    max-height: 90%;
    text-align: center;
}

#main-m_image {
    max-width: 100%;
    max-height: 80vh;
    object-fit: contain;
    border-radius: 8px;
}

#main-m_caption {
    color: white;
    padding: 15px;
    font-size: 0.9rem;
    border-radius: 4px;
    margin-top: 10px;
}

.close {
    position: absolute;
    top: -40px;
    right: 0;
    color: white;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    z-index: 1001;
}

.close:hover {
    color: #ccc;
}

.outro-video-section {
    height: 100vh;
    position: relative;
    overflow: hidden;
    margin: 0;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
}

.outro-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}


@media (max-width: 1024px) {
    .intro h1 { font-size: 2.5rem; line-height: 1.2; }
    .intro p { font-size: 1.3rem; line-height: 1.4; }
    .intro-date { font-size: 0.85rem; }
    .step-content p { font-size: 1.1rem; line-height: 1.5; }
}


@media (max-width: 768px) {
    html { font-size: 18px; }
    .intro-content { transform: translateY(20px); }
    .intro h1 { font-size: 1.8rem; line-height: 1.25; margin-bottom: 1rem; }
    .intro p { font-size: 1.1rem; line-height: 1.4; margin-bottom: 1rem; }
    .intro-date { font-size: 0.8rem; margin-bottom: 1.2rem; }
    .intro-authors { font-size: 0.9rem; line-height: 1.4; margin: 1rem 0 1rem 0; }
    .intro-logos-section { margin-top: 0.8rem; }
    .intro-logos { gap: 15px; }
    .logo { height: 28px; }
    .intro-logos-text { font-size: 0.8rem; margin-bottom: 0.6rem; }
    .story-transition { height: 80vh; padding-top: 15vh; }
    .story-transition p { font-size: 1.1rem; line-height: 1.4; padding: 15px; margin-bottom: 0.8rem; }
    .step { min-height: 100vh; padding: 2rem 1rem; }
    .step[data-step="4"] { height: 120vh; }
    .step-content p { font-size: 1.1rem; line-height: 1.5; margin-bottom: 1rem; }
    .text-content p { font-size: 1rem; line-height: 1.5; }
    .text-content h3 { font-size: 1rem; margin-bottom: 0.8rem; margin-top: 1.5rem; }
    .main-doc-link { margin: 0 3px; padding: 0px; }
    .doc-icon { width: 14px; height: 18px; }
    .step[data-step="2"] { background-image: url('../media/scene.png'); background-size: cover; background-position: center center; background-attachment: scroll; background-repeat: no-repeat; min-height: 100vh; }
    .outro-video-section { height: 56.25vw; }
}


@media (max-width: 480px) {
    html { font-size: 16px; }
    .intro-content { transform: translateY(10px); }
    .intro h1 { font-size: 1.5rem; line-height: 1.2; }
    .intro p { font-size: 1rem; margin-bottom: 0.8rem; }
    .intro-date { font-size: 0.75rem; margin-bottom: 1rem; }
    .intro-authors { font-size: 0.8rem; line-height: 1.4; margin: 0.8rem 0 0.6rem 0; }
    .intro-logos-section { margin-top: 0.6rem; }
    .intro-logos { gap: 12px; }
    .intro-logos-text { font-size: 0.75rem; }
    .logo { height: 24px; }
    .story-transition { height: 80vh; padding-top: 10vh; }
    .story-transition p { margin-bottom: 0.6rem; padding: 10px; }
    .step { padding: 1.5rem 0.8rem; }
    .step-content, .text-content { padding: 0 15px; }
    .modal-content { max-width: 95%; max-height: 85%; }
    #main-m_image { max-height: 70vh; }
    #main-m_caption { font-size: 0.8rem; padding: 10px; }
    .close { font-size: 24px; top: -35px; }
    .step[data-step="2"] { background-image: url('../media/scene.png'); background-size: cover; background-position: center center; background-attachment: scroll; background-repeat: no-repeat; min-height: 100vh; }
    .outro-video-section { height: 56.25vw; }
}

@media screen and (max-width: 1199px) {
    .wide-content .wp-caption p.wp-caption-text {  max-width: 726px; margin: 0 auto; }
    .alignright {  max-width: 50vw;  margin-right: calc(50% - 50vw); }
    .alignleft { max-width: 50vw;  margin-left: calc(50% - 50vw); }
    .alignleft p.wp-caption-text {  margin-left: 30px; }
    .alignright p.wp-caption-text {  margin-right: 30px; }
}

@media screen and (max-width: 991px) {
    .wp-caption p.wp-caption-text { font-weight: 400; font-size: 0.875rem; padding: 0.625rem 0 0.875rem; border-bottom: 1px solid rgba(30, 30, 36, 1); }
    .wide-content .wp-caption p.wp-caption-text { max-width: 656px; }
    .alignright { margin-left: 0.625rem; }
    .alignleft { margin-right: 0.625rem; }
    .text-content { padding: 0 20px; }
    .text-content p { font-size: 1rem; line-height: 1.5rem; margin-bottom: 1.5rem; }
    .text-content h3 { font-size: 1.25rem; margin-bottom: 1.5rem; margin-top: 1.5rem; }
}

@media screen and (max-width: 767px) {
    .wide-content .wp-caption p.wp-caption-text { max-width: 476px; }
    .alignleft, .alignright { float: none; display: block; margin: 0.25rem auto 1.5rem; max-width: 100%; }
    .text-content { padding: 0 20px; }
}

@media screen and (max-width: 576px) {
    .wide-content .wp-caption p.wp-caption-text {  max-width: calc(100% - 64px); }
    .alignright { max-width: 45vw; }
    .alignleft { max-width: 45vw; }
    .text-content { padding: 0 20px; }
}