/* ==========================================
   KOTI VIDEO HERO
========================================== */

.kv-hero {
    position: relative;
    width: 100%;
    height: 700px;
    overflow: hidden;
    background: #000;
    margin: 0;
    padding: 0;
}


/* VIDEO */

.kv-hero-video {
    position: absolute;

    top: 50%;
    left: 50%;

    width: 100%;
    height: 100%;

    transform: translate(-50%, -50%);

    object-fit: cover;
    object-position: center center;

    display: block;

    margin: 0;
    padding: 0;

    border: 0;
}


/* ==========================================
   SUBTLE CINEMATIC ZOOM
========================================== */

/* =========================================================
   KOTI HERO — DEVICE RESPONSIVE MEDIA QUERIES
   ========================================================= */


/* =========================================================
   DESKTOP — 1600px+
   ========================================================= */

@media screen and (min-width: 1600px) {

    .kv-hero {
        height: 760px;
    }

    .kv-hero-video {
        object-position: center center;
    }
}


/* =========================================================
   DESKTOP — 1280px to 1599px
   ========================================================= */

@media screen and (min-width: 1280px) and (max-width: 1599px) {

    .kv-hero {
        height: 720px;
    }

    .kv-hero-video {
        object-position: center center;
    }
}


/* =========================================================
   NEST HUB MAX — 1280 × 800
   ========================================================= */

@media screen and (width: 1280px) and (height: 800px) {

    .kv-hero {
        height: 800px;
    }

    .kv-hero-video {
        object-position: center center;
    }
}


/* =========================================================
   LAPTOP / DESKTOP — 1200px to 1279px
   ========================================================= */

@media screen and (min-width: 1200px) and (max-width: 1279px) {

    .kv-hero {
        height: 680px;
    }

    .kv-hero-video {
        object-position: center center;
    }
}


/* =========================================================
   IPAD PRO — 1024 × 1366
   ========================================================= */

@media screen and (min-width: 1024px) and (max-width: 1199px) {

    .kv-hero {
        height: 620px;
    }

    .kv-hero-video {
        object-position: center center;
    }
}


/* =========================================================
   NEST HUB — 1024 × 600
   ========================================================= */

@media screen and (width: 1024px) and (height: 600px) {

    .kv-hero {
        height: 600px;
    }

    .kv-hero-video {
        object-position: center center;
    }
}


/* =========================================================
   SURFACE PRO 7 — 912 × 1368
   ========================================================= */

@media screen and (min-width: 912px) and (max-width: 1023px) {

    .kv-hero {
        height: 600px;
    }

    .kv-hero-video {
        object-position: center center;
    }
}


/* =========================================================
   ASUS ZENBOOK FOLD — 853 × 1280
   ========================================================= */

@media screen and (min-width: 834px) and (max-width: 911px) {

    .kv-hero {
        height: 580px;
    }

    .kv-hero-video {
        object-position: center center;
    }
}


/* =========================================================
   IPAD AIR — 820 × 1180
   ========================================================= */

@media screen and (min-width: 820px) and (max-width: 833px) {

    .kv-hero {
        height: 560px;
    }

    .kv-hero-video {
        object-position: center center;
    }
}


/* =========================================================
   IPAD MINI — 768 × 1024
   ========================================================= */

@media screen and (min-width: 768px) and (max-width: 819px) {

    .kv-hero {
        height: 520px;
    }

    .kv-hero-video {
        object-position: center center;
    }
}


/* =========================================================
   SURFACE DUO — 540 × 720
   ========================================================= */

@media screen and (min-width: 540px) and (max-width: 767px) {

    .kv-hero {
        height: 420px;
    }

    .kv-hero-video {
        object-position: center center;
    }
}


/* =========================================================
   LARGE MOBILE
   iPhone XR
   Pixel 7
   Galaxy S20 Ultra
   Samsung A51/A71
   412–430px
   ========================================================= */

@media screen and (min-width: 412px) and (max-width: 767px) {

    .kv-hero {
        height: 248px;
    }

    .kv-hero-video {
        object-fit: cover;
        object-position: center center;
        height: 248px;
    }
}


/* =========================================================
   iPHONE 14 PRO MAX — 430 × 932
   ========================================================= */

@media screen and (min-width: 430px) and (max-width: 430px) {

    .kv-hero {
        height: 350px;
    }

    .kv-hero-video {
        object-position: center center;
    }
}


/* =========================================================
   iPHONE XR — 414 × 896
   ========================================================= */

@media screen and (width: 414px) {

    .kv-hero {
        height: 345px;
    }

    .kv-hero-video {
        object-position: center center;
    }
}


/* =========================================================
   PIXEL 7 / GALAXY S20 ULTRA
   412 × 915
   ========================================================= */

@media screen and (width: 412px) {

    .kv-hero {
        height: 248px;
    }

    .kv-hero-video {
        object-position: center center;
        height: 248px;
    }
}


/* =========================================================
   iPHONE 12 PRO — 390 × 844
   ========================================================= */

@media screen and (min-width: 390px) and (max-width: 411px) {

    .kv-hero {
        height: 248px;
    }

    .kv-hero-video {
        object-position: center center;
        height: 248px;
    }
}


/* =========================================================
   iPHONE SE — 375 × 667
   ========================================================= */

@media screen and (min-width: 361px) and (max-width: 389px) {

    .kv-hero {
        height: 248px;
    }

    .kv-hero-video {
        object-position: center center;
        height: 248px;
    }
}


/* =========================================================
   GALAXY S8+ — 360 × 740
   ========================================================= */

@media screen and (min-width: 350px) and (max-width: 360px) {

    .kv-hero {
        height: 248px;
    }

    .kv-hero-video {
        object-position: center center;
        height: 248px;
    }
}


/* =========================================================
   GALAXY Z FOLD 5 — 344 × 882
   ========================================================= */

@media screen and (min-width: 320px) and (max-width: 349px) {

    .kv-hero {
        height: 229px;
    }

    .kv-hero-video {
        object-position: center center;
        height: 229px;
    }
}


/* =========================================================
   VERY SMALL DEVICES
   ========================================================= */

@media screen and (max-width: 319px) {

    .kv-hero {
        height: 270px;
    }

    .kv-hero-video {
        object-position: center center;
    }
}


/* =========================================================
   LANDSCAPE MOBILE
   ========================================================= */

@media screen and (orientation: landscape)
       and (max-width: 767px)
       and (max-height: 600px) {

    .kv-hero {
        height: 100vh;
        min-height: 260px;
        max-height: 600px;
    }

    .kv-hero-video {
        object-position: center center;
    }
}


/* =========================================================
   VERY SHORT LANDSCAPE
   ========================================================= */

@media screen and (orientation: landscape)
       and (max-width: 767px)
       and (max-height: 450px) {

    .kv-hero {
        height: 100vh;
        min-height: 240px;
    }

    .kv-hero-video {
        object-position: center center;
    }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

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

    .kv-hero-video {
        animation: none;
        transform: translate(-50%, -50%) scale(1);
    }
}