/* Voxel-style button */
.voxel-button {
    position: relative;
    transform-style: preserve-3d;
    transition: all 0.3s ease;
}

.voxel-button::before {
    content: '';
    position: absolute;
    top: 4px;
    left: 4px;
    right: -4px;
    bottom: -4px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: inherit;
    z-index: -1;
    transition: all 0.3s ease;
}

.voxel-button:hover {
    transform: translate(-2px, -2px);
}

.voxel-button:hover::before {
    top: 6px;
    left: 6px;
    right: -6px;
    bottom: -6px;
}

/* Character card 3D effect */
.character-card {
    perspective: 1000px;
}

.character-card-inner {
    transition: transform 0.6s;
    transform-style: preserve-3d;
    border-radius: 1rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    cursor: pointer;
}

.character-card:hover .character-card-inner {
    transform: rotateY(5deg) rotateX(-5deg);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
}

/* News card hover effect */
.news-card {
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    overflow: hidden;
}

.news-card::before {
    content: '';
    position: absolute;
    top: -100%;
    left: -100%;
    width: 300%;
    height: 300%;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: all 0.6s;
    transform: rotate(45deg);
}

.news-card:hover::before {
    top: -50%;
    left: -50%;
}

/* Carousel slides */
.character-slide {
    flex-shrink: 0;
    width: 100%;
}

.news-slide {
    flex-shrink: 0;
    width: 100%;
}

/* Video carousel specific styles */
#videoCarouselContainer {
    overflow: hidden;
}

#videoCarousel .flex-shrink-0 {
    padding: 0 12px;
}

/* Background patterns */
.pattern-bg {
    background-image: url('data:image/svg+xml,%3Csvg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="none" fill-rule="evenodd"%3E%3Cg fill="%239C92AC" fill-opacity="0.4"%3E%3Cpath d="M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E');
    background-size: 60px 60px;
}

/* Character indicator active frame */
#activeFrame,
#activeFrame2 {
    background-color: rgb(228, 160, 67);
    border-radius: 4px;
    transition: all 0.5s ease-out;
    pointer-events: none;
    position: absolute;
    z-index: 1;
}

#activeFrame.no-transition {
    transition: none !important;
}

/* ビデオカルーセルのトランジション */
#videoCarousel .flex-shrink-0 {
    transition: width 0.3s ease;
}

/* パディングの調整 */
#videoCarousel .flex-shrink-0 > div {
    height: 100%;
}

/* Video indicator active frames */
#videoActiveFrame,
#videoActiveFrame2 {
    background-color: rgb(228, 160, 67);
    border-radius: 4px;
    transition: all 0.5s ease-out;
    pointer-events: none;
    position: absolute;
    z-index: 1;
}

#videoActiveFrame.no-transition,
#videoActiveFrame2.no-transition {
    transition: none !important;
}

/* News indicator active frames */
#newsActiveFrame,
#newsActiveFrame2 {
    background-color: rgb(228, 160, 67);
    border-radius: 4px;
    transition: all 0.5s ease-out;
    pointer-events: none;
    position: absolute;
    z-index: 1;
}

#newsActiveFrame.no-transition,
#newsActiveFrame2.no-transition {
    transition: none !important;
}