/* ═══════════════════════════════════════════════════
   BASE.CSS — Reset, Design Tokens, Typography (v3)
   CRYSTALINK Premium Website — Refined Palette
   ═══════════════════════════════════════════════════ */

/* ── CSS Custom Properties ─────────────────────── */
:root {
    /* Color System — Refined Premium Palette */
    --navy:          #1A2332;
    --navy-deep:     #12192A;
    --navy-darker:   #0A0F1A;
    --navy-mid:      #1E2B3E;
    --cyan:          #00D4FF;
    --cyan-soft:     #33DDFF;
    --cyan-glow:     rgba(0, 212, 255, 0.12);
    --cyan-glow-strong: rgba(0, 212, 255, 0.25);
    --silver:        #D8DEE9;
    --silver-muted:  #8892A4;
    --silver-dim:    #5C6680;
    --white:         #F0F4F8;
    --white-pure:    #FFFFFF;
    --charcoal:      #2A3448;
    --charcoal-light:#364458;
    --accent-warm:   #FFB347;
    --accent-violet: #7C6BFF;

    /* Typography */
    --font-display:  'Clash Display', 'Inter', sans-serif;
    --font-body:     'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Type Scale — fluid */
    --text-hero:     clamp(3rem, 7.5vw, 7.5rem);
    --text-hero-sub: clamp(2.2rem, 5.5vw, 5rem);
    --text-section:  clamp(2rem, 4.5vw, 4.5rem);
    --text-large:    clamp(1.6rem, 3vw, 3rem);
    --text-medium:   clamp(1.2rem, 1.8vw, 1.75rem);
    --text-sub:      clamp(0.95rem, 1.2vw, 1.15rem);
    --text-body:     clamp(0.875rem, 0.95vw, 1rem);
    --text-small:    clamp(0.75rem, 0.8vw, 0.85rem);
    --text-micro:    clamp(0.625rem, 0.7vw, 0.72rem);

    /* Spacing */
    --space-xs:      0.5rem;
    --space-sm:      1rem;
    --space-md:      2rem;
    --space-lg:      4rem;
    --space-xl:      7rem;
    --space-2xl:     10rem;
    --space-3xl:     14rem;

    /* Layout */
    --container-max:  1400px;
    --container-pad:  clamp(1.5rem, 4vw, 5rem);
    --nav-height:     72px;

    /* Motion */
    --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
    --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
    --ease-in-out:    cubic-bezier(0.65, 0, 0.35, 1);

    /* Depth */
    --z-cursor:       9999;
    --z-preloader:    9000;
    --z-mobile-menu:  8000;
    --z-nav:          7000;
    --z-modal:        6000;
    --z-overlay:      100;
    --z-above:        10;
    --z-base:         1;

    /* Border Radius */
    --radius-sm:      4px;
    --radius-md:      8px;
    --radius-lg:      14px;
    --radius-xl:      20px;
    --radius-full:    9999px;
}


/* ── CSS Reset ──────────────────────────────────── */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    scroll-behavior: auto;
}

body {
    font-family: var(--font-body);
    font-weight: 400;
    font-style: normal;
    color: var(--silver);
    background-color: var(--navy-darker);
    line-height: 1.65;
    overflow-x: hidden;
    cursor: none;
}

@media (hover: none) and (pointer: coarse) {
    body { cursor: auto; }
}

a {
    color: inherit;
    text-decoration: none;
    cursor: none;
}

@media (hover: none) and (pointer: coarse) {
    a { cursor: pointer; }
}

button {
    border: none;
    background: none;
    color: inherit;
    font-family: inherit;
    cursor: none;
}

@media (hover: none) and (pointer: coarse) {
    button { cursor: pointer; }
}

img, video, svg {
    display: block;
    max-width: 100%;
}

ul, ol { list-style: none; }

input, textarea, select {
    font-family: inherit;
    font-size: inherit;
}

:focus { outline: none; }

:focus-visible {
    outline: 2px solid var(--cyan);
    outline-offset: 3px;
}

::selection {
    background: rgba(0, 212, 255, 0.2);
    color: var(--white);
}

/* Force non-italic on display font */
.font-display,
[data-split-text],
h1, h2, h3 {
    font-style: normal !important;
}

.text-cyan { color: var(--cyan); }
.text-silver { color: var(--silver-muted); }

.hide-mobile { display: inline; }
@media (max-width: 768px) {
    .hide-mobile { display: none; }
}


/* ── Background Slideshow ───────────────────────── */
.bg-slideshow {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.bg-slideshow__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    will-change: opacity;
}

.bg-slideshow__slide--active {
    opacity: 1;
}

.bg-slideshow__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.25) saturate(0.7);
    transform: scale(1.05);
}

.bg-slideshow__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(10, 15, 26, 0.4) 0%,
        rgba(10, 15, 26, 0.65) 40%,
        rgba(10, 15, 26, 0.8) 100%
    );
    z-index: 1;
}


/* ── Noise Overlay ──────────────────────────────── */
.noise-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: var(--z-overlay);
    opacity: 0.03;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 200px 200px;
}


/* ── Lenis ──────────────────────────────────────── */
html.lenis,
html.lenis body {
    height: auto;
}

.lenis.lenis-smooth {
    scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
}

.lenis.lenis-stopped {
    overflow: hidden;
}


/* ── Themed Scrollbar ──────────────────────────── */
/* Webkit (Chrome, Edge, Safari) */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--navy-darker);
    border-left: 1px solid rgba(0, 212, 255, 0.06);
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(0, 212, 255, 0.3) 0%, rgba(0, 212, 255, 0.15) 100%);
    border-radius: var(--radius-full);
    border: 2px solid var(--navy-darker);
    transition: background 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, rgba(0, 212, 255, 0.5) 0%, rgba(0, 212, 255, 0.3) 100%);
}

::-webkit-scrollbar-thumb:active {
    background: rgba(0, 212, 255, 0.6);
}

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 212, 255, 0.25) var(--navy-darker);
}