/*
Theme Name: Swathi Portfolio
Author: Swathi Damodharan A K
Description: Single-page portfolio theme — Developer, Strategist, Creator.
Version: 1.1.0
Text Domain: swathi-portfolio
*/
:root{
  --bg:#090a0c;--surface:#111318;--surface2:#171a20;--text:#f4f3ef;
  --muted:#9da2aa;--line:#292d35;--accent:#c7ff45;--accent-soft:#eaffb8;
  --max:1180px;--radius:24px
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.6;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit}
.container{width:min(calc(100% - 40px),var(--max));margin:auto}
.nav{position:fixed;z-index:100;top:0;left:0;right:0;background:rgba(9,10,12,.78);border-bottom:1px solid rgba(255,255,255,.06);backdrop-filter:blur(18px)}
.nav-inner{height:76px;display:flex;align-items:center;justify-content:space-between}
.logo{font-size:1.08rem;font-weight:900;letter-spacing:-.04em}.logo span{color:var(--accent)}
.nav-links{display:flex;gap:27px;align-items:center;color:#c7cad0;font-size:.87rem}
.nav-links a{transition:.2s}.nav-links a:hover{color:var(--accent)}
.nav-cta{border:1px solid var(--line);padding:9px 16px;border-radius:999px}.nav-cta:hover{border-color:var(--accent)}
.menu{display:none;background:none;border:0;color:white;font-size:1.55rem;cursor:pointer}

.hero{min-height:100vh;display:flex;align-items:center;position:relative;padding:135px 0 90px;overflow:hidden}
.hero:before{content:"";position:absolute;width:600px;height:600px;border-radius:50%;right:-210px;top:90px;background:rgba(199,255,69,.08);filter:blur(100px)}
.hero:after{content:"";position:absolute;width:280px;height:280px;border:1px solid rgba(199,255,69,.12);border-radius:50%;right:8%;top:26%;box-shadow:0 0 0 55px rgba(199,255,69,.025),0 0 0 110px rgba(199,255,69,.012)}
.eyebrow{display:flex;align-items:center;gap:10px;color:var(--accent);font-size:.72rem;letter-spacing:.17em;text-transform:uppercase;font-weight:850;margin-bottom:24px}
.eyebrow:before{content:"";width:35px;height:1px;background:var(--accent)}
h1{font-size:clamp(3.4rem,8vw,8rem);line-height:.88;letter-spacing:-.085em;max-width:1000px}
h1 em{font-style:normal;color:var(--accent)}
.hero-copy{max-width:700px;color:var(--muted);font-size:1.08rem;margin-top:32px}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.btn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:999px;padding:13px 20px;font-weight:800;transition:.25s}
.btn.primary{background:var(--accent);color:#090a0c;border-color:var(--accent)}
.btn:hover{transform:translateY(-3px)}
.btn.secondary:hover{color:var(--accent);border-color:var(--accent)}
.hero-stats{display:flex;gap:42px;margin-top:58px;flex-wrap:wrap}
.stat strong{display:block;font-size:1.45rem;letter-spacing:-.04em}.stat span{font-size:.77rem;color:var(--muted)}

section{padding:110px 0}
.section-head{display:grid;grid-template-columns:.65fr 1.35fr;gap:35px;margin-bottom:48px}
.section-label{color:var(--accent);font-size:.7rem;letter-spacing:.17em;text-transform:uppercase;font-weight:850}
.section-title{font-size:clamp(2.25rem,4.7vw,4.7rem);line-height:.94;letter-spacing:-.065em}
.section-intro{color:var(--muted);max-width:680px;margin-top:18px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:30px}

.about-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:17px}
.about-copy{font-size:1.34rem;line-height:1.48;letter-spacing:-.025em}
.about-copy strong{color:var(--accent-soft)}
.quote{display:flex;flex-direction:column;justify-content:space-between;min-height:290px;background:linear-gradient(145deg,#191d23,#0f1115)}
.quote-text{font-size:2rem;line-height:1.08;letter-spacing:-.045em}.quote small{color:var(--muted)}

.services{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.service{min-height:320px;transition:.3s}.service:hover{transform:translateY(-7px);border-color:#404650}
.number{color:var(--accent);font-weight:900;font-size:.72rem}
.service h3{font-size:1.55rem;letter-spacing:-.04em;margin:55px 0 12px}.service p{color:var(--muted)}
.tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:22px}.tag{font-size:.7rem;color:#cbd0d5;border:1px solid var(--line);border-radius:999px;padding:5px 9px}

.projects{display:grid;grid-template-columns:repeat(2,1fr);gap:17px}
.project{padding:0;overflow:hidden;transition:.3s}.project:hover{transform:translateY(-5px);border-color:#3b424b}
.project-art{height:190px;border-bottom:1px solid var(--line);position:relative;display:flex;align-items:flex-end;padding:25px;background:linear-gradient(135deg,#1b2027,#0d1014);overflow:hidden}
.project-art:before{content:"";position:absolute;width:190px;height:190px;border:1px solid rgba(199,255,69,.23);border-radius:50%;right:30px;top:-45px}
.project-art:after{content:"";position:absolute;width:90px;height:90px;border:1px solid rgba(255,255,255,.08);right:78px;top:5px;transform:rotate(35deg)}
.project:nth-child(2) .project-art:before{border-radius:16px;transform:rotate(25deg)}
.project:nth-child(3) .project-art:before{box-shadow:0 0 0 25px rgba(199,255,69,.025);top:5px}
.project:nth-child(4) .project-art:before{border-radius:5px;transform:rotate(45deg)}
.project-code{font-size:3.7rem;font-weight:950;letter-spacing:-.09em;color:var(--accent);position:relative;z-index:2}
.project-body{padding:27px 29px}.project-body h3{font-size:1.42rem;letter-spacing:-.04em}.project-body p{color:var(--muted);margin-top:7px}

.skills{display:grid;grid-template-columns:1fr 1fr;gap:16px}.skill-group h3{font-size:.98rem;margin-bottom:17px}.skill-list{display:flex;flex-wrap:wrap;gap:8px}.skill{background:#15181d;border:1px solid var(--line);border-radius:11px;padding:9px 12px;font-size:.84rem;color:#d6dade}

.timeline{border-left:1px solid var(--line);margin-left:9px}.job{padding:0 0 45px 35px;position:relative}.job:last-child{padding-bottom:0}.job:before{content:"";position:absolute;left:-5px;top:5px;width:9px;height:9px;border-radius:50%;background:var(--accent)}
.job-year{font-size:.7rem;color:var(--accent);font-weight:900;letter-spacing:.1em}.job h3{font-size:1.35rem;margin-top:5px;letter-spacing:-.03em}.company{color:#c7ccd1}.job p{color:var(--muted);max-width:800px;margin-top:7px}

.beyond{display:grid;grid-template-columns:1fr 1fr;gap:17px}.creative-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.creative{min-height:145px;padding:22px;background:#15181d;border:1px solid var(--line);border-radius:18px;transition:.25s}.creative:hover{border-color:#4a535d;transform:translateY(-3px)}.creative h3{font-size:1.15rem}.creative p{font-size:.86rem;color:var(--muted);margin-top:5px}
.creative-icon{font-size:1.35rem;margin-bottom:18px;color:var(--accent)}

.recognition{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.recognition .card strong{display:block;font-size:1.35rem;letter-spacing:-.04em}.recognition .card span{display:block;color:var(--muted);margin-top:7px}

.contact{padding-top:80px;padding-bottom:100px}.contact-box{border:1px solid var(--line);border-radius:32px;padding:55px;background:radial-gradient(circle at 80% 15%,rgba(199,255,69,.1),transparent 35%),var(--surface)}
.contact-box h2{font-size:clamp(2.8rem,6.2vw,6.4rem);line-height:.9;letter-spacing:-.075em;max-width:850px}.contact-box h2 em{font-style:normal;color:var(--accent)}
.contact-info{display:flex;gap:22px;flex-wrap:wrap;color:#c8cdd2;margin-top:30px;font-size:.88rem}.contact-info a:hover{color:var(--accent)}
footer{border-top:1px solid var(--line);padding:24px 0;color:#747c84;font-size:.76rem;display:flex;justify-content:space-between;gap:20px}


/* Motion system */
.reveal{opacity:0;transform:translate3d(0,34px,0) scale(.985);filter:blur(4px);transition:opacity .85s cubic-bezier(.16,1,.3,1),transform .85s cubic-bezier(.16,1,.3,1),filter .85s ease;transition-delay:var(--delay,0ms)}
.reveal.show{opacity:1;transform:none;filter:none}
.reveal-left{transform:translate3d(-42px,0,0);}
.reveal-right{transform:translate3d(42px,0,0);}
.reveal-scale{transform:scale(.9);}
.reveal.show.reveal-left,.reveal.show.reveal-right,.reveal.show.reveal-scale{transform:none}
.hero .eyebrow{animation:heroIn .9s .08s both cubic-bezier(.16,1,.3,1)}
.hero h1{animation:heroIn 1s .18s both cubic-bezier(.16,1,.3,1)}
.hero-copy{animation:heroIn .9s .34s both cubic-bezier(.16,1,.3,1)}
.hero .actions{animation:heroIn .9s .46s both cubic-bezier(.16,1,.3,1)}
.hero-stats{animation:heroIn .9s .58s both cubic-bezier(.16,1,.3,1)}
@keyframes heroIn{from{opacity:0;transform:translateY(28px);filter:blur(7px)}to{opacity:1;transform:none;filter:none}}
@keyframes float{0%,100%{transform:translate3d(0,0,0) rotate(0deg)}50%{transform:translate3d(0,-16px,0) rotate(4deg)}}
@keyframes pulseRing{0%,100%{opacity:.45;transform:scale(1)}50%{opacity:.9;transform:scale(1.06)}}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.hero:after{animation:pulseRing 7s ease-in-out infinite}
.hero:before{animation:float 9s ease-in-out infinite}
.hero h1 em{background:linear-gradient(100deg,var(--accent) 20%,#fff 45%,var(--accent) 70%);background-size:220% auto;background-clip:text;-webkit-background-clip:text;color:transparent;animation:shimmer 5s linear infinite}
.btn{position:relative;overflow:hidden;will-change:transform}.btn:after{content:"";position:absolute;inset:0;transform:translateX(-120%) skewX(-18deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.24),transparent);transition:transform .65s ease}.btn:hover:after{transform:translateX(120%) skewX(-18deg)}
.service,.project,.creative,.recognition .card,.skill-group{will-change:transform}.service:hover,.project:hover{box-shadow:0 22px 55px rgba(0,0,0,.22)}
.project-art:before{animation:float 8s ease-in-out infinite}.project-art:after{animation:spinSlow 13s linear infinite}
@keyframes spinSlow{to{transform:rotate(395deg)}}
.tag,.skill{transition:transform .25s ease,border-color .25s ease,background .25s ease}.tag:hover,.skill:hover{transform:translateY(-2px);border-color:rgba(199,255,69,.45);background:#1a1f20}
.job:before{box-shadow:0 0 0 0 rgba(199,255,69,.35);animation:dotPulse 2.8s infinite}.job:hover:before{transform:scale(1.35)}
@keyframes dotPulse{0%,100%{box-shadow:0 0 0 0 rgba(199,255,69,.35)}50%{box-shadow:0 0 0 8px rgba(199,255,69,0)}}
.contact-box{position:relative;overflow:hidden}.contact-box:after{content:"";position:absolute;width:260px;height:260px;border:1px solid rgba(199,255,69,.12);border-radius:50%;right:-100px;bottom:-130px;animation:pulseRing 6s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.hero .eyebrow,.hero h1,.hero-copy,.hero .actions,.hero-stats,.hero:after,.hero:before,.hero h1 em,.project-art:before,.project-art:after,.job:before{animation:none}.reveal,.reveal-left,.reveal-right,.reveal-scale{opacity:1;transform:none;filter:none;transition:none}}
@media(max-width:820px){
  .nav-links{display:none;position:absolute;top:76px;left:0;right:0;padding:20px;background:rgba(9,10,12,.98);border-bottom:1px solid var(--line);flex-direction:column;align-items:flex-start}
  .nav-links.open{display:flex}.menu{display:block}
  .section-head,.about-grid,.skills,.beyond{grid-template-columns:1fr}
  .services,.recognition{grid-template-columns:1fr}.projects{grid-template-columns:1fr}
  section{padding:82px 0}.hero{padding-top:125px}.hero-stats{margin-top:42px}
  .contact-box{padding:36px 25px}
}
@media(max-width:520px){
  .container{width:min(calc(100% - 28px),var(--max))}
  h1{font-size:3.55rem}.creative-grid{grid-template-columns:1fr}.hero-copy{font-size:1rem}.card{padding:24px}
  .project-body{padding:23px}.project-art{height:160px}.project-code{font-size:3rem}
  footer{flex-direction:column}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal{opacity:1;transform:none;transition:none}.btn,.service,.project{transition:none}}