/* style.css */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600&display=swap');

:root {
    --youtube-color: #c4302b;
    --youtube-dark: #8c0000;
    --kick-color: #53fc5e;
    --kick-dark: #007c0c;
    --patreon-color: #f96854;
    --patreon-dark: #a73729;
    --kofi-color: #29abe0;
    --kofi-dark: #0c5a7a;
    --icon-default: #ffffff;
    --font-primary: 'Montserrat', sans-serif;
    --wolv-light-blue: #a9cae4;
    --wolv-dark-blue: #6882a0;
    --wolv-darker-blue: #1d262f;
    --wolv-light-grey: #bdbec3;
    --accent-yellow-light: rgb(255, 238, 0);
    --accent-yellow-dark: rgb(43, 43, 18);
    --primary-dark: #161616;
    --primary-darkish: #242528;
    --primary-med: #6d6f78;
    --text-color: #ffffff;
    --color-white: #ffffff;

    /* Animation properties */
    --d: 2500ms;
    --angle: 90deg;
    --gradX: 100%;
    --gradY: 50%;
    --border-c1: var(--accent-yellow-light);
    --border-c2: rgba(65, 65, 41, 0.3);

}

html {
    background-color: black;
}

body {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    color: white;
    font-family: var(--font-primary);
    position: relative;
    overflow-x: hidden;
}

body::before {
    content: '';
    position: fixed;
    inset: 0;
    background: linear-gradient(to bottom, black, rgb(32, 32, 32));
    z-index: -2;
}

/* Adjust the footer to have the right z-index */
.site-footer {
    position: relative;
    z-index: 3; /* Increased to ensure it's above everything */
    margin-top: auto; /* Helps push to bottom */
    width: 100%;
}

/* Page wrapper for sticky footer */
.page-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    width: 100%;
    position: relative; /* Added to contain absolutely positioned elements */
}

.page-content {
    flex: 1;
    margin-bottom: 0; /* Ensure no extra margin at bottom */
}

/* Logo styling - positioned higher on page */
.logo-image {
    width: 300px;
    height: 400px;
    object-fit: cover;
    display: block;
    margin-left: auto;
    margin-right: auto;
    border-radius: 10px;
    margin-top: 15vh;
    position: relative;
    z-index: 2;
}

/* Banner spanning full width behind logo */
.under-construction-banner {
    position: absolute;
    width: 100%;
    text-align: center;
    font-size: 1.7em;
    background-color: rgba(50, 50, 50, 0.5);
    padding: 15px 0;
    top: 35%;
    z-index: 1;
}

/* Content link styling */
.content-link-container {
    margin-top: 2rem;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    z-index: 2;
    position: relative;
}

.content-link {
    display: inline-flex;
    padding: 2px;
    border-radius: 25px;
    position: relative;
    overflow: hidden;
    text-decoration: none;
    border: none;
}

.content-link span {
    position: relative;
    z-index: 1;
    background-color: var(--primary-dark);
    border-radius: 23px;
    padding: 0 1.5rem;
    height: 46px;
    display: flex;
    align-items: center;
    white-space: nowrap;
    font-size: 1rem;
    color: var(--text-color);
    transition: all 0.3s ease;
}

.content-link:hover span {
    transform: translateY(-0px);
    color: var(--primary-dark);
    background-color: var(--color-white);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

.content-link::after {
    content: "";
    position: absolute;
    width: 400px;
    height: 400px;
    top: 50%;
    left: 50%;
    z-index: 0;
    background: conic-gradient(
        var(--wolv-dark-blue) 0%,
        var(--wolv-light-blue) 20%,
        var(--accent-yellow-light) 40%,
        var(--wolv-light-blue) 60%,
        var(--wolv-dark-blue) 80%,
        var(--wolv-dark-blue) 100%
    );
    animation: border-animation 4s linear infinite;
}

.content-link:hover::after {
    animation-duration: 1s;
}

@keyframes border-animation {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to   { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Social media section at bottom third */
.social-container {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 10vh 0;
    gap: 50px;
}
/* Group layout for left and right icons */
.social-group {
    display: flex;
    gap: 30px;
}

/* Individual social link with hover text */
.social-link {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 50px;
    width: 50px;
    margin: 0 10px;
}

/* Base styling for all social icons */
.social-icon {
    width: auto;
    height: 40px;
    object-fit: contain;
    filter: drop-shadow(0px 2px 5px rgba(0, 0, 0, 0.5));
    transition: filter 0.3s ease;
}

/* Hidden text that appears on hover */
.hover-text {
    opacity: 0;
    position: absolute;
    bottom: -35px;
    white-space: nowrap;
    transition: opacity 0.4s ease, transform 0.4s ease, background-color 0.4s ease;
    transition-delay: 0.1s; /* Small delay for first hover text */
    font-size: 14px;
    pointer-events: none;
    background-color: rgba(20, 20, 20, 0.95);
    color: white;
    padding: 6px 12px;
    border-radius: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    transform: translateY(-5px);
}

.hover-text-secondary {
    opacity: 0;
    position: absolute;
    bottom: -70px;
    white-space: nowrap;
    transition: opacity 0.4s ease, transform 0.4s ease, background-color 0.4s ease;
    transition-delay: 0.25s; /* Longer delay for second hover text */
    font-size: 14px;
    pointer-events: none;
    background-color: #333333;
    color: white;
    padding: 6px 12px;
    border-radius: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    transform: translateY(-5px);
}
/* Show text on hover */
.social-link:hover .hover-text {
    opacity: 1;
    transform: translateY(0);
}

.social-link:hover .hover-text-secondary {
    opacity: 1;
    transform: translateY(0);
}

.social-link-anchor {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: white;
    cursor: pointer;
    height: 100%;
    width: 100%;
}

/* Base icon styling */
.youtube-icon,
.kick-icon,
.patreon-icon,
.kofi-icon {
    fill: var(--icon-default);
    filter: drop-shadow(0px 2px 5px rgba(0, 0, 0, 0.5));
    transition: fill 0.3s ease;
}

/* Brand-specific hover colors for icons */
.social-link.youtube-link:hover .youtube-icon {
    fill: var(--youtube-color);
}

.social-link.kick-link:hover .kick-icon {
    fill: var(--kick-color);
}

.social-link.patreon-link:hover .patreon-icon {
    fill: var(--patreon-color);
}

.social-link.kofi-link:hover .kofi-icon {
    fill: var(--kofi-color);
}

/* Brand-specific hover text styling with 50% opacity backgrounds and matching text colors */
.social-link.youtube-link:hover .hover-text {
    background-color: rgba(140, 0, 0, 0.5); /* --youtube-dark with 50% opacity */
    color: white;
}

.social-link.kick-link:hover .hover-text {
    background-color: rgba(0, 124, 12, 0.5); /* --kick-dark with 50% opacity */
    color: white;
}

.social-link.patreon-link:hover .hover-text {
    background-color: rgba(167, 55, 41, 0.5); /* --patreon-dark with 50% opacity */
    color: white;
}

.social-link.kofi-link:hover .hover-text {
    background-color: rgba(12, 90, 122, 0.5); /* --kofi-dark with 50% opacity */
    color: white;
}

/* Adjust specific colors for the secondary hover text on different platforms if needed */
.social-link.youtube-link:hover .hover-text-secondary {
    background-color: rgba(140, 0, 0, 0.5); /* --youtube-dark with 50% opacity */
    color: white;
}

.social-link.kick-link:hover .hover-text-secondary {
    background-color: rgba(0, 124, 12, 0.5); /* --kick-dark with 50% opacity */
    color: white;
}

.social-link.patreon-link:hover .hover-text-secondary {
    background-color: rgba(167, 55, 41, 0.5); /* --patreon-dark with 50% opacity */
    color: white;
}

.social-link.kofi-link:hover .hover-text-secondary {
    background-color: rgba(12, 90, 122, 0.5); /* --kofi-dark with 50% opacity */
    color: white;
}

/* Gradient overlay for hover effects */
.gradient-overlay {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0;
    opacity: 0;
    z-index: -1;
    transition: height 0.6s ease-out, opacity 0.6s ease-out;
    pointer-events: none; /* Allows clicks to pass through */
    background: linear-gradient(to top, var(--current-color, black) 0%, transparent 100%);
}

/* Active state for the gradient */
.gradient-overlay.active {
    height: 50vh;
    opacity: 0.25;
}

/* Fading out state */
.gradient-overlay.fading {
    height: 50vh;
    opacity: 0;
    transition: opacity 0.5s ease-out;
}

/* Character with speech bubble styling */

.character-container {
    position: absolute;
    width: 100%;
    height: 0;
    
    /* POSITION CONTROLS - ADJUST THESE VALUES */
    bottom: 50px;  /* ↑↓ Increase to move UP, decrease to move DOWN */
    left: 40%;     /* ←→ Increase to move RIGHT, decrease to move LEFT */
    /* Alternative: You can use 'right' instead of 'left' if preferred */
    
    pointer-events: none;
    z-index: 2;
}

.character-image {
    position: absolute;
    bottom: -30px; /* Adjust this value to control how far the legs go under the footer */
    left: 30%; /* Match the container's original left percentage */
    transform: translateX(-50%);
    height: 250px;
    width: auto;
    z-index: 1; /* Places character above regular content but below footer */
}

.speech-bubble {
    position: absolute;
    bottom: 220px; /* Position relative to container */
    left: calc(30% + 40px); /* Position anchored to left side of character */
    background-color: white;
    padding: 10px 15px;
    border-radius: 10px;
    border-bottom-left-radius: 0; /* Make bottom left corner pointed */
    min-width: 0; /* Start with minimal width */
    max-width: 180px; /* Narrow enough to allow wrapping */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    z-index: 2;
    opacity: 0;
    transition: opacity 0.5s ease, width 0.2s ease-out;
    display: inline-block; /* Only take up as much space as needed */
    width: auto; /* Allow width to adapt to content */
}

.speech-bubble-text {
    margin: 0;
    font-weight: 500;
    font-size: 0.9rem;
    color: black;
    text-align: left; /* Left align for typewriter effect */
    min-height: 1.2em; /* Keep consistent height */
    display: block; /* Proper block display */
    word-wrap: break-word; /* Enable word wrapping */
    word-break: break-word; /* Break words when needed */
}

.speech-bubble.fade-in {
    opacity: 0; /* Start from invisible */
    animation: fadeIn 0.5s forwards;
}

.speech-bubble.fade-out {
    animation: fadeOut 0.5s forwards;
}

/* Create the speech bubble pointer */
.speech-bubble::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: -2px;
    width: 15px;
    height: 15px;
    background-color: white;
    transform: rotate(15deg);
    clip-path: polygon(0 0, 100% 0, 0 100%);
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .character-container {
        bottom: 30px; /* Adjust for smaller screens */
    }
    
    .character-image {
        height: 200px;
        left: 30%; /* Keep consistent with larger screens */
    }
    
    .speech-bubble {
        bottom: 160px; /* Adjust for smaller character */
        left: calc(30% + 50px); /* Slightly adjust for smaller character */
        max-width: 180px;
        padding: 8px 12px;
    }
    
    .speech-bubble-text {
        font-size: 0.8rem;
    }
}

/* Loading spinner for updates */
.loading-update {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 0;
}

.loading-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 10px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: var(--kick-color);
    animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}