/* Custom styles for Open Edge Consulting */

/* Smooth scrolling for the entire page */
html {
    scroll-behavior: smooth;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #0f172a;
}

::-webkit-scrollbar-thumb {
    background: #334155;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #475569;
}

/* Focus styles for accessibility */
*:focus-visible {
    outline: 2px solid #22d3ee;
    outline-offset: 2px;
}

/* Selection color */
::selection {
    background: #22d3ee;
    color: #0f172a;
}

/* Loading spinner for form button */
.spinner {
    width: 20px;
    height: 20px;
    border: 2px solid transparent;
    border-top-color: currentColor;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Form input autofill styles */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus {
    -webkit-text-fill-color: #ffffff;
    -webkit-box-shadow: 0 0 0px 1000px #1e293b inset;
    transition: background-color 5000s ease-in-out 0s;
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.animate-fade-in-up {
    animation: fadeInUp 0.6s ease-out forwards;
}

.animate-fade-in {
    animation: fadeIn 0.6s ease-out forwards;
}

/* Stagger animation delays */
.animation-delay-100 { animation-delay: 100ms; }
.animation-delay-200 { animation-delay: 200ms; }
.animation-delay-300 { animation-delay: 300ms; }
.animation-delay-400 { animation-delay: 400ms; }
.animation-delay-500 { animation-delay: 500ms; }

/* Hero gradient overlay enhancement */
.hero-gradient {
    background: linear-gradient(
        to bottom,
        rgba(15, 23, 42, 0.7) 0%,
        rgba(15, 23, 42, 0.5) 50%,
        rgba(15, 23, 42, 1) 100%
    );
}

/* Glass effect */
.glass {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Card hover glow effect */
.card-glow {
    position: relative;
}

.card-glow::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, rgba(34, 211, 238, 0.5), rgba(236, 72, 153, 0.5));
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    -webkit-mask-composite: xor;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.card-glow:hover::before {
    opacity: 1;
}

/* Mobile menu transition */
#mobile-menu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

#mobile-menu.open {
    max-height: 300px;
}

/* Button ripple effect */
.btn-ripple {
    position: relative;
    overflow: hidden;
}

.btn-ripple::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(255, 255, 255, 0.3) 0%, transparent 60%);
    opacity: 0;
    transform: scale(0);
    transition: transform 0.5s ease, opacity 0.5s ease;
}

.btn-ripple:active::after {
    opacity: 1;
    transform: scale(2);
    transition: transform 0s, opacity 0s;
}

/* Gradient text */
.gradient-text {
    background: linear-gradient(135deg, #22d3ee, #ec4899);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Print styles */
@media print {
    nav,
    #contatti,
    footer {
        display: none;
    }

    body {
        background: white;
        color: black;
    }

    section {
        page-break-inside: avoid;
    }
}

/* ============================================
   BLUEPRINT / TECHNICAL DRAWING STYLE
   ============================================ */

/* Layout con colonne laterali blueprint */
.blueprint-layout {
    min-height: 100vh;
    padding-top: 64px; /* Spazio per navbar fixed */
    padding-left: 48px; /* Spazio per sidebar sinistra fixed */
    padding-right: 48px; /* Spazio per sidebar destra fixed */
}

/* Sidebar fixed che rimangono sempre visibili */
.blueprint-sidebar-left,
.blueprint-sidebar-right {
    position: fixed;
    top: 64px; /* Sotto la navbar */
    bottom: 0;
    width: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 40;
}

.blueprint-sidebar-left {
    left: 0;
    border-right: 1px solid rgba(148, 163, 184, 0.3);
    background:
        #0f172a
        repeating-linear-gradient(
            -45deg,
            transparent,
            transparent 5px,
            rgba(148, 163, 184, 0.2) 5px,
            rgba(148, 163, 184, 0.2) 6px
        );
}

.blueprint-sidebar-right {
    right: 0;
    border-left: 1px solid rgba(148, 163, 184, 0.3);
    background:
        #0f172a
        repeating-linear-gradient(
            45deg,
            transparent,
            transparent 5px,
            rgba(148, 163, 184, 0.2) 5px,
            rgba(148, 163, 184, 0.2) 6px
        );
}

/* Contenuto principale */
.blueprint-content {
    min-width: 0;
    overflow-x: hidden;
}

/* Testo verticale nelle colonne - sempre centrato */
.blueprint-sidebar-text {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-family: 'IBM Plex Mono', 'Courier New', monospace;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgba(236, 72, 153, 0.9);
    white-space: nowrap;
}

.blueprint-sidebar-left .blueprint-sidebar-text {
    transform: rotate(180deg);
}

/* Responsive: nascondi colonne su schermi piccoli */
@media (max-width: 1024px) {
    .blueprint-layout {
        padding-top: 64px;
        padding-left: 0;
        padding-right: 0;
    }

    .blueprint-sidebar-left,
    .blueprint-sidebar-right {
        display: none;
    }
}

/* Pattern griglia puntinata - effetto carta millimetrata */
.blueprint-grid {
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
    background-size: 24px 24px;
}

/* Pattern griglia più evidente per sezioni specifiche */
.blueprint-grid-strong {
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
    background-size: 20px 20px;
}

/* Card con stile blueprint */
.blueprint-card {
    position: relative;
    border: 1px dashed rgba(148, 163, 184, 0.3);
    background: rgba(30, 41, 59, 0.4);
}

/* Angoli marcati con "+" */
.blueprint-card::before,
.blueprint-card::after {
    position: absolute;
    font-family: 'IBM Plex Mono', 'Courier New', monospace;
    font-size: 10px;
    color: rgba(148, 163, 184, 0.4);
    pointer-events: none;
}

.blueprint-card::before {
    content: '+';
    top: 6px;
    left: 8px;
}

.blueprint-card::after {
    content: '+';
    bottom: 6px;
    right: 8px;
}

/* Angoli aggiuntivi (usa elementi span dentro la card) */
.blueprint-corner-tl,
.blueprint-corner-tr,
.blueprint-corner-bl,
.blueprint-corner-br {
    position: absolute;
    font-family: 'IBM Plex Mono', 'Courier New', monospace;
    font-size: 10px;
    color: rgba(148, 163, 184, 0.4);
    pointer-events: none;
}

.blueprint-corner-tl { top: 6px; left: 8px; }
.blueprint-corner-tr { top: 6px; right: 8px; }
.blueprint-corner-bl { bottom: 6px; left: 8px; }
.blueprint-corner-br { bottom: 6px; right: 8px; }

/* Bordo tratteggiato generico */
.blueprint-border {
    border: 1px dashed rgba(148, 163, 184, 0.3);
}

.blueprint-border-bottom {
    border-bottom: 1px dashed rgba(148, 163, 184, 0.3);
}

.blueprint-border-top {
    border-top: 1px dashed rgba(148, 163, 184, 0.3);
}

/* Linee decorative verticali */
.blueprint-lines {
    position: relative;
}

.blueprint-lines::before,
.blueprint-lines::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: repeating-linear-gradient(
        to bottom,
        rgba(148, 163, 184, 0.2) 0px,
        rgba(148, 163, 184, 0.2) 4px,
        transparent 4px,
        transparent 8px
    );
}

.blueprint-lines::before {
    left: 0;
}

.blueprint-lines::after {
    right: 0;
}

/* Numero di sezione stile tecnico */
.blueprint-number {
    font-family: 'IBM Plex Mono', 'Courier New', monospace;
    font-size: 11px;
    font-weight: 500;
    color: rgba(34, 211, 238, 0.7);
    letter-spacing: 0.05em;
}

/* Label tecnico */
.blueprint-label {
    font-family: 'IBM Plex Mono', 'Courier New', monospace;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(148, 163, 184, 0.6);
}

/* Separatore tratteggiato orizzontale */
.blueprint-separator {
    height: 1px;
    background: repeating-linear-gradient(
        to right,
        rgba(148, 163, 184, 0.3) 0px,
        rgba(148, 163, 184, 0.3) 6px,
        transparent 6px,
        transparent 12px
    );
}

/* Hover effect per card blueprint */
.blueprint-card:hover {
    border-color: rgba(34, 211, 238, 0.4);
    background: rgba(30, 41, 59, 0.6);
}

.blueprint-card:hover::before,
.blueprint-card:hover::after {
    color: rgba(34, 211, 238, 0.6);
}