/* style.css - Basic styling for GabrielAlmeida.com */

/* Apply basic reset and font */
body {
    font-family: sans-serif; /* Use a common sans-serif font */
    line-height: 1.6; /* Improve readability */
    margin: 0; /* Remove default body margin */
    padding: 20px; /* Add some padding around the content */
    background: radial-gradient(circle at bottom, navy 0, black 100%);
    min-height: 100vh; /* Changed from height to min-height for scrolling */
    overflow-x: hidden; /* Only hide horizontal overflow, allow vertical scroll */
    color: #e0e0e0; /* Light text for readability */
    display: flex; /* Enable flexbox for centering */
    flex-direction: column; /* Stack container and rickroll elements vertically */
    justify-content: center; /* Center content horizontally */
    align-items: center; /* Center content vertically */
    text-align: center; /* Center text within the container */
    position: relative; /* Needed for pseudo-element positioning relative to body */
}

/* Moving Starfield - Flying through space effect */
.space {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    perspective: 400px;
}

/* Fast moving stars - closest layer */
.stars1 {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 3px;
    height: 3px;
    background: white;
    border-radius: 50%;
    box-shadow: 
        -200px -150px 0px 0px white, 300px -200px 0px 0px white, -350px 100px 0px 0px white,
        400px 250px 0px 0px white, -450px -300px 0px 0px white, 500px 150px 0px 0px white,
        -150px 350px 0px 0px white, 250px -350px 0px 0px white, -300px 200px 0px 0px white,
        450px -100px 0px 0px white, -500px 300px 0px 0px white, 350px 400px 0px 0px white,
        -400px -200px 0px 0px white, 200px 500px 0px 0px white, -250px -400px 0px 0px white,
        100px 300px 0px 0px white, -350px -150px 0px 0px white, 450px 200px 0px 0px white,
        -100px 450px 0px 0px white, 300px -300px 0px 0px white, -200px 150px 0px 0px white,
        400px -250px 0px 0px white, -450px 350px 0px 0px white, 150px -450px 0px 0px white,
        -300px -250px 0px 0px white, 250px 350px 0px 0px white, -400px 100px 0px 0px white,
        350px -400px 0px 0px white, -150px -350px 0px 0px white, 500px -150px 0px 0px white;
    animation: starMove1 20s linear infinite;
}

/* Medium speed stars - middle layer */  
.stars2 {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2px;
    height: 2px;
    background: white;
    border-radius: 50%;
    box-shadow: 
        -150px -100px 0px 0px white, 200px -150px 0px 0px white, -250px 50px 0px 0px white,
        300px 200px 0px 0px white, -350px -250px 0px 0px white, 400px 100px 0px 0px white,
        -100px 250px 0px 0px white, 180px -250px 0px 0px white, -220px 150px 0px 0px white,
        320px -80px 0px 0px white, -380px 220px 0px 0px white, 280px 320px 0px 0px white,
        -320px -150px 0px 0px white, 150px 380px 0px 0px white, -180px -320px 0px 0px white,
        80px 220px 0px 0px white, -280px -100px 0px 0px white, 350px 150px 0px 0px white,
        -80px 350px 0px 0px white, 220px -220px 0px 0px white, -150px 100px 0px 0px white,
        320px -200px 0px 0px white, -350px 280px 0px 0px white, 100px -350px 0px 0px white,
        -220px -200px 0px 0px white, 200px 280px 0px 0px white, -320px 80px 0px 0px white,
        280px -320px 0px 0px white, -100px -280px 0px 0px white, 380px -100px 0px 0px white;
    animation: starMove2 35s linear infinite;
}

/* Slow moving stars - distant layer */
.stars3 {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2px;
    height: 2px;
    background: rgba(255,255,255,0.8);
    border-radius: 50%;
    box-shadow: 
        -100px -80px 0px 0px rgba(255,255,255,0.8), 120px -100px 0px 0px rgba(255,255,255,0.8),
        -180px 30px 0px 0px rgba(255,255,255,0.8), 220px 150px 0px 0px rgba(255,255,255,0.8),
        -250px -180px 0px 0px rgba(255,255,255,0.8), 280px 80px 0px 0px rgba(255,255,255,0.8),
        -80px 180px 0px 0px rgba(255,255,255,0.8), 150px -180px 0px 0px rgba(255,255,255,0.8),
        -200px 100px 0px 0px rgba(255,255,255,0.8), 250px -60px 0px 0px rgba(255,255,255,0.8),
        -280px 180px 0px 0px rgba(255,255,255,0.8), 200px 250px 0px 0px rgba(255,255,255,0.8),
        -220px -120px 0px 0px rgba(255,255,255,0.8), 120px 280px 0px 0px rgba(255,255,255,0.8),
        -150px -220px 0px 0px rgba(255,255,255,0.8), 60px 200px 0px 0px rgba(255,255,255,0.8),
        -200px -80px 0px 0px rgba(255,255,255,0.8), 280px 120px 0px 0px rgba(255,255,255,0.8),
        -60px 280px 0px 0px rgba(255,255,255,0.8), 180px -200px 0px 0px rgba(255,255,255,0.8),
        -120px 80px 0px 0px rgba(255,255,255,0.8), 250px -150px 0px 0px rgba(255,255,255,0.8),
        -280px 200px 0px 0px rgba(255,255,255,0.8), 80px -280px 0px 0px rgba(255,255,255,0.8);
    animation: starMove3 50s linear infinite;
}

/* Star movement animations - expanding outward from center */
@keyframes starMove1 {
    0% { transform: scale(1) rotateZ(0deg); }
    100% { transform: scale(20) rotateZ(360deg); }
}

@keyframes starMove2 {
    0% { transform: scale(1) rotateZ(0deg); }
    100% { transform: scale(15) rotateZ(-360deg); }
}

@keyframes starMove3 {
    0% { transform: scale(1) rotateZ(0deg); }
    100% { transform: scale(10) rotateZ(180deg); }
}



/* Container for the main content */
.container {
    background: rgba(255, 255, 255, 0.95); /* Semi-transparent white for space visibility */
    backdrop-filter: blur(10px); /* Glass effect */
    -webkit-backdrop-filter: blur(10px); /* Safari support */
    padding: 30px; /* Padding inside the container */
    border-radius: 15px; /* More rounded corners for futuristic look */
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(255, 255, 255, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.4); /* Glass effect borders */
    max-width: 600px; /* Limit the width of the content */
    width: 90%; /* Ensure container takes available width up to max-width, adjusted for smaller screens */
    color: #333; /* Setting a default dark text color for the container */
    position: relative; /* Ensure container stacking context is correct */
    z-index: 10; /* Ensure container is above all background elements */
    margin-bottom: 20px; /* Add space below the main container */
    border: 1px solid rgba(255, 255, 255, 0.3); /* Subtle border */
}

/* Style the headshot image */
.headshot {
    width: 150px; /* Set a fixed width */
    height: 150px; /* Set a fixed height */
    border-radius: 0; /* Make the image square */
    object-fit: cover; /* Ensure the image covers the area without distortion */
    margin-bottom: 20px; /* Space below the image */
    border: 3px solid #ddd; /* Light grey border */
}

/* Style the name heading */
h1 {
    margin-top: 0; /* Remove default top margin */
    margin-bottom: 10px; /* Space below the name */
    color: #1a1a1a; /* Darker color for the name */
}

/* Style the tagline */
.tagline {
    font-style: italic; /* Italicize the tagline */
    color: #555; /* Medium grey color */
    margin-bottom: 15px; /* Space below the tagline */
}

/* Style individual items within the tagline */
.tagline span {
    display: inline-block; /* Allows margin and respects text-align */
    text-align: center; /* Centers the emoji and text vertically */
    margin: 0 10px; /* Adds horizontal space between items */
    vertical-align: top; /* Aligns spans nicely if they wrap */
}

/* Style the description paragraph */
.description {
    color: #444; /* Slightly darker grey for description */
    margin-bottom: 20px; /* Space below the description */
}

/* Style the Inc 5000 achievement text */
.inc-5000 {
    color: #333; /* Dark color for readability */
    margin-bottom: 20px; /* Space below the Inc 5000 text */
    font-size: 1.1em; /* Slightly larger font */
}

/* Style the LinkedIn link container */
.linkedin-link {
    display: block; /* Make it a block element for spacing */
    margin-bottom: 20px; /* Space below the link */
    color: #0077b5; /* LinkedIn blue color (applied to icon via inheritance) */
    text-decoration: none; /* Remove underline */
}

.linkedin-link:hover {
    text-decoration: none; /* Keep underline off on hover for the container */
    color: #0056b3; /* Darker blue on hover */
}

/* Style the Font Awesome LinkedIn icon specifically */
.linkedin-link .fab.fa-linkedin {
    font-size: 2em; /* Makes the icon larger (approx 32px if base font is 16px) */
    color: inherit; /* Inherits the color from the parent .linkedin-link */
    /* Vertical alignment might need adjustment depending on surrounding elements, but often aligns well by default */
    vertical-align: middle; /* Helps align the icon vertically if needed */
    transition: color 0.3s ease; /* Smooth color transition on hover */
}

/* Style the message button */
.message-button {
    display: inline-block; /* Allow setting padding and margin */
    padding: 10px 20px; /* Padding inside the button */
    background-color: #007bff; /* Blue background */
    color: #fff; /* White text */
    border: none; /* Remove default border */
    border-radius: 5px; /* Rounded corners */
    text-decoration: none; /* Remove underline if it's a link */
    cursor: pointer; /* Pointer cursor on hover */
    font-size: 16px; /* Font size */
    transition: background-color 0.3s ease; /* Smooth background transition */
}

.message-button:hover {
    background-color: #0056b3; /* Darker blue on hover */
}

/* --- Contact Modal Styles --- */

/* The Modal (background overlay) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 10; /* Sit on top of other content (like .container) */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgba(0, 0, 0, 0.6); /* Black w/ opacity */
  /* Added for smooth transition */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Modal showing state (controlled by JS) */
.modal.show {
    display: block; /* Make it visible */
    opacity: 1;
    visibility: visible;
}


/* Modal Content Box */
.modal-content {
  background: rgba(42, 42, 62, 0.95); /* Semi-transparent dark background */
  backdrop-filter: blur(15px); /* Glass effect */
  -webkit-backdrop-filter: blur(15px); /* Safari support */
  color: #e0e0e0; /* Light text */
  margin: 10% auto; /* 10% from the top and centered */
  padding: 25px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  width: 85%; /* Responsive width */
  max-width: 500px; /* Maximum width */
  border-radius: 15px;
  position: relative; /* For positioning the close button */
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  /* Added for smooth transition */
  transform: translateY(-50px);
  transition: transform 0.3s ease-out;
  z-index: 11; /* Ensure modal content is above the overlay */
}

/* Modal showing state for content */
.modal.show .modal-content {
    transform: translateY(0);
}


/* The Close Button */
.close-button {
  color: #aaa;
  position: absolute;
  top: 10px;
  right: 20px;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
  transition: color 0.2s ease;
}

.close-button:hover,
.close-button:focus {
  color: #fff; /* Brighter on hover/focus */
  text-decoration: none;
}

/* Modal Header */
.modal-content h2 {
    margin-top: 0;
    margin-bottom: 20px;
    color: #fff; /* White heading */
    text-align: center;
}

/* Modal Form Styling */
#contact-form label {
    display: block; /* Each label on its own line */
    margin-bottom: 5px;
    font-weight: bold;
    color: #ccc; /* Lighter grey for labels */
    text-align: left; /* Align labels left */
}

#contact-form input[type="text"],
#contact-form input[type="email"],
#contact-form input[type="tel"],
#contact-form textarea {
    width: 95%; /* Take most of the width */
    padding: 10px;
    margin-bottom: 15px; /* Space between fields */
    border: 1px solid #555; /* Darker border */
    border-radius: 4px;
    background-color: #33334c; /* Darker input background */
    color: #e0e0e0; /* Light text input */
    font-size: 1rem;
}

#contact-form input[type="text"]:focus,
#contact-form input[type="email"]:focus,
#contact-form input[type="tel"]:focus,
#contact-form textarea:focus {
    outline: none;
    border-color: #007bff; /* Highlight focus with theme color */
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}


#contact-form textarea {
    resize: vertical; /* Allow vertical resizing */
    min-height: 80px; /* Minimum height */
}

#contact-form button[type="submit"] {
    display: block; /* Button on its own line */
    width: 100%; /* Full width */
    padding: 12px 20px;
    background-color: #007bff; /* Match page theme button */
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    transition: background-color 0.3s ease;
    margin-top: 10px; /* Space above button */
}

#contact-form button[type="submit"]:hover {
    background-color: #0056b3; /* Darker blue on hover */
}

/* Honeypot field styling - visually hide it */
/* Added: Monday, April 14, 2025 at 05:17:40 PM EDT */
.honeypot {
    position: absolute;
    left: -5000px; /* Move it way off-screen */
    opacity: 0;
    height: 0;
    width: 0;
    overflow: hidden;
    pointer-events: none; /* Prevent accidental interaction */
}

/* --- Rickroll Section Styles --- */

/* Style for the "DO NOT CLICK" button */
#rickroll-btn {
    margin-top: 20px; /* Space above the button */
    padding: 10px 15px; /* Padding inside the button */
    background-color: #ff4d4d; /* Red background */
    color: white; /* White text */
    border: none; /* No border */
    border-radius: 5px; /* Slightly rounded corners */
    cursor: pointer; /* Pointer cursor */
    font-weight: bold;
    transition: background-color 0.3s ease; /* Smooth transition */
}

#rickroll-btn:hover {
    background-color: #cc0000; /* Darker red on hover */
}

#rickroll-btn:disabled {
    background-color: #999; /* Grey background when disabled */
    cursor: not-allowed; /* Indicate it's disabled */
}

/* Utility class to hide elements */
.hidden {
    display: none;
}

/* Style for the rickroll message */
#rickroll-msg {
    margin-top: 15px; /* Space above the message */
    color: #ffcc00; /* Yellow/gold color */
    font-weight: bold; /* Make text bold */
}

/* Style for the video container */
#rickroll-video-container {
    margin-top: 15px; /* Space above the video */
    /* The iframe itself has width/height attributes */
}

/* Specific styles for the Rickroll modal content */
.rickroll-content {
    /* Inherits base styles from .modal-content */
    /* Example: Center text and elements within the Rickroll modal */
    text-align: center;
    /* Optional: Slightly different background if desired */
    /* background-color: #3a3a4e; */
}

/* Style for the Rickroll modal close button */
#rickroll-close-btn {
    display: block; /* Make it a block element */
    margin: 20px auto 0; /* Center horizontally with top margin */
    padding: 10px 15px; /* Padding inside the button */
    background-color: #4CAF50; /* Green background */
    color: white; /* White text */
    border: none; /* No border */
    border-radius: 5px; /* Rounded corners */
    cursor: pointer; /* Pointer cursor on hover */
    font-size: 14px; /* Adjust font size as needed */
    transition: background-color 0.3s ease; /* Smooth transition */
}

#rickroll-close-btn:hover {
    background-color: #45a049; /* Darker green on hover */
}

/* --- End of Styles --- */
/* Note: Removed old star background effect that targeted .main */