/* 
*
* ██╗  ██╗ █████╗ ███╗   ███╗██╗   ██╗
* ██║ ██╔╝██╔══██╗████╗ ████║██║   ██║
* █████╔╝ ███████║██╔████╔██║██║   ██║
* ██╔═██╗ ██╔══██║██║╚██╔╝██║╚██╗ ██╔╝
* ██║  ██╗██║  ██║██║ ╚═╝ ██║ ╚████╔╝ 
* ╚═╝  ╚═╝╚═╝  ╚═╝╚═╝     ╚═╝  ╚═══╝   
*     KAMV v2.0.1 (https://ndrs3d.com)
*   2021|2025 © NDRS3D • MIT License
* 
*   ░▒▓ do it even tired ▓▒░
*         ¯\_(•,•)_/¯
*
* last update: 28.10.2025
*
* ——————————————
   KAMV ROOT VARS
   —————————————— */

:root {
  /* ====== TYPO ====== */
  
  /* Fonts */
  --n3d-font: 'KAMV', system-ui, -apple-system, 'Segoe UI', 'Helvetica Neue', sans-serif;
  --kamvfont: 'KAMV', sans-serif;
  --n3d-fnt-dsply: 'Geologica', sans-serif;
  --n3d-fnt-bdy: 'Red Hat Text', sans-serif;
  --n3d-fnt-slb: 'Epunda Slab', serif;
  --n3d-fnt-mn: 'Geist Mono', monospace;
  --n3d-fnt-mn2: 'Rokkitt', serif;
  --n3d-fnt-frm: 'Sour Gummy', sans-serif;
  
  /* =========== FONT SIZES =========== */

  /* === EXTRA SMALL === */
  --n3d-fontsize-7xs: 0.4rem;        /* 6.4px */
  --n3d-fontsize-6xs: 0.450rem;      /* 7.2px */
  --n3d-fontsize-5xs: 0.525rem;      /* 8.4px */
  --n3d-fontsize-4xs: 0.575rem;      /* 9.2px */
  --n3d-fontsize-3xs: 0.6rem;        /* 9.6px */
  --n3d-fontsize-2xs: 0.625rem;      /* 10px */
  --n3d-fontsize-xs: 0.6875rem;      /* 11px */
  --n3d-fontsize-sm: 0.8125rem;      /* 13px */
  --n3d-fontsize-base: 0.9375rem;    /* 15px - default */
  --n3d-fontsize-lg: 1.0625rem;      /* 17px */
  --n3d-fontsize-xl: 1.25rem;        /* 20px */
  --n3d-fontsize-2xl: 1.5rem;        /* 24px */
  --n3d-fontsize-3xl: 1.875rem;      /* 30px */
  --n3d-fontsize-4xl: 2.25rem;       /* 36px */

  /* === HEADINGS === */
  --n3d-fontsize-5xl: 3rem;          /* 48px */
  --n3d-fontsize-6xl: 3.75rem;       /* 60px */

  /* =========== DISPLAY SIZES =========== */
  --n3d-fontsize-display-xs: 4rem;    /* 64px */
  --n3d-fontsize-display-sm: 5rem;    /* 80px */
  --n3d-fontsize-display-md: 7rem;    /* 112px */
  --n3d-fontsize-display-lg: 9rem;    /* 144px */
  --n3d-fontsize-display-xl: 12rem;   /* 192px */
  --n3d-fontsize-display-2xl: 15rem;  /* 240px */
  --n3d-fontsize-display-3xl: 20rem;  /* 320px */

  /* =========== LINE HEIGHTS =========== */
  --n3d-lineh-none: 1;
  --n3d-lineh-tight: 1.25;
  --n3d-lineh-snug: 1.375;
  --n3d-lineh-normal: 1.5;
  --n3d-lineh-relaxed: 1.625;
  --n3d-lineh-loose: 2;

  /* =========== LETTER SPACING =========== */
  --n3d-letterspa-tighter: -0.05em;
  --n3d-letterspa-tight: -0.025em;
  --n3d-letterspa-normal: 0;
  --n3d-letterspa-wide: 0.025em;
  --n3d-letterspa-wider: 0.05em;
  --n3d-letterspa-widest: 0.1em;
  /* ======== SPACING ======== */  
  --n3d-spac-2xs: 0.125rem;   /* 2px */
  --n3d-spac-xs: 0.25rem;    /* 4px */
  --n3d-spac-sm: 0.5rem;     /* 8px */
  --n3d-spac-base: 0.75rem;  /* 12px */
  --n3d-spac-md: 0.85rem;  /* 14*/
  --n3d-spac-lg: 1rem;       /* 16px */
  --n3d-spac-xl: 1.5rem;     /* 24px */
  --n3d-spac-2xl: 2rem;      /* 32px */
  --n3d-spac-3xl: 3rem;      /* 48px */
  --n3d-spac-5xl: 5rem;      /* 48px */
  --n3d-spac-8xl: 8rem;      /* 48px */
  /* ======== PADDINGS ======== */  
  --n3d-padd-2xs: 0.125rem;   /* 2px */
  --n3d-padd-xs: 0.25rem;    /* 4px */
  --n3d-padd-sm: 0.375rem;   /* 6px */
  --n3d-padd-md: 0.5rem;     /* 8px */
  --n3d-padd-base: 0.625rem; /* 10px */
  --n3d-padd-reg: 0.75rem;   /* 12px */
  --n3d-padd-fit: 0.875rem; /* 14px */
  --n3d-padd-lg: 1rem;       /* 16px */
  --n3d-padd-xl: 1.5rem;     /* 24px */
  --n3d-padd-2xl: 2rem;      /* 32px */
  --n3d-padd-3xl: 3rem;      /* 48px */ 
  --n3d-padd-5xl: 5rem;      /* 80px */
  --n3d-padd-8xl: 8rem;      /* 128px */
  /* ======== MARGIN ======== */
  --n3d-marg-2xs: 0.125rem;   /* 2px */
  --n3d-marg-xs: 0.25rem;     /* 4px */
  --n3d-marg-sm: 0.5rem;      /* 8px */
  --n3d-marg-base: 0.75rem;   /* 12px */
  --n3d-marg-lg: 1rem;        /* 16px */
  --n3d-marg-xl: 1.5rem;      /* 24px */
  --n3d-marg-2xl: 2rem;       /* 32px */
  --n3d-marg-3xl: 3rem;       /* 48px */
  --n3d-marg-5xl: 5rem;       /* 32px */
  --n3d-marg-8xl: 8rem;       /* 48px */  
  /* ======= BORDERS & RADIUS ====== */
  --n3d-radius-min: 1px;
  --n3d-radius-2xs: 2px;
  --n3d-radius-xs: 4px;
  --n3d-radius-sm: 8px;
  --n3d-radius-md: 12px;
  --n3d-radius-base: 14px;
  --n3d-radius-lg: 20px;
  --n3d-radius-xl: 28px;
  --n3d-radius-2xl: 36px;
  --n3d-radius-rnd: 50%;  

  /* ======== TRANSITIONS ======== */
  /* Smooth & Natural */
  --n3d-trans-instant: 100ms cubic-bezier(0.4, 0, 0.2, 1);
  --n3d-trans-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --n3d-trans-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --n3d-trans-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);
  --n3d-trans-slower: 600ms cubic-bezier(0.4, 0, 0.2, 1);
  /* Elastic & Bouncy */
  --n3d-trans-bounce: 500ms cubic-bezier(0.68, -0.555, 0.264, 1.55);
  --n3d-trans-elastic: 600ms cubic-bezier(0.68, -0.6, 0.32, 1.61);
  --n3d-trans-spring: 400ms cubic-bezier(0.176, 0.885, 0.32, 1.275);
  /* Sharp & Snappy */
  --n3d-trans-sharp: 200ms cubic-bezier(0.4, 0, 0.6, 1);
  --n3d-trans-punch: 300ms cubic-bezier(0.8, 0, 0.2, 1);
  /* Scroll Physics */
  --n3d-scroll-ease: cubic-bezier(0.23, 1, 0.32, 1);
  --n3d-scroll-damp: 0.08;
  
  /* ==== DURATIONS ONLY (for custom timing) ==== */
  /* Milliseconds */
  --n3d-durat-instant: 100ms;
  --n3d-durat-fast: 150ms;
  --n3d-durat-base: 250ms;
  --n3d-durat-slow: 400ms;
  --n3d-durat-slower: 600ms;
  /* Seconds */
  --n3d-durat-1s: 1s;
  --n3d-durat-800ms: 0.8s;
  --n3d-durat-600ms: 0.6s;
  --n3d-durat-500ms: 0.5s;
  --n3d-durat-300ms: 0.3s;
  --n3d-durat-200ms: 0.2s;
  
  /* ======== Z-INDEX LAYERS ======= */
    --n3d-zindex-bg:          0;
    --n3d-zindex-base:        100;

    /* ── N3D landing layers ── */
    --n3d-zindex-wall:        200;
    --n3d-zindex-navlayer:    300;
    --n3d-zindex-logolayer:   400;
    --n3d-zindex-fpanel:      500;
    --n3d-zindex-blur:        600;

    /* ── N3D stage + mascot ── */
    --n3d-zindex-stage:       700;
    --n3d-zindex-mascot:      800;

    /* ── Navigation (encima del stage) ── */
    --n3d-zindex-header:      900;
    --n3d-zindex-toolbar:     1000;
    --n3d-zindex-overlay:     1100;
    --n3d-zindex-dropdown:    1200;
    --n3d-zindex-notifp:      1300;

    /* ── Global UI ── */
    --n3d-zindex-nav:         1400;
    --n3d-zindex-sidebar:     1500;
    --n3d-zindex-modal:       1600;
    --n3d-zindex-topbar:      1700;
    --n3d-zindex-tooltip:     1800;
    --n3d-zindex-alert:       1900;
    --n3d-zindex-toast:       2000;
    --n3d-zindex-max:         2100;
    --n3d-zindex-sa:          8500;
    --n3d-zindex-ck:          8600;

  /* ======= OPACITY LEVELS ====== */
  --n3d-opac-0: 0;
  --n3d-opac-25: 0.25;
  --n3d-opac-50: 0.5;
  --n3d-opac-75: 0.75;
  --n3d-opac-90: 0.9;
  --n3d-opac-95: 0.95;
  --n3d-opac-100: 1;
  /* ======= BREAKPOINTS ====== */
  --n3d-breakp-xs: 475px;
  --n3d-breakp-sm: 640px;
  --n3d-breakp-md: 768px;
  --n3d-breakp-lg: 1024px;
  --n3d-breakp-xl: 1280px;
  --n3d-breakp-2xl: 1536px;

  /* === BACKDROP FILTERS  === */
  --n3d-blur-min: blur(2px);
  --n3d-blur-xs: blur(4px);
  --n3d-blur-sm: blur(8px);
  --n3d-blur-base: blur(10px);
  --n3d-blur-md: blur(16px);
  --n3d-blur-lg: blur(20px);
  --n3d-blur-xl: blur(30px);
  --n3d-blur-2xl: blur(40px);
  --n3d-blur-max: blur(60px);

  /* ===  BOX-SHADOWS GLOW SIZES === */

  /* ONLY BLUR */
  --n3d-glow-5: 0 0 5px;
  --n3d-glow-10: 0 0 10px;
  --n3d-glow-15: 0 0 15px;
  --n3d-glow-20: 0 0 20px;
  --n3d-glow-25: 0 0 25px;
  --n3d-glow-35: 0 0 35px;
  --n3d-glow-50: 0 0 50px;
  --n3d-glow-80: 0 0 80px;
  --n3d-glow-120: 0 0 120px;
  --n3d-glow-200: 0 0 200px;

  /* === BOX SHADOWS GLOW - QUICK === */

  /* === PURPLE KAMV SMOOTH SHADOWS === */
  --n3d-shad-ppk-5: var(--n3d-glow-5) color-mix(in srgb, var(--purplekamv) 25%, transparent);
  --n3d-shad-ppk-10: var(--n3d-glow-10) color-mix(in srgb, var(--purplekamv) 30%, transparent);
  --n3d-shad-ppk-15: var(--n3d-glow-15) color-mix(in srgb, var(--purplekamv) 30%, transparent);
  --n3d-shad-ppk-20: var(--n3d-glow-20) color-mix(in srgb, var(--purplekamv) 35%, transparent);
  --n3d-shad-ppk-25: var(--n3d-glow-25) color-mix(in srgb, var(--purplekamv) 35%, transparent);
  --n3d-shad-ppk-35: var(--n3d-glow-35) color-mix(in srgb, var(--purplekamv) 40%, transparent);
  --n3d-shad-ppk-50: var(--n3d-glow-50) color-mix(in srgb, var(--purplekamv) 45%, transparent);
  --n3d-shad-ppk-80: var(--n3d-glow-80) color-mix(in srgb, var(--purplekamv) 50%, transparent);
  --n3d-shad-ppk-120: var(--n3d-glow-120) color-mix(in srgb, var(--purplekamv) 55%, transparent);
  --n3d-shad-ppk-200: var(--n3d-glow-200) color-mix(in srgb, var(--purplekamv) 60%, transparent);

  /* === LIME KAMV SMOOTH SHADOWS === */
  --n3d-shad-lmk-5: var(--n3d-glow-5) color-mix(in srgb, var(--limekamv) 25%, transparent);
  --n3d-shad-lmk-10: var(--n3d-glow-10) color-mix(in srgb, var(--limekamv) 30%, transparent);
  --n3d-shad-lmk-15: var(--n3d-glow-15) color-mix(in srgb, var(--limekamv) 30%, transparent);
  --n3d-shad-lmk-20: var(--n3d-glow-20) color-mix(in srgb, var(--limekamv) 35%, transparent);
  --n3d-shad-lmk-25: var(--n3d-glow-25) color-mix(in srgb, var(--limekamv) 35%, transparent);
  --n3d-shad-lmk-35: var(--n3d-glow-35) color-mix(in srgb, var(--limekamv) 40%, transparent);
  --n3d-shad-lmk-50: var(--n3d-glow-50) color-mix(in srgb, var(--limekamv) 45%, transparent);
  --n3d-shad-lmk-80: var(--n3d-glow-80) color-mix(in srgb, var(--limekamv) 50%, transparent);
  --n3d-shad-lmk-120: var(--n3d-glow-120) color-mix(in srgb, var(--limekamv) 55%, transparent);
  --n3d-shad-lmk-200: var(--n3d-glow-200) color-mix(in srgb, var(--limekamv) 60%, transparent);

  /* === INDIGO KAMV SMOOTH SHADOWS === */
  --n3d-shad-idk-5: var(--n3d-glow-5) color-mix(in srgb, var(--indigokamv) 25%, transparent);
  --n3d-shad-idk-10: var(--n3d-glow-10) color-mix(in srgb, var(--indigokamv) 30%, transparent);
  --n3d-shad-idk-15: var(--n3d-glow-15) color-mix(in srgb, var(--indigokamv) 30%, transparent);
  --n3d-shad-idk-20: var(--n3d-glow-20) color-mix(in srgb, var(--indigokamv) 35%, transparent);
  --n3d-shad-idk-25: var(--n3d-glow-25) color-mix(in srgb, var(--indigokamv) 35%, transparent);
  --n3d-shad-idk-35: var(--n3d-glow-35) color-mix(in srgb, var(--indigokamv) 40%, transparent);
  --n3d-shad-idk-50: var(--n3d-glow-50) color-mix(in srgb, var(--indigokamv) 45%, transparent);
  --n3d-shad-idk-80: var(--n3d-glow-80) color-mix(in srgb, var(--indigokamv) 50%, transparent);
  --n3d-shad-idk-120: var(--n3d-glow-120) color-mix(in srgb, var(--indigokamv) 55%, transparent);
  --n3d-shad-idk-200: var(--n3d-glow-200) color-mix(in srgb, var(--indigokamv) 60%, transparent);

  /* === JADE KAMV SMOOTH SHADOWS === */
  --n3d-shad-jdk-5: var(--n3d-glow-5) color-mix(in srgb, var(--jadekamv) 25%, transparent);
  --n3d-shad-jdk-10: var(--n3d-glow-10) color-mix(in srgb, var(--jadekamv) 30%, transparent);
  --n3d-shad-jdk-15: var(--n3d-glow-15) color-mix(in srgb, var(--jadekamv) 30%, transparent);
  --n3d-shad-jdk-20: var(--n3d-glow-20) color-mix(in srgb, var(--jadekamv) 35%, transparent);
  --n3d-shad-jdk-25: var(--n3d-glow-25) color-mix(in srgb, var(--jadekamv) 35%, transparent);
  --n3d-shad-jdk-35: var(--n3d-glow-35) color-mix(in srgb, var(--jadekamv) 40%, transparent);
  --n3d-shad-jdk-50: var(--n3d-glow-50) color-mix(in srgb, var(--jadekamv) 45%, transparent);
  --n3d-shad-jdk-80: var(--n3d-glow-80) color-mix(in srgb, var(--jadekamv) 50%, transparent);
  --n3d-shad-jdk-120: var(--n3d-glow-120) color-mix(in srgb, var(--jadekamv) 55%, transparent);
  --n3d-shad-jdk-200: var(--n3d-glow-200) color-mix(in srgb, var(--jadekamv) 60%, transparent);

  /* == MATRIX HOVER TRANSFORMS */
  --n3d-mtrx-side-right: matrix3d(0.95, -0.05, 0.5, 0, 0, 1, 0.3, 0, 0, 0, 1, 0, 0, -2, 0, 1); /* 1 stl */
  --n3d-mtrx-cube: matrix3d(0.9, -0.1, 0, 0, 0, 1, -1, 0, 0.4, -0, 5, 0.05, 0, 0, -2, 1); /* bloque */
  --n3d-mtrx-txt: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); /* texto  */

  /* === SECTIONS === */

  --n3d-winbar-h:    38px;

}

/* ============
   THEMES: AUTO 
   ============ */

@media (prefers-color-scheme: dark) {
    :root[data-theme="auto"],
    body[data-theme="auto"] {

  }
}

@media (prefers-color-scheme: light) {
    :root[data-theme="auto"],
    body[data-theme="auto"] {

  }
}

