@font-face {
    font-family: 'Cocomat Pro';
    src: url('cocomat-pro-regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Cocomat Pro';
    src: url('cocomat-pro-regular.ttf') format('truetype');
    font-weight: bold;
}

html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    overflow-x: hidden;
    background-color: #5CBCEC;
}

.main-stage {
    width: 1920px;
    height: 7500px;
    overflow: hidden;
    position: relative;
}

.tail {
    width: 1920px;
    height: 1080px;
    display: block;
}

.tail-container {
    position: relative;
    width: 1920px;
    height: 1080px;
}

.notail {
    position: absolute;
    width: 1920px;
    height: 1080px;
    top: -2px;
    left: 0;
    display: block;
    cursor: pointer;
    z-index: 5;
}

.tailtitle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) translateY(-245px);
    z-index: 10;
    color: #092A70;
    font-family: 'Cocomat Pro', sans-serif;


    font-size: 60px;
    font-weight: bold;
    text-align: center;
    margin: 0;
    white-space: nowrap;
    pointer-events: none;
    animation: title-pulse-mediumclose 1s infinite ease-in-out;
}

@keyframes title-pulse-mediumclose {
    0% {
        text-shadow: none;
        filter: none;
    }

    50% {
        text-shadow:
            0 0 8px white,
            0 0 12px white,
            0 0 16px white;
        filter:
            drop-shadow(0 0 8px white) drop-shadow(0 0 12px white);
    }

    100% {
        text-shadow: none;
        filter: none;
    }
}

.tailinstructions {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) translateY(-160px) scale(1);
    /* start normal size */
    z-index: 10;
    color: #092A70;
    font-family: 'Cocomat Pro', sans-serif;
    font-size: 30px;
    font-weight: bold;
    text-align: center;
    margin: 0;
    cursor: pointer;
}

.tailscroll {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) translateY(20px) translateX(-50px) scale(1) rotate(-50deg);
    /* start normal size */
    z-index: 10;
    color: #092A70;
    font-family: 'Questrial', sans-serif;
    font-size: 30px;
    margin: 0;
}

.tailtext {
    text-align: center;
    transform: translateY(-900px) translateX(135px) rotate(20deg);
    z-index: 10;
    font-family: 'Questrial', sans-serif;
    font-weight: bold;
    font-size: 25px;
    color: #092A70;
}

.arrow {
    position: relative;
    margin: 0 auto;
    width: 100px;
    transform: translateY(-680px) translateX(-80px);
}

.arrow .curve {
    border: 2px solid #092A70;
    border-color: transparent transparent transparent #092A70;
    height: 150px;
    width: 150px;
    border-radius: 200px 0 0 0px;
}

.arrow .point {
    position: absolute;
    left: 40px;
    top: 315px;
    transform: translateY(-170px) translateX(-38px) rotate(35deg);
}

.arrow .point:before,
.arrow .point:after {
    border: 1px solid #092A70;
    height: 25px;
    content: "";
    position: absolute;
}

.arrow .point:before {
    top: -11px;
    left: -11px;
    transform: rotate(-74deg);
    -webkit-transform: rotate(-74deg);
    -moz-transform: rotate(-74deg);
    -ms-transform: rotate(-74deg);
}

.arrow .point:after {
    top: -20px;
    left: 5px;
    transform: rotate(12deg);
    -webkit-transform: rotate(12deg);
    -moz-transform: rotate(12deg);
    -ms-transform: rotate(12deg);
}

.bg {
    width: 1920px;
    height: 100%;
    background: linear-gradient(to bottom, #5CBCEC 0%, #092A70 100%);
}

.text1997 {
    position: absolute;
    top: 1260px;
    left: 117px;
    width: 1000px;
    height: 300px;
    z-index: 10;
    font-family: 'Questrial', sans-serif;
    font-size: 30px;
    color: rgba(255, 255, 255, 0.8);
    opacity: 1;
    transition: opacity 0.2s ease;
}


.school {
    width: 1920px;
    height: 1080px;
    display: block;
}

.school1 {
    position: absolute;
    top: 1102.98px;
    left: 1573.11px;
    width: 333.8px;
    height: 164.25px;
    transform: scaleX(-1) rotate(18.41deg);
}

.school2 {
    position: absolute;
    top: 1219.64px;
    left: 1435.44px;
    width: 125.83px;
    height: 61.92px;
    transform: scaleX(-1) rotate(18.41deg);
}

.school3 {
    position: absolute;
    top: 1305.98px;
    left: 1502.2px;
    width: 114.06px;
    height: 56.12px;
    transform: scaleX(-1) rotate(37.52deg);
}

.school4 {
    position: absolute;
    top: 1106.83px;
    left: 1140.04px;
    width: 422.91px;
    height: 208.1px;
    transform: scaleX(-1) rotate(35.35deg);
}

.school5 {
    position: absolute;
    top: 1515.62px;
    left: 264.956px;
    width: 200.88px;
    height: 98.84px;
    transform: scaleX(-1) rotate(18.41deg);
}

.school6 {
    position: absolute;
    top: 1385.51px;
    left: 902.491px;
    width: 114.06px;
    height: 56.12px;
    transform: scaleX(-1) rotate(37.52deg);
}

.school7 {
    position: absolute;
    top: 1514.18px;
    left: 500.772px;
    width: 68.24px;
    height: 33.58px;
    transform: scaleX(-1) rotate(6.61deg);
}

.school8 {
    position: absolute;
    top: 1261.88px;
    left: 715.043px;
    width: 333.8px;
    height: 164.25px;
    transform: scaleX(-1) rotate(18.41deg);
}

.school9 {
    position: absolute;
    top: 1350px;
    left: 1036.46px;
    width: 200.88px;
    height: 98.84px;
    transform: scaleX(-1) rotate(18.41deg);
}

.school10 {
    position: absolute;
    top: 1321.84px;
    left: 1339.79px;
    width: 68.24px;
    height: 33.58px;
    transform: scaleX(-1) rotate(49.73deg);
}

.school11 {
    position: absolute;
    top: 1481.74px;
    left: 976.322px;
    width: 298.01px;
    height: 146.64px;
    transform: scaleX(-1) rotate(4.48deg);
}

.school12 {
    position: absolute;
    top: 1370.38px;
    left: 1210.54px;
    width: 284.18px;
    height: 139.83px;
    transform: scaleX(-1) rotate(43.75deg);
}

.school13 {
    position: absolute;
    top: 1490.83px;
    left: 676.297px;
    width: 125.83px;
    height: 61.92px;
    transform: scaleX(-1) rotate(18.41deg);
}

.school14 {
    position: absolute;
    top: 1629.42px;
    left: 1005.61px;
    width: 200.88px;
    height: 98.84px;
    transform: scaleX(-1) rotate(18.41deg);
}

.school15 {
    position: absolute;
    top: 1284.97px;
    left: 1026.77px;
    width: 68.24px;
    height: 33.58px;
    transform: scaleX(-1) rotate(-4deg);
}

.school16 {
    position: absolute;
    top: 1581.16px;
    left: 1252.99px;
    width: 125.83px;
    height: 61.92px;
    transform: scaleX(-1) rotate(29deg);
}

.school17 {
    position: absolute;
    top: 1651.95px;
    left: 652.777px;
    width: 333.8px;
    height: 164.25px;
    transform: scaleX(-1) rotate(18.41deg);
}

.school18 {
    position: absolute;
    top: 1509.44px;
    left: 442.563px;
    width: 434.48px;
    height: 213.79px;
    transform: scaleX(-1) rotate(18.41deg);
}

.school19 {
    position: absolute;
    top: 1654.68px;
    left: 316.21px;
    width: 114.06px;
    height: 56.12px;
    transform: scaleX(-1) rotate(-13deg);
}

.school20 {
    position: absolute;
    top: 1538.26px;
    left: 840.029px;
    width: 68.24px;
    height: 33.58px;
    transform: scaleX(-1) rotate(2deg);
}

.school21 {
    position: absolute;
    top: 1411.57px;
    left: 594.284px;
    width: 112.55px;
    height: 55.38px;
    transform: scaleX(-1) rotate(38.59deg);
}

.school22 {
    position: absolute;
    top: 1753.08px;
    left: 319.22px;
    width: 200.88px;
    height: 98.84px;
    transform: scaleX(-1) rotate(-4deg);
}

.school23 {
    position: absolute;
    top: 1639.91px;
    left: 145.074px;
    width: 68.24px;
    height: 33.58px;
    transform: scaleX(-1) rotate(23deg);
}

.school24 {
    position: absolute;
    top: 1646.37px;
    left: -8.19144px;
    width: 333.8px;
    height: 164.25px;
    transform: scaleX(-1) rotate(18.41deg);
}

.school25 {
    position: absolute;
    top: 1820.02px;
    left: 151.781px;
    width: 112.55px;
    height: 55.38px;
    transform: scaleX(-1) rotate(10deg);
}

.school26 {
    position: absolute;
    top: 1848.62px;
    left: 10.9872px;
    width: 68.24px;
    height: 33.58px;
    transform: scaleX(-1) rotate(20deg);
}

.baschool {
    width: 1920px;
    height: 3240px;
    display: block;
}

.baschool1 {
    position: absolute;
    top: 2736px;
    left: 139px;
    width: 696px;
    height: 216px;
    transform: scaleX(-1)
}

.baschool2 {
    position: absolute;
    top: 2622px;
    left: 207px;
    width: 696px;
    height: 216px;
    transform: scaleX(-1)
}

.baschool3 {
    position: absolute;
    top: 2801px;
    left: 521px;
    width: 696px;
    height: 216px;
    transform: scaleX(-1)
}

.baschool4 {
    position: absolute;
    top: 2736px;
    left: 865px;
    width: 696px;
    height: 216px;
    transform: scaleX(-1)
}

.baschool5 {
    position: absolute;
    top: 2629px;
    left: 909px;
    width: 696px;
    height: 216px;
    transform: scaleX(-1)
}

.baschool6 {
    position: absolute;
    top: 2544px;
    left: 605px;
    width: 696px;
    height: 216px;
    transform: scaleX(-1)
}

.vaquita1 {
    position: absolute;
    top: 2600px;
    left: 597px;
    width: 612.21px;
    height: 301.24px;
}

/* Baschool Text Styling */
.baschool-text {
    position: absolute;
    top: 2340px;
    left: 117px;
    width: 1000px;
    height: 300px;
    z-index: 10;
    font-family: 'Questrial', sans-serif;
    font-size: 30px;
    color: rgba(255, 255, 255, 0.8);
    opacity: 1;
    transition: opacity 0.2s ease;
    pointer-events: auto;
}


.mama {
    position: absolute;
    top: 3433px;
    left: 112px;
    width: 1059.37px;
    height: 521.27px;
    transform: scaleX(-1)
}

.baby {
    position: absolute;
    top: 3975px;
    left: 703px;
    width: 247.8px;
    height: 121.93px;
    transform: scaleX(-1)
}

.baby-text {
    position: absolute;
    top: 3420px;
    left: 117px;
    width: 1000px;
    height: 300px;
    z-index: 10;
    font-family: 'Questrial', sans-serif;
    font-size: 30px;
    color: rgba(255, 255, 255, 0.8);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    opacity: 1;
    transition: opacity 0.2s ease;
}

.net {
    position: absolute;
    top: 4627px;
    left: 1050px;
    width: 768.27px;
    height: 704.38px;
    transform: rotate(90deg);
    opacity: 0;
    /* Initially hidden */
    scale: 1.5
}

.hook {
    position: absolute;
    top: 4393px;
    left: 1317px;
    width: 687.38px;
    height: 211.66px;
    transform: rotate(-34.7deg) translateY(150px);
    opacity: 0;
    /* Initially hidden */
}

/* --- Net & Hook Loop Animation (Piece 5) --- */

/* Active state triggered by intersection observer */
.piece-net-sequence.animate-active .net {
    opacity: 0.3;
    animation: net-swim 5s infinite cubic-bezier(0.4, 0, 0.2, 1);
}

.piece-net-sequence.animate-active .hook {
    opacity: 0.5;
    animation: hook-catch 5s infinite cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes net-swim {
    0% {
        transform: translateX(-800px) rotate(90deg);
    }

    35% {
        transform: translateX(0) rotate(90deg);
    }

    50% {
        transform: translateX(0) rotate(90deg);
    }

    100% {
        transform: translateX(2000px) rotate(90deg);
    }
}

@keyframes hook-catch {
    0% {
        transform: translate(500px, -500px) rotate(-34.7deg);
        opacity: 0;
    }

    30% {
        transform: translate(500px, -500px) rotate(-34.7deg);
        opacity: 0;
    }

    40% {
        transform: translate(-177px, 150px) rotate(-34.7deg);
        /* Arrive at capture point */
        opacity: 0.5;
    }

    50% {
        transform: translate(-177px, 150px) rotate(-34.7deg);
        /* Wait/Grab */
        opacity: 0.5;
    }

    100% {
        transform: translate(3000px, 150px) rotate(-34.7deg);
        /* Drag away (2000px distance) */
        opacity: 0.5;
    }
}

.text2016 {
    position: absolute;
    top: 4500px;
    left: 117px;
    width: 1000px;
    height: 300px;
    z-index: 10;
    font-family: 'Questrial', sans-serif;
    font-size: 30px;
    color: rgba(255, 255, 255, 0.8);
    opacity: 1;
    transition: opacity 0.2s ease;
}

/* Survivor Section (Piece 6) */
.survivor {
    position: absolute;
    top: 4320px;
    width: 1920px;
    height: 1080px;
}

/* Survivor Text */
.text-survivor {
    position: absolute;
    top: 5580px;
    left: 117px;
    width: 1000px;
    height: 300px;
    z-index: 10;
    font-family: 'Questrial', sans-serif;
    font-size: 30px;
    color: rgba(255, 255, 255, 0.8);
    opacity: 1;
    transition: opacity 0.2s ease;
}

.text-final {
    position: absolute;
    top: 6989px;
    left: 500px;
    width: 900px;
    height: 300px;
    z-index: 10;
    font-family: 'Questrial', sans-serif;
    font-size: 30px;
    text-align: center;
    color: rgba(255, 255, 255, 0.8);
}

.donate-button {
    position: absolute;
    top: 7150px;
    left: 850px;
    width: 200px;
    height: 50px;
    z-index: 10;
    font-family: 'Questrial', sans-serif;
    font-size: 30px;
    color: rgba(255, 255, 255, 0.8);
    background-color: #6DA2E4;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    transition: box-shadow 0.3s ease-in-out;
}

.donate-button:hover {
    box-shadow: 0 0 20px white, 0 0 40px white;
}

.vaquita-final1 {
    position: absolute;
    top: 6700px;
    left: 15px;
    width: 610.94px;
    height: 300.62px;
    z-index: 10;
    transform: rotate(-24.44deg);
}

.vaquita-final2 {
    position: absolute;
    top: 7136px;
    left: 1298px;
    width: 377.72px;
    height: 185.86px;
    transform: rotate(-21.71deg) scaleX(-1) scaleY(-1);
    z-index: 10;
}

.oval-guide-container {
    position: absolute;
    top: 6500px;
    left: -120px;
    width: 1920px;
    height: 1000px;
    z-index: 100;
    pointer-events: none;
    display: none;
}

/* Container matching the guide's position to align coordinate systems */
.final-vaquita-container {
    position: absolute;
    top: 6500px;
    left: -120px;
    width: 1920px;
    height: 1000px;
    z-index: 10;
    pointer-events: none;
    /* Let clicks pass through */
}

.vaquita-final1,
.vaquita-final2 {
    position: absolute;
    top: 0;
    left: 0;
    transform: none;
    offset-path: path('M 1100 139 A 700 400 0 1 1 1100 939 A 700 400 0 1 1 1100 139');
    offset-rotate: auto 0deg;
    animation: swim-oval 20s linear infinite;
}

.vaquita-final1 {
    width: 610.94px;
    height: 300.62px;
    animation-delay: -17s;
}

.vaquita-final2 {
    width: 377.72px;
    height: 185.86px;
    animation-delay: -7s;
}

@keyframes swim-oval {
    from {
        offset-distance: 0%;
    }

    to {
        offset-distance: 100%;
    }
}

/* Scroll to Top Button */
.scroll-top-btn {
    position: absolute;
    top: 7250px;
    left: 950px;
    /* Center of donate button (850 + 100) */
    transform: translateX(800px) translateY(100px);
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 200;
}

.scroll-top-btn img {
    width: 100%;
    height: auto;
    display: block;
}