:root {
  --ak-gold: #f59e0b;
  --ak-gold-soft: #fbbf24;
  --ak-blue: #3b82f6;
  --ak-ease: cubic-bezier(.22, 1, .36, 1);
  --ak-spring: cubic-bezier(.16, 1, .3, 1);
}

html {
  scroll-padding-top: 5.5rem;
}

body {
  overflow-x: hidden;
}

/* Subtle premium texture without changing the site's palette. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  opacity: .025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.75'/%3E%3C/svg%3E");
}

/* Reading progress */
.ak-scroll-progress {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 10000;
  height: 2px;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, #f59e0b, #fde68a 48%, #3b82f6);
  box-shadow: 0 0 18px rgba(245, 158, 11, .65);
  will-change: transform;
}

/* Navigation */
nav {
  transition: background-color .45s ease, border-color .45s ease, box-shadow .45s ease, backdrop-filter .45s ease !important;
}

nav.ak-nav-scrolled {
  background: rgba(2, 6, 23, .76) !important;
  border-bottom: 1px solid rgba(148, 163, 184, .1);
  box-shadow: 0 14px 45px rgba(2, 6, 23, .35);
  backdrop-filter: blur(18px) saturate(145%);
  -webkit-backdrop-filter: blur(18px) saturate(145%);
}

nav ul a {
  position: relative;
}

nav ul a::after {
  content: "";
  position: absolute;
  left: 50%;
  right: 50%;
  bottom: -.48rem;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--ak-gold-soft), transparent);
  box-shadow: 0 0 10px rgba(251, 191, 36, .45);
  transition: left .35s var(--ak-ease), right .35s var(--ak-ease), opacity .35s ease;
  opacity: 0;
}

nav ul a:hover::after,
nav ul a.ak-active::after {
  left: 0;
  right: 0;
  opacity: 1;
}

nav ul a.ak-active {
  color: #fbbf24 !important;
}

/* Hero depth and ambient movement */
main > section:first-of-type {
  isolation: isolate;
}

main > section:first-of-type::before,
main > section:first-of-type::after {
  content: "";
  position: absolute;
  width: min(42vw, 620px);
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(10px);
  opacity: .28;
  z-index: 0;
}

main > section:first-of-type::before {
  left: -18%;
  top: 8%;
  background: radial-gradient(circle, rgba(37, 99, 235, .3), transparent 68%);
  animation: ak-drift-one 12s ease-in-out infinite alternate;
}

main > section:first-of-type::after {
  right: -20%;
  bottom: -18%;
  background: radial-gradient(circle, rgba(245, 158, 11, .22), transparent 68%);
  animation: ak-drift-two 14s ease-in-out infinite alternate;
}

.ak-hero-inner {
  transform-style: preserve-3d;
  will-change: transform;
}

.ak-profile-wrap {
  animation: ak-profile-float 6s ease-in-out infinite;
  filter: drop-shadow(0 28px 60px rgba(2, 6, 23, .52));
}

.ak-profile-wrap::before {
  content: "";
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  padding: 2px;
  background: conic-gradient(from 0deg, transparent 0 15%, rgba(251,191,36,.95) 27%, transparent 42% 62%, rgba(59,130,246,.9) 75%, transparent 91%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: ak-spin 8s linear infinite;
  opacity: .9;
}

.ak-profile-wrap::after {
  content: "";
  position: absolute;
  inset: 7%;
  border-radius: 50%;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 25%, rgba(255,255,255,.14) 45%, transparent 60%);
  background-size: 220% 100%;
  animation: ak-portrait-sheen 5.8s ease-in-out infinite;
  mix-blend-mode: screen;
}

.ak-profile-wrap img {
  transition: transform .8s var(--ak-spring), filter .8s ease;
}

.ak-profile-wrap:hover img {
  transform: scale(1.035);
  filter: contrast(1.03) saturate(1.05);
}

.ak-hero-copy h1 {
  letter-spacing: -.035em;
  text-shadow: 0 20px 60px rgba(2, 6, 23, .55);
}

.ak-hero-copy h1 span {
  position: relative;
  display: inline-block;
  background: linear-gradient(100deg, #f59e0b 0%, #fde68a 42%, #f59e0b 72%);
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  animation: ak-gold-sweep 5s ease-in-out infinite;
}

.ak-hero-copy h1 span::after {
  content: "";
  position: absolute;
  left: 2%;
  right: 2%;
  bottom: -.1em;
  height: 2px;
  transform: scaleX(.3);
  transform-origin: left;
  border-radius: 100%;
  background: linear-gradient(90deg, var(--ak-gold), transparent);
  animation: ak-title-line 1.4s .7s var(--ak-ease) both;
}


/* Hydration-independent hero motion fallback. These selectors use the original
   markup, so the signature motion remains visible even before JavaScript hooks. */
main > section:first-of-type .flex-shrink-0 > .relative:not(.ak-profile-wrap) {
  animation: ak-profile-float 6s ease-in-out infinite;
  filter: drop-shadow(0 28px 60px rgba(2, 6, 23, .52));
}

#hero-title span:not(.ak-motion-title) {
  display: inline-block;
  background: linear-gradient(100deg, #f59e0b 0%, #fde68a 42%, #f59e0b 72%);
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  animation: ak-gold-sweep 5s ease-in-out infinite;
}

/* Gorgeous but controlled reveal system */
html.motion-ready [data-reveal] {
  opacity: 0;
  filter: blur(7px);
  transform: translate3d(0, 34px, 0) scale(.985);
  transition:
    opacity .9s var(--ak-ease),
    transform 1.05s var(--ak-ease),
    filter .9s ease;
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform, filter;
}

html.motion-ready [data-reveal="left"] {
  transform: translate3d(-46px, 12px, 0) rotateY(3deg);
}

html.motion-ready [data-reveal="right"] {
  transform: translate3d(46px, 12px, 0) rotateY(-3deg);
}

html.motion-ready [data-reveal="zoom"] {
  transform: translate3d(0, 20px, 0) scale(.92);
}

html.motion-ready [data-reveal].is-visible {
  opacity: 1;
  filter: blur(0);
  transform: translate3d(0, 0, 0) scale(1) rotate(0);
}

/* Section heading accent */
section[id] h2 {
  position: relative;
  display: inline-block;
  letter-spacing: -.025em;
}

section[id] h2::after {
  content: "";
  display: block;
  width: 64%;
  height: 2px;
  margin-top: .55rem;
  border-radius: 999px;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(90deg, var(--ak-gold), rgba(59,130,246,.72), transparent);
  box-shadow: 0 0 16px rgba(245,158,11,.25);
  transition: transform 1s .2s var(--ak-ease);
}

section[id] h2.is-visible::after,
section[id] .is-visible h2::after {
  transform: scaleX(1);
}

/* Premium cards: lift, sheen, and pointer-follow glow */
.ak-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transform-style: preserve-3d;
  transform: perspective(900px) translateZ(0);
  transition:
    transform .55s var(--ak-spring),
    border-color .45s ease,
    background-color .45s ease,
    box-shadow .55s ease !important;
}

.ak-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(420px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(251,191,36,.12), transparent 42%),
    linear-gradient(115deg, transparent 18%, rgba(255,255,255,.06) 48%, transparent 72%);
  background-size: auto, 230% 100%;
  background-position: center, 120% 0;
  transition: opacity .4s ease, background-position .85s var(--ak-ease);
}

.ak-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.055);
}

.ak-card:hover {
  transform: perspective(900px) translateY(-7px) scale(1.012);
  box-shadow: 0 28px 60px rgba(2, 6, 23, .34), 0 0 0 1px rgba(251, 191, 36, .04);
}

.ak-card:hover::before {
  opacity: 1;
  background-position: center, -70% 0;
}

.ak-card > * {
  position: relative;
  z-index: 1;
}

.ak-card svg,
.ak-card [class*="text-3xl"],
.ak-card [class*="w-14"][class*="h-14"],
.ak-card [class*="w-12"][class*="h-12"] {
  transition: transform .55s var(--ak-spring), filter .45s ease;
}

.ak-card:hover svg,
.ak-card:hover [class*="text-3xl"],
.ak-card:hover [class*="w-14"][class*="h-14"],
.ak-card:hover [class*="w-12"][class*="h-12"] {
  transform: translateY(-3px) scale(1.07) rotate(-2deg);
  filter: drop-shadow(0 8px 16px rgba(245,158,11,.18));
}


/* Skill bars animate to their real values as they enter the viewport. */
.ak-skill-item {
  transition: opacity .75s var(--ak-ease), transform .85s var(--ak-ease);
}

.ak-skill-fill {
  width: 0 !important;
  transform-origin: left;
  box-shadow: 0 0 14px rgba(59,130,246,.2);
  transition: width 1.35s var(--ak-ease) var(--skill-delay, 120ms) !important;
}

.ak-skill-item.is-visible .ak-skill-fill {
  width: var(--skill-width) !important;
}

.ak-skill-pill {
  transition: transform .42s var(--ak-spring), border-color .35s ease, background-color .35s ease, color .35s ease !important;
}

.ak-skill-pill:hover {
  transform: translateY(-4px) scale(1.035);
}

.ak-about-copy p,
.ak-about-copy .mt-8 {
  transition-delay: var(--reveal-delay, 0ms);
}

/* Timeline refinement */
.ak-timeline-list {
  position: relative;
}

.ak-timeline-list::before {
  content: "";
  position: absolute;
  left: -17px;
  top: 18px;
  bottom: 18px;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(245,158,11,.45) 10%, rgba(59,130,246,.3) 78%, transparent);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 1.5s .25s var(--ak-ease);
}

.ak-timeline-list.is-visible::before {
  transform: scaleY(1);
}

.ak-timeline-card {
  overflow: visible;
}

.ak-timeline-card::before {
  border-radius: inherit;
}

.ak-timeline-card::after {
  content: "";
  position: absolute;
  left: -23px;
  top: 28px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #0f172a;
  border: 2px solid rgba(251,191,36,.82);
  box-shadow: 0 0 0 5px rgba(245,158,11,.07), 0 0 20px rgba(245,158,11,.24);
  opacity: 0;
  transform: scale(.35);
  transition: opacity .5s ease .35s, transform .7s var(--ak-spring) .35s;
}

.ak-timeline-card.is-visible::after {
  opacity: 1;
  transform: scale(1);
}

/* Buttons and links */
a[class*="bg-amber-500"],
a[class*="border-slate-600"] {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform .4s var(--ak-spring), box-shadow .4s ease, color .3s ease, border-color .3s ease, background-color .3s ease !important;
}

a[class*="bg-amber-500"]::after,
a[class*="border-slate-600"]::after {
  content: "";
  position: absolute;
  top: -30%;
  bottom: -30%;
  left: -45%;
  width: 28%;
  pointer-events: none;
  transform: skewX(-22deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
  transition: left .75s var(--ak-ease);
}

a[class*="bg-amber-500"]:hover::after,
a[class*="border-slate-600"]:hover::after {
  left: 125%;
}

a[class*="bg-amber-500"]:hover,
a[class*="border-slate-600"]:hover {
  transform: translateY(-3px) scale(1.025) !important;
}

/* Scroll cue */
main > section:first-of-type > div:last-child {
  animation: ak-scroll-cue 2.2s ease-in-out infinite;
}

/* Cursor glow, desktop only */
.ak-cursor-glow {
  position: fixed;
  z-index: 1;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(-50%, -50%, 0);
  background: radial-gradient(circle, rgba(59,130,246,.075), rgba(245,158,11,.025) 35%, transparent 70%);
  transition: opacity .35s ease;
  mix-blend-mode: screen;
}

body.ak-pointer-active .ak-cursor-glow {
  opacity: 1;
}

/* Loading veil: brief, elegant, and non-blocking after first paint */
.ak-intro-veil {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  pointer-events: none;
  background: #020617;
  animation: ak-veil-away 1.15s .1s var(--ak-ease) forwards;
}

.ak-intro-mark {
  position: relative;
  font-family: "Playfair Display", serif;
  font-size: clamp(2rem, 7vw, 4.5rem);
  font-weight: 800;
  letter-spacing: -.05em;
  color: #fff;
  animation: ak-mark-in .72s var(--ak-spring) both;
}

.ak-intro-mark span {
  color: var(--ak-gold-soft);
}

.ak-intro-mark::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -.55rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ak-gold-soft), transparent);
  transform: scaleX(0);
  animation: ak-intro-line .78s .18s var(--ak-ease) forwards;
}

@keyframes ak-spin { to { transform: rotate(1turn); } }
@keyframes ak-profile-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes ak-portrait-sheen { 0%,28% { background-position: 150% 0; opacity: 0; } 48% { opacity: 1; } 70%,100% { background-position: -90% 0; opacity: 0; } }
@keyframes ak-gold-sweep { 0%,100% { background-position: 0 50%; } 50% { background-position: 100% 50%; } }
@keyframes ak-title-line { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: 1; } }
@keyframes ak-drift-one { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(8%, 8%, 0) scale(1.08); } }
@keyframes ak-drift-two { from { transform: translate3d(0,0,0) scale(1.05); } to { transform: translate3d(-9%, -7%, 0) scale(.94); } }
@keyframes ak-scroll-cue { 0%,100% { transform: translate(-50%, 0); opacity: .55; } 50% { transform: translate(-50%, 8px); opacity: 1; } }
@keyframes ak-mark-in { from { opacity: 0; transform: translateY(24px) scale(.92); filter: blur(8px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes ak-intro-line { to { transform: scaleX(1); } }
@keyframes ak-veil-away { 0%,58% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }

@media (max-width: 767px) {
  .ak-cursor-glow { display: none; }
  .ak-profile-wrap { animation-duration: 7.5s; }
  .ak-timeline-list::before,
  .ak-timeline-card::after { display: none; }
  .ak-card:hover { transform: translateY(-4px) scale(1.006); }
  html.motion-ready [data-reveal="left"],
  html.motion-ready [data-reveal="right"] {
    transform: translate3d(0, 30px, 0) scale(.985);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ak-intro-veil,
  .ak-profile-wrap,
  .ak-profile-wrap::before,
  .ak-profile-wrap::after,
  .ak-hero-copy h1 span,
  main > section:first-of-type::before,
  main > section:first-of-type::after,
  main > section:first-of-type > div:last-child {
    animation: none !important;
  }

  .ak-intro-veil { display: none; }
  html.motion-ready [data-reveal] {
    opacity: 1;
    filter: none;
    transform: none;
  }
}

/* Hero shine removed by request.
   Keep the portrait float, rotating ring, depth and reveal animations intact. */
.ak-profile-wrap::after {
  content: none !important;
  display: none !important;
  animation: none !important;
  background: none !important;
}

.ak-hero-copy h1 span,
#hero-title span:not(.ak-motion-title) {
  background: none !important;
  background-image: none !important;
  color: #fbbf24 !important;
  -webkit-text-fill-color: #fbbf24 !important;
  animation: none !important;
}