/*----------Color palette----------*/
:root {
    --color-gradient1: #7400b8ff;
    --color-gradient2: #6930c3ff;
    --color-gradient3: #5e60ceff;
    --color-gradient4: #5390d9ff;
    --color-gradient5: #4ea8deff;
    --color-gradient6: #48bfe3ff;
    --color-gradient7: #56cfe1ff;
    --color-gradient8: #64dfdfff;
    --color-gradient9: #72efddff;
    --color-gradient10: #80ffdbff;
}

/*----------Remove overlay----------*/
#dotnet-compile-error {
    display: none !important;
}

/*----------Global----------*/
* {
    color: white;
    margin: 0;
    padding: 0;
}

html {
    min-height: 100%;
}

body {
    background-image: url('/images/bg.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

p {
    margin: 0;
}

/*----------Gradient text----------*/
.gradient-text {
    display: inline-block; /* ensure background-clip + filter work correctly */
    background-image: 
        linear-gradient( 
        135deg, 
        var(--color-gradient4) 0%, 
        var(--color-gradient6) 40%, 
        var(--color-gradient10) 100% 
    );
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.gradient-text2 {
    display: inline-block; /* ensure background-clip + filter work correctly */
    background-image: 
        linear-gradient( 
        135deg, 
        var(--color-gradient4) 0%, 
        var(--color-gradient6) 40%, 
        var(--color-gradient8) 100% 
    );
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text -webkit-text-fill-color: transparent;
    color: transparent;
}

.gradient-text3 {
    display: inline-block; /* ensure background-clip + filter work correctly */
    background-image: linear-gradient( 
        135deg, 
        var(--color-gradient6) 0%, 
        var(--color-gradient9) 40%, 
        var(--color-gradient10) 100% 
    );
    -webkit-background-clip: text;
    background-clip: text -webkit-text-fill-color: transparent;
    color: transparent;
    text-decoration: none;
}

.gradient-text3:hover {
    display: inline; /* ensure background-clip + filter work correctly */
    color: transparent;
}

/*----------Nav bar----------*/
.navbar {
    font-size: 1.1rem;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.38) !important; /* semi-transparent fallback */
    transition: background-color 280ms ease, backdrop-filter 280ms ease, box-shadow 280ms ease;
    z-index: 1030; /* keep above content */
}

.nav-item {
    border-radius: 5px;
    transition: ease 0.2s;
}

.dropdown-menu {
    font-size: 1rem;
}

.dropdown-item:hover {
    background-color: transparent;
}

/* Navbar dropdown: frosted / blurred background (placed near navbar rules) */
nav#mainNavbar .dropdown-menu {
    background-color: rgba(0, 0, 0, 0.38) !important; /* semi-transparent fallback */
    -webkit-backdrop-filter: blur(8px) !important; /* Safari/WebKit */
    backdrop-filter: blur(6px) !important; /* modern browsers */
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45) !important;
    color: rgba(255, 255, 255, 0.95) !important;
    /* keep layout & stacking correct */
    z-index: 1050 !important;
    background-clip: padding-box;
}

/* initial transparent state */
nav.navbar.navbar-transparent {
    background-color: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
}

/* scrolled state: semi-transparent + blur + subtle shadow */
nav.navbar.navbar-scrolled {
    background-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/*----------Animated underline 1----------*/
.underline-animate,
.underline-animate2{
    position: relative;
    display: inline-block; /* ensure pseudo-element matches text width */
    -webkit-tap-highlight-color: transparent;
}

/* the line */
.underline-animate::after,
.underline-animate2::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -4px; /* adjust distance from text */
    height: 2px; /* line thickness */
    width: 100%;
    background: linear-gradient(90deg, var(--color-gradient4), var(--color-gradient6));
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 320ms cubic-bezier(.2,.9,.2,1);
    will-change: transform, opacity;
}

/* animate on hover or keyboard focus */
.underline-animate:hover::after,
.underline-animate:focus-visible::after,
.underline-animate2:hover::after,
.underline-animate2:focus-visible::after {
    transform: scaleX(1);
}

/*----------Animated underline 2----------*/
.underline-animate2::after {
    background: linear-gradient( 
        135deg, 
        var(--color-gradient5) 0%, 
        var(--color-gradient7) 20%, 
        var(--color-gradient8) 100% 
    );
}

/*----------Navigation link----------*/
.link-div {
    font-size: 1.5rem;
    font-weight: bold;
    margin-top: 100px;
    gap: 100px;
}

.link,
.link-back {
    position: relative;
    transition: ease 0.2s;
}

.link:hover,
.link-back:hover {
    transition: ease 0.2s;
}

/* Arrow icons - initially hidden */
.link-icon,
.link-icon-back {
    opacity: 0;
    position: absolute;
    transition: opacity 300ms ease, transform 400ms cubic-bezier(.2,.9,.2,1);
    will-change: opacity, transform;
}

/* Right arrow icon (for forward navigation) */
.link-icon {
    transform: translateX(-10px);
}

/* Left arrow icon (for back navigation) */
.link-icon-back {
    transform: translateX(10px);
}

/* Animated state for right arrow (pointing right, moving right-up) */
.link-icon-animation {
    opacity: 1 !important;
    transform: translate(10px, -6px) rotate(45deg) !important;
}

/* Animated state for left arrow (pointing left, moving left-up) */
.link-icon-animation-back {
    opacity: 1 !important;
    transform: translate(-20px, -6px) rotate(-45deg) !important;
}

/*----------Title Reveal Animation----------*/
.title-reveal {
    position: relative;
    display: inline-block;
    overflow: visible;
}

.title-reveal {
    display: inline-block;
    position: relative;
    opacity: 0;
}

/* Rectangle overlay that covers the text */
.title-reveal::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        135deg,
        var(--color-gradient4) 0%,
        var(--color-gradient5) 50%,
        var(--color-gradient6) 100%
    );
    transform-origin: left center;
    z-index: 1;
    opacity: 0;
}