/* Hide sidebar on 404 page */
body:has(#error_404) .sidebar {
    display: none !important;
}

#error_404 {
    width: 100%;
    margin: 0;
    text-align: center;
    height: 100vh;
    min-height: 910px;
    font-family: 'Chillax Variable', sans-serif;
    position: relative;
    overflow: hidden;
}


.page_pane {
    position: relative;
    background: #D9F2FF;
    width: 100%;
    height: 100%;
    overflow: hidden;

    h1 {
        font-size: 14.0625rem;
        /* 225px - matches Figma */
        margin: 0;
        padding: 0;
        font-weight: 500;
        position: absolute;
        top: 147px;
        /* From Figma: top-[147px] with translate-y-[-50%] */
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 10;
        color: #384d87;
        line-height: 1;
        text-align: center;
    }

    h2 {
        margin: 0;
        padding: 0;
        font-weight: 500;
        position: absolute;
        top: 265.5px;
        /* From Figma: top-[265.5px] with translate-y-[-50%] */
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 10;
        color: #384d87;
        font-size: 2.5rem;
        /* 40px - matches Figma */
        text-align: center;
    }

    h2.sorry {
        margin: 0;
        padding: 0;
        position: absolute;
        top: 850px;
        /* From Figma: top-[744.5px] with translate-y-[-50%] */
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 10;
        color: #384d87;
        font-size: 2.5rem;
        /* 40px - matches Figma */
        text-align: center;
    }
}

/* Waves Container */
.waves-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

.wave {
    position: absolute;
    left: 0;
    width: 200%;
    transform-origin: center bottom;
}

.wave svg {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
}

.wave1 {
    top: 310px;
    height: 660px;
    animation: wave-animation 10s linear infinite alternate;
    opacity: 1;
    z-index: 4;
}

.wave2 {
    top: 300px;
    height: 453px;
    animation: wave-animation 8s linear infinite alternate;
    opacity: 0.85;
}

.wave3 {
    top: 280px;
    height: calc(100vh - 524px);
    min-height: 333px;
    animation: wave-animation 12s linear infinite alternate;
    opacity: 0.7;
}

.overlay {
    top: 310px;
    height: 660px;
    animation: wave-animation 10s linear infinite alternate;
    opacity: 0.6;
    z-index: 4;
}

@keyframes wave-animation {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Fishing Scene Container */
.fishing-scene {
    position: absolute;
    top: 315px;
    /* From Figma: top-[427px] */
    left: 50%;
    transform: translateX(-50%);
    animation: scene-bob 3s ease-in-out infinite;
}

.rod-arms {
    position: absolute;
    top: 315px;
    /* From Figma: top-[427px] */
    left: 61.1%;
    transform: translateX(-50%);
    animation: scene-bob 3s ease-in-out infinite;
    z-index: 5;
}

/* Boat (complete SVG with boat, rod, person, and bobbers) */
.boat-container-figma {
    position: relative;
    width: 373px;
    height: 374px;
}

.arms {
    position: absolute;
    top: 158px;
    right: 115px;
    width: 373px;
    height: 374px;
}

.rod {
    position: absolute;
    top: 92px;
    right: 190px;
    width: 373px;
    height: 374px;
}

.boat-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.rod-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

@keyframes scene-bob {

    0%, 100% { transform: translateX(-50%) translateY(0) rotate(0deg); }

    25% { transform: translateX(-50%) translateY(-8px) rotate(-1deg); }

    50% { transform: translateX(-50%) translateY(-5px) rotate(0deg); }

    75% { transform: translateX(-50%) translateY(-8px) rotate(1deg); }
}

/* Clouds */
.clouds-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 35%;
    z-index: 1;
    pointer-events: none;
}

.cloud {
    position: absolute;
    opacity: 0.9;
    animation: cloud-drift ease-in-out infinite;
}

.cloud-1 {
    left: -135px;
    top: 80px;
    width: 433px;
    height: 210px;
    transform: rotate(180deg) scaleY(-1);
    animation-duration: 18s;
}

.cloud-2 {
    left: -71px;
    top: 120px;
    width: 407px;
    height: 179px;
    transform: rotate(180deg) scaleY(-1);
    animation-duration: 22s;
}

.cloud-3 {
    right: -71px;
    top: 20px;
    width: 407px;
    height: 184px;
    animation-duration: 18s;
}

.cloud-4 {
    right: -118px;
    top: 40px;
    width: 407px;
    height: 184px;
    animation-duration: 22s;
}

@keyframes cloud-drift {
  0%   { transform: translateX(0) translateY(0) scale(1); }
  50%  { transform: translateX(20px) translateY(-5px) scale(1.01); }
  100% { transform: translateX(0) translateY(0) scale(1); }
}

/* empty-feed style */
#no-posts {
    background-image: url(../img/no-post-bg.png);
    width: 87.4%;
    background-position: center;
    height: 100vh;
    background-repeat: no-repeat;
    background-size: cover;
    margin-left: 15rem;
    margin-top: 0;
    overflow: hidden;

    h1 {
        color: #0a0f65;
        margin-left: 14rem;
        text-wrap: nowrap;
        font-family: 'Chillax Variable';
        margin-top: 20rem;
    }
}

.wave3 { position: absolute; z-index: 0; }
.wave2 { position: absolute; z-index: 1; }
.wave1 { position: absolute; z-index: 3; }
.overlay { position: absolute; z-index: 6; }

.boat-container-figma { position: relative; z-index: 2; }
.rod { position: absolute; z-index: 4; }
.arms { position: absolute; z-index: 5; }