/* Character page styles */

/* Consolidated media queries */
@media (min-width: 992px) {
    /* Blur effects for all character pages */
    html.w-mod-js:not(.w-mod-ix) [data-w-id^="23c59e24-3fa0-f58e-32b7-91f7c8cdc00"],
    html.w-mod-js:not(.w-mod-ix) [data-w-id^="c9e97f2f-6dd7-0813-c22e-119722da6e4"],
    html.w-mod-js:not(.w-mod-ix) [data-w-id^="a3fd2430-ca20-2b30-a8aa-050918d0388"],
    html.w-mod-js:not(.w-mod-ix) [data-w-id^="54c4473a-39b8-80e9-fc91-756bd09a987"],
    html.w-mod-js:not(.w-mod-ix) [data-w-id^="3d0fc9b1-8bad-2085-666a-20ba7d441e9"],
    html.w-mod-js:not(.w-mod-ix) [data-w-id^="118cc806-5ad4-ed37-f9cb-d1c6227b43"] {
        filter: blur(5px);
    }

    /* Hide elements for all character pages */
    html.w-mod-js:not(.w-mod-ix) [data-w-id="05210482-556f-5569-1ce0-3e4e9eae45a2"],
    html.w-mod-js:not(.w-mod-ix) [data-w-id="049d32c2-e087-f4c4-2e07-e0a17ebf1d7b"],
    html.w-mod-js:not(.w-mod-ix) [data-w-id="070cb384-dbe1-919e-76b7-f75cca1bd38b"],
    html.w-mod-js:not(.w-mod-ix) [data-w-id="05517c75-9cbc-e847-db19-87c1ad05e565"] {
        display: none;
        opacity: 0;
    }
}

@media (max-width: 991px) {
    /* Transform effects for all character pages */
    html.w-mod-js:not(.w-mod-ix) [data-w-id="8703fc41-a132-8fc5-f554-c47114625b09"] {
        transform: translate3d(-100%, 0, 0) scale3d(1, 1, 1);
    }

    /* Opacity and transform effects for all character pages */
    html.w-mod-js:not(.w-mod-ix) [data-w-id="23c59e24-3fa0-f58e-32b7-91f7c8cdc004"],
    html.w-mod-js:not(.w-mod-ix) [data-w-id="a3fd2430-ca20-2b30-a8aa-050918d0388b"],
    html.w-mod-js:not(.w-mod-ix) [data-w-id="118cc806-5ad4-ed37-f9cb-d1c6227b43bc"] {
        opacity: 0;
        transform: translate3d(-50px, 0, 0) scale3d(1, 1, 1);
    }
}

/* Decorative grid styles */
.w-layout-grid {
    position: fixed;
    padding-left: 10%;
    padding-right: 10%;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(3, 400px);
    grid-template-rows: repeat(3, 330px);
    /* gap: 2rem;
    padding: 4rem; */
    z-index: 1;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.w-layout-grid img {
    width: 100%;
    /* height: 20vh; */
    max-width:250px;
    /* object-fit: contain; */
    opacity: 0.6;
    transition: all 0.3s ease;
    transform: scale(0.95);
    animation: float 6s ease-in-out infinite;
    will-change: transform;
}

.w-layout-grid img:hover {
    opacity: 0.8;
    transform: scale(1);
}

/* Show grid on hover */
.additional_info:hover ~ .w-layout-grid,
.w-layout-grid:hover {
    opacity: 1;
}
.additional_info:active {
    opacity: 1;
}

/* Position images in a more spread out pattern */
.w-layout-grid img:nth-child(1) { 
    grid-column: 1;
    grid-row: 1;
    /* justify-self: start;
    align-self: start; */
    animation-delay: 0s;
}

.w-layout-grid img:nth-child(2) { 
    grid-column: 3;
    grid-row: 1;
    /* justify-self: end;
    align-self: start; */
    animation-delay: 1.2s;
}

.w-layout-grid img:nth-child(3) { 
    grid-column: 2;
    grid-row: 2;
    /* justify-self: center;
    align-self: center; */
    animation-delay: 2.4s;
}

.w-layout-grid img:nth-child(4) { 
    grid-column: 1;
    grid-row: 3;
    /* justify-self: start;
    align-self: end; */
    animation-delay: 3.6s;
}

.w-layout-grid img:nth-child(5) { 
    grid-column: 3;
    grid-row: 3;
    /* justify-self: end;
    align-self: end; */
    animation-delay: 4.8s;
}

/* Floating animation */
@keyframes float {
    0% {
        transform: translate(0, 0) rotate(0deg);
    }
    25% {
        transform: translate(5px, -5px) rotate(1deg);
    }
    50% {
        transform: translate(0, -10px) rotate(0deg);
    }
    75% {
        transform: translate(-5px, -5px) rotate(-1deg);
    }
    100% {
        transform: translate(0, 0) rotate(0deg);
    }
}