/* Homepage Specific Styles */

body.home {
    overflow: hidden;
    /* Prevent scrolling, showing only viewport */
    background-color: var(--color-white);
    margin: 0;
    padding: 0;
}

.home-container {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    /* Hide the extra 20vw */
    position: relative;
    background-color: var(--color-white);
    padding-top: 5px;
    padding-left: 5px;
    box-sizing: border-box;
}

.flowing-content {
    /* Make container wider than viewport to push natural text wrap completely off-screen */
    width: 120vw;
    height: 120vh;
    /* Also extend down slightly to hide bottom gap */
    margin: -5px 0 0 -5px;
    /* Slight offset just in case of microscopic top/left gaps */

    font-family: Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    color: var(--color-white);
    /* -webkit-text-stroke: 1px var(--color-black); */
    /* Optional, let's keep it if user liked it, but maybe solid black is better. Let's make it outlined to match previous. */
    -webkit-text-stroke: 1px var(--color-black);
    line-height: 0.8;
    text-align: left;

    /* Ensure no weird spacing */
    letter-spacing: -0.02em;
    word-spacing: 0.2em;
}


/* 
 * The actual menu items in the stream 
 * They inherit the block line-height/font-size injected via JS
 */
.menu-item-link {
    font-weight: 900;
    /* Bold */
    color: var(--color-charcoal);

    /* Solid red */
    -webkit-text-stroke: 0px;
    /* No outline */
    display: inline;
    margin: 0;
    transition: all 0.3s ease;
    text-decoration: none;
}

.menu-item-link:hover {
    color: var(--color-red);
    /* Inverse on hover for feedback */
}

/* For the very first appearance of words on the first line */
/* .outline-red and .outline-black are defined globally in style.css */

body.home .outline-red {
    color: var(--color-red);
    transition: color 0.3s ease;
}

body.home .flowing-content:has(.menu-item-link:hover) .outline-red {
    color: var(--color-white);
}

.random-graphic {
    height: 0.85em;
    /* Match the visual height of the font */
    width: auto;
    vertical-align: middle;
    display: inline-block;
    /* margin: 0 0.05em; */
    padding: 0.05em 0;
    transform: translateY(-0.08em);
    /* Optical adjustment to sit on baseline */
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    z-index: 1;
}

.random-graphic:hover {
    transform: translateY(-0.08em) scale(2);
    z-index: 10;
}

/* Homepage Ticker Styles */
.ticker-line {
    display: flex !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    width: 120vw;
    /* Match the flowing-content offset width */
    position: relative;
}

/* Pause the scrolling animation on hover */
.ticker-line:hover .ticker-wrapper {
    animation-play-state: paused;
}

.ticker-wrapper {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    animation: ticker-marquee 35s linear infinite;
}

.ticker-item {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    color: var(--color-white);
    -webkit-text-stroke: 1px var(--color-red);
    /* Red outline */
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-block;
}

.ticker-item:hover {
    color: var(--color-red);
    /* Solid red fill on hover */
}

.ticker-separator {
    color: var(--color-white);
    -webkit-text-stroke: 0.5px var(--color-black);
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 300;
    padding: 0 0.5rem;
    user-select: none;
}

@keyframes ticker-marquee {
    0% {
        transform: translate3d(0, 0, 0);
    }

    100% {
        transform: translate3d(-100%, 0, 0);
    }
}