@font-face {
    font-family: 'Playhigh';
    src: url('../../assets/fonts/Playhigh/DxPlayhigh-Expanded.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Figgle';
    src: url('../../assets/fonts/Figgle/Dx Figgle Free to Try.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'LingkawiSouth';
    src: url('../../assets/fonts/LingkawiSouth/Lingkawi%20South.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'NeueMetanaMono';
    src: url('../../assets/fonts/NeueMetanaMono/OTF/NeueMetanaMono-Light.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'GoogleSans';
    src: url('../../assets/fonts/GoogleSans/GoogleSans_17pt-Medium.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* --primary-bg: #ede3d5; */
/* --radial-gradient-color: rgba(62, 47, 35, 0.15); */

:root {
    /* --primary-bg: #f8f8f8; */
    --primary-bg: #f5efe6;
    --secondary-bg: #efe6da;
    --text-dark: #1a1a1a;
    --text-muted: #666;
    --accent-green: #2ecc71;
    --accent-brown: #3e2f23;
    --island-bg: rgba(26, 26, 26);

    /* Fonts */
    --font-paragraph-text: 'GoogleSans', serif;
    --font-main: 'Figgle', serif;
    --font-name: 'Playhigh', sans-serif;
    --font-heading: 'Figgle', sans-serif;
    --font-display: 'Figgle', sans-serif;
    --font-mono: 'Figgle', sans-serif;
    --font-signoff: 'LingkawiSouth', cursive;

    --radial-gradient-color: #ddd;

    /* Base Colors */
    --color-black: #1a1a1a;
    --color-white: #ffffff;
    --color-gray-light: #dddddd;
    --color-gray-medium: #888888;
    --color-gray-dark: #333333;
    --color-gray-darker: #222222;
    --color-slate: #94a3b8;
    --color-skyblue: skyblue;
    --color-lanyard: color(srgb 0.7264 0.8529 0.8894);
    --color-lifeline-stroke: #2a2a2a;

    /* RGBA Colors - Black */
    --rgba-black-03: rgba(0, 0, 0, 0.03);
    --rgba-black-04: rgba(0, 0, 0, 0.04);
    --rgba-black-05: rgba(0, 0, 0, 0.05);
    --rgba-black-10: rgba(0, 0, 0, 0.1);
    --rgba-black-15: rgba(0, 0, 0, 0.15);
    --rgba-black-20: rgba(0, 0, 0, 0.2);
    --rgba-black-30: rgba(0, 0, 0, 0.3);
    --rgba-black-40: rgba(0, 0, 0, 0.4);
    --rgba-black-50: rgba(0, 0, 0, 0.5);
    --rgba-black-80: rgba(0, 0, 0, 0.8);

    /* RGBA Colors - White */
    --rgba-white-02: rgba(255, 255, 255, 0.02);
    --rgba-white-05: rgba(255, 255, 255, 0.05);
    --rgba-white-10: rgba(255, 255, 255, 0.1);
    --rgba-white-15: rgba(255, 255, 255, 0.15);
    --rgba-white-20: rgba(255, 255, 255, 0.2);
    --rgba-white-25: rgba(255, 255, 255, 0.25);
    --rgba-white-30: rgba(255, 255, 255, 0.3);
    --rgba-white-40: rgba(255, 255, 255, 0.4);
    --rgba-white-50: rgba(255, 255, 255, 0.5);
    --rgba-white-60: rgba(255, 255, 255, 0.6);
    --rgba-white-70: rgba(255, 255, 255, 0.7);
    --rgba-white-80: rgba(255, 255, 255, 0.8);

    /* Gradients */
    --gradient-bg-dots: radial-gradient(var(--radial-gradient-color) 1px, transparent 1px);
    --gradient-lanyard: linear-gradient(180deg, var(--rgba-black-40) 0%, transparent 15%), var(--color-lanyard);
    --gradient-sky-journey: linear-gradient(to bottom, var(--primary-bg) 0%, var(--color-skyblue) 40%, var(--primary-bg) 100%);
    --gradient-bubble-base: radial-gradient(120% 120% at 30% 30%, var(--rgba-white-15) 0%, var(--rgba-white-02) 50%, transparent 100%);
    --gradient-bubble-hover: radial-gradient(120% 120% at 30% 30%, var(--rgba-white-25) 0%, var(--rgba-white-05) 50%, transparent 100%);
    --gradient-bubble-specular: radial-gradient(ellipse at center, var(--rgba-white-70) 0%, transparent 70%);
    --gradient-custom-blind: linear-gradient(120deg, #fdfcfb 0%, #ebedee 100%);

    /* SVGs */
    --svg-wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' preserveAspectRatio='none'%3E%3Cpath fill='%231a1a1a' d='M0,500 Q125,400 250,500 T500,500 T750,500 T1000,500 L1000,1000 L0,1000 Z'/%3E%3C/svg%3E");
}

body.dark-knight-mode {
    --primary-bg: #0c0f14;
    --secondary-bg: #151922;

    --text-dark: #e6e6e6;
    --text-muted: #8b8f98;
    --accent-green: #00b894;
    --accent-brown: #00b894;
    --island-bg: rgba(20, 22, 28, 0.92);
    /* --font-main and --font-name inherited */
    --radial-gradient-color: rgba(255, 255, 255, 0.06);

    /* Invert Base Colors */
    /* --color-black: #e6e6e6;
    --color-white: #0f1115; */
    --color-gray-light: #333333;
    --color-gray-medium: #888888;
    --color-gray-dark: #dddddd;
    /* --color-gray-darker: #eeeeee; */
    --color-slate: #64748b;
    --color-skyblue: #0a1128;
    --color-lanyard: #1a2a3a;
    --color-lifeline-stroke: #e6e6e6;

    /* Invert RGBA Blacks */
    /* --rgba-black-03: rgba(255, 255, 255, 0.03);
    --rgba-black-04: rgba(255, 255, 255, 0.04);
    --rgba-black-05: rgba(255, 255, 255, 0.05);
    --rgba-black-10: rgba(255, 255, 255, 0.1);
    --rgba-black-15: rgba(255, 255, 255, 0.15);
    --rgba-black-20: rgba(255, 255, 255, 0.2);
    --rgba-black-30: rgba(255, 255, 255, 0.3);
    --rgba-black-40: rgba(255, 255, 255, 0.4);
    --rgba-black-50: rgba(255, 255, 255, 0.5);
    --rgba-black-80: rgba(255, 255, 255, 0.8); */

    /* Invert RGBA Whites */
    /* --rgba-white-02: rgba(0, 0, 0, 0.02);
    --rgba-white-05: rgba(0, 0, 0, 0.05);
    --rgba-white-10: rgba(0, 0, 0, 0.1);
    --rgba-white-15: rgba(0, 0, 0, 0.15);
    --rgba-white-20: rgba(0, 0, 0, 0.2);
    --rgba-white-25: rgba(0, 0, 0, 0.25);
    --rgba-white-30: rgba(0, 0, 0, 0.3);
    --rgba-white-40: rgba(0, 0, 0, 0.4);
    --rgba-white-50: rgba(0, 0, 0, 0.5);
    --rgba-white-60: rgba(0, 0, 0, 0.6);
    --rgba-white-70: rgba(0, 0, 0, 0.7);
    --rgba-white-80: rgba(0, 0, 0, 0.8); */

    --gradient-custom-blind: linear-gradient(120deg, #0f1115 0%, #1a1a24 100%);
    --gradient-bg-dots: radial-gradient(var(--radial-gradient-color) 1px, transparent 1px);
    --gradient-sky-journey: linear-gradient(to bottom, var(--primary-bg) 0%, #050b1a 40%, var(--primary-bg) 100%);

    --svg-wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' preserveAspectRatio='none'%3E%3Cpath fill='%23e6e6e6' d='M0,500 Q125,400 250,500 T500,500 T750,500 T1000,500 L1000,1000 L0,1000 Z'/%3E%3C/svg%3E");
}

html,
body {
    overflow-x: clip;
    /* Fixes horizontal scroll without breaking position: sticky! */
    max-width: 100vw;
    max-height: 130vh;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    cursor: none !important;
}

body {
    font-family: var(--font-main);
    background-color: var(--primary-bg);
    color: var(--text-dark);
    max-width: 100%;
    margin: 0;
    padding: 0;
    /* background-image: radial-gradient(var(--radial-gradient-color) 1px, transparent 1px);
    background-size: 24px 24px;
    background-attachment: fixed; */
    background-image: var(--gradient-bg-dots);
    background-size: 22px 22px;
    background-attachment: fixed;
    transition: background-color 0.5s ease, color 0.5s ease, background-image 0.5s ease;
    cursor: none !important;
}

a,
button {
    cursor: none !important;
}

/* Responsive constraints */
/* img {
    max-width: 100%;
    height: auto;
} */

section,
.container,
#main-page-wrapper {
    max-width: 100%;
    box-sizing: border-box;
}

.tooltip {
    position: absolute;
    bottom: -40px;
    left: 50%;
    transform: translateX(-50%) translateY(10px) scale(0.9);
    background: var(--text-dark);
    color: var(--color-white);
    padding: 6px 14px;
    border-radius: 4px;
    font-size: 13px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;
    pointer-events: none;
    box-shadow: 0 4px 15px var(--rgba-black-10);
    font-family: var(--font-main);
    font-weight: 500;
}

.tooltip::after {
    content: '';
    position: absolute;
    top: -5px;
    left: 50%;
    transform: translateX(-50%) rotate(180deg);
    border-width: 5px 5px 0;
    border-style: solid;
    border-color: var(--text-dark) transparent transparent transparent;
}

.skill-icon:hover .tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0) scale(1);
}


/* EXPLORE BUTTON */
.explore-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    margin-top: 30px;
    font-size: 1.1rem;
    font-weight: 600;
    font-family: var(--font-main);
    color: var(--text-dark);
    background: transparent;
    border: 2px solid var(--text-dark);
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 4px 4px 0px var(--text-dark);
    transition: all 0.3s ease;
    /* text-transform: uppercase; */
    letter-spacing: 1px;
}

.explore-btn:hover {
    background: var(--text-dark);
    color: var(--primary-bg);
    box-shadow: 6px 6px 0px var(--rgba-black-80);
    transform: translate(-2px, -2px);
}

.explore-btn:active {
    box-shadow: 0px 0px 0px var(--text-dark);
    transform: translate(4px, 4px);
}

.explore-arrow {
    width: 20px;
    height: 20px;
    transition: transform 0.3s ease;
}

.explore-btn:hover .explore-arrow {
    transform: rotate(45deg);
}

/* STICKY BACK BUTTON */
.sticky-back-container {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 99999;
    animation: floatingBtn 3s ease-in-out infinite;
}

.back-btn {
    background: var(--primary-bg);
}

.back-btn:hover .back-arrow {
    transform: rotate(-45deg);
}

@keyframes floatingBtn {

    0%,
    100% {
        transform: translateX(-50%) translateY(0);
    }

    50% {
        transform: translateX(-50%) translateY(-10px);
    }
}