/* ==========================================================================
   HARI PRASAD — PORTFOLIO
   Design tokens: ink black canvas, ember-orange signal, data-driven type.
   Display: Space Grotesk · Body: Inter · Data/Eyebrow: Space Mono
   ========================================================================== */

:root{
  /* --- Color --- */
  --ink:            #08080a;   /* base background */
  --ink-2:          #0e0e11;   /* elevated surface */
  --ink-3:          #14141a;   /* card surface */
  --glass:          rgba(255,255,255,0.045);
  --glass-strong:   rgba(255,255,255,0.08);
  --line:           rgba(255,255,255,0.09);
  --line-soft:      rgba(255,255,255,0.05);
  --bone:           #F3F1EA;   /* primary text */
  --bone-dim:       #A7A6AC;   /* secondary text */
  --bone-faint:     #6B6A72;   /* tertiary text */
  --ember:          #FF6A00;   /* accent */
  --ember-soft:     #FFB347;   /* accent light */
  --ember-dim:      rgba(255,106,0,0.14);
  --ember-line:     rgba(255,106,0,0.35);

  /* --- Type --- */
  --f-display: 'Space Grotesk', 'Inter', sans-serif;
  --f-body:    'Inter', -apple-system, sans-serif;
  --f-data:    'Space Mono', monospace;

  /* --- Scale --- */
  --radius-s:  10px;
  --radius-m:  18px;
  --radius-l:  28px;
  --gutter:    clamp(24px, 5vw, 72px);
  --maxw:      1360px;

  --ease: cubic-bezier(.16,.84,.24,1);
  --dur-s: .35s;
  --dur-m: .7s;
  --dur-l: 1.1s;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
html,body{ background:var(--ink); }

body{
  margin:0;
  font-family:var(--f-body);
  color:var(--bone);
  background:var(--ink);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  line-height:1.6;
}

body.no-scroll{ overflow:hidden; height:100vh; }

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; cursor:pointer; }
::selection{ background:var(--ember); color:#0a0a0a; }

/* Focus visibility — accessibility floor */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:2px solid var(--ember);
  outline-offset:3px;
  border-radius:4px;
}

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

/* ------------------------------------------------------------------------
   Grain + backdrop glow — subtle atmosphere layer, fixed behind everything
   ------------------------------------------------------------------------ */
.bg-atmosphere{
  position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden;
}
.bg-atmosphere::before{
  content:'';
  position:absolute; inset:-20%;
  background:
    radial-gradient(38vw 38vw at 12% 8%, rgba(255,106,0,0.10), transparent 60%),
    radial-gradient(46vw 46vw at 92% 78%, rgba(255,106,0,0.07), transparent 65%);
  filter:blur(10px);
}
.bg-atmosphere::after{
  content:'';
  position:absolute; inset:0;
  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.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
  opacity:.05;
  mix-blend-mode:overlay;
}

.wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--gutter); position:relative; z-index:1; }
section{ position:relative; z-index:1; }

/* ------------------------------------------------------------------------
   Typography
   ------------------------------------------------------------------------ */
h1,h2,h3,h4{ font-family:var(--f-display); margin:0; letter-spacing:-0.02em; font-weight:600; color:var(--bone); }
p{ margin:0; color:var(--bone-dim); }

.eyebrow{
  font-family:var(--f-data);
  font-size:12.5px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ember);
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.eyebrow::before{
  content:'';
  width:7px; height:7px; border-radius:50%;
  background:var(--ember);
  box-shadow:0 0 0 4px var(--ember-dim);
}

.h-hero{ font-size:clamp(56px, 9vw, 132px); line-height:.95; }
.h-xl{ font-size:clamp(38px, 5.4vw, 74px); line-height:1.02; }
.h-lg{ font-size:clamp(30px, 3.6vw, 48px); line-height:1.08; }
.h-md{ font-size:clamp(22px, 2.2vw, 28px); line-height:1.2; }

.lead{ font-size:clamp(17px, 1.5vw, 20px); color:var(--bone-dim); max-width:640px; }

.text-ember{ color:var(--ember); }
.serif-ital{ font-style:italic; opacity:.85; }

/* gradient text used sparingly on the hero name only — the one signature moment */
.grad-text{
  background:linear-gradient(100deg, var(--bone) 30%, var(--ember-soft) 60%, var(--ember) 82%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ------------------------------------------------------------------------
   Buttons
   ------------------------------------------------------------------------ */
.btn{
  position:relative;
  display:inline-flex; align-items:center; gap:10px;
  padding:16px 30px;
  border-radius:100px;
  font-family:var(--f-body); font-weight:600; font-size:14.5px;
  letter-spacing:.01em;
  border:1px solid var(--line);
  background:transparent; color:var(--bone);
  overflow:hidden;
  transition:border-color var(--dur-s) var(--ease), transform var(--dur-s) var(--ease), color var(--dur-s) var(--ease);
  isolation:isolate;
}
.btn::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:var(--ember);
  transform:translateX(-101%);
  transition:transform var(--dur-m) var(--ease);
}
.btn:hover{ border-color:transparent; color:#0a0a0a; transform:translateY(-2px); }
.btn:hover::before{ transform:translateX(0); }
.btn-primary{ background:var(--ember); border-color:var(--ember); color:#0a0a0a; }
.btn-primary::before{ background:var(--bone); }
.btn-primary:hover{ color:#0a0a0a; }
.btn-arrow{ transition:transform var(--dur-s) var(--ease); }
.btn:hover .btn-arrow{ transform:translateX(4px); }
.btn-ghost{ padding:12px 0; border:none; border-bottom:1px solid var(--line); border-radius:0; }
.btn-ghost::before{ display:none; }
.btn-ghost:hover{ color:var(--ember); border-color:var(--ember); }

/* ------------------------------------------------------------------------
   Glass surfaces
   ------------------------------------------------------------------------ */
.glass{
  background:var(--glass);
  border:1px solid var(--line);
  border-radius:var(--radius-m);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
}
.glass-strong{ background:var(--glass-strong); }

/* ------------------------------------------------------------------------
   Navigation
   ------------------------------------------------------------------------ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding:22px var(--gutter);
  display:flex; align-items:center; justify-content:space-between;
  transition:padding var(--dur-s) var(--ease), background var(--dur-s) var(--ease), border-color var(--dur-s) var(--ease);
  border-bottom:1px solid transparent;
}
.nav.is-scrolled{
  padding-block:14px;
  background:rgba(8,8,10,0.72);
  border-color:var(--line-soft);
  backdrop-filter:blur(16px);
}
.nav-logo{ font-family:var(--f-display); font-weight:600; font-size:19px; letter-spacing:-.01em; display:flex; align-items:center; gap:9px; }
.nav-logo .dot{ width:7px; height:7px; border-radius:50%; background:var(--ember); }
.nav-links{ display:flex; gap:34px; align-items:center; }
.nav-links a{
  font-size:13.5px; font-weight:500; color:var(--bone-dim);
  position:relative; padding:6px 0; letter-spacing:.01em;
  transition:color var(--dur-s) var(--ease);
}
.nav-links a::after{
  content:''; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:var(--ember); transition:width var(--dur-s) var(--ease);
}
.nav-links a:hover, .nav-links a.active{ color:var(--bone); }
.nav-links a:hover::after, .nav-links a.active::after{ width:100%; }
.nav-cta{ display:flex; align-items:center; gap:22px; }
.nav-cta .btn{ padding:11px 22px; font-size:13px; }

.nav-toggle{
  display:none; width:38px; height:38px; border-radius:50%;
  border:1px solid var(--line); background:transparent;
  position:relative; z-index:200;
}
.nav-toggle span{
  position:absolute; left:11px; width:16px; height:1px; background:var(--bone);
  transition:transform var(--dur-s) var(--ease), opacity var(--dur-s) var(--ease);
}
.nav-toggle span:nth-child(1){ top:15px; }
.nav-toggle span:nth-child(2){ top:22px; }
.nav-toggle.is-open span:nth-child(1){ transform:translateY(3.5px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2){ transform:translateY(-3.5px) rotate(-45deg); }

.mobile-menu{
  position:fixed; inset:0; z-index:90; background:var(--ink);
  display:flex; flex-direction:column; justify-content:center; padding:0 var(--gutter);
  transform:translateY(-100%); transition:transform var(--dur-m) var(--ease);
}
.mobile-menu.is-open{ transform:translateY(0); }
.mobile-menu a{ font-family:var(--f-display); font-size:36px; padding:14px 0; color:var(--bone-dim); border-bottom:1px solid var(--line-soft); }
.mobile-menu a.active, .mobile-menu a:hover{ color:var(--ember); }

/* ------------------------------------------------------------------------
   Scroll progress + back to top + cursor + loader
   ------------------------------------------------------------------------ */
.scroll-progress{
  position:fixed; top:0; left:0; height:2px; width:0%; background:var(--ember);
  z-index:300; transition:width .08s linear;
}
.back-to-top{
  position:fixed; right:28px; bottom:28px; z-index:120;
  width:52px; height:52px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line); background:rgba(8,8,10,0.6);
  backdrop-filter:blur(10px);
  opacity:0; transform:translateY(16px); pointer-events:none;
  transition:opacity var(--dur-s) var(--ease), transform var(--dur-s) var(--ease), border-color var(--dur-s) var(--ease);
}
.back-to-top.is-visible{ opacity:1; transform:translateY(0); pointer-events:auto; }
.back-to-top:hover{ border-color:var(--ember); }
.back-to-top svg{ width:16px; height:16px; stroke:var(--bone); transition:transform var(--dur-s) var(--ease); }
.back-to-top:hover svg{ transform:translateY(-3px); stroke:var(--ember); }

.cursor-dot, .cursor-ring{
  position:fixed; top:0; left:0; z-index:400; pointer-events:none;
  border-radius:50%; transform:translate(-50%,-50%);
}
.cursor-dot{ width:6px; height:6px; background:var(--ember); }
.cursor-ring{ width:34px; height:34px; border:1px solid var(--ember-line); transition:width .25s var(--ease), height .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease); }
.cursor-ring.is-hover{ width:64px; height:64px; background:var(--ember-dim); border-color:transparent; }
@media (hover:none), (pointer:coarse){ .cursor-dot, .cursor-ring{ display:none; } }

.loader{
  position:fixed; inset:0; z-index:500; background:var(--ink);
  display:flex; align-items:center; justify-content:center;
  transition:opacity .6s var(--ease), visibility .6s var(--ease);
}
.loader.is-hidden{ opacity:0; visibility:hidden; }
.loader-mark{ font-family:var(--f-data); font-size:13px; letter-spacing:.3em; color:var(--bone-dim); display:flex; gap:14px; align-items:center; }
.loader-bar{ width:180px; height:1px; background:var(--line); position:relative; overflow:hidden; }
.loader-bar::after{ content:''; position:absolute; inset:0; background:var(--ember); transform:scaleX(0); transform-origin:left; animation:loaderFill 1.1s var(--ease) forwards; }

/* ------------------------------------------------------------------------
   Layout helpers
   ------------------------------------------------------------------------ */
.section{ padding:clamp(80px,12vw,160px) 0; }
.section-tight{ padding:clamp(50px,7vw,96px) 0; }
.section-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:40px; margin-bottom:clamp(40px,6vw,72px); flex-wrap:wrap; }
.section-head .lead{ margin-top:16px; }
.divider{ height:1px; background:var(--line-soft); border:none; margin:0; }

.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:var(--gutter); }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.grid-6{ display:grid; grid-template-columns:repeat(6,1fr); gap:20px; }

/* ------------------------------------------------------------------------
   Reveal-on-scroll utility (JS toggles .is-visible)
   ------------------------------------------------------------------------ */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity var(--dur-l) var(--ease), transform var(--dur-l) var(--ease); }
.reveal.is-visible{ opacity:1; transform:translateY(0); }
.reveal-scale{ opacity:0; transform:scale(.94); transition:opacity var(--dur-l) var(--ease), transform var(--dur-l) var(--ease); }
.reveal-scale.is-visible{ opacity:1; transform:scale(1); }
.stagger > *{ transition-delay:calc(var(--i,0) * 90ms); }

/* ------------------------------------------------------------------------
   Page header (used on inner pages)
   ------------------------------------------------------------------------ */
.page-header{ padding:clamp(150px,20vw,220px) 0 clamp(50px,7vw,80px); }
.page-header .h-xl{ margin-top:20px; max-width:820px; }
.page-header .lead{ margin-top:22px; }
.breadcrumb{ font-family:var(--f-data); font-size:12px; color:var(--bone-faint); letter-spacing:.08em; text-transform:uppercase; }
.breadcrumb .text-ember{ color:var(--ember); }

/* ------------------------------------------------------------------------
   Footer
   ------------------------------------------------------------------------ */
.footer{ padding:clamp(60px,9vw,110px) 0 40px; border-top:1px solid var(--line-soft); }
.footer-top{ display:flex; justify-content:space-between; gap:60px; flex-wrap:wrap; padding-bottom:60px; }
.footer-cta .h-lg{ max-width:560px; }
.footer-cols{ display:flex; gap:64px; }
.footer-col h4{ font-family:var(--f-data); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--bone-faint); margin-bottom:18px; font-weight:500; }
.footer-col a, .footer-col span{ display:block; font-size:14.5px; color:var(--bone-dim); padding:6px 0; transition:color var(--dur-s); }
.footer-col a:hover{ color:var(--ember); }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding-top:28px; border-top:1px solid var(--line-soft); font-size:12.5px; color:var(--bone-faint); flex-wrap:wrap; gap:12px; }
.footer-bottom .socials{ display:flex; gap:20px; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1080px){
  .grid-3{ grid-template-columns:repeat(2,1fr); }
  .grid-4{ grid-template-columns:repeat(2,1fr); }
  .grid-6{ grid-template-columns:repeat(3,1fr); }
  .grid-2{ gap:40px; }
}
@media (max-width:860px){
  .nav-links, .nav-cta .btn{ display:none; }
  .nav-toggle{ display:block; }
  .grid-2{ grid-template-columns:1fr; }
  .footer-top{ flex-direction:column; gap:40px; }
  .footer-cols{ gap:40px; flex-wrap:wrap; }
}
@media (max-width:620px){
  .grid-3, .grid-4{ grid-template-columns:1fr; }
  .grid-6{ grid-template-columns:repeat(2,1fr); }
  .section-head{ flex-direction:column; align-items:flex-start; }
}


/* V2.1 Mobile navigation improvements */
.mobile-menu{height:100dvh;justify-content:flex-start!important;padding:calc(env(safe-area-inset-top,0px) + 90px) var(--gutter) calc(env(safe-area-inset-bottom,0px)+30px)!important;overflow-y:auto!important;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;}
body.no-scroll{overflow:hidden;}


/* Mcube Creative V2.2 Mobile Polish */
@media (max-width:860px){
.hero-copy{padding-top:20px!important;}
.hero-frame,.hero-image,.hero-visual{transform:scale(.85)!important;transform-origin:center top;}
.hero-actions{margin-top:30px!important;}
.btn{min-height:58px!important;}
.stats,.stats-grid{gap:22px!important;}
.back-to-top{right:18px!important;bottom:88px!important;}
.footer-top{gap:32px!important;}
.footer-bottom{padding-bottom:32px!important;}
}
@media (max-width:640px){
.pcard img,.portfolio-card img{max-height:260px!important;object-fit:cover!important;}
}