/* ==========================================================================
   CHARACTERS — Desktop (1280px – 1920px)
   Design reference: 1920x3258 total (922 hero + 1996 main + 340 footer).
   Same scaling scheme as the homepage: hero_characters follows the real
   viewport (100vh, white), the main screen below is a fixed rem height
   (black), footer is the shared component.
   ========================================================================== */

.characters-hero {
    position: relative;
    width: 100%;
    height: 100vh;
    background-color: #ffffff;
    overflow: hidden;
}

/* Mobile-only hero elements (see characters.mobile.css) — hidden here
   so they don't leak through unstyled. */
.characters-hero-mobile__bg,
.characters-hero-mobile__wordmark,
.characters-main-mobile__cases,
.characters-main-mobile__section-label,
.characters-main-mobile__heading,
.characters-main-mobile__subheading {
    display: none;
}

.characters-main {
    position: relative;
    width: 100%;
    height: 199.6rem;
    background-color: #000000;
    overflow: hidden;
}

/* Hero background — characters stand on the right of the source photo
   with lots of empty space on the left, so anchor cover-cropping to the
   right edge: on wider/squarer screens, any extra gets cropped from the
   left instead of cutting the characters off on the right. */
.characters-hero__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: right center;
    z-index: 0;
    opacity: 0;
    transform-origin: right top;
    animation: characters-hero-bg-reveal 6.8s both;
    animation-delay: 0.2s;
}

@keyframes characters-hero-bg-reveal {
    0%   { opacity: 0; scale: 1; animation-timing-function: ease; }
    25%  { opacity: 1; scale: 1; animation-timing-function: ease-out; }
    100% { opacity: 1; scale: 1.08; }
}

/* Top-left nav row. */
.characters-hero__nav {
    position: absolute;
    top: 5rem;
    font-family: 'Atyp Display', sans-serif;
    font-weight: 400;
    font-size: 4rem;
    line-height: 4rem;
    letter-spacing: -0.08em;
    color: #000000;
    opacity: 1;
    z-index: 1;
    transition: opacity 0.2s ease;
}

.characters-hero__nav:hover {
    opacity: 0.5;
}

.characters-hero__nav--homepage {
    left: 5rem;
    text-transform: uppercase;
}

.characters-hero__nav--events { left: 28.5rem; }

.characters-hero__nav--merch {
    left: 43.2rem;
    opacity: 0.2;
    text-decoration: line-through;
    cursor: default;
    pointer-events: none;
}

.characters-hero__nav--info { left: 57.8rem; }

/* Ukrainian positions */
html[data-lang="uk"] .characters-hero__nav--events { left: 26.5rem; }
html[data-lang="uk"] .characters-hero__nav--merch { left: 38.9rem; }
html[data-lang="uk"] .characters-hero__nav--info { left: 52.5rem; }

/* Japanese positions */
html[data-lang="ja"] .characters-hero__nav--events { left: 20.3rem; }
html[data-lang="ja"] .characters-hero__nav--merch { left: 39.4rem; }
html[data-lang="ja"] .characters-hero__nav--info { left: 54.8rem; }

/* Hero heading — "If you dream / - create it". Two opacity parts. */
.characters-hero__heading {
    position: absolute;
    left: 16rem;
    top: 34rem;
    font-family: 'Atyp Display', sans-serif;
    font-weight: 600;
    font-size: 10rem;
    line-height: 9rem;
    letter-spacing: -0.08em;
    color: #000000;
    white-space: pre;
    z-index: 1;
}

.characters-hero__heading-part--half {
    display: block;
    opacity: 0.5;
}

.characters-hero__heading-part--full {
    display: block;
    opacity: 1;
}

/* Bottom-left small logo. */
.characters-hero__bottom-logo {
    position: absolute;
    left: 5rem;
    bottom: 2rem;
    width: 21.5rem;
    height: 3rem;
    z-index: 1;
}

/* Hero intro paragraph. */
.characters-hero__intro {
    position: absolute;
    left: 16rem;
    top: 55rem;
    font-family: 'Atyp Display', sans-serif;
    font-weight: 400;
    font-size: 3rem;
    line-height: 3rem;
    letter-spacing: -0.05em;
    color: #000000;
    opacity: 0.5;
    white-space: pre-line;
    z-index: 1;
}

/* Character cards — 2 are finished art, the other 4 are placeholders
   for now, same size/grid either way. */
.characters-main__card {
    position: absolute;
    width: 52.6rem;
    z-index: 1;
}

.characters-main__card img {
    display: block;
    width: 100%;
    height: 100%;
}

.characters-main__card--1 { top: 10rem; left: 10rem; height: 65.2rem; }
.characters-main__card--2 { top: 5.1rem; left: 69.7rem; height: 70.1rem; }
.characters-main__card--3 { top: 10rem; left: 129.4rem; height: 65.2rem; }
.characters-main__card--4 { top: 95rem; left: 10rem; height: 65.2rem; }
.characters-main__card--5 { top: 95rem; left: 69.7rem; height: 65.2rem; }
.characters-main__card--6 { top: 95rem; left: 129.4rem; height: 65.2rem; }

/* Name/date label under each card — all 6 line up at the same two rows
   since every card's bottom edge lands on the same y regardless of its
   own height (card 2 is taller but starts higher, same bottom edge). */
.characters-main__text {
    position: absolute;
    width: 52.6rem;
    height: 4rem;
    z-index: 1;
}

.characters-main__text img {
    display: block;
    width: 100%;
    height: 100%;
}

.characters-main__text--1 { top: 77.2rem; left: 10rem; }
.characters-main__text--2 { top: 77.2rem; left: 69.7rem; }
.characters-main__text--3 { top: 77.2rem; left: 129.4rem; }
.characters-main__text--4 { top: 162.2rem; left: 10rem; }
.characters-main__text--5 { top: 162.2rem; left: 69.7rem; }
.characters-main__text--6 { top: 162.2rem; left: 129.4rem; }

/* YouTube Music / Spotify icon pair under each label. Active for
   characters 1 & 2 (real playlists), static placeholders for 3-6. */
.characters-main__music-icon {
    position: absolute;
    width: 4.8rem;
    height: 4.8rem;
    z-index: 1;
    transition: transform 0.2s ease;
}

.characters-main__music-icon img {
    display: block;
    width: 100%;
    height: 100%;
}

.characters-main__music-icon:hover {
    transform: translateY(-0.5rem) scale(1.08);
}

.characters-main__music-icon--disabled {
    cursor: default;
    pointer-events: none;
}

.characters-main__music-icon--yt-1 { top: 83.2rem; left: 10rem; }
.characters-main__music-icon--sp-1 { top: 83.2rem; left: 16rem; }
.characters-main__music-icon--yt-2 { top: 83.2rem; left: 69.7rem; }
.characters-main__music-icon--sp-2 { top: 83.2rem; left: 75.7rem; }
.characters-main__music-icon--yt-3 { top: 83.2rem; left: 129.4rem; }
.characters-main__music-icon--sp-3 { top: 83.2rem; left: 135.4rem; }
.characters-main__music-icon--yt-4 { top: 168.2rem; left: 10rem; }
.characters-main__music-icon--sp-4 { top: 168.2rem; left: 16rem; }
.characters-main__music-icon--yt-5 { top: 168.2rem; left: 69.7rem; }
.characters-main__music-icon--sp-5 { top: 168.2rem; left: 75.7rem; }
.characters-main__music-icon--yt-6 { top: 168.2rem; left: 129.4rem; }
.characters-main__music-icon--sp-6 { top: 168.2rem; left: 135.4rem; }