/* =========================================================
   AMBAGAHAGE GEMS
   LUXURY COMING SOON PAGE
========================================================= */


/* =========================================================
   COLOURS
========================================================= */

:root {

    --navy: #020711;
    --navy-light: #06152d;

    --sapphire: #0750ba;
    --sapphire-light: #438eea;
    --sapphire-dark: #001a51;

    --gold: #c89a48;
    --gold-light: #ebce8b;
    --gold-dark: #8f6322;

    --white: #ffffff;
    --pearl: #f8fafc;

}


/* =========================================================
   RESET
========================================================= */

* {

    margin: 0;
    padding: 0;

    box-sizing: border-box;

}


html,
body {

    width: 100%;
    min-height: 100%;

}


html {

    background: var(--navy);

}


body {

    min-height: 100dvh;

    overflow: hidden;

    font-family:
        "Montserrat",
        sans-serif;

    color: var(--white);

    background:
        linear-gradient(
            180deg,

            #ffffff 0%,
            #fbfcfe 13%,
            #eef3f9 23%,
            #cddbec 31%,
            #7796bd 39%,
            #244b7b 47%,
            #0b2449 57%,
            #041126 70%,
            #020711 100%
        );

}


/* =========================================================
   LUXURY BACKGROUND
========================================================= */

.luxury-background {

    position: fixed;

    inset: 0;

    overflow: hidden;

    pointer-events: none;

    z-index: 0;

}


/* =========================================================
   PEARL LIGHT
========================================================= */

.pearl-light {

    position: absolute;

    top: -180px;
    left: 50%;

    transform: translateX(-50%);

    width: min(1500px, 150vw);
    height: 620px;

    background:

        radial-gradient(
            ellipse at 50% 28%,

            rgba(255,255,255,1) 0%,
            rgba(255,255,255,.98) 27%,
            rgba(244,248,253,.88) 42%,
            rgba(197,215,238,.52) 58%,
            rgba(65,110,170,.20) 70%,
            transparent 84%
        );

    filter: blur(18px);

    animation:
        pearlBreathing
        9s
        ease-in-out
        infinite alternate;

}


@keyframes pearlBreathing {

    from {

        opacity: .90;

        transform:
            translateX(-50%)
            scaleX(.95);

    }

    to {

        opacity: 1;

        transform:
            translateX(-50%)
            scaleX(1.06);

    }

}


/* =========================================================
   AMBIENT LIGHTS
========================================================= */

.ambient-light {

    position: absolute;

    border-radius: 50%;

    filter: blur(120px);

}


.light-left {

    width: 520px;
    height: 520px;

    left: -350px;
    top: 38%;

    background:
        rgba(0, 89, 255, .32);

    animation:
        leftLight
        14s
        ease-in-out
        infinite alternate;

}


.light-right {

    width: 600px;
    height: 600px;

    right: -390px;
    bottom: -120px;

    background:
        rgba(0, 58, 170, .35);

    animation:
        rightLight
        17s
        ease-in-out
        infinite alternate;

}


.light-gold {

    width: 430px;
    height: 430px;

    top: 5%;
    right: 8%;

    background:
        rgba(212, 162, 72, .12);

    animation:
        goldLight
        18s
        ease-in-out
        infinite alternate;

}


@keyframes leftLight {

    from {

        transform:
            translate(0,0)
            scale(1);

    }

    to {

        transform:
            translate(80px,25px)
            scale(1.12);

    }

}


@keyframes rightLight {

    from {

        transform:
            translate(0,0)
            scale(1);

    }

    to {

        transform:
            translate(-70px,-45px)
            scale(1.10);

    }

}


@keyframes goldLight {

    from {

        transform:
            translate(0,0);

    }

    to {

        transform:
            translate(-60px,50px);

    }

}


/* =========================================================
   FACETS
========================================================= */

.facet {

    position: absolute;

    border:
        1px solid
        rgba(103,159,245,.08);

    transform: rotate(45deg);

}


.facet::before,
.facet::after {

    content: "";

    position: absolute;

    inset: 15%;

    border:
        1px solid
        rgba(103,159,245,.06);

}


.facet::after {

    inset: 30%;

}


.facet-one {

    width: 380px;
    height: 380px;

    left: -240px;
    top: 35%;

}


.facet-two {

    width: 420px;
    height: 420px;

    right: -300px;
    bottom: -120px;

}


.facet-three {

    width: 180px;
    height: 180px;

    right: 5%;
    top: 30%;

    border-color:
        rgba(214,171,89,.08);

}


/* =========================================================
   GEMSTONE SHAPES
========================================================= */

.gem {

    position: absolute;

    transform: rotate(45deg);

    background:

        linear-gradient(
            45deg,
            transparent 48%,
            rgba(128,181,255,.23) 49%,
            rgba(128,181,255,.23) 51%,
            transparent 52%
        ),

        linear-gradient(
            -45deg,
            transparent 48%,
            rgba(80,143,240,.18) 49%,
            rgba(80,143,240,.18) 51%,
            transparent 52%
        ),

        radial-gradient(
            circle at 28% 22%,
            rgba(105,172,255,.55),
            rgba(10,75,190,.27) 30%,
            rgba(0,25,75,.15) 65%,
            rgba(0,9,28,.10)
        );

    border:
        1px solid
        rgba(114,172,255,.30);

    box-shadow:

        inset 0 0 40px
        rgba(57,121,230,.18),

        0 0 50px
        rgba(0,82,255,.10);

}


.gem-inner {

    position: absolute;

    inset: 20%;

    transform:
        rotate(45deg);

    border:
        1px solid
        rgba(154,197,255,.20);

}


.gem-inner::before {

    content: "";

    position: absolute;

    inset: 20%;

    border:
        1px solid
        rgba(162,204,255,.12);

}


/* LEFT */

.gem-left {

    width: 230px;
    height: 230px;

    left: -110px;
    top: 44%;

    opacity: .30;

    animation:
        floatingGemLeft
        13s
        ease-in-out
        infinite alternate;

}


/* RIGHT */

.gem-right {

    width: 290px;
    height: 290px;

    right: -135px;
    bottom: 7%;

    opacity: .30;

    animation:
        floatingGemRight
        16s
        ease-in-out
        infinite alternate;

}


/* SMALL */

.gem-small {

    width: 70px;
    height: 70px;

    right: 13%;
    top: 40%;

    opacity: .18;

    animation:
        floatingGemSmall
        11s
        ease-in-out
        infinite alternate;

}


@keyframes floatingGemLeft {

    from {

        transform:
            rotate(37deg)
            translateY(0);

    }

    to {

        transform:
            rotate(43deg)
            translateY(-35px);

    }

}


@keyframes floatingGemRight {

    from {

        transform:
            rotate(50deg)
            translateY(0);

    }

    to {

        transform:
            rotate(44deg)
            translateY(-40px);

    }

}


@keyframes floatingGemSmall {

    from {

        transform:
            rotate(45deg)
            translateY(0);

    }

    to {

        transform:
            rotate(55deg)
            translateY(25px);

    }

}


/* =========================================================
   GOLD RINGS
========================================================= */

.gold-ring {

    position: absolute;

    border-radius: 50%;

    border:
        1px solid
        rgba(210,165,82,.10);

}


.ring-one {

    width: 700px;
    height: 700px;

    left: -570px;
    bottom: -330px;

}


.ring-two {

    width: 600px;
    height: 600px;

    right: -490px;
    top: 25%;

}


/* =========================================================
   SPARKLES
========================================================= */

.sparkle {

    position: absolute;

    width: 3px;
    height: 3px;

    border-radius: 50%;

    background: #ffffff;

    opacity: 0;

    box-shadow:

        0 0 5px #ffffff,

        0 0 12px
        rgba(98,159,255,.8),

        0 0 25px
        rgba(27,103,255,.55);

    animation:
        gemSparkle
        5s
        ease-in-out
        infinite;

}


.sparkle::before,
.sparkle::after {

    content: "";

    position: absolute;

    left: 50%;
    top: 50%;

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

    background:
        rgba(255,255,255,.85);

}


.sparkle::before {

    width: 22px;
    height: 1px;

}


.sparkle::after {

    width: 1px;
    height: 22px;

}


.sparkle-1 {

    top: 40%;
    left: 16%;

}


.sparkle-2 {

    top: 35%;
    right: 15%;

    animation-delay: 1s;

}


.sparkle-3 {

    bottom: 21%;
    left: 12%;

    animation-delay: 2s;

}


.sparkle-4 {

    bottom: 27%;
    right: 22%;

    animation-delay: 3s;

}


.sparkle-5 {

    top: 58%;
    left: 24%;

    animation-delay: 4s;

}


.sparkle-6 {

    top: 44%;
    right: 32%;

    animation-delay: 2.5s;

}


.sparkle-7 {

    bottom: 14%;
    left: 37%;

    animation-delay: 3.5s;

}


@keyframes gemSparkle {

    0%,
    72%,
    100% {

        opacity: 0;

        transform:
            scale(.3)
            rotate(0deg);

    }

    82% {

        opacity: 1;

        transform:
            scale(1)
            rotate(45deg);

    }

    90% {

        opacity: .35;

        transform:
            scale(.7)
            rotate(90deg);

    }

}


/* =========================================================
   PARTICLES
========================================================= */

.particle {

    position: absolute;

    width: 2px;
    height: 2px;

    border-radius: 50%;

    background:
        rgba(231,202,142,.75);

    box-shadow:
        0 0 7px
        rgba(231,202,142,.4);

    animation:
        particleFloat
        9s
        ease-in-out
        infinite alternate;

}


.p1 {
    left: 7%;
    top: 67%;
}


.p2 {
    left: 30%;
    top: 45%;
    animation-delay: 2s;
}


.p3 {
    right: 9%;
    top: 52%;
    animation-delay: 3s;
}


.p4 {
    right: 27%;
    bottom: 12%;
    animation-delay: 4s;
}


.p5 {
    left: 43%;
    top: 42%;
    animation-delay: 5s;
}


.p6 {
    right: 40%;
    bottom: 21%;
    animation-delay: 1s;
}


@keyframes particleFloat {

    from {

        opacity: .15;

        transform:
            translateY(0);

    }

    to {

        opacity: .8;

        transform:
            translateY(-25px);

    }

}


/* =========================================================
   VIGNETTE
========================================================= */

.vignette {

    position: absolute;

    inset: 0;

    background:

        linear-gradient(
            180deg,
            transparent 0%,
            transparent 30%,
            rgba(0,3,12,.03) 48%,
            rgba(0,2,9,.28) 100%
        );

}


/* =========================================================
   PAGE
========================================================= */

.page {

    position: relative;

    z-index: 10;

    width: 100%;

    height: 100dvh;

    display: grid;

    grid-template-rows:
        minmax(185px, 31vh)
        1fr
        38px;

    align-items: center;

    padding:
        8px
        clamp(15px,4vw,60px)
        7px;

}


/* =========================================================
   BRAND / LOGO
========================================================= */

.brand {

    position: relative;

    width: min(1000px,100%);
    height: 100%;

    margin: 0 auto;

    display: flex;

    justify-content: center;
    align-items: center;

    overflow: visible;

    isolation: isolate;

    animation:
        logoReveal
        1.5s
        cubic-bezier(.22,.8,.25,1)
        both;

}


/* White field that absorbs the white logo background */

.brand-white-field {

    position: absolute;

    z-index: -3;

    left: 50%;
    top: 47%;

    width: min(1000px,110vw);
    height: 310px;

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

    background:

        radial-gradient(
            ellipse at center,

            #ffffff 0%,
            rgba(255,255,255,1) 31%,
            rgba(253,254,255,.97) 43%,
            rgba(241,246,251,.80) 57%,
            rgba(213,226,242,.46) 69%,
            rgba(123,157,199,.18) 79%,
            transparent 92%
        );

    filter: blur(5px);

    animation:
        whiteFieldPulse
        8s
        ease-in-out
        infinite alternate;

}


@keyframes whiteFieldPulse {

    from {

        opacity: .92;

        transform:
            translate(-50%,-50%)
            scale(.97);

    }

    to {

        opacity: 1;

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

    }

}


/* Sapphire + gold glow */

.logo-glow {

    position: absolute;

    z-index: -2;

    left: 50%;
    top: 50%;

    width: min(750px,90vw);
    height: 190px;

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

    background:

        radial-gradient(
            ellipse at 63% 45%,
            rgba(18,78,165,.16),
            transparent 40%
        ),

        radial-gradient(
            ellipse at 40% 48%,
            rgba(208,159,70,.13),
            transparent 42%
        );

    filter: blur(25px);

    animation:
        logoAura
        6s
        ease-in-out
        infinite alternate;

}


.logo {

    position: relative;

    z-index: 2;

    width:
        min(660px,72vw);

    max-height: 95%;

    object-fit: contain;

    display: block;

    border: none;

    border-radius: 0;

    filter:
        drop-shadow(
            0 10px 18px
            rgba(0,19,54,.05)
        );

    animation:
        logoFloat
        6s
        ease-in-out
        infinite;

}


/* Transition detail */

.brand-transition {

    position: absolute;

    z-index: 4;

    bottom: 4px;
    left: 50%;

    transform:
        translateX(-50%);

    display: flex;

    align-items: center;

    gap: 10px;

    opacity: .55;

}


.brand-transition span {

    width: 45px;
    height: 1px;

}


.brand-transition span:first-child {

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--gold)
        );

}


.brand-transition span:last-child {

    background:
        linear-gradient(
            90deg,
            var(--gold),
            transparent
        );

}


.brand-transition i {

    width: 5px;
    height: 5px;

    display: block;

    background:
        var(--gold);

    transform:
        rotate(45deg);

    box-shadow:
        0 0 10px
        rgba(200,154,72,.35);

}


@keyframes logoReveal {

    from {

        opacity: 0;

        transform:
            translateY(-18px)
            scale(.95);

        filter: blur(6px);

    }

    to {

        opacity: 1;

        transform:
            translateY(0)
            scale(1);

        filter: blur(0);

    }

}


@keyframes logoFloat {

    0%,
    100% {

        transform:
            translateY(0)
            scale(1);

    }

    50% {

        transform:
            translateY(-4px)
            scale(1.006);

    }

}


@keyframes logoAura {

    from {

        opacity: .55;

        transform:
            translate(-50%,-50%)
            scale(.95);

    }

    to {

        opacity: .9;

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

    }

}


/* =========================================================
   CONTENT
========================================================= */

.content {

    width:
        min(900px,100%);

    margin: auto;

    display: flex;

    flex-direction: column;

    justify-content: center;
    align-items: center;

    text-align: center;

    animation:
        contentReveal
        1.4s
        .3s
        ease
        both;

}


@keyframes contentReveal {

    from {

        opacity: 0;

        transform:
            translateY(18px);

    }

    to {

        opacity: 1;

        transform:
            translateY(0);

    }

}


/* =========================================================
   ORNAMENT
========================================================= */

.ornament {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom:
        clamp(6px,1vh,10px);

}


.ornament span {

    width: 55px;
    height: 1px;

}


.ornament span:first-child {

    background:

        linear-gradient(
            90deg,
            transparent,
            var(--gold)
        );

}


.ornament span:last-child {

    background:

        linear-gradient(
            90deg,
            var(--gold),
            transparent
        );

}


.ornament i {

    width: 6px;
    height: 6px;

    display: block;

    background:

        linear-gradient(
            135deg,
            var(--gold-light),
            var(--gold-dark)
        );

    transform:
        rotate(45deg);

    box-shadow:

        0 0 12px
        rgba(214,174,97,.35);

}


/* =========================================================
   PRE TITLE
========================================================= */

.pre-title {

    margin-bottom:
        clamp(6px,1vh,10px);

    font-size:
        clamp(7px,.7vw,9px);

    font-weight: 500;

    letter-spacing: 5px;

    color:
        var(--gold-light);

}


/* =========================================================
   MAIN TITLE
========================================================= */

h1 {

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:
        clamp(40px,5.1vw,70px);

    line-height: .90;

    letter-spacing: -1px;

    font-weight: 500;

    color:
        var(--white);

    text-shadow:

        0 5px 30px
        rgba(0,0,0,.30);

}


h1 em {

    display: block;

    font-weight: 400;

    background:

        linear-gradient(
            90deg,
            #9c702c 0%,
            #d5ad60 30%,
            #f0d995 50%,
            #d2a654 70%,
            #9b6a25 100%
        );

    -webkit-background-clip: text;

    background-clip: text;

    -webkit-text-fill-color:
        transparent;

}


/* =========================================================
   DESCRIPTION
========================================================= */

.description {

    max-width: 560px;

    margin-top:
        clamp(8px,1.3vh,14px);

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:
        clamp(14px,1.4vw,18px);

    line-height: 1.4;

    color:
        rgba(255,255,255,.65);

}


/* =========================================================
   OPENING
========================================================= */

.opening {

    margin-top:
        clamp(9px,1.4vh,15px);

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 4px;

}


.opening span {

    font-size: 6px;

    font-weight: 500;

    letter-spacing: 3.5px;

    color:
        rgba(255,255,255,.40);

}


.opening strong {

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:
        clamp(16px,1.5vw,20px);

    letter-spacing: 3px;

    font-weight: 600;

    color:
        var(--gold-light);

}


/* =========================================================
   COUNTDOWN
========================================================= */

.countdown {

    position: relative;

    width:
        min(720px,90vw);

    margin-top:
        clamp(11px,1.7vh,19px);

    padding:
        clamp(13px,1.8vh,18px)
        clamp(10px,2vw,25px);

    display: grid;

    grid-template-columns:
        1fr
        1px
        1fr
        1px
        1fr
        1px
        1fr;

    align-items: center;

    border-radius: 16px;

    border:
        1px solid
        rgba(219,179,101,.27);

    background:

        linear-gradient(
            135deg,
            rgba(255,255,255,.10),
            rgba(255,255,255,.025)
        );

    backdrop-filter:
        blur(22px);

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

    box-shadow:

        0 25px 70px
        rgba(0,0,0,.28),

        inset 0 1px 0
        rgba(255,255,255,.12),

        0 0 60px
        rgba(0,72,190,.08);

    overflow: hidden;

}


/* Gold top line */

.countdown::before {

    content: "";

    position: absolute;

    top: 0;
    left: 50%;

    transform:
        translateX(-50%);

    width: 45%;
    height: 1px;

    background:

        linear-gradient(
            90deg,
            transparent,
            var(--gold-light),
            transparent
        );

}


/* Moving glass reflection */

.countdown::after {

    content: "";

    position: absolute;

    top: 0;
    left: -100%;

    width: 50%;
    height: 100%;

    background:

        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.045),
            transparent
        );

    transform:
        skewX(-20deg);

    animation:
        glassShine
        9s
        infinite;

}


@keyframes glassShine {

    0% {

        left: -100%;

    }

    30%,
    100% {

        left: 160%;

    }

}


.count-item {

    position: relative;

    z-index: 2;

    display: flex;

    flex-direction: column;

    justify-content: center;
    align-items: center;

}


.count-item strong {

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:
        clamp(34px,4vw,54px);

    line-height: .9;

    font-weight: 500;

    font-variant-numeric:
        tabular-nums;

    color:
        var(--white);

    text-shadow:

        0 4px 20px
        rgba(0,0,0,.30);

}


.count-item.seconds strong {

    background:

        linear-gradient(
            180deg,
            #f4dda4,
            #bd8732
        );

    -webkit-background-clip: text;

    background-clip: text;

    -webkit-text-fill-color:
        transparent;

}


.count-item span {

    margin-top: 7px;

    font-size:
        clamp(5px,.5vw,7px);

    font-weight: 600;

    letter-spacing: 2.5px;

    color:
        rgba(255,255,255,.40);

}


.count-divider {

    width: 1px;
    height: 35px;

    background:

        linear-gradient(
            180deg,
            transparent,
            rgba(221,181,103,.40),
            transparent
        );

}


/* =========================================================
   LOCATION
========================================================= */

.location {

    margin-top:
        clamp(9px,1.4vh,14px);

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 13px;

}


.location > span {

    width: 40px;
    height: 1px;

}


.location > span:first-child {

    background:

        linear-gradient(
            90deg,
            transparent,
            var(--gold)
        );

}


.location > span:last-child {

    background:

        linear-gradient(
            90deg,
            var(--gold),
            transparent
        );

}


.location p {

    font-size: 7px;

    font-weight: 500;

    letter-spacing: 3px;

    color:
        rgba(255,255,255,.62);

}


.location b {

    margin:
        0 6px;

    font-size: 5px;

    font-weight: normal;

    color:
        var(--gold);

}


/* =========================================================
   FOOTER
========================================================= */

footer {

    display: flex;

    align-items: flex-end;

    justify-content: center;

    text-align: center;

}


footer p {

    font-size: 6px;

    font-weight: 500;

    letter-spacing: 1.8px;

    color:
        rgba(255,255,255,.30);

}


footer i {

    margin:
        0 9px;

    font-size: 4px;

    font-style: normal;

    color:
        var(--gold);

}


/* =========================================================
   LAUNCHED MESSAGE
========================================================= */

.launched-message {

    grid-column:
        1 / -1;

    padding: 8px;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:
        clamp(28px,4vw,48px);

    letter-spacing: 7px;

    background:

        linear-gradient(
            90deg,
            #956921,
            #f0d58e,
            #a7792d
        );

    -webkit-background-clip: text;

    background-clip: text;

    -webkit-text-fill-color:
        transparent;

    animation:
        launchReveal
        1s
        ease;

}


@keyframes launchReveal {

    from {

        opacity: 0;

        transform:
            scale(.96);

    }

    to {

        opacity: 1;

        transform:
            scale(1);

    }

}


/* =========================================================
   LAPTOPS WITH SHORT SCREENS
========================================================= */

@media (max-height: 800px) {

    .page {

        grid-template-rows:
            minmax(145px,27vh)
            1fr
            28px;

        padding-top: 4px;

    }


    .logo {

        width:
            min(540px,65vw);

    }


    .brand-white-field {

        height: 240px;

    }


    h1 {

        font-size:
            clamp(36px,4.4vw,57px);

    }


    .description {

        font-size: 14px;

    }


    .countdown {

        margin-top: 9px;

        padding-top: 11px;
        padding-bottom: 11px;

    }


    .count-item strong {

        font-size: 38px;

    }


    .location {

        margin-top: 7px;

    }

}


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

@media (max-width: 650px) {

    body {

        background:

            linear-gradient(
                180deg,

                #ffffff 0%,
                #fbfcfe 16%,
                #edf3fa 25%,
                #b9cce3 34%,
                #5279a8 43%,
                #153b6b 52%,
                #071c3b 63%,
                #020711 100%
            );

    }


    .page {

        grid-template-rows:
            minmax(145px,25vh)
            1fr
            27px;

        padding:
            7px
            12px
            6px;

    }


    .brand {

        width: 100%;

    }


    .brand-white-field {

        width: 125vw;
        height: 235px;

    }


    .logo {

        width:
            min(500px,94vw);

    }


    .logo-glow {

        width: 100vw;
        height: 140px;

    }


    .brand-transition {

        bottom: 0;

    }


    .gem-left {

        width: 150px;
        height: 150px;

        left: -95px;

    }


    .gem-right {

        width: 180px;
        height: 180px;

        right: -120px;

    }


    .gem-small {

        width: 50px;
        height: 50px;

        right: 8%;

    }


    .pre-title {

        letter-spacing: 3px;

        font-size: 6px;

    }


    h1 {

        font-size:
            clamp(38px,11vw,52px);

    }


    .description {

        max-width: 330px;

        font-size: 14px;

        line-height: 1.35;

    }


    .opening strong {

        font-size: 17px;

        letter-spacing: 2px;

    }


    .countdown {

        width: 100%;

        padding:
            15px
            5px;

    }


    .count-item strong {

        font-size:
            clamp(30px,9vw,41px);

    }


    .count-item span {

        font-size: 5px;

        letter-spacing: 1.2px;

    }


    .count-divider {

        height: 28px;

    }


    .location p {

        letter-spacing: 2px;

    }


    footer p {

        font-size: 5px;

        letter-spacing: 1px;

    }

}


/* =========================================================
   VERY SHORT MOBILE DEVICES
========================================================= */

@media (max-height: 650px) and (max-width: 650px) {

    .page {

        grid-template-rows:
            110px
            1fr
            20px;

    }


    .logo {

        width: 330px;

    }


    .brand-white-field {

        height: 170px;

    }


    .brand-transition {

        display: none;

    }


    .ornament {

        margin-bottom: 4px;

    }


    .pre-title {

        margin-bottom: 4px;

    }


    h1 {

        font-size: 35px;

    }


    .description {

        margin-top: 5px;

        font-size: 12px;

    }


    .opening {

        margin-top: 6px;

    }


    .countdown {

        margin-top: 7px;

        padding:
            9px
            4px;

    }


    .count-item strong {

        font-size: 28px;

    }


    .location {

        margin-top: 6px;

    }

}


/* =========================================================
   ACCESSIBILITY
========================================================= */

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

    *,
    *::before,
    *::after {

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

    }

}