/* Basic Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    cursor: none !important; /* Use * and !important for max effect */
}

body {
  cursor: url("assets/point.png"), format('png');
}

/* Custom Font Definition */
@font-face {
    font-family: 'AnkaHacker'; /* Name you'll use in CSS */
    src: url('assets/ankahacker-r.ttf') format('truetype'); /* Path to your font file */
    font-weight: normal;
    font-style: normal;
}

html, body {
    height: 100%;
    width: 100%;
    overflow: hidden; /* Prevent scrollbars from the video */
    font-family: 'AnkaHacker', sans-serif; /* Apply custom font */
    color: white; /* Default text color */
}
{
    
}

/* Style the custom cursor element */
#custom-cursor {
    position: fixed;
    width: 25px; /* Keep size reasonable for interaction */
    height: 25px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.4); /* Slightly more subtle core */
    /* MASSIVELY INCREASED GLOW */
    box-shadow: 0 0 40px 15px rgba(255, 255, 255, 0.7), /* Outer Layer 1 (Wide, Soft) */
                0 0 15px 5px rgba(255, 255, 255, 0.8),  /* Outer Layer 2 (Medium) */
                0 0 5px 2px rgba(255, 255, 255, 0.9) inset; /* Inner Glow */
    pointer-events: none;
    left: 0;
    top: 0;
    /* Ensure centering transform is always present */
    transform: translate(-50%, -50%) scale(1);
    z-index: 9999;
    animation: pulseAnimation 1.6s infinite ease-in-out; /* Slightly faster pulse */
    transition: transform 0.05s linear; /* Smoother following */
}

/* Define the pulsating animation with MORE GLOW */
@keyframes pulseAnimation {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.7;
        box-shadow: 0 0 40px 15px rgba(255, 255, 255, 0.7),
                    0 0 15px 5px rgba(255, 255, 255, 0.8),
                    0 0 5px 2px rgba(255, 255, 255, 0.9) inset;
    }
    50% {
        /* Pulse scales up, glow expands dramatically */
        transform: translate(-50%, -50%) scale(1.5);
        opacity: 1;
        box-shadow: 0 0 70px 30px rgba(255, 255, 255, 0.85), /* Huge Outer Glow */
                    0 0 30px 10px rgba(255, 255, 255, 0.9),  /* Big Medium Glow */
                    0 0 10px 4px rgba(255, 255, 255, 1) inset; /* Bright Inner */
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.7;
         box-shadow: 0 0 40px 15px rgba(255, 255, 255, 0.7),
                     0 0 15px 5px rgba(255, 255, 255, 0.8),
                     0 0 5px 2px rgba(255, 255, 255, 0.9) inset;
    }
}

/* Container for trail dots */
#cursor-trail-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9998;
}

/* Style for the trail dots */
.trail-dot {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.7);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.6);
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, -50%) scale(1);
    /* Set a LONGER base duration for the fade/shrink */
    /* The actual duration will often be randomized by JS */
    transition: opacity 1.5s ease-out, transform 1.5s ease-out; /* e.g., max 1.5 seconds */
    z-index: 9998;
}

/* State when trail dot is active (appearance set mostly by JS now) */
.trail-dot.active {
    /* We mostly rely on JS to set initial opacity/transform now,
       but keep opacity: 1 as a fallback/base */
    opacity: 1;
}
/* Background Video Styling */
#bg-video {
    position: fixed;
    top: 0;              /* Position from top-left */
    left: 0;
    width: 100vw;         /* Set width to 100% of viewport width */
    height: 100vh;        /* Set height to 100% of viewport height */
    z-index: -100;
    object-fit: cover;    /* Maintain aspect ratio, cover the area, crop if needed */
    filter: brightness(1.0); /* Optional: Adjust brightness */
}

/* Content Overlay */
.content-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* Ensure content is above video */
}

/* Logo Styling */
#logo {
    position: absolute;
    top: 30px; /* Adjust position */
    right: 24px; /* Adjust position */
    width: 250px; /* Adjust size as needed */
    height: auto;
    filter: blur(5px); /* Initial blur effect */
    transition: filter 0.4s ease; /* Smooth transition for unblur */

    cursor: none !important; /* Explicitly hide cursor for logo too */

}

#logo:hover {
    filter: blur(0px); /* Remove blur on hover */
}

/* About Button Styling */
#about-button {
    position: absolute;
    top: 30px; /* Adjust position */
    left: 30px; /* Adjust position */
    background-color: rgba(0, 0, 0, 0.6); /* Semi-transparent black */
    color: white;
    border: 1px solid white;
    padding: 10px 20px;
    font-family: 'AnkaHacker', sans-serif; /* Apply custom font */
    font-size: 1rem;
    cursor: none !important; /* Explicitly hide cursor for logo too */

    transition: background-color 1.0s ease;
    transition: filter 0.5s ease;
    z-index: 2; /* Ensure it's above the panel initially */
    filter: blur(2px);
}

#about-button:hover {
    background-color: rgba(255, 255, 255, 0.2); /* Slight change on hover */
    filter: blur(0px);
}

/* About Panel Styling */
.about-panel {
    position: absolute;
/*    bottom: 30px; */
    top: 70px;
    left: 30px; /* Align with button */
    width: 425px; /* Adjust width as needed */
    max-width: 80%; /* Ensure it doesn't overflow small screens */
    height: auto; /* Adjust based on content */
    max-height: 70vh; /* Max height to prevent overflow */
    background-color: rgba(0, 0, 0, 0.85); /* Darker background */
    color: white;
    border: 1px solid white;
    padding: 25px;
    font-family: 'AnkaHacker', sans-serif;
    font-size: 0.9rem;
    line-height: 1.4;
    overflow-y: auto; /* Add scroll if content exceeds max-height */
    filter: blur(5px); /* Initial blur effect */
    /* Animation Setup */
    opacity: 0; /* Start hidden */
/*    transform: translateY(100%); */
    visibility: hidden; /* Use visibility for better accessibility */
    transition: opacity 0.5s ease-out, transform 2.5s ease-out, visibility 0s 2.5s; /* Smooth slide and fade */
    z-index: 10; /* Ensure panel is above other elements when active */
}

/* Style for when the panel is active/visible */
.about-panel.active {
    opacity: 1;
/*    transform: translateY(calc(0% - 10px)); */
    filter: blur(0px); /* Initial blur effect */
    top: 70px;
    visibility: visible; /* Make visible */
    transition: opacity 0.5s ease-out, transform 0.5s ease-out, visibility 0s 0s; /* Adjust transition timing */
}

.about-panel h2 {
    margin-bottom: 15px;
    text-transform: uppercase;
}
/* Style for the button when its corresponding panel is active */
#about-button.button-active {
    filter: blur(0px);
    /* Optional: Slightly different background or border when active? */
    /* background-color: rgba(255, 255, 255, 0.1); */
}

/* Refine hover states to interact correctly with the active state */

/* Default hover: Unblurs if not already active */
#about-button:not(.button-active):hover {
    background-color: rgba(255, 255, 255, 0.2);
    filter: blur(0px);
}

/* Hover when already active: Maybe change background slightly, but stays unblurred */
#about-button.button-active:hover {
    background-color: rgba(255, 255, 255, 0.25); /* Slightly different hover background */
    /* filter: blur(0px); /* Already unblurred, no change needed */
}

/* --- Ensure the default blurred state applies when NOT active and NOT hovered --- */
/* Make sure your original #about-button rule has the default blur */
#about-button {
    /* ... other styles: position, top, left, background, color, border, padding ... */
    filter: blur(2px); /* Default blur */
    transition: background-color 1.0s ease, filter 0.5s ease; /* Keep transitions */
    /* ... z-index etc. ... */
}

/* For WebKit browsers (e.g., Safari, Chrome) */
::-webkit-scrollbar {
  width: 6px; /* adjust to your desired width */
  height: 6px; /* adjust to your desired height */
}

/* For Mozilla-based browsers (e.g., Firefox) */
::-moz-scrollbar {
  width: 6px; /* adjust to your desired width */
  height: 6px; /* adjust to your desired height */
}



a:link {
  color: #ffe6ff; 
  text-decoration: none;
}

a:visited {
  color: #e6ccff;
}

a:hover {
  color: #ccffcc;
}

/* Past & Presents Button Styling */
#past-presents-button {
    position: absolute;
    top: 30px;
    left: 170px; /* Position next to the about button */
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    border: 1px solid white;
    padding: 10px 20px;
    font-family: 'AnkaHacker', sans-serif;
    font-size: 1rem;
    cursor: none !important;
    transition: background-color 1.0s ease;
    transition: filter 0.5s ease;
    z-index: 2;
    filter: blur(2px);
}

#past-presents-button:hover {
    background-color: rgba(255, 255, 255, 0.2);
    filter: blur(0px);
}

#past-presents-button.button-active {
    filter: blur(0px);
}

#past-presents-button:not(.button-active):hover {
    background-color: rgba(255, 255, 255, 0.2);
    filter: blur(0px);
}

#past-presents-button.button-active:hover {
    background-color: rgba(255, 255, 255, 0.25);
}

/* Timeline Styling */
.timeline {
    max-height: 70vh;
    overflow-y: auto;
}

.timeline-item {
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.timeline-item:last-child {
    border-bottom: none;
}

.date {
    font-weight: bold;
    color: #ffe6ff;
    margin-bottom: 5px;
    font-size: 0.9rem;
}

.event {
    color: white;
    line-height: 1.4;
    font-size: 0.85rem;
}

/* Mobile adjustments for the new button */
@media (max-width: 768px) {
    #past-presents-button {
        top: 15px;
        left: 15px;
        /* Stack vertically on mobile */
        top: 60px; /* Position below the about button */
        padding: 8px 15px;
        font-size: 0.9rem;
    }
    
    #past-presents-button:hover {
        filter: blur(0px);
    }
    
    /* Adjust the past & presents panel for mobile */
    #past-presents-panel {
        top: 105px; /* Position below both buttons */
    }
}

@media (max-width: 480px) {
    .timeline-item {
        margin-bottom: 12px;
        padding-bottom: 8px;
    }
    
    .date {
        font-size: 0.8rem;
    }
    
    .event {
        font-size: 0.75rem;
    }
}

/* Optional: Close button styling */
/*
#close-about-button {
    display: block;
    margin-top: 20px;
    background: #555;
    color: white;
    border: none;
    padding: 8px 15px;
    cursor: pointer;
    font-family: 'AnkaHacker', sans-serif;
}

#close-about-button:hover {
    background: #777;
}
*/
/* Apply styles for screens smaller than 768px (typical tablet/mobile breakpoint) */
@media (max-width: 768px) {

    /* --- General Mobile Adjustments --- */
    html, body {
        /* Allow scrolling if content overflows vertically on small screens */
        overflow: auto;
        /* Optional: Slightly larger base font size for readability */
        /* font-size: 17px; */ /* Adjust as needed */
    }

    /* --- Hide Desktop-Specific Elements --- */
    #custom-cursor,
    #cursor-trail-container {
/*        display: none; */
    }

    /* --- Reset Cursor Style --- */
    /* Override the global 'cursor: none' for touch devices */
    * {
        cursor: auto !important; /* Allow default cursors/touch indicators */
    }
    /* More specific overrides if the above causes issues */
    button, a {
         cursor: pointer !important; /* Ensure interactive elements show a pointer hint if needed */
    }


    /* --- Video Background Fallback (Option 1: Hide Video, Show Image) --- */
    /* Uncomment the following block if you want a static image instead of video on mobile */
    /*
    #bg-video {
        display: none;
    }
    body {
        background-color: #000; // Fallback color
        background-image: url('assets/your-fallback-image.jpg'); // Add a suitable image
        background-size: cover;
        background-position: center center;
        background-attachment: fixed; // Keep background fixed while scrolling content
    }
    */

    /* --- Video Background Fallback (Option 2: Keep Video - requires playsinline) --- */
    /* If you keep the video, no changes needed here for #bg-video itself */
    /* But ensure the playsinline attribute is added to the HTML video tag! */


    /* --- Adjust Content Layout --- */
    .content-overlay {
        /* Ensure overlay still covers everything */
        position: relative; /* Change positioning if needed for scrolling body */
        /* Or keep absolute if body overflow remains hidden */
    }

    #logo {
        top: 15px;
        right: 15px;
        width: 120px; /* Smaller logo */
/*        filter: blur(0px); /* Maybe disable blur effect on mobile? Or keep it */
    }
     #logo:hover {
        filter: blur(0px); /* Ensure hover doesn't change it if base is 0 */
    }


    #about-button {
        top: 15px;
        left: 15px;
        padding: 8px 15px; /* Smaller padding */
        font-size: 0.9rem; /* Adjust font size */
        
    }
     #about-button:hover {
         filter: blur(0px); /* Ensure hover doesn't change it if base is 0 */
    }

    .about-panel {
        left: 15px; /* Adjust position */
        right: 15px; /* Add right constraint */
        top: 60px; /* Adjust top position */
        width: auto; /* Let it span between left/right */
        max-width: none; /* Remove fixed max-width if using left/right */
        max-height: 65vh; /* Adjust max height if needed */
        padding: 20px; /* Adjust padding */
        font-size: 0.85rem; /* Adjust font size */
        filter: blur(0px); /* Maybe disable blur effect on mobile? */
         /* Ensure transitions still work if needed */
        transition: opacity 0.5s ease-out, transform 0.5s ease-out, visibility 0s 0s, filter 0.4s ease;
    }

    .about-panel.active {
        /* Adjust active state if needed, but should inherit base mobile styles */
        filter: blur(0px); /* Ensure unblurred */
    }

    /* Adjust font size for links within the panel if needed */
    .about-panel p, .about-panel a {
        font-size: 0.85rem; /* Match panel font size or adjust */
        line-height: 1.5; /* Ensure readability */
    }
}

/*----------

/* Optional: Further adjustments for very small screens */
@media (max-width: 480px) {
    #logo {
        width: 100px; /* Even smaller logo */
    }

    .about-panel {
        padding: 15px;
        font-size: 0.8rem;
        max-height: 60vh; /* Further adjust height */
    }
     .about-panel p, .about-panel a {
        font-size: 0.8rem;
        line-height: 1.4;
     }
}