/* ----------------------------------
        SHOWCASE STYLES
---------------------------------- */

:root {
    --default-width: calc(100% - 10vw);
    --default-block-margin: min(140px, 12vw);
    --blue: #0096b7;
    --blue-lt: #29feff;
    --burnt-orange: #f26522;
    --orange: #ffa200;
    --bs: 6px 8px 20px 0px rgba(0, 0, 0, 0.35);
    --fs: 6px 6px 10px rgba(0, 0, 0, 0.5);
    --clip-shape: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}

* {
    margin: 0px;
    padding: 0px;
}

html {background: #fff;}
body {color: #000;}

#main_wrapper {
    width: 100%;
    min-height: 100dvh;
    position: relative;
    overflow: hidden;
}
.wrapper {
    margin-inline: auto;
    position: relative;
    box-sizing: border-box;
}
.section {position: relative;}


/* ----------------------------------
        MARK: Font Styles
---------------------------------- */
h2 {
    font-kerning: none; 
    text-rendering: optimizeSpeed;
}

h2 + h3 {margin-top: 0.1em;}
h4 + p {margin-top: 0.3em;}
h4 + h4 {margin-top: 0.7em;}


/* ----------------------------------
        MARK: Colors
---------------------------------- */
.white {color: #fff;}
.black {color: #000;}
.blue {color: var(--blue);}
.blue_lt {color: var(--blue-lt);}
.orange {color: var(--orange);}
.burnt_orange {color: var(--burnt-orange);}

.blue_gradient {background-image: linear-gradient(to right, #24abe0, #00bfbe, #24abe0);}
.blue_gradient_reverse {background-image: linear-gradient(to right, #00bfbe, #24abe0, #00bfbe);}
.orange_gradient {background-image: linear-gradient(to right, #ffb400, #f85e1a, #ffb400);}
.orange_gradient_reverse {background-image: linear-gradient(to right, #f85e1a, #ffb400, #f85e1a);}

.white_bg {background-color: #fff;}


/* ----------------------------------
        MARK: Misc Default Styles
---------------------------------- */
.left {text-align: left;}
.center {text-align: center;}
.right {text-align: right;}

.vc {
    display: flex;
    align-items: center;
}
.hc {
    display: flex;
    justify-content: center;
}
.vhc {
    display: flex;
    align-items: center;
    justify-content: center;
}

.nomargin { margin: 0 !important; }
.notopmargin, .nomargintop {margin-top: 0 !important;}
.nobottommargin, .nomarginbottom {margin-bottom: 0 !important;}


/* ----------------------------------
        MARK: Custom Code
---------------------------------- */
.fixed_bg {
    width: 100vw;
    height: 100dvh;
    position: fixed;
    top: 0;
    left: 0;
    display: block;
}
.inline_img {
    height: auto;
    position: relative;
    display: block;
    margin-inline: auto;
}
.full_width {width: 100%;}

.textbox {
    position: relative;
    display: block;
    margin-inline: auto;
}

video {
    border: 0;
    outline: 0;
    display: block;
}

.border {
    width: 100%;
    height: min(40px, 5vw);
    display: block;
    position: relative;
    background-size: 200%;
    background-position: 0% 0%;
    z-index: 1;
}
.top_border {margin-bottom: -1px;}
.bottom_border {margin-top: -1px;}
.bottom_border::after {
    content: '';
    width: 100%;
    height: min(20px, 3vw);
    position: absolute;
    left: 0;
    top: 100%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.2) 25%, rgba(0, 0, 0, 0.1) 50%, transparent 100%);
}

.box_style {
    background-color: #fff;
    padding: min(70px, 6vw) min(70px, 6vw);
    box-sizing: border-box;
    box-shadow: var(--bs);
    margin-inline: auto;
    clip-path: var(--clip-shape);
}
.clip_shape {clip-path: var(--clip-shape);}

.tappy_hand {
    pointer-events: none;
    position: absolute;
}

.perspective {perspective: 1200px;}
.perspective > * {transform-style: preserve-3d;}


/* ------------------
     MARK: 1-Intro
--------------------- */
#panel_1 {
    display: flex;
    flex-direction: column;
    align-items: center;
}
#video_1 {
    width: 102%;
    height: auto;
    position: relative;
}
#panel_1 .wrapper {
    width: min(1198px, var(--default-width));
    padding-block: calc(var(--default-block-margin) / 1.5) calc(var(--default-block-margin) / 1.25);
}
#logo_wrapper {
    filter: drop-shadow(var(--fs));
    margin-bottom: min(60px, 8vw);
}
#logo_border {  
    --corner: min(52px, 5vw);
	background: linear-gradient(-114deg, #ffa200 0%, #f85e1a 100%);
    clip-path: polygon(var(--corner) 0%, calc(100% - var(--corner)) 0%, 100% var(--corner), 100% calc(100% - var(--corner)), calc(100% - var(--corner)) 100%, var(--corner) 100%, 0% calc(100% - var(--corner)), 0% var(--corner));
    padding: min(20px, 2vw);
    box-sizing: border-box;
}
#logo_inner {   
    --corner: min(40px, 4vw);
    aspect-ratio: 3.638/1; 
    clip-path: polygon(var(--corner) 0%, calc(100% - var(--corner)) 0%, 100% var(--corner), 100% calc(100% - var(--corner)), calc(100% - var(--corner)) 100%, var(--corner) 100%, 0% calc(100% - var(--corner)), 0% var(--corner));
    padding: min(40px, 4vw);
    box-sizing: border-box;
}
#logo_bg {
    width: 163.33%;
    position: absolute;
}
#logo_text {width: min(971px, 100%);}
#textbox_1 {
    width: min(1110px, 100%);
}
#wave_1 {
    width: min(968px, 100%);
    margin-top: min(20px, 2vw);
}


/* ----------------------
   MARK: 2-Directive 01
------------------------- */
#panel_2 {background: url(../images/2_bg_HD.jpg) 25% 25% / cover no-repeat;}
#panel_2 .wrapper {
    width: min(1608px, var(--default-width));
    padding-block: var(--default-block-margin);
    display: flex;
    justify-content: flex-end;
}
#panel_2 .content_container {
    width: min(1018px, 75vw);
}
#textbox_2 {width: min(773px, 80%);}
#robot_wrapper_2 {
    filter: drop-shadow(var(--fs));
    overflow: hidden;
}
#robot_wrapper_2 .bot_border {  
    --corner: 42px;
	background: #657c82;
    clip-path: polygon(var(--corner) 0%, calc(100% - var(--corner)) 0%, 100% var(--corner), 100% calc(100% - var(--corner)), calc(100% - var(--corner)) 100%, var(--corner) 100%, 0% calc(100% - var(--corner)), 0% var(--corner));
    padding: 4px;
    box-sizing: border-box;
}
#robot_wrapper_2 .bot_border_inner {   
    --corner: 40px;
    clip-path: polygon(var(--corner) 0%, calc(100% - var(--corner)) 0%, 100% var(--corner), 100% calc(100% - var(--corner)), calc(100% - var(--corner)) 100%, var(--corner) 100%, 0% calc(100% - var(--corner)), 0% var(--corner));
    /* background-color: #0e100f; */
    background: url(../images/bg_static_repeat.gif) 0% 0% / contain repeat;
    padding: min(40px, 4vw);
    box-sizing: border-box;
    display: grid;
    grid-template-columns: min(287px, 32%) 42px 1fr;
    gap: min(27px, 1.5vw);
}
#full_robot_column, .full_bot_inner {position: relative;}
.full_bot_container {position: absolute;}
.full_bot_container img {margin-bottom: 20px;}
.bot_name {
    --max-font-size: 26;
    --min-font-size: 20;
    color: var(--blue-lt);
}
.bot_description {
    --max-font-size: 16;
    --min-font-size: 16;
}
#bot_2_6 {position: relative;}
#devider_2 {
    position: relative;
    align-self: stretch;
}
#line_2 {
    width: 1px;
    height: 100%;
    background-color: var(--blue-lt);
    position: relative;
}
#triangle_2 {
    width: 0;
    height: 0;
    border-top: 18.5px solid transparent;
    border-bottom: 18.5px solid transparent;
    border-right: 21px solid var(--blue-lt);
    position: absolute;
    right: 50%;
}
#click_robot_column {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: min(24px, 1.5vw);
    align-content: center;
}
.click_robot_container {
    width: 100%;
    position: relative;
    cursor: pointer;
}
.clicked_bot {
    position: relative;
    filter: grayscale(0.3)opacity(0.85);
}
.active_bot {position: absolute;}
.click_robot_container:hover .active_bot {filter: brightness(1.25);}
.click_robot_container.clicked_2 .active_bot {display: none;}
#hand_2 {
    width: 75px;
    top: 18%;
    left: 18%;
    z-index: 5;
}


/* ----------------------
   MARK: 3-Directive 02
------------------------- */
#wrapper_3A {
    width: min(940px, var(--default-width));
    padding-block: var(--default-block-margin) min(75px, 6vw);
}
#wrapper_3B {
    background: url(../images/3_bg_HD.jpg) 50% 50% / cover no-repeat;
    min-height: max(541px, 28vw);
    padding-block: var(--default-block-margin);
    box-sizing: border-box;
}
#click_wrapper_3 {
    width: min(675px, var(--default-width));
    position: relative;
    margin-right: 8vw;
    gap: min(50px, 2vw);
}

#click_3 {
    width: min(140px, 20vw);
    aspect-ratio: 1/1;
    position: relative;
    cursor: pointer;
}
#click_3 svg {
    width: 100%;
    height: auto;
    display: block;
    position: relative;
    filter: drop-shadow(0 0 10px var(--blue-lt));
    transition: filter 0.3s ease-in-out;
}
#click_3 svg path {
    fill: var(--blue-lt);
    transform-origin: center center;
    transition: fill 0.3s ease-in-out;
}
#click_3:hover svg {filter: drop-shadow(0 0 10px var(--orange));}
#click_3:hover svg path {fill: var(--orange);}
#hand_3 {
    width: 75px;
    top: 35%;
    left: 35%;
}

#twister {animation: spin 3s infinite linear;}
#shrinker {animation: shrink 1.5s infinite ease-in-out;}
@keyframes spin {
      from {transform: rotate(0deg);}
      to {transform: rotate(360deg);}
    }
@keyframes shrink {
      0% {transform: scale(0.75);}
      50% {transform: scale(1);}
      100% {transform: scale(0.75);}
    }

#click_3.clicked_3 svg {filter: drop-shadow(0 0 10px #96afb5);}
#click_3.clicked_3 svg path {
    fill: #96afb5;
    animation: none !important;
}
#click_3.clicked_3:hover svg {filter: drop-shadow(0 0 10px #96afb5);}
#click_3.clicked_3:hover svg path {fill: #96afb5;}

#click_text_3 {
    position: relative;
    padding: min(40px, 5vw);
    box-sizing: border-box;
    gap: min(20px, 4vw);
    margin-top: 10%;
    box-shadow: var(--bs);
}


/* ---------------------
   MARK: 4-Video Panel
------------------------ */
#panel_4 .wrapper {
    width: min(1280px, var(--default-width));
    padding-block: var(--default-block-margin);
}
#textbox_4 {
    width: min(950px, 100%);
    margin-bottom: min(50px, 8vw);
}
.video_wrapper {
    position: relative;
    margin: 0;
    box-sizing: border-box;
    background: linear-gradient(#FFF, #FFF) padding-box, linear-gradient(51deg, #24abe0 0%, #00bfbe 100%) border-box;
    border: min(20px, 2.5vw) solid transparent;
    box-shadow: var(--bs);
}
#video_4 video {
    width: 100%;
    height: auto;
    cursor: pointer;
}


/* ---------------------
    MARK: 5-Citadel
------------------------ */
#bg_5 {background: url(../images/5_bg_HD.jpg) 50% 50% / cover no-repeat;}
#panel_5 .wrapper {padding-block: var(--default-block-margin);}
#textbox_5 {width: min(900px, 78vw);}
#citadel_wrapper {
    position: relative;
    margin-top: -8px;
}
#citadel_screens {
    width: min(1037px, var(--default-width));
    position: relative;
    margin-inline: auto;
}
#citadel_screens img {
    width: 101.54%;
    height: auto;
    display: block;
}
#citadel_open {position: relative;}
#citadel_closed {
    position: absolute;
    top: 0;
    left: 0;
}
#code_wrapper {
    width: min(776px, 75%);
    position: absolute;
    top: 8%;
    left: 50%;
    transform: translateX(-50%);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: min(12px, 1.5vw);
}
.code_container {
    width: 100%;
    position: relative;
    background-color: #0e100f;
    border: solid min(3.5px, 0.5vw) #647d82;
    padding: min(12px, 1.5vw);
    box-sizing: border-box;
}
.code_container img {
    width: auto;
    height: auto;
    max-height: 21px;
    display: block;
}
#citadel_wrapper .bottom_container {
    width: min(1225px, calc(100% - 2.5vw));
    display: inline-flex;
    justify-content: space-between;
    align-items: center;
    margin-top: max(-180px, -16vw);
    margin-left: 1.25%;
}
#badge_wrapper_5 {
    width: min(212px, 20%);
    aspect-ratio: 1/1;
    position: relative;
}
.badge_style {position: absolute;}
#game_5 {
    width: min(207px, 19%);
    height: auto;
    display: block;
    position: relative;
}
#certificate_5 {
    width: min(232px, 21%);
    height: auto;
    display: block;
    position: relative;
}


/* ---------------------
    MARK: 6-Warning!
------------------------ */
#panel_6 {
    padding-block: var(--default-block-margin);
    box-sizing: border-box;
}
#panel_6 .wrapper {
    width: min(1490px, var(--default-width));
    min-height: min(1222px, 114dvh);
    background: url(../images/6_bg_HD.jpg) 50% 50% / cover no-repeat;
    padding: min(50px, 5vw);
    box-shadow: var(--bs);
}
#textbox_6 {width: min(896px, 100%);}


/* ---------------------
  MARK: 7-Accomplished
------------------------ */
#panel_7 .wrapper {
    width: min(1200px, var(--default-width));
    padding-bottom: var(--default-block-margin);
}
#panel_7 h3 {margin-block: 0.6em;}


/* ---------------------
   MARK: 8-Let’s Chat
------------------------ */
#panel_8 {overflow: hidden;}
#chat_video {
    width: auto;
    height: auto;
    min-width: 100%;
    min-height: 100%;
    position: absolute;
}
.chat_layout .wrapper {
    width: min(773px, var(--default-width));
    padding-block: min(90px, 12vw);
}
.chat_layout .textbox {
	width: 100%;
    display: flex;
	position: relative;
	margin: auto;
	color:#fff;
	gap: 20px min(50px, 5vw);
}
.closing {
	max-width: 70%;
	flex-shrink: 0;
}




/* ----------------------------------
        MARK: MEDIA QUERIES
---------------------------------- */

/* Width of Chat Video Background */
@media only screen and (max-width: 1042px) {
    #chat_video {display: none;}
    #panel_8 {background: url(../images/7_bg_MOB.jpg) 50% 50% / cover no-repeat;}
}


/* TABLET LANDSCAPE */
@media only screen and (max-width: 1024px) {
	p, ul, li {line-height: 140%;}
    #panel_2 {background: url(../images/2_bg_TAB.jpg) 0% 0% / cover no-repeat;}
    #panel_2 .wrapper {padding-top: 56vw;}
    #panel_2 .content_container {width: 100%;}
    #wrapper_3B {
        background: url(../images/3_bg_TAB.jpg) 50% 50% / cover no-repeat;
        min-height: 52vw;
    }

}


/* TABLET PORTAIT */
@media only screen and (max-width: 768px) {
    #panel_2 {background: #8a5037 url(../images/2_bg_MOB.jpg) 0% 0% / 100% auto no-repeat;}
    #panel_2 .wrapper {
        width: 100%;
        padding-top: 94vw;
        padding-bottom: 0;
    }
    #textbox_2 {width: min(773px, var(--default-width));}
    #robot_wrapper_2 .bot_border {
        clip-path: unset;
        padding: 0;
    }
    #robot_wrapper_2 .bot_border_inner {
        clip-path: unset;
        padding: 5vw;
        border-top: solid 4px #657c82;
    }
    #wrapper_3B {
        background: url(../images/3_bg_MOB.jpg) 50% 50% / cover no-repeat;
        min-height: 66vw;
    }
    #click_wrapper_3 {margin-right: 0;}
    #bg_5 {background: url(../images/5_bg_MOB.jpg) 50% 20% / cover no-repeat;}
    #panel_6 .wrapper {
        min-height: 78dvh;
        background: url(../images/6_bg_MOB.jpg) 50% 50% / cover no-repeat;
        padding: min(50px, 5vw);
    }
}


/* PHONE */
@media only screen and (max-width: 650px) {
    .box_style {text-align: start;}
    #panel_1 .wrapper {padding-block: 8vw 5vw;}
    #video_1 {width: 200%;}
    #robot_wrapper_2 .bot_border_inner {
        grid-template-columns: 1fr;
        padding: 8vw 5vw;
        gap: 7vw;
    }
    #robot_wrapper_2 .full_bot_container {
        width: min(287px, 100%);
        margin-inline: auto;
        text-align: center;
    }
    #full_robot_column {order: 2;}
    #devider_2 {display: none;}
    #click_robot_column {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        order: 1;
        gap: 10px;
    }
    .click_robot_container {flex-basis: 17.2%;}
    #hand_2 {left: 8vw;}
    #click_wrapper_3 {margin-right: unset;}
    #click_text_3 {
        margin-top: 0;
        flex-direction: column;
        text-align: center;
    }
    #textbox_5 {
        width: min(900px, var(--default-width));
        padding-bottom: 13vw;
    }
    #citadel_wrapper {margin-top: -8vw;}
    #citadel_screens {width: 98%;}
    #citadel_screens img {width: 103%;}
    #code_wrapper {
        width: min(776px, 80%);
        top: 10%;
    }
    #citadel_wrapper .bottom_container {
        width: 100%;
        margin-top: unset;
        margin-left: unset;
        position: absolute;
        bottom: 0;
        left: 0;
    }
    #game_5 {width: min(207px, 27%);}
    #badge_wrapper_5 {width: min(212px, 28%);}
    #certificate_5 {width: min(232px, 29%);}
    #panel_6 .wrapper {
        min-height: unset;
        padding-block: 25vw;
    }
    .chat_layout .wrapper {padding-bottom: 16vw;}
	.chat_layout .textbox {
		gap: 7vw;
		flex-direction: column;
		text-align: center;
	}
	.closing {max-width: 100%;}
}