/**
 * STYLE-LOGO-CONTAINER.CSS
 * Styles the logo container and logo animations:
 * - Defines layout and positioning for the logo container
 * - Implements animations for logo interactions (roll-in, rotation, jump)
 * - Configures transitions and keyframes for smooth animations
 * - Applies visual effects like drop shadows to logo elements
 */

/* Container for logo with layout styles.
   Centers the logo (#logo-graphic) and applies padding/margin for layout purposes.
   No animation is triggered directly; it serves as the parent container for the logo. */
   .logo-container-div {
    height: min(80px, 20vw);  /* Set a minimum height of 80px or 20vw, whichever is larger */
    position: relative;
    margin-bottom: 30px;
    padding: 20px 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

/* Logo image styling with a white drop shadow.
   Ensures the logo fits within the container and prevents it from being too wide on small screens.
   This static style is applied to #logo-graphic by default and is not tied to any animation or JavaScript trigger. */
.logoimage-white-shadow {
    height: 100%;
    width: auto;
    max-width: 45%;  /* Prevent logos from being too wide on small screens */
    filter: drop-shadow(-4px -4px 5px #ffffff);
    object-fit: contain;
}

/* Logo graphic styling with a transition for transform changes.
   Used for the drag return animation in main.js when the mouseup event detects a drag (distance >= 5px).
   The transition is temporarily overridden during dragging by the mousemove event listener in main.js, then reset for the return animation. */
#logo-graphic {
    transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Keyframes for a single 360-degree rotation.
   This animation is used by the .rotating class and is triggered on a simple click (no drag) in main.js when the distance moved is less than 5px. */
@keyframes rotateOnce {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Class to apply the rotateOnce animation.
   When added to #logo-graphic, it triggers a single 360-degree rotation over 1 second.
   This is activated by the mouseup event listener in main.js for a simple click (distance < 5px)
   and is removed via an animation event listener to reset the logo's state. */
.rotating {
    animation: rotateOnce 1s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Keyframes for a roll-in animation.
   Animates an element rolling in from the left with a rotation.
   Although defined here, this utility animation is not currently triggered by any JavaScript function in main.js or elsewhere in the project. */
@keyframes rollIn {
    from {
        opacity: 0;
        transform: translateX(-100%) rotate(-120deg);
    }
    to {
        opacity: 1;
        transform: translateX(0) rotate(0deg);
    }
}

/* Class to apply the rollIn animation. This is for both logo and text on page load*/
.roll-in {
    animation: rollIn 1s forwards;
}

/* Keyframes for a bouncing jump animation.
   Moves an element vertically to create a bounce effect, typically used for logo text. */
@keyframes jump {
    0% {
        transform: translateY(0);
    }
    30% {
        transform: translateY(-30px);
    }
    50% {
        transform: translateY(5px);
    }
    70% {
        transform: translateY(-10px);
    }
    100% {
        transform: translateY(0);
    }
}

/* Class to apply the jump animation.
   When the .jump class is added to an element, it triggers the bounce effect.
   This animation is defined for potential use but is not currently triggered by any JavaScript function. */
.jump {
    animation: jump 0.6s ease-out;
}