/* ==================== ROOT VARIABLES ==================== */

:root{
    --bg-body-1:#faf8ff;
    --bg-body-2:#f0e9fb;
    --bg-body-3:#dccdf5;
    --bg-page:#ffffff;
    --bg-alt:#f9f9f9;
    --text-main:#222222;
    --text-muted:#666666;
    --text-soft:#555555;
    --text-nav:#444444;
    --card-bg:#ffffff;
    --card-bg-alt:#f9f9f9;
    --border-color:#eeeeee;
    --border-color-2:#dddddd;
    --nav-bg:rgba(255,255,255,.85);
    --shadow-color:rgba(0,0,0,.08);
    --shadow-soft:rgba(0,0,0,.06);
    --accent:#7b2ff7;
    --accent-2:#c46bff;
}

body:has(#darkToggle:checked){
    --bg-body-1:#0f0b1a;
    --bg-body-2:#161022;
    --bg-body-3:#1d1530;
    --bg-page:#140f20;
    --bg-alt:#1a1428;
    --text-main:#f0ecfa;
    --text-muted:#b4abc9;
    --text-soft:#c6bcdd;
    --text-nav:#d8d0ea;
    --card-bg:#1c1630;
    --card-bg-alt:#1a1428;
    --border-color:#2a2140;
    --border-color-2:#332a4d;
    --nav-bg:rgba(20,15,33,.85);
    --shadow-color:rgba(0,0,0,.45);
    --shadow-soft:rgba(0,0,0,.35);
}

/* ==================== SPLASH / ENTRY SCREEN ====================
   Always dark, regardless of the site's light/dark toggle — a
   distinct "arrival" moment before the portfolio itself, inspired
   by an interactive-portfolio intro: buttons hang from threads and
   drop the visitor straight into the section they choose. */

body.pre-enter{
    overflow:hidden;
}

.splash{
    position:fixed;
    inset:0;
    z-index:5000;
    display:flex;
    align-items:center;
    justify-content:center;
    background:radial-gradient(circle at 30% 20%,#1d1440 0%,#0c0818 55%,#08050f 100%);
    overflow:hidden;
    transition:opacity .7s ease,visibility .7s ease;
}

.splash.is-leaving{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
}

.splash-blob{
    position:absolute;
    border-radius:50%;
    filter:blur(110px);
    opacity:.5;
    pointer-events:none;
}

.splash-blob--1{
    width:460px;
    height:460px;
    background:#7b2ff7;
    top:-140px;
    left:-100px;
    animation:blobFloat 14s ease-in-out infinite;
}

.splash-blob--2{
    width:420px;
    height:420px;
    background:#25D366;
    bottom:-140px;
    right:-100px;
    opacity:.28;
    animation:blobFloat 16s ease-in-out infinite reverse;
}

.splash-inner{
    position:relative;
    z-index:2;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    padding:24px;
    max-width:640px;
    animation:splashIn .8s ease .1s both;
}

@keyframes splashIn{
    from{ opacity:0; transform:translateY(24px) scale(.97); }
    to{ opacity:1; transform:translateY(0) scale(1); }
}

.splash-logo{
    position:relative;
    width:86px;
    height:86px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-family:'Unbounded','Poppins',sans-serif;
    font-size:32px;
    font-weight:700;
    color:#fff;
    background:linear-gradient(135deg,#7b2ff7,#c46bff);
    margin-bottom:22px;
    box-shadow:0 0 0 6px rgba(123,47,247,.15);
}

.splash-logo .logo-ring{
    position:absolute;
    inset:-8px;
    border-radius:50%;
    background:conic-gradient(from 0deg,#7b2ff7,#c46bff,#25D366,#7b2ff7);
    z-index:-1;
    opacity:.9;
    animation:spin 5s linear infinite;
    -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 3px));
    mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 3px));
}

.splash-eyebrow{
    font-family:'Courier New',monospace;
    letter-spacing:2px;
    text-transform:uppercase;
    font-size:12.5px;
    color:#a996d6;
    margin-bottom:10px;
}

.splash-name{
    font-family:'Unbounded','Poppins',sans-serif;
    font-size:clamp(30px,5vw,46px);
    font-weight:700;
    color:#f4f0ff;
    line-height:1.15;
}

.splash-name span{
    background:linear-gradient(90deg,#7b2ff7,#c46bff,#7b2ff7);
    background-size:200% auto;
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    animation:gradientShift 5s linear infinite;
}

.splash-role{
    font-size:16px;
    font-weight:600;
    color:#d9c9ff;
    margin-top:8px;
    letter-spacing:.5px;
}

.splash-desc{
    max-width:440px;
    color:#a89cc4;
    font-size:14.5px;
    line-height:1.7;
    margin:14px 0 34px;
}

.splash-links{
    display:flex;
    gap:34px;
    flex-wrap:wrap;
    justify-content:center;
    margin-bottom:30px;
}

.splash-pill-wrap{
    display:flex;
    flex-direction:column;
    align-items:center;
}

.splash-pill-wrap .thread{
    width:1px;
    height:34px;
    background:linear-gradient(#7b2ff7,rgba(123,47,247,0));
    animation:threadSway 3.4s ease-in-out infinite;
}

.splash-pill-wrap:nth-child(2) .thread{ animation-delay:.3s; }
.splash-pill-wrap:nth-child(3) .thread{ animation-delay:.6s; }
.splash-pill-wrap:nth-child(4) .thread{ animation-delay:.9s; }

@keyframes threadSway{
    0%,100%{ transform:scaleY(1); }
    50%{ transform:scaleY(.85); }
}

.splash-pill{
    display:flex;
    align-items:center;
    gap:8px;
    padding:11px 20px;
    border-radius:30px;
    background:rgba(255,255,255,.1);
    border:1px solid rgba(255,255,255,.28);
    color:#f0ecfa;
    font-size:14px;
    font-weight:600;
    cursor:pointer;
    transition:transform .3s ease,background .3s ease,border-color .3s ease,box-shadow .3s ease;
}

.splash-pill:hover{
    transform:translateY(-5px);
    background:rgba(123,47,247,.3);
    border-color:#7b2ff7;
    box-shadow:0 14px 28px rgba(123,47,247,.35);
}

.splash-divider{
    display:block;
    margin:6px 0 22px;
    font-size:12px;
    font-weight:600;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:rgba(240,236,250,.4);
}

.splash-enter{
    position:relative;
    overflow:visible;
    display:inline-flex;
    align-items:center;
    gap:12px;
    padding:19px 40px;
    border-radius:50px;
    border:none;
    background:linear-gradient(90deg,#7b2ff7,#c46bff,#25D366,#7b2ff7);
    background-size:300% auto;
    color:#fff;
    font-size:17px;
    font-weight:700;
    cursor:pointer;
    box-shadow:0 18px 40px -8px rgba(123,47,247,.65);
    transition:box-shadow .3s ease;
    animation:splashEnterGradient 4s linear infinite, splashEnterFloat 2.8s ease-in-out infinite;
}

.splash-enter-text{
    position:relative;
    z-index:2;
}

.splash-enter i{
    position:relative;
    z-index:2;
    transition:transform .3s ease;
}

.splash-enter::before{
    content:'';
    position:absolute;
    inset:0;
    top:0;
    left:-60%;
    width:45%;
    height:100%;
    background:linear-gradient(120deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.6) 50%,rgba(255,255,255,0) 100%);
    transform:skewX(-20deg);
    animation:splashEnterShine 2.8s ease-in-out infinite;
    pointer-events:none;
    border-radius:50px;
    overflow:hidden;
    z-index:1;
}

.splash-enter::after{
    content:'';
    position:absolute;
    inset:-6px;
    border-radius:60px;
    background:linear-gradient(90deg,#7b2ff7,#c46bff,#25D366,#7b2ff7);
    background-size:300% auto;
    z-index:-1;
    filter:blur(14px);
    opacity:.7;
    animation:splashEnterGradient 4s linear infinite, splashEnterGlow 2.4s ease-out infinite;
    pointer-events:none;
}

@keyframes splashEnterShine{
    0%{ left:-60%; }
    45%{ left:130%; }
    100%{ left:130%; }
}

@keyframes splashEnterGradient{
    0%{ background-position:0% 50%; }
    100%{ background-position:300% 50%; }
}

@keyframes splashEnterFloat{
    0%,100%{ transform:translateY(0); }
    50%{ transform:translateY(-6px); }
}

@keyframes splashEnterGlow{
    0%{ opacity:.5; box-shadow:0 0 0 0 rgba(123,47,247,.55); }
    70%{ opacity:.85; box-shadow:0 0 0 18px rgba(123,47,247,0); }
    100%{ opacity:.5; box-shadow:0 0 0 0 rgba(123,47,247,0); }
}

.splash-enter:hover{
    animation-play-state:paused;
    transform:translateY(-8px) scale(1.06);
    box-shadow:0 26px 50px -6px rgba(123,47,247,.8),0 0 0 4px rgba(196,107,255,.22);
}

.splash-enter:hover::after{
    animation-play-state:paused;
    opacity:.95;
}

.splash-enter:hover i{
    transform:translateX(4px);
}

/* Floating tech tags scattered around the splash */

.splash-tags{
    position:absolute;
    inset:0;
    z-index:1;
    pointer-events:none;
}

.splash-tags span{
    position:absolute;
    display:flex;
    align-items:center;
    gap:7px;
    padding:8px 14px;
    border-radius:20px;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.1);
    color:#c9bfe6;
    font-family:'Courier New',monospace;
    font-size:12.5px;
    animation:tagFloat 6s ease-in-out infinite;
    animation-delay:calc(var(--i) * .4s);
}

.splash-tags span:nth-child(1){ top:14%; left:10%; }
.splash-tags span:nth-child(2){ top:22%; right:9%; }
.splash-tags span:nth-child(3){ bottom:32%; left:6%; }
.splash-tags span:nth-child(4){ bottom:18%; right:12%; }
.splash-tags span:nth-child(5){ top:50%; left:2%; }
.splash-tags span:nth-child(6){ top:46%; right:3%; }

@keyframes tagFloat{
    0%,100%{ transform:translateY(0); opacity:.85; }
    50%{ transform:translateY(-14px); opacity:1; }
}

@media (max-width:700px){
    .splash-tags{ display:none; }
    .splash-links{ gap:18px; }
}

@media (prefers-reduced-motion: reduce){
    .splash-inner,.splash-logo .logo-ring,.splash-pill-wrap .thread,.splash-tags span{
        animation:none !important;
    }
}

/* ==================== GOOGLE FONT ==================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Poppins',sans-serif;
}

html{
    scroll-behavior:smooth;
}

body{
    background:linear-gradient(160deg,var(--bg-body-1) 0%,var(--bg-body-2) 50%,var(--bg-body-3) 100%);
    color:var(--text-main);
    overflow-x:hidden;
    animation:bodyFadeIn .9s ease;
    transition:background .4s ease,color .4s ease;
}

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

.page-wrap{
    width:100%;
    max-width:1400px;
    margin:auto;
    background:var(--bg-page);
    box-shadow:0 0 40px var(--shadow-color);
    transition:background .4s ease;
}

a{
    text-decoration:none;
    color:inherit;
}

ul{
    list-style:none;
}

section{
    padding:100px 8%;
    position:relative;
}

/* ==================== NAVBAR ==================== */

.menu-toggle{
    display:none;
}

nav{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:85px;
    background:var(--nav-bg);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:0 8%;
    box-shadow:0 3px 18px var(--shadow-color);
    z-index:1000;
    transition:background .4s ease;
}

/* Logo */

.logo{
    position:relative;
    width:58px;
    height:58px;
    border-radius:50%;
    background:var(--accent);
    color:#fff;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:24px;
    font-weight:700;
    letter-spacing:1px;
    cursor:pointer;
    transition:transform .35s ease;
}

.logo .logo-text{
    position:relative;
    z-index:1;
    transition:transform .35s ease;
}

.logo .logo-ring{
    position:absolute;
    inset:-5px;
    border-radius:50%;
    background:conic-gradient(from 0deg,var(--accent),var(--accent-2),#25D366,var(--accent));
    opacity:0;
    z-index:-1;
    animation:spin 4s linear infinite;
    transition:opacity .35s ease;
    -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 3px));
    mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 3px));
}

.logo:hover{
    transform:scale(1.06);
}

.logo:hover .logo-text{
    transform:rotate(-6deg);
}

.logo:hover .logo-ring{
    opacity:1;
}

/* Navigation */

nav ul{
    display:flex;
    align-items:center;
    gap:28px;
}

nav ul li a{
    position:relative;
    color:var(--text-nav);
    font-size:15px;
    font-weight:500;
    padding-bottom:4px;
    transition:color .3s ease;
}

nav ul li a::after{
    content:'';
    position:absolute;
    left:0;
    bottom:0;
    width:0;
    height:2px;
    background:var(--accent);
    transition:width .3s ease;
}

nav ul li a:hover,
nav ul li a.active{
    color:var(--accent);
}

nav ul li a:hover::after,
nav ul li a.active::after{
    width:100%;
}

/* Right cluster: social icons + theme switch */

.nav-right{
    display:flex;
    align-items:center;
    gap:20px;
}

.social-icons{
    display:flex;
    align-items:center;
    gap:16px;
}

.social-icons a{
    font-size:18px;
    transition:.3s;
}

.social-icons a:nth-child(1){
    color:#0A66C2;
}

.social-icons a:nth-child(2){
    color:#E1306C;
}

.social-icons a:hover{
    transform:scale(1.2);
}

/* Dark mode switch */

.theme-switch{
    display:flex;
    align-items:center;
}

.theme-switch input{
    display:none;
}

.switch-label{
    position:relative;
    width:52px;
    height:28px;
    background:var(--card-bg-alt);
    border:1px solid var(--border-color-2);
    border-radius:30px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 6px;
    cursor:pointer;
    transition:background .3s ease,border-color .3s ease;
}

.switch-label i{
    font-size:12px;
    z-index:1;
}

.switch-label .fa-sun{
    color:#f5a623;
}

.switch-label .fa-moon{
    color:#8a7fae;
}

.switch-ball{
    position:absolute;
    top:2px;
    left:2px;
    width:22px;
    height:22px;
    border-radius:50%;
    background:#fff;
    box-shadow:0 2px 6px rgba(0,0,0,.25);
    transition:transform .35s ease;
}

.theme-switch input:checked ~ .switch-label .switch-ball{
    transform:translateX(24px);
}

.theme-switch input:checked ~ .switch-label{
    background:#2a2140;
}

/* Menu Button (pure CSS hamburger -> X) */

.menu-btn{
    display:none;
    flex-direction:column;
    justify-content:center;
    gap:5px;
    width:28px;
    height:22px;
    cursor:pointer;
    margin-left:20px;
}

.menu-btn span{
    display:block;
    width:100%;
    height:3px;
    border-radius:2px;
    background:var(--text-main);
    transition:transform .3s ease,opacity .3s ease,background .3s ease;
}

.menu-toggle:checked ~ .menu-btn span:nth-child(1){
    transform:translateY(8px) rotate(45deg);
}

.menu-toggle:checked ~ .menu-btn span:nth-child(2){
    opacity:0;
}

.menu-toggle:checked ~ .menu-btn span:nth-child(3){
    transform:translateY(-8px) rotate(-45deg);
}

/* ==================== HERO ==================== */

.hero{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:80px;
    padding:160px 8% 80px;
    min-height:100vh;
}

/* Ambient background blobs */
.hero::before,
.hero::after{
    content:'';
    position:absolute;
    border-radius:50%;
    filter:blur(90px);
    opacity:.55;
    z-index:0;
    pointer-events:none;
}

.hero::before{
    width:420px;
    height:420px;
    background:var(--accent-2);
    top:-120px;
    left:-140px;
    animation:blobFloat 14s ease-in-out infinite;
}

.hero::after{
    width:360px;
    height:360px;
    background:#f3d6ff;
    bottom:-100px;
    right:-120px;
    animation:blobFloat 16s ease-in-out infinite reverse;
}

@keyframes blobFloat{
    0%,100%{ transform:translate(0,0) scale(1); }
    50%{ transform:translate(35px,-25px) scale(1.12); }
}

/* Left Side */

.left{
    position:relative;
    z-index:1;
    width:55%;
}

.name-wrap{
    margin-bottom:10px;
}

.intro-badge{
    font-size:19px;
    color:var(--text-soft);
    margin-bottom:6px;
}

.signature-name{
    font-family:'Unbounded','Poppins',sans-serif;
    font-size:38px;
    font-weight:700;
    line-height:1.2;
    color:var(--text-main);
}

.signature-name span{
    background:linear-gradient(90deg,var(--accent),var(--accent-2),var(--accent));
    background-size:200% auto;
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    animation:gradientShift 5s linear infinite;
}

.name-caret{
    display:inline-block;
    width:3px;
    height:.85em;
    background:var(--accent);
    margin-left:5px;
    vertical-align:middle;
    animation:blink .9s steps(1) infinite;
}

.left h1{
    font-family:'Unbounded','Poppins',sans-serif;
    font-size:58px;
    font-weight:800;
    line-height:1.2;
    margin-bottom:20px;
}

.left h1 span{
    background:linear-gradient(90deg,var(--accent),var(--accent-2),var(--accent));
    background-size:200% auto;
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    animation:gradientShift 5s linear infinite;
}

@keyframes fadeUp{
    from{ opacity:0; transform:translateY(26px); }
    to{ opacity:1; transform:translateY(0); }
}

@keyframes gradientShift{
    to{ background-position:200% center; }
}

/* ==================== SCROLL REVEAL (JS-driven, safe-by-default) ====================
   IMPORTANT: these elements are fully visible by default. JS is
   what OPTS them into the hidden starting state (by adding
   "reveal-pending"), then removes that hidden state and plays the
   reveal animation once each one scrolls into view. This order
   matters: if script.js fails to load, is blocked, or errors out
   for any reason, "reveal-pending" is simply never added and
   every section shows normally — nothing can get stuck invisible. */

.reveal-pending{
    opacity:0;
    transform:translateY(30px);
}

.reveal-pending.in-view{
    animation:revealUp .7s ease forwards;
}

@keyframes revealUp{
    from{ opacity:0; transform:translateY(30px); }
    to{ opacity:1; transform:translateY(0); }
}

.text{
    font-size:18px;
    color:var(--text-muted);
    line-height:1.8;
    max-width:560px;
    margin-bottom:30px;
}

/* Rotating role line - pure CSS word cycle */

.rotator{
    display:flex;
    align-items:center;
    gap:8px;
    font-family:'Courier New',monospace;
    font-size:16px;
    color:var(--text-main);
    background:var(--card-bg-alt);
    border:1px solid var(--border-color-2);
    width:fit-content;
    padding:9px 16px;
    border-radius:8px;
    margin-bottom:30px;
}

.rotator-label{
    color:var(--text-muted);
    white-space:nowrap;
}

.rotator-track{
    position:relative;
    display:inline-block;
    height:20px;
    min-width:180px;
    overflow:hidden;
}

.rotator-word{
    position:absolute;
    left:0;
    top:0;
    opacity:0;
    color:var(--accent);
    font-weight:600;
    white-space:nowrap;
    animation:rotateWords 8s infinite;
}

.rotator-word:nth-child(1){ animation-delay:0s; }
.rotator-word:nth-child(2){ animation-delay:2s; }
.rotator-word:nth-child(3){ animation-delay:4s; }
.rotator-word:nth-child(4){ animation-delay:6s; }

@keyframes rotateWords{
    0%{ opacity:0; transform:translateY(8px); }
    5%{ opacity:1; transform:translateY(0); }
    20%{ opacity:1; transform:translateY(0); }
    25%{ opacity:0; transform:translateY(-8px); }
    100%{ opacity:0; }
}

/* ================= BUTTONS ================= */

.button-wrapper{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    margin-top:5px;
}

.buttons{
    display:flex;
    gap:15px;
}

.btn1,
.btn2{
    width:170px;
    height:48px;
    display:flex;
    justify-content:center;
    align-items:center;
    border-radius:8px;
    font-size:15px;
    font-weight:600;
    transition:transform .3s ease,background .3s ease,color .3s ease,box-shadow .3s ease;
}

.btn1{
    position:relative;
    gap:8px;
    background:#111;
    color:#fff;
}

.btn1::after{
    content:'';
    position:absolute;
    inset:0;
    border-radius:8px;
    box-shadow:0 0 0 0 rgba(37,211,102,.45);
    animation:pulseRing 2.4s ease-out infinite;
    pointer-events:none;
}

@keyframes pulseRing{
    0%{ box-shadow:0 0 0 0 rgba(37,211,102,.45); }
    70%{ box-shadow:0 0 0 14px rgba(37,211,102,0); }
    100%{ box-shadow:0 0 0 0 rgba(37,211,102,0); }
}

.btn1:hover{
    background:#25D366;
    color:#fff;
    transform:translateY(-4px);
    box-shadow:0 12px 24px rgba(37,211,102,.3);
}

.btn2{
    position:relative;
    overflow:visible;
    width:190px;
    gap:8px;
    background:linear-gradient(90deg,var(--accent),var(--accent-2),#25D366,var(--accent));
    background-size:300% 100%;
    background-position:0% 0%;
    color:#fff;
    border:1px solid transparent;
    box-shadow:0 8px 20px rgba(123,47,247,.35);
    animation:btn2Gradient 4s linear infinite, btn2Float 2.6s ease-in-out infinite;
}

.btn2-text{
    position:relative;
    z-index:2;
    white-space:nowrap;
}

.btn2-arrow{
    position:relative;
    z-index:2;
    transition:transform .35s ease;
}

.btn2::before{
    content:'';
    position:absolute;
    top:0;
    left:-60%;
    width:45%;
    height:100%;
    background:linear-gradient(120deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.6) 50%,rgba(255,255,255,0) 100%);
    transform:skewX(-20deg);
    animation:btn2Shine 2.8s ease-in-out infinite;
    pointer-events:none;
    border-radius:8px;
    overflow:hidden;
    z-index:2;
}

.btn2::after{
    content:'';
    position:absolute;
    inset:-6px;
    border-radius:14px;
    background:linear-gradient(90deg,var(--accent),var(--accent-2),#25D366,var(--accent));
    background-size:300% 100%;
    z-index:-1;
    filter:blur(10px);
    opacity:.65;
    animation:btn2Gradient 4s linear infinite, btn2Glow 2.6s ease-in-out infinite;
    pointer-events:none;
}

@keyframes btn2Shine{
    0%{ left:-60%; }
    45%{ left:130%; }
    100%{ left:130%; }
}

@keyframes btn2Gradient{
    0%{ background-position:0% 50%; }
    100%{ background-position:300% 50%; }
}

@keyframes btn2Float{
    0%,100%{ transform:translateY(0); }
    50%{ transform:translateY(-6px); }
}

@keyframes btn2Glow{
    0%,100%{ opacity:.45; transform:scale(1); }
    50%{ opacity:.85; transform:scale(1.08); }
}

.btn2:hover{
    animation-play-state:paused;
    transform:translateY(-8px) scale(1.06);
    box-shadow:0 20px 40px rgba(123,47,247,.45),0 0 0 4px rgba(196,107,255,.22);
}

.btn2:hover::after{
    animation-play-state:paused;
    opacity:.9;
}

.btn2:hover .btn2-arrow{
    transform:translateX(8px);
}

.download-btn{
    margin-top:15px;
    width:170px;
    height:42px;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:8px;
    font-size:14px;
    font-weight:600;
    color:var(--accent);
    border:2px solid var(--accent);
    border-radius:25px;
    transition:.3s;
}

.download-btn:hover{
    background:var(--accent);
    color:#fff;
}

/* Right Side */

.right{
    position:relative;
    z-index:1;
    width:45%;
    display:flex;
    justify-content:center;
    align-items:center;
    opacity:0;
    perspective:1200px;
}

/* The photo + code-card only animate in once the splash screen has
   been dismissed, so entering the site feels like a small reveal
   rather than something the visitor never gets to see. */
body.splash-done .right{
    animation:fadeUp 1s ease forwards;
}

@media (prefers-reduced-motion: reduce){
    .right{ opacity:1; }
}

.photo-wrap{
    position:relative;
    width:420px;
    height:420px;
    display:flex;
    align-items:center;
    justify-content:center;
    transform-style:preserve-3d;
    transition:transform .5s ease;
}

.photo-wrap:hover{
    transform:rotateY(7deg) rotateX(-5deg) scale(1.02);
}

.orbit-ring{
    position:absolute;
    inset:-18px;
    border-radius:50%;
    background:conic-gradient(from 0deg,var(--accent),#f3d6ff,var(--accent));
    animation:spin 12s linear infinite;
    -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 4px));
    mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 4px));
}

@keyframes spin{
    to{ transform:rotate(360deg); }
}

.circle{
    position:relative;
    z-index:1;
    width:420px;
    height:420px;
    border-radius:50%;
    overflow:hidden;
    border:8px solid var(--bg-page);
    box-shadow:0 15px 40px rgba(0,0,0,.15);
    animation:floatY 6s ease-in-out infinite;
}

@keyframes floatY{
    0%,100%{ transform:translateY(0); }
    50%{ transform:translateY(-14px); }
}

.circle img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    /* Corrects an over-dark source photo: lifts brightness/contrast
       and adds a touch of warmth + saturation so skin tones don't
       look muddy. Tweak the numbers if your photo is edited later. */
    filter:brightness(1.16) contrast(1.06) saturate(1.12);
}

/* Availability status badge */

.status-badge{
    position:absolute;
    top:-8px;
    right:6px;
    display:flex;
    align-items:center;
    gap:8px;
    background:var(--card-bg);
    border:1px solid var(--border-color);
    padding:8px 14px;
    border-radius:30px;
    font-size:12px;
    font-weight:600;
    color:var(--text-main);
    box-shadow:0 10px 22px var(--shadow-soft);
    z-index:4;
    animation:floatY 6s ease-in-out infinite;
    animation-delay:.2s;
}

.status-dot{
    width:8px;
    height:8px;
    border-radius:50%;
    background:#28c840;
    box-shadow:0 0 0 0 rgba(40,200,64,.5);
    animation:statusPulse 2s infinite;
}

@keyframes statusPulse{
    0%{ box-shadow:0 0 0 0 rgba(40,200,64,.5); }
    70%{ box-shadow:0 0 0 8px rgba(40,200,64,0); }
    100%{ box-shadow:0 0 0 0 rgba(40,200,64,0); }
}

/* Signature element: floating code card */

.code-card{
    position:absolute;
    bottom:20px;
    left:-60px;
    width:250px;
    background:#1b1230;
    border-radius:12px;
    box-shadow:0 20px 45px rgba(30,10,60,.35);
    overflow:hidden;
    z-index:3;
    transform:translateZ(60px);
    animation:floatY 7s ease-in-out infinite;
    animation-delay:.4s;
}

.code-card-head{
    display:flex;
    align-items:center;
    gap:6px;
    padding:9px 12px;
    background:#241a3d;
}

.code-card-head .dot{
    width:9px;
    height:9px;
    border-radius:50%;
    display:inline-block;
}

.code-card-head .red{ background:#ff5f57; }
.code-card-head .yellow{ background:#febc2e; }
.code-card-head .green{ background:#28c840; }

.code-card-title{
    margin-left:6px;
    font-family:'Courier New',monospace;
    font-size:11px;
    color:#8a7fae;
}

.code-card-body{
    padding:14px 16px 18px;
    font-family:'Courier New',monospace;
    font-size:12.5px;
    line-height:1.7;
    color:#d9c9ff;
}

.code-line{
    opacity:0;
    white-space:pre;
    animation:codeLineIn .5s ease forwards;
}

.code-line:nth-child(1){ animation-delay:.7s; }
.code-line:nth-child(2){ animation-delay:.95s; }
.code-line:nth-child(3){ animation-delay:1.2s; }
.code-line:nth-child(4){ animation-delay:1.45s; }
.code-line:nth-child(5){ animation-delay:1.7s; }

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

.code-card-body .key{ color:#c9a6ff; }
.code-card-body .str{ color:#7be0a8; }

.code-caret{
    display:inline-block;
    width:6px;
    height:13px;
    background:#c46bff;
    margin-left:2px;
    vertical-align:middle;
    animation:blink .9s steps(1) infinite;
}

@keyframes blink{
    50%{ opacity:0; }
}

/* Scroll cue */

.scroll-cue{
    position:absolute;
    left:50%;
    bottom:28px;
    transform:translateX(-50%);
    width:40px;
    height:40px;
    border-radius:50%;
    border:1px solid rgba(123,47,247,.35);
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--accent);
    z-index:2;
    animation:bounceCue 2s ease-in-out infinite;
    transition:background .3s ease,color .3s ease;
}

.scroll-cue:hover{
    background:var(--accent);
    color:#fff;
}

@keyframes bounceCue{
    0%,100%{ transform:translate(-50%,0); }
    50%{ transform:translate(-50%,8px); }
}

@media (prefers-reduced-motion: reduce){
    *{
        animation:none !important;
    }
    body{
        transition:none !important;
    }
    .intro-badge,.signature-name,.left h1,.text,.rotator,.button-wrapper,.right{
        opacity:1;
    }
    .secondary-skills .skill-card{
        opacity:1;
    }
    .reveal-pending{
        opacity:1 !important;
        transform:none !important;
    }
    .skill-bar-fill.pre-fill{
        width:var(--pct) !important;
    }
    .back-to-top.js-managed{
        opacity:1 !important;
        transform:none !important;
        pointer-events:auto !important;
    }
    .code-line{
        opacity:1;
    }
    .rotator-word:nth-child(1){
        opacity:1;
        position:static;
    }
    .skill-bar-fill{
        width:var(--pct) !important;
    }
    .status-dot{
        box-shadow:none;
    }
}

/* ==================== SECTION HEADINGS ==================== */

.projects h1,
.services h1,
.skills h1,
.about h1,
.education h1,
.contact h1{
    position:relative;
    text-align:center;
    font-family:'Unbounded','Poppins',sans-serif;
    font-size:38px;
    margin-bottom:22px;
    padding-bottom:18px;
}

.projects h1::after,
.services h1::after,
.skills h1::after,
.about h1::after,
.education h1::after,
.contact h1::after{
    content:'';
    position:absolute;
    left:50%;
    bottom:0;
    transform:translateX(-50%);
    width:64px;
    height:4px;
    border-radius:4px;
    background:linear-gradient(90deg,var(--accent),var(--accent-2));
}

.projects span,
.services span,
.skills span,
.about span,
.education span,
.contact span{
    color:var(--accent);
}

.project-text,
.service-text,
.education-text,
.contact-text{
    text-align:center;
    color:var(--text-muted);
    font-size:17px;
    max-width:600px;
    margin:0 auto 50px;
}

/* ==================== SECTION WAVE DIVIDERS ==================== */

.section-wave{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:70px;
    display:block;
}

.section-wave path{
    fill:var(--bg-page);
}

/* ==================== ABOUT ==================== */

.about{
    padding:120px 8% 90px;
    background:var(--bg-alt);
}

.about-container{
    display:flex;
    align-items:center;
    gap:60px;
    max-width:1150px;
    margin:0 auto;
    flex-wrap:wrap;
}

.about-text{
    flex:1 1 400px;
}

.about-text p{
    color:var(--text-muted);
    line-height:1.8;
    font-size:16px;
    margin-bottom:18px;
}

.fun-facts{
    display:flex;
    flex-direction:column;
    gap:14px;
    margin-top:24px;
}

.fact{
    display:flex;
    align-items:center;
    gap:14px;
    color:var(--text-main);
    font-size:15px;
    font-weight:500;
    transition:transform .3s ease;
}

.fact:hover{
    transform:translateX(6px);
}

.fact i{
    width:38px;
    height:38px;
    flex-shrink:0;
    border-radius:50%;
    background:var(--accent);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:14px;
}

.stats-grid{
    flex:1 1 320px;
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:20px;
}

.stat-card{
    background:var(--card-bg);
    border:1px solid var(--border-color);
    border-radius:16px;
    padding:28px 20px;
    text-align:center;
    transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;
}

.stat-card:hover{
    transform:translateY(-8px);
    box-shadow:0 16px 30px rgba(123,47,247,.14);
    border-color:var(--accent);
}

.stat-card h3{
    font-family:'Unbounded','Poppins',sans-serif;
    font-size:32px;
    display:inline-block;
    background:linear-gradient(90deg,var(--accent),var(--accent-2));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    margin-bottom:8px;
}

.stat-card h3.counting{
    animation:countPop .3s ease;
}

@keyframes countPop{
    0%{ transform:scale(1); }
    45%{ transform:scale(1.15); }
    100%{ transform:scale(1); }
}

.stat-progress{
    width:56px;
    height:4px;
    margin:0 auto 12px;
    border-radius:3px;
    background:var(--border-color);
    overflow:hidden;
}

.stat-progress-fill{
    display:block;
    height:100%;
    width:100%;
    border-radius:3px;
    background:linear-gradient(90deg,var(--accent),var(--accent-2));
}

.stat-card p{
    color:var(--text-muted);
    font-size:14px;
}

/* ==================== PROJECTS ==================== */

.projects{
    padding:80px 8%;
    background:var(--bg-alt);
}

.project-container{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
    max-width:1150px;
    margin:0 auto;
}

.project-card{
    display:flex;
    flex-direction:column;
    background:var(--card-bg);
    border-radius:16px;
    overflow:hidden;
    box-shadow:0 5px 20px var(--shadow-soft);
    transition:transform .35s ease,box-shadow .35s ease;
}

.project-card:hover{
    transform:translateY(-10px);
    box-shadow:0 22px 38px rgba(123,47,247,.18);
}

.project-media{
    position:relative;
    overflow:hidden;
    height:200px;
}

.project-media img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:transform .5s ease;
}

.project-card:hover .project-media img{
    transform:scale(1.1);
}

.project-shine{
    position:absolute;
    inset:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:14px;
    font-size:22px;
    color:#fff;
    background:linear-gradient(180deg,rgba(30,10,60,.15) 0%,rgba(20,8,45,.85) 100%);
    opacity:0;
    transition:opacity .35s ease;
    text-align:center;
    padding:16px;
}

.project-card:hover .project-shine{
    opacity:1;
}

.project-media-tags{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:8px;
    transform:translateY(8px);
    opacity:0;
    transition:opacity .35s ease .05s,transform .35s ease .05s;
}

.project-card:hover .project-media-tags{
    opacity:1;
    transform:translateY(0);
}

.project-media-tags span{
    font-size:12px;
    font-weight:600;
    letter-spacing:.3px;
    padding:6px 12px;
    border-radius:20px;
    background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.28);
    color:#fff;
}

.project-card h2{
    margin:20px 20px 10px;
    font-size:22px;
    color:var(--text-main);
}

.project-card p{
    flex:1;
    margin:0 20px 20px;
    color:var(--text-muted);
    line-height:1.6;
}

.project-actions{
    display:flex;
    align-items:center;
    gap:10px;
    margin:auto 20px 25px;
}

.project-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    flex:1;
    padding:12px 18px;
    background:var(--accent);
    color:#fff;
    border-radius:8px;
    font-size:15px;
    transition:background .3s ease,gap .3s ease,transform .3s ease;
}

.project-btn i{
    transition:transform .3s ease;
}

.project-btn:hover{
    background:#5e18d6;
    gap:12px;
}

.project-btn:hover i{
    transform:translateX(3px);
}

.icon-btn{
    width:44px;
    height:44px;
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:8px;
    background:var(--card-bg-alt);
    border:1px solid var(--border-color-2);
    color:var(--text-main);
    font-size:18px;
    transition:background .3s ease,color .3s ease,transform .3s ease,border-color .3s ease;
}

.icon-btn:hover{
    transform:translateY(-3px);
}

.linkedin-btn:hover{
    background:#0A66C2;
    border-color:#0A66C2;
    color:#fff;
}

.github-btn:hover{
    background:#181717;
    border-color:#181717;
    color:#fff;
}

.tech-tags{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin:0 20px 16px;
}

.tech-tags span{
    background:var(--card-bg-alt);
    border:1px solid var(--border-color-2);
    color:var(--text-muted);
    font-size:12px;
    font-weight:500;
    padding:4px 12px;
    border-radius:20px;
    transition:background .3s ease,color .3s ease,border-color .3s ease;
}

.tech-tags span:hover{
    background:var(--accent);
    color:#fff;
    border-color:var(--accent);
}

/* ==================== SERVICES ==================== */

.services{
    padding:140px 8% 80px;
    background:var(--bg-page);
}

.service-container{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
    max-width:1150px;
    margin:0 auto;
}

.service-card{
    position:relative;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    align-items:center;
    background:var(--card-bg-alt);
    border:1px solid transparent;
    border-radius:16px;
    padding:35px 25px;
    text-align:center;
    box-shadow:0 5px 20px var(--shadow-soft);
    transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease;
}

.service-card::before{
    content:'';
    position:absolute;
    top:0;
    left:-75%;
    width:50%;
    height:100%;
    background:linear-gradient(120deg,transparent,rgba(123,47,247,.12),transparent);
    transform:skewX(-20deg);
    transition:left .6s ease;
}

.service-card:hover::before{
    left:125%;
}

.service-card:hover{
    transform:translateY(-10px);
    box-shadow:0 20px 35px rgba(123,47,247,.15);
    border-color:var(--accent-2);
}

.icon{
    width:70px;
    height:70px;
    margin:0 auto 20px;
    background:var(--accent);
    color:#fff;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:26px;
    transition:transform .4s ease,background .4s ease,border-radius .4s ease;
}

.service-card:hover .icon{
    transform:rotate(-8deg) scale(1.1);
    background:linear-gradient(135deg,var(--accent),var(--accent-2));
    border-radius:30%;
}

.service-card h2{
    font-size:20px;
    margin-bottom:12px;
    color:var(--text-main);
}

.service-card p{
    color:var(--text-muted);
    line-height:1.6;
    font-size:15px;
}

/* ==================== SKILLS ==================== */

.skills{
    padding:140px 8% 80px;
    background:var(--bg-alt);
}

.skills-text{
    text-align:left;
    color:var(--text-muted);
    font-size:17px;
    max-width:900px;
    margin:0 auto 40px;
}

.skills-container{
    max-width:900px;
    margin:0 auto;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:24px;
}

.skills-subheading{
    display:flex;
    align-items:center;
    gap:16px;
    max-width:900px;
    margin:52px auto 26px;
    font-size:13px;
    font-weight:600;
    letter-spacing:.6px;
    text-transform:uppercase;
    color:var(--text-muted);
}

.skills-subheading::before,
.skills-subheading::after{
    content:'';
    flex:1;
    height:1px;
    background:var(--border-color-2);
}

.secondary-skills{
    grid-template-columns:repeat(3,1fr);
    max-width:640px;
}

.secondary-skills .skill-card{
    opacity:0;
    animation:fadeUp .6s ease forwards;
}

.secondary-skills .skill-card:nth-child(1){ animation-delay:.05s; }
.secondary-skills .skill-card:nth-child(2){ animation-delay:.18s; }
.secondary-skills .skill-card:nth-child(3){ animation-delay:.31s; }

.skill-card{
    position:relative;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    align-items:center;
    background:var(--card-bg);
    border:1px solid var(--border-color);
    border-radius:16px;
    padding:28px 15px;
    text-align:center;
    transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;
}

.skill-card::before{
    content:'';
    position:absolute;
    top:0;
    left:-75%;
    width:50%;
    height:100%;
    background:linear-gradient(120deg,transparent,rgba(123,47,247,.1),transparent);
    transform:skewX(-20deg);
    transition:left .6s ease;
}

.skill-card:hover::before{
    left:125%;
}

.skill-card:hover{
    transform:translateY(-8px) scale(1.03);
    box-shadow:0 14px 28px rgba(123,47,247,.14);
    border-color:var(--accent);
}

.skill-card .icon{
    width:60px;
    height:60px;
    font-size:24px;
    margin-bottom:16px;
    background:linear-gradient(135deg,var(--accent),var(--accent-2));
}

.skill-card:hover .icon{
    transform:rotate(10deg) scale(1.1);
    border-radius:35%;
}

.skill-card h2{
    font-size:15px;
    font-weight:500;
    color:var(--text-main);
}

.skill-bar{
    width:100%;
    height:6px;
    background:var(--border-color);
    border-radius:4px;
    overflow:hidden;
    margin-top:14px;
}

.skill-bar-fill{
    display:block;
    height:100%;
    width:var(--pct);
    border-radius:4px;
    background:linear-gradient(90deg,var(--accent),var(--accent-2));
    transition:width 1.3s ease .1s;
}

.skill-bar-fill.pre-fill{
    width:0;
}

.skill-card.in-view .skill-bar-fill.pre-fill{
    width:var(--pct);
}

.skill-percent{
    display:block;
    margin-top:6px;
    font-size:12px;
    color:var(--text-muted);
}

/* ==================== EDUCATION (TIMELINE) ==================== */

.education{
    padding:120px 8% 90px;
    background:var(--bg-page);
}

.timeline{
    position:relative;
    max-width:700px;
    margin:0 auto;
    padding-left:34px;
}

.timeline::before{
    content:'';
    position:absolute;
    left:6px;
    top:6px;
    bottom:6px;
    width:2px;
    background:linear-gradient(var(--accent),var(--accent-2));
}

.timeline-item{
    position:relative;
    margin-bottom:36px;
}

.timeline-item:last-child{
    margin-bottom:0;
}

.timeline-dot{
    position:absolute;
    left:-34px;
    top:6px;
    width:14px;
    height:14px;
    border-radius:50%;
    background:var(--accent);
    box-shadow:0 0 0 4px var(--bg-page);
}

.timeline-content{
    background:var(--card-bg-alt);
    border:1px solid var(--border-color);
    border-radius:14px;
    padding:22px 24px;
    transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;
}

.timeline-content:hover{
    transform:translateX(6px);
    box-shadow:0 12px 24px rgba(123,47,247,.12);
    border-color:var(--accent-2);
}

.timeline-date{
    display:inline-block;
    font-size:12px;
    font-weight:600;
    color:var(--accent);
    background:rgba(123,47,247,.1);
    padding:4px 12px;
    border-radius:20px;
    margin-bottom:10px;
}

.timeline-content h3{
    font-size:18px;
    margin-bottom:8px;
    color:var(--text-main);
}

.timeline-content p{
    color:var(--text-muted);
    font-size:14.5px;
    line-height:1.6;
}

/* ==================== CONTACT ==================== */

.contact{
    padding:140px 8% 80px;
    background:var(--bg-page);
}

.contact-container{
    display:flex;
    justify-content:space-between;
    gap:50px;
    flex-wrap:wrap;
    max-width:1000px;
    margin:0 auto;
}

.contact-info{
    flex:1;
    min-width:280px;
}

.contact-info h2{
    font-size:28px;
    margin-bottom:15px;
    color:var(--text-main);
}

.contact-info p{
    color:var(--text-muted);
    line-height:1.6;
    margin-bottom:25px;
}

.info{
    display:flex;
    align-items:center;
    gap:15px;
    margin-bottom:20px;
    transition:transform .3s ease;
}

.info:hover{
    transform:translateX(6px);
}

.info i{
    width:44px;
    height:44px;
    background:var(--accent);
    color:#fff;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:16px;
    transition:border-radius .3s ease;
}

.info:hover i{
    border-radius:30%;
}

.info span{
    color:var(--text-main);
    font-size:16px;
}

.info a{
    color:var(--text-main);
    font-size:16px;
    text-decoration:none;
}

.info a:hover{
    color:var(--accent);
}

.contact-form{
    flex:1;
    min-width:280px;
    display:flex;
    flex-direction:column;
    gap:22px;
}

.form-group{
    position:relative;
}

.form-group input,
.form-group textarea{
    width:100%;
    padding:16px;
    border:1px solid var(--border-color-2);
    outline:none;
    background:var(--card-bg);
    color:var(--text-main);
    border-radius:10px;
    font-size:15px;
    transition:border-color .3s ease,box-shadow .3s ease;
}

.form-group textarea{
    resize:none;
}

.form-group input:focus,
.form-group textarea:focus{
    border-color:var(--accent);
    box-shadow:0 0 0 4px rgba(123,47,247,.12);
}

.form-group label{
    position:absolute;
    left:16px;
    top:16px;
    color:var(--text-muted);
    font-size:15px;
    background:var(--card-bg);
    padding:0 5px;
    pointer-events:none;
    transition:top .2s ease,left .2s ease,font-size .2s ease,color .2s ease;
}

.form-group input:focus + label,
.form-group input:not(:placeholder-shown) + label,
.form-group textarea:focus + label,
.form-group textarea:not(:placeholder-shown) + label{
    top:-9px;
    left:12px;
    font-size:12px;
    color:var(--accent);
}

.field-error{
    display:block;
    min-height:14px;
    margin-top:-14px;
    padding-left:4px;
    font-size:12px;
    line-height:14px;
    color:#e5484d;
}

/* Row under the message box: error on the left, live word count on
   the right — so the count is always visible while typing instead
   of the person finding out about the 500-word limit only after
   hitting Send. */
.message-meta{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-top:-14px;
    padding-left:4px;
    margin-bottom:6px;
}

.message-meta .field-error{
    margin-top:0;
    padding-left:0;
}

.word-counter{
    flex-shrink:0;
    font-size:12px;
    color:var(--text-muted);
    font-variant-numeric:tabular-nums;
    transition:color .25s ease;
}

.word-counter.is-near-limit{
    color:#e0a12c;
}

.word-counter.is-over-limit{
    color:#e5484d;
    font-weight:600;
}

.form-group.has-error input,
.form-group.has-error textarea{
    border-color:#e5484d;
    box-shadow:0 0 0 4px rgba(229,72,77,.12);
}

/* Toast notification (used for the Download CV confirmation) */

.toast{
    position:fixed;
    bottom:30px;
    left:50%;
    transform:translate(-50%,16px);
    display:flex;
    align-items:center;
    gap:10px;
    max-width:90vw;
    padding:14px 22px;
    background:var(--card-bg);
    color:var(--text-main);
    border:1px solid var(--border-color);
    border-radius:10px;
    box-shadow:0 14px 30px var(--shadow-color);
    font-size:14px;
    font-weight:500;
    opacity:0;
    pointer-events:none;
    z-index:1200;
    transition:opacity .3s ease,transform .3s ease;
}

.toast.show{
    opacity:1;
    transform:translate(-50%,0);
}

.contact-form button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:15px;
    border:none;
    background:linear-gradient(90deg,var(--accent),#9b4dff);
    background-size:200% auto;
    color:#fff;
    font-size:16px;
    font-weight:600;
    border-radius:10px;
    cursor:pointer;
    transition:background-position .4s ease,transform .3s ease,box-shadow .3s ease;
}

.contact-form button:hover{
    background-position:right center;
    transform:translateY(-3px);
    box-shadow:0 14px 26px rgba(123,47,247,.3);
}

.contact-form button:disabled{
    opacity:.7;
    cursor:not-allowed;
    transform:none;
}

.form-status{
    font-size:14px;
    color:var(--text-muted);
    min-height:20px;
}

.form-status.success{
    color:#1a9e4f;
    font-weight:600;
}

/* ==================== FOOTER ==================== */

footer{
    text-align:center;
    padding:25px;
    border-top:1px solid var(--border-color);
    color:var(--text-muted);
    font-size:14px;
}

/* Back to top */

.back-to-top{
    position:fixed;
    bottom:30px;
    right:30px;
    width:48px;
    height:48px;
    border-radius:50%;
    background:var(--accent);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:18px;
    box-shadow:0 10px 24px rgba(123,47,247,.35);
    z-index:999;
    transition:transform .3s ease,background .3s ease,box-shadow .3s ease,opacity .3s ease;
}

.back-to-top.js-managed{
    opacity:0;
    transform:translateY(16px);
    pointer-events:none;
}

.back-to-top.js-managed.show{
    opacity:1;
    transform:translateY(0);
    pointer-events:auto;
}

.back-to-top:hover{
    background:#5e18d6;
    transform:translateY(-5px);
    box-shadow:0 14px 30px rgba(123,47,247,.4);
}

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

@media(max-width:900px){

    body{
        padding:0 30px;
    }

    .hero{
        text-align:center;
    }

    .text{
        margin-left:auto;
        margin-right:auto;
    }

    .buttons{
        justify-content:center;
    }

    .button-wrapper{
        align-items:center;
    }

    .rotator{
        margin-left:auto;
        margin-right:auto;
    }

    .code-card{
        left:50%;
        transform:translate(-50%,0);
    }

    .about-container{
        flex-direction:column;
        text-align:center;
    }

    .fun-facts{
        align-items:center;
    }

    .fact:hover{
        transform:none;
    }

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

    .skills-container{
        grid-template-columns:repeat(3,1fr);
    }

    .contact-container{
        flex-direction:column;
    }
}

@media(max-width:768px){

    .menu-btn{
        display:flex;
    }

    .nav-right{
        gap:14px;
    }

    nav ul{
        position:absolute;
        top:100%;
        left:0;
        right:0;
        background:var(--bg-page);
        flex-direction:column;
        gap:20px;
        padding:20px 8%;
        border-bottom:1px solid var(--border-color);
        display:none;
    }

    .menu-toggle:checked ~ #navLinks{
        display:flex;
    }
}

@media(max-width:480px){

    body{
        padding:0;
    }

    .left h1{
        font-size:38px;
    }

    .photo-wrap,
    .circle{
        width:240px;
        height:240px;
    }

    .code-card{
        width:200px;
        bottom:-30px;
    }

    .rotator{
        font-size:14px;
    }

    .project-container,
    .service-container{
        grid-template-columns:1fr;
    }

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

    .stats-grid{
        grid-template-columns:1fr;
    }

    .timeline{
        padding-left:26px;
    }

    .timeline-dot{
        left:-26px;
    }
}
/* ==================== WHATSAPP FLOATING BUTTON ==================== */

.whatsapp-fab{
    position:fixed;
    bottom:30px;
    left:30px;
    width:56px;
    height:56px;
    border-radius:50%;
    background:#25D366;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:26px;
    box-shadow:0 12px 26px rgba(37,211,102,.4);
    z-index:998;
    transition:transform .3s ease,box-shadow .3s ease;
}

.whatsapp-fab:hover{
    transform:translateY(-5px) scale(1.05);
    box-shadow:0 16px 32px rgba(37,211,102,.5);
}

.whatsapp-fab-ping{
    position:absolute;
    inset:0;
    border-radius:50%;
    box-shadow:0 0 0 0 rgba(37,211,102,.55);
    animation:pulseRing 2.4s ease-out infinite;
    pointer-events:none;
}

@media (max-width:480px){
    .whatsapp-fab{
        width:50px;
        height:50px;
        font-size:23px;
        bottom:20px;
        left:20px;
    }
}

/* ==================== CV DOWNLOAD CONFIRM MODAL ==================== */

.cv-modal{
    position:fixed;
    inset:0;
    z-index:6000;
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:0;
    visibility:hidden;
    transition:opacity .3s ease,visibility .3s ease;
}

.cv-modal.is-open{
    opacity:1;
    visibility:visible;
}

.cv-modal-backdrop{
    position:absolute;
    inset:0;
    background:rgba(10,6,20,.6);
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
}

.cv-modal-box{
    position:relative;
    z-index:1;
    width:min(90vw,380px);
    background:var(--card-bg);
    border:1px solid var(--border-color);
    border-radius:18px;
    padding:34px 28px 28px;
    text-align:center;
    box-shadow:0 30px 60px rgba(0,0,0,.35);
    transform:translateY(20px) scale(.96);
    transition:transform .35s cubic-bezier(.34,1.56,.64,1);
}

.cv-modal.is-open .cv-modal-box{
    transform:translateY(0) scale(1);
}

.cv-modal-icon{
    width:60px;
    height:60px;
    margin:0 auto 16px;
    border-radius:50%;
    background:linear-gradient(135deg,var(--accent),var(--accent-2));
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:24px;
}

.cv-modal-box h3{
    font-family:'Unbounded','Poppins',sans-serif;
    font-size:19px;
    color:var(--text-main);
    margin-bottom:10px;
}

.cv-modal-box p{
    color:var(--text-muted);
    font-size:14px;
    line-height:1.6;
    margin-bottom:24px;
}

.cv-modal-actions{
    display:flex;
    gap:12px;
}

.cv-modal-btn{
    flex:1;
    padding:12px;
    border-radius:10px;
    font-size:14.5px;
    font-weight:600;
    cursor:pointer;
    transition:transform .25s ease,background .25s ease,box-shadow .25s ease;
    border:1px solid transparent;
}

.cv-modal-cancel{
    background:var(--card-bg-alt);
    border-color:var(--border-color-2);
    color:var(--text-main);
}

.cv-modal-cancel:hover{
    background:var(--border-color-2);
}

.cv-modal-confirm{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    background:linear-gradient(90deg,var(--accent),var(--accent-2));
    color:#fff;
}

.cv-modal-confirm:hover{
    transform:translateY(-2px);
    box-shadow:0 12px 22px rgba(123,47,247,.32);
}

@media (prefers-reduced-motion: reduce){
    .whatsapp-fab-ping{ animation:none !important; }
    .cv-modal-box{ transition:none !important; }
}

/* ==================== CUSTOM CURSOR ==================== */

body{
    cursor:none;
}

.cursor-dot,.cursor-ring{
    position:fixed;
    top:0;
    left:0;
    pointer-events:none;
    z-index:9999;
    border-radius:50%;
    transform:translate(-50%,-50%);
    will-change:transform;
}

.cursor-dot{
    width:11px;
    height:11px;
    background:var(--accent);
    box-shadow:0 0 10px 2px color-mix(in srgb, var(--accent) 65%, transparent);
    transition:background .3s ease,transform .15s ease;
}

.cursor-ring{
    width:44px;
    height:44px;
    border:2px solid rgba(123,47,247,.7);
    box-shadow:0 0 16px 2px rgba(123,47,247,.35);
    transition:width .25s ease,height .25s ease,border-color .3s ease,background .3s ease,box-shadow .3s ease;
}

.cursor-ring.is-hovering{
    width:68px;
    height:68px;
    background:rgba(123,47,247,.1);
    border-color:#25D366;
    box-shadow:0 0 22px 4px rgba(37,211,102,.4);
}

@media (max-width:900px), (hover:none){
    body{ cursor:auto; }
    .cursor-dot,.cursor-ring{ display:none; }
}

@media (prefers-reduced-motion: reduce){
    .cursor-dot,.cursor-ring{ display:none; }
    body{ cursor:auto; }
}

/* ---- Cursor sprinkle trail — small glowing sparks spawned on
   mousemove (JS-generated), giving the cursor a "spread" trail ---- */
.cursor-sprinkle{
    position:fixed;
    top:0;
    left:0;
    width:10px;
    height:10px;
    border-radius:50%;
    background:var(--accent);
    box-shadow:0 0 12px 4px color-mix(in srgb, var(--accent) 75%, transparent);
    pointer-events:none;
    z-index:9999;
    transform:translate(-50%,-50%) scale(1);
    animation:cursorSprinkleSpread 1.1s cubic-bezier(.2,.7,.3,1) forwards;
}

.cursor-sprinkle--alt{
    width:7px;
    height:7px;
    background:var(--accent-2);
    box-shadow:0 0 12px 4px color-mix(in srgb, var(--accent-2) 75%, transparent);
}

@keyframes cursorSprinkleSpread{
    0%{
        opacity:1;
        transform:translate(-50%,-50%) scale(1);
    }
    100%{
        opacity:0;
        transform:translate(calc(-50% + var(--sprinkle-drift-x)),calc(-50% + var(--sprinkle-drift-y))) scale(.1);
    }
}

@media (max-width:900px), (hover:none){
    .cursor-sprinkle{ display:none; }
}

/* ==================== MAGNETIC BUTTONS ====================
   JS moves these slightly toward the cursor when nearby; the CSS
   transition just smooths that movement and the return-to-rest. */

.btn1,.btn2,.download-btn,.project-btn,.splash-enter,.splash-pill,
.contact-form button,.icon-btn,.back-to-top,.whatsapp-fab{
    transition:transform .25s cubic-bezier(.2,.8,.2,1),
               background .3s ease,color .3s ease,box-shadow .3s ease,border-color .3s ease;
}

/* ==================== ANIMATED GRADIENT MESH BACKGROUND ====================
   A slow-moving, blurred multi-color gradient sitting behind the
   whole page (fixed, so it drifts subtly as you scroll through
   sections). Sits below every card/section, above the flat body
   background. Purely decorative — safe if it fails to render. */

.mesh-bg{
    position:fixed;
    inset:0;
    z-index:0;
    pointer-events:none;
    overflow:hidden;
    opacity:.55;
}

.mesh-bg span{
    position:absolute;
    border-radius:50%;
    filter:blur(120px);
    opacity:.5;
}

.mesh-bg span:nth-child(1){
    width:480px;height:480px;background:#7b2ff7;
    top:-10%;left:-8%;
    animation:meshDrift 22s ease-in-out infinite;
}

.mesh-bg span:nth-child(2){
    width:420px;height:420px;background:#25D366;
    top:35%;right:-10%;
    opacity:.28;
    animation:meshDrift 26s ease-in-out infinite reverse;
}

.mesh-bg span:nth-child(3){
    width:400px;height:400px;background:#c46bff;
    bottom:-12%;left:20%;
    animation:meshDrift 30s ease-in-out infinite;
    animation-delay:-6s;
}

@keyframes meshDrift{
    0%,100%{ transform:translate(0,0) scale(1); }
    33%{ transform:translate(60px,-40px) scale(1.1); }
    66%{ transform:translate(-40px,50px) scale(.95); }
}

body:has(#darkToggle:checked) .mesh-bg{
    opacity:.4;
}

.page-wrap{
    position:relative;
    z-index:1;
    background:transparent;
}

/* Sections need their own solid-ish backdrop again now that
   page-wrap is transparent, so text stays readable over the mesh */
.hero,.about,.projects,.services,.skills,.education,.github-activity,.contact{
    background:var(--bg-page);
}

.about,.projects,.services,.education{
    background:var(--bg-alt);
}

@media (prefers-reduced-motion: reduce){
    .mesh-bg span{ animation:none !important; }
}

/* ==================== GLASSMORPHISM CARDS ====================
   Applied to stat/project/service/skill cards and timeline content:
   frosted, translucent panels with a soft border instead of a flat
   solid fill, so the mesh background shows faintly through them. */

.stat-card,.project-card,.service-card,.skill-card,.timeline-content,
.github-card{
    background:var(--glass-bg, rgba(255,255,255,.55));
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    border:1px solid var(--glass-border, rgba(255,255,255,.5));
}

:root{
    --glass-bg:rgba(255,255,255,.55);
    --glass-border:rgba(255,255,255,.6);
}

body:has(#darkToggle:checked){
    --glass-bg:rgba(28,22,48,.55);
    --glass-border:rgba(255,255,255,.08);
}

/* ==================== GITHUB ACTIVITY SECTION ==================== */

.github-activity{
    padding:140px 8% 80px;
}

.github-text{
    text-align:center;
    color:var(--text-muted);
    font-size:17px;
    max-width:560px;
    margin:0 auto 44px;
}

.github-card{
    max-width:900px;
    margin:0 auto;
    border-radius:18px;
    padding:26px;
    box-shadow:0 10px 30px var(--shadow-soft);
}

.github-card-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:16px;
    margin-bottom:20px;
}

.github-user{
    display:flex;
    align-items:center;
    gap:14px;
}

.github-user i{
    width:44px;
    height:44px;
    border-radius:50%;
    background:#181717;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:20px;
    flex-shrink:0;
}

.github-user strong{
    display:block;
    color:var(--text-main);
    font-size:16px;
}

.github-user span{
    display:block;
    color:var(--text-muted);
    font-size:13px;
    margin-top:2px;
}

.github-visit-btn{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:10px 18px;
    border-radius:8px;
    background:var(--accent);
    color:#fff;
    font-size:14px;
    font-weight:600;
}

.github-visit-btn:hover{
    background:#5e18d6;
}

.github-chart-wrap{
    width:100%;
    overflow-x:auto;
    padding:14px 4px;
    border-radius:12px;
    background:var(--bg-alt);
}

.github-chart-wrap img{
    display:block;
    min-width:640px;
    width:100%;
    height:auto;
    /* Brighten/adjust the auto-generated chart slightly so it reads
       well on both light and dark backgrounds */
    filter:saturate(1.05);
}

body:has(#darkToggle:checked) .github-chart-wrap img{
    filter:invert(.92) hue-rotate(180deg) saturate(1.3);
}

@media (max-width:600px){
    .github-card-head{ flex-direction:column; align-items:flex-start; }
}

/* ==================== CONFETTI CANVAS ==================== */

#confettiCanvas{
    position:fixed;
    inset:0;
    z-index:7000;
    pointer-events:none;
}

/* ==================== ADMIN MENU (home page only) ====================
   A small separate hamburger-style trigger next to the theme switch.
   Only rendered on index.html. Opens a tiny dropdown containing the
   not-yet-built Admin Dashboard, instead of cluttering the main nav
   with a link that doesn't go anywhere yet. */

.admin-menu{
    position:relative;
}

.admin-menu-btn{
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:4px;
    width:36px;
    height:36px;
    border-radius:8px;
    border:1px solid var(--border-color-2, rgba(0,0,0,.08));
    background:transparent;
    cursor:pointer;
    transition:background .25s ease, border-color .25s ease;
}

.admin-menu-btn span{
    display:block;
    width:16px;
    height:2px;
    border-radius:2px;
    background:var(--text-main);
    transition:transform .25s ease, opacity .25s ease;
}

.admin-menu-btn:hover{
    background:rgba(123,47,247,.08);
    border-color:var(--accent);
}

.admin-menu.is-open .admin-menu-btn span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.admin-menu.is-open .admin-menu-btn span:nth-child(2){ opacity:0; }
.admin-menu.is-open .admin-menu-btn span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

.admin-menu-dropdown{
    position:absolute;
    top:calc(100% + 12px);
    right:0;
    min-width:200px;
    background:var(--card-bg);
    border:1px solid var(--border-color);
    border-radius:12px;
    box-shadow:0 20px 40px rgba(0,0,0,.18);
    padding:8px;
    opacity:0;
    visibility:hidden;
    transform:translateY(-8px);
    transition:opacity .25s ease, transform .25s ease, visibility .25s ease;
    z-index:500;
}

.admin-menu.is-open .admin-menu-dropdown{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

.admin-menu-item{
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px 12px;
    border-radius:8px;
    font-size:14px;
    font-weight:600;
    color:var(--text-main);
    transition:background .2s ease;
}

.admin-menu-item:hover{
    background:rgba(123,47,247,.1);
}

.admin-menu-item i{
    color:var(--accent);
    width:16px;
    text-align:center;
}

.admin-menu-item::after{
    content:'Soon';
    margin-left:auto;
    font-size:9px;
    font-weight:700;
    letter-spacing:.04em;
    text-transform:uppercase;
    color:#fff;
    background:var(--accent);
    padding:2px 6px;
    border-radius:20px;
}

@media (max-width:900px){
    .admin-menu{ display:none; }
}

/* ==================== CONTACT CTA CARDS (no-form contact page) ====================
   Direct contact buttons instead of a form — nothing to validate,
   nothing that can silently fail. Each card is a real link that
   opens the person's email client, WhatsApp, phone dialer, or
   profile directly. */

.contact-container--simple{
    display:flex;
    flex-direction:column;
    gap:48px;
    align-items:stretch;
}

.contact-container--simple .contact-info{
    max-width:600px;
}

.contact-cta-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:22px;
}

.contact-cta-card{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
    padding:28px 24px;
    border-radius:16px;
    background:var(--glass-bg, rgba(255,255,255,.55));
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    border:1px solid var(--glass-border, rgba(255,255,255,.5));
    transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}

.contact-cta-card:hover{
    transform:translateY(-6px);
    border-color:var(--accent);
    box-shadow:0 20px 40px -12px rgba(123,47,247,.25);
}

.contact-cta-icon{
    width:52px;
    height:52px;
    border-radius:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:22px;
    color:#fff;
    background:linear-gradient(135deg, var(--accent), var(--accent-2));
}

.contact-cta-icon--whatsapp{ background:linear-gradient(135deg, #25D366, #128C4A); }
.contact-cta-icon--linkedin{ background:linear-gradient(135deg, #0A66C2, #084d92); }
.contact-cta-icon--github{ background:linear-gradient(135deg, #333, #111); }

.contact-cta-card h3{
    font-family:'Unbounded','Poppins',sans-serif;
    font-size:16px;
    color:var(--text-main);
}

.contact-cta-card p{
    font-size:13.5px;
    color:var(--text-muted);
    word-break:break-word;
}

@media (max-width:900px){
    .contact-cta-grid{
        grid-template-columns:repeat(2, 1fr);
    }
}

@media (max-width:600px){
    .contact-cta-grid{
        grid-template-columns:1fr;
    }
}


/* ==================== HOME: SECTION PREVIEWS ====================
   Four separate, full-width homepage sections — About, Skills,
   Education, Project — each a short teaser that ends in a big,
   unmistakable CTA button pointing to the matching full page.
   Alternates background with .home-glance--alt, same as the
   about/projects/services/education pattern elsewhere on the site. */

.home-glance{
    position:relative;
    padding:110px 8% 90px;
    background:var(--bg-page);
    text-align:center;
}

.home-glance--alt{
    background:var(--bg-alt);
}

.home-glance-inner{
    max-width:640px;
    margin:0 auto;
    display:flex;
    flex-direction:column;
    align-items:center;
}

.home-glance-icon{
    width:56px;
    height:56px;
    border-radius:16px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:22px;
    color:#fff;
    background:linear-gradient(135deg,var(--accent),var(--accent-2));
    margin-bottom:22px;
}

.home-glance h1{
    position:relative;
    font-family:'Unbounded','Poppins',sans-serif;
    font-size:36px;
    margin-bottom:22px;
    padding-bottom:18px;
}

.home-glance h1::after{
    content:'';
    position:absolute;
    left:50%;
    bottom:0;
    transform:translateX(-50%);
    width:64px;
    height:4px;
    border-radius:4px;
    background:linear-gradient(90deg,var(--accent),var(--accent-2));
}

.home-glance h1 span{
    color:var(--accent);
}

.home-glance-subtitle{
    font-size:19px;
    color:var(--text-main);
    margin-bottom:10px;
}

.home-glance-text{
    color:var(--text-muted);
    font-size:16px;
    line-height:1.8;
    margin-bottom:28px;
}

.glance-date{
    display:inline-block;
    font-size:12px;
    font-weight:600;
    color:var(--accent);
    background:rgba(123,47,247,.1);
    padding:4px 12px;
    border-radius:20px;
    margin-bottom:14px;
}

.glance-chip-row{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:10px;
    margin-bottom:30px;
}

.glance-chip{
    display:inline-flex;
    align-items:center;
    gap:7px;
    font-size:13.5px;
    font-weight:500;
    color:var(--text-main);
    background:var(--card-bg);
    border:1px solid var(--border-color-2);
    padding:8px 16px;
    border-radius:20px;
    transition:transform .3s ease,border-color .3s ease;
}

.glance-chip:hover{
    transform:translateY(-3px);
    border-color:var(--accent);
}

.glance-tags{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-bottom:26px;
}

.glance-tags span{
    font-size:12.5px;
    font-weight:500;
    color:var(--accent);
    background:rgba(123,47,247,.1);
    padding:6px 13px;
    border-radius:20px;
}

/* ---- The main "View Details" style CTA button ----
   Solid gradient fill + resting pulse + a strong lift/glow on
   hover, so it reads immediately as the clickable next step
   rather than a quiet inline link. */

.glance-cta{
    position:relative;
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:16px 34px;
    border-radius:50px;
    font-size:16px;
    font-weight:700;
    color:#fff;
    text-decoration:none;
    background:linear-gradient(90deg,var(--accent),var(--accent-2));
    background-size:200% auto;
    box-shadow:0 14px 30px -8px rgba(123,47,247,.45);
    transition:background-position .4s ease,transform .3s ease,box-shadow .3s ease;
}

.glance-cta::after{
    content:'';
    position:absolute;
    inset:0;
    border-radius:50px;
    box-shadow:0 0 0 0 rgba(123,47,247,.4);
    animation:glanceCtaPulse 2.6s ease-out infinite;
    pointer-events:none;
}

@keyframes glanceCtaPulse{
    0%{ box-shadow:0 0 0 0 rgba(123,47,247,.4); }
    70%{ box-shadow:0 0 0 16px rgba(123,47,247,0); }
    100%{ box-shadow:0 0 0 0 rgba(123,47,247,0); }
}

.glance-cta:hover{
    background-position:right center;
    transform:translateY(-5px) scale(1.03);
    box-shadow:0 20px 40px -10px rgba(123,47,247,.55);
}

.glance-cta i{
    font-size:14px;
    transition:transform .3s ease;
}

.glance-cta:hover i{
    transform:translateX(4px);
}

/* ---- Latest Project section (home page): reuses the exact
   .project-card component from projects.html for visual
   consistency, just centered as a single card ---- */

.home-latest-project{
    max-width:380px;
    margin:0 auto 36px;
}

/* ---- View All Projects button (home page): same animated
   rainbow gradient / shine / glow treatment as the landing
   page's "Enter Portfolio" button ---- */
.home-latest-project-cta{
    position:relative;
    overflow:visible;
    margin-top:6px;
    background:linear-gradient(90deg,#7b2ff7,#c46bff,#25D366,#7b2ff7);
    background-size:300% auto;
    box-shadow:0 18px 34px -10px rgba(123,47,247,.6);
    animation:splashEnterGradient 4s linear infinite, homeBtnFloat 2.8s ease-in-out infinite;
}

.home-latest-project-cta:hover{
    background:linear-gradient(90deg,#7b2ff7,#c46bff,#25D366,#7b2ff7);
    background-size:300% auto;
}

.home-latest-project-cta::before{
    content:'';
    position:absolute;
    inset:0;
    top:0;
    left:-60%;
    width:45%;
    height:100%;
    background:linear-gradient(120deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.6) 50%,rgba(255,255,255,0) 100%);
    transform:skewX(-20deg);
    animation:splashEnterShine 2.8s ease-in-out infinite;
    pointer-events:none;
    border-radius:50px;
    overflow:hidden;
    z-index:1;
}

.home-latest-project-cta::after{
    content:'';
    position:absolute;
    inset:-6px;
    border-radius:60px;
    background:linear-gradient(90deg,#7b2ff7,#c46bff,#25D366,#7b2ff7);
    background-size:300% auto;
    z-index:-1;
    filter:blur(14px);
    opacity:.65;
    animation:splashEnterGradient 4s linear infinite, splashEnterGlow 2.4s ease-out infinite;
    pointer-events:none;
}

@keyframes homeBtnFloat{
    0%,100%{ transform:translateY(0); }
    50%{ transform:translateY(-3px); }
}

@media (max-width:480px){
    .home-latest-project{
        max-width:320px;
    }
}

/* ---- Latest Project section: image + content side by side ---- */

.home-glance-inner--project{
    max-width:980px;
    display:flex;
    align-items:center;
    gap:50px;
    text-align:left;
}

.home-glance-inner--project .home-project-content{
    flex:1 1 440px;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
}

.home-glance-inner--project h1,
.home-glance-inner--project .home-glance-icon{
    align-self:flex-start;
}

.home-project-media{
    flex:0 0 300px;
    width:300px;
    aspect-ratio:4/5;
    border-radius:20px;
    overflow:hidden;
    border:1px solid var(--border-color-2);
    box-shadow:0 20px 45px -15px rgba(0,0,0,.25);
}

.home-project-media img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    transition:transform .5s ease;
}

.home-project-media:hover img{
    transform:scale(1.06);
}

@media (max-width:900px){
    .home-glance-inner--project{
        flex-direction:column;
        text-align:center;
    }
    .home-glance-inner--project h1,
    .home-glance-inner--project .home-glance-icon{
        align-self:center;
    }
    .home-glance-inner--project .home-project-content{
        align-items:center;
    }
    .home-project-media{
        width:220px;
        flex:0 0 220px;
    }
}

@media (max-width:600px){
    .home-glance{
        padding:90px 6% 70px;
    }
    .home-glance h1{
        font-size:28px;
    }
    .glance-cta{
        width:100%;
        justify-content:center;
    }
}