@font-face {
    font-family: "KarlsenRoundBoldItalic";
    src: url("assets/fonts/KarlsenRound-Bolditalic.otf") format("opentype");
    font-display: swap;
}

@font-face {
    font-family: "KarlsenRoundExtraBoldItalic";
    src: url("assets/fonts/KarlsenRound-ExtraBolditalic.otf") format("opentype");
    font-display: swap;
}

:root {
    --artboard-width: 1920;
    --artboard-height: 1080;

    --video-x: 431;
    --video-y: 242;
    --video-width: 1058;
    --video-height: 596;
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    min-height: 100%;
    width: 100%;
}

body {
    background: #f3a4a0;
    font-family: "KarlsenRoundBoldItalic", sans-serif;
    overflow-x: hidden;
}

.landing {
    width: 100vw;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Decorative balls: full-viewport background that scales to the screen edges,
   independent of the contained content artboard. */
.bg-balls {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    z-index: 0;
    pointer-events: none;
}

.bg-balls svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* Portrait-only balls (the desktop set sits at the horizontal extremes and
   gets cropped off-screen in portrait). Hidden until the mobile layout. */
.bg-balls-portrait {
    display: none;
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    z-index: 0;
    pointer-events: none;
}

.bg-balls-portrait svg {
    display: block;
    width: 100%;
    height: 100%;
}

.artboard {
    position: relative;
    width: min(100vw, calc(100vh * (var(--artboard-width) / var(--artboard-height))));
    aspect-ratio: calc(var(--artboard-width) / var(--artboard-height));
    margin: 0 auto;
    background: transparent;
    overflow: hidden;
    z-index: 1;
}

.artboard-gfx {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
    user-select: none;
}

.video-wrap {
    position: absolute;
    left: 24.91%;
    top: 22.45%;
    width: 50.18%;
    height: 55.1%;
    z-index: 3;
    border-radius: 4.91% / 7.95%;
    overflow: hidden;
}

.hero-video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border: 0;
}

/* Sound toggle overlaid on the video (bottom-right of the video region). */
.sound-toggle {
    position: absolute;
    right: 4%;
    bottom: 5%;
    z-index: 6;
    width: 2.6vw;
    height: 2.6vw;
    min-width: 34px;
    min-height: 34px;
    max-width: 52px;
    max-height: 52px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
}

.sound-toggle:hover {
    background: rgba(0, 0, 0, 0.75);
    transform: scale(1.06);
}

.sound-toggle:focus-visible {
    outline: none;
    box-shadow: 0 0 0 0.25vw rgba(255, 255, 255, 0.95), 0 0 0 0.55vw rgba(0, 80, 143, 0.85);
}

.sound-toggle svg {
    width: 58%;
    height: 58%;
    fill: currentColor;
}

.sound-toggle .icon-unmuted {
    display: none;
}

.sound-toggle.is-on .icon-muted {
    display: none;
}

.sound-toggle.is-on .icon-unmuted {
    display: block;
}

.hotspot {
    position: absolute;
    display: block;
    z-index: 4;
    text-decoration: none;
    border-radius: 999px;
    outline: none;
}

.hotspot:focus-visible {
    box-shadow: 0 0 0 0.3vw rgba(255, 255, 255, 0.95), 0 0 0 0.7vw rgba(0, 80, 143, 0.85);
}

/* Right CTA button: Besoek ons TV-gids. */
.hotspot-tv-guide {
    left: 81.7%;
    top: 35.5%;
    width: 16.6%;
    height: 6.2%;
}

/* Left CTA cluster. */
.hotspot-question {
    left: 5.3%;
    top: 63.1%;
    width: 12.4%;
    height: 6.2%;
}

.hotspot-advertise {
    left: 3.2%;
    top: 70.7%;
    width: 18.7%;
    height: 6.3%;
}

.hotspot-proposal {
    left: 1.5%;
    top: 78.3%;
    width: 23.8%;
    height: 6.3%;
}

/* Social icons row. */
.hotspot-facebook {
    left: 45.0%;
    top: 83.5%;
    width: 2.6%;
    height: 4.5%;
    border-radius: 50%;
}

.hotspot-instagram {
    left: 48.7%;
    top: 83.5%;
    width: 2.6%;
    height: 4.5%;
    border-radius: 50%;
}

.hotspot-tiktok {
    left: 52.4%;
    top: 83.5%;
    width: 2.6%;
    height: 4.5%;
    border-radius: 50%;
}

/* ---------- Mobile / portrait layout ----------
   The desktop artwork is one fixed 16:9 SVG. In portrait that band becomes
   tiny, so below 1:1 we hide the baked artwork and reflow real HTML elements:
   logo + "Wat is op VIA?" above the video, the rest below it. The video stays
   a single element (no double download); logo and social icons are cropped
   straight out of the same SVG so they stay pixel-accurate and on-brand. */
.m-top,
.m-bottom {
    display: none;
}

@media (max-aspect-ratio: 1 / 1) {
    .landing {
        align-items: flex-start;
    }

    .bg-balls {
        display: none;
    }

    .bg-balls-portrait {
        display: block;
    }

    .artboard {
        width: 100%;
        max-width: 520px;
        height: 100dvh;
        aspect-ratio: auto;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-evenly;
        gap: clamp(6px, 1.6dvh, 18px);
        padding: clamp(8px, 2.2dvh, 22px) 7vw;
    }

    .artboard-gfx,
    .hotspot {
        display: none;
    }

    .hero-video {
        position: static;
        transform: none;
        width: 100%;
        height: auto;
        max-height: 34dvh;
        aspect-ratio: 1058 / 596;
        object-fit: cover;
        border-radius: 16px;
    }

    .video-wrap {
        position: relative;
        left: auto;
        top: auto;
        width: 100%;
        height: auto;
        max-height: 34dvh;
        border-radius: 16px;
        display: flex;
    }

    .m-top,
    .m-bottom {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: clamp(5px, 1.4dvh, 16px);
        width: 100%;
    }

    .m-logo {
        position: relative;
        overflow: hidden;
        width: 52%;
        max-width: 260px;
        max-height: 9dvh;
        aspect-ratio: 2 / 1;
    }

    .m-logo img {
        position: absolute;
        left: -190%;
        top: -10%;
        width: 480%;
        height: auto;
        max-width: none;
    }

    .m-heading {
        margin: 0;
        font-family: "KarlsenRoundExtraBoldItalic", sans-serif;
        font-size: clamp(18px, 3.4dvh, 32px);
        color: #1a1a1a;
        text-align: center;
    }

    .m-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        max-width: 272px;
        padding: clamp(6px, 1.3dvh, 12px) 4.8vw;
        border-radius: 999px;
        font-family: "KarlsenRoundBoldItalic", sans-serif;
        font-size: clamp(13px, 2dvh, 17px);
        color: #fff;
        text-align: center;
        text-decoration: none;
    }

    .m-btn:focus-visible {
        outline: 3px solid rgba(0, 80, 143, 0.85);
        outline-offset: 3px;
    }

    .m-btn--navy {
        background: #00508f;
    }

    .m-btn--yellow {
        background: #ffc20e;
    }

    .m-btn--red {
        background: #ed1b2f;
    }

    .m-btn--blue {
        background: #0095da;
    }

    .m-social {
        display: flex;
        flex-direction: row;
        gap: 6vw;
        margin-top: clamp(2px, 0.8dvh, 10px);
    }

    .m-ic {
        position: relative;
        display: block;
        overflow: hidden;
        width: clamp(24px, 4.2dvh, 32px);
        height: clamp(24px, 4.2dvh, 32px);
        border-radius: 50%;
    }

    .m-ic img {
        position: absolute;
        top: -1805.24%;
        width: 3840%;
        height: auto;
        max-width: none;
    }

    .m-ic--fb img {
        left: -1729.36%;
    }

    .m-ic--ig img {
        left: -1870%;
    }

    .m-ic--tt img {
        left: -2010.64%;
    }

    .m-tagline {
        margin: clamp(2px, 0.8dvh, 10px) 0 0;
        font-family: "KarlsenRoundExtraBoldItalic", sans-serif;
        font-size: clamp(18px, 3.2dvh, 30px);
        color: #ed1b2f;
    }
}