/* === BACKGROUND ANIMATION === */
body {
    background:#020617;
    overflow-x:hidden;
    font-family: monospace;
    color:white;
    margin:0;
    padding:60px;
}

/* === WATER FLOW BACKGROUND === */
body::before {
    content:"";
    position:fixed;
    top:0;
    left:0;
    width:300%;
    height:300%;
    background:
        radial-gradient(circle at 50% 120%, #001f33, transparent 50%),
        radial-gradient(circle at 30% 150%, #00334d, transparent 50%),
        radial-gradient(circle at 80% 150%, #004466, transparent 50%),
        linear-gradient(180deg, #00121f 0%, #001b2b 100%);
    filter:blur(60px);
    opacity:.45;
    z-index:-5;
    animation: oceanFlow 22s linear infinite;
}

@keyframes oceanFlow {
    0%   { transform: translate(0,0) scale(1.1); }
    50%  { transform: translate(-300px,-200px) scale(1.15); }
    100% { transform: translate(0,0) scale(1.1); }
}

body::after {
    content:"";
    position:fixed;
    inset:0;
    background:
      repeating-linear-gradient(
        90deg,
        rgba(255,255,255,0.04) 0px,
        rgba(255,255,255,0.04) 2px,
        transparent 2px,
        transparent 6px
      );
    mix-blend-mode:soft-light;
    opacity:.12;
    animation: waterShimmer 12s linear infinite;
    z-index:-4;
}

@keyframes waterShimmer {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-400px); }
}


/* === GLASS CONTAINER === */
.page-wrapper {
    max-width:1200px;
    margin:0 auto;
    padding:60px;
    background:rgba(255,255,255,0.05);
    border-radius:18px;
    border:1px solid rgba(255,255,255,0.1);
    box-shadow:0 0 40px rgba(0,255,255,0.1);
    backdrop-filter:blur(12px);
}

/* HERO */
.hero {
    text-align:center;
}

.avatar {
    width:120px;
    border-radius:8px;
    margin-bottom:12px;
}

.sub { font-size:22px; color:#79cfff; }

/* SKILLS */
.skill-tags {
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    justify-content:center;
}

.skill-tags span {
    background:rgba(255,255,255,0.05);
    padding:8px 14px;
    border-radius:6px;
    border:1px solid rgba(255,255,255,0.1);
    font-size:14px;
}

/* PROJECTS */
.project-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(250px,1fr));
    gap:30px;
    margin-top:40px;
}

.project-card {
    background:rgba(255,255,255,0.05);
    padding:20px;
    text-align:center;
    border-radius:12px;
    border:1px solid rgba(255,255,255,0.12);
    transition:.2s;
}

.project-card img {
    width:100%;
    height:150px;
    object-fit:cover;
    border-radius:6px;
    margin-bottom:12px;
}

.project-card:hover {
    transform:translateY(-6px);
    box-shadow:0 0 18px rgba(0,255,255,0.2);
}

/* EXPERIENCE */
.exp-box {
    background:rgba(255,255,255,0.05);
    border:1px solid rgba(255,255,255,0.08);
    padding:20px;
    border-radius:12px;
}

/* CONTACT */
.icons a {
    color:#79cfff;
    margin:0 12px;
    font-size:26px;
}

h1,h2,h3,p { margin:0 0 14px 0; }
section { margin:60px 0; }
footer {
    text-align:center;
    margin-top:40px;
    opacity:.5;
}
.avatar-round {
    width: 140px;
    border-radius: 50%;
    animation: float 3s ease-in-out infinite;
    box-shadow: 0 0 25px rgba(0,255,255,0.4);
    transition: .3s;
}

@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-8px); }
    100% { transform: translateY(0px); }
}

.avatar-round:hover {
    transform: scale(1.08);
    box-shadow: 0 0 35px rgba(0,255,255,0.7);
}
.project-card {
    padding:24px;
    min-height:400px;
}

.mini-desc {
    font-size:14px;
    opacity:.8;
    line-height:18px;
    min-height:55px;
}

.tech {
    margin-top:12px;
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    justify-content:center;
    padding:0;
}

.tech li {
    list-style:none;
    padding:6px 10px;
    font-size:11px;
    border-radius:8px;
    background:rgba(255,255,255,0.05);
    border:1px solid rgba(255,255,255,0.08);
    color:#9bd6ff;
}

.project-card .gh {
    font-size:28px;
    margin-top:16px;
    display:inline-block;
    color:cyan;
    transition:.2s;
}

.project-card .gh:hover {
    color:white;
    text-shadow:0 0 20px cyan;
}
/* ============================
   SEA WAVES INSIDE THE BOX
   ============================ */

   .ocean {
       position:absolute;
       top:0;
       left:0;
       width:100%;
       height:100%;        /* FULL HEIGHT */
       overflow:hidden;
       z-index:-1;
       opacity:0.3;
       pointer-events:none;
   }


   .wave {
       position:absolute;
       width:200%;
       height:300%;   /* <-- BIG HEIGHT fills box */
       top:-100%;     /* drag waves upward */
       background-repeat:repeat-x;
       background-size:1200px 300px;
       filter:blur(4px);
   }


.wave1 {
    background-image:radial-gradient(circle at center,
    rgba(0,255,255,.5) 0%,
    rgba(0,255,255,.15) 30%,
    transparent 70%);
    animation:waveMove 12s linear infinite;
    opacity:.55;
}

.wave2 {
    background-image:radial-gradient(circle at center,
    rgba(0,150,255,.45) 0%,
    rgba(0,150,255,.1) 30%,
    transparent 70%);
    animation:waveMove2 16s linear infinite;
    opacity:.35;
    bottom:-20px;
}

@keyframes waveMove {
    0%   { transform:translateX(0)     translateY(0); }
    50%  { transform:translateX(-400px) translateY(12px); }
    100% { transform:translateX(0)     translateY(0); }
}

@keyframes waveMove2 {
    0%   { transform:translateX(0)     translateY(0); }
    50%  { transform:translateX(-600px) translateY(-14px); }
    100% { transform:translateX(0)     translateY(0); }
}

.page-wrapper {
    backdrop-filter: blur(20px);
    background: rgba(0,0,0,0.35);
}
.page-wrapper {
    position:relative; /* important! */
    overflow:hidden;   /* locks waves inside */
}
.wave1 { bottom:auto; top:-20%; }
.wave2 { bottom:auto; top:-10%; }


/* ======== RESPONSIVE DESIGN ======== */

@media (max-width:1200px) {
    .page-wrapper {
        padding:40px;
        max-width:1000px;
    }

    .project-grid {
        grid-template-columns:repeat(2,1fr);
        gap:20px;
    }

    .hero .sub {
        font-size:20px;
    }
}

@media (max-width:900px) {
    body {
        padding:30px;
    }

    .page-wrapper {
        padding:30px;
        border-radius:14px;
    }

    .project-grid {
        grid-template-columns:repeat(2,1fr);
    }

    .project-card {
        min-height:350px;
        padding:16px;
    }

    .project-card img {
        height:130px;
    }

    .skill-tags span {
        padding:7px 11px;
        font-size:12px;
    }

    .exp-box ul li {
        font-size:13px;
    }
}

@media (max-width:700px) {
    body {
        padding:20px;
    }

    .page-wrapper {
        padding:20px;
    }

    header.hero img.avatar-round {
        width:120px;
    }

    header.hero h1 {
        font-size:28px;
    }

    header.hero .sub {
        font-size:18px;
    }

    .project-grid {
        grid-template-columns:1fr;
        gap:24px;
    }

    .project-card {
        min-height:330px;
    }

    .project-card img {
        height:140px;
    }

    .tech li {
        font-size:10px;
        padding:5px 8px;
    }

    .contact .icons a {
        font-size:22px;
        margin:0 10px;
    }
}

@media (max-width:500px) {

    body {
        padding:10px;
    }

    .page-wrapper {
        padding:18px;
        border-radius:12px;
        width:100%;
    }

    header.hero h1 {
        font-size:24px;
    }

    header.hero .sub {
        font-size:15px;
        line-height:20px;
    }

    .desc {
        font-size:13px;
        line-height:19px;
    }

    .project-card {
        padding:14px;
        min-height:300px;
    }

    .project-card img {
        height:120px;
    }

    .tech {
        gap:4px;
    }

    .skill-tags {
        gap:6px;
    }

    .skills span {
        font-size:10px;
    }
}
.icons a {
    text-decoration: none;
    display: inline-block; /* Helps prevent unwanted spacing issues */
}
/* SPOTIFY CARD STYLES */
.page-wrapper {
    position: relative; /* Ensure card is positioned relative to this */
}

.spotify-floating {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    padding: 12px 18px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 15px;
    transition: 0.3s;
    z-index: 100;
}

.spotify-floating:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: #1DB954; /* Spotify Green */
}

.spotify-status {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #1DB954;
    margin-bottom: 4px;
}

.spotify-track-name {
    font-size: 14px;
    font-weight: bold;
    max-width: 150px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.spotify-artist {
    font-size: 12px;
    opacity: 0.7;
}

.spotify-icon i {
    font-size: 24px;
    color: #1DB954;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.1); opacity: 0.7; }
    100% { transform: scale(1); opacity: 1; }
}

/* Responsive Hide for very small screens */
@media (max-width: 600px) {
    .spotify-floating {
        position: static;
        margin: 0 auto 20px auto;
        width: fit-content;
    }
}
/* Update the existing floating card */
.spotify-floating {
    border: 1px solid rgba(0, 255, 255, 0.1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

/* Standard icon state - no animation here */
.spotify-icon i {
    font-size: 24px;
    color: #1DB954;
    transition: transform 0.3s ease;
}

/* Only pulse when NOT playing (subtle) */
.spotify-floating:not(.is-playing) .spotify-icon i {
    animation: pulse 2s infinite;
}

/* Strong pulse when music is actually playing */
.is-playing .spotify-icon i {
    color: #1DB954;
    text-shadow: 0 0 10px rgba(29, 185, 84, 0.5);
    animation: spotify-pulse 1.5s infinite !important;
}

@keyframes spotify-pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.15); }
    100% { transform: scale(1); }
}

/* Truncate long song names */
.spotify-track-name {
    width: 160px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}