/* Harshitha S. — Portfolio Styles */

:root{
    --bg: #FDFCFF;
    --bg-soft: #F4F1FE;
    --panel: rgba(255,255,255,0.65);
    --panel-solid: #FFFFFF;
    --border: #E7E1FA;
    --accent: #6C63FF;
    --accent-2: #8B7CFF;
    --indigo: #4B3FD6;
    --soft-blue: #EAF1FF;
    --light-purple: #EDE7FF;
    --text: #241F3D;
    --muted: #6B6485;
    --pink: #FF8FD8;
    --yellow: #FFD166;
    --green: #4ADE80;
    --shadow: 0 20px 50px -20px rgba(108,99,255,0.25);
  }
  [data-theme="dark"]{
    --bg:#161327;
    --bg-soft:#1D1938;
    --panel: rgba(38,32,72,0.55);
    --panel-solid:#211B3F;
    --border: rgba(255,255,255,0.09);
    --text:#EEEBFF;
    --muted:#A79FD6;
    --soft-blue:#232048;
    --light-purple:#26204a;
    --shadow: 0 20px 50px -20px rgba(0,0,0,0.5);
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--bg);
    color:var(--text);
    font-family:'Inter', sans-serif;
    transition:background .4s ease, color .4s ease;
    overflow-x:hidden;
  }
  h1,h2,h3,h4{font-family:'Outfit', sans-serif;}
  a{color:inherit; text-decoration:none;}
  ::selection{background:var(--accent); color:#fff;}
  :focus-visible{outline:2px solid var(--accent); outline-offset:3px;}
  .wrap{max-width:1180px; margin:0 auto; padding:0 28px;}
  .bg-blob{position:fixed; border-radius:50%; filter:blur(90px); opacity:0.5; z-index:0; pointer-events:none;}
  .skip-link{position:fixed; top:-60px; left:16px; z-index:2000; background:var(--accent); color:#fff; padding:12px 18px; border-radius:10px; font-weight:600; font-size:13.5px; transition:top .2s;}
  .skip-link:focus{top:16px;}
  .blob1{width:420px; height:420px; background:var(--light-purple); top:-120px; left:-120px;}
  .blob2{width:380px; height:380px; background:var(--soft-blue); bottom:0; right:-140px;}
  section{position:relative; z-index:1; padding:110px 0;}
  .eyebrow{display:inline-block; font-size:13px; font-weight:600; letter-spacing:0.06em; color:var(--accent); background:var(--light-purple); padding:6px 14px; border-radius:20px; margin-bottom:18px;}
  .section-head{margin-bottom:44px;}
  .section-head h2{font-size:clamp(26px,3.4vw,38px); font-weight:700;}
  .section-head p{color:var(--muted); margin-top:8px; font-size:15px; max-width:520px;}

  /* glass */
  .glass{background:var(--panel); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); border:1px solid var(--border); border-radius:24px; box-shadow:var(--shadow);}

  /* nav */
  .navbar{position:fixed; top:18px; left:50%; transform:translateX(-50%); z-index:100; width:min(920px, 92%);
    display:flex; align-items:center; justify-content:space-between; padding:12px 20px; border-radius:100px;
    background:var(--panel); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border:1px solid var(--border); box-shadow:var(--shadow);}
  .logo{font-weight:700; font-size:15px; display:flex; align-items:center; gap:8px;}
  .navlinks{display:flex; gap:22px; font-size:13.5px; font-weight:500; color:var(--muted);}
  .navlinks a{position:relative; padding:4px 2px; transition:color .2s;}
  .navlinks a.active, .navlinks a:hover{color:var(--accent);}
  .navlinks a.active::after{content:''; position:absolute; left:0; right:0; bottom:-4px; height:2px; background:var(--accent); border-radius:2px;}
  .nav-actions{display:flex; align-items:center; gap:8px;}
  .icon-btn{width:34px; height:34px; border-radius:50%; border:1px solid var(--border); background:var(--panel-solid); display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:15px; transition:transform .2s;}
  .icon-btn:hover{transform:scale(1.08);}
  @media(max-width:820px){ .navlinks{display:none;} }

  .btn{display:inline-flex; align-items:center; gap:8px; padding:13px 24px; border-radius:14px; font-size:14px; font-weight:600; cursor:pointer; border:none; transition:transform .2s, box-shadow .2s;}
  .btn-primary{background:var(--accent); color:#fff; box-shadow:0 12px 24px -8px rgba(108,99,255,0.55);}
  .btn-primary:hover{transform:translateY(-2px);}
  .btn-ghost{background:var(--panel-solid); color:var(--text); border:1px solid var(--border);}
  .btn-ghost:hover{transform:translateY(-2px); border-color:var(--accent);}

  /* HERO */
  .hero{padding-top:170px; min-height:90vh; display:flex; align-items:center;}
  .hero-grid{display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:center;}
  @media(max-width:900px){ .hero-grid{grid-template-columns:1fr;} }
  .hero h1{font-size:clamp(38px,5.5vw,60px); font-weight:800; line-height:1.05; margin-bottom:16px;}
  .hero h1 span{color:var(--accent);}
  .role-line{font-size:19px; font-weight:600; color:var(--muted); margin-bottom:20px; min-height:28px;}
  .role-line .cursor{display:inline-block; width:2px; height:20px; background:var(--accent); vertical-align:middle; margin-left:2px; animation:blink 1s infinite step-end;}
  @keyframes blink{0%,100%{opacity:1;} 50%{opacity:0;}}
  .hero p.sub{color:var(--muted); font-size:15.5px; max-width:440px; margin-bottom:30px;}
  .hero-actions{display:flex; gap:14px; flex-wrap:wrap;}

  .hero-stage{position:relative; height:420px; display:flex; align-items:center; justify-content:center;}
  .laptop{width:220px; height:150px; background:linear-gradient(160deg,var(--panel-solid),var(--soft-blue)); border:1px solid var(--border); border-radius:16px; position:relative; box-shadow:var(--shadow); display:flex; align-items:center; justify-content:center;}
  .laptop::after{content:''; position:absolute; bottom:-14px; left:50%; transform:translateX(-50%); width:260px; height:14px; background:var(--panel-solid); border:1px solid var(--border); border-radius:0 0 10px 10px;}
  .laptop-screen{width:190px; height:120px; background:var(--indigo); border-radius:10px; font-family:'Inter',monospace; font-size:10.5px; color:#d9d4ff; padding:12px; overflow:hidden;}
  .float-mascot{position:absolute; width:74px; filter:drop-shadow(0 10px 16px rgba(108,99,255,0.25));}
  .float-mascot.m1{top:2%; left:6%; animation:float 5s ease-in-out infinite;}
  .float-mascot.m2{top:8%; right:2%; animation:float 6s ease-in-out infinite 0.4s;}
  .float-mascot.m3{bottom:6%; left:0%; animation:float 5.5s ease-in-out infinite 0.8s;}
  .float-mascot.m4{bottom:2%; right:10%; animation:float 6.2s ease-in-out infinite 1.2s;}
  .float-mascot.m5{top:38%; right:-4%; width:56px; animation:float 5.2s ease-in-out infinite 0.6s;}
  @keyframes float{0%,100%{transform:translateY(0px);} 50%{transform:translateY(-14px);}}
  body.mascot-mode .float-mascot, body.mascot-mode .m-icon{animation-duration:1.1s !important;}
  .prop{position:absolute; font-size:20px;}

  /* MY STORY */
  .story-grid{display:grid; grid-template-columns:120px 1fr; gap:34px; align-items:flex-start;}
  @media(max-width:700px){ .story-grid{grid-template-columns:1fr;} }
  .diary{padding:38px; transform:rotate(-0.6deg); position:relative;}
  .diary::before{content:'📌'; position:absolute; top:-14px; left:24px; font-size:22px; transform:rotate(-12deg);}
  .diary p{color:var(--muted); font-size:15.5px; margin-bottom:14px; line-height:1.7;}
  .diary p b{color:var(--text);}
  .story-tags{display:flex; gap:10px; flex-wrap:wrap; margin-top:18px;}
  .story-tags span{font-size:12.5px; padding:6px 12px; border-radius:20px; background:var(--light-purple); color:var(--indigo); font-weight:500;}
  .story-mascot{width:110px; margin:0 auto; display:block; animation:float 5s ease-in-out infinite;}

  /* SKILL LAB */
  .lab-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
  @media(max-width:900px){ .lab-grid{grid-template-columns:repeat(2,1fr);} }
  @media(max-width:600px){ .lab-grid{grid-template-columns:1fr;} }
  .lab-card{padding:26px; transition:transform .3s;}
  .lab-card:hover{transform:translateY(-6px);}
  .lab-head{display:flex; align-items:center; gap:12px; margin-bottom:16px;}
  .lab-head img, .lab-head svg{width:46px;}
  .lab-head h4{font-size:16.5px;}
  .lab-head span{font-size:12px; color:var(--muted);}
  .skill-tags{display:flex; gap:8px; flex-wrap:wrap;}
  .skill-tags span{font-size:12.5px; padding:6px 11px; border-radius:10px; background:var(--soft-blue); color:var(--indigo); font-weight:500;}

  /* INNOVATION LAB */
  .proj-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:22px;}
  @media(max-width:860px){ .proj-grid{grid-template-columns:1fr;} }
  .proj-card{overflow:hidden; transition:transform .3s;}
  .proj-card:hover{transform:translateY(-6px);}
  .proj-top{background:linear-gradient(135deg,var(--light-purple),var(--soft-blue)); padding:26px; position:relative; min-height:110px; display:flex; align-items:center;}
  .proj-top .status{position:absolute; top:16px; right:16px; font-size:10.5px; font-weight:700; padding:4px 10px; border-radius:20px; background:var(--panel-solid); color:var(--accent);}
  .proj-top .m-icon{width:56px;}
  .proj-top .prop{right:20px; bottom:16px;}
  .proj-body{padding:22px 24px 26px;}
  .proj-body h3{font-size:19px; margin-bottom:8px;}
  .proj-body p{font-size:14px; color:var(--muted); margin-bottom:14px;}
  .stack-row{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px;}
  .stack-row span{font-size:11.5px; color:var(--indigo); background:var(--soft-blue); padding:4px 9px; border-radius:8px; font-weight:500;}
  .proj-links{display:flex; gap:18px; font-size:13px; font-weight:600; color:var(--accent);}
  .proj-slot{border:1.5px dashed var(--border); border-radius:24px; display:flex; align-items:center; justify-content:center; min-height:200px; color:var(--muted); font-size:14px; text-align:center; padding:20px;}

  /* ADVENTURE TIMELINE */
  .road{position:relative; padding:40px 0 10px;}
  .road-line{position:absolute; top:52px; left:0; right:0; height:3px; background:repeating-linear-gradient(90deg,var(--border) 0 10px, transparent 10px 18px); z-index:0;}
  .road-track{display:flex; overflow-x:auto; gap:26px; padding:0 4px 20px; position:relative; z-index:1; scrollbar-width:thin;}
  .stop{min-width:190px; text-align:center; flex-shrink:0;}
  .stop-icon{width:56px; height:56px; border-radius:50%; background:var(--panel-solid); border:2px solid var(--accent); display:flex; align-items:center; justify-content:center; margin:0 auto 12px; font-size:24px; box-shadow:var(--shadow);}
  .stop h4{font-size:14.5px; margin-bottom:4px;}
  .stop span{font-size:12px; color:var(--muted);}
  .stop p{font-size:12.5px; color:var(--muted); margin-top:6px;}

  /* ACHIEVEMENT VAULT */
  .vault-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
  @media(max-width:860px){ .vault-grid{grid-template-columns:repeat(2,1fr);} }
  @media(max-width:560px){ .vault-grid{grid-template-columns:1fr;} }
  .chest{padding:26px; text-align:center; cursor:pointer; transition:transform .3s; position:relative; overflow:hidden;}
  .chest:hover{transform:translateY(-6px);}
  .chest .lid{font-size:40px; margin-bottom:10px; transition:transform .3s;}
  .chest.open .lid{transform:rotate(-14deg) translateY(-4px);}
  .chest h4{font-size:14.5px; margin-bottom:6px;}
  .chest-detail{max-height:0; overflow:hidden; transition:max-height .35s ease; font-size:12.5px; color:var(--muted);}
  .chest.open .chest-detail{max-height:100px; margin-top:8px;}
  .chest span.hint{font-size:11px; color:var(--accent); font-weight:600;}

  /* CONTACT */
  .contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:stretch;}
  @media(max-width:860px){ .contact-grid{grid-template-columns:1fr;} }
  .contact-left{padding:34px; display:flex; flex-direction:column; justify-content:center;}
  .wave-row{display:flex; gap:14px; margin-top:20px;}
  .wave-row img, .wave-row svg{width:44px;}
  .info-line{display:flex; align-items:center; gap:10px; font-size:14px; color:var(--muted); margin-bottom:10px;}
  .field{width:100%; background:var(--panel-solid); border:1px solid var(--border); border-radius:12px; padding:13px 15px; color:var(--text); font-family:inherit; font-size:14px; margin-bottom:12px;}
  .field:focus{border-color:var(--accent); outline:none;}
  textarea.field{min-height:100px; resize:vertical;}
  .contact-right{padding:30px;}

  footer{padding:36px 0; text-align:center; font-size:12.5px; color:var(--muted); border-top:1px solid var(--border); display:flex; flex-direction:column; align-items:center; gap:10px;}
  .campfire{font-size:26px; letter-spacing:6px;}

  .reveal{opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s ease;}
  .reveal.in{opacity:1; transform:translateY(0);}

  #confetti-layer{position:fixed; inset:0; pointer-events:none; z-index:200; overflow:hidden;}
  .confetti-bit{position:absolute; width:8px; height:8px; border-radius:2px; opacity:0.9;}

  /* ---------- premium interaction layer ---------- */
  @media(hover:hover){ 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%);}
  .cursor-dot{width:7px; height:7px; background:var(--accent);}
  .cursor-ring{width:34px; height:34px; border:1.5px solid var(--accent); opacity:0.55; transition:width .25s,height .25s,opacity .25s,background .25s;}
  .cursor-ring.grow{width:64px; height:64px; background:rgba(108,99,255,0.1); opacity:0.9;}
  @media(hover:none){ .cursor-dot,.cursor-ring{display:none;} body{cursor:auto;} }

  .spotlight{position:fixed; inset:0; z-index:0; pointer-events:none; background:radial-gradient(600px circle at var(--mx,50%) var(--my,20%), rgba(108,99,255,0.14), transparent 70%);}
  .noise{position:fixed; inset:0; z-index:0; pointer-events:none; opacity:0.035; mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}

  .status-row{display:flex; gap:10px; flex-wrap:wrap; margin:22px 0;}
  .status-chip{display:flex; align-items:center; gap:7px; font-size:12.5px; font-weight:500; padding:7px 13px; border-radius:20px; background:var(--panel-solid); border:1px solid var(--border);}
  .status-dot{width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 8px var(--green); animation:blink 2s infinite;}
  .portrait{width:64px; height:64px; border-radius:50%; background:linear-gradient(135deg,var(--accent),var(--pink)); display:flex; align-items:center; justify-content:center; font-family:'Outfit',sans-serif; font-weight:700; color:#fff; font-size:22px; box-shadow:var(--shadow); flex-shrink:0;}
  .hero-topline{display:flex; align-items:center; gap:14px; margin-bottom:18px;}
  .scroll-indicator{position:absolute; bottom:18px; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:6px; font-size:11px; color:var(--muted); animation:float 2.4s ease-in-out infinite;}
  .split-word{display:inline-block; overflow:hidden;}
  .split-word span{display:inline-block; will-change:transform;}

  .magnetic{transition:transform .18s ease-out;}

  /* recruiter mode */
  body.recruiter .flourish{display:none !important;}
  body.recruiter .hero-stage{opacity:0.35; filter:grayscale(0.3) blur(0.5px);}
  body.recruiter section{padding:64px 0;}
  .recruiter-banner{display:none; position:fixed; top:78px; left:50%; transform:translateX(-50%); z-index:99; background:var(--accent); color:#fff; font-size:12.5px; font-weight:600; padding:8px 18px; border-radius:20px; box-shadow:var(--shadow);}
  body.recruiter .recruiter-banner{display:block;}
  body.recruiter #story .diary::before, body.recruiter .campfire{display:none;}

  /* secret mode */
  #secretOverlay{position:fixed; inset:0; z-index:500; display:none; align-items:center; justify-content:center; background:rgba(20,15,45,0.75); backdrop-filter:blur(10px);}
  #secretOverlay.show{display:flex;}
  .secret-card{background:var(--panel-solid); border-radius:28px; padding:44px; text-align:center; max-width:380px; box-shadow:var(--shadow);}
  .secret-card .big{font-size:52px; margin-bottom:12px;}

  /* ---------- loading screen ---------- */
  #loader{position:fixed; inset:0; z-index:1000; background:var(--bg-soft); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; transition:opacity .5s ease;}
  .loader-track{width:220px; height:6px; background:var(--border); border-radius:6px; position:relative; overflow:visible;}
  .loader-fill{height:100%; width:0%; background:var(--accent); border-radius:6px; transition:width .1s linear;}
  .loader-avatar{position:absolute; top:-22px; left:0%; font-size:20px; transform:translateX(-50%); transition:left .1s linear;}
  #loader p{font-family:'Outfit',sans-serif; font-weight:600; color:var(--muted); font-size:13.5px; letter-spacing:0.03em;}
  .loader-door{position:fixed; inset:0; z-index:1001; display:flex; pointer-events:none;}
  .loader-door .panel{flex:1; background:var(--bg-soft); transition:transform .8s cubic-bezier(.7,0,.3,1);}
  .loader-door .panel.left{transform-origin:left;}
  .loader-door .panel.right{transform-origin:right;}
  #loader.opening .panel.left{transform:translateX(-100%);}
  #loader.opening .panel.right{transform:translateX(100%);}
  body.loaded-locked{overflow:hidden; height:100vh;}

  /* ---------- pixel nook ---------- */
  .pixel-nook{position:absolute; right:-6px; bottom:-18px; width:150px; border-radius:16px; overflow:hidden; border:3px solid var(--panel-solid); box-shadow:var(--shadow); z-index:5;}
  .nook-sky{position:relative; height:96px; background:linear-gradient(180deg,#BFE3FF,#EAF6FF); overflow:hidden; transition:background 1s;}
  [data-theme="dark"] .nook-sky{background:linear-gradient(180deg,#161034,#241d4d);}
  .nook-star{position:absolute; width:2px; height:2px; background:#fff; border-radius:50%; opacity:0; animation:twinkle 3s infinite;}
  [data-theme="dark"] .nook-star{opacity:1;}
  @keyframes twinkle{0%,100%{opacity:0.2;} 50%{opacity:1;}}
  .nook-cloud{position:absolute; font-size:12px; opacity:0.8; animation:drift 14s linear infinite;}
  [data-theme="dark"] .nook-cloud{display:none;}
  @keyframes drift{from{transform:translateX(-30px);} to{transform:translateX(160px);}}
  .nook-room{position:relative; height:64px; background:var(--panel-solid);}
  .nook-item{position:absolute; font-size:18px; cursor:pointer; user-select:none; transition:transform .15s;}
  .nook-item:hover{transform:scale(1.2);}
  .nook-desk{position:absolute; bottom:0; left:0; right:0; height:8px; background:var(--border);}
  .nook-steam{position:absolute; font-size:9px; opacity:0; animation:steam 2.4s ease-in infinite;}
  @keyframes steam{0%{opacity:0; transform:translateY(0);} 30%{opacity:0.8;} 100%{opacity:0; transform:translateY(-14px);}}
  .nook-plant{animation:sway 3.2s ease-in-out infinite;}
  @keyframes sway{0%,100%{transform:rotate(-4deg);} 50%{transform:rotate(4deg);}}
  .nook-dog{transition:transform .2s;}
  .nook-toast{position:absolute; bottom:100%; left:50%; transform:translateX(-50%); background:var(--panel-solid); border:1px solid var(--border); border-radius:10px; padding:6px 10px; font-size:10.5px; white-space:nowrap; box-shadow:var(--shadow); opacity:0; pointer-events:none; transition:opacity .2s;}
  .nook-toast.show{opacity:1;}

  /* ---------- skill hover companions ---------- */
  .skill-tags span{position:relative;}
  .skill-tags span[data-emoji]::before{content:attr(data-emoji); position:absolute; top:-26px; left:50%; transform:translateX(-50%) scale(0); font-size:16px; transition:transform .2s; pointer-events:none;}
  .skill-tags span[data-emoji]:hover::before{transform:translateX(-50%) scale(1);}

  /* ---------- terminal modal ---------- */
  #terminalModal{position:fixed; inset:0; z-index:500; display:none; align-items:center; justify-content:center; background:rgba(20,15,45,0.75); backdrop-filter:blur(10px);}
  #terminalModal.show{display:flex;}
  .terminal-window{width:min(440px,90vw); background:#1c1834; border-radius:16px; overflow:hidden; box-shadow:var(--shadow); font-family:monospace;}
  .terminal-bar{display:flex; gap:6px; padding:10px 14px; background:#141026;}
  .terminal-bar span{width:10px; height:10px; border-radius:50%; background:#3a3560;}
  .terminal-body{padding:16px 18px; color:#c9c2ff; font-size:13px; min-height:120px; line-height:1.8;}
  .terminal-body .prompt{color:#4ADE80;}

  /* ---------- retro scanlines ---------- */
  #scanlines{position:fixed; inset:0; z-index:900; pointer-events:none; opacity:0; transition:opacity .6s;
    background:repeating-linear-gradient(0deg, rgba(0,0,0,0.08) 0 1px, transparent 1px 3px);}
  #scanlines.show{opacity:1;}

  .sparkle-bit{position:fixed; pointer-events:none; z-index:9998; font-size:12px; opacity:0.9;}

  @media(prefers-reduced-motion:reduce){
    *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important;}
  }
  @media(max-width:900px){ .pixel-nook{display:none;} }