@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

@theme {
    --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
}


.forecolor10,.forecolor10:link{color:#FFFFFF;}
.forecolor9,.forecolor9:link{color:#ECECEC;}
.forecolor8,.forecolor8:link,.forecolor10 A,A.forecolor10:hover{color:#D9D9D9;}
.forecolor7,.forecolor7:link,.forecolor9 A,A.forecolor9:hover{color:#C6C6C6;}
.forecolor6,.forecolor6:link,.forecolor8 A,A.forecolor8:hover,.forecolor10 A:hover{color:#B2B2B2;}
.forecolor5,.forecolor5:link,.forecolor7 A,A.forecolor7:hover,.forecolor9 A:hover,.forecolor1 A:hover{color:#9F9F9F;}
.forecolor4,.forecolor4:link,.forecolor6 A,A.forecolor6:hover,.forecolor8 A:hover,.forecolor0 A:hover{color:#808080;}
.forecolor3,.forecolor3:link,.forecolor5 A,A.forecolor5:hover,.forecolor7 A:hover,.forecolor3:link A:hover,A.forecolor1:hover,.forecolor1 A{color:#606060;}
.forecolor2,.forecolor2:link,.forecolor4 A,A.forecolor4:hover,.forecolor6 A:hover,.forecolor8 A:hover,A.forecolor0:hover,.forecolor0 A{color:#404040;}
.forecolor1,.forecolor1:link,.forecolor3 A,A.forecolor3:hover,.forecolor5 A:hover{color:#202020;}
.forecolor0,.forecolor0:link,.forecolor2 A,A.forecolor2:hover,.forecolor4 A:hover{color:#000000;}

.backcolor10{background-color:#FFFFFF;}
.backcolor9{background-color:#ECECEC;}
.backcolor8{background-color:#D9D9D9;}
.backcolor7{background-color:#C6C6C6;}
.backcolor6{background-color:#B2B2B2;}
.backcolor5{background-color:#9F9F9F;}
.backcolor4{background-color:#808080;}
.backcolor3{background-color:#606060;}
.backcolor2{background-color:#404040;}
.backcolor1{background-color:#202020;}
.backcolor0{background-color:#000000;}

.bordercolor10{border-color:#FFFFFF;}
.bordercolor9{border-color:#ECECEC;}
.bordercolor8{border-color:#D9D9D9;}
.bordercolor7{border-color:#C6C6C6;}
.bordercolor6{border-color:#B2B2B2;}
.bordercolor5{border-color:#9F9F9F;}
.bordercolor4{border-color:#808080;}
.bordercolor3{border-color:#606060;}
.bordercolor2{border-color:#404040;}
.bordercolor1{border-color:#202020;}
.bordercolor0{border-color:#000000;}

:root {
    --black-color: #050505;
    --white-color: #ffffff;
    --action-color: #ffffff;
    --primary-color: #080808;
    --secondary-color: #111111;
    --tertiary-color: #1a1a1a;

    --light-color: #f5f5f5;
    --dark-color: #080808;
}

.body {
    background-color: var(--black-color);
    color: var(--white-color);
    font-family: var(--font-sans);
    overflow-x: hidden;
}

.zero-margin{
    width: 100vw;
    overflow: clip;
}

.mono {
    font-family: var(--font-mono);
}

/* Dropdown Styles */
.nav-dropdown {
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;
}

.nav-item-has-children:hover .nav-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Mobile Submenu Styles */
.mobile-submenu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

.mobile-submenu.active {
    max-height: 500px;
}

.mobile-nav-item-has-children .submenu-toggle-icon {
    transition: transform 0.3s ease;
}

.mobile-nav-item-has-children.active .submenu-toggle-icon {
    transform: rotate(180deg);
}

/* Scroll-Driven Animations */
@keyframes fade-in-up {
    from {
        opacity: 0;
        transform: translateY(40px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes reveal-3d {
    from {
        opacity: 0;
        transform: perspective(1000px) rotateX(10deg) translateY(50px);
    }

    to {
        opacity: 1;
        transform: perspective(1000px) rotateX(0) translateY(0);
    }
}

@keyframes parallax-y {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-100px);
    }
}

@keyframes clip-reveal {
    from {
        clip-path: inset(100% 0 0 0);
    }

    to {
        clip-path: inset(0 0 0 0);
    }
}

@keyframes scale-down {
    from {
        transform: scale(1.1);
    }

    to {
        transform: scale(1);
    }
}

@keyframes text-mask {
    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(0);
    }
}

.scroll-reveal {
    animation-name: fade-in-up;
    animation-duration: 1ms;
    animation-timing-function: linear;
    animation-fill-mode: both;
    animation-timeline: view();
    animation-range: entry 20% cover 40%;
}

.scroll-reveal-3d {
    animation-name: reveal-3d;
    animation-duration: 1ms;
    animation-timing-function: linear;
    animation-fill-mode: both;
    animation-timeline: view();
    animation-range: entry 35% cover 55%;
}

.scroll-parallax {
    animation-name: parallax-y;
    animation-duration: 1ms;
    animation-timing-function: linear;
    animation-fill-mode: both;
    animation-timeline: view();
    animation-range: entry cover;
}

.scroll-zoom {
    animation-name: scale-down;
    animation-duration: 1ms;
    animation-timing-function: linear;
    animation-fill-mode: both;
    animation-timeline: view();
    animation-range: entry cover;
}

.scroll-parallax-zoom {
    animation-name: parallax-y, scale-down;
    animation-duration: 1ms, 1ms;
    animation-timing-function: linear, linear;
    animation-fill-mode: both, both;
    animation-timeline: view(), view();
    animation-range: entry cover, entry cover;
}

.scroll-clip {
    animation-name: clip-reveal;
    animation-duration: 1ms;
    animation-timing-function: linear;
    animation-fill-mode: both;
    animation-timeline: view();
    animation-range: entry 25% cover 50%;
}

.scroll-reveal-group>* {
    animation-name: reveal-3d;
    animation-duration: 1ms;
    animation-timing-function: linear;
    animation-fill-mode: both;
    animation-timeline: view();
    animation-range: entry 25% cover 45%;
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.scroll-reveal-group>*:hover {
    box-shadow: 0 0 30px rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.2);
}

.btn-magnetic {
    transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

.btn-magnetic:hover {
    transform: translateY(-2px) scale(1.02);
}

.text-reveal-wrapper {
    overflow: hidden;
    display: inline-block;
    vertical-align: bottom;
    padding-bottom: 0.15em;
}

.text-reveal-item {
    display: block;
    animation-name: text-mask;
    animation-duration: 1ms;
    animation-timing-function: linear;
    animation-fill-mode: both;
    animation-timeline: view();
    animation-range: entry 30% cover 50%;
}

@keyframes slide-in-left {
    from {
        opacity: 0.7;
        transform: translateX(-50px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slide-in-right {
    from {
        opacity: 0.7;
        transform: translateX(50px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.scroll-slide-left {
    view-timeline-name: --slide-left;
    view-timeline-axis: block;
    animation-timeline: --slide-left;
    animation-name: slide-in-left;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-range: entry 0% cover 50%;
    animation-fill-mode: both;
}

.scroll-slide-right {
    view-timeline-name: --slide-right;
    view-timeline-axis: block;
    animation-timeline: --slide-right;
    animation-name: slide-in-right;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-range: entry 0% cover 50%;
    animation-fill-mode: both;
}

.glass {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.doc-card {
    background: rgba(255, 255, 255, 0.02);
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    padding: 2rem;
    transition: all 0.3s ease;
}

.doc-card:hover {
    background: rgba(255, 255, 255, 0.04);
    border-left-color: rgba(255, 255, 255, 0.3);
}

.doc-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.02em;
    transition: all 0.2s ease;
    cursor: pointer;
}

.doc-item:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
}

.blueprint-bg {
    background-image: url('https://www.neoreef.com/Documents%20and%20Settings/78/Site%20Documents/tmp/blueprint-bg.jpg');
    background-size: cover;
    background-position: center;
    opacity: 0.15;
}

/* Mako Theme Specifics */
.section {
    padding: 80px 0;
    position: relative;
}

.n-v1-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    transition: all 0.3s ease;
}

.module-class.accountlogin,
.module-class.register {
  max-width: 600px;
  margin: auto;
  margin-bottom:3rem;

  input,
  input[type="submit"],
  input[type="button"] {
    font-size: 0.875rem;
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.field label {
    font-size: 0.875rem;
    
    input {
        background-color: transparent;
      padding: 0.5rem;
    }
  }
}