/* -- Root Variables -------------------------------------------------------- */

:root {
    --font-primary: 'Outfit', sans-serif;
    --font-ip: 'League Gothic', sans-serif;
    --color-bg: #05131e;
    --color-black: #050a0e;
    --color-white: #ffffff;
    --color-gray: #8a9194;
    --color-theme: #00e5ff;
    --color-theme-contrast: #2a6470;
    --color-required: #d941bd;
    --gradient: linear-gradient(90deg, #00e5ff 0%, #8ff5ff 40%, #ffffff 100%);
    --s-50: 6px;
    --s: 12px;
    --s-200: 24px;
    --s-300: 36px;
    --s-400: 48px;
    --s-800: 96px;
    --s-1000: 120px;
    --font-size: 16px;
    --nav-size: calc(8 * var(--s));
}

/* -- Font Faces ------------------------------------------------------------ */

@font-face {
    font-family: 'Outfit';
    src: url('../fonts/Outfit/Outfit-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'League Gothic';
    src: url('../fonts/LeagueGothic/LeagueGothic-Regular-VariableFont_wdth.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Averia Serif Libre';
    src: url('../fonts/AveriaSerifLibre/AveriaSerifLibre-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Averia Serif Libre';
    src: url('../fonts/AveriaSerifLibre/AveriaSerifLibre-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Averia Serif Libre';
    src: url('../fonts/AveriaSerifLibre/AveriaSerifLibre-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* -- Global ---------------------------------------------------------------- */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    font-size: var(--font-size);
}

body {
    overflow-x: hidden;
    background-color: var(--color-bg);
    color: var(--color-white);
    font-family: var(--font-primary);
    line-height: 1.2;
}

a {
    text-decoration: none;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

/* Utilities */

[loading] {
    opacity: 0;
    transition: opacity 1s ease-in-out;
}
[loading="loaded"] {
    opacity: 1;
}

[theme] {
    color: var(--color-theme);
}

[gradient--theme] {
    display: inline;
    background: var(--gradient);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

[gradient--purple] {
    background: linear-gradient(to right, #5d23de 18.269%, #cfc9dc 51.442%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

[gradient--azure] {
    background: linear-gradient(to right, #09a7f6 18.269%, #d5e0e6 51.442%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

[gradient--magenta] {
    background: linear-gradient(to right, #dd209e 18.269%, #dcc9d6 51.442%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* -- Particle effects ------------------------------------------------------ */

#particles-js {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    opacity: 0.346;
    pointer-events: none;
}

/* -- Navigation ------------------------------------------------------------ */

.nav {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    width: 100%;
}

.nav__logo a {
    display: flex;
    align-items: center;
    gap: var(--s);
}

.nav__titles {
    display: flex;
    flex-flow: column nowrap;
    align-items: stretch;
    font-size: 0.6rem;
    color: var(--color-white);
    text-transform: uppercase;
    opacity: 0;
    transition: opacity 0.2s ease-in;
}
.nav.is-scrolled .nav__titles {
    opacity: 1;
}

.nav__title--1 {
    display: flex;
    justify-content: space-between;
    margin-bottom: calc(0.4 * var(--s));
    padding-bottom: calc(0.2 * var(--s));
    border-bottom: 1px solid var(--color-white);
    font-size: 1.4em;
}
.nav__title--2 {
    letter-spacing: 0.2em;
}

.nav__content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    height: var(--nav-size);
    padding: var(--s);
}

.nav__logo img {
    height: var(--s-400);
    filter: brightness(1);
    transition: all 0.25s;
}
.nav__logo:hover img {
    filter: brightness(10);
}

.nav__menu {
    display: flex;
    gap: var(--s-300);
    align-items: center;
}

.nav__link {
    padding: var(--s-200) var(--s);
    color: var(--color-white);
    font-weight: 200;
    transition: color 0.3s ease;
}
.nav__link:last-child {
    padding-right: 0;
}
.nav__link:hover {
    color: var(--color-theme);
}

/* -- Snapping segment system ----------------------------------------------- */

.snap__container {
    height: 100vh;
    overflow-y: hidden;
}
.snap__container:not(.is-dormant) {
    min-height: calc(75 * var(--s));
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
}

.snap {
    position: relative;
    height: 100vh;
    scroll-snap-align: start;
}

.snap--standard {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: var(--nav-size) 0 var(--s-300);
    gap: var(--s-400);
}

.section__header {
    position: relative;
    text-align: center;
}

.section__title {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.6px;
}

.section__subtitle {
    margin-bottom: 0;
    font-size: 1.4rem;
    color: var(--color-white);
    letter-spacing: 0.36px;
}

/* -- Hero section ---------------------------------------------------------- */

.hero {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--s-400);
    position: relative;
    height: 100vh;
    overflow: hidden;
    padding: var(--s-800) 0;
}

.hero-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.hero__statement--media {
    display: flex;
    align-items: center;
    flex: none;
    width: 60%;
    /* min-width: 60%; */
    /* max-width: 100%; */
    font-size: 1.4rem;
}

.hero__teaser {
    position: absolute;
    top: calc(-3 * var(--s));
    left: var(--s-200);
    z-index: 0;
    padding: var(--s-50) var(--s) var(--s-300);
    background-color: var(--color-theme);
    border-radius: var(--s-50);
    font-size: 1rem;
    color: var(--color-theme-contrast);
    white-space: nowrap;
}

.hero__teaser .icon {
    position: relative;
    top: calc(0.2 * var(--s));
    margin-left: var(--s-50);
    opacity: 0.5;
    transform: scaleX(-1) rotate(-225deg);
}

.hero__video-container {
    flex: 1;
    position: relative;
    cursor: pointer;
}

.hero__video {
    position: relative;
    width: 100%;
    height: 100%;
    /* max-height: calc(30 * var(--s)); */
    border-radius: var(--s-200);
    object-fit: cover;
    outline: var(--s-50) solid rgba(0, 0, 0, 0.1);
}

.splash__button {
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 5rem;
    transform: translate(-50%, -50%);
    transition: all 0.3s ease;
}
.hero__video-container:hover .splash__button {
    transform: translate(-50%, -50%) scale(1.5);
}
.hero__video-container.is-playing .splash__button {
    opacity: 0;
}

.hero__image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center left;
    opacity: 0.237;
}

.hero__content {
    position: relative;
}

.hero__statements {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    gap: var(--s);
    padding: var(--s);
}

.hero__statement--text {
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
    gap: var(--s);
    max-width: calc(45 * var(--s));
    margin-right: var(--s-300);
    font-size: 2rem;
    line-height: 1.2;
}

.hero__statement--hook-1 {
    font-size: 3.4rem;
    line-height: 1;
    white-space: nowrap;
}

.hero__statement--hook-2 {
    /* margin-block-end: auto; */
    font-size: 2.5rem;
}

.hero__statement--hook-3 {
    font-size: 1.5rem;
    /* text-align: justify; */
}

.hero__discover {
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    position: absolute;
    bottom: var(--s-300);
    color: var(--color-white);
    opacity: 0.5;
    animation: bounce 2s infinite;
}
.hero__discover:hover {
    cursor: pointer;
}

.hero__discover .icon {
    font-size: 1.4rem;
    margin-top: var(--s);
}

/* Animation */

@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

@keyframes hintFadesIn {
  0%, 71.4% {
    opacity: 0;
  }
  100% {
    opacity: 0.5;
  }
}

/* -- Products -------------------------------------------------------------- */

.products {
    background-color: var(--color-black);
}

.carousel__container {
    position: relative;
    width: 100%;
}

.carousel {
    display: flex;
    gap: var(--s-300);
    overflow: auto;
    /* max-width: calc(100vw - 1.5 * var(--s)); */
    padding: 0 10vw;
    scrollbar-width: none;
    -ms-overflow-style: none;
    cursor: grab;
    user-select: none;
}

.carousel:active {
    cursor: grabbing;
}

.carousel.is-dragging {
    cursor: grabbing;
    scroll-behavior: auto;
}

.carousel__nav {
    --size: var(--s-400);
    display: none;
    position: absolute;
    top: 50%;
    z-index: 10;
    width: var(--size);
    height: var(--size);
    background-color: var(--color-white);
    border: none;
    border-radius: 50%;
    color: var(--color-black);
    font-size: 1.4rem;
    opacity: 0.5;
    transform: translateY(-50%);
    transition: all 0.3s ease;
    cursor: pointer;
}
.carousel__nav:hover {
    opacity: 1;
}
.carousel__nav--left {
    left: var(--s);
}
.carousel__nav--right {
    right: var(--s);
}

.services[page="1"] .carousel__nav--left,
.services[page="3"] .carousel__nav--right {
    display: none;
}

.product__card {
    flex: none;
    width: calc(50 * var(--s));
}

.product__image {
    position: relative;
    margin-bottom: var(--s);
    pointer-events: none;
}

.product__image img,
.product__image video {
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
    object-position: center center;
    aspect-ratio: 16 / 9;
}
.product__image video::-webkit-media-controls {
  display: none !important;
}
.product__image video::-webkit-media-controls-enclosure {
  display: none !important;
}

.product__name {
    font-size: 2.5rem;
    color: var(--color-gray);
    line-height: 1.2;
}

/* .product__name--joyflight {
    font-family: var(--font-ip);
    letter-spacing: 0.72px;
}
.product__name--realm-rider {
    font-weight: 200;
    letter-spacing: 0.2em;
}
.product__name--ocean-quest {
    font-family: 'Averia Serif Libre';
    text-transform: uppercase;
    letter-spacing: -0.1rem;
}
.product__name--walk-on-water {
    font-family: 'Averia Serif Libre';
    font-size: 2em;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 0.5rem;
} */

.product__overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    font-size: 2.5rem;
    transform: translate(-50%, -50%);
}
.product__overlay--realm-rider {
    font-weight: 100;
    letter-spacing: 0.2em;
}

.product__info,
.product__title {
    font-size: 1.4rem;
}

.product__info--last {
    margin-top: var(--s-200);
}

.product__desc {
    max-width: calc(45 * var(--s));
    color: var(--color-gray);
}

/* -- Services -------------------------------------------------------------- */

.services {
    overflow: hidden;
    background-color: var(--color-black);
}

.services__content {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    height: calc(45 * var(--s));
}

.services__photos {
    position: absolute;
    left: -50%;
    width: calc(50 * var(--s));
    height: calc(50 * var(--s));
    transform: translateY(-2rem);
}

.services__photo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
    transition: .25s ease-in-out;
}
#services[page="1"] .services__photo[page="1"],
#services[page="2"] .services__photo[page="2"],
#services[page="3"] .services__photo[page="3"] {
    opacity: 1;
}

.service__card {
    position: relative;
    left: 50%;
    max-width: calc(45 * var(--s));
    padding: var(--s-300);
    padding-bottom: var(--s-400);
    background: linear-gradient(to bottom, var(--color-bg), var(--color-black));
    border-radius: var(--s-200);
}

.service__title {
    display: none;
}

#services[page="1"] .service__title[page="1"],
#services[page="2"] .service__title[page="2"],
#services[page="3"] .service__title[page="3"] {
    display: block;
}

.service__description {
    display: none;
    font-size: 1.4rem;
}

#services[page="1"] .service__description[page="1"],
#services[page="2"] .service__description[page="2"],
#services[page="3"] .service__description[page="3"] {
    display: block;
}

.service__icons {
    display: flex;
    gap: var(--s);
    margin-bottom: var(--s);
}

.service__icon {
    --size: var(--s-300);
    display: inline-block;
    width: var(--size);
    height: var(--size);
    border-radius: var(--s-50);
    text-align: center;
    line-height: var(--size);
    transition: .25s ease-in-out;
}
.service__icon:not(.is-active) {
    filter: grayscale(1) opacity(0.25);
}
.service__icon.service__icon--dev {
    background: linear-gradient(137deg, #5D23DE 37.43%, #CFC9DC 97.5%);
}
.service__icon.service__icon--operator {
    background: linear-gradient(144deg, #07A6F5 53.7%, #9FDEFD 83.22%);
}
.service__icon.service__icon--consultancy {
    background: linear-gradient(154deg, #DC209D 54.5%, #DD75BA 80.58%);
}
#services[page="1"] .service__icon[page="1"],
#services[page="2"] .service__icon[page="2"],
#services[page="3"] .service__icon[page="3"] {
    filter: none;
}

/* -- People ---------------------------------------------------------------- */

.people__persons{
    justify-content: center;
}

.person {
    --size: calc(25 * var(--s));
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s-200);
    width: var(--size);
}

.person__photo {
    position: relative;
    width: var(--size);
    height: var(--size);
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.15);
    border-radius: var(--s-200);
}
.person__photo::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(../branding/x-mark.png);
    background-position: 20% 0;
    background-size: cover;
    opacity: 0.05;
    transform: scale(1.2);
}

.person__photo img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}
.person--john .person__photo img {
    top: 15px;
}
.person--jon .person__photo img {
    transform: scale(1.1);
}

.person__info {
    display: flex;
    flex-direction: column;
    gap: var(--s);
    text-align: center;
}

.person__name {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 700;
}

.person__title {
    display: inline-block;
    padding: var(--s-50) var(--s);
    background-color: var(--color-theme);
    border-radius: 999px;
    font-size: 0.8rem;
    color: var(--color-theme-contrast);
    transform: translate(0.4rem, -0.2rem);
}

.person__bio {
    font-size: 1.4rem;
    color: var(--color-gray);
}

.company-detail {
    display: inline-block;
    margin: 0 var(--s-50);
    padding: var(--s-50) var(--s);
    background-color: var(--color-white);
    border-radius: var(--s-50);
    color: var(--color-theme-contrast);
    translate: 0 calc(-2 * var(--s));
}

.company-detail__label {
    margin-inline-end: var(--s-50);
    font-weight: bold;
    opacity: 0.5;
}

/* -- Contact --------------------------------------------------------------- */

.contact {
    background-color: var(--color-black);
}

.contact__form {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s);
    width: calc(45 * var(--s));
    margin: auto;
    font-size: 1.4rem;
}
.contact.is-sent .contact__form {
    display: none;
}

.contact__question {
    display: flex;
    flex-direction: column;
    gap: var(--s);
    width: 100%;
}

.contact__question .required {
    color: var(--color-required);
}

.contact__question .optional {
    font-size: 0.8em;
    color: var(--color-gray);
}

.contact__form input,
.contact__form textarea {
    padding: var(--s);
    font-family: var(--font-primary);
    font-size: 1rem;
    color: var(--color-white);
    background-color: var(--color-bg);
    border: 0;
    border-radius: var(--s-50);
}

.contact__form input:focus,
.contact__form textarea:focus {
    outline: 2px solid var(--color-theme);
}

/* Sending */

.contact.is-sending input,
.contact.is-sending textarea,
.contact.is-sending button,
.contact.is-sending label {
    pointer-events: none;
    opacity: 0.5;
}

.contact__sending {
    display: none;
    font-size: 5rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}
.contact.is-sending .contact__sending {
    display: block;
}

/* Sent */

.contact__submit,
.success__button {
    width: 100%;
    margin-top: var(--s);
    padding: var(--s);
    background-color: var(--color-theme);
    border: 0;
    border-radius: var(--s-50);
    color: var(--color-theme-contrast);
    transition: background-color 0.3s ease;
}
.contact__submit:hover {
    background-color: var(--color-white);
    color: var(--color-black);
}

.contact__success {
    display: none;
    max-width: calc(50 * var(--s));
    margin: auto;
    font-size: 1.4rem;
}
.contact.is-sent .contact__success {
    display: block;
}

.success__visual {
    display: block;
    font-size: 7rem;
    text-align: center;
}

/* -- Footer ---------------------------------------------------------------- */

.footer {
    position: relative;
    z-index: 1;
    height: auto !important;
    font-size: 1.4rem;
    background: var(--color-bg);
}

.footer .icon {
    margin-right: var(--s-50);
}

.footer__content {
    padding: var(--s-400) 0;
}

.footer__logo {
    display: flex;
    gap: var(--s-200);
    align-items: center;
    justify-content: flex-end;
    width: var(--s-1000);
}

.footer__lockup--hrd-corp {
    display: flex;
    flex-flow: column;
    align-items: center;
}

.footer__logo--hrd-corp {
    max-width: calc(8 * var(--s));
    filter: brightness(1.5);
}

.footer__logo-label--hrd-corp {
    width: calc(12 * var(--s));
    margin-top: var(--s);
    font-size: 0.8rem;
    text-align: center;
}

.footer__heading {
    letter-spacing: 0.36px;
    margin-bottom: var(--s);
}
.footer__heading--address {
    margin-bottom: var(--s-50);
}

.footer__email {
    color: var(--color-theme);
    text-decoration: none;
    word-break: break-word;
}

.footer .social {
    display: inline-block;
    padding: var(--s-50) var(--s);
    border: 1px solid var(--color-white);
    border-radius: var(--s-50);
    font-size: 1rem;
    color: var(--color-white);
}

.footer__bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--s-400);
    opacity: 0.5;
    transition: .25s ease-in-out;
}
.footer__bottom:hover {
    opacity: 1;
}

.footer__copyright {
    font-size: 1rem;
}

.footer__logo--lexra {
    scale: 0.8;
}

/* -- Responsiveness -------------------------------------------------------- */

.nav__hamburger {
    display: none;
    background: none;
    border: none;
    font-size: 2rem;
    color: var(--color-white);
    cursor: pointer;
}

@media (max-width: 1199px) {

    :root {
        --font-size: 14px;
    }

    .row > * {
        padding-left: var(--s-200);
        padding-right: var(--s-200);
    }

    /* -- Nav --------------------------------------------------------------- */
    
    .nav {
        background: var(--color-bg);
        box-shadow: 0 0 var(--s-200) var(--color-black);
    }

    .nav__hamburger {
        display: block;
    }
    
    .nav__menu {
        display: none;
        flex-direction: column;
        gap: 0;
        position: absolute;
        top: calc(var(--nav-size) - var(--s));
        right: 0;
        background-color: var(--color-black);
        border-radius: var(--s);
    }
    .nav__menu.is-open {
        display: flex;
    }
    
    .nav__link {
        width: calc(15 * var(--s));
        padding: var(--s-200) var(--s-200) !important;
        font-size: 1.4rem;
        text-align: center;
        white-space: nowrap;
    }

    /* -- Hero section ------------------------------------------------------ */

    .hero__image {
        object-position: center;
    }

    .hero__statements {
        flex-flow: column;
    }

    .hero__statement--text {
        width: auto;
        max-width: none;
        margin-bottom: var(--s-300);
        margin-right: 0;
        font-size: 1.4rem;
    }

    .hero__statement--hook-1 {
        font-size: 3rem;
        white-space: normal;
    }
    .hero__statement--hook-2 {
        font-size: 2rem;
    }
    .hero__statement--hook-3 {
        font-size: 1.4rem;
    }

    .hero__statement--media {
        width: 100%;
    }

    /* -- Products ---------------------------------------------------------- */

    .product__card {
        width: calc(35 * var(--s));
    }
    
    /* -- People ------------------------------------------------------------ */

    .carousel__nav {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* -- Services ---------------------------------------------------------- */

    .services__photos {
        left: -20%;
        opacity: 0.25;
        transform: scale(1.5);
    }

    .services__content {
        height: auto;
    }

    .service__card {
        left: 0;
        margin: 0 var(--s-300);
    }

    /* -- People ------------------------------------------------------------ */
    
    .people__persons{
        justify-content: flex-start;
    }

    .company-details {
        display: flex;
        flex-flow: column;
        gap: var(--s);
        scale: 1.2;
    }

    /* -- Contact ----------------------------------------------------------- */

    .contact {
        position: relative;
    }
    
    .contact__form {
        width: 100%;
        padding: var(--s-200);
    }

    /* -- Footer ------------------------------------------------------------ */
    
    .footer__content {
        gap: var(--s-300);
        padding: var(--s-400) 0;
    }
    
}

@media (max-width: 767px) {

    .footer__bottom {
        flex-direction: column-reverse;
        gap: var(--s-300);
    }

    .footer__logo {
        justify-content: center;
    }

}

@media (max-height: 800px) {

    .product__card {
        width: calc(40 * var(--s));
    }

    .product__desc {
        font-size: 1.2rem;
    }

    .snap--standard {
        gap: var(--s-200);
    }

}

@media (max-height: 700px) {

    .product__card {
        width: calc(25 * var(--s));
    }

    .product__name {
        font-size: 1.2rem;
    }

    .product__desc {
        font-size: 1rem;
    }

}