@font-face {
    font-family: 'JF Open Huninn';
    src: url('../../fonts/JF-OPENHUNINN-2.1.1.TTF') format('truetype'), 
         url('../../fonts/JF-OPENHUNINN-2.0.1.TTF') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

:root {
    --b36: bold 36px 'JF Open Huninn', 'Noto Serif TC', sans-serif;
    --b30: bold 30px 'JF Open Huninn', 'Noto Serif TC', sans-serif;
    --b24: bold 24px 'JF Open Huninn', 'Noto Serif TC', sans-serif;
    --b22: bold 22px 'JF Open Huninn', 'Noto Serif TC', sans-serif;
    --b20: bold 20px 'JF Open Huninn', 'Noto Serif TC', sans-serif;
    --b18: bold 18px 'JF Open Huninn', 'Noto Serif TC', sans-serif;
    --b16: bold 16px 'JF Open Huninn', 'Noto Serif TC', sans-serif;
    --b14: bold 14px 'JF Open Huninn', 'Noto Serif TC', sans-serif;
    --b12: bold 12px 'JF Open Huninn', 'Noto Serif TC', sans-serif;
    --f36: 36px 'JF Open Huninn', 'Noto Serif TC', sans-serif;
    --f30: 30px 'JF Open Huninn', 'Noto Serif TC', sans-serif;
    --f24: 24px 'JF Open Huninn', 'Noto Serif TC', sans-serif;
    --f22: 22px 'JF Open Huninn', 'Noto Serif TC', sans-serif;
    --f20: 20px 'JF Open Huninn', 'Noto Serif TC', sans-serif;
    --f18: 18px 'JF Open Huninn', 'Noto Serif TC', sans-serif;
    --f16: 16px 'JF Open Huninn', 'Noto Serif TC', sans-serif;
    --f14: 14px 'JF Open Huninn', 'Noto Serif TC', sans-serif;
    --f12: 12px 'JF Open Huninn', 'Noto Serif TC', sans-serif;
}

/*用來測試的框線*/
.bb {
    border: 1px solid red;
}



.sea-page {
    background-image: url('../../images/Sea/底.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    height: 100%;
    font-family: "JF Open Huninn", "Noto Serif TC", serif;
}


.section1-img {
    width: 100%;
    height: auto;
    display: block;
}

.section1-bg {
    position: relative;
/*    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 105%;
    background-image: url('../../images/Sea/Group-108.png');
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;*/
    /*    z-index: 1;*/
}

.section2-img {
    width: 100%;
    height: 100%;
    /*    display: block;*/
}

.section3-bg {
    background-image: url(images/Sea/背景船.png);
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    height: 1500px;
    background-size: auto;
    position: relative;
}

.section-margin {
    margin: 5% 0;
}

.section-padding {
    padding: 0 10%;
}

/*footer 覆蓋*/
#collapseFooter {
    margin-top: -120px;
    z-index: 1;
}

.p-title {
    color: white;
    font-weight: 500;
    font: var(--f24);
    padding-bottom: 10px;
    display: inline-block;
    position: relative;
    text-align: center;
}

    .p-title::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0px;
        width: 100%;
        height: 1.5px;
        background-color: white;
        display: block;
        background-image: linear-gradient(to right, #7696a6 0%, #FFFFFF 100%);
    }

.p-content {
    color: white;
    font-weight: 400;
    font: var(--f18)
}

.ruin-title {
    font: var(--b20);
    line-height: 30px;
    color: white;
}

.ruins-step {
    font: var(--f18);
    line-height: 30px;
    color: white;
}

.ruins-p {
    font: var(--f16);
    line-height: 30px;
    color: white;
    max-height: auto;
}


/*船舵導覽*/
#fixedImageWrapper {
    position: absolute;
    bottom: 190px;
    right: -170px;
    z-index: 999;
    height: 350px;
    width: 430px;
}

    #fixedImageWrapper.fixed-top {
        position: fixed;
        top: 20px;
        right: -170px !important;
        left: auto !important;
    }


.rudder-img {
    width: 80%;
    height: auto;
    display: block;
}

/*船舵連結文字定位*/
.t12l41 {
    top: 12%;
    left: 41%;
}

.t14l20 {
    top: 14%;
    left: 20%;
}

.t30l5 {
    top: 30%;
    left: 5%;
}

.b31l6 {
    bottom: 31%;
    left: 6%;
}

.b13l24 {
    bottom: 13%;
    left: 24%;
}

.b13l45 {
    bottom: 13%;
    left: 45%;
}
/* 連結文字，絕對定位於容器四角 */
.rudder-link {
    position: absolute;
    color: white;
    padding: 4px 6px;
    text-decoration: none;
    border-radius: 4px;
    font: var(--f14);
    user-select: none;
}

    .rudder-link:hover {
        color: black;
    }



/*//// 第一部分 ////*/


.wave {
    width: 100%;
    height: auto;
    display: block;
    margin-top: -15%;
}

/* 新增：內容覆蓋層 */
.content-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    display: flex;
    align-items: center; /* 垂直置中 */
    justify-content: center; /* 水平置中 */
}

.glass {
    position: relative;
}

.img-hover {
    position: relative;
    display: block;
    text-decoration: none;
    width: 100%;
}

    .img-hover::before {
        content: '點我看更多';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(98,149,179, 0.8);
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font: var(--f20);
        font-weight: bold;
        opacity: 0;
        transition: opacity 0.3s ease;
        z-index: 1;
    }

    .img-hover:hover::before {
        opacity: 1;
    }






/*//// 第二部分 ////*/
.bg-bigfish {
    position: absolute;
    right: 0;
}

.bg-bigfish-img {
    max-width: 500px;
}
.bg-smallfish {
    position: absolute;
    left: -5%;
}

.small-dolphin-hover {
    position: absolute;
    display: none;
    top: -37%;
    left: -13%;
    width: 25%;
}

.section2-img-wrapper {
    position: relative;
    display: block;
    text-decoration: none;
}

    .section2-img-wrapper::after {
        content: "點我看更多";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border-radius: 10px;
        background-color: rgba(255, 255, 255, 0.7);
        color: rgba(47, 104, 131, 1);
        display: flex;
        justify-content: center;
        align-items: center;
        font: var(--b18);
        opacity: 0;
        transition: opacity 0.3s ease; /* transition 寫在這裡 */
    }

    .section2-img-wrapper:hover::after {
        opacity: 1; /* 只改變 opacity */
    }

    .section2-img-wrapper:hover .small-dolphin-hover {
        display: block;
    }




/*//// 第三部分 ////*/


/*沈船*/
.ship {
    width: 100%;
}

.ship-text {
    position: absolute;
    text-align: center;
    right: 50%;
    transform: translateX(50%);
}

/*旗幟*/
.flag {
    position: absolute;
    top: 2.8%;
    width: 58%;
    right: 44%;
    transform: translateX(50%);
    cursor: pointer;
}

/*這個旗幟不規則形無法直接用遮罩hover，所以用js直接replace掉*/
.flag-hover {
    position: absolute;
    display: none;
    top: 3.37%;
    width: 58%;
    right: 42%;
    transform: translateX(48%) rotate(-3deg);
    cursor: pointer;
}

/*中間的舵*/
.rudder-group {
    width: 100%;
    height: 100%;
}

/* 左邊組 */
.rudder-left-group {
    position: absolute;
    top: 27%;
    right: 55%;
    width: 36%;
    cursor: pointer;
}

/*左邊舵圖*/
.rudder-mid-left {
    width: 100%;
    animation: spin 5s linear infinite paused;
}

/*左邊字*/
.rudder-mid-left-text {
    position: absolute;
    top: 12.7%;
    right: 21%;
    width: 56%;
    cursor: pointer;
}
/*左邊中心圓圈圖*/
.rudder-mid-left-text-circle {
    position: absolute;
    top: 34%;
    left: 33%;
    width: 33%;
    cursor: pointer;
    background-image: url('../../images/Sea/出水遺物保存與維護圓圈圖.png');
    background-size: contain;
    background-repeat: no-repeat;
    clip-path: circle(50% at center);
    aspect-ratio: 1;
}

    /*左邊中心圓圈圖 hover 效果*/
    .rudder-mid-left-text-circle:hover::after {
        content: "點我看更多";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(255, 255, 255, 0.5);
        color: black;
        display: flex;
        justify-content: center;
        align-items: center;
        font: var(--b16);
        opacity: 0;
        clip-path: circle(50% at center);
        animation: fadeInSlide 2s ease forwards;
        /*        border-radius: 8px;*/
    }

/* 左邊組 hover 旋轉效果 */
.rudder-left-group:hover .rudder-mid-left {
    animation-play-state: running;
}

/* 右邊組 */
.rudder-right-group {
    position: absolute;
    top: 29%;
    right: 15%;
    width: 36%;
    cursor: pointer;
}

.rudder-mid-right {
    width: 100%;
    animation: spin 5s linear infinite paused;
}

.rudder-mid-right-text {
    position: absolute;
    top: 8.2%;
    right: 27%;
    width: 44%;
    cursor: pointer;
}

/* 右邊組 hover 效果 */
.rudder-right-group:hover .rudder-mid-right {
    animation-play-state: running;
}

.rudder-mid-right-text-circle {
    position: absolute;
    top: 34%;
    right: 33%;
    width: 33%;
    cursor: pointer;
    background-image: url('../../images/Sea/沈船遺物介紹圓圈圖.png');
    background-size: contain;
    background-repeat: no-repeat;
    clip-path: circle(50% at center);
    aspect-ratio: 1;
}

    .rudder-mid-right-text-circle:hover::after {
        content: "點我看更多";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(255, 255, 255, 0.5);
        color: black;
        display: flex;
        justify-content: center;
        align-items: center;
        font: var(--b16);
        opacity: 0;
        animation: fadeIn 2s ease forwards;
        border-radius: 8px;
    }

/*舵旋轉動畫*/
@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes fadeInSlide {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}



/*水下考古步驟*/
.under-sea-text {
    position: absolute;
    top: 55%;
    right: 50%;
    transform: translateX(50%);
    z-index: 2;
}

/*考古步驟圖片*/
.archeology-step {
    width: 100%;
    max-width: 250px;
}

/* 輪播圖樣式 */
.underwater-carousel {
    position: relative;
    min-height: 350px;
    /*    margin: 50px 0;*/
}

    .underwater-carousel .carousel-item {
        /*        min-height: 400px;*/
        transition: transform 0.8s ease-in-out;
    }

        .underwater-carousel .carousel-item.active {
            display: block !important;
        }

    /* 輪播指示器樣式 */
    .underwater-carousel .carousel-indicators {
        bottom: -50px;
        margin-bottom: 0;
    }

        .underwater-carousel .carousel-indicators [data-bs-target] {
            width: 15px;
            height: 15px;
            border-radius: 50%;
            border: 2px solid rgba(255, 255, 255, 0.5);
            background: transparent;
            margin: 0 8px;
            transition: all 0.3s ease;
        }

        .underwater-carousel .carousel-indicators .active {
            background: rgba(255, 255, 255, 0.9);
            border-color: white;
            transform: scale(1.2);
        }

    /* 輪播控制按鈕樣式 */
    .underwater-carousel .carousel-control-prev,
    .underwater-carousel .carousel-control-next {
        width: 50px;
        height: 50px;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 50%;
        top: 50%;
        transform: translateY(-50%);
        opacity: 0.7;
        transition: all 0.3s ease;
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.3);
    }

    .underwater-carousel .carousel-control-prev {
        left: -80px;
    }

    .underwater-carousel .carousel-control-next {
        right: -80px;
    }

        .underwater-carousel .carousel-control-prev:hover,
        .underwater-carousel .carousel-control-next:hover {
            background: rgba(255, 255, 255, 0.4);
            opacity: 1;
            transform: translateY(-50%) scale(1.1);
        }

    .underwater-carousel .carousel-control-prev-icon,
    .underwater-carousel .carousel-control-next-icon {
        width: 20px;
        height: 20px;
    }



/*影片按鈕*/
.btn-video-wrapper {
    position: absolute;
    text-align: center;
}

.btn-video {
    background-color: white;
    color: #256f9c;
    border: none;
    border-radius: 25px;
    outline: none;
    padding: 5px 15px;
    font: var(--b16);
}

    .btn-video:hover {
        background-color: #256f9c;
        color: white;
    }




/*海草 & 瓶子*/
.sea-grass {
    width: 100%;
    margin-top: -15%;
}

.sea-bottle {
    position: absolute;
    top: 26%;
    left: 33%;
    width: 35%;
}

.sea-bottle-hover {
    position: absolute;
    top: 26%;
    left: 33%;
    width: 35%;
    display: none;
}

.bottle-text {
    position: absolute;
    text-align: center;
    right: 50%;
    transform: translateX(50%);
    top: 5%;
}


.bottle-text-content {
    font: var(--f22);
    color: white;
}



/*RWD*/

@media(max-width:992px) {
    #collapseFooter {
        margin-top: -30px;
    }

    .bg-bigfish-img {
        max-width: 300px;
    }

    .rudder-wrapper {
        display: none;
    }

    .bg-smallfish{
        display:none;
    }
}

/* 手機版輪播控制按鈕調整 */
@media (max-width: 768px) {
    .underwater-carousel .carousel-control-prev {
        left: -20px;
        width: 40px;
        height: 40px;
    }

    .underwater-carousel .carousel-control-next {
        right: -20px;
        width: 40px;
        height: 40px;
    }

    .underwater-carousel .carousel-control-prev-icon,
    .underwater-carousel .carousel-control-next-icon {
        width: 16px;
        height: 16px;
    }

    .underwater-carousel .carousel-indicators {
        bottom: -30px;
    }

        .underwater-carousel .carousel-indicators [data-bs-target] {
            width: 12px;
            height: 12px;
            margin: 0 5px;
        }


    .underwater-carousel {
        min-height: 190px;
    }

    .p-title {
        font: var(--f16);
    }

    .bottle-text-content {
        font: var(--f16);
    }
}
@media (max-width: 575px){
    .section-padding {
        padding: 0 15%;

    }

    .section1-content {
        margin-top: 5%;
    }
}

@media (max-width: 475px) {
    .ship-text {
        top: -10px;
    }

    .under-sea-text {
        top: 49%;
    }
    .section1-content {
        margin-top: 10%;
    }
}


/* 字體RWD */

@media (max-width:768px) {
    :root {
        --b36: bold 34px 'JF Open Huninn', 'Noto Serif TC', sans-serif;
        --b30: bold 28px 'JF Open Huninn', 'Noto Serif TC', sans-serif;
        --b24: bold 22px 'JF Open Huninn', 'Noto Serif TC', sans-serif;
        --b22: bold 20px 'JF Open Huninn', 'Noto Serif TC', sans-serif;
        --b20: bold 18px 'JF Open Huninn', 'Noto Serif TC', sans-serif;
        --b18: bold 16px 'JF Open Huninn', 'Noto Serif TC', sans-serif;
        --b16: bold 14px 'JF Open Huninn', 'Noto Serif TC', sans-serif;
        --b14: bold 12px 'JF Open Huninn', 'Noto Serif TC', sans-serif;
        --b12: bold 10px 'JF Open Huninn', 'Noto Serif TC', sans-serif;
        --f36: 34px 'JF Open Huninn', 'Noto Serif TC', sans-serif;
        --f30: 28px 'JF Open Huninn', 'Noto Serif TC', sans-serif;
        --f24: 22px 'JF Open Huninn', 'Noto Serif TC', sans-serif;
        --f22: 20px 'JF Open Huninn', 'Noto Serif TC', sans-serif;
        --f20: 18px 'JF Open Huninn', 'Noto Serif TC', sans-serif;
        --f18: 16px 'JF Open Huninn', 'Noto Serif TC', sans-serif;
        --f16: 14px 'JF Open Huninn', 'Noto Serif TC', sans-serif;
        --f14: 12px 'JF Open Huninn', 'Noto Serif TC', sans-serif;
        --f12: 10px 'JF Open Huninn', 'Noto Serif TC', sans-serif;
    }

    .ruins-p {
        line-height: 25px;
    }
}

@media (max-width: 375px) {
    :root {
        --b36: bold 32px 'JF Open Huninn', 'Noto Serif TC', sans-serif;
        --b30: bold 26px 'JF Open Huninn', 'Noto Serif TC', sans-serif;
        --b24: bold 20px 'JF Open Huninn', 'Noto Serif TC', sans-serif;
        --b22: bold 18px 'JF Open Huninn', 'Noto Serif TC', sans-serif;
        --b20: bold 16px 'JF Open Huninn', 'Noto Serif TC', sans-serif;
        --b18: bold 14px 'JF Open Huninn', 'Noto Serif TC', sans-serif;
        --b16: bold 12px 'JF Open Huninn', 'Noto Serif TC', sans-serif;
        --b14: bold 10px 'JF Open Huninn', 'Noto Serif TC', sans-serif;
        --b12: bold 8px 'JF Open Huninn', 'Noto Serif TC', sans-serif;
        --f36: 32px 'JF Open Huninn', 'Noto Serif TC', sans-serif;
        --f30: 26px 'JF Open Huninn', 'Noto Serif TC', sans-serif;
        --f24: 20px 'JF Open Huninn', 'Noto Serif TC', sans-serif;
        --f22: 18px 'JF Open Huninn', 'Noto Serif TC', sans-serif;
        --f20: 16px 'JF Open Huninn', 'Noto Serif TC', sans-serif;
        --f18: 14px 'JF Open Huninn', 'Noto Serif TC', sans-serif;
        --f16: 12px 'JF Open Huninn', 'Noto Serif TC', sans-serif;
        --f14: 10px 'JF Open Huninn', 'Noto Serif TC', sans-serif;
        --f12: 8px 'JF Open Huninn', 'Noto Serif TC', sans-serif;
    }
}