/* main.css */
html {
    overflow-y: scroll; /* Prevents jumping when pages do or don't have scrollbars */
    overflow-x: hidden;
    max-width: 100%;
}

/* Custom cursor ONLY on non-touch devices */
@media (hover: hover) and (pointer: fine) {
    body { cursor: none; }
    a, button, input, textarea, select, label { cursor: none; }
}

body {
    overflow-x: hidden;
    max-width: 100%;
    -webkit-tap-highlight-color: transparent; /* remove iOS blue tap highlight */
}

/* Mobile menu: hidden by default, visible when .is-open */
.mobile-menu,
.mobile-menu-overlay {
    display: none;
}

.mobile-menu.is-open {
    display: flex !important;
}

.mobile-menu-overlay.is-open {
    display: block !important;
}

/* Ensure the hamburger button is always visible below xl breakpoint */
.mobile-menu-btn {
    display: flex;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation; /* fast tap, no 300ms delay on iOS */
    min-width: 44px;  /* iOS minimum tap target */
    min-height: 44px;
    align-items: center;
    justify-content: center;
}

/* Prevent FOUC Flash on Navigation Links */
.nav-link {
    color: #c4c7c5;
    text-decoration: none;
}
.nav-link.active {
    color: #ffffff;
}

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.glass-nav {
    background: rgba(14, 14, 14, 0.6);
    backdrop-filter: blur(20px);
}

.hero-gradient {
    background: radial-gradient(circle at 50% 50%, rgba(255, 145, 93, 0.1) 0%, rgba(14, 14, 14, 0) 70%);
}

.text-glow {
    text-shadow: 0 0 20px rgba(255, 145, 93, 0.3);
}

.logo-container {
    display: flex;
    align-items: center;
    gap: 14px;
    color: #FF6600;
}

.logo-box {
    border: 3px solid #FF6600;
    border-radius: 12px;
    padding: 4px 10px;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: -0.05em;
}

.logo-text {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 2.25rem;
    letter-spacing: 0.15em;
    line-height: 1;
}

/* Custom Cursor — only visible on hover-capable devices */
.cursor-dot {
    width: 8px; height: 8px; background: #FF6600; border-radius: 50%;
    position: fixed; pointer-events: none; z-index: 1000;
    transform: translate(-50%, -50%);
    transition: width 0.2s, height 0.2s;
    box-shadow: 0 0 10px #FF6600;
}

.cursor-outline {
    width: 40px; height: 40px; border: 1px solid rgba(255, 102, 0, 0.5); border-radius: 50%;
    position: fixed; pointer-events: none; z-index: 999;
    transform: translate(-50%, -50%);
    transition: width 0.2s, height 0.2s, background-color 0.2s;
}

.cursor-hover .cursor-dot { 
    width: 6px; height: 6px; 
    background: #ffffff;
    box-shadow: 0 0 10px #ffffff;
}

.cursor-hover .cursor-outline { 
    width: 60px; height: 60px; 
    background-color: rgba(255, 102, 0, 0.15); 
    border-color: transparent; 
}

/* Reveal on Scroll */
.reveal { 
    opacity: 0; 
    transform: translateY(40px); 
    transition: all 1s cubic-bezier(0.16, 1, 0.3, 1); 
}
.reveal.active { 
    opacity: 1; 
    transform: translateY(0); 
}

/* 3D Tilt Cards */
.tilt-card { 
    transform-style: preserve-3d; 
    transition: transform 0.1s ease-out; 
    position: relative;
}
.tilt-card-inner { 
    transform: translateZ(30px); 
    position: relative;
    z-index: 10;
}
.tilt-glow { 
    position: absolute; 
    width: 300px; height: 300px; 
    background: radial-gradient(circle, rgba(255, 145, 93, 0.2) 0%, transparent 70%); 
    border-radius: 50%; 
    pointer-events: none; 
    opacity: 0; 
    transition: opacity 0.3s; 
    transform: translate(-50%, -50%); 
    z-index: 0; 
}
.tilt-card:hover .tilt-glow { 
    opacity: 1; 
}

/* Magnetic buttons */
.magnetic-wrap {
    display: inline-block;
}
.magnetic-btn { 
    display: inline-block; 
    transition: transform 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94); 
}

/* Details Pages Headers */
.page-header-gradient {
    background: linear-gradient(180deg, rgba(255,145,93,0.05) 0%, rgba(14,14,14,0) 100%);
    border-bottom: 1px solid rgba(72, 72, 71, 0.2);
}

/* Particle Context */
#particles-canvas { 
    position: absolute; 
    top: 0; left: 0; 
    width: 100%; height: 100%; 
    pointer-events: none; 
    z-index: 0; 
}