/* =========================================
   RED ECHO – STARTSEITE
   RESPONSIVE / MOBILE FIRST
========================================= */


/* -----------------------------------------
   1. Variablen
----------------------------------------- */

.hero {
    --fs-hero-title: calc(clamp(3.1rem, 1.3rem + 9vw, 5rem) * var(--scale));
    --fs-hero-button: calc(clamp(1rem, 0.86rem + 0.74vw, 1.55rem) * var(--scale));
    --fs-marquee: calc(clamp(3rem, 2rem + 5vw, 6.5rem) * var(--scale));
}


/* -----------------------------------------
   2. Hero

   Der Hero ist mindestens so hoch wie
   der Bildschirm.

   Bei sehr niedrigen Browserfenstern
   bleibt er trotzdem mindestens 720px hoch.

   Dadurch wird das Design nicht
   zusammengedrückt, sondern die Seite
   wird bei Bedarf scrollbar.
----------------------------------------- */

.hero {
    min-height: max(100vh, 45rem);
    min-height: max(100svh, 45rem);

    padding-bottom: 0;
}


/* -----------------------------------------
   3. Hero-Content
----------------------------------------- */

.hero__content {
    z-index: 6;
}


/* -----------------------------------------
   4. Titel
----------------------------------------- */

.hero__title {
    display: flex;
    flex-direction: column;

    gap: 0;

    margin: 0;
}

.hero__title-line {
    display: block;

    white-space: nowrap;

    font-size: var(--fs-hero-title);
    font-weight: 700;

    line-height: 1.05;
    letter-spacing: -0.045em;
}

.hero__title-line--filled {
    color: var(--color-white);
}

.hero__title-line--outline {
    color: transparent;

    -webkit-text-stroke: 1px var(--color-white);
}


/* -----------------------------------------
   5. Listen-now-Button

   Breite, Höhe und Padding sind in em
   angegeben und wachsen deshalb
   automatisch mit der Schriftgrösse.
----------------------------------------- */

.hero__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 9.7em;
    min-height: 3.1em;

    margin-top: calc(1.5rem * var(--scale));

    padding:
        0.7em
        1.7em;

    border: 2px solid transparent;
    border-radius: 999px;

    background-color: var(--color-white);
    color: var(--color-red);

    font-size: var(--fs-hero-button);
    font-weight: 700;

    text-decoration: none;

    transition:
        transform 180ms ease,
        background-color 180ms ease,
        color 180ms ease,
        border-color 180ms ease;
}

.hero__button:hover,
.hero__button:focus-visible {
    transform: scale(1.03);

    background-color: var(--color-red);
    color: var(--color-white);

    border-color: var(--color-white);
}


/* -----------------------------------------
   6. Musikerinnen – Smartphone

   WICHTIG:
   Das Bild liegt IMMER am unteren Rand
   des Hero-Bereichs.

   Die Höhe bezieht sich auf den Hero
   und nicht direkt auf die Viewport-Höhe.
----------------------------------------- */

.hero__people {
    position: absolute;
    z-index: 2;

    left: 50%;
    bottom: 0;

    width: auto;
    height: 53%;

    max-width: none;
    max-height: none;

    transform: translateX(-50%);

    object-fit: contain;
    object-position: center bottom;

    mix-blend-mode: luminosity;
}


/* -----------------------------------------
   7. Laufband

   "Red Echo" läuft als Outline-Schrift
   endlos am unteren Rand durch.

   Das Band besteht aus zwei gleichen
   Gruppen nebeneinander. Es wandert genau
   um eine Gruppenbreite (-50 %) nach links
   und beginnt dann unsichtbar von vorne.
----------------------------------------- */

.marquee {
    position: absolute;
    z-index: 3;

    left: 0;
    right: 0;
    bottom: clamp(0.6rem, 1.6vw, 1.4rem);

    overflow: hidden;

    pointer-events: none;
}

.marquee__track {
    display: flex;

    width: max-content;

    animation:
        redEchoMarquee
        45s
        linear
        infinite;
}

.marquee__group {
    display: flex;
    flex-shrink: 0;

    gap: 0.5em;

    padding-right: 0.5em;

    font-size: var(--fs-marquee);
}

.marquee__item {
    padding: 0.06em 0;

    color: transparent;

    font-weight: 700;

    line-height: 1;
    letter-spacing: -0.045em;

    white-space: nowrap;

    -webkit-text-stroke: 1px var(--color-white);
}

@keyframes redEchoMarquee {

    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

@media (prefers-reduced-motion: reduce) {

    .marquee__track {
        animation: none;
    }
}


/* -----------------------------------------
   8. Spotify-Player

   Liegt unten links über der Seite und
   bleibt beim Scrollen stehen.

   Geschlossen ist er unsichtbar. Die Klasse
   player--open (gesetzt von js/player.js)
   lässt ihn von unten hereingleiten.
----------------------------------------- */

.player {
    position: fixed;
    z-index: 9;

    left: var(--page-padding);
    bottom: max(0.9rem, env(safe-area-inset-bottom));

    width: min(26rem, calc(100% - 2 * var(--page-padding)));

    padding: 0.5rem;

    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 1.25rem;

    background-color: rgba(23, 10, 12, 0.85);

    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);

    visibility: hidden;

    opacity: 0;

    transform: translateY(1.5rem);

    transition:
        opacity 300ms ease,
        transform 500ms cubic-bezier(0.16, 1, 0.3, 1),
        visibility 0s linear 500ms;
}

.player--open {
    visibility: visible;

    opacity: 1;

    transform: none;

    transition-delay: 0s;
}

.player__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding-left: 0.6rem;
}

.player__link {
    color: var(--color-white);

    font-size: 0.9rem;
    font-weight: 700;

    text-decoration: none;
}

.player__link:hover,
.player__link:focus-visible {
    text-decoration: underline;
}

.player__close {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 2.75rem;
    height: 2.75rem;

    padding: 0;

    border: 0;

    background: transparent;

    color: var(--color-white);

    font-family: inherit;
    font-size: 1rem;

    line-height: 1;

    cursor: pointer;

    transition:
        transform 180ms ease;
}

.player__close:hover,
.player__close:focus-visible {
    transform: scale(1.2);
}


/* 152px ist die kompakte Höhe des Spotify-Players */

.player__frame {
    height: 152px;

    overflow: hidden;

    border-radius: 12px;
}

.player__frame iframe {
    display: block;

    width: 100%;
    height: 100%;

    border: 0;
}

@media (prefers-reduced-motion: reduce) {

    .player {
        transition: none;
    }
}


/* =========================================
   TABLET / IPAD
   ab 700px

   Tablet bleibt wie eine grössere
   Smartphone-Version aufgebaut.
========================================= */

@media (min-width: 700px) {

    /*
       Tablet braucht etwas mehr Höhe,
       weil Navigation, Titel und Bild
       untereinander angeordnet sind.
    */

    .hero {
        min-height: max(100vh, 53rem);
        min-height: max(100svh, 53rem);
    }

    .hero__title-line {
        line-height: 1.02;
    }

    .hero__people {
        height: 58%;
    }
}


/*
   Im Querformat ist weniger Höhe
   vorhanden. Deshalb genügt hier eine
   kleinere Mindesthöhe.
*/

@media (min-width: 700px) and (orientation: landscape) {

    .hero {
        min-height: max(100vh, 42.5rem);
        min-height: max(100svh, 42.5rem);
    }
}


/* =========================================
   DESKTOP
   ab 1100px

   Erst hier verändert sich das Layout:
   Text links, Musikerinnen rechts.
========================================= */

@media (min-width: 1100px) {

    .hero {
        --fs-hero-title: calc(clamp(5.8rem, 1.675rem + 6vw, 7.3rem) * var(--scale));

        min-height: max(100vh, 40rem);
        min-height: max(100svh, 40rem);
    }

    .hero__content {
        width: 44%;
        max-width: 46rem;

        padding-right: 0;
    }

    .hero__title-line {
        line-height: 0.98;
    }

    .hero__button {
        margin-top: calc(3.5rem * var(--scale));
    }

    .hero__people {
        left: auto;
        right: 0;

        height: 90%;

        transform: none;

        object-position: right bottom;
    }
}