/* ==========================================================================
   HERO — Mobile (360px – 440px)
   Design reference: 393x768. Desktop-only hero elements are hidden below;
   mobile's own elements are added above them as the design comes in.
   ========================================================================== */

.hero__bg,
.hero__lines,
.hero__circle,
.hero__text-link,
.hero__social-icon,
.hero__rights,
.hero__bottom-logo {
    display: none;
}

/* .hero is height:100vh (not a fixed 76.8rem matching the 768 mockup)
   so it always fills the real device viewport — taller phones just get
   more black space below the background image, which stays pinned at
   its own natural size instead of stretching to fill it. */
.hero {
    position: relative;
    width: 100%;
    height: 100vh;
    background-color: #000000;
    overflow: hidden;
}

/* Width tracks the viewport 1:1 within the 360-440 clamp range (39.3rem
   works out to exactly 100vw at both ends — see the clamp formula in
   global.css), height:auto keeps it proportional instead of stretching
   vertically when .hero itself is taller than the image. */
.hero-mobile__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 39.3rem;
    height: auto;
    max-width: none;
    z-index: 0;
}

.hero-mobile__wordmark {
    position: absolute;
    left: 2rem;
    top: 2rem;
    width: 15.1rem;
    height: 7rem;
    z-index: 1;
}

.hero-mobile__logo {
    position: absolute;
    left: 50%;
    bottom: 2rem;
    width: 35.3rem;
    height: 8.2rem;
    transform: translateX(-50%);
    max-width: none;
    z-index: 1;
}

/* Infinite ribbons — each image is far wider than the viewport
   (82.6rem/85.8rem vs a ~36-44rem screen), so two copies back-to-back
   plus a translateX(-50%) loop (half of the track's own width = one
   copy's width) is enough for a seamless, gap-free scroll. */
.hero-mobile__marquee {
    position: absolute;
    left: 0;
    width: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
}

.hero-mobile__marquee-track {
    display: flex;
    width: max-content;
}

.hero-mobile__marquee-track img {
    display: block;
    height: 1.1rem;
    width: auto;
    max-width: none;
    flex-shrink: 0;
}

/* Anchored to the SAME edge (bottom) as .hero-mobile__logo, in the
   same rem units, instead of top — that's what keeps a fixed gap
   above the logo as the viewport widens. Anchoring one from the top
   and the other from the bottom let the gap drift apart, since
   .hero's own height (100vh, real device pixels) doesn't scale in
   lockstep with the width-driven rem scale. */
.hero-mobile__marquee--1 { bottom: 14.4rem; }
.hero-mobile__marquee--2 { bottom: 13rem; }

.hero-mobile__marquee--1 .hero-mobile__marquee-track {
    animation: hero-marquee-ltr 15s linear infinite;
}

.hero-mobile__marquee--2 .hero-mobile__marquee-track {
    animation: hero-marquee-rtl 15.5s linear infinite;
}

@keyframes hero-marquee-ltr {
    from { transform: translateX(-50%); }
    to   { transform: translateX(0%); }
}

@keyframes hero-marquee-rtl {
    from { transform: translateX(0%); }
    to   { transform: translateX(-50%); }
}

/* "Under development" popup — slides in from off-screen left on load
   (.is-shown added by js/main_screen.js), slides back out the same way
   on close. The close button hides instantly (no transition of its
   own) and just rides along with the platform's slide-out. */
.popup-mobile {
    position: absolute;
    left: 0;
    bottom: 19.7rem;
    width: 37.3rem;
    height: 19.6rem;
    z-index: 50;
    transform: translateX(-40rem);
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.popup-mobile.is-shown {
    transform: translateX(0);
}

.popup-mobile__bg {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    z-index: 0;
}

.popup-mobile__title {
    position: absolute;
    left: 2rem;
    top: 9.9rem;
    margin: 0;
    font-family: 'Atyp Display', sans-serif;
    font-weight: 600;
    font-size: 2.5rem;
    line-height: 2rem;
    letter-spacing: -0.08em;
    color: #ffffff;
    opacity: 1;
    white-space: nowrap;
    z-index: 1;
}

.popup-mobile__text {
    position: absolute;
    left: 2rem;
    top: 12.9rem;
    margin: 0;
    font-family: 'Atyp Display', sans-serif;
    font-weight: 400;
    font-size: 1.5rem;
    line-height: 1.5rem;
    letter-spacing: -0.09em;
    color: #ffffff;
    opacity: 0.7;
    white-space: pre-line;
    z-index: 1;
}

.popup-mobile__text-brand {
    font-weight: 600;
}

.popup-mobile__apology {
    position: absolute;
    left: 2rem;
    top: 15.9rem;
    margin: 0;
    font-family: 'Atyp Display', sans-serif;
    font-weight: 600;
    font-size: 1.5rem;
    line-height: 1.5rem;
    letter-spacing: -0.09em;
    color: #ffffff;
    opacity: 0.7;
    white-space: nowrap;
    z-index: 1;
}

.popup-mobile__close {
    position: absolute;
    right: 1rem;
    top: 1rem;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 0;
    background: transparent;
    z-index: 2;
    cursor: pointer;
}

.popup-mobile__close img {
    display: block;
    width: 100%;
    height: 100%;
}

.popup-mobile__close.is-hidden {
    display: none;
}