/* Global Scrollbar */

::-webkit-scrollbar {
    width: 4px;
}

::-webkit-scrollbar-track {
    background: #FFFFFF;
}

::-webkit-scrollbar-thumb {
    background: #000000;
}

/* Utilities */
.text-vertical {
    writing-mode: vertical-rl;
    text-orientation: mixed;
}

.variable-font-hover {
    transition: font-weight 0.4s cubic-bezier(0.16, 1, 0.3, 1), letter-spacing 0.4s ease;
}

.variable-font-hover:hover {
    font-weight: 800;
    letter-spacing: -2px;
}

/* Architecture / Grid */
.architectural-grid {
    background-image:
        linear-gradient(#E5E5E5 1px, transparent 1px),
        linear-gradient(90deg, #E5E5E5 1px, transparent 1px);
    background-size: 80px 80px;
    background-position: -1px -1px;
}

.technical-drawing-circle {
    border: 1px solid rgba(0, 0, 0, 0.8);
    position: absolute;
    border-radius: 50%;
}

.technical-line {
    position: absolute;
    background-color: rgba(0, 0, 0, 0.8);
}

.work-item:hover .work-preview {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Effects */
.wireframe-glow {
    filter: drop-shadow(0 0 15px rgba(0, 212, 255, 0.4));
}

.monolithic-text {
    line-height: 0.85;
    letter-spacing: -0.02em;
}

.glass-strip {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

/* Animations */
.wireframe-spin {
    animation: spin-slow 20s linear infinite;
    transform-style: preserve-3d;
}

@keyframes spin-slow {
    0% {
        transform: rotateX(60deg) rotateZ(0deg);
    }

    100% {
        transform: rotateX(60deg) rotateZ(360deg);
    }
}

/* Ticker */
.ticker-wrap {
    overflow: hidden;
    white-space: nowrap;
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.ticker {
    display: inline-block;
    animation: ticker 30s linear infinite;
}

.ticker-item {
    display: inline-flex;
    align-items: center;
    margin-right: 4rem;
    filter: grayscale(100%);
    opacity: 0.5;
    transition: all 0.3s ease;
}

.ticker-wrap:hover .ticker-item {
    filter: grayscale(0%);
    opacity: 0.8;
}

@keyframes ticker {
    0% {
        transform: translate3d(0, 0, 0);
    }

    100% {
        transform: translate3d(-50%, 0, 0);
    }
}

/* Cursor Hover */
@media (hover: hover) {

    a:hover,
    button:hover,
    .work-item:hover {
        cursor: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="10" stroke="%23000000" stroke-width="1"/><circle cx="12" cy="12" r="2" fill="%2312446B"/></svg>') 12 12, auto;
    }
}

/* Stitch Projects CSS */
.vertical-text {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
}

.blueprint-overlay {
    opacity: 0;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(2px);
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    mask-image: radial-gradient(circle at center, black 40%, transparent 80%);
    -webkit-mask-image: radial-gradient(circle at center, black 40%, transparent 80%);
    pointer-events: none;
}

.dark .blueprint-overlay {
    background: rgba(10, 10, 10, 0.9);
}

.project-card:hover .blueprint-overlay {
    opacity: 1;
}

.shift-x-positive {
    transform: translateX(40px);
}

.shift-x-negative {
    transform: translateX(-40px);
}

.technical-line {
    position: absolute;
    background-color: #000;
    opacity: 0.3;
}

.dark .technical-line {
    background-color: #fff;
}

.crosshair {
    position: relative;
}

.crosshair::before,
.crosshair::after {
    content: '';
    position: absolute;
    background: currentColor;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.crosshair::before {
    width: 100%;
    height: 1px;
}

.crosshair::after {
    width: 1px;
    height: 100%;
}

.grid-bg {
    background-image: linear-gradient(to right, #EAEAEA 1px, transparent 1px), linear-gradient(to bottom, #EAEAEA 1px, transparent 1px);
    background-size: 100px 100px;
}

.dark .grid-bg {
    background-image: linear-gradient(to right, #222222 1px, transparent 1px), linear-gradient(to bottom, #222222 1px, transparent 1px);
}

.blueprint-label {
    font-size: 9px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #666;
}

.dark .blueprint-label {
    color: #888;
}