@font-face {
    font-family: 'Moralana';
    src: url('moralana-demo.otf') format('opentype');
}

@font-face {
    font-family: 'ITechnology';
    src: url('Technology-Italic.ttf') format('opentype');
}

@font-face {
    font-family: 'Technology';
    src: url('Technology-Bold.ttf') format('opentype');
}

/* =========================
   INTRO VIDEO OVERLAY
========================= */
#introOverlay {
    position: fixed;
    inset: 0;
    z-index: 9999;

 background:
        repeating-linear-gradient(
            0deg,
            rgba(0, 0, 0, 0.4) 0px,
            rgba(0, 0, 0, 0.4) 1px,
            transparent 1px,
            transparent 2px
        ),
        repeating-linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.4) 0px,
            rgba(0, 0, 0, 0.4) 1px,
            transparent 1px,
            transparent 2px
        ),
        linear-gradient(135deg, #eeff7e, #87d7ba, #ffffff, #ffffff, #bdf0f4);
    display: flex;
    align-items: center;
    justify-content: center;

    transition: opacity 1.2s ease;
    opacity: 1;

    overflow: hidden;
}

/* background video - fills the whole overlay */
#introOverlay .bg-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

/* sparkle layer - above bg, below video-circle */
.intro-sparkles {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

/* circular container for the transparent video */
#introOverlay .video-circle {
    position: relative;
    z-index: 2;

    width: 60vh;
    height: 60vh;
    max-width: 80vw;
    max-height: 80vw;

    border-radius: 50%;
    overflow: hidden;

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

    background: transparent;
}

#introOverlay video#introVideo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: transparent;
}

/* Fade-out state */
#introOverlay.fade-out {
    opacity: 0;
    pointer-events: none;
}

/* Skip button */
#skipIntro {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 10000;

    padding: 10px 20px;

    font-family: 'Technology', sans-serif;
    font-size: 14px;
    letter-spacing: 2px;

    color: white;
    background: rgba(0, 0, 0, 0.5);

    border: 1px solid rgba(255, 255, 255, 0.4);
    cursor: pointer;

    transition: all 0.2s ease;
}

#skipIntro:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: white;
}

/* Blur the site while intro plays */
body.intro-active .site-content {
    filter: blur(20px);
    pointer-events: none;
    user-select: none;
}

.site-content {
    transition: filter 1.2s ease;
}

/* =========================
   GLOBAL (MAIN SITE)
========================= */
body {
    font-family: 'Technology', sans-serif;

    background:
        repeating-linear-gradient(
            0deg,
            rgba(0, 0, 0, 0.4) 0px,
            rgba(0, 0, 0, 0.4) 1px,
            transparent 1px,
            transparent 2px
        ),
        repeating-linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.4) 0px,
            rgba(0, 0, 0, 0.4) 1px,
            transparent 1px,
            transparent 2px
        ),
        linear-gradient(135deg, #eeff7e, #87d7ba, #ffffff, #ffffff, #bdf0f4);

    color: #000;
    padding: 50px 20px;
    margin: 0;
}

/* LAYOUT */
.container {
    max-width: 1200px;
    margin: 0;
    margin-top: -60px;
    position: relative;
    z-index: 3;
}

/* TITLE (ON TOP) */
.title-box {
    margin: 20px;
    padding: 20px;
    width: 1400px;

    position: relative;
    z-index: 10;
}

.title-main {
    font-family: 'Moralana', serif;
    font-size: 72px;
    line-height: 1.1;
    margin: 0;
    color: #ffffff;
    letter-spacing: 2px;
}

.title-sub {
    font-family: 'Moralana', serif;
    font-size: 32px;
    margin-top: -10px;
    margin-left: 6px;
    color: rgb(255, 255, 255);
}

/* PANELS - RETRO */
.panel {
    margin: 20px;
    padding: 15px;
    background: #c0c0c0;

    border: 2px solid;
    border-color: #404040 #ffffff #ffffff #404040;

    box-shadow:
        inset 1px 1px 0 #000,
        inset -1px -1px 0 #dfdfdf,
        4px 4px 0 #000;

    transform: translateY(0);
    transition: transform 0.15s ease, box-shadow 0.15s ease;

    color: #000;
}

/* HOVER LIFT */
.panel:hover {
    transform: translateY(-6px);
    box-shadow:
        inset 1px 1px 0 #000,
        inset -1px -1px 0 #dfdfdf,
        8px 8px 0 #000;
}

/* PANEL HEADER STRIP */
.panel h2 {
    background: linear-gradient(to right, #2b5cff, #7a9bff);
    color: white;

    padding: 6px 10px;

    margin: -15px -15px 15px -15px;

    font-size: 18px;
}

/* DESCRIPTION */
.description p {
    font-size: 18px;
    line-height: 1.5;
    margin: 0;
}

/* SUBHEADINGS */
.step h3,
.memory-rules h3 {
    font-family: 'ITechnology', sans-serif;
    font-size: 18px;
    margin-top: 12px;
}

/* BODY TEXT */
.step p,
.memory-rules p,
.memory-rules ul {
    font-size: 16px;
    line-height: 1.5;
}

/* BUTTON - LARGE CENTER-RIGHT ORB */
#beginBtn {
    position: fixed;

    right: 18%;
    bottom: 60px;

    width: 220px;
    height: 220px;
    border-radius: 50%;

    font-family: 'Technology', serif;
    font-size: 24px;
    letter-spacing: 2px;

    color: white;

    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;

    background: linear-gradient(135deg, #2b5cff, #ff6ec7);

    cursor: pointer;

    border: 2px solid;
    border-color: #404040 #ffffff #ffffff #404040;

    box-shadow:
        inset 1px 1px 0 #000,
        inset -1px -1px 0 #dfdfdf,
        8px 8px 0 #000;

    z-index: 20;

    transition: all 0.25s ease;
}

/* HOVER */
#beginBtn:hover {
    transform: translateY(-10px) scale(1.06);

    box-shadow:
        inset 1px 1px 0 #000,
        inset -1px -1px 0 #dfdfdf,
        12px 12px 0 #000,
        0 0 25px rgba(255, 110, 199, 0.8),
        0 0 40px rgba(43, 92, 255, 0.8);
}

/* CLICK */
#beginBtn:active {
    transform: translateY(3px) scale(0.96);

    box-shadow:
        inset 2px 2px 0 #000,
        inset -1px -1px 0 #dfdfdf,
        4px 4px 0 #000;
}

/* STARS (BEHIND CONTENT BUT VISIBLE) */
.stars {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

/* STAR */
.star {
    position: absolute;
    width: 4px;
    height: 4px;
}

/* CROSS SHAPE */
.star::before,
.star::after {
    content: "";
    position: absolute;
    background: white;
}

.star::before {
    width: 2px;
    height: 14px;
    left: 1px;
    top: -5px;
}

.star::after {
    width: 14px;
    height: 2px;
    top: 1px;
    left: -5px;
}

/* TWINKLE */
@keyframes twinkle {
    0% {
        opacity: 0.3;
        transform: scale(0.8);
    }
    50% {
        opacity: 1;
        transform: scale(1.4);
    }
    100% {
        opacity: 0.4;
        transform: scale(1);
    }
}

.panel video {
    width: 100%;
    height: 900px;
    object-fit: cover;

    border: 2px solid;
    border-color: #404040 #ffffff #ffffff #404040;

    box-shadow:
        inset 2px 2px 0 #000,
        inset -2px -2px 0 #dfdfdf;
}

/* =========================
   ENCODER LOGIN BUTTON
========================= */
#loginBtn {
    position: fixed;
    left: 20px;
    bottom: 20px;

    padding: 8px 16px;

    font-family: 'Technology', sans-serif;
    font-size: 12px;
    letter-spacing: 1px;

    color: rgb(255, 255, 255);

    background: linear-gradient(135deg, #2b5dff4d, #ff6ec744);

    cursor: pointer;

    border: 2px solid;
    border-color: #4040403a #ffffff39 #ffffff2d #40404047;

    box-shadow:
        inset 1px 1px 0 #00000024,
        inset -1px -1px 0 #dfdfdf3d,
        3px 3px 0 #00000030;

    z-index: 20;

    transition: all 0.2s ease;
}

#loginBtn:hover {
    transform: translateY(-2px);
    box-shadow:
        inset 1px 1px 0 #0000002e,
        inset -1px -1px 0 #dfdfdf29,
        5px 5px 0 #00000036,
        0 0 15px rgba(255, 110, 199, 0.201);
}

#loginBtn:active {
    transform: translateY(1px);
    box-shadow:
        inset 2px 2px 0 #000,
        2px 2px 0 #000;
}