/* --- Global Theme --- */
body {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    background-color: #0b0f19; /* A deep navy fallback instead of pure black */
    background-image: url("../img/pexels-stein-egil-liland-3374210.jpg");
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    color: white;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main{
	flex: 1;
}

/* --- Table Glassmorphism & Readability --- */
.tutorial-table {
    background-color: rgba(0, 0, 0, 0.4); /* Darker base for contrast */
    backdrop-filter: blur(8px);
    border: 1px solid rgba(0, 170, 255, 0.2);
    border-radius: 10px;
    overflow: hidden; /* Keeps corners rounded */
    margin-bottom: 2rem;
}

.tutorial-table th {
    background-color: rgba(0, 170, 255, 0.2);
    color: #00d4ff;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.85rem;
    padding: 15px;
}

.tutorial-table td {
    padding: 12px 15px;
    color: rgba(255, 255, 255, 0.9);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    font-family: 'Courier New', Courier, monospace; /* Better for hex/dec codes */
}

/* Zebra striping for tracking long rows */
.tutorial-table tr:nth-child(even) {
    background-color: rgba(255, 255, 255, 0.03);
}

.tutorial-table tr:hover {
    background-color: rgba(0, 212, 255, 0.1);
    transition: background 0.2s ease;
}

.warning-highlight {
    background-color: #440000;
    color: #ff0000;
    padding: 0 4px;
    border-radius: 3px;
    font-weight: bold;
}

/* Navigation link hover effects */
.navbar-nav .nav-link {
    position: relative;
    transition: color 0.3s ease, text-shadow 0.3s ease;
    margin: 0 5px;
}

.navbar-nav .nav-link:hover {
    color: #00d4ff !important; 
    text-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
}

/* Optional: Animated underline on hover */
.navbar-nav .nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: #00d4ff;
    transition: width 0.3s ease;
}

.navbar-nav .nav-link:hover::after {
    width: 100%;
}

/* Update the glass panel to be slightly more opaque for "no-image" mode */
.glass-panel {
    background-color: rgba(0, 119, 221, 0.15); /* Slightly thicker blue */
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    padding: 2rem;
}

/* Glassmorphism for Nav and Footer */
.glass-nav {
    background-color: rgba(0, 0, 0, 0.8) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px); /* Support for Safari */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.glass-footer {
    background-color: rgba(0, 0, 0, 0.6) !important;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.8) !important;
    padding: 4rem 0; /* Increased from 3rem to 4rem */
    margin-top: 6rem; /* Push it down a bit further from the content */
    width: 100%;
}



/* --- Utilities --- */
.codeblock {
    font-family: 'Courier New', Courier, monospace;
    background: rgba(0, 0, 0, 0.5);
    padding: 1rem;
    border-radius: 8px;
    border-left: 4px solid #1b6ec2;
}

/* Container for the preformatted block */
pre {
    margin-top: 1rem;
    margin-bottom: 1rem;
    background: #0f141c;                      /* Deep console slate/black */
    border-left: 4px solid #0dcaf0;           /* Accent line matching text-info */
    border-radius: 6px;
    padding: 1.2rem;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.8);
    overflow-x: auto;                         /* Enables horizontal scrolling for long commands */
}

/* Code styling inside the block */
code.terminal-block {
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    color: #f8f9fa;                           /* Crisp off-white for syntax clarity */
    font-size: 0.9rem;
    line-height: 1.5;
    display: block;                           /* Forces it to occupy the full block space */
    white-space: pre-wrap;                    /* Fallback to wrap text if it hits massive lengths */
}

/* Optional: Add a subtle prompt character indicator via CSS pseudo-elements */
code.terminal-block::before {
    content: "$ ";
    color: #6c757d;                           /* Muted gray for the prompt symbol */
    font-weight: bold;
}

/* For file paths that sit on their own line */
.path-block {
    display: inline-block;
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    background-color: rgba(255, 255, 255, 0.05);
    color: #0dcaf0; /* Cyan text-info */
    padding: 0.25rem 0.6rem;
    margin: 0.5rem 0 0.5rem 1rem; /* Indents it slightly to the right */
    border-left: 3px solid #0dcaf0; /* Sleek accent line */
    border-radius: 0 4px 4px 0;
    font-size: 0.9em;
}

/* ==========================================================================
   IMAGE SLIDE-IN ANIMATIONS
   ========================================================================== */

/* Left-sliding circle image (Wrench) */
.circle.slide-left-img {
    position: absolute;
    border-radius: 50%;
    background-color: rgb(143, 168, 227);
    width: 400px;
    height: 400px;
    margin-top: 10px;
    z-index: -1;
    background-clip: padding-box;
    border: solid 2px transparent;
    box-shadow: 20px 20px 20px rgba(46, 54, 68, 0.13);
    
    /* Replaced fadeIn with the synchronized left slide */
    animation: slideFromLeft 1200ms cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

/* Right-sliding circle image (Worker) */
.circle2.slide-right-img {
    margin-top: 400px;
    position: absolute;
    border-radius: 50%;
    background-color: rgb(238, 255, 155);
    width: 400px;
    height: 400px;
    z-index: -1;
    text-align: center;
    background-clip: padding-box;
    border: solid 2px transparent;
    box-shadow: 20px 20px 20px rgba(46, 54, 68, 0.13);
    
    /* Replaced fadeIn with a synchronized right slide, delayed slightly */
    animation: slideFromRight 1300ms cubic-bezier(0.25, 1, 0.5, 1) 100ms forwards;
}

/* --- Animations --- */
.fade-in {
    animation: fadeIn 1.2s ease-in;
}

.slide-in-left {
    animation: slideFromLeft 1s ease-out;
}

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

@keyframes slideFromLeft {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ==========================================================================
   TIMING & SMOOTHNESS TWEAKS FOR CURRENT ANIMATIONS
   ========================================================================== */

@keyframes slideFromLeft {
    from {
        opacity: 0;
        transform: translateX(-100px); /* Reduced from -800px to avoid aggressive jitter */
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideFromRight {
    from {
        opacity: 0;
        transform: translateX(100px); /* Smoother entrance distance */
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ==========================================================================
   HOMEPAGE MODERN BUBBLE COMPONENT ARCHITECTURE
   ========================================================================== */

   /* ==========================================================================
      LEGACY REBORN ARCHITECTURE (ARTISTIC OVERLAPS)
      ========================================================================== */

   /* Massive, organic art circles from your original layout */
   .legacy-art-circle {
       width: 420px !important;
       height: 420px !important;
       max-width: 100%;
       border-radius: 50% !important;
       object-fit: cover;
       box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
       background-color: rgb(143, 168, 227);
       border: solid 2px transparent;
       background-clip: padding-box;
       transition: transform 0.5s ease;
   }

   .legacy-art-circle.variant-yellow {
       background-color: rgb(238, 255, 155);
   }

   /* Hovering effect to make the art feel dynamic */
   .legacy-art-circle:hover {
       transform: scale(1.03) rotate(1deg);
   }

   /* The floating glass panels that slice into the circles */
   .floating-glass-overlay {
       background: rgba(0, 40, 90, 0.25) !important;
       backdrop-filter: blur(15px) saturate(130%);
       -webkit-backdrop-filter: blur(15px) saturate(130%);
       border: 1px solid rgba(255, 255, 255, 0.1);
       border-radius: 16px;
       padding: 2.5rem;
       box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
       
       /* Pulls the text block heavily over the image zone on desktop */
       position: relative;
       z-index: 5;
       margin-left: -120px;
   }

   /* Reverse overlap adjustment for the second section */
   .floating-glass-overlay.variant-left {
       margin-left: 0;
       margin-right: -120px;
   }

   /* Handles layout cleanup for mobile screen profiles */
   @media (max-width: 767.98px) {
       .legacy-art-circle {
           width: 280px !important;
           height: 280px !important;
           margin-bottom: 1.5rem;
       }
       .floating-glass-overlay, 
       .floating-glass-overlay.variant-left {
           margin-left: 0 !important;
           margin-right: 0 !important;
           padding: 1.5rem;
           text-align: center;
       }
   }

.home-circle-img.variant-yellow {
    background-color: rgb(238, 255, 155);
}

/* Typography Overrides to isolate from legacy classes */
.home-hero-text {
    font-size: 2.5rem;
    font-weight: 700;
    color: #ffffff;
    text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}

.home-sub-text {
    font-size: 1.5rem;
    color: rgba(255, 255, 255, 0.85);
    margin-top: 1rem;
}

.home-value-text {
    font-size: 2.2rem;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 0.5rem;
    text-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

.home-description-text {
    font-size: 1.35rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
}

/* ==========================================================================
   UPDATED PHYSICAL ANIMATIONS USING TRANSFORM DISTANCE
   ========================================================================== */

.slide-in-left {
    animation: homeSlideLeft 1100ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.slide-in-right {
    animation: homeSlideRight 1100ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.slide-in-bottom {
    animation: homeSlideBottom 1200ms cubic-bezier(0.16, 1, 0.3, 1) 100ms forwards;
}

/* ==========================================================================
   DRAMATIC VIEWPORT-BASED ENTRIES (SWEEPING DISTANCE)
   ========================================================================== */

@keyframes homeSlideLeft {
    from {
        opacity: 0;
        transform: translateX(-35vw); /* Starts 35% of the screen width to the left */
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes homeSlideRight {
    from {
        opacity: 0;
        transform: translateX(35vw);  /* Starts 35% of the screen width to the right */
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes homeSlideBottom {
    from {
        opacity: 0;
        transform: translateY(15vh);  /* Starts 15% of the screen height below */
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==========================================================================
   CONTACT FORM & ACCENT UTILITIES
   ========================================================================== */

/* Styling form inputs to stay dark and translucent inside the bubble card */
.glass-input {
    background-color: rgba(0, 0, 0, 0.4) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
}

.glass-input:focus {
    border-color: #00d4ff !important;
    box-shadow: 0 0 10px rgba(0, 212, 255, 0.25) !important;
    background-color: rgba(0, 0, 0, 0.6) !important;
}

/* Light gray styling for input placeholders */
.glass-input::placeholder {
    color: rgba(255, 255, 255, 0.35);
}

/* Vibrant Cyan Button to accent the form */
.btn-cyan {
    background-color: #00d4ff;
    color: #0b0f19;
    border: none;
    border-radius: 8px;
    transition: background-color 0.2s ease, transform 0.1s ease;
}

.btn-cyan:hover {
    background-color: #00bfe6;
    color: #0b0f19;
    transform: translateY(-2px);
}

.btn-cyan:active {
    transform: translateY(0);
}

/* Hover accent utility links */
.hover-cyan {
    transition: color 0.2s ease;
}
.hover-cyan:hover {
    color: #00d4ff !important;
}