/**********************
 * Gold-Screen – digitale Poster-Wall (2x2)
 **/
@font-face {
    font-family: 'Manrope';
    src: url('../corporate-design/font/Manrope-Regular.ttf');
    font-weight: 400;
    font-display: fallback;
}

@font-face {
    font-family: 'Manrope';
    src: url('../corporate-design/font/Manrope-Bold.ttf');
    font-weight: 700;
    font-display: fallback;
}

:root {
    --bg: #0b0b0b;
    --panel: #151515;
    --line: #262626;
    --text: #f2f2f2;
    --diamond: #3aa6dd;
    --gold: #d4b445;
    --fade: 1800ms;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    cursor: none !important;
    user-select: none;
    -webkit-user-select: none;
    pointer-events: none;
}

html,
body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: var(--bg);
    color: var(--text);
    font-family: 'Manrope', 'Segoe UI', sans-serif;
}

#wall {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 6px;
    background: var(--line);
}

.tile {
    position: relative;
    overflow: hidden;
    background: var(--bg);
}

.layer {
    position: absolute;
    inset: 0;
    opacity: 0;
    overflow: hidden;
    transition: opacity var(--fade) ease-in-out;
}

.layer.in {
    opacity: 1;
}

/**********************
 * Poster (leichter Ken-Burns-Effekt)
 **/
.poster-bg {
    position: absolute;
    inset: -5%;
    width: 110%;
    height: 110%;
    object-fit: cover;
    filter: blur(36px) brightness(0.4);
}

.poster-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transform-origin: var(--ox, 50%) var(--oy, 50%);
    animation: ken-burns var(--life, 30s) linear forwards;
}

.poster-img.cover {
    object-fit: cover;
}

@keyframes ken-burns {
    from {
        transform: scale(1) translate(0, 0);
    }

    to {
        transform: scale(var(--zoom, 1.08)) translate(var(--tx, 0), var(--ty, 0));
    }
}

/**********************
 * Branding-Fallback
 **/
.brand {
    --accent: var(--gold);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: radial-gradient(ellipse at 50% 40%, #1a1a1a 0%, #0e0e0e 70%);
}

.brand.diamond {
    --accent: var(--diamond);
}

.brand::before {
    content: '';
    position: absolute;
    inset: -20%;
    background: radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--accent) 22%, transparent) 0%, transparent 45%);
    animation: glow-drift var(--life, 30s) ease-in-out forwards;
}

@keyframes glow-drift {
    from {
        transform: translate(0, 0);
    }

    to {
        transform: translate(30%, 24%);
    }
}

.brand-card {
    position: relative;
    width: 52%;
    height: 44%;
    padding: 3.2vh 3vw;
    border-radius: 2vh;
    background: #1b1e21;
    border: 1px solid #2c3135;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: card-zoom var(--life, 30s) ease-in-out forwards;
}

@keyframes card-zoom {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.08);
    }
}

.brand-card img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.brand-card[data-tone="invert"] img {
    filter: brightness(0) invert(1);
}

.brand-tag {
    position: relative;
    margin-top: 5vh;
    font-weight: 400;
    font-size: 3vh;
    letter-spacing: 1vh;
    text-transform: uppercase;
    color: var(--accent);
}

.fallback-name {
    color: var(--text);
    font-weight: 700;
    font-size: 3vh;
    text-align: center;
}