/* ============================================================
   Aalokit Harry — Portfolio
   Modern minimal design system, fluid motion.
   ============================================================ */

:root{
  --bg: #faf9f6;
  --bg-alt: #f1efe9;
  --surface: #ffffff;
  --text: #131313;
  --text-soft: #5b5a56;
  --line: rgba(19,19,19,0.1);
  --accent: #4b3bff;
  --accent-soft: #ecebff;
  --accent-contrast: #ffffff;

  --grad-1: linear-gradient(135deg,#4b3bff,#8f7bff);
  --grad-2: linear-gradient(135deg,#ff7a59,#ffb86b);
  --grad-3: linear-gradient(135deg,#0f9b8e,#5be3c9);
  --grad-4: linear-gradient(135deg,#ff4d8d,#ff9ac0);
  --grad-5: linear-gradient(135deg,#1c1c1c,#4b3bff);
  --grad-6: linear-gradient(135deg,#f4c95d,#ff8a4c);

  --font-display: "Space Grotesk", "Inter", sans-serif;
  --font-body: "Inter", sans-serif;

  --ease: cubic-bezier(.16,.84,.44,1);
  --ease-soft: cubic-bezier(.22,.61,.36,1);
  --dur: .7s;

  --container: 1240px;
  --radius: 18px;
}

[data-theme="dark"]{
  --bg: #0c0c0e;
  --bg-alt: #131316;
  --surface: #17171b;
  --text: #f4f3ef;
  --text-soft: #a3a29c;
  --line: rgba(244,243,239,0.12);
  --accent: #8f7bff;
  --accent-soft: rgba(143,123,255,0.14);
  --accent-contrast: #0c0c0e;
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
button{ font:inherit; background:none; border:none; cursor:pointer; color:inherit; }
h1,h2,h3{ font-family: var(--font-display); margin:0; line-height:1.05; letter-spacing:-0.01em; }
p{ margin:0; }

.container{
  max-width: var(--container);
  margin-inline:auto;
  padding-inline: 6vw;
}

::selection{ background: var(--accent); color:#fff; }

/* ============ SCROLLBAR ============ */
::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background: var(--bg); }
::-webkit-scrollbar-thumb{ background: var(--line); border-radius:10px; }

/* ============ PRELOADER ============ */
.preloader{
  position:fixed; inset:0; z-index:999;
  background: var(--bg);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:22px;
  transition: opacity .7s var(--ease), visibility .7s var(--ease);
}
.preloader.is-hidden{ opacity:0; visibility:hidden; pointer-events:none; }
.preloader__mark{
  font-family: var(--font-display); font-weight:700; font-size:2.6rem;
  color: var(--text); letter-spacing:-0.03em;
}
.preloader__bar{
  width:180px; height:2px; background: var(--line); border-radius:2px; overflow:hidden;
}
.preloader__bar span{
  display:block; height:100%; width:0%; background: var(--accent);
  transition: width .3s var(--ease-soft);
}

/* ============ GRAIN ============ */
.grain{
  position:fixed; inset:0; pointer-events:none; z-index:2; opacity:.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.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============ CUSTOM CURSOR ============ */
.cursor{
  position:fixed; top:0; left:0; z-index:998; pointer-events:none;
  border-radius:50%; transform:translate(-50%,-50%);
  transition: width .25s var(--ease), height .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease), opacity .25s;
}
#cursorDot{ width:8px; height:8px; background: var(--text); }
#cursorRing{ width:34px; height:34px; border:1.4px solid var(--line); }
.cursor--hover#cursorRing{ width:64px; height:64px; border-color: var(--accent); background: var(--accent-soft); }
.cursor--hover#cursorDot{ opacity:0; }
@media (hover:none), (pointer:coarse){ .cursor{ display:none; } }

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 26px; border-radius:100px; font-weight:600; font-size:.95rem;
  white-space:nowrap; transition: transform .45s var(--ease), background .3s, color .3s, border-color .3s;
  will-change:transform;
}
.btn svg{ width:16px; height:16px; }
.btn--primary{ background: var(--text); color: var(--bg); }
[data-theme="dark"] .btn--primary{ background: var(--accent); color:#fff; }
.btn--primary:hover{ transform: translateY(-2px); }
.btn--ghost{ border:1px solid var(--line); }
.btn--ghost:hover{ border-color: var(--text); transform: translateY(-2px); }
.btn--outline{ border:1px solid var(--line); }
.btn--sm{ padding:9px 18px; font-size:.82rem; }

/* ============ HEADER ============ */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:200;
  padding:20px 0;
  transition: transform .5s var(--ease), background .4s, box-shadow .4s, padding .3s;
}
.site-header.is-scrolled{
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--line);
  padding:14px 0;
}
.site-header.is-hidden{ transform: translateY(-110%); }
.header__inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; }

.logo{ font-family: var(--font-display); font-weight:700; font-size:1.15rem; letter-spacing:-0.02em; }
.logo span{ color: var(--accent); }
.logo--sm{ font-size:1rem; }

.nav{ display:flex; gap:34px; }
.nav a{
  position:relative; font-size:.92rem; font-weight:500; color: var(--text-soft);
  transition: color .3s;
}
.nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:1px; background: var(--text);
  transform: scaleX(0); transform-origin:right; transition: transform .4s var(--ease);
}
.nav a:hover{ color: var(--text); }
.nav a:hover::after{ transform: scaleX(1); transform-origin:left; }

.header__actions{ display:flex; align-items:center; gap:14px; }
.theme-toggle{
  width:38px; height:38px; border-radius:50%; border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  transition: border-color .3s, transform .3s;
}
.theme-toggle:hover{ border-color: var(--text); transform: rotate(20deg); }
.theme-toggle svg{ width:17px; height:17px; }
.icon-moon{ display:none; }
[data-theme="dark"] .icon-sun{ display:none; }
[data-theme="dark"] .icon-moon{ display:block; }

.nav-cta{ display:inline-flex; }

.burger{
  display:none; width:38px; height:38px; position:relative; z-index:210;
}
.burger span{
  position:absolute; left:9px; right:9px; height:1.4px; background: var(--text);
  transition: transform .4s var(--ease), opacity .3s;
}
.burger span:first-child{ top:15px; }
.burger span:last-child{ bottom:15px; }
.burger[aria-expanded="true"] span:first-child{ transform: translateY(6.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child{ transform: translateY(-6.5px) rotate(-45deg); }

.mobile-menu{
  position:fixed; inset:0; z-index:190; background: var(--bg);
  display:flex; flex-direction:column; justify-content:space-between;
  padding: 110px 8vw 60px;
  transform: translateY(-100%); transition: transform .55s var(--ease);
}
.mobile-menu.is-open{ transform: translateY(0); }
.mobile-menu nav{ display:flex; flex-direction:column; gap:6px; }
.mobile-menu nav a{
  font-family: var(--font-display); font-size:clamp(2.2rem,9vw,3.6rem); font-weight:600;
  padding:10px 0; border-bottom:1px solid var(--line);
}
.mobile-menu__foot{ display:flex; flex-direction:column; gap:18px; }
.mobile-menu__foot a{ color: var(--text-soft); }
.mobile-menu__social{ display:flex; gap:20px; }

/* ============ HERO ============ */
.hero{
  position:relative; min-height:100svh; display:flex; flex-direction:column; justify-content:center;
  padding-top:120px; overflow:hidden;
}
.hero__blob{
  position:absolute; top:-10%; right:-10%; width:60vw; height:60vw; max-width:820px; max-height:820px;
  background: radial-gradient(circle at 30% 30%, var(--accent) 0%, transparent 70%);
  opacity:.16; filter:blur(40px); border-radius:50%;
  animation: blobMove 16s ease-in-out infinite alternate;
  pointer-events:none;
}
@keyframes blobMove{
  0%{ transform: translate(0,0) scale(1); }
  100%{ transform: translate(-6%,8%) scale(1.15); }
}
.hero__inner{ position:relative; z-index:2; }

.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-size:.85rem; font-weight:500; color: var(--text-soft);
  padding:8px 16px; border:1px solid var(--line); border-radius:100px; margin-bottom:32px;
}
.dot-live{ width:7px; height:7px; border-radius:50%; background:#37c977; box-shadow:0 0 0 0 rgba(55,201,119,.5); animation: pulse 2s infinite; }
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(55,201,119,.45); }
  70%{ box-shadow:0 0 0 8px rgba(55,201,119,0); }
  100%{ box-shadow:0 0 0 0 rgba(55,201,119,0); }
}

.hero__title{ font-size: clamp(2.6rem, 8vw, 6rem); font-weight:600; }
.hero__title .line{ display:block; overflow:hidden; }
.reveal-line{
  display:inline-block; transform: translateY(110%);
  transition: transform .9s var(--ease);
}
.hero.is-ready .reveal-line{ transform: translateY(0); }
.hero.is-ready .line:nth-child(2) .reveal-line{ transition-delay:.08s; }
.hero.is-ready .line:nth-child(3) .reveal-line{ transition-delay:.16s; }
.hero__title--accent{ color: var(--accent); font-style:italic; }

.hero__sub{
  max-width:560px; margin-top:28px; font-size:1.08rem; line-height:1.65; color: var(--text-soft);
}
.hero__ctas{ display:flex; gap:16px; margin-top:40px; flex-wrap:wrap; }

.scroll-cue{
  position:absolute; bottom:34px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; color: var(--text-soft);
}
.scroll-cue svg{ width:16px; height:16px; animation: bob 1.8s ease-in-out infinite; }
@keyframes bob{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(6px);} }

/* ============ REVEAL (generic scroll-in) ============ */
.reveal-up{ opacity:0; transform: translateY(34px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal-up.in-view{ opacity:1; transform: translateY(0); }
[data-delay="1"]{ transition-delay:.1s; }
[data-delay="2"]{ transition-delay:.2s; }
[data-delay="3"]{ transition-delay:.3s; }

/* ============ MARQUEE ============ */
.marquee-section{
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:26px 0; background: var(--bg-alt);
}
.marquee{ overflow:hidden; }
.marquee__track{
  display:inline-flex; white-space:nowrap; animation: scrollLeft 28s linear infinite;
  font-family: var(--font-display); font-size:1.4rem; font-weight:500; color: var(--text-soft);
}
.marquee--reverse .marquee__track{ animation-name: scrollRight; color: var(--text); opacity:.55; }
.marquee-section .marquee:first-child{ margin-bottom:10px; }
.marquee__track span{ padding-inline:10px; }
.marquee:hover .marquee__track{ animation-play-state: paused; }
@keyframes scrollLeft{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }
@keyframes scrollRight{ from{ transform:translateX(-50%);} to{ transform:translateX(0);} }

/* ============ SECTION SHARED ============ */
section{ padding: clamp(70px, 11vw, 140px) 0; }
.section-eyebrow{
  font-size:.82rem; font-weight:600; text-transform:uppercase; letter-spacing:.12em;
  color: var(--accent); margin-bottom:16px;
}
.section-title{ font-size: clamp(1.9rem, 4vw, 3rem); font-weight:600; max-width:760px; }
.section-head{ margin-bottom:56px; }
.section-head--split{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; }
.center{ text-align:center; margin-inline:auto; }

/* ============ ABOUT ============ */
.about__inner{ display:grid; grid-template-columns: .8fr 1.2fr; gap:80px; align-items:center; }
.about__media{ position:relative; }
.about__frame{
  aspect-ratio: 4/5; border-radius: var(--radius); overflow:hidden;
  background: var(--grad-5);
  display:flex; align-items:center; justify-content:center;
}
.about__photo{ width:100%; height:100%; object-fit:cover; display:block; }
.about__location{
  display:inline-flex; align-items:center; gap:7px; margin-top:14px;
  font-size:.88rem; font-weight:500; color: var(--text-soft);
}
.about__location svg{ width:15px; height:15px; color: var(--accent); }
.about__badge{
  position:absolute; bottom:-24px; left:-24px; background: var(--surface);
  border:1px solid var(--line); border-radius:16px; padding:18px 22px;
  box-shadow: 0 20px 40px -20px rgba(0,0,0,.25);
}
.about__badge strong{ display:block; font-family:var(--font-display); font-size:1.6rem; color: var(--accent); }
.about__badge span{ font-size:.8rem; color: var(--text-soft); }

.about__text{ margin-top:20px; color: var(--text-soft); line-height:1.75; font-size:1.02rem; max-width:560px; }
.about__text em{ opacity:.75; }

.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:48px; }
.stat{ border-top:1px solid var(--line); padding-top:16px; }
.stat__num{ font-family:var(--font-display); font-size:2.1rem; font-weight:700; color: var(--text); }
.stat__plus{ font-family:var(--font-display); font-size:2.1rem; font-weight:700; color: var(--accent); }
.stat p{ margin-top:6px; font-size:.85rem; color: var(--text-soft); }

/* ============ SERVICES ============ */
.services__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.service-card{
  background: var(--surface); border:1px solid var(--line); border-radius: var(--radius);
  padding:36px 30px; transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .4s;
}
.service-card:hover{
  transform: translateY(-8px);
  box-shadow: 0 30px 50px -30px rgba(0,0,0,.25);
  border-color: transparent;
}
.service-card__icon{
  width:52px; height:52px; border-radius:14px; background: var(--accent-soft); color: var(--accent);
  display:flex; align-items:center; justify-content:center; margin-bottom:24px;
}
.service-card__icon svg{ width:24px; height:24px; }
.service-card h3{ font-size:1.3rem; margin-bottom:12px; }
.service-card p{ color: var(--text-soft); line-height:1.65; font-size:.95rem; }
.service-card__tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; }
.service-card__tags li{ font-size:.75rem; padding:5px 12px; border-radius:100px; background: var(--bg-alt); color: var(--text-soft); }

/* ============ WORK ============ */
.filters{ display:flex; gap:8px; flex-wrap:wrap; }
.filter-btn{
  padding:9px 18px; border-radius:100px; border:1px solid var(--line); font-size:.85rem; font-weight:500;
  color: var(--text-soft); transition: all .35s var(--ease);
}
.filter-btn:hover{ border-color: var(--text); color: var(--text); }
.filter-btn.is-active{ background: var(--text); color: var(--bg); border-color: var(--text); }

.work__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.work-card{ cursor:pointer; transition: opacity .5s var(--ease), transform .5s var(--ease); }
.work-card.is-hidden{ display:none; }
.work-card__media{
  position:relative; aspect-ratio:4/5; border-radius: var(--radius); overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  transition: transform .6s var(--ease);
}
.work-card:hover .work-card__media{ transform: scale(1.03); }
.work-card__media img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
.work-card__media::after{
  content:""; position:absolute; inset:0; background: linear-gradient(0deg, rgba(0,0,0,.45), transparent 55%);
  opacity:0; transition: opacity .4s;
}
.work-card:hover .work-card__media::after{ opacity:1; }
.play-icon, .frame-icon{
  width:58px; height:58px; border-radius:50%; background: rgba(255,255,255,.18);
  backdrop-filter: blur(6px); display:flex; align-items:center; justify-content:center;
  color:#fff; transition: transform .4s var(--ease), background .4s;
}
.work-card:hover .play-icon,.work-card:hover .frame-icon{ transform: scale(1.12); background: rgba(255,255,255,.28); }
.play-icon svg{ width:22px; height:22px; margin-left:3px; }
.frame-icon svg{ width:24px; height:24px; }

.grad-1{ background: var(--grad-1); }
.grad-2{ background: var(--grad-2); }
.grad-3{ background: var(--grad-3); }
.grad-4{ background: var(--grad-4); }
.grad-5{ background: var(--grad-5); }
.grad-6{ background: var(--grad-6); }

.work-card__info{ display:flex; justify-content:space-between; align-items:center; padding:16px 2px 0; }
.work-card__info h3{ font-size:1.05rem; font-weight:600; }
.work-card__info span{ font-size:.78rem; color: var(--text-soft); }

/* ============ TESTIMONIALS ============ */
.testi{ max-width:760px; margin:56px auto 0; text-align:center; }
.testi__viewport{ overflow:hidden; }
.testi__track{ display:flex; transition: transform .6s var(--ease); }
.testi__slide{ min-width:100%; margin:0; padding:0 10px; }
.testi__slide p{
  font-family: var(--font-display); font-size: clamp(1.2rem,2.6vw,1.7rem); font-weight:500;
  line-height:1.5; color: var(--text);
}
.testi__slide footer{ margin-top:26px; display:flex; flex-direction:column; gap:2px; }
.testi__slide footer strong{ font-size:.95rem; }
.testi__slide footer span{ font-size:.82rem; color: var(--text-soft); }
.testi__dots{ display:flex; justify-content:center; gap:10px; margin-top:36px; }
.testi__dots button{
  width:8px; height:8px; border-radius:50%; background: var(--line); transition: all .3s;
}
.testi__dots button.is-active{ background: var(--accent); width:24px; border-radius:4px; }

/* ============ CONTACT ============ */
.contact{ text-align:center; }
.contact__inner{ display:flex; flex-direction:column; align-items:center; }
.contact__title{ font-size: clamp(2.4rem,7vw,4.6rem); font-weight:600; margin-top:8px; }
.contact__sub{ margin-top:22px; color: var(--text-soft); font-size:1.05rem; max-width:480px; }

.email-btn{
  margin-top:44px; display:inline-flex; align-items:center; gap:14px;
  padding:20px 32px; border-radius:100px; border:1px solid var(--line);
  font-family: var(--font-display); font-size:clamp(1rem,2.4vw,1.35rem); font-weight:600;
  transition: transform .5s var(--ease), background .4s, color .4s, border-color .4s;
}
.email-btn:hover{ background: var(--text); color: var(--bg); border-color: var(--text); transform: translateY(-3px); }
.email-btn svg{ width:20px; height:20px; }
.copy-toast{
  display:block; margin-top:14px; font-size:.82rem; color: var(--accent); font-weight:600;
  opacity:0; transform: translateY(-6px); transition: all .35s var(--ease);
}
.copy-toast.is-shown{ opacity:1; transform:translateY(0); }

.socials{ display:flex; gap:28px; margin-top:52px; flex-wrap:wrap; justify-content:center; }
.socials a{
  font-size:.9rem; font-weight:500; color: var(--text-soft); position:relative; padding-bottom:4px;
}
.socials a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background: var(--text);
  transform: scaleX(0); transition: transform .4s var(--ease);
}
.socials a:hover{ color: var(--text); }
.socials a:hover::after{ transform:scaleX(1); }

/* ============ FOOTER ============ */
.site-footer{ border-top:1px solid var(--line); padding:30px 0; }
.footer__inner{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
.footer__inner p{ font-size:.82rem; color: var(--text-soft); }
.to-top{
  width:40px; height:40px; border-radius:50%; border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; transition: transform .4s var(--ease), border-color .3s;
}
.to-top:hover{ transform: translateY(-4px); border-color: var(--text); }
.to-top svg{ width:16px; height:16px; }

/* ============ MODAL / LIGHTBOX ============ */
.modal{ position:fixed; inset:0; z-index:500; display:flex; align-items:center; justify-content:center; padding:5vw; opacity:0; visibility:hidden; transition: opacity .45s var(--ease), visibility .45s; }
.modal.is-open{ opacity:1; visibility:visible; }
.modal__backdrop{ position:absolute; inset:0; background: rgba(10,10,10,.6); backdrop-filter: blur(6px); }
.modal__panel{
  position:relative; background: var(--surface); width:min(880px,100%); border-radius:24px; overflow:hidden;
  display:grid; grid-template-columns:1fr 1fr;
  transform: scale(.94) translateY(14px); transition: transform .5s var(--ease);
  max-height:86vh;
}
.modal.is-open .modal__panel{ transform: scale(1) translateY(0); }
.modal__media{ min-height:280px; position:relative; }
.modal__media--video iframe{
  position:absolute; inset:0; width:100%; height:100%; border:0;
}
.modal__body{ padding:44px 40px; display:flex; flex-direction:column; justify-content:center; }
.modal__tag{ font-size:.78rem; font-weight:600; color: var(--accent); text-transform:uppercase; letter-spacing:.08em; }
.modal__body h3{ font-size:1.7rem; margin-top:12px; }
.modal__body p{ margin-top:16px; color: var(--text-soft); line-height:1.7; }
.modal__close{
  position:absolute; top:18px; right:18px; z-index:2; width:38px; height:38px; border-radius:50%;
  background: rgba(255,255,255,.9); color:#111; display:flex; align-items:center; justify-content:center;
  transition: transform .35s var(--ease);
}
.modal__close:hover{ transform: rotate(90deg); }
.modal__close svg{ width:16px; height:16px; }
body.modal-open{ overflow:hidden; }

/* ============ RESPONSIVE ============ */
@media (max-width: 1180px){
  .services__grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 980px){
  .nav, .nav-cta{ display:none; }
  .burger{ display:block; }
  .about__inner{ grid-template-columns:1fr; gap:70px; }
  .about__badge{ left:0; }
  .services__grid{ grid-template-columns:1fr; }
  .work__grid{ grid-template-columns:repeat(2,1fr); }
  .stats{ grid-template-columns:repeat(2,1fr); }
  .modal__panel{ grid-template-columns:1fr; overflow-y:auto; }
  .modal__media{ min-height:220px; }
}
@media (max-width: 600px){
  .work__grid{ grid-template-columns:1fr; }
  .section-head--split{ align-items:flex-start; }
  .footer__inner{ flex-direction:column; text-align:center; }
}