/**
 * sinanasmali.com — Custom Styles
 * Tailwind handles the bulk; this file is for effects Tailwind can't cover.
 */

/* Global: prevent horizontal scroll on all devices */
html, body {
    overflow-x: hidden;
    max-width: 100vw;
}

/* Blueprint grid background */
.blueprint-grid {
    background-image: linear-gradient(to right, rgba(0, 200, 255, 0.05) 1px, transparent 1px),
                      linear-gradient(to bottom, rgba(0, 200, 255, 0.05) 1px, transparent 1px);
    background-size: 40px 40px;
}

/* Isometric perspective frame for hero image */
.isometric-frame {
    transform: none;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5),
                -1px -1px 0px rgba(0, 200, 255, 0.2);
}

/* Cyan text glow */
.text-glow {
    text-shadow: 0 0 15px rgba(0, 200, 255, 0.4);
}

/* Smooth page transitions */
html {
    scroll-behavior: smooth;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 6px;
}
::-webkit-scrollbar-track {
    background: #0a0e1a;
}
::-webkit-scrollbar-thumb {
    background: #1b1f2c;
    border-radius: 0;
}
::-webkit-scrollbar-thumb:hover {
    background: #00c8ff;
}

/* Glass panel effect for note cards */
.glass-panel {
    background: rgba(27, 31, 44, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* Blueprint background variant (24px grid) */
.blueprint-bg {
    background-image: linear-gradient(rgba(0, 200, 255, 0.03) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(0, 200, 255, 0.03) 1px, transparent 1px);
    background-size: 24px 24px;
}

/* Material Symbols base config */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}

/* Line clamp utility */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ============================================
   SHARED: Three.js Portfolio Page Layout
   Used by: construction, www, 3d pages
   ============================================ */

/* Content constrained to left 2/3 on desktop */
@media (min-width: 1024px) {
    .content-left {
        max-width: 64%;
        margin-left: 0;
        margin-right: auto;
    }
}

/* Three.js canvas — fixed, right 1/3 of viewport */
#threejs-wrap {
    position: fixed;
    top: 0;
    right: 0;
    width: 33.333%;
    height: 100vh;
    z-index: 0;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.4) 12%, rgba(0,0,0,1) 35%);
    mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.4) 12%, rgba(0,0,0,1) 35%);
}
#threejs-wrap canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
}

/* On mobile: hide Three.js completely */
@media (max-width: 767px) {
    #threejs-wrap {
        display: none !important;
    }
}

/* Progress slider HUD */
#progress-hud {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 50;
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(10,14,26,0.85);
    backdrop-filter: blur(8px);
    padding: 8px 16px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    pointer-events: auto;
}
#progress-hud input[type="range"] {
    width: 120px;
    cursor: pointer;
}
#progress-hud .pct {
    font-weight: 700;
    min-width: 30px;
    text-align: right;
}
@media (max-width: 767px) {
    #progress-hud { display: none; }
}