/*
Theme Name: Sohaib Haider Portfolio
Theme URI: https://sohaibhaider.com
Author: Sohaib Haider
Author URI: https://sohaibhaider.com
Description: A premium, futuristic dark-themed one-page portfolio for Sohaib Haider — Educationist, AI Trainer, Law Student and Tax Consultant. Features glassmorphism cards, an animated particle hero, glowing gradient borders, a live typing effect, animated timeline, circular skill rings, and a working contact form.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: sohaib-haider-portfolio
Tags: one-page, portfolio, dark, custom-menu, translation-ready
*/

  :root{
    --void:#050505;
    --grey:#0c0e13;
    --grey-2:#12151c;
    --line:rgba(255,255,255,0.08);
    --ion:#3ba7ff;      /* electric blue - "ion" */
    --helix:#00f0d8;    /* neon cyan/teal - "helix" */
    --nebula:#8b5cf6;   /* purple gradient */
    --nebula-2:#c084fc;
    --ink:#f2f4f8;
    --ink-dim:#a5abba;
    --ink-faint:#666d7f;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--void);
    color:var(--ink);
    font-family:'Inter',sans-serif;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
  }
  ::selection{background:var(--helix);color:#000;}
  h1,h2,h3,h4,.display{font-family:'Space Grotesk',sans-serif;}
  .accent-font{font-family:'Poppins',sans-serif;}

  ::-webkit-scrollbar{width:8px;}
  ::-webkit-scrollbar-track{background:var(--void);}
  ::-webkit-scrollbar-thumb{background:linear-gradient(var(--ion),var(--nebula));border-radius:4px;}

  @media (prefers-reduced-motion: reduce){
    *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important;}
  }

  /* ---------- Loading screen ---------- */
  #loader{
    position:fixed;inset:0;background:var(--void);z-index:9999;
    display:flex;align-items:center;justify-content:center;flex-direction:column;gap:18px;
    transition:opacity .7s ease, visibility .7s ease;
  }
  #loader.hidden{opacity:0;visibility:hidden;}
  .loader-mark{
    width:64px;height:64px;border-radius:50%;
    border:2px solid transparent;
    border-top-color:var(--ion);border-right-color:var(--helix);
    animation:spin 1s linear infinite;
    position:relative;
  }
  .loader-mark::after{
    content:"";position:absolute;inset:10px;border-radius:50%;
    border:2px solid transparent;border-bottom-color:var(--nebula);
    animation:spin 1.6s linear infinite reverse;
  }
  @keyframes spin{to{transform:rotate(360deg);}}
  .loader-text{font-family:'Space Grotesk';letter-spacing:.3em;font-size:11px;color:var(--ink-dim);text-transform:uppercase;}

  /* ---------- Scroll progress ---------- */
  #scroll-progress{
    position:fixed;top:0;left:0;height:2px;width:0%;
    background:linear-gradient(90deg,var(--ion),var(--helix),var(--nebula));
    z-index:9998;box-shadow:0 0 12px var(--helix);
  }

  /* ---------- Cursor glow ---------- */
  #cursor-glow{
    position:fixed;width:420px;height:420px;border-radius:50%;
    pointer-events:none;z-index:1;
    background:radial-gradient(circle, rgba(59,167,255,0.10), rgba(139,92,246,0.05) 40%, transparent 70%);
    transform:translate(-50%,-50%);
    transition:opacity .3s ease;
    will-change:transform;
  }
  @media (max-width:768px){ #cursor-glow{display:none;} }

  /* ---------- Aurora bg ---------- */
  .aurora{position:absolute;inset:0;overflow:hidden;z-index:0;pointer-events:none;}
  .aurora span{
    position:absolute;border-radius:50%;filter:blur(90px);opacity:.35;
    animation:float 16s ease-in-out infinite;
  }
  .aurora span:nth-child(1){width:420px;height:420px;background:var(--ion);top:-10%;left:5%;animation-delay:0s;}
  .aurora span:nth-child(2){width:380px;height:380px;background:var(--nebula);top:20%;right:0%;animation-delay:3s;}
  .aurora span:nth-child(3){width:320px;height:320px;background:var(--helix);bottom:-10%;left:30%;animation-delay:6s;}
  @keyframes float{
    0%,100%{transform:translate(0,0) scale(1);}
    50%{transform:translate(40px,-40px) scale(1.15);}
  }

  .grid-overlay{
    position:absolute;inset:0;z-index:0;pointer-events:none;
    background-image:linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
    background-size:56px 56px;
    mask-image:radial-gradient(ellipse 70% 60% at 50% 30%, black 40%, transparent 90%);
    opacity:.5;
  }

  /* ---------- Nav ---------- */
  nav{
    position:fixed;top:0;left:0;right:0;z-index:100;
    backdrop-filter:blur(16px) saturate(140%);
    background:rgba(5,5,5,0.55);
    border-bottom:1px solid var(--line);
    transition:padding .3s ease, background .3s ease;
  }
  .nav-link{position:relative;color:var(--ink-dim);font-size:14px;letter-spacing:.02em;transition:color .25s ease;}
  .nav-link::after{
    content:"";position:absolute;left:0;bottom:-6px;width:0;height:1px;
    background:linear-gradient(90deg,var(--ion),var(--helix));
    transition:width .3s ease;
  }
  .nav-link:hover{color:var(--ink);}
  .nav-link:hover::after, .nav-link.active::after{width:100%;}
  .nav-link.active{color:var(--ink);}

  /* ---------- Glass card ---------- */
  .glass{
    background:linear-gradient(160deg, rgba(255,255,255,0.045), rgba(255,255,255,0.015));
    border:1px solid var(--line);
    backdrop-filter:blur(14px);
    border-radius:20px;
    position:relative;
  }
  .glow-border{position:relative; isolation:isolate;}
  .glow-border::before{
    content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
    background:linear-gradient(135deg, var(--ion), transparent 30%, transparent 70%, var(--nebula));
    -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor; mask-composite:exclude;
    opacity:0;transition:opacity .4s ease; z-index:-1;
  }
  .glow-border:hover::before{opacity:1;}
  .glow-border:hover{transform:translateY(-4px); box-shadow:0 20px 60px -20px rgba(59,167,255,0.25);}
  .glow-border{transition:transform .35s ease, box-shadow .35s ease;}

  .btn-primary{
    background:linear-gradient(135deg,var(--ion),var(--nebula));
    color:#fff;font-weight:500;border-radius:999px;padding:13px 30px;
    position:relative;overflow:hidden;transition:transform .3s ease, box-shadow .3s ease;
    display:inline-flex;align-items:center;gap:8px;
  }
  .btn-primary:hover{transform:translateY(-2px); box-shadow:0 12px 30px -8px rgba(59,167,255,.55);}
  .btn-ghost{
    border:1px solid var(--line);color:var(--ink);border-radius:999px;padding:12px 28px;
    transition:all .3s ease; display:inline-flex;align-items:center;gap:8px;
  }
  .btn-ghost:hover{border-color:var(--helix); box-shadow:0 0 24px -6px rgba(0,240,216,.4); color:var(--helix);}

  .gradient-text{
    background:linear-gradient(90deg,var(--ion),var(--helix) 50%, var(--nebula-2));
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }

  .section-eyebrow{
    font-family:'Space Grotesk'; font-size:12px; letter-spacing:.35em; text-transform:uppercase;
    color:var(--helix); display:flex; align-items:center; gap:10px;
  }
  .section-eyebrow::before{content:"";width:24px;height:1px;background:var(--helix);}

  /* reveal */
  .reveal{opacity:0; transform:translateY(28px); transition:opacity .8s ease, transform .8s ease;}
  .reveal.in{opacity:1; transform:translateY(0);}

  /* Typing */
  #typed-role{border-right:2px solid var(--helix); padding-right:4px;}

  /* Timeline */
  .timeline-line{background:linear-gradient(180deg, var(--ion), var(--nebula), transparent);}
  .timeline-dot{
    box-shadow:0 0 0 4px rgba(5,5,5,1), 0 0 20px var(--ion);
  }

  /* Progress rings */
  .ring-bg{stroke:rgba(255,255,255,0.08);}
  .ring-fg{stroke:url(#ringGrad); stroke-linecap:round; transition:stroke-dashoffset 1.4s cubic-bezier(.3,.8,.3,1);}

  /* Counters */
  .counter-num{font-family:'Space Grotesk'; font-weight:700;}

  /* Marquee for socials / logos style badges */
  .badge-soon{
    font-size:10px; letter-spacing:.1em; text-transform:uppercase;
    background:rgba(139,92,246,.15); color:var(--nebula-2); border:1px solid rgba(139,92,246,.35);
    padding:3px 10px; border-radius:999px;
  }

  input, textarea{
    background:rgba(255,255,255,0.03); border:1px solid var(--line); color:var(--ink);
    border-radius:12px; padding:14px 16px; width:100%; font-family:'Inter'; font-size:14px;
    transition:border-color .3s ease, box-shadow .3s ease;
  }
  input::placeholder, textarea::placeholder{color:var(--ink-faint);}
  input:focus, textarea:focus{outline:none; border-color:var(--ion); box-shadow:0 0 0 4px rgba(59,167,255,.12);}

  a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
    outline:2px solid var(--helix); outline-offset:3px;
  }

  .back-top{
    position:fixed; bottom:28px; right:28px; z-index:60;
    width:46px;height:46px;border-radius:50%;
    background:rgba(12,14,19,.8); border:1px solid var(--line); backdrop-filter:blur(10px);
    display:flex;align-items:center;justify-content:center;
    opacity:0; pointer-events:none; transform:translateY(10px);
    transition:all .35s ease;
  }
  .back-top.show{opacity:1; pointer-events:auto; transform:translateY(0);}
  .back-top:hover{border-color:var(--helix); box-shadow:0 0 20px -4px var(--helix);}

  canvas#particles{position:absolute; inset:0; z-index:0;}

  .mobile-menu{
    max-height:0; overflow:hidden; transition:max-height .45s ease;
  }
  .mobile-menu.open{max-height:480px;}

  .footer-wave path{animation:wave 10s linear infinite;}
  @keyframes wave{0%{transform:translateX(0);}100%{transform:translateX(-50%);}}