/* ==========================================================================
   Emdadul Haque Rajib - Portfolio

   Contents
   1.  Tokens (COLOURS + FONTS LIVE HERE: change them first)
   2.  Base, starfield + utilities
   3.  Buttons, pills, dividers
   4.  Hero (nav, heading, head image, bottom bar)
   5.  About (+ corner Adobe tiles)
   6.  Marquee (scroll-driven image rows)
   7.  Services (light section)
   8.  Featured projects (sticky stacking cards)
   9.  Experience + Education
   10. Skills / Software / Interests
   11. Selected Work header + filters (cards/lightbox are in work.css)
   12. Contact
   13. Footer
   14. Reveal on scroll
   15. Responsive
   16. Reduced motion
   ========================================================================== */

/* 1. TOKENS ================================================================ */
:root {
  --bg: #080916;
  --violet: #8B5CF6;          /* main accent */
  --blue: #3B63FF;            /* second accent */
  --violet-soft: #B79CFF;
  --blue-soft: #8FA6FF;
  --text: #F5F4FF;            /* main text */
  --text-2: #BEB9D5;          /* secondary text */
  --muted: #A19CBE;
  --ink: #080916;
  --focus: #B79CFF;

  --grad: linear-gradient(120deg, #8B5CF6 0%, #3B63FF 100%);
  --grad-text: linear-gradient(180deg, #4E4B7A 0%, #CFCBF7 100%);   /* cool, flat heading gradient */
  --border: rgba(190, 185, 213, .18);
  --border-strong: rgba(190, 185, 213, .42);
  --card: #0D0E22;

  --font-display: "Kanit", "Arial Black", "Segoe UI", system-ui, sans-serif;
  --font-body: "Montserrat", "Segoe UI", system-ui, -apple-system, sans-serif;

  --container: 1240px;
  --gutter: clamp(16px, 4vw, 40px);
  --radius: 20px;
  --r-big: 28px;               /* big corner radius: 28 / 40 / 50 / 60 (see responsive) */
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-io: cubic-bezier(.7, 0, .25, 1);
}

/* 2. BASE ================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  color-scheme: dark;
  background: var(--bg);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
@supports (overflow: clip) { body { overflow-x: clip; } }

/* Page background glows (fixed), behind everything. The starfield lives only in the hero. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(60% 50% at 14% 8%, rgba(139, 92, 246, .24), transparent 65%),
    radial-gradient(55% 50% at 92% 36%, rgba(59, 99, 255, .2), transparent 65%),
    radial-gradient(70% 60% at 38% 108%, rgba(139, 92, 246, .18), transparent 65%);
}
.starfield { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }

img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
h1, h2, h3, p { overflow-wrap: break-word; }
strong { font-weight: 600; }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 8px;
}

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 1100;   /* above the fixed top menu */
  padding: 10px 16px; border-radius: 10px;
  background: var(--grad); color: #fff; font-weight: 600; text-decoration: none;
  transition: top .2s;
}
.skip-link:focus { top: 12px; }

.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  position: relative;
  padding-block: clamp(64px, 8vw, 116px);
  scroll-margin-top: 16px;
}

/* Gradient heading text (cool and flat) */
.display, .big-title {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: -.01em;
  margin: 0;
  padding-bottom: .06em;
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.big-title { font-size: clamp(3rem, 12vw, 160px); text-align: center; }
.display { font-size: clamp(2.4rem, 1rem + 6.2vw, 6.5rem); text-wrap: balance; }

.hl { color: var(--violet-soft); font-weight: 600; }
.hl--b { color: var(--blue-soft); }

/* 3. BUTTONS, PILLS, DIVIDERS ============================================== */
.btn {
  --h: 50px;
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: var(--h);
  padding: 0 1.45em;
  border: 0; border-radius: 999px;
  font: 600 1rem/1.1 var(--font-body);
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: transform .35s var(--ease-out), box-shadow .3s, background-color .3s, border-color .3s, color .3s;
}
.btn--lg { --h: 56px; padding: 0 1.7em; font-size: 1.02rem; }
.btn--block { width: 100%; }
.btn__icon { width: 1.15em; height: 1.15em; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--ease-out); }
.btn:hover .btn__icon { transform: translateX(3px); }

.btn--primary {
  background: var(--grad);
  color: #fff;
  box-shadow: 0 10px 30px -8px rgba(139, 92, 246, .6), inset 0 -3px 0 rgba(0, 0, 0, .16);
}
.btn--primary::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .35) 48%, transparent 66%);
  transform: translateX(-120%);
  transition: transform .7s var(--ease-out);
}
.btn--primary:hover::after { transform: translateX(120%); }
.btn--primary:hover { box-shadow: 0 16px 40px -8px rgba(59, 99, 255, .65), inset 0 -3px 0 rgba(0, 0, 0, .16); }

.btn--ghost {
  background: rgba(13, 14, 34, .65);
  color: #fff;
  border: 2px solid rgba(190, 185, 213, .55);
  box-shadow: 0 0 22px rgba(139, 92, 246, .28), inset 0 0 14px rgba(139, 92, 246, .16);
}
.btn--ghost:hover { border-color: #DAD5FF; box-shadow: 0 0 30px rgba(139, 92, 246, .55), inset 0 0 18px rgba(139, 92, 246, .28); }

/* "Contact me" pill (hero + about) */
.cta {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 20px;
  border: 0; border-radius: 999px;
  background: linear-gradient(123deg, #1A0B3D 5%, #8B5CF6 40%, #3B63FF 100%);
  box-shadow: inset 0 0 26px rgba(139, 92, 246, .6), 0 12px 32px -12px rgba(59, 99, 255, .7);
  outline: 2px solid #fff; outline-offset: -3px;
  color: #fff; text-decoration: none; white-space: nowrap;
  font: 600 .75rem/1.2 var(--font-body);
  text-transform: uppercase; letter-spacing: .1em;
  transition: opacity .2s, box-shadow .3s;
}
.cta:hover { opacity: .88; box-shadow: inset 0 0 30px rgba(139, 92, 246, .8), 0 14px 38px -10px rgba(59, 99, 255, .85); }
.cta:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; border-radius: 999px; }

/* Section label pill */
.pill {
  display: inline-flex; align-items: center; gap: .55em;
  margin: 0;
  padding: .5em 1.3em;
  border-radius: 999px;
  background: rgba(13, 14, 34, .75);
  border: 2px solid rgba(139, 92, 246, .7);
  box-shadow: 0 0 20px rgba(139, 92, 246, .35), inset 0 0 14px rgba(59, 99, 255, .2);
  color: #fff;
  font: 700 1rem/1.2 var(--font-display);
  letter-spacing: .06em; text-transform: uppercase;
}
.pill--sm { font-size: .82rem; padding: .45em 1.1em; margin-bottom: 1.1rem; }
.pill--lg { font-size: clamp(1.1rem, 1rem + .5vw, 1.45rem); }

.divider { display: flex; align-items: center; gap: 0; margin-top: clamp(40px, 6vw, 72px); }
.divider svg { width: 22px; height: 22px; fill: #fff; flex: none; filter: drop-shadow(0 0 6px rgba(139, 92, 246, .9)); margin-right: -4px; }
.divider span { flex: 1; height: 2px; background: linear-gradient(90deg, #fff, rgba(190, 185, 213, .5) 60%, rgba(190, 185, 213, .06)); border-radius: 2px; }

/* 4. HERO ================================================================== */
.hero {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  min-height: 100svh;
  display: flex; flex-direction: column;
  overflow: hidden;
}
@supports (overflow: clip) { .hero { overflow: clip; } }

/* Top menu: fixed to the top of the screen. Transparent over the hero; after a little scrolling a
   frosted-glass bar fades in behind it (its bottom edge fades out, so there is no hard line). */
html { scroll-padding-top: var(--nav-h, 64px); }
.hero { padding-top: var(--nav-h, 64px); }
.hnav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;   /* equal gaps between all four items */
  padding: 12px 16px;
}
/* Progressive glass: a strong blur near the top (::before) over a lighter blur that reaches further
   down (::after); both fade out along an eased curve, so the blur thins out smoothly with no edge. */
.hnav::before, .hnav::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; pointer-events: none;
  opacity: 0; transition: opacity .5s ease;
}
.hnav::before {
  bottom: -34px; z-index: -1;
  background: linear-gradient(to bottom, rgba(12, 12, 36, .66) 0%, rgba(12, 12, 36, .42) 55%, rgba(12, 12, 36, .12) 85%, rgba(12, 12, 36, 0) 100%);
  -webkit-backdrop-filter: blur(14px) saturate(1.35); backdrop-filter: blur(14px) saturate(1.35);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 42%, rgba(0, 0, 0, .82) 54%, rgba(0, 0, 0, .58) 66%, rgba(0, 0, 0, .34) 78%, rgba(0, 0, 0, .14) 89%, rgba(0, 0, 0, .04) 95%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 42%, rgba(0, 0, 0, .82) 54%, rgba(0, 0, 0, .58) 66%, rgba(0, 0, 0, .34) 78%, rgba(0, 0, 0, .14) 89%, rgba(0, 0, 0, .04) 95%, transparent 100%);
}
.hnav::after {
  bottom: -72px; z-index: -2;
  -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 38%, rgba(0, 0, 0, .7) 55%, rgba(0, 0, 0, .4) 72%, rgba(0, 0, 0, .15) 87%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 38%, rgba(0, 0, 0, .7) 55%, rgba(0, 0, 0, .4) 72%, rgba(0, 0, 0, .15) 87%, transparent 100%);
}
.hnav.is-scrolled::before, .hnav.is-scrolled::after { opacity: 1; }
/* over the light Services section: dark text on light frosted glass */
.hnav.on-light::before {
  background: linear-gradient(to bottom, rgba(245, 244, 255, .82) 0%, rgba(245, 244, 255, .55) 55%, rgba(245, 244, 255, .15) 85%, rgba(245, 244, 255, 0) 100%);
}
.hnav.on-light .hnav__links a { color: #11122E; }
.hnav__links { display: contents; }   /* links and the button share one evenly spaced row */
.hnav__links a {
  color: var(--text); text-decoration: none;
  text-transform: uppercase; font-weight: 500; letter-spacing: .05em;
  font-size: clamp(.7rem, 3vw, .875rem);
  line-height: 1.2;
  transition: opacity .2s, color .35s ease;
}
.hnav__links a:hover { opacity: .7; }
.hnav .hnav__cta { flex: none; padding: 8px 14px; font-size: .64rem; }

.hero__title { position: relative; z-index: 1; flex: 1; display: flex; align-items: center; justify-content: center; padding: 0 2vw; min-width: 0; }
.hero__h1 {
  width: 100%; margin: 0;
  overflow: hidden;
  text-align: center; white-space: nowrap;
  font-family: var(--font-display); font-weight: 900;
  text-transform: uppercase; letter-spacing: -.025em; line-height: 1;
  font-size: 14vw;
}
.hero__h1-in {
  display: inline-block;
  padding: .04em .02em .08em;
  /* light sweep layer on top of the gradient */
  background: linear-gradient(105deg, transparent 44%, rgba(255, 255, 255, .8) 50%, transparent 56%) no-repeat, var(--grad-text);
  background-size: 300% 100%, 100% 100%;
  background-position: 90% 0, 0 0;
  animation: heroShimmer 7s ease-in-out 2.2s infinite;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* Cartoon head: outer = fixed position, enter = fade-in, float = bob, tilt = mouse follow (JS) */
.hero__head {
  position: absolute; inset: 0; z-index: 3;
  display: flex; justify-content: center; align-items: center;
  pointer-events: none;
}
.hero__float { animation: headFloat 6s ease-in-out infinite; }
.hero__tilt { transform: perspective(900px); will-change: transform; }
.hero__tilt img { display: block; width: 300px; max-width: none; height: auto; }@keyframes headFloat { 0%, 100% { transform: translateY(6px); } 50% { transform: translateY(-6px); } }

@keyframes heroShimmer { 0% { background-position: 90% 0, 0 0; } 30%, 100% { background-position: 10% 0, 0 0; } }

/* Glow behind the head: pulses, follows the mouse on desktop (JS sets `translate`), drifts on touch */
.hero__glow {
  --s: min(72vw, 780px);
  position: absolute; z-index: 0; left: 50%; top: 60%;
  width: var(--s); height: var(--s); margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(139, 92, 246, .45), rgba(59, 99, 255, .2) 55%, transparent 100%);
  animation: glowPulse 7s ease-in-out infinite;
}
@keyframes glowPulse { 0%, 100% { transform: scale(1); opacity: .7; } 50% { transform: scale(1.14); opacity: 1; } }
@keyframes glowDrift { 0%, 100% { translate: -50px 10px; } 50% { translate: 50px -40px; } }
@media (hover: none) { .hero__glow { animation: glowPulse 7s ease-in-out infinite, glowDrift 13s ease-in-out infinite; } }
.hero__title, .hero__head { will-change: transform; }

/* Phones: name near the top, head in the space below it so the name stays readable */
@media (max-width: 639px) {
  .hero__title { flex: 0 0 auto; padding-top: 10svh; }
  .hero__head { position: relative; inset: auto; flex: 1; margin-top: -3vw; padding-bottom: 8svh; }
}

.hero__bar {
  position: relative; z-index: 5;
  display: flex; justify-content: space-between; align-items: flex-end; gap: 12px;
  padding: 0 24px 28px;
}
.hero__lead {
  margin: 0; min-width: 0; max-width: 160px;
  font: 300 clamp(.75rem, 1.4vw, 1.5rem)/1.4 var(--font-body);
  text-transform: uppercase; letter-spacing: .025em;
  color: var(--text-2);
}
.hero__bar .cta { flex: none; }

/* Entrance fade-ins: only when JS is running (class "js" on <html>) */
.js .hero [data-a], .js .hnav[data-a] { animation: heroIn .9s var(--ease-out) var(--d, 0s) backwards; }
@keyframes heroIn { from { opacity: 0; transform: translateY(var(--y, 20px)); } }

/* 5. ABOUT ================================================================= */
.about {
  min-height: 100vh;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  padding-block: clamp(104px, 14vw, 190px);
  overflow: hidden;
}
@supports (overflow: clip) { .about { overflow: clip; } }
.about__inner { width: 100%; max-width: 980px; margin-inline: auto; padding-inline: var(--gutter); display: flex; flex-direction: column; align-items: center; text-align: center; }

.about__intro {
  margin: clamp(24px, 4vw, 44px) auto 0; max-width: 640px;
  font: 500 clamp(1rem, 2vw, 1.35rem)/1.6 var(--font-body);
  color: var(--text);
}
.about__intro.is-words .w { opacity: .2; }

.about__more { margin-top: clamp(32px, 5vw, 64px); text-align: left; }

/* ---------- Galaxy orbit around the 3D character ----------
   .galaxy        centre point (chest height), the whole disk turned a little diagonal
   .galaxy__plane the disk, tilted back 72deg so it is seen from slightly above
   .galaxy__spin  turns the icons around the centre; each face spins back so the icon stays upright
   The radius follows the character's width (cqi), so the orbit scales on every screen. */
.galaxy {
  /* centred at shoulder height; with the slight tilt the icons cross from behind to the front beside
     the head on the left and outside the shoulder on the right, so they never cut through the character */
  --r: 54cqi; --ts: 40px;
  position: absolute; left: 50%; top: 53%; width: 0; height: 0;
  transform-style: preserve-3d; transform: rotate(-10deg);
  pointer-events: none;
}
@media (min-width: 768px) { .galaxy { --ts: 46px; } }
/* phones: character + galaxy smaller, no outer dashed ring and a narrower star band,
   so every ring stays inside the screen */
@media (max-width: 639px) {
  .about__inner .about__char { width: min(280px, 70vw); }
  .galaxy { --ts: 34px; }
  .galaxy__path--outer { display: none; }
  .galaxy__stars { width: calc(var(--r) * 2.3); height: calc(var(--r) * 2.3); margin: calc(var(--r) * -1.15) 0 0 calc(var(--r) * -1.15); }
}
.galaxy__plane, .galaxy__spin, .galaxy__item { position: absolute; left: 0; top: 0; transform-style: preserve-3d; }
.galaxy__plane { transform: rotateX(72deg); }
.galaxy__spin { animation: galaxySpin 24s linear infinite; }
.galaxy__item { transform: rotateZ(var(--a)) translateX(var(--r)); }
.galaxy__face {
  width: var(--ts); height: var(--ts); margin: calc(var(--ts) / -2) 0 0 calc(var(--ts) / -2);
  transform-style: preserve-3d;
  animation: galaxyFace 24s linear infinite;
}
.galaxy__path {                              /* glowing orbit ring */
  position: absolute; width: calc(var(--r) * 2); height: calc(var(--r) * 2);
  margin: calc(var(--r) * -1) 0 0 calc(var(--r) * -1); border-radius: 50%;
  border: 1.5px solid rgba(170, 150, 255, .5);
  box-shadow: 0 0 22px rgba(139, 92, 246, .5), inset 0 0 22px rgba(59, 99, 255, .35);
}
.galaxy__path--outer {                       /* faint dashed outer ring */
  width: calc(var(--r) * 2.5); height: calc(var(--r) * 2.5); margin: calc(var(--r) * -1.25) 0 0 calc(var(--r) * -1.25);
  border: 1px dashed rgba(170, 150, 255, .25); box-shadow: none;
  animation: galaxySpin 60s linear infinite reverse;
}
.galaxy__stars {                             /* a band of tiny stars along the orbit; empty in the middle */
  position: absolute; width: calc(var(--r) * 2.8); height: calc(var(--r) * 2.8);
  margin: calc(var(--r) * -1.4) 0 0 calc(var(--r) * -1.4); border-radius: 50%;
  -webkit-mask-image: radial-gradient(circle, transparent 0 48%, #000 60%, #000 82%, transparent 98%);
  mask-image: radial-gradient(circle, transparent 0 48%, #000 60%, #000 82%, transparent 98%);
  animation: galaxySpin 40s linear infinite;
}
.galaxy__stars::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background-image:
    radial-gradient(1.6px 1.6px at 22% 30%, #fff, transparent), radial-gradient(1.2px 1.2px at 70% 22%, #cbb8ff, transparent),
    radial-gradient(1.6px 1.6px at 80% 62%, #fff, transparent), radial-gradient(1.2px 1.2px at 34% 74%, #a9bcff, transparent),
    radial-gradient(1px 1px at 56% 44%, #fff, transparent), radial-gradient(1.3px 1.3px at 14% 56%, #cbb8ff, transparent),
    radial-gradient(1.2px 1.2px at 64% 84%, #fff, transparent), radial-gradient(1.5px 1.5px at 44% 14%, #a9bcff, transparent),
    radial-gradient(1.2px 1.2px at 88% 40%, #fff, transparent), radial-gradient(1.3px 1.3px at 28% 88%, #fff, transparent),
    radial-gradient(1px 1px at 50% 66%, #cbb8ff, transparent), radial-gradient(1.4px 1.4px at 74% 74%, #fff, transparent);
}
@keyframes galaxySpin { to { transform: rotateZ(360deg); } }
@keyframes galaxyFace {
  from { transform: rotateZ(calc(var(--a) * -1)) rotateX(-72deg) rotate(10deg); }
  to   { transform: rotateZ(calc(var(--a) * -1 - 360deg)) rotateX(-72deg) rotate(10deg); }
}

/* Solid 3D icon block: front face (b) + 12 layers behind it (i) that form the thick, lit sides.
   The block tumbles on its own axis so the thickness catches the light. */
.cube {
  position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d;
  animation: cubeTumble 5s ease-in-out infinite alternate;
}
.galaxy__item:nth-child(2) .cube { animation-delay: -1.25s; }
.galaxy__item:nth-child(3) .cube { animation-delay: -2.5s; }
.galaxy__item:nth-child(4) .cube { animation-delay: -3.75s; }
.cube > i, .cube > b { position: absolute; inset: 0; border-radius: 24%; backface-visibility: visible; }
.cube > i {
  --k: 0;
  background: var(--side, var(--edge));
  background: color-mix(in srgb, var(--fg) calc(58% - var(--k) * 3.2%), #04040f);
  transform: translateZ(calc(var(--k) * -1.4px - 1.4px));
}
.cube > i:nth-child(2)  { --k: 1; }  .cube > i:nth-child(3)  { --k: 2; }  .cube > i:nth-child(4)  { --k: 3; }
.cube > i:nth-child(5)  { --k: 4; }  .cube > i:nth-child(6)  { --k: 5; }  .cube > i:nth-child(7)  { --k: 6; }
.cube > i:nth-child(8)  { --k: 7; }  .cube > i:nth-child(9)  { --k: 8; }  .cube > i:nth-child(10) { --k: 9; }
.cube > i:nth-child(11) { --k: 10; } .cube > i:nth-child(12) { --k: 11; box-shadow: 0 14px 26px rgba(0, 0, 0, .55), 0 0 26px var(--gl); }
.cube > b {
  display: grid; place-items: center;
  font: 700 calc(var(--ts) * .4)/1 var(--font-body); color: var(--fg);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .32) 0%, rgba(255, 255, 255, .06) 38%, transparent 55%),
    var(--tb);
  border: 1.5px solid color-mix(in srgb, var(--fg) 70%, transparent);
  box-shadow: inset 0 0 14px var(--gl), inset 0 -6px 12px rgba(0, 0, 0, .35);
  text-shadow: 0 0 12px var(--gl);
  transform: translateZ(0.5px);
}
@keyframes cubeTumble {
  from { transform: rotateY(-38deg) rotateX(20deg) rotateZ(-4deg); }
  to   { transform: rotateY(38deg) rotateX(-14deg) rotateZ(4deg); }
}
/* the ring spins; each tile spins back so it keeps facing the viewer, and wobbles in 3D (tileFloat) */

.about__text p { margin: 0 0 1em; color: var(--text-2); font-size: clamp(.95rem, .9rem + .2vw, 1.05rem); }
.about__cta { display: inline-flex; margin-top: clamp(16px, 2.4vw, 28px); }
/* phones and tablets: button centred; desktop: lined up with the bio's left edge */
@media (max-width: 1199px) {
  .about__text { text-align: center; max-width: 640px; margin-inline: auto; }   /* bio centred on phones/tablets */
  .about__cta { display: flex; width: fit-content; margin-inline: auto; }
}

/* 3D character with a frosted-glass fade at the bottom.
   Phones/tablets: centred under the intro. Wide screens: large on the right (see min-width: 1200px). */
.about__char {
  position: relative; margin: clamp(28px, 5vw, 48px) auto 0;
  width: min(420px, 90%); pointer-events: none;
  perspective: 1400px; container-type: inline-size;   /* 3D space + size reference for the galaxy */
}
.about__char::before {                     /* soft blue-violet back light, no edges */
  content: ""; position: absolute; z-index: -1; inset: 4% -14% 22% -14%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(59, 99, 255, .32), rgba(139, 92, 246, .16) 55%, transparent);
}
.about__char img { display: block; width: 100%; height: auto; }
/* Scroll entrance: rises in from the lower right; then a slow, weightless float */
.js .about__char.reveal {
  opacity: 0; transform: translate3d(70px, 60px, 0) scale(.92);
  transition: opacity 1.1s ease, transform 1.6s cubic-bezier(.16, .84, .24, 1);
}
.js .about__char.reveal.is-in { opacity: 1; transform: none; }
.about__char-float { position: relative; transform-style: preserve-3d; animation: charFloat 7s ease-in-out infinite; will-change: transform; }
@keyframes charFloat {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50%      { transform: translate3d(0, -16px, 0) rotate(-.8deg); }
}
@media (prefers-reduced-motion: reduce) { .about__char-float { animation: none; } }
.about__char-img {
  /* only the lowest ~20% (waist and lower arms) fades out to transparent, so the section's own
     background shows through: no added colour, no dark band */
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 80%, rgba(0, 0, 0, .55) 90%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0, #000 80%, rgba(0, 0, 0, .55) 90%, transparent 100%);
}
.about__char::after {
  /* frosted glass: blur only (no fill colour) over the bottom ~20%, faded in from the top and at the
     sides so there is never a panel edge */
  content: ""; position: absolute; left: -6%; right: -6%; bottom: 0; height: 21%;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 50%), linear-gradient(to right, transparent 0, #000 16%, #000 84%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, transparent 0, #000 50%), linear-gradient(to right, transparent 0, #000 16%, #000 84%, transparent 100%);
  mask-composite: intersect;
}

/* Wide screens: intro, photo + bio and button on the left, big character on the right */
@media (min-width: 1200px) {
  .about__inner {
    max-width: 1320px;
    display: grid; align-items: start; column-gap: clamp(40px, 4vw, 72px);
    grid-template-columns: minmax(0, 1fr) clamp(440px, 42%, 620px);
  }
  .about__inner > .big-title { grid-column: 1 / -1; }
  .about__intro, .about__more { grid-column: 1; }
  /* desktop: intro and bio pushed to the left side */
  .about__intro { margin-left: 0; text-align: left; }
  .about__text { max-width: 600px; }
  .about__char { grid-column: 2; grid-row: 2 / span 2; align-self: end; width: 100%; margin: 0; }
}

/* Decorative 3D Adobe tiles in the four corners (slide in from the sides) */
.ctile {
  --ts: clamp(60px, 8vw, 120px);
  position: absolute; z-index: 0; pointer-events: none;
  width: var(--ts); height: var(--ts);
  --ry: -24deg;
}
.ctile--tl { left: clamp(12px, 3vw, 48px); top: clamp(16px, 3vw, 48px); --sx: -90px; }
.ctile--bl { left: clamp(12px, 3vw, 48px); bottom: clamp(16px, 3vw, 48px); --sx: -90px; }
.ctile--tr { right: clamp(12px, 3vw, 48px); top: clamp(16px, 3vw, 48px); --sx: 90px; --ry: 24deg; }
.ctile--br { right: clamp(12px, 3vw, 48px); bottom: clamp(16px, 3vw, 48px); --sx: 90px; --ry: 24deg; }
.js .ctile { opacity: 0; transform: translateX(var(--sx)); transition: opacity .9s ease, transform 1s var(--ease-out); }
.js .ctile.is-in { opacity: 1; transform: none; }
.ctile__box {
  width: 100%; height: 100%;
  display: grid; place-items: center;
  border-radius: 22%;
  font: 700 clamp(22px, 3vw, 44px)/1 var(--font-body);
  color: var(--fg);
  background: radial-gradient(120% 90% at 28% 12%, rgba(255, 255, 255, .2), transparent 52%), var(--tb);
  border: 2px solid var(--fg);
  box-shadow: 1px 1px 0 var(--edge), 2px 2px 0 var(--edge), 3px 3px 0 var(--edge), 4px 4px 0 var(--edge), 5px 5px 0 var(--edge), 6px 6px 0 var(--edge), 0 22px 30px rgba(0, 0, 0, .5), 0 0 34px var(--gl);
  transform: perspective(500px) rotateX(16deg) rotateY(var(--ry)) rotateZ(-5deg);
  animation: tileFloat 7s ease-in-out infinite alternate;
}
.ctile--bl .ctile__box, .ctile--br .ctile__box { animation-delay: -3.5s; }
@keyframes tileFloat { to { transform: perspective(500px) rotateX(8deg) rotateY(calc(var(--ry) * .5)) rotateZ(-2deg) translateY(-8px); } }

/* Adobe brand colours (kept) */
.t--ae { --fg: #9999FF; --tb: #00005B; --edge: #000032; --gl: rgba(153, 153, 255, .4); }
.t--ps { --fg: #31A8FF; --tb: #001E36; --edge: #00101e; --gl: rgba(49, 168, 255, .4); }
.t--pr { --fg: #EA77FF; --tb: #1F0046; --edge: #11002a; --gl: rgba(234, 119, 255, .38); }
.t--ai { --fg: #FF9A00; --tb: #330000; --edge: #1c0000; --gl: rgba(255, 154, 0, .38); }

/* 6. MARQUEE =============================================================== */
.marquee { position: relative; overflow: hidden; padding-block: clamp(24px, 4vw, 56px); display: grid; gap: 12px; }
@supports (overflow: clip) { .marquee { overflow: clip; } }
.marquee__row { display: flex; gap: 12px; width: max-content; will-change: transform; }
.marquee__row img {
  flex: none; display: block;
  width: 260px; height: 168px;
  border-radius: 16px; object-fit: cover;
  background: #0D0E22;
}

/* 7. SERVICES ============================================================== */
.services {
  position: relative; z-index: 1;
  background: #F5F4FF; color: #080916;
  border-radius: 40px 40px 0 0;
  padding: clamp(72px, 9vw, 130px) 0 calc(clamp(72px, 9vw, 130px) + 60px);
}
.services .big-title { background: linear-gradient(180deg, #080916 0%, #4E4B7A 100%); -webkit-background-clip: text; background-clip: text; }
.svc { list-style: none; margin: clamp(40px, 6vw, 88px) 0 0; padding: 0; }
.svc__item {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px 28px;
  padding: clamp(22px, 3vw, 40px) 0;
  border-top: 1px solid rgba(8, 9, 22, .18);
}
.svc__item:last-child { border-bottom: 1px solid rgba(8, 9, 22, .18); }
.svc__num {
  font: 900 clamp(3rem, 10vw, 140px)/1 var(--font-display);
  padding-bottom: .06em;
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.svc__name { margin: 0; font: 700 clamp(1rem, 2.2vw, 2.1rem)/1.2 var(--font-display); text-transform: uppercase; letter-spacing: .01em; }
.svc__desc { margin: 0; font: 300 clamp(.95rem, 1.3vw, 1.15rem)/1.6 var(--font-body); opacity: .65; max-width: 34rem; }

/* 8. FEATURED PROJECTS ===================================================== */
.projects {
  position: relative; z-index: 2;
  margin-top: -60px;
  border-radius: 40px 40px 0 0;
  background: linear-gradient(180deg, #0B0C25 0%, #080916 45%);
  border-top: 1px solid rgba(190, 185, 213, .14);
  padding: clamp(64px, 8vw, 120px) 0 clamp(40px, 6vw, 80px);
}
.projects__list { margin-top: clamp(32px, 5vw, 72px); --card-h: min(620px, calc(100svh - 190px)); --top: 96px; }
.stack__item { position: relative; height: max(85vh, calc(var(--card-h) + 40px)); }
.pcard {
  position: sticky; top: calc(var(--top) + var(--i) * 28px);
  height: var(--card-h);
  display: flex; flex-direction: column; gap: 14px;
  padding: 16px;
  border: 2px solid rgba(190, 185, 213, .6);
  border-radius: var(--r-big);
  background: var(--card);
  transform-origin: 50% 0;
  will-change: transform;
}
.pcard__top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 4px 6px 0; }
.pcard__num { font: 900 clamp(2.4rem, 6vw, 5rem)/1 var(--font-display); padding-bottom: .06em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.pcard__meta { flex: 1 1 180px; min-width: 0; }
.pcard__cat { margin: 0 0 .15em; color: var(--blue-soft); font: 600 .75rem/1.2 var(--font-body); letter-spacing: .14em; text-transform: uppercase; }
.pcard__name { margin: 0; font: 700 clamp(1.05rem, 2.2vw, 2rem)/1.15 var(--font-display); color: var(--text); }
.pcard__btn {
  margin-left: auto; flex: none;
  display: inline-flex; align-items: center; gap: .5em;
  padding: .7em 1.4em; border-radius: 999px;
  border: 2px solid rgba(190, 185, 213, .6);
  color: #fff; text-decoration: none;
  font: 600 .8rem/1.2 var(--font-body); letter-spacing: .08em; text-transform: uppercase;
  transition: background .3s, border-color .3s, box-shadow .3s;
}
.pcard__btn:hover { background: var(--grad); border-color: transparent; box-shadow: 0 8px 26px -8px rgba(139, 92, 246, .8); }
.pcard__media { flex: 1; min-height: 0; display: grid; grid-template-columns: 40fr 60fr; gap: 10px; }
.pcard__col { display: grid; grid-template-rows: 1fr 1fr; gap: 10px; min-height: 0; }
.pimg { position: relative; overflow: hidden; min-height: 0; border-radius: calc(var(--r-big) - 6px); background: #14153A; }
.pimg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* 9. EXPERIENCE + EDUCATION ================================================ */
.journey__row { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 28px clamp(28px, 4vw, 64px); }
.journey__row + .journey__row { margin-top: clamp(56px, 7vw, 96px); }
.journey__label { position: relative; }
.journey__label .pill { position: sticky; top: 28px; }

.timeline { list-style: none; margin: 0; padding: 0 0 0 34px; position: relative; }
.timeline::before {
  content: ""; position: absolute; left: 8px; top: 14px; bottom: 30px; width: 2px;
  background: linear-gradient(180deg, var(--violet), var(--blue) 60%, rgba(59, 99, 255, 0));
  box-shadow: 0 0 12px rgba(139, 92, 246, .6);
}
.tl-item { position: relative; padding-bottom: 26px; }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before {
  content: ""; position: absolute; left: -34px; top: 26px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--bg);
  border: 3px solid var(--violet-soft);
  box-shadow: 0 0 0 5px rgba(139, 92, 246, .16), 0 0 18px rgba(139, 92, 246, .85);
}
.tl-item:first-child::before { border-color: var(--blue-soft); box-shadow: 0 0 0 5px rgba(59, 99, 255, .18), 0 0 18px rgba(59, 99, 255, .8); }

.tl-card, .edu-card {
  position: relative;
  padding: clamp(20px, 2.6vw, 30px);
  border-radius: var(--radius);
  background: linear-gradient(160deg, rgba(25, 22, 62, .6), rgba(13, 14, 34, .6));
  border: 1px solid var(--border);
  transition: border-color .3s, box-shadow .3s, transform .4s var(--ease-out);
}
.tl-card:hover, .edu-card:hover { border-color: rgba(190, 185, 213, .4); box-shadow: 0 0 34px rgba(139, 92, 246, .18); transform: translateY(-2px); }
.tl-card__head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: .45em; }
.tl-card__title { margin: 0; font: 700 clamp(1.12rem, 1rem + .5vw, 1.42rem)/1.3 var(--font-display); color: #fff; }
.tl-card__title a { text-decoration: underline; text-decoration-color: rgba(139, 92, 246, .8); text-underline-offset: 4px; }
.tl-card__title a:hover { color: var(--violet-soft); }
.badge-now {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  background: rgba(139, 92, 246, .14); border: 1px solid rgba(139, 92, 246, .55);
  color: var(--violet-soft); font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
}
.badge-now::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--blue-soft); box-shadow: 0 0 8px var(--blue); animation: pulse 1.8s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .35; } }

.date { display: flex; align-items: center; gap: .55em; margin: 0 0 1em; color: var(--text-2); font-weight: 500; }
.date svg { width: 18px; height: 18px; fill: none; stroke: var(--violet-soft); stroke-width: 1.8; stroke-linecap: round; flex: none; }

.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: .5em; }
.ticks li { position: relative; padding-left: 1.3em; color: var(--text-2); }
.ticks li::before {
  content: ""; position: absolute; left: .1em; top: .62em;
  width: 7px; height: 7px; border-radius: 1.5px;
  background: var(--violet-soft); transform: rotate(45deg);
  box-shadow: 0 0 6px rgba(139, 92, 246, .8);
}

.edu-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.edu-card__school { margin: 0 0 .4em; font: 700 clamp(1.05rem, 1rem + .35vw, 1.25rem)/1.35 var(--font-display); color: #fff; }
.edu-card__cert { margin: 0 0 .9em; color: var(--text-2); }
.edu-card .date { margin: 0; }

/* 10. SKILLS / SOFTWARE / INTERESTS ======================================== */
.skills__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, .85fr);
  gap: clamp(36px, 4vw, 56px);
  align-items: start;
}
.chips { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  display: inline-flex; align-items: center; gap: .55em;
  padding: .55em 1.05em;
  border-radius: 999px;
  background: rgba(19, 18, 52, .7);
  border: 1px solid var(--border);
  color: #EAE7FB; font-weight: 500; font-size: .93rem; line-height: 1.3;
  transition: border-color .25s, box-shadow .25s, transform .3s var(--ease-out), color .25s;
}
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 1.5px; background: var(--violet-soft); transform: rotate(45deg); flex: none; }
.chip:hover { border-color: rgba(190, 185, 213, .6); box-shadow: 0 0 18px rgba(139, 92, 246, .35); transform: translateY(-2px); color: #fff; }
.chips--interests .chip::before { background: var(--blue-soft); }

.apps { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 14px; }
.app {
  display: flex; align-items: center; gap: 16px;
  padding: 12px 16px 12px 12px;
  border-radius: 18px;
  background: rgba(13, 14, 34, .7);
  border: 1px solid var(--border);
  transition: border-color .3s, box-shadow .3s;
}
.app:hover { border-color: rgba(190, 185, 213, .4); box-shadow: 0 0 26px rgba(139, 92, 246, .2); }
.app__name { font-weight: 600; color: #fff; }
.app-tile {
  --edge: #000;
  flex: none;
  width: 58px; height: 58px; border-radius: 15px;
  display: grid; place-items: center;
  font: 700 23px/1 var(--font-body);
  color: var(--fg);
  background: radial-gradient(120% 90% at 28% 12%, rgba(255, 255, 255, .18), transparent 52%), var(--tb);
  border: 2px solid var(--fg);
  box-shadow: 0 1px 0 var(--edge), 0 2px 0 var(--edge), 0 3px 0 var(--edge), 0 4px 0 var(--edge), 0 5px 0 var(--edge), 0 12px 20px rgba(0, 0, 0, .55), 0 0 22px var(--gl);
  transform: perspective(300px) rotateX(16deg) translateY(-3px);
  transition: transform .45s var(--ease-out);
}
.app:hover .app-tile { transform: perspective(300px) rotateX(0) rotateY(-14deg) translateY(-6px); }

/* 11. SELECTED WORK HEADER + FILTERS ======================================= */
.work__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 40px; margin-bottom: 26px; }
.work__head .display { font-size: clamp(2.4rem, 1rem + 5vw, 5.5rem); }
.work__intro { max-width: 30rem; margin: 0 0 .6em; color: var(--text-2); }

.filters { display: flex; gap: 10px; margin-bottom: 30px; overflow-x: auto; padding: 4px 2px 10px; scrollbar-width: thin; }
.filter {
  flex: none;
  padding: .62em 1.15em;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(19, 18, 52, .7);
  color: var(--text-2);
  font: 500 .9rem/1.2 var(--font-body);
  cursor: pointer;
  transition: color .25s, border-color .25s, background-color .25s, box-shadow .25s;
}
.filter:hover { color: #fff; border-color: rgba(190, 185, 213, .5); }
.filter[aria-pressed="true"] { color: #fff; background: var(--grad); border-color: transparent; box-shadow: 0 6px 22px -6px rgba(139, 92, 246, .7); }

/* 12. CONTACT ============================================================== */
.contact { padding-bottom: clamp(56px, 7vw, 96px); }
.contact__panel {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(32px, 5vw, 72px);
  padding: clamp(28px, 5vw, 64px);
  border-radius: 32px;
  background: linear-gradient(160deg, rgba(25, 22, 62, .85), rgba(8, 9, 22, .92));
  border: 1px solid rgba(190, 185, 213, .26);
  box-shadow: 0 40px 120px -40px rgba(139, 92, 246, .6);
  overflow: hidden;
}
.contact__glow {
  position: absolute; z-index: -1; pointer-events: none;
  width: 900px; height: 600px; left: 50%; bottom: -380px; margin-left: -450px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(139, 92, 246, .5), rgba(59, 99, 255, .22) 55%, transparent);
}
.display--contact {
  font-size: clamp(2rem, 1.2rem + 2.8vw, 3.6rem); line-height: 1.05;
  margin: 0 0 .55em;
  background: none; color: var(--text); -webkit-text-fill-color: currentColor;
}
.display--contact .hl {
  display: block; font-weight: 900;
  background: var(--grad); -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.contact__lead { color: var(--text-2); margin: 0 0 1.6rem; max-width: 34rem; }
.contact__mail { max-width: 100%; overflow-wrap: anywhere; }
.contact__meta { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; gap: 10px; }
.contact__meta li { display: flex; align-items: center; gap: 10px; color: var(--text-2); }
.contact__meta svg { width: 20px; height: 20px; fill: none; stroke: var(--violet-soft); stroke-width: 1.8; stroke-linejoin: round; flex: none; }
.contact__meta a { text-decoration: none; }
.contact__meta a:hover { color: #fff; text-decoration: underline; }

.contact__side { display: grid; gap: 22px; align-content: start; }
.contact-form { display: grid; gap: 14px; padding: 22px; border-radius: 22px; background: rgba(8, 9, 22, .5); border: 1px solid var(--border); }
.field { display: grid; gap: 6px; }
.field label { font-size: .85rem; font-weight: 600; color: #fff; }
.field input, .field textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(190, 185, 213, .3);
  background: rgba(13, 14, 34, .85);
  color: #fff;
  font: 500 1rem/1.4 var(--font-body);
  resize: vertical;
  transition: border-color .25s, box-shadow .25s;
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--violet-soft); box-shadow: 0 0 0 3px rgba(139, 92, 246, .32); }

.socials { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.soc {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 12px;
  border-radius: 14px;
  background: rgba(13, 14, 34, .75);
  border: 1px solid var(--border);
  color: var(--text-2); text-decoration: none; font-weight: 500; font-size: .88rem;
  transition: color .25s, border-color .25s, box-shadow .25s, transform .3s var(--ease-out);
}
.soc svg { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.soc:hover { color: #fff; border-color: rgba(190, 185, 213, .55); box-shadow: 0 0 20px rgba(139, 92, 246, .35); transform: translateY(-2px); }

/* 13. FOOTER =============================================================== */
.site-footer { position: relative; isolation: isolate; overflow: hidden; padding: 20px 0 32px; }
.footer__glow {
  position: absolute; z-index: -1; left: 50%; bottom: -420px; margin-left: -700px;
  width: 1400px; height: 700px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(139, 92, 246, .5), rgba(59, 99, 255, .24) 45%, transparent);
}
.divider--footer { margin-top: 0; }
.footer__big {
  margin: clamp(20px, 4vw, 40px) 0 0;
  font: 900 clamp(4rem, 2rem + 13vw, 15rem)/.9 var(--font-display);
  text-transform: uppercase; letter-spacing: -.02em; text-align: center;
  background: linear-gradient(180deg, rgba(207, 203, 247, .36), rgba(139, 92, 246, .1) 60%, rgba(139, 92, 246, 0) 95%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  user-select: none;
}
.footer__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-top: 18px; }
.footer__copy { margin: 0; color: var(--muted); font-size: .9rem; }
.footer__top { color: #fff; font-weight: 600; text-decoration: none; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border-strong); }
.footer__top:hover { background: rgba(139, 92, 246, .2); }

/* 14. REVEAL ON SCROLL (only hidden when JS is running) ==================== */
.js .reveal { opacity: 0; transform: translate3d(0, 26px, 0); transition: opacity .8s ease, transform .9s var(--ease-out); }
.js .reveal.is-in { opacity: 1; transform: none; }

/* 15. RESPONSIVE =========================================================== */
@media (min-width: 640px) {
  :root { --r-big: 40px; }
  .hero__h1 { font-size: 15vw; }
  /* name near the top, bigger head lifted off the bottom edge.
     --head-fit caps the head so its top stays below the name on any screen shape
     (the name's height grows with the width, the head's room with the height). */
  .hero { --head-fit: calc(99svh - 17.2vw - 63px); }
  .hero__title { align-items: flex-start; padding-top: clamp(8px, 2vh, 28px); }
  .hero__head { align-items: flex-end; padding-bottom: clamp(6px, 4vh, 44px); }
  .hero__tilt img { width: min(400px, 56svh, var(--head-fit)); }
  .hero__lead { max-width: 220px; }
  .marquee__row img { width: 420px; height: 270px; }
  .pcard { padding: 24px; }
  .services { border-radius: 50px 50px 0 0; }
  .projects { border-radius: 50px 50px 0 0; }
}
@media (min-width: 768px) {
  :root { --r-big: 50px; }
  .hero__h1 { font-size: 16vw; }
  .hnav { padding: 16px 40px; }
  .hnav__links a { font-size: 1.125rem; }
  .hnav .hnav__cta { padding: 11px 26px; font-size: .8rem; }
  .hero__bar { padding: 0 40px 40px; }
  .hero__lead { max-width: 300px; }
  .hero__tilt img { width: min(500px, 62svh, var(--head-fit)); }
  .cta { padding: 14px 40px; font-size: .9rem; }
  .services { border-radius: 60px 60px 0 0; }
  .projects { border-radius: 60px 60px 0 0; --top: 128px; }
  .svc__item { grid-template-columns: clamp(110px, 22vw, 280px) minmax(0, 1fr) minmax(0, 1.2fr); align-items: center; }
  .pcard { padding: 32px; }
  .projects__list { --top: 128px; --card-h: min(640px, calc(100svh - 230px)); }
}
@media (min-width: 1024px) {
  :root { --r-big: 60px; }
  .hero__h1 { font-size: 17.5vw; }
  .hnav__links a { font-size: 1.3rem; }
  .hero__tilt img { width: min(600px, 68svh, var(--head-fit)); }
}

@media (max-width: 1100px) {
  .skills__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .skills__col:first-child { grid-column: 1 / -1; }
}

@media (max-width: 899px) {
  .journey__row { grid-template-columns: minmax(0, 1fr); }
  .journey__label .pill { position: static; }
  .contact__panel { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
  .about__more { grid-template-columns: minmax(0, 1fr); }
  .about__media { max-width: 280px; }
}

@media (max-width: 639px) {
  .pimg { border-radius: 18px; }
  .pcard { border-radius: 28px; }
  .skills__grid { grid-template-columns: minmax(0, 1fr); }
  .edu-grid { grid-template-columns: minmax(0, 1fr); }
  .timeline { padding-left: 28px; }
  .tl-item::before { left: -28px; width: 16px; height: 16px; }
  .timeline::before { left: 7px; }
  .socials { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact__panel { border-radius: 24px; }
  .contact-form { padding: 16px; }
  .footer__row { justify-content: center; text-align: center; }
  .btn--lg { padding: 0 1.15em; font-size: .98rem; }
}

/* 16. REDUCED MOTION ======================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: .01ms !important;
  }
  .hero__float, .hero__h1-in, .hero__glow { animation: none !important; }
  .js .hero [data-a], .js .hnav[data-a] { animation: none !important; }
  .js .reveal, .js .ctile { opacity: 1; transform: none; }
  .ctile__box, .galaxy__spin, .galaxy__face, .galaxy__stars, .galaxy__path--outer { animation: none !important; }
  .galaxy__face { transform: rotateZ(calc(var(--a) * -1)) rotateX(-72deg) rotate(10deg); }
  .cube { animation: none !important; transform: rotateY(-24deg) rotateX(14deg); }
}

/* High-contrast mode: show gradient-filled text as plain text */
@media (forced-colors: active) {
  .display, .big-title, .hero__h1-in, .svc__num, .pcard__num, .footer__big, .display--contact .hl { -webkit-text-fill-color: currentColor; background: none; }
}