:root { color-scheme: dark; font-family: 'Inter', sans-serif; background: #050309; color: #f9f4ff; }
* { box-sizing: border-box; }
body { margin: 0; }
button, a { -webkit-tap-highlight-color: transparent; }
.hero { position: relative; isolation: isolate; min-height: 640px; height: 100svh; overflow: hidden; background: #050309; }
.masthead { position:absolute; z-index:2; inset:0 0 auto; padding:30px 4%; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:24px; }
.wordmark { justify-self:start; color:inherit; text-decoration:none; font-size:29px; font-weight:800; letter-spacing:-1.7px; transition:letter-spacing .25s, color .25s, transform .2s; }
.wordmark:hover { letter-spacing:-1px; color:#e0c9ff; }
.wordmark:active { transform:scale(.96); }
.signature, .eyebrow { font-size:10px; letter-spacing:2px; }
.main-nav { display:flex; align-items:center; gap:clamp(20px,3.4vw,55px); }
.nav-link, .contact-cta { font-family:'Inter',sans-serif; font-stretch:condensed; font-size:clamp(15px,1.8vw,24px); font-weight:400; text-transform:uppercase; letter-spacing:.02em; color:#faf7ff; cursor:pointer; }
.nav-link { position:relative; border:0; background:transparent; padding:12px 3px; min-height:44px; transition:color .25s,transform .2s; }
.nav-link span { display:inline-block; transition:transform .3s cubic-bezier(.2,.8,.2,1),letter-spacing .3s; }
.nav-link::after { content:''; position:absolute; bottom:5px; height:1px; left:3px; right:3px; background:#cda8ff; transform:scaleX(0); transition:transform .3s; }
.nav-link:hover { color:#dec7ff; }
.nav-about::after { transform-origin:left; }
.nav-about:hover::after, .nav-link[aria-pressed="true"]::after { transform:scaleX(1); }
.nav-about:active span { transform:translateY(2px); }
.nav-work:hover span { transform:translateY(-3px); letter-spacing:.08em; }
.nav-work:hover::after { transform:scaleX(.55); }
.nav-work:active span { transform:translateY(1px) scale(.94); }
.nav-play:hover span { transform:rotate(-6deg) scale(1.06); }
.nav-play:hover::after { transform:scaleX(.25); }
.nav-play:active span { transform:rotate(5deg) scale(.93); }
.nav-about.is-clicked span { animation:about-tap .35s ease; }
.nav-work.is-clicked span { animation:work-tap .4s ease; }
.nav-play.is-clicked span { animation:play-tap .45s ease; }
.contact-cta { justify-self:end; position:relative; overflow:hidden; isolation:isolate; border:1px solid #bb9bdbb3; border-radius:99px; padding:13px 25px; min-height:46px; white-space:nowrap; background:linear-gradient(130deg,#ffffff12,#9981d512 65%,#b994ed1c); backdrop-filter:blur(18px) saturate(150%); -webkit-backdrop-filter:blur(18px) saturate(150%); box-shadow:inset 0 1px 0 #ffffff20,0 5px 20px #0002; transition:transform .25s,border-color .25s,box-shadow .25s,background .25s; }
.contact-cta::before { content:''; position:absolute; inset:-70% -30%; z-index:-1; background:linear-gradient(110deg,transparent 35%,#ffffff20 50%,transparent 65%); transform:translateX(-100%); transition:transform .65s; }
.contact-cta:hover { transform:translateY(-2px); border-color:#e0c3ff; box-shadow:inset 0 1px 0 #ffffff35,0 6px 25px #b28ae52b; }
.contact-cta:hover::before { transform:translateX(100%); }
.contact-cta:active { transform:translateY(0) scale(.96); }
.contact-cta.is-clicked { animation:glass-tap .5s ease; }
@keyframes about-tap { 50% { transform:translateY(3px); } }
@keyframes work-tap { 50% { transform:translateY(-5px); } }
@keyframes play-tap { 35% { transform:rotate(7deg); } 70% { transform:rotate(-4deg); } }
@keyframes glass-tap { 50% { box-shadow:inset 0 0 25px #d5b4ff35,0 0 0 7px #d5b4ff0d; } }
@media(max-width:600px) {
 .masthead { grid-template-columns:1fr auto; gap:16px; }
 .main-nav { grid-column:1 / -1; grid-row:2; justify-content:center; gap:32px; }
 .contact-cta { grid-column:2; grid-row:1; padding:10px 16px; font-size:14px; }
}
@media(prefers-reduced-motion:reduce) {
 .masthead *, .masthead *::before, .masthead *::after { animation:none!important; transition:none!important; }
}
:focus-visible { outline: 2px solid #d0a7ff; outline-offset: 5px; }
.portrait { position: absolute; inset: 0; pointer-events: none; }
.portrait img, .portrait video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center; user-select: none; }
.portrait video { visibility: hidden; }
.intro { position: absolute; z-index: 1; left: 5%; top: 40%; max-width: 32%; pointer-events: none; text-shadow: 0 2px 20px #0008; }
.eyebrow { color: #dbb8ff; line-height: 1.7; }
h1 { font-size: clamp(44px, 5.6vw, 88px); line-height: 1.02; letter-spacing: -.065em; font-weight: 400; margin: 24px 0; }
h1 span { font-family: inherit; font-weight: 400; letter-spacing: -.055em; }
.subtitle { font-size: 14px; color: #d7cddd; line-height: 1.6; max-width: 310px; }
footer { position: absolute; inset: auto 4% 32px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.hint { font-size: 12px; color: #d7cddd; }
.hint span { margin-left: 14px; color: #c799ff; }
.signature { color: #92829f; }
.load-error { position: absolute; bottom: 65px; left: 4%; font-size: 12px; }
@media (max-width: 700px) {
  .hero { min-height: 600px; }
  .masthead { padding: 24px 6%; }
  .edition, .signature { display: none; }
  .wordmark { font-size: 24px; }
  .intro { top: auto; bottom: 95px; left: 6%; max-width: 88%; }
  h1 { font-size: 49px; margin: 12px 0; }
  h1 br { display: none; }
  .eyebrow { font-size: 8px; }
  .subtitle { max-width: none; font-size: 12px; }
  footer { left: 6%; right: 6%; bottom: 28px; }
  .hint { font-size: 11px; }
}

/* Reference navbar: real condensed typography, generous spacing, quiet violet glass. */
.masthead { padding: 36px 4.5%; gap: 32px; }
.main-nav { gap: 72px; }
.nav-link, .contact-cta {
  font-family: 'Inter', sans-serif;
  font-size: 36px;
  font-weight: 400;
  font-stretch: normal;
  line-height: 1;
  letter-spacing: 0;
}
.nav-link { padding: 16px 0 12px; min-height: 64px; }
.nav-link::after { left: 0; right: 0; bottom: 6px; }
.contact-cta {
  min-width: 256px;
  height: 80px;
  padding: 6px 30px 0;
  border: 2px solid #9880b5;
  border-radius: 999px;
  background: linear-gradient(115deg, rgba(15,7,29,.90), rgba(12,5,25,.86));
  box-shadow: inset 0 1px 8px #ffffff04;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.nav-work:hover span { letter-spacing: 0; transform: translateY(-3px); }
.contact-cta:hover { border-color: #c6ade4; box-shadow: inset 0 0 24px #a985d511, 0 0 20px #9570c012; }
@media (max-width: 1100px) {
  .masthead { padding: 28px 4%; gap: 24px; }
  .main-nav { gap: 38px; }
  .nav-link, .contact-cta { font-size: 29px; }
  .contact-cta { min-width: 200px; height: 64px; padding: 5px 24px 0; }
}
@media (max-width: 700px) {
  .masthead { padding: 24px 6%; gap: 16px; }
  .main-nav { gap: 30px; }
  .nav-link, .contact-cta { font-size: 24px; }
  .contact-cta { min-width: 158px; height: 52px; padding: 4px 18px 0; }
}

/* Shared navigation feedback and smaller, balanced type. */
.nav-link, .contact-cta { font-size: 28px; }
.nav-link:hover span { transform: translateY(-3px); letter-spacing: 0; }
.nav-link:hover::after { transform: scaleX(.55); transform-origin: center; }
.nav-link:active span { transform: translateY(1px) scale(.94); }
.nav-link.is-clicked span { animation: work-tap .4s ease; }
.contact-cta { --tilt-x:0deg; --tilt-y:0deg; min-width:224px; height:68px; transform:perspective(600px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)); transition:transform .15s ease-out,border-color .25s,box-shadow .25s; }
.contact-cta::before { animation:glass-shimmer 3.4s linear infinite; transition:none; }
.contact-cta:hover { transform:perspective(600px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)); }
.contact-cta:active { transform:perspective(600px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) scale(.97); }
@keyframes glass-shimmer { from { transform:translateX(-100%); } to { transform:translateX(100%); } }
@media(max-width:1100px){ .nav-link, .contact-cta { font-size:24px; } .contact-cta { min-width:180px; height:58px; } }
@media(max-width:700px){ .nav-link, .contact-cta { font-size:20px; } .contact-cta { min-width:146px; height:48px; } }
@media(prefers-reduced-motion:reduce){ .contact-cta, .contact-cta:hover, .contact-cta:active { transform:none; } }

/* Two-family typography: Arial for content/wordmark; Portfolio DIN for navigation. */
.intro .eyebrow { letter-spacing: .08em; }
.intro .subtitle { text-wrap: pretty; }

/* One coherent geometric sans family, with role-specific weights. */
:root { font-family:'Inter',sans-serif; font-synthesis:none; }
.wordmark { font-weight:800; letter-spacing:-.055em; }
h1 { font-weight:500; font-size:clamp(44px,5.3vw,82px); line-height:1.06; letter-spacing:-.05em; }
h1 span { font-weight:600; letter-spacing:-.05em; }
.intro .eyebrow { font-weight:500; font-size:12px; letter-spacing:.055em; }
.subtitle { font-weight:400; font-size:16px; line-height:1.65; max-width:330px; }
.nav-link,.contact-cta { font-family:'Inter',sans-serif; font-size:18px; font-weight:500; letter-spacing:.055em; font-stretch:normal; }
.contact-cta { min-width:204px; height:60px; padding:0 26px; }
.main-nav { gap:48px; }
.hint { font-weight:400; }
@media(max-width:1100px){
 .nav-link,.contact-cta { font-size:16px; }
 .main-nav { gap:30px; }
 .contact-cta { min-width:176px; height:54px; }
}
@media(max-width:700px){
 .nav-link,.contact-cta { font-size:13px; letter-spacing:.035em; }
 .contact-cta { min-width:146px; height:48px; padding:0 18px; }
 .intro .eyebrow { font-size:11px; }
 .subtitle { font-size:14px; }
 h1 { font-size:46px; }
}

/* Decorative viewport overlay: cannot capture clicks, hover, drag, or selection. */
.neon-cursor {
 position:fixed; inset:0; width:100%; height:100%; z-index:100;
 pointer-events:none; opacity:.60; contain:strict;
}
@media(prefers-reduced-motion:reduce), (any-pointer:coarse) {
 .neon-cursor { display:none; }
}

/* Accent travels independently of the existing glass sheen and cursor tilt. */
.contact-content { position:relative; display:inline-flex; align-items:center; padding-left:22px; }
.contact-label { display:inline-block; transition:transform .4s cubic-bezier(.22,1,.36,1); }
.contact-dot { position:absolute; left:0; top:50%; margin-top:-4px; width:8px; height:8px; border-radius:50%; background:#bd77ff; box-shadow:0 0 10px #b366ff80; animation:contact-blink 1.5s ease-in-out infinite; transition:left .4s cubic-bezier(.22,1,.36,1); pointer-events:none; }
.contact-cta:hover .contact-dot, .contact-cta:focus-visible .contact-dot { left:calc(100% - 8px); }
.contact-cta:hover .contact-label, .contact-cta:focus-visible .contact-label { transform:translateX(-22px); }
@keyframes contact-blink { 0%,100% { opacity:1; } 50% { opacity:.15; } }
.contact-ripple { position:absolute; left:var(--ripple-x,50%); top:var(--ripple-y,50%); width:20px; height:20px; margin:-10px; border:1px solid #d7a5ff; border-radius:50%; opacity:0; pointer-events:none; }
.contact-cta.is-clicked { animation:glass-tap .65s ease; }
.contact-cta.is-clicked .contact-ripple { animation:contact-ripple .6s ease-out; }
@keyframes contact-ripple { 0% { transform:scale(.2); opacity:.8; } 100% { transform:scale(18); opacity:0; } }
@media(prefers-reduced-motion:reduce) {
 .contact-dot { animation:none; }
 .contact-cta:active .contact-label { opacity:.65; }
}

/* Navigation specification: crisp cyberpunk type over a restrained glass rail. */
.masthead {
  padding: 10px 4.5%;
  min-height: 72px;
  background: rgba(0, 0, 0, .18);
  border-bottom: 1px solid rgba(0, 229, 255, .15);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.contact-cta { height: 50px; }

@media (hover: hover) and (pointer: fine) {
  html,
  body,
  a,
  button { cursor: none !important; }
}

.wordmark {
  font-family: 'Chakra Petch', sans-serif;
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.035em;
  color: #fff;
}

.nav-link {
  font-family: 'IBM Plex Sans Condensed', sans-serif;
  font-size: 20px;
  
  font-synthesis: weight;
  line-height: 1;
  letter-spacing: .08em;
  text-transform: uppercase; font-weight: 400;}

.contact-content {
  min-width: 138px;
  justify-content: center;
  padding-inline: 20px;
}

.contact-dot {
  left: 1px;
  z-index: 2;
  width: 9px;
  height: 9px;
  margin-top: -4.5px;
  background: #bd77ff;
  box-shadow: 0 0 5px #d7a5ff, 0 0 13px rgba(179, 102, 255, .9);
}

.contact-cta:hover .contact-dot,
.contact-cta:focus-visible .contact-dot {
  left: calc(100% - 10px);
}

@media (max-width: 700px) {
  .masthead { min-height: 72px; padding-block: 10px; }
  .wordmark { font-size: 25px; }
  .nav-link { font-size: 16px; letter-spacing: .065em; }
  .contact-content { min-width: 108px; padding-inline: 15px; }
}

/* Hero typography and a continuous fade into the black content canvas below. */
:root { font-family: 'Inter', sans-serif; }

.hero::after {
  content: '';
  position: absolute;
  z-index: 0;
  inset: auto 0 0;
  height: clamp(180px, 30vh, 340px);
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(5, 3, 9, 0) 0%,
    rgba(5, 3, 9, .18) 32%,
    rgba(3, 2, 6, .66) 68%,
    #000 100%
  );
}

.portrait {
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 62%, rgba(0, 0, 0, .82) 72%, transparent 93%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 62%, rgba(0, 0, 0, .82) 72%, transparent 93%);
}

h1,
h2 {
  font-family: 'Chakra Petch', sans-serif;
  font-weight: 700;
  letter-spacing: -.035em;
}

h1,
h1 span {
  font-family: 'Chakra Petch', sans-serif;
  font-size: clamp(64px, 5vw, 72px);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -.035em;
}

h2 { font-size: clamp(36px, 3vw, 40px); }

.subtitle,
p {
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.6;
}

.eyebrow,
.hint,
.signature,
.load-error {
  font-family: 'IBM Plex Sans Condensed', sans-serif;
  font-size: 14px;
  
  line-height: 1.5;
  letter-spacing: .06em;
  text-transform: uppercase; font-weight: 400;}

.intro .eyebrow { font-size: 14px; letter-spacing: .06em; }

.contact-cta { font-family: 'IBM Plex Sans Condensed', sans-serif; font-weight: 400;}
.intro,
footer { z-index: 1; }

@media (max-width: 700px) {
  h1,
  h1 span { font-size: clamp(52px, 13vw, 64px); }
  .subtitle { font-size: 17px; line-height: 1.6; }
  .eyebrow,
  .hint,
  .signature,
  .load-error { font-size: 13px; }
  .intro .eyebrow { font-size: 13px; }
  .hero::after { height: 38vh; }
}

/* Asymmetric neon CTA: 45-degree cuts only at top-left and bottom-right. */
.contact-cta {
  --chamfer: 14px;
  border: 0;
  border-radius: 0;
  padding: 1.5px;
  clip-path: polygon(
    var(--chamfer) 0,
    100% 0,
    100% calc(100% - var(--chamfer)),
    calc(100% - var(--chamfer)) 100%,
    0 100%,
    0 var(--chamfer)
  );
  background: #b76cff;
  filter: drop-shadow(0 0 4px rgba(183, 108, 255, .7))
          drop-shadow(0 0 11px rgba(139, 66, 255, .28));
  box-shadow: none;
}

.contact-cta::after {
  content: '';
  position: absolute;
  z-index: 0;
  inset: 1.5px;
  clip-path: polygon(
    calc(var(--chamfer) - 1.5px) 0,
    100% 0,
    100% calc(100% - var(--chamfer) + 1.5px),
    calc(100% - var(--chamfer) + 1.5px) 100%,
    0 100%,
    0 calc(var(--chamfer) - 1.5px)
  );
  background: rgba(2, 1, 5, .82);
  pointer-events: none;
}

.contact-cta::before { z-index: 1; }
.contact-content { z-index: 2; }
.contact-ripple { z-index: 3; }

.contact-cta:hover,
.contact-cta:focus-visible {
  background: #c98cff;
  filter: drop-shadow(0 0 5px rgba(201, 140, 255, .88))
          drop-shadow(0 0 14px rgba(139, 66, 255, .42));
  box-shadow: none;
}

@media (max-width: 700px) {
  .contact-cta { --chamfer: 11px; }
}

/* Clear interior with a scalable 1.5px outline and 3px-rounded chamfer joins. */
.contact-cta,
.contact-cta:hover,
.contact-cta:focus-visible {
  background: transparent;
  filter: none;
}

.contact-cta::after { display: none; }

.contact-outline {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.contact-outline path {
  fill: none;
  stroke: #b76cff;
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 3px rgba(183, 108, 255, .85))
          drop-shadow(0 0 8px rgba(139, 66, 255, .35));
  transition: stroke .25s ease, filter .25s ease;
}

.contact-cta:hover .contact-outline path,
.contact-cta:focus-visible .contact-outline path {
  stroke: #c98cff;
  filter: drop-shadow(0 0 4px rgba(201, 140, 255, .95))
          drop-shadow(0 0 11px rgba(139, 66, 255, .48));
}

.contact-cta { min-width: 240px; }
.contact-content { min-width: 170px; padding-inline: 30px; }

@media (max-width: 1100px) {
  .contact-cta { min-width: 220px; }
}

@media (max-width: 700px) {
  .contact-cta { min-width: 190px; }
  .contact-content { min-width: 148px; padding-inline: 24px; }
}

/* Keep the dot-and-label pair centered with one invariant 7px gap. */
.contact-cta {
  display: grid;
  place-items: center;
}

.contact-content {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 0;
  padding: 0;
}

.contact-dot {
  position: static;
  flex: 0 0 9px;
  margin: 0;
  transition: none;
}

.contact-label,
.contact-cta:hover .contact-label,
.contact-cta:focus-visible .contact-label {
  transform: none;
}

.contact-cta:hover .contact-content,
.contact-cta:focus-visible .contact-content {
  flex-direction: row-reverse;
}

@media (max-width: 700px) {
  .contact-content { min-width: 0; padding: 0; }
}

/* Smoothly exchange dot and label positions while preserving a 7px endpoint gap. */
.contact-cta { min-width: 234px; }

.contact-content {
  position: relative;
  display: inline-flex;
  gap: 0;
}

.contact-label {
  margin-left: 16px;
  transition: transform .46s cubic-bezier(.22, 1, .36, 1);
}

.contact-dot {
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -4.5px;
  transition: left .46s cubic-bezier(.22, 1, .36, 1);
}

.contact-cta:hover .contact-content,
.contact-cta:focus-visible .contact-content {
  flex-direction: row;
}

.contact-cta:hover .contact-dot,
.contact-cta:focus-visible .contact-dot {
  left: calc(100% - 9px);
}

.contact-cta:hover .contact-label,
.contact-cta:focus-visible .contact-label {
  transform: translateX(-16px);
}

@media (max-width: 1100px) {
  .contact-cta { min-width: 214px; }
}

@media (max-width: 700px) {
  .contact-cta { min-width: 184px; }
}

/* Reduce only the CTA's left and right breathing room by 3px each. */
.contact-cta { min-width: 228px; }
@media (max-width: 1100px) { .contact-cta { min-width: 208px; } }
@media (max-width: 700px) { .contact-cta { min-width: 178px; } }

/* Fine-pointer cursor: solid center point inside a larger hairline orbit. */
.cursor-orbit {
  position: fixed;
  z-index: 101;
  left: 0;
  top: 0;
  width: 56px;
  height: 56px;
  border: 1px solid rgba(255, 255, 255, .30);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  will-change: transform;
  transition: opacity .16s ease;
}

.cursor-orbit::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 7px rgba(255, 255, 255, .42);
  transform: translate(-50%, -50%);
}

.cursor-orbit.is-visible { opacity: 1; }

@media (prefers-reduced-motion: reduce), (any-pointer: coarse) {
  .cursor-orbit { display: none; }
}

/* Center the complete hero introduction as one vertical unit. */
.intro {
  top: 50%;
  transform: translateY(-50%);
}

@media (max-width: 700px) {
  .intro {
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
  }
}

.intro .eyebrow { font-size: 18px; }

@media (max-width: 700px) {
  .intro .eyebrow { font-size: 18px; }
}

/* Narrow only the visible blur rail; preserve the existing content alignment. */
.masthead {
  left: 2.5%;
  right: 2.5%;
  padding-inline: 2%;
}

/* Independent navigation feedback without resizing or shifting sibling links. */
.nav-link:hover span {
  transform: translateY(-3px);
  letter-spacing: inherit;
}

.nav-link:hover::after {
  transform: scaleX(1);
  transform-origin: center;
}

.nav-link[aria-pressed="true"]::after { transform: scaleX(0); }

/* Second fold: an editorial index for the portfolio work. */
.work-section {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  padding: clamp(90px, 11vw, 150px) 5% clamp(72px, 9vw, 120px);
  background:
    radial-gradient(circle at 88% 18%, rgba(42, 63, 198, .16), transparent 32%),
    radial-gradient(circle at 16% 72%, rgba(190, 40, 207, .11), transparent 34%),
    #000;
}

.work-section::before {
  content: 'WORK';
  position: absolute;
  right: -1vw;
  top: 4vh;
  color: transparent;
  -webkit-text-stroke: 1px rgba(183, 108, 255, .10);
  font-family: 'Chakra Petch', sans-serif;
  font-size: clamp(120px, 21vw, 310px);
  font-weight: 700;
  line-height: .8;
  pointer-events: none;
}

.work-heading {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(260px, .75fr);
  column-gap: 8vw;
  align-items: end;
  margin-bottom: clamp(54px, 7vw, 92px);
}

.work-kicker {
  grid-column: 1 / -1;
  margin: 0 0 18px;
  color: #b76cff;
  font-family: 'IBM Plex Sans Condensed', sans-serif;
  font-size: 14px;
  letter-spacing: .06em; font-weight: 400;}

.work-heading h2 {
  margin: 0;
  font-size: clamp(48px, 6.2vw, 88px);
  line-height: .96;
}

.work-lede {
  margin: 0 0 5px;
  max-width: 510px;
  color: rgba(245, 241, 249, .72);
}

.work-lanes {
  position: relative;
  z-index: 1;
  border-top: 1px solid rgba(255, 255, 255, .14);
}

.work-lane {
  display: grid;
  grid-template-columns: 70px minmax(200px, .85fr) minmax(280px, 1.15fr);
  align-items: center;
  gap: 3vw;
  min-height: 132px;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
  transition: background .3s ease, padding .35s cubic-bezier(.22,1,.36,1);
}

.work-lane > span {
  color: #b76cff;
  font-family: 'IBM Plex Sans Condensed', sans-serif;
  font-size: 14px;
  letter-spacing: .06em; font-weight: 400;}

.work-lane h3 {
  margin: 0;
  font-family: 'Chakra Petch', sans-serif;
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1;
}

.work-lane p {
  margin: 0;
  max-width: 620px;
  color: rgba(245, 241, 249, .62);
}

.work-lane:hover {
  padding-inline: 18px;
  background: linear-gradient(90deg, rgba(183, 108, 255, .08), rgba(0, 229, 255, .025));
}

@media (max-width: 700px) {
  .work-section { padding-inline: 6%; }
  .work-heading { grid-template-columns: 1fr; gap: 24px; }
  .work-kicker { grid-column: auto; }
  .work-heading h2 { font-size: clamp(46px, 14vw, 68px); }
  .work-lane { grid-template-columns: 38px 1fr; gap: 16px; padding-block: 28px; }
  .work-lane p { grid-column: 2; font-size: 16px; }
  .work-lane:hover { padding-inline: 10px; }
}

/* Section 02: "Meet the Annygators" (Figma: Ideations / Screen 2, 1440×708).
   Replaces the old Selected Work fold. White title fades in on arrival, then glitches out
   to reveal the pink→blue gradient title underneath. */
.annygators-section {
  position: relative;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
  background: #000;
}

.ag-title {
  position: absolute;
  left: 50%;
  top: calc(33.6% - 5px); /* nudged up 5px from the Figma position (26 Sep) */
  transform: translateX(-50%);
  width: max-content;
  max-width: 90%;
  margin: 0;
  font-family: 'Chakra Petch', sans-serif;
  font-size: 72px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
  text-align: center;
}

.ag-title__gradient {
  display: block;
  background: linear-gradient(90deg, #e01ffd 0%, #1c19d7 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.ag-title__white {
  position: absolute;
  inset: 0;
  color: #fff;
  pointer-events: none;
}

.ag-title__white::before,
.ag-title__white::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  opacity: 0;
  mix-blend-mode: screen;
}
.ag-title__white::before { color: #e01ffd; }
.ag-title__white::after { color: #00e5ff; }

/* Waiting for the visitor to arrive (JS adds .is-armed; without JS the gradient title just shows). */
.ag-title.is-armed .ag-title__white,
.ag-title.is-armed .ag-title__gradient { opacity: 0; }

.ag-title.is-armed.is-playing .ag-title__white {
  animation:
    ag-fade-in .35s cubic-bezier(.22, 1, .36, 1) forwards,
    ag-glitch-out .62s steps(1, end) .35s forwards;
}
.ag-title.is-armed.is-playing .ag-title__white::before { animation: ag-split-a .62s steps(1, end) .35s forwards; }
.ag-title.is-armed.is-playing .ag-title__white::after { animation: ag-split-b .62s steps(1, end) .35s forwards; }
.ag-title.is-armed.is-playing .ag-title__gradient { animation: ag-reveal .62s steps(1, end) .35s forwards; }

@keyframes ag-fade-in { from { opacity: 0; } to { opacity: 1; } }

@keyframes ag-glitch-out {
  0%   { opacity: 1; clip-path: inset(0 0 0 0); transform: none; }
  10%  { clip-path: inset(10% 0 58% 0); transform: translateX(-7px); }
  20%  { clip-path: inset(55% 0 18% 0); transform: translateX(9px); }
  30%  { clip-path: inset(0 0 82% 0); transform: translateX(-3px); }
  40%  { opacity: .85; clip-path: inset(0 0 0 0); transform: translateX(5px); }
  50%  { clip-path: inset(38% 0 42% 0); transform: translateX(-11px); }
  60%  { opacity: .6; clip-path: inset(70% 0 6% 0); transform: translateX(6px); }
  70%  { opacity: .45; clip-path: inset(22% 0 62% 0); transform: translateX(-4px); }
  80%  { opacity: .3; clip-path: inset(82% 0 0 0); transform: translateX(3px); }
  90%  { opacity: .15; clip-path: inset(6% 0 88% 0); transform: none; }
  100% { opacity: 0; clip-path: inset(50% 0 50% 0); transform: none; }
}

@keyframes ag-split-a {
  0%   { opacity: .9; clip-path: inset(62% 0 12% 0); transform: translate(-6px, 0); }
  20%  { clip-path: inset(8% 0 70% 0); transform: translate(5px, 0); }
  40%  { clip-path: inset(40% 0 35% 0); transform: translate(-9px, 0); }
  60%  { opacity: .7; clip-path: inset(80% 0 2% 0); transform: translate(4px, 0); }
  80%  { opacity: .4; clip-path: inset(15% 0 75% 0); transform: translate(-3px, 0); }
  100% { opacity: 0; }
}

@keyframes ag-split-b {
  0%   { opacity: .9; clip-path: inset(20% 0 55% 0); transform: translate(6px, 0); }
  20%  { clip-path: inset(66% 0 10% 0); transform: translate(-5px, 0); }
  40%  { clip-path: inset(0 0 78% 0); transform: translate(8px, 0); }
  60%  { opacity: .7; clip-path: inset(48% 0 30% 0); transform: translate(-4px, 0); }
  80%  { opacity: .4; clip-path: inset(85% 0 0 0); transform: translate(3px, 0); }
  100% { opacity: 0; }
}

/* Gradient flickers in through the glitch, then settles. */
@keyframes ag-reveal {
  0%   { opacity: 0; transform: none; }
  20%  { opacity: 1; transform: translateX(4px); }
  30%  { opacity: 0; }
  50%  { opacity: 1; transform: translateX(-3px); }
  60%  { opacity: .4; transform: none; }
  70%  { opacity: 1; transform: translateX(2px); }
  100% { opacity: 1; transform: none; }
}

@media (max-width: 1100px) {
  .ag-title { font-size: 60px; }
}

@media (max-width: 700px) {
  .annygators-section { min-height: 520px; }
  .ag-title { width: 90%; font-size: clamp(40px, 11vw, 52px); line-height: 1.15; }
}

@media (prefers-reduced-motion: reduce) {
  .ag-title.is-armed .ag-title__gradient { opacity: 1; animation: none; }
  .ag-title .ag-title__white { display: none; }
}

/* Footer / contact (#contact). Designed in the site's style on 26 Sep; "Get in touch" scrolls here. */
.site-footer {
  /* resets the old unused `footer { position:absolute … }` rules from the first hero draft */
  position: relative;
  inset: auto;
  z-index: 0;
  /* full screen, so "Get in touch" lands with the footer exactly at the top of the window */
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  overflow: hidden;
  padding: clamp(90px, 11vw, 150px) 5% 36px;
  border-top: 1px solid rgba(255, 255, 255, .14);
  background:
    radial-gradient(circle at 12% 110%, rgba(190, 40, 207, .14), transparent 38%),
    radial-gradient(circle at 92% 0%, rgba(42, 63, 198, .12), transparent 34%),
    #000;
}

.footer-main {
  margin-block: auto;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(260px, .6fr);
  column-gap: 8vw;
  align-items: end;
}

.footer-kicker,
.footer-label {
  margin: 0 0 18px;
  font-family: 'IBM Plex Sans Condensed', sans-serif;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: .06em;
  text-transform: uppercase; font-weight: 400;}
.footer-kicker { color: #b76cff; }
.footer-label { color: rgba(245, 241, 249, .62); }

.site-footer h2 {
  margin: 0;
  font-family: 'Chakra Petch', sans-serif;
  font-size: clamp(48px, 6.2vw, 88px);
  font-weight: 700;
  line-height: .96;
  letter-spacing: -.035em;
  color: #f9f4ff;
}
.site-footer h2 .footer-title-grad {
  display: block;
  background: linear-gradient(90deg, #e01ffd 0%, #1c19d7 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.footer-lede {
  max-width: 510px;
  margin: 28px 0 0;
  color: rgba(245, 241, 249, .72);
}

.footer-email-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px 24px; }

.footer-email {
  position: relative;
  font-family: 'Chakra Petch', sans-serif;
  font-size: clamp(24px, 2.6vw, 36px);
  font-weight: 600;
  line-height: 1.2;
  color: #f9f4ff;
  text-decoration: none;
  transition: color .25s;
}
.footer-email::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 1px;
  background: #b76cff;
  transform: scaleX(.18);
  transform-origin: left;
  transition: transform .46s cubic-bezier(.22, 1, .36, 1);
}
.footer-email:hover, .footer-email:focus-visible { color: #c98cff; }
.footer-email:hover::after, .footer-email:focus-visible::after { transform: scaleX(1); }

.footer-copy,
.footer-top {
  min-height: 44px;
  padding: 0 4px;
  border: 0;
  background: transparent;
  font-family: 'IBM Plex Sans Condensed', sans-serif;
  font-size: 14px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(245, 241, 249, .62);
  cursor: pointer;
  transition: color .25s; font-weight: 400;}
.footer-copy:hover, .footer-top:hover { color: #dec7ff; }

.footer-links ul { list-style: none; margin: 0 0 32px; padding: 0; border-top: 1px solid rgba(255, 255, 255, .14); }
.footer-links li { border-bottom: 1px solid rgba(255, 255, 255, .14); }
.footer-links li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 64px;
  font-family: 'IBM Plex Sans Condensed', sans-serif;
  font-size: 20px;
  
  font-synthesis: weight;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #faf7ff;
  text-decoration: none;
  transition: color .25s, padding .35s cubic-bezier(.22, 1, .36, 1); font-weight: 400;}
.footer-links li a span { color: #b76cff; transition: transform .3s cubic-bezier(.2, .8, .2, 1); }
.footer-links li a:hover, .footer-links li a:focus-visible { color: #dec7ff; padding-inline: 8px; }
.footer-links li a:hover span, .footer-links li a:focus-visible span { transform: translate(3px, -3px); }

/* Download resume = the exact "Get in touch" CTA (same classes, same animations); only layout tweaks here. */
.footer-resume {
  text-decoration: none;
  justify-self: start;
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 32px;
  margin-top: clamp(72px, 9vw, 120px);
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, .14);
}
.footer-bottom p {
  margin: 0;
  font-family: 'IBM Plex Sans Condensed', sans-serif;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(245, 241, 249, .62); font-weight: 400;}

@media (max-width: 1100px) {
  .footer-links li a { font-size: 18px; }
}

@media (max-width: 700px) {
  .site-footer { padding-inline: 6%; }
  .footer-main { grid-template-columns: 1fr; row-gap: 56px; }
  .site-footer h2 { font-size: clamp(46px, 14vw, 68px); }
  .footer-lede { font-size: 17px; }
  .footer-links li a { font-size: 16px; letter-spacing: .065em; }
  .footer-kicker, .footer-label, .footer-bottom p { font-size: 13px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .site-footer *, .site-footer *::before, .site-footer *::after { transition: none !important; }
}

/* Floating nav (26 Sep): the masthead is pinned as a floating bar that stays visible on every section.
   .hero's `isolation` is turned off so the fixed bar can sit above later sections. */
.hero { isolation: auto; }

.masthead {
  position: fixed;
  z-index: 90; /* above all sections, below the neon cursor (100/101) */
  top: 14px;
  left: 2.5%;
  right: 2.5%;
  border: 1px solid rgba(0, 229, 255, .15);
  background: rgba(0, 0, 0, .18);
  transition: background .3s ease, box-shadow .3s ease, border-color .3s ease;
}

/* Once the page has scrolled, the bar gets more solid so it stays readable over any content. */
.masthead.is-floating {
  background: rgba(5, 3, 9, .72);
  border-color: rgba(0, 229, 255, .22);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .45), 0 0 0 1px rgba(183, 108, 255, .06);
}

@media (max-width: 700px) {
  .masthead { top: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .masthead { transition: none; }
}

/* Footer title fix (26 Sep): Chakra Petch's descenders (y, g) and the apostrophe were being clipped:
   line-height .96 was tighter than the glyphs, and background-clip:text only paints inside the span's box.
   More line-height + a padded paint box for the gradient line. */
.site-footer h2 { line-height: 1.08; }
.site-footer h2 .footer-title-grad {
  padding: .04em .06em .16em 0;
  margin-bottom: -.16em;
}
/* Keep footer content clear of the floating nav when the footer is scrolled to the top. */
.site-footer { padding-top: max(clamp(90px, 11vw, 150px), 124px); }
@media (max-width: 700px) { .site-footer { padding-top: 200px; } }
/* Footer title uses the same size as the hero "Hey, I'm Annyesha" (h1): 64–72px desktop, 52–64px mobile. */
.site-footer h2 { font-size: clamp(64px, 5vw, 72px); }
@media (max-width: 700px) { .site-footer h2 { font-size: clamp(52px, 13vw, 64px); } }
/* "Meet the Annygators" uses the same size as the hero h1 too (animation untouched). */
.ag-title { font-size: clamp(64px, 5vw, 72px); }
@media (max-width: 700px) { .ag-title { font-size: clamp(52px, 13vw, 64px); } }

/* Hero gaze-circle (26 Sep): frames from assets/gaze/ drawn on a canvas, same placement as the old video. */
.portrait canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  visibility: hidden;
}

/* Footer link icons (26 Sep): custom glyphs in the site style (not the official brand marks):
   chamfered frame like the CTA, strokes/letters in the Annygator gradient, neon glow. */
.footer-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.footer-links li a { justify-content: flex-start; gap: 16px; }
.footer-links li a .footer-arrow { margin-left: auto; }
.footer-icon {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  overflow: visible;
  fill: none;
  stroke: url(#ag-grad);
  stroke-width: 1.5;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 3px rgba(224, 31, 253, .55)) drop-shadow(0 0 9px rgba(28, 25, 215, .45));
  transition: filter .3s ease, transform .35s cubic-bezier(.22, 1, .36, 1);
}
.footer-icon .fi-frame { stroke-width: 1.2; opacity: .9; }
.footer-icon text {
  fill: url(#ag-grad);
  stroke: none;
  font-family: 'Chakra Petch', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -.02em;
}
.footer-links li a:hover .footer-icon,
.footer-links li a:focus-visible .footer-icon {
  transform: translateY(-2px) scale(1.06);
  filter: drop-shadow(0 0 4px rgba(224, 31, 253, .9)) drop-shadow(0 0 14px rgba(28, 25, 215, .7));
}
@media (max-width: 700px) {
  .footer-icon { flex-basis: 26px; width: 26px; height: 26px; }
}
.footer-icon text { text-transform: none; }
.footer-icon {
  filter: drop-shadow(0 0 4px rgba(224, 31, 253, .75)) drop-shadow(0 0 12px rgba(28, 25, 215, .6));
  animation: footer-icon-glow 3.2s ease-in-out infinite;
}
.footer-links li:nth-child(2) .footer-icon { animation-delay: -.8s; }
.footer-links li:nth-child(3) .footer-icon { animation-delay: -1.6s; }
.footer-links li:nth-child(4) .footer-icon { animation-delay: -2.4s; }
@keyframes footer-icon-glow {
  0%, 100% { filter: drop-shadow(0 0 3px rgba(224, 31, 253, .6)) drop-shadow(0 0 9px rgba(28, 25, 215, .45)); }
  50%      { filter: drop-shadow(0 0 5px rgba(224, 31, 253, .9)) drop-shadow(0 0 15px rgba(28, 25, 215, .7)); }
}
.footer-links li a:hover .footer-icon,
.footer-links li a:focus-visible .footer-icon { animation: none; }
@media (prefers-reduced-motion: reduce) { .footer-icon { animation: none; } }
/* 26 Sep: icons without frames (bigger glyphs); hover = lift + fast bright glow pulse. */
.footer-icon { stroke-width: 1.7; }
.footer-icon text { font-size: 19px; letter-spacing: -.03em; }
.footer-links li a:hover .footer-icon,
.footer-links li a:focus-visible .footer-icon {
  transform: translateY(-2px) scale(1.1);
  animation: footer-icon-glow-hover 1.1s ease-in-out infinite;
}
@keyframes footer-icon-glow-hover {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(224, 31, 253, .85)) drop-shadow(0 0 12px rgba(28, 25, 215, .65)); }
  50%      { filter: drop-shadow(0 0 7px rgba(224, 31, 253, 1)) drop-shadow(0 0 22px rgba(224, 31, 253, .55)) drop-shadow(0 0 30px rgba(28, 25, 215, .8)); }
}
@media (prefers-reduced-motion: reduce) {
  .footer-links li a:hover .footer-icon,
  .footer-links li a:focus-visible .footer-icon {
    animation: none;
    filter: drop-shadow(0 0 5px rgba(224, 31, 253, .95)) drop-shadow(0 0 16px rgba(28, 25, 215, .75));
  }
}

/* 26 Sep: footer link marks are plain WHITE with the Annygator gradient as a glow around them
   (brand guidelines allow white/monochrome logos; the colour lives only in the glow).
   Official Brandfetch symbols (assets/logos/*.svg) are used as a white mask when present;
   otherwise the built-in glyph shows, also in white. Glow is on a wrapper because CSS masks clip filters. */
.footer-icon { stroke: #fff; }
.footer-icon text { fill: #fff; }
.footer-logo-wrap { display: none; flex: 0 0 28px; width: 28px; height: 28px; }
.footer-logo {
  display: block;
  width: 100%;
  height: 100%;
  background: #fff;
  -webkit-mask: var(--logo) center / contain no-repeat;
  mask: var(--logo) center / contain no-repeat;
}
.footer-links li.has-logo .footer-icon { display: none; }
.footer-links li.has-logo .footer-logo-wrap { display: block; }

.footer-icon,
.footer-logo-wrap {
  filter: drop-shadow(0 0 3px rgba(224, 31, 253, .7)) drop-shadow(0 0 10px rgba(28, 25, 215, .55));
  animation: none;
  transition: filter .3s ease, transform .35s cubic-bezier(.22, 1, .36, 1);
}
.footer-links li a:hover .footer-icon,
.footer-links li a:focus-visible .footer-icon,
.footer-links li a:hover .footer-logo-wrap,
.footer-links li a:focus-visible .footer-logo-wrap {
  transform: translateY(-2px) scale(1.1);
  animation: footer-icon-glow-hover 1.1s ease-in-out infinite;
}
@media (max-width: 700px) {
  .footer-logo-wrap { flex-basis: 24px; width: 24px; height: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .footer-links li a:hover .footer-logo-wrap,
  .footer-links li a:focus-visible .footer-logo-wrap {
    animation: none;
    filter: drop-shadow(0 0 5px rgba(224, 31, 253, .95)) drop-shadow(0 0 16px rgba(28, 25, 215, .75));
  }
}

/* 26 Sep: footer link hover. The whole row (mark + name) glides gently RIGHT (no upward lift);
   the name turns into the Annygator gradient; mark and name each get their own pulsing gradient glow. */
.footer-links li a:hover,
.footer-links li a:focus-visible { padding-inline: 0; color: #faf7ff; }
/* the old generic "a span" rules were meant only for the arrow */
.footer-links li a span:not(.footer-arrow),
.footer-links li a:hover span:not(.footer-arrow),
.footer-links li a:focus-visible span:not(.footer-arrow) { color: inherit; }
.footer-links li a .footer-arrow { transition: transform .45s cubic-bezier(.22, 1, .36, 1), color .3s; }
.footer-links li a:hover .footer-arrow,
.footer-links li a:focus-visible .footer-arrow { transform: translateX(4px); color: #c98cff; }

.footer-icon,
.footer-logo-wrap,
.footer-link-label {
  transition: transform .45s cubic-bezier(.22, 1, .36, 1), filter .3s ease;
}
.footer-link-label {
  display: inline-block;
  padding: .1em .15em .1em 0;
  background: linear-gradient(90deg, #faf7ff, #faf7ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
}
.footer-links li a:hover .footer-icon,
.footer-links li a:focus-visible .footer-icon,
.footer-links li a:hover .footer-logo-wrap,
.footer-links li a:focus-visible .footer-logo-wrap {
  transform: translateX(10px);
  animation: footer-icon-glow-hover 1.4s ease-in-out infinite;
}
.footer-links li a:hover .footer-link-label,
.footer-links li a:focus-visible .footer-link-label {
  transform: translateX(10px);
  background-image: linear-gradient(90deg, #e01ffd 0%, #1c19d7 100%);
  animation: footer-label-glow 1.4s ease-in-out infinite;
}
@keyframes footer-label-glow {
  0%, 100% { filter: drop-shadow(0 0 3px rgba(224, 31, 253, .55)) drop-shadow(0 0 10px rgba(28, 25, 215, .45)); }
  50%      { filter: drop-shadow(0 0 6px rgba(224, 31, 253, .95)) drop-shadow(0 0 18px rgba(28, 25, 215, .75)); }
}
@media (prefers-reduced-motion: reduce) {
  .footer-links li a:hover .footer-icon,
  .footer-links li a:hover .footer-logo-wrap,
  .footer-links li a:hover .footer-link-label,
  .footer-links li a:focus-visible .footer-icon,
  .footer-links li a:focus-visible .footer-logo-wrap,
  .footer-links li a:focus-visible .footer-link-label {
    transform: none;
    animation: none;
    filter: drop-shadow(0 0 5px rgba(224, 31, 253, .9)) drop-shadow(0 0 14px rgba(28, 25, 215, .7));
  }
}

/* 26 Sep: footer title glides a few px right on hover (same easing as the links; no glow). */
.site-footer h2 { transition: transform .5s cubic-bezier(.22, 1, .36, 1); }
.site-footer h2:hover { transform: translateX(6px); }
@media (prefers-reduced-motion: reduce) { .site-footer h2, .site-footer h2:hover { transition: none; transform: none; } }

/* 26 Sep: nav "Get in touch" is dimmed + disabled while the footer (#contact) is on screen. */
.masthead .contact-cta { transition: transform .15s ease-out, border-color .25s, box-shadow .25s, opacity .35s ease; }
.masthead .contact-cta.is-inactive {
  opacity: .35;
  pointer-events: none;
  transform: none;
}
.masthead .contact-cta.is-inactive .contact-dot,
.masthead .contact-cta.is-inactive::before { animation: none; }

/* 26 Sep: footer title moves as ONE block on hover (inner wrapper = one composited layer),
   and fades in each time you arrive at the footer (footer.js adds .is-armed / .is-shown). */
.site-footer h2 { transition: opacity .9s cubic-bezier(.22, 1, .36, 1); }
.site-footer h2:hover { transform: none; }
.footer-title-inner {
  display: block;
  transition: transform .5s cubic-bezier(.22, 1, .36, 1);
  will-change: transform;
}
.site-footer h2:hover .footer-title-inner { transform: translateX(6px); }
.site-footer h2.is-armed { opacity: 0; }
.site-footer h2.is-armed.is-shown { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .footer-title-inner, .site-footer h2:hover .footer-title-inner { transition: none; transform: none; }
  .site-footer h2.is-armed { opacity: 1; transition: none; }
}

/* 26 Sep: footer title hover is PER LINE. footer.js splits the title into .ft-line rows;
   hovering a row glides only that line 6px right (the row stays put, its inner text moves). */
.site-footer h2:hover .footer-title-inner { transform: none; }
.footer-title-inner { will-change: auto; }
.ft-line { display: block; }
.ft-line-inner {
  display: inline-block;
  transition: transform .5s cubic-bezier(.22, 1, .36, 1);
}
.ft-line:hover .ft-line-inner { transform: translateX(6px); }
.ft-line-inner.ft-grad {
  padding: .04em .06em .16em 0;
  margin-bottom: -.16em;
  background: linear-gradient(90deg, #e01ffd 0%, #1c19d7 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
@media (prefers-reduced-motion: reduce) {
  .ft-line-inner, .ft-line:hover .ft-line-inner { transition: none; transform: none; }
}

/* 26 Sep: on hover the marks take the same pink→blue gradient as their names (white at rest). */
.footer-links li a:hover .footer-icon,
.footer-links li a:focus-visible .footer-icon { stroke: url(#ag-grad); }
.footer-links li a:hover .footer-icon text,
.footer-links li a:focus-visible .footer-icon text { fill: url(#ag-grad); }
.footer-links li a:hover .footer-logo,
.footer-links li a:focus-visible .footer-logo { background: linear-gradient(90deg, #e01ffd 0%, #1c19d7 100%); }
/* 26 Sep: footer title lines glide 10px (same as the links). */
.ft-line:hover .ft-line-inner { transform: translateX(10px); }

/* Cursor (26 Sep): Figma arrow head + neon flame trail (neon-cursor.js). The old ring cursor is retired. */
.cursor-orbit { display: none !important; }
.neon-cursor { opacity: .95; }
.cursor-arrow {
  position: fixed;
  z-index: 101;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity .16s ease;
  will-change: transform;
}
.cursor-arrow svg {
  position: absolute;
  /* 26×26 box; the tip of the arrow sits exactly on the pointer */
  left: -13px;
  top: -1px;
  width: 26px;
  height: 26px;
  overflow: visible;
  filter: drop-shadow(0 0 3px rgba(224, 31, 253, .8)) drop-shadow(0 0 9px rgba(28, 25, 215, .6));
  transform-origin: 13px 1px;
  transition: transform .25s cubic-bezier(.22, 1, .36, 1), filter .25s ease;
}
.cursor-arrow.is-visible { opacity: 1; }
.cursor-arrow.is-hover svg {
  transform: scale(1.18);
  filter: drop-shadow(0 0 5px rgba(224, 31, 253, 1)) drop-shadow(0 0 14px rgba(28, 25, 215, .85));
}
.cursor-arrow.is-press svg { animation: cursor-press .28s ease; }
@keyframes cursor-press { 40% { transform: scale(.82); } }
@media (any-pointer: coarse), (hover: none) { .cursor-arrow { display: none; } }
@media (prefers-reduced-motion: reduce) { .cursor-arrow svg { transition: none; animation: none; } }
/* 26 Sep: the vector turns to face the movement; .cursor-rot rotates around the tip (= pointer). */
.cursor-rot { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-origin: 0 0; will-change: transform; }
/* 27 Sep: full opacity so the blades are as bright as the Figma "Flame" frame. */
.neon-cursor { opacity: 1; }

/* 27 Sep: extra-soft blades (Annyesha: "much softer"); the arrow head stays crisp. */
.neon-cursor { filter: blur(5px); }

/* 27 Sep: sparkles around the middle blade stay nearly sharp (Figma dots have a 1px blur); must come after the blade blur. */
.neon-sparkles { filter: blur(.5px); }

/* 27 Sep: sound on/off button (music-toggle.js) from the Figma "Music Animation" frame.
   Fixed in the bottom-left corner (moved 27 Sep), so it stays with you all the way down the page. */
.music-toggle {
 position: fixed; bottom: 24px; left: 2.5%; z-index: 89;
 width: 76px; height: 76px; padding: 0; border-radius: 50%;
 border: 1px solid #450088; background: rgba(2, 1, 5, .72);
 -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
 cursor: pointer; display: grid; place-items: center;
 transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.music-toggle canvas { width: 100%; height: 100%; border-radius: 50%; display: block; }
.music-toggle:hover, .music-toggle:focus-visible { border-color: #b76cff; box-shadow: 0 0 18px rgba(183, 108, 255, .35); }
.music-toggle:focus-visible { outline: 2px solid #b76cff; outline-offset: 3px; }
.music-toggle:active { transform: scale(.95); }
.music-toggle.is-playing { border-color: #6a1fd0; }
@media (max-width: 640px) { .music-toggle { width: 60px; height: 60px; } }
@media (prefers-reduced-motion: reduce) { .music-toggle { transition: none; } }

/* 27 Sep: animated strands divider (footer-strands.js) from the Figma "Footer Animation" frame.
   Full-bleed across the footer, waves flowing left to right, the whole band at 50% opacity.
   It replaces the old thin line above the footer's bottom row. */
.footer-strands {
 display: block; align-self: center; width: 100vw; height: 170px;
 /* taller canvas so sparkles have room to rise; the extra height overlaps the space above (layout unchanged) */
 margin-top: calc(clamp(56px, 7vw, 96px) - 106px); opacity: .5; pointer-events: none;
}
.footer-bottom { margin-top: 8px; border-top: 0; padding-top: 12px; }


/* 27 Sep: music player row — [previous] (sound circle) [next], fixed bottom-left (music-toggle.js positions it). */
.music-player {
 position: fixed; left: 2.5%; bottom: 24px; z-index: 89;
 display: flex; align-items: center; gap: 10px;
}
.music-player .music-toggle { position: relative; left: auto; bottom: auto; top: auto; right: auto; }
.music-skip {
 width: 34px; height: 34px; padding: 0; border-radius: 50%;
 display: grid; place-items: center; cursor: pointer;
 border: 1px solid #450088; background: rgba(2, 1, 5, .72);
 -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
 transition: border-color .25s ease, box-shadow .25s ease, transform .2s ease;
}
.music-skip svg { width: 16px; height: 16px; display: block; }
.music-skip:hover, .music-skip:focus-visible { border-color: #b76cff; box-shadow: 0 0 14px rgba(183, 108, 255, .35); }
.music-skip:focus-visible { outline: 2px solid #b76cff; outline-offset: 3px; }
.music-skip:active { transform: scale(.9); }
@media (max-width: 640px) { .music-skip { width: 28px; height: 28px; } .music-skip svg { width: 13px; height: 13px; } .music-player { gap: 8px; } }
@media (prefers-reduced-motion: reduce) { .music-skip { transition: none; } }

/* 27 Sep: About me (first version, in the site's own style; see CONTENT.md for the draft copy). */
.about-section {
 position: relative; min-height: 100svh; display: flex; align-items: center;
 padding: clamp(90px, 11vw, 150px) 5%;
 background:
  radial-gradient(circle at 88% 20%, rgba(190, 40, 207, .10), transparent 36%),
  radial-gradient(circle at 8% 90%, rgba(42, 63, 198, .10), transparent 34%),
  #000;
 border-top: 1px solid rgba(255, 255, 255, .08);
}
.about-inner {
 width: 100%; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr);
 column-gap: 8vw; row-gap: 48px; align-items: start;
}
.about-kicker {
 margin: 0 0 22px; font-family: 'IBM Plex Sans Condensed', sans-serif; font-size: 14px;
 letter-spacing: .06em; text-transform: uppercase; color: #b76cff; font-weight: 400;}
.about-title {
 margin: 0; font-family: 'Chakra Petch', sans-serif; font-weight: 700;
 font-size: clamp(40px, 5vw, 72px); line-height: 1.02; letter-spacing: -.03em; color: #f5f1f9;
}
.about-line { display: block; }
.about-grad {
 margin-top: .18em;
 background: linear-gradient(90deg, #e01ffd 0%, #1c19d7 100%);
 -webkit-background-clip: text; background-clip: text; color: transparent;
}
.about-body { padding-top: 6px; }
.about-p {
 margin: 0 0 22px; max-width: 52ch; font-family: 'Inter', sans-serif; font-size: 18px;
 line-height: 1.65; color: rgba(245, 241, 249, .78);
}
.about-facts { margin: 38px 0 0; padding: 0; border-top: 1px solid rgba(255, 255, 255, .14); }
.about-facts div {
 display: flex; justify-content: space-between; gap: 24px; padding: 16px 0;
 border-bottom: 1px solid rgba(255, 255, 255, .14);
 font-family: 'IBM Plex Sans Condensed', sans-serif; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; font-weight: 400;}
.about-facts dt { color: rgba(245, 241, 249, .55); }
.about-facts dd { margin: 0; color: #f5f1f9; text-align: right; }

/* arrival reveal: title lines, then paragraphs and facts, fade up in turn (about.js) */
.about-section.is-armed .about-kicker,
.about-section.is-armed .about-line,
.about-section.is-armed .about-p,
.about-section.is-armed .about-facts { opacity: 0; transform: translateY(18px); }
.about-section.is-armed.is-shown .about-kicker,
.about-section.is-armed.is-shown .about-line,
.about-section.is-armed.is-shown .about-p,
.about-section.is-armed.is-shown .about-facts {
 opacity: 1; transform: none;
 transition: opacity .8s cubic-bezier(.22, 1, .36, 1), transform .8s cubic-bezier(.22, 1, .36, 1);
}
.about-section.is-shown .about-line:nth-child(1) { transition-delay: .08s; }
.about-section.is-shown .about-line:nth-child(2) { transition-delay: .22s; }
.about-section.is-shown .about-p:nth-child(1) { transition-delay: .34s; }
.about-section.is-shown .about-p:nth-child(2) { transition-delay: .44s; }
.about-section.is-shown .about-p:nth-child(3) { transition-delay: .54s; }
.about-section.is-shown .about-facts { transition-delay: .66s; }

@media (max-width: 900px) {
 .about-section { padding-inline: 6%; }
 .about-inner { grid-template-columns: 1fr; }
 .about-p { font-size: 17px; }
}

/* 27 Sep: no dividing lines between sections (Annyesha) — sections flow straight into each other. */
.about-section, .site-footer { border-top: 0; }

/* 27 Sep: corner glows blend across sections (Annyesha). The sections are transparent over a black page,
   and each glow sits on its own layer behind everything. That layer reaches well above and below its section,
   so the colour fades softly into the previous and next sections instead of stopping at a hard edge. */
html { background: #000; }
.annygators-section, .about-section, .site-footer { background: transparent; }
.site-footer { z-index: auto; overflow-x: clip; overflow-y: visible; }

.about-section::before,
.site-footer::before {
 content: ''; position: absolute; left: 0; right: 0; z-index: -1; pointer-events: none;
}
.about-section::before {
 top: -40vh; bottom: -40vh;
 background:
  radial-gradient(ellipse 45% 34% at 90% 38%, rgba(190, 40, 207, .11), rgba(190, 40, 207, .04) 55%, transparent 100%),
  radial-gradient(ellipse 45% 34% at 8% 64%, rgba(42, 63, 198, .11), rgba(42, 63, 198, .04) 55%, transparent 100%);
}
.site-footer::before {
 top: -40vh; bottom: 0;
 background:
  radial-gradient(ellipse 42% 26% at 92% 30%, rgba(42, 63, 198, .12), rgba(42, 63, 198, .04) 55%, transparent 100%),
  radial-gradient(ellipse 48% 42% at 12% 100%, rgba(190, 40, 207, .15), rgba(190, 40, 207, .05) 55%, transparent 100%);
}

/* 27 Sep: text falls in word by word when a section arrives, and vaporises upward when you leave (text-fx.js). */
.fx:not(.fx-ready) .intro { opacity: 0; }            /* no flash of the hero text before it falls in */
.fx-armed .fx-w { display: inline-block; }
.fx-armed .fx-w,
.fx-armed .fx-u { opacity: 0; transform: translateY(-.8em); filter: blur(3px); will-change: transform, opacity; }
.fx-armed.fx-in .fx-w,
.fx-armed.fx-in .fx-u {
 opacity: 1; transform: none; filter: none;
 transition: opacity .45s ease-out, transform .62s cubic-bezier(.25, 1.35, .45, 1), filter .45s ease-out;
 transition-delay: calc(var(--i, 0) * var(--fx-step, 30ms));
}
.fx-armed.fx-out .fx-w,
.fx-armed.fx-out .fx-u {
 opacity: 0; transform: translateY(-1.4em) scale(1.06); filter: blur(8px);
 transition: opacity .8s ease-in, transform .95s cubic-bezier(.4, 0, .8, .6), filter .8s ease-in;
 transition-delay: calc(var(--r, 0) * 1ms);
}

/* "Meet the Annygators" keeps its glitch entrance, and vaporises upward on the way out (annygators.js). */
.ag-title.is-vapor { animation: ag-vapor .9s cubic-bezier(.4, 0, .8, .6) forwards; }
@keyframes ag-vapor {
 from { opacity: 1; transform: translateX(-50%); filter: none; }
 to { opacity: 0; transform: translateX(-50%) translateY(-.9em) scale(1.05); filter: blur(10px); }
}

/* 27 Sep: Skills section (between About me and Get in touch). For now it holds the living blob from Figma
   "Blob Animation" (skills-blob.js); the rest of the Skills design is coming from Annyesha. */
.skills-section {
 position: relative; min-height: 100svh; display: flex; align-items: center; justify-content: center;
 padding: clamp(90px, 11vw, 150px) 5%; background: transparent;
}
.skills-section::before {
 content: ''; position: absolute; left: 0; right: 0; top: -40vh; bottom: -40vh; z-index: -1; pointer-events: none;
 background: radial-gradient(ellipse 40% 34% at 50% 55%, rgba(190, 40, 207, .07), rgba(190, 40, 207, .025) 55%, transparent 100%);
}
.skills-inner { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 28px; }
.skills-kicker {
 margin: 0; font-family: 'IBM Plex Sans Condensed', sans-serif; font-size: 14px;
 letter-spacing: .06em; text-transform: uppercase; color: #b76cff; font-weight: 400;}
.skills-blob { display: block; width: clamp(280px, 34vw, 480px); aspect-ratio: 1; }
.visually-hidden {
 position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
 overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* 27 Sep: divider lines appear one by one, drawing left to right, after the section's text has fallen in
   (Annyesha). The real border is hidden and redrawn as a 1px line that grows; it vaporises with the text,
   then quietly resets so it draws in again next time. */
.fx-armed .fx-line-t, .fx-armed .fx-line-b { position: relative; }
.fx-armed .fx-line-t { border-top-color: transparent !important; }
.fx-armed .fx-line-b { border-bottom-color: transparent !important; }
.fx-armed .fx-line-t::before, .fx-armed .fx-line-b::after {
 content: ''; position: absolute; left: 0; right: 0; height: 1px; pointer-events: none;
 background: rgba(255, 255, 255, .14);
 scale: 0 1; transform-origin: left center; opacity: 0;
}
.fx-armed .fx-line-t::before { top: -1px; }
.fx-armed .fx-line-b::after { bottom: -1px; }
.fx-armed.fx-in .fx-line-t::before, .fx-armed.fx-in .fx-line-b::after {
 scale: 1 1; opacity: 1; translate: 0 0; filter: none;
 transition: scale .75s cubic-bezier(.65, 0, .25, 1), opacity .2s linear;
 transition-delay: calc(var(--fx-lines, 600ms) + var(--li, 0) * 180ms);
}
.fx-armed.fx-out .fx-line-t::before, .fx-armed.fx-out .fx-line-b::after {
 scale: 0 1; translate: 0 -10px; opacity: 0; filter: blur(3px);
 transition: opacity .7s ease-in, translate .8s cubic-bezier(.4, 0, .8, .6), filter .7s ease-in, scale 0s linear .9s;
 transition-delay: calc(var(--li, 0) * 40ms), calc(var(--li, 0) * 40ms), calc(var(--li, 0) * 40ms), .95s;
}

/* 27 Sep: "Tap Here" sits in the middle of the Skills blob and glitches constantly (Annyesha).
   The "Skills" label above the blob is gone. Pink and cyan copies split off, and slices jump sideways
   in quick bursts, then it holds just long enough to read. */
.skills-stage { position: relative; display: grid; place-items: center; }
.skills-tap {
 position: absolute; left: 50%; top: 50%; translate: -50% -50%;
 padding: 14px 18px; border: 0; background: transparent; cursor: pointer;
 font-family: 'IBM Plex Sans Condensed', sans-serif; font-size: clamp(18px, 1.9vw, 24px);
 letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; color: #f5f1f9;
 text-shadow: 0 0 12px rgba(224, 31, 253, .45); font-weight: 400;}
.skills-tap span { position: relative; display: inline-block; animation: skills-glitch 2.2s steps(1, end) infinite; }
.skills-tap::before, .skills-tap::after {
 content: attr(data-text); position: absolute; inset: 14px 18px; pointer-events: none;
 mix-blend-mode: screen; opacity: 0;
}
.skills-tap::before { color: #e01ffd; animation: skills-split-a 2.2s steps(1, end) infinite; }
.skills-tap::after { color: #00e5ff; animation: skills-split-b 2.2s steps(1, end) infinite .07s; }
.skills-tap:hover span, .skills-tap:focus-visible span { color: #fff; text-shadow: 0 0 16px rgba(224, 31, 253, .8); }
.skills-tap:focus-visible { outline: 1px solid #b76cff; outline-offset: 4px; }

@keyframes skills-glitch {
 0%, 100% { clip-path: none; transform: none; opacity: 1; }
 4%  { clip-path: inset(12% 0 55% 0); transform: translateX(-5px); }
 7%  { clip-path: inset(58% 0 10% 0); transform: translateX(6px); }
 10% { clip-path: none; transform: translateX(-2px); opacity: .75; }
 13% { clip-path: none; transform: none; opacity: 1; }
 46% { clip-path: inset(40% 0 38% 0); transform: translateX(4px); }
 48% { clip-path: none; transform: none; opacity: .6; }
 50% { opacity: 1; }
 70% { clip-path: inset(0 0 70% 0); transform: translateX(-7px); }
 73% { clip-path: inset(72% 0 0 0); transform: translateX(5px); }
 76% { clip-path: inset(30% 0 45% 0); transform: translateX(-3px); }
 79% { clip-path: none; transform: none; }
}
@keyframes skills-split-a {
 0%, 100% { opacity: 0; transform: none; clip-path: none; }
 4%  { opacity: .9; transform: translate(-4px, 0); clip-path: inset(60% 0 8% 0); }
 8%  { opacity: .8; transform: translate(3px, 0); clip-path: inset(5% 0 70% 0); }
 12% { opacity: 0; }
 46% { opacity: .7; transform: translate(-3px, 0); clip-path: inset(35% 0 40% 0); }
 49% { opacity: 0; }
 70% { opacity: .9; transform: translate(-6px, 0); clip-path: inset(15% 0 50% 0); }
 74% { opacity: .8; transform: translate(4px, 0); clip-path: inset(70% 0 5% 0); }
 78% { opacity: 0; }
}
@keyframes skills-split-b {
 0%, 100% { opacity: 0; transform: none; clip-path: none; }
 4%  { opacity: .9; transform: translate(4px, 0); clip-path: inset(18% 0 52% 0); }
 8%  { opacity: .8; transform: translate(-3px, 0); clip-path: inset(62% 0 12% 0); }
 12% { opacity: 0; }
 46% { opacity: .7; transform: translate(3px, 0); clip-path: inset(10% 0 66% 0); }
 49% { opacity: 0; }
 70% { opacity: .9; transform: translate(6px, 0); clip-path: inset(50% 0 22% 0); }
 74% { opacity: .8; transform: translate(-4px, 0); clip-path: inset(0 0 75% 0); }
 78% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
 .skills-tap span, .skills-tap::before, .skills-tap::after { animation: none; }
}

/* 27 Sep: footer link hover — logo, name and arrow slide right together as one row (Annyesha): the same
   10px, the same duration and the same easing, starting at the same moment. The slide uses `translate`
   (not `transform`) so it never mixes with the text fall-in timing, which staggers each name by its word
   index. The arrow rests 10px in from the line's end so it slides up to the edge rather than past it. */
.footer-links li a { padding-right: 10px; }
.footer-links li a .footer-icon,
.footer-links li a .footer-logo-wrap,
.footer-links li a .footer-link-label,
.footer-links li a .footer-arrow {
  transition: translate .45s cubic-bezier(.22, 1, .36, 1), filter .3s ease, color .3s ease;
}
#contact.fx-armed.fx-in .footer-links li a .footer-link-label {
  transition: opacity .45s ease-out, transform .62s cubic-bezier(.25, 1.35, .45, 1), filter .45s ease-out,
    translate .45s cubic-bezier(.22, 1, .36, 1);
  transition-delay: calc(var(--i, 0) * var(--fx-step, 30ms)), calc(var(--i, 0) * var(--fx-step, 30ms)),
    calc(var(--i, 0) * var(--fx-step, 30ms)), 0s;
}
.footer-links li a:hover .footer-icon,
.footer-links li a:focus-visible .footer-icon,
.footer-links li a:hover .footer-logo-wrap,
.footer-links li a:focus-visible .footer-logo-wrap,
.footer-links li a:hover .footer-arrow,
.footer-links li a:focus-visible .footer-arrow { transform: none; translate: 10px 0; }
.footer-links li a:hover .footer-link-label,
.footer-links li a:focus-visible .footer-link-label { transform: none; translate: 10px 0; }
@media (prefers-reduced-motion: reduce) {
  .footer-links li a:hover :is(.footer-icon, .footer-logo-wrap, .footer-link-label, .footer-arrow),
  .footer-links li a:focus-visible :is(.footer-icon, .footer-logo-wrap, .footer-link-label, .footer-arrow) { translate: none; }
}

/* 27 Sep: Skills blob and "Tap Here" a little bigger (Annyesha). */
.skills-blob { width: min(92vw, clamp(340px, 42vw, 600px)); }
.skills-tap { font-size: clamp(22px, 2.4vw, 32px); }

/* 27 Sep: Skills overlay, from Figma "Skills Overlay" (node 106:349): a frosted-glass box in the middle of the
   screen. Fill #7F1FFD at 10%, 1px gradient border #E01FFD -> #0019BB (top to bottom) at 30%, 32px corners,
   near-square like the frame (257 x 264). Background blur frosts the page behind; a soft scrim dims it. */
.skills-stage { cursor: pointer; }
.skills-overlay { position: fixed; inset: 0; z-index: 95; /* above the nav (90) and music (89), below the neon cursor (100/101) */ display: grid; place-items: center; padding: 24px; }
.skills-overlay[hidden] { display: none; }
.skills-overlay__scrim {
 position: absolute; inset: 0; background: rgba(2, 1, 5, .45);
 backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
 opacity: 0; transition: opacity .4s ease;
}
.skills-overlay__box {
 position: relative; width: min(92vw, 720px); aspect-ratio: 257 / 264; max-height: calc(100svh - 48px);
 border-radius: 32px; background: rgba(127, 31, 253, .10);
 backdrop-filter: blur(28px) saturate(140%); -webkit-backdrop-filter: blur(28px) saturate(140%);
 box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 30px 80px rgba(0, 0, 0, .45);
 opacity: 0; transform: translateY(16px) scale(.94);
 transition: opacity .4s ease, transform .5s cubic-bezier(.22, 1, .36, 1);
 outline: none; overflow: auto;
}
.skills-overlay__box::before {                  /* the gradient border, 1px, at 30% */
 content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
 background: linear-gradient(180deg, #e01ffd, #0019bb); opacity: .3;
 -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
 -webkit-mask-composite: xor; mask-composite: exclude;
}
.skills-overlay.is-open .skills-overlay__scrim { opacity: 1; }
.skills-overlay.is-open .skills-overlay__box { opacity: 1; transform: none; }
.skills-overlay__close {
 position: absolute; top: 18px; right: 18px; width: 44px; height: 44px; display: grid; place-items: center;
 border: 0; border-radius: 50%; background: rgba(255, 255, 255, .06); color: #f5f1f9; cursor: pointer;
 transition: background .25s, transform .25s;
}
.skills-overlay__close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.skills-overlay__close:hover, .skills-overlay__close:focus-visible { background: rgba(224, 31, 253, .18); transform: rotate(90deg); }
.skills-overlay__close:focus-visible { outline: 1px solid #b76cff; outline-offset: 3px; }
.skills-overlay__content { padding: 72px 40px 40px; }
html.skills-open, html.skills-open body { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
 .skills-overlay__box, .skills-overlay__scrim { transition: opacity .2s linear; transform: none; }
}

/* 27 Sep: Skills overlay updated from Figma (106:349): fill is now #1C19D7 at 10%, border a solid 1px #F4ABFF
   at 30% (no longer the gradient). Size, corners and frosted blur unchanged. */
.skills-overlay__box { background: rgba(224, 31, 253, .06); }   /* 27 Sep: Figma fill now #E01FFD at 6% */
.skills-overlay__box::before { background: #f4abff; opacity: .3; }

/* 27 Sep: while the Skills overlay is open, background CSS loops freeze too (the "Tap Here" glitch, footer
   icon glows and so on) and resume from the same frame when it closes. The overlay and cursor keep moving. */
html.bg-paused main *, html.bg-paused main *::before, html.bg-paused main *::after,
html.bg-paused .site-footer *, html.bg-paused .site-footer *::before, html.bg-paused .site-footer *::after,
html.bg-paused .music-player * { animation-play-state: paused !important; }

/* 27 Sep: only the "Tap Here" text opens the Skills overlay (Annyesha); the blob itself isn't tappable.
   The button hugs the text instead of carrying extra padding around it. */
.skills-stage { cursor: auto; }
.skills-tap { padding: 4px 6px; }
.skills-tap::before, .skills-tap::after { inset: 4px 6px; }

/* 27 Sep: "Tap Here" becomes a warning label (Annyesha): the Figma caution icon + "Caution", and
   "Weapons Inside" underneath. Both lines keep the constant glitch; the second line runs a beat behind. */
.skills-tap { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 6px 8px; line-height: 1.05; }
.skills-tap::before, .skills-tap::after { content: none; }
.skills-tap span { animation: none; }
.skills-tap__row { display: inline-flex; align-items: center; gap: .45em; animation: skills-glitch 2.2s steps(1, end) infinite !important; }
.skills-tap__row--sub { font-size: .62em; letter-spacing: .22em; color: #dcc4ff; animation-delay: -.9s !important; }
.skills-tap__icon {
 width: 1.25em; height: 1.2em; flex: none; overflow: visible;
 filter: drop-shadow(0 0 4px rgba(224, 31, 253, .7)) drop-shadow(0 0 10px rgba(28, 25, 215, .55));
}
.skills-tap__word { position: relative; display: inline-block; }
.skills-tap__word::before, .skills-tap__word::after {
 content: attr(data-text); position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; opacity: 0; white-space: nowrap;
}
.skills-tap__word::before { color: #e01ffd; animation: skills-split-a 2.2s steps(1, end) infinite; }
.skills-tap__word::after { color: #00e5ff; animation: skills-split-b 2.2s steps(1, end) infinite .07s; }
.skills-tap__row--sub .skills-tap__word::before { animation-delay: -.9s; }
.skills-tap__row--sub .skills-tap__word::after { animation-delay: -.83s; }
@media (prefers-reduced-motion: reduce) {
 .skills-tap__row, .skills-tap__word::before, .skills-tap__word::after { animation: none !important; }
}

/* 27 Sep: tighter gap between "Caution" and its icon (Annyesha). The word's trailing letter-spacing is
   pulled back so the visible gap is a small .3em. */
/* the rows are flex (an earlier `.skills-tap span` rule had been turning them into plain blocks, so the
   spaces in the markup were showing up as a wide gap) */
.skills-tap .skills-tap__row { display: flex; }
.skills-tap__row:not(.skills-tap__row--sub) { gap: .3em; }
.skills-tap__row:not(.skills-tap__row--sub) .skills-tap__word { margin-right: -.14em; }

/* 27 Sep: calmer glitch on the Skills label (Annyesha: "too much and too often"). Now one short burst
   every 4s instead of three bursts every 2.2s, with smaller jumps (2-3px instead of up to 7px) and fainter
   pink/cyan copies. The two lines still glitch a beat apart. */
.skills-tap .skills-tap__row { animation: skills-glitch-soft 4s steps(1, end) infinite !important; }
.skills-tap .skills-tap__row--sub { animation-delay: -1.7s !important; }
.skills-tap__word::before { animation: skills-split-soft-a 4s steps(1, end) infinite; }
.skills-tap__word::after { animation: skills-split-soft-b 4s steps(1, end) infinite .06s; }
.skills-tap__row--sub .skills-tap__word::before { animation-delay: -1.7s; }
.skills-tap__row--sub .skills-tap__word::after { animation-delay: -1.64s; }
@keyframes skills-glitch-soft {
 0%, 100% { clip-path: none; transform: none; opacity: 1; }
 70% { clip-path: inset(15% 0 55% 0); transform: translateX(-3px); }
 72% { clip-path: inset(60% 0 12% 0); transform: translateX(2px); }
 74% { clip-path: none; transform: none; opacity: .8; }
 76% { opacity: 1; }
}
@keyframes skills-split-soft-a {
 0%, 100% { opacity: 0; transform: none; clip-path: none; }
 70% { opacity: .55; transform: translate(-2px, 0); clip-path: inset(55% 0 10% 0); }
 73% { opacity: 0; }
}
@keyframes skills-split-soft-b {
 0%, 100% { opacity: 0; transform: none; clip-path: none; }
 70% { opacity: .55; transform: translate(2px, 0); clip-path: inset(10% 0 60% 0); }
 73% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
 .skills-tap .skills-tap__row, .skills-tap__word::before, .skills-tap__word::after { animation: none !important; }
}

/* 27 Sep: Skills overlay updated from Figma (106:349): fill black at 25%, border 1px #BE28CF at 20%. */
.skills-overlay__box { background: rgba(0, 0, 0, .25); }
.skills-overlay__box::before { background: #be28cf; opacity: .2; }

/* 28 Sep: in the footer, each link's logo and arrow now fall in at the same moment as its name
   (Annyesha), instead of already being there. They use the same drop, bounce and timing as the name.
   The fall uses `transform` and the hover slide uses `translate`, so the two never interfere; the glow
   (filter) is left alone so the logos keep their neon. */
.fx-armed .fx-g { opacity: 0; transform: translateY(-.8em); }
#contact.fx-armed.fx-in .footer-links li a .fx-g {
 opacity: 1; transform: none;
 transition: opacity .45s ease-out, transform .62s cubic-bezier(.25, 1.35, .45, 1),
   translate .45s cubic-bezier(.22, 1, .36, 1), filter .3s ease, color .3s ease;
 transition-delay: calc(var(--i, 0) * var(--fx-step, 30ms)), calc(var(--i, 0) * var(--fx-step, 30ms)), 0s, 0s, 0s;
}
#contact.fx-armed.fx-out .footer-links li a .fx-g {
 opacity: 0; transform: translateY(-1.4em) scale(1.06);
 transition: opacity .8s ease-in, transform .95s cubic-bezier(.4, 0, .8, .6);
 transition-delay: calc(var(--r, 0) * 1ms);
}

/* 28 Sep: Skills stack inside the overlay (skills-stack.js). Each skill is a neon wireframe cuboid like
   Annyesha's reference cube: violet edges on the left fading to cyan on the right, dark glassy faces, a soft
   glow around the edges and a violet/cyan light pool on the floor. Logo first, then the name, on the front.
   On opening, the cuboids drop from the top of the box one at a time (110ms apart), fall with gravity, squash
   a little as they land and settle, stacking up from the floor. */
.skills-overlay__box { display: flex; flex-direction: column; overflow: hidden; }
.skills-overlay__close { z-index: 60; }
.skills-overlay__content { flex: 1; min-height: 0; padding: 76px clamp(20px, 5%, 40px) clamp(22px, 4%, 34px); }
.skills-stack { position: relative; width: 100%; height: 100%; }
.skills-stack__list { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; height: auto !important; }
.cuboid {
 position: absolute; width: calc(var(--cub-w) + var(--cub-d)); height: calc(var(--cub-h) + var(--cub-d));
 transform-origin: 50% 100%; opacity: 0;
}
.cuboid__shape {
 position: absolute; left: -1px; top: -1px; overflow: visible;
 filter: drop-shadow(0 0 2px rgba(194, 77, 255, .85)) drop-shadow(0 0 7px rgba(46, 230, 255, .45));
}
.cuboid__face {
 position: absolute; left: 0; top: var(--cub-d); width: var(--cub-w); height: var(--cub-h);
 display: flex; align-items: center; gap: .6em; padding: 0 .9em; box-sizing: border-box; overflow: hidden;
 font-family: 'IBM Plex Sans Condensed', sans-serif; font-size: var(--cub-fs, 13px); letter-spacing: .04em; color: #f5f1f9;
 white-space: nowrap; text-shadow: 0 0 8px rgba(194, 77, 255, .45); font-weight: 400;}
.cuboid__name { overflow: hidden; text-overflow: ellipsis; }
.cuboid__logo { flex: none; width: 1.45em; height: 1.45em; position: relative; }
.cuboid__logo.has-logo {
 background: #fff; -webkit-mask: var(--logo) center / contain no-repeat; mask: var(--logo) center / contain no-repeat;
 filter: drop-shadow(0 0 4px rgba(194, 77, 255, .8)) drop-shadow(0 0 8px rgba(46, 230, 255, .4));
}
.cuboid__logo:not(.has-logo)::before {               /* no logo file yet: initials in a small neon square */
 content: attr(data-initials); position: absolute; inset: 0; display: grid; place-items: center;
 border: 1px solid rgba(46, 230, 255, .7); border-radius: 3px; font-size: .62em; letter-spacing: 0; color: #dff7ff;
}
.skills-stack__floor {
 position: absolute; left: -4%; right: -4%; height: 46px; pointer-events: none; opacity: 0;
 background:
  radial-gradient(ellipse 38% 100% at 22% 0%, rgba(194, 77, 255, .45), transparent 70%),
  radial-gradient(ellipse 38% 100% at 78% 0%, rgba(46, 230, 255, .4), transparent 70%);
 filter: blur(10px);
}
.skills-stack.is-dropped .skills-stack__floor { opacity: 1; transition: opacity .8s ease .9s; }
.skills-stack.is-dropped .cuboid {
 animation: cub-drop .8s linear both;
 animation-delay: calc(var(--n) * 110ms + 350ms);
}
.skills-stack.is-dropped .cuboid__shape { animation: cub-flash .8s linear both; animation-delay: calc(var(--n) * 110ms + 350ms); }
@keyframes cub-drop {
 0%   { opacity: 1; transform: translateY(calc(-1 * var(--fall))); animation-timing-function: cubic-bezier(.55, 0, 1, .6); }
 58%  { transform: translateY(0) scale(1, 1); animation-timing-function: ease-out; }
 68%  { transform: translateY(0) scale(1.035, .9); animation-timing-function: ease-out; }
 82%  { transform: translateY(-4px) scale(.99, 1.02); animation-timing-function: ease-in-out; }
 100% { opacity: 1; transform: none; }
}
@keyframes cub-flash {
 0%, 56% { filter: drop-shadow(0 0 2px rgba(194, 77, 255, .85)) drop-shadow(0 0 7px rgba(46, 230, 255, .45)); }
 64%     { filter: drop-shadow(0 0 4px rgba(214, 120, 255, 1)) drop-shadow(0 0 16px rgba(46, 230, 255, .9)); }
 100%    { filter: drop-shadow(0 0 2px rgba(194, 77, 255, .85)) drop-shadow(0 0 7px rgba(46, 230, 255, .45)); }
}
@media (prefers-reduced-motion: reduce) {
 .skills-stack.is-dropped .cuboid, .skills-stack.is-dropped .cuboid__shape { animation: none; opacity: 1; }
}

/* 28 Sep (v2): the skills now fall as a physics pile (skills-stack.js + vendor/matter.min.js). Boxes are
   light: see-through faces, sized to their own name, tumbling and bouncing into a haphazard heap.
   Click a box and it jumps up and falls back. These rules replace the earlier neat-stack drop animation. */
.skills-overlay__content { padding: 70px clamp(16px, 3.5%, 28px) clamp(16px, 3%, 24px); }
.skills-stack.is-dropped .cuboid, .skills-stack.is-dropped .cuboid__shape { animation: none; }
.cuboid { left: 0; top: 0; transform-origin: 50% 50%; opacity: 0; will-change: transform; }
.cuboid.is-in { opacity: 1; }
.cuboid__btn {
 position: absolute; inset: 0; padding: 0; margin: 0; border: 0; background: none; color: inherit; font: inherit;
 cursor: pointer; text-align: left; -webkit-tap-highlight-color: transparent;
}
.cuboid__btn:focus-visible { outline: 1px solid #2ee6ff; outline-offset: 3px; border-radius: 2px; }
.cuboid__face { width: auto; height: auto; padding: 0 .85em; gap: .55em; }
.cuboid__btn:hover .cuboid__shape { filter: drop-shadow(0 0 3px rgba(214, 120, 255, 1)) drop-shadow(0 0 12px rgba(46, 230, 255, .75)); }
.skills-stack.is-live .skills-stack__floor, .skills-stack.is-static .skills-stack__floor { top: auto; bottom: -6px; opacity: 1; transition: opacity 1s ease .6s; }
/* reduced motion: no physics, just a loose resting heap in rows */
.skills-stack.is-static .skills-stack__list { display: flex; flex-wrap: wrap-reverse; align-content: flex-start; gap: 6px 10px; }
.skills-stack.is-static .cuboid { position: relative; }

/* 28 Sep: cuboid colours now match the Skills blob strands (Annyesha): pink #E01FFD (left) to blue #0019BB
   (right) on the edges, with pink and blue glows, floor pool and accents in the same two colours. */
.cuboid__shape { filter: drop-shadow(0 0 2px rgba(224, 31, 253, .85)) drop-shadow(0 0 7px rgba(0, 25, 187, .9)); }
.cuboid__btn:hover .cuboid__shape { filter: drop-shadow(0 0 3px rgba(224, 31, 253, 1)) drop-shadow(0 0 12px rgba(40, 60, 255, .95)); }
.cuboid__btn:focus-visible { outline-color: #e01ffd; }
.cuboid__face { text-shadow: 0 0 8px rgba(224, 31, 253, .45); }
.cuboid__logo.has-logo { filter: drop-shadow(0 0 4px rgba(224, 31, 253, .8)) drop-shadow(0 0 8px rgba(0, 25, 187, .8)); }
.cuboid__logo:not(.has-logo)::before { border-color: rgba(224, 31, 253, .7); color: #f6dcff; }
.skills-stack__floor {
 background:
  radial-gradient(ellipse 38% 100% at 22% 0%, rgba(224, 31, 253, .45), transparent 70%),
  radial-gradient(ellipse 38% 100% at 78% 0%, rgba(0, 25, 187, .6), transparent 70%);
}

/* 28 Sep: preview only (?skills=brand): each cuboid glows in its own brand's two colours (--c1 left, --c2 right). */
.skills-stack.is-brand .cuboid__shape { filter: drop-shadow(0 0 2px var(--c1)) drop-shadow(0 0 7px color-mix(in srgb, var(--c2) 80%, transparent)); }
.skills-stack.is-brand .cuboid__btn:hover .cuboid__shape { filter: drop-shadow(0 0 3px var(--c1)) drop-shadow(0 0 12px var(--c2)); }
.skills-stack.is-brand .cuboid__face { text-shadow: 0 0 8px color-mix(in srgb, var(--c1) 50%, transparent); }
.skills-stack.is-brand .cuboid__logo.has-logo { filter: drop-shadow(0 0 4px var(--c1)) drop-shadow(0 0 8px color-mix(in srgb, var(--c2) 70%, transparent)); }
.skills-stack.is-brand .cuboid__logo:not(.has-logo)::before { border-color: var(--c1); }

/* 28 Sep: skill cuboids a little bigger (Annyesha): text ~20% larger (skills-stack.js) and logos 1.6em. */
.cuboid__logo { width: 1.6em; height: 1.6em; }

/* 3 Oct: About me — portrait on the left with the headline as a quote inside the same frame (Annyesha). */
.about-frame { margin: 0; padding: 14px; border-radius: 26px; max-width: 640px;
 background: linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.015));
 border: 1px solid rgba(183,108,255,.38); box-shadow: 0 0 40px rgba(183,108,255,.12), inset 0 0 0 1px rgba(255,255,255,.03); }
.about-photo { position: relative; overflow: hidden; border-radius: 16px; aspect-ratio: 4 / 5; max-height: 68vh; width: 100%;
 background: linear-gradient(145deg, rgba(224,31,253,.16), rgba(28,25,215,.16)), #0a0612; }
.about-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.about-photo__ph { display: none; position: absolute; inset: 0; place-items: center; font-family: 'IBM Plex Sans Condensed', sans-serif;
 font-size: 14px; letter-spacing: .06em; text-transform: uppercase; color: rgba(245,241,249,.55); font-weight: 400;}
.about-photo.is-empty img { display: none; }
.about-photo.is-empty .about-photo__ph { display: grid; }
.about-quote { margin: 0; padding: 26px 16px 14px; }
.about-quote .about-title { font-size: clamp(30px, 3.4vw, 52px); line-height: 1.05; }
@media (max-width: 900px) { .about-frame { max-width: none; } .about-quote .about-title { font-size: clamp(28px, 8vw, 44px); } }

/* 3 Oct: align the photo frame's top edge with the first line of the right-hand text. */
@media (min-width: 901px) {
 .about-head { position: relative; }
 .about-head .about-kicker { position: absolute; left: 0; bottom: calc(100% + 18px); margin: 0; }
 .about-body { padding-top: 0; }
 .about-inner { align-items: start; }
 .about-body .about-p:first-child { margin-top: 0; }
}

/* 3 Oct: headline sits inside the photo's lower part; the photo melts into black with a blurred, feathered edge (Annyesha). */
.about-frame { display: grid; background: #060309; }
.about-frame > .about-photo, .about-frame > .about-quote { grid-area: 1 / 1; }
.about-frame .about-photo { aspect-ratio: 4 / 5; max-height: 74vh; }
.about-frame .about-quote { position: relative; align-self: end; z-index: 2; padding: 150px 26px 26px; border-radius: 0 0 16px 16px; pointer-events: none; }
.about-frame .about-quote::before {
 content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
 background: linear-gradient(to top, rgba(6,3,9,1) 0%, rgba(6,3,9,.96) 38%, rgba(6,3,9,.6) 68%, rgba(6,3,9,0) 100%);
 -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
 -webkit-mask-image: linear-gradient(to top, #000 0%, #000 55%, transparent 100%);
 mask-image: linear-gradient(to top, #000 0%, #000 55%, transparent 100%);
}
.about-frame .about-quote .about-title { font-size: clamp(26px, 2.9vw, 44px); line-height: 1.06; position: relative; }
@media (max-width: 900px) { .about-frame .about-quote { padding: 120px 20px 20px; } .about-frame .about-quote .about-title { font-size: clamp(24px, 6.4vw, 38px); } }

/* 3 Oct: real portrait. Shown at full width from the top so her face stays clear; the lower part of the frame is black for the quote, and the photo fades into it. */
.about-frame .about-photo:not(.is-empty) { background: #060309; }
.about-frame .about-photo img { position: absolute; top: 0; left: 0; width: 100%; height: auto; object-fit: cover;
 -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 68%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, #000 68%, transparent 100%); }

/* 3 Oct: the whole About me section lives in one frame: portrait (with the quote at its foot) on the left, all the text on the right; edges melt into each other (Annyesha). */
.about-inner { display: block; }
.about-card { position: relative; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); width: 100%; max-width: 1280px; margin: 0 auto;
 border-radius: 28px; overflow: hidden; background: #060309; border: 1px solid rgba(183,108,255,.38);
 box-shadow: 0 0 50px rgba(183,108,255,.12), inset 0 0 0 1px rgba(255,255,255,.03); }
.about-card .about-photo { position: relative; margin: 0; min-height: 560px; height: 100%; max-height: none; aspect-ratio: auto; border-radius: 0; overflow: hidden; background: #060309; }
.about-card .about-photo:not(.is-empty) { background: #060309; }
.about-card .about-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%;
 -webkit-mask-image: linear-gradient(to right, #000 0%, #000 70%, transparent 100%), linear-gradient(to bottom, #000 0%, #000 56%, transparent 96%);
 -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, #000 0%, #000 70%, transparent 100%), linear-gradient(to bottom, #000 0%, #000 56%, transparent 96%); mask-composite: intersect; }
.about-card .about-photo.is-empty { background: linear-gradient(145deg, rgba(224,31,253,.16), rgba(28,25,215,.16)), #0a0612; }
.about-card .about-photo.is-empty img { display: none; }
.about-card .about-quote { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; margin: 0; padding: 120px 38px 34px; pointer-events: none; }
.about-card .about-quote::before { content: ''; position: absolute; inset: 0; z-index: -1;
 background: linear-gradient(to top, rgba(6,3,9,1) 0%, rgba(6,3,9,.94) 40%, rgba(6,3,9,.55) 70%, rgba(6,3,9,0) 100%);
 -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
 -webkit-mask-image: linear-gradient(to top, #000 0%, #000 55%, transparent 100%); mask-image: linear-gradient(to top, #000 0%, #000 55%, transparent 100%); }
.about-card .about-quote .about-title { margin: 0; font-family: 'Chakra Petch', sans-serif; font-weight: 700; font-size: clamp(19px, 1.75vw, 26px); line-height: 1.18; letter-spacing: -.01em; }
.about-card .about-photo::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 22%; z-index: 1; pointer-events: none;
 -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
 -webkit-mask-image: linear-gradient(to right, transparent, #000); mask-image: linear-gradient(to right, transparent, #000); }
.about-card .about-body { position: relative; z-index: 2; padding: clamp(34px, 4.2vw, 64px) clamp(28px, 4vw, 60px) clamp(34px, 4vw, 56px) clamp(10px, 1.5vw, 24px); align-self: center; }
.about-card .about-kicker { margin: 0 0 22px; }
.about-card .about-p { max-width: none; }
@media (max-width: 900px) {
 .about-card { grid-template-columns: 1fr; }
 .about-card .about-photo { min-height: 0; aspect-ratio: 4 / 5; height: auto; }
 .about-card .about-photo img { -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 56%, transparent 96%); mask-image: linear-gradient(to bottom, #000 0%, #000 56%, transparent 96%); }
 .about-card .about-photo::after { display: none; }
 .about-card .about-body { padding: 8px 24px 34px; }
 .about-card .about-quote { padding: 100px 22px 24px; }
}

/* 3 Oct: show the whole portrait (fit, not fill); the leftover space is the card's black. */
.about-card .about-photo img { object-fit: contain; object-position: 50% 0; }

/* 3 Oct: photo at its natural shape, all four edges feathered into the black (mask sits exactly on the picture's edges). */
.about-card .about-photo { min-height: 0; height: auto; aspect-ratio: auto; align-self: stretch; }
.about-card .about-photo:not(.is-empty) img { position: relative; inset: auto; display: block; width: 100%; height: auto; object-fit: fill;
 -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 16%, #000 66%, transparent 100%), linear-gradient(to bottom, transparent 0%, #000 14%, #000 54%, transparent 96%);
 -webkit-mask-composite: source-in;
 mask-image: linear-gradient(to right, transparent 0%, #000 16%, #000 66%, transparent 100%), linear-gradient(to bottom, transparent 0%, #000 14%, #000 54%, transparent 96%);
 mask-composite: intersect; }
.about-card .about-photo.is-empty { min-height: 560px; }
@media (max-width: 900px) {
 .about-card .about-photo:not(.is-empty) img { -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 14%, #000 86%, transparent 100%), linear-gradient(to bottom, transparent 0%, #000 12%, #000 54%, transparent 96%); mask-image: linear-gradient(to right, transparent 0%, #000 14%, #000 86%, transparent 100%), linear-gradient(to bottom, transparent 0%, #000 12%, #000 54%, transparent 96%); }
}

/* 3 Oct: never crop the portrait. It sits whole inside a black margin; only its outermost few percent soften into the black, and the blur strip over the photo is removed. */
.about-card .about-photo::after { display: none; }
.about-card .about-photo:not(.is-empty) { padding: clamp(14px, 2.4vw, 30px) clamp(14px, 2.4vw, 30px) 0; box-sizing: border-box; }
.about-card .about-photo:not(.is-empty) img { width: 100%; height: auto; max-width: 100%;
 -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 7%, #000 93%, transparent 100%), linear-gradient(to bottom, transparent 0%, #000 6%, #000 58%, transparent 99%);
 mask-image: linear-gradient(to right, transparent 0%, #000 7%, #000 93%, transparent 100%), linear-gradient(to bottom, transparent 0%, #000 6%, #000 58%, transparent 99%); }
@media (max-width: 900px) { .about-card .about-photo:not(.is-empty) img { -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 7%, #000 93%, transparent 100%), linear-gradient(to bottom, transparent 0%, #000 6%, #000 58%, transparent 99%); mask-image: linear-gradient(to right, transparent 0%, #000 7%, #000 93%, transparent 100%), linear-gradient(to bottom, transparent 0%, #000 6%, #000 58%, transparent 99%); } }

/* 3 Oct: the About me frame tilts toward the pointer and its outline brightens on hover, like the Get in touch CTA. */
.about-card { --tilt-x: 0deg; --tilt-y: 0deg; transform: perspective(1400px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)); transform-origin: 50% 50%;
 transition: transform .15s ease-out, border-color .25s ease, box-shadow .25s ease; will-change: transform; }
.about-card:hover { border-color: #c98cff; box-shadow: 0 0 22px rgba(201,140,255,.38), 0 0 60px rgba(139,66,255,.2), inset 0 0 0 1px rgba(255,255,255,.04); }
@media (prefers-reduced-motion: reduce) { .about-card { transform: none; will-change: auto; } }

/* 3 Oct: logos replace the Then / Now / Always list. A continuous strip: logos enter from the right edge of the frame and leave through the left, in plain white (no colour). */
.about-logos { position: relative; margin-top: 38px; padding: 26px 0 0; border-top: 1px solid rgba(255,255,255,.14); overflow: hidden;
 -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 92%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 92%, transparent 100%); }
.about-logos { --lead: clamp(40px, 5vw, 76px); }
.about-logos__track { display: flex; width: max-content; padding-left: var(--lead); animation: about-logos-scroll 34s linear infinite; }
.about-logos__grp { display: flex; align-items: center; flex: none; gap: clamp(40px, 4.4vw, 68px); padding-right: clamp(40px, 4.4vw, 68px); }
.about-logo { display: block; height: clamp(34px, 3.3vw, 48px); width: auto; flex: none; opacity: .86; user-select: none; -webkit-user-drag: none; }
.about-logo--iitk { height: clamp(40px, 3.9vw, 56px); }
.about-logo--care { height: clamp(40px, 4vw, 58px); }
.about-logo--presidential { height: clamp(26px, 2.6vw, 38px); }
@keyframes about-logos-scroll { from { transform: translateX(0); } to { transform: translateX(calc(-33.3333% + var(--lead) / 3)); } }
@media (prefers-reduced-motion: reduce) { .about-logos { overflow-x: auto; -webkit-mask-image: none; mask-image: none; } .about-logos__track { animation: none; } }

/* 3 Oct: one cursor everywhere -- the native pointer is hidden on every element (project cards, skills stage, overlays) so only the Figma arrow + blaze shows. */
@media (hover: hover) and (pointer: fine) { *, *::before, *::after { cursor: none !important; } }

/* Annygator logo (from Figma "ANNYGATOR LOGO") replaces the text wordmark */
.wordmark { display:inline-flex; align-items:center; line-height:0; }
.wordmark .wordmark__logo { display:block; height:30px; width:auto; overflow:visible; filter:drop-shadow(0 0 8px rgba(139,66,255,.35)); transition:filter .25s ease, transform .25s ease; }
.wordmark:hover .wordmark__logo { filter:drop-shadow(0 0 8px rgba(139,66,255,.35)); }
@media (max-width:700px) { .wordmark .wordmark__logo { height:24px; } }

/* Logo click = the same glitch as "Meet the Annygators": slice jitter + magenta/cyan split, then it flickers back in. */
.wordmark { position:relative; }
.wordmark__ghost { position:absolute; inset:0; display:none; pointer-events:none; mix-blend-mode:screen; }
.wordmark__ghost svg { height:100%; width:auto; display:block; overflow:visible; filter:none !important; }
.wordmark__ghost--a path { fill:#e01ffd !important; }
.wordmark__ghost--b path { fill:#00e5ff !important; }
.wordmark.is-glitching .wordmark__ghost { display:block; }
.wordmark.is-glitching .wordmark__ghost--a { animation:lg-split-a .62s steps(1,end) forwards; }
.wordmark.is-glitching .wordmark__ghost--b { animation:lg-split-b .62s steps(1,end) forwards; }
.wordmark.is-glitching .wordmark__logo { animation:lg-main .62s steps(1,end) forwards; }
@keyframes lg-main {
  0%   { opacity:1; clip-path:inset(0 0 0 0); transform:none; }
  10%  { clip-path:inset(10% 0 58% 0); transform:translateX(-5px); }
  20%  { clip-path:inset(55% 0 18% 0); transform:translateX(6px); }
  30%  { opacity:0; clip-path:inset(0 0 82% 0); transform:translateX(-3px); }
  40%  { opacity:.85; clip-path:inset(0 0 0 0); transform:translateX(4px); }
  50%  { opacity:1; clip-path:inset(38% 0 42% 0); transform:translateX(-7px); }
  60%  { opacity:.4; clip-path:inset(70% 0 6% 0); transform:translateX(4px); }
  70%  { opacity:1; clip-path:inset(22% 0 62% 0); transform:translateX(-3px); }
  85%  { opacity:.8; clip-path:inset(0 0 0 0); transform:translateX(2px); }
  100% { opacity:1; clip-path:inset(0 0 0 0); transform:none; }
}
@keyframes lg-split-a {
  0%   { opacity:.9; clip-path:inset(62% 0 12% 0); transform:translate(-4px,0); }
  20%  { clip-path:inset(8% 0 70% 0); transform:translate(3px,0); }
  40%  { clip-path:inset(40% 0 35% 0); transform:translate(-6px,0); }
  60%  { opacity:.7; clip-path:inset(80% 0 2% 0); transform:translate(3px,0); }
  80%  { opacity:.4; clip-path:inset(15% 0 75% 0); transform:translate(-2px,0); }
  100% { opacity:0; }
}
@keyframes lg-split-b {
  0%   { opacity:.9; clip-path:inset(20% 0 55% 0); transform:translate(4px,0); }
  20%  { clip-path:inset(66% 0 10% 0); transform:translate(-3px,0); }
  40%  { clip-path:inset(0 0 78% 0); transform:translate(6px,0); }
  60%  { opacity:.7; clip-path:inset(48% 0 30% 0); transform:translate(-3px,0); }
  80%  { opacity:.4; clip-path:inset(85% 0 0 0); transform:translate(2px,0); }
  100% { opacity:0; }
}
@media (prefers-reduced-motion:reduce) { .wordmark.is-glitching .wordmark__logo, .wordmark.is-glitching .wordmark__ghost { animation:none; } }

/* 5 Oct: Work section layout (Annyesha's reference image). "Meet the Annygators" plays as before; once it has settled,
   annygators.js adds .is-formed: the title docks to the left column (the eyebrow and lede fade in under it),
   The Architect condenses in the centre, and her two project frames slide out from behind her.
   TODO(Annyesha): real thumbnails/titles for the two frames. Next avatars will stack from behind this one. */
.ag-head {
  position: absolute; left: 50%; top: calc(33.6% - 5px); transform: translateX(-50%); z-index: 3;
  width: 11em; max-width: 92%; font-size: clamp(64px, 5vw, 72px); text-align: center;
}
.ag-head .ag-title { text-align: inherit; position: relative; left: auto; top: auto; transform: none; width: auto; max-width: none; font-size: 1em; line-height: 1.2; }
.ag-lede { max-height: 0; opacity: 0; overflow: hidden; margin: 0; }
.ag-lede { font-family: 'Inter', sans-serif; font-size: 16px; line-height: 1.6; color: rgba(245, 241, 249, .72); max-width: 340px; }
/* leaving: the title vaporises upward where it stands (no sideways shift now that it is not centred by a transform) */
.ag-head .ag-title.is-vapor { animation: ag-vapor-in .9s cubic-bezier(.4, 0, .8, .6) forwards; }
@keyframes ag-vapor-in { from { opacity: 1; filter: none; } to { opacity: 0; transform: translateY(-.9em) scale(1.05); filter: blur(10px); } }

.ag-stage { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.ag-avatars { position: absolute; left: 50%; bottom: 0; height: calc(100svh - 96px); aspect-ratio: 2 / 3; transform: translateX(-50%); z-index: 2; }
.ag-avatar {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; user-select: none;
  opacity: 0; filter: blur(26px) brightness(1.9); transform: scale(.92) translateY(3%);
  transition: opacity .45s ease-in, filter .45s ease-in, transform .45s ease-in; will-change: opacity, filter, transform;
}

/* project frames: glass, violet-outlined, slightly tilted in space; they start tucked behind the avatar */
.ag-card {
  --ag-rest: perspective(1100px) rotateY(var(--ag-ry)) rotateX(5deg) rotate(var(--ag-rz));
  --ag-from: translate(var(--ag-fx), 4%) scale(.55);
  position: absolute; z-index: 1; width: clamp(240px, 25vw, 400px); box-sizing: border-box; padding: 14px 14px 16px;
  border: 1.5px solid #b76cff; border-radius: 14px; backdrop-filter: blur(10px);
  background: linear-gradient(145deg, rgba(88, 40, 170, .42), rgba(20, 10, 48, .62));
  box-shadow: 0 0 26px rgba(139, 66, 255, .45), inset 0 0 22px rgba(183, 108, 255, .14);
  opacity: 0; filter: blur(8px); transform: var(--ag-rest) var(--ag-from);
  transition: opacity .45s ease-in, filter .45s ease-in, transform .45s ease-in; will-change: opacity, filter, transform;
}
.ag-card--a { left: 17%; bottom: 7%; --ag-ry: 14deg; --ag-rz: -2.5deg; --ag-fx: 70%; }
.ag-card--b { right: 6%; top: 15%; --ag-ry: -14deg; --ag-rz: 2.5deg; --ag-fx: -70%; }
.ag-card__head { display: flex; align-items: center; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid rgba(245, 241, 249, .14); }
.ag-card__no { font-family: 'IBM Plex Sans Condensed', sans-serif; font-size: 26px; line-height: 1; color: #b76cff; font-weight: 400;}
.ag-card__who { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.ag-card__who b { font-family: 'Chakra Petch', sans-serif; font-weight: 700; font-size: 14px; letter-spacing: .04em; text-transform: uppercase; color: #f9f4ff; }
.ag-card__who i { font-style: normal; font-family: 'IBM Plex Sans Condensed', sans-serif; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: rgba(245, 241, 249, .62); font-weight: 400;}
.ag-card__icon { width: 26px; height: 26px; fill: none; stroke: #b76cff; stroke-width: 2; flex: none; }
.ag-card__thumb {
  display: grid; place-items: center; margin-top: 12px; aspect-ratio: 16 / 10; border-radius: 8px;
  border: 1px dashed rgba(183, 108, 255, .5); background: rgba(5, 3, 9, .45);
  font-family: 'IBM Plex Sans Condensed', sans-serif; font-size: 12px; letter-spacing: .14em; color: rgba(245, 241, 249, .5); font-weight: 400;}
.ag-card__title { margin: 12px 2px 0; font-family: 'Chakra Petch', sans-serif; font-weight: 700; font-size: 15px; letter-spacing: .02em; color: #f9f4ff; }

/* the "formed" state: head docks, avatar condenses, frames slide out (in this order) */
.annygators-section.is-formed .ag-head {
  transition: left .95s cubic-bezier(.22, 1, .36, 1), top .95s cubic-bezier(.22, 1, .36, 1), width .95s cubic-bezier(.22, 1, .36, 1),
              font-size .95s cubic-bezier(.22, 1, .36, 1), transform .95s cubic-bezier(.22, 1, .36, 1);
}
.annygators-section.is-formed .ag-lede {
  transition: max-height .6s ease .5s, opacity .8s ease .75s, margin .6s ease .5s;
}
.annygators-section.is-formed .ag-avatar {
  transition: opacity 1.1s ease-out .35s, filter 1.5s cubic-bezier(.16, 1, .3, 1) .35s, transform 1.6s cubic-bezier(.16, 1, .3, 1) .35s;
}
.annygators-section.is-formed .ag-card {
  transition: opacity .9s ease-out var(--ag-d), filter 1.1s ease-out var(--ag-d), transform 1.4s cubic-bezier(.16, 1, .3, 1) var(--ag-d);
}
.annygators-section.is-formed .ag-card--a { --ag-d: .95s; }
.annygators-section.is-formed .ag-card--b { --ag-d: 1.15s; }
.annygators-section.is-formed .ag-head { left: 4.5%; transform: none; width: clamp(250px, 25vw, 400px); top: 15%; text-align: left; font-size: clamp(44px, 3.9vw, 56px); }
.annygators-section.is-formed .ag-lede { max-height: 220px; opacity: 1; margin: 24px 0 0; }
.annygators-section.is-formed .ag-avatar { opacity: 1; filter: none; transform: none; }
.annygators-section.is-formed .ag-card { opacity: 1; filter: none; transform: var(--ag-rest); }

@media (max-width: 1100px) {
  .ag-head { font-size: clamp(56px, 6vw, 64px); }
  .annygators-section.is-formed .ag-head { font-size: 44px; width: 27vw; }
  .ag-card { width: 27vw; }
}
@media (max-width: 700px) {
  .ag-head { width: 92%; font-size: clamp(52px, 13vw, 64px); }
  .annygators-section.is-formed .ag-head { left: 6%; top: 96px; width: 88%; font-size: 36px; }
  .annygators-section.is-formed .ag-lede { display: none; }
  .ag-avatars { height: calc(100svh - 190px); }
  .ag-card { width: 52vw; padding: 10px 10px 12px; }
  .ag-card__no { font-size: 20px; }
  .ag-card__thumb { margin-top: 8px; }
  .ag-card--a { left: 2%; top: auto; bottom: 7%; }
  .ag-card--b { right: 2%; top: 190px; }
}
@media (prefers-reduced-motion: reduce) {
  .annygators-section .ag-head { top: 15%; left: 4.5%; transform: none; width: clamp(250px, 25vw, 400px); text-align: left; font-size: clamp(44px, 3.9vw, 56px); }
  .annygators-section .ag-lede { max-height: 220px; opacity: 1; margin: 24px 0 0; }
  .annygators-section .ag-avatar { opacity: 1; filter: none; transform: none; transition: none; }
  .annygators-section .ag-card { opacity: 1; filter: none; transform: var(--ag-rest); transition: none; }
}

/* 5 Oct (2): second Annygator, The Investigator. The Work section is now tall (one screen of scrolling per Annygator)
   with a pinned stage, so scrolling on feels like staying in the same section. annygators.js sets data-step (0-4) from the scroll
   position: The Architect steps aside and fades, The Investigator rises from behind her on the same level, and her frames slide out.
   Avatars 3-5 will follow the same pattern (.is-step-2 ...). */
.annygators-section { height: 550svh; min-height: 0; overflow: visible; } /* one screen of scroll per Annygator (5), plus half a screen of intro */
.ag-pin { position: sticky; top: 0; height: 100svh; overflow: hidden; }

/* frame colours follow the Annygator (--ag-c set per card) */
.ag-card {
  border-color: var(--ag-c, #b76cff);
  background: linear-gradient(145deg, color-mix(in srgb, var(--ag-c, #b76cff) 26%, rgba(14, 8, 30, .72)), rgba(12, 7, 26, .7));
  box-shadow: 0 0 26px color-mix(in srgb, var(--ag-c, #b76cff) 45%, transparent), inset 0 0 22px color-mix(in srgb, var(--ag-c, #b76cff) 14%, transparent);
}
.ag-card__no { color: var(--ag-c, #b76cff); }
.ag-card__icon { stroke: var(--ag-c, #b76cff); }

/* ---- all five Annygators (generated pattern, one block per index) ----
   step = which avatar is up front (data-step on #work, set by annygators.js from the scroll position).
   Each avatar sits behind the one before it (z-index 5-i). Before its turn it waits hidden behind her;
   on its turn it rises and its frames slide out; after its turn it steps aside left and fades.
   Frame slots differ a little per Annygator (see below). */
.ag-avatar[data-i="0"] { z-index: 5; }
.annygators-section.is-formed[data-step="0"] .ag-avatar[data-i="0"] { opacity: 1; filter: none; transform: none; transition: opacity 1s ease-out .3s, filter 1.3s cubic-bezier(.16, 1, .3, 1) .3s, transform 1.5s cubic-bezier(.16, 1, .3, 1) .3s; }
.annygators-section.is-formed[data-step="1"] .ag-avatar[data-i="0"] { opacity: 0; filter: blur(10px) brightness(.6); transform: translateX(-16%) scale(1.04); transition: opacity .8s ease-in, filter .8s ease-in, transform 1s cubic-bezier(.4, 0, .2, 1); }
.annygators-section.is-formed[data-step="2"] .ag-avatar[data-i="0"] { opacity: 0; filter: blur(10px) brightness(.6); transform: translateX(-16%) scale(1.04); transition: opacity .8s ease-in, filter .8s ease-in, transform 1s cubic-bezier(.4, 0, .2, 1); }
.annygators-section.is-formed[data-step="3"] .ag-avatar[data-i="0"] { opacity: 0; filter: blur(10px) brightness(.6); transform: translateX(-16%) scale(1.04); transition: opacity .8s ease-in, filter .8s ease-in, transform 1s cubic-bezier(.4, 0, .2, 1); }
.annygators-section.is-formed[data-step="4"] .ag-avatar[data-i="0"] { opacity: 0; filter: blur(10px) brightness(.6); transform: translateX(-16%) scale(1.04); transition: opacity .8s ease-in, filter .8s ease-in, transform 1s cubic-bezier(.4, 0, .2, 1); }
.annygators-section.is-formed:not([data-step="0"]) .ag-card[data-i="0"] { opacity: 0; filter: blur(8px); transform: var(--ag-rest) var(--ag-from); transition: opacity .7s ease-in, filter .7s ease-in, transform .8s cubic-bezier(.5, 0, .75, 0); }
.annygators-section.is-formed[data-step="0"] .ag-card[data-i="0"] { opacity: 1; filter: none; transform: var(--ag-rest); transition: opacity .9s ease-out var(--ag-d), filter 1.1s ease-out var(--ag-d), transform 1.4s cubic-bezier(.16, 1, .3, 1) var(--ag-d); }
.annygators-section.is-formed[data-step="0"] .ag-card--a[data-i="0"] { --ag-d: 0.95s; }
.annygators-section.is-formed[data-step="0"] .ag-card--b[data-i="0"] { --ag-d: 1.15s; }
.ag-avatar[data-i="1"] { z-index: 4; }
.annygators-section.is-formed .ag-avatar[data-i="1"] { opacity: 0; filter: blur(14px) brightness(.5); transform: scale(.94) translateY(2%); transition: opacity .5s ease-in, filter .5s ease-in, transform .5s ease-in; }
.annygators-section.is-formed[data-step="1"] .ag-avatar[data-i="1"] { opacity: 1; filter: none; transform: none; transition: opacity 1s ease-out .3s, filter 1.3s cubic-bezier(.16, 1, .3, 1) .3s, transform 1.5s cubic-bezier(.16, 1, .3, 1) .3s; }
.annygators-section.is-formed[data-step="2"] .ag-avatar[data-i="1"] { opacity: 0; filter: blur(10px) brightness(.6); transform: translateX(-16%) scale(1.04); transition: opacity .8s ease-in, filter .8s ease-in, transform 1s cubic-bezier(.4, 0, .2, 1); }
.annygators-section.is-formed[data-step="3"] .ag-avatar[data-i="1"] { opacity: 0; filter: blur(10px) brightness(.6); transform: translateX(-16%) scale(1.04); transition: opacity .8s ease-in, filter .8s ease-in, transform 1s cubic-bezier(.4, 0, .2, 1); }
.annygators-section.is-formed[data-step="4"] .ag-avatar[data-i="1"] { opacity: 0; filter: blur(10px) brightness(.6); transform: translateX(-16%) scale(1.04); transition: opacity .8s ease-in, filter .8s ease-in, transform 1s cubic-bezier(.4, 0, .2, 1); }
.annygators-section.is-formed .ag-card[data-i="1"] { opacity: 0; filter: blur(8px); transform: var(--ag-rest) var(--ag-from); transition: opacity .7s ease-in, filter .7s ease-in, transform .8s cubic-bezier(.5, 0, .75, 0); }
.annygators-section.is-formed[data-step="1"] .ag-card[data-i="1"] { opacity: 1; filter: none; transform: var(--ag-rest); transition: opacity .9s ease-out var(--ag-d), filter 1.1s ease-out var(--ag-d), transform 1.4s cubic-bezier(.16, 1, .3, 1) var(--ag-d); }
.annygators-section.is-formed[data-step="1"] .ag-card--a[data-i="1"] { --ag-d: .85s; }
.annygators-section.is-formed[data-step="1"] .ag-card--b[data-i="1"] { --ag-d: 1.05s; }
.ag-avatar[data-i="2"] { z-index: 3; }
.annygators-section.is-formed .ag-avatar[data-i="2"] { opacity: 0; filter: blur(14px) brightness(.5); transform: scale(.94) translateY(2%); transition: opacity .5s ease-in, filter .5s ease-in, transform .5s ease-in; }
.annygators-section.is-formed[data-step="2"] .ag-avatar[data-i="2"] { opacity: 1; filter: none; transform: none; transition: opacity 1s ease-out .3s, filter 1.3s cubic-bezier(.16, 1, .3, 1) .3s, transform 1.5s cubic-bezier(.16, 1, .3, 1) .3s; }
.annygators-section.is-formed[data-step="3"] .ag-avatar[data-i="2"] { opacity: 0; filter: blur(10px) brightness(.6); transform: translateX(-16%) scale(1.04); transition: opacity .8s ease-in, filter .8s ease-in, transform 1s cubic-bezier(.4, 0, .2, 1); }
.annygators-section.is-formed[data-step="4"] .ag-avatar[data-i="2"] { opacity: 0; filter: blur(10px) brightness(.6); transform: translateX(-16%) scale(1.04); transition: opacity .8s ease-in, filter .8s ease-in, transform 1s cubic-bezier(.4, 0, .2, 1); }
.annygators-section.is-formed .ag-card[data-i="2"] { opacity: 0; filter: blur(8px); transform: var(--ag-rest) var(--ag-from); transition: opacity .7s ease-in, filter .7s ease-in, transform .8s cubic-bezier(.5, 0, .75, 0); }
.annygators-section.is-formed[data-step="2"] .ag-card[data-i="2"] { opacity: 1; filter: none; transform: var(--ag-rest); transition: opacity .9s ease-out var(--ag-d), filter 1.1s ease-out var(--ag-d), transform 1.4s cubic-bezier(.16, 1, .3, 1) var(--ag-d); }
.annygators-section.is-formed[data-step="2"] .ag-card--a[data-i="2"] { --ag-d: .85s; }
.annygators-section.is-formed[data-step="2"] .ag-card--b[data-i="2"] { --ag-d: 1.05s; }
.ag-avatar[data-i="3"] { z-index: 2; }
.annygators-section.is-formed .ag-avatar[data-i="3"] { opacity: 0; filter: blur(14px) brightness(.5); transform: scale(.94) translateY(2%); transition: opacity .5s ease-in, filter .5s ease-in, transform .5s ease-in; }
.annygators-section.is-formed[data-step="3"] .ag-avatar[data-i="3"] { opacity: 1; filter: none; transform: none; transition: opacity 1s ease-out .3s, filter 1.3s cubic-bezier(.16, 1, .3, 1) .3s, transform 1.5s cubic-bezier(.16, 1, .3, 1) .3s; }
.annygators-section.is-formed[data-step="4"] .ag-avatar[data-i="3"] { opacity: 0; filter: blur(10px) brightness(.6); transform: translateX(-16%) scale(1.04); transition: opacity .8s ease-in, filter .8s ease-in, transform 1s cubic-bezier(.4, 0, .2, 1); }
.annygators-section.is-formed .ag-card[data-i="3"] { opacity: 0; filter: blur(8px); transform: var(--ag-rest) var(--ag-from); transition: opacity .7s ease-in, filter .7s ease-in, transform .8s cubic-bezier(.5, 0, .75, 0); }
.annygators-section.is-formed[data-step="3"] .ag-card[data-i="3"] { opacity: 1; filter: none; transform: var(--ag-rest); transition: opacity .9s ease-out var(--ag-d), filter 1.1s ease-out var(--ag-d), transform 1.4s cubic-bezier(.16, 1, .3, 1) var(--ag-d); }
.annygators-section.is-formed[data-step="3"] .ag-card--a[data-i="3"] { --ag-d: .85s; }
.annygators-section.is-formed[data-step="3"] .ag-card--b[data-i="3"] { --ag-d: 1.05s; }
.ag-avatar[data-i="4"] { z-index: 1; }
.annygators-section.is-formed .ag-avatar[data-i="4"] { opacity: 0; filter: blur(14px) brightness(.5); transform: scale(.94) translateY(2%); transition: opacity .5s ease-in, filter .5s ease-in, transform .5s ease-in; }
.annygators-section.is-formed[data-step="4"] .ag-avatar[data-i="4"] { opacity: 1; filter: none; transform: none; transition: opacity 1s ease-out .3s, filter 1.3s cubic-bezier(.16, 1, .3, 1) .3s, transform 1.5s cubic-bezier(.16, 1, .3, 1) .3s; }
.annygators-section.is-formed .ag-card[data-i="4"] { opacity: 0; filter: blur(8px); transform: var(--ag-rest) var(--ag-from); transition: opacity .7s ease-in, filter .7s ease-in, transform .8s cubic-bezier(.5, 0, .75, 0); }
.annygators-section.is-formed[data-step="4"] .ag-card[data-i="4"] { opacity: 1; filter: none; transform: var(--ag-rest); transition: opacity .9s ease-out var(--ag-d), filter 1.1s ease-out var(--ag-d), transform 1.4s cubic-bezier(.16, 1, .3, 1) var(--ag-d); }
.annygators-section.is-formed[data-step="4"] .ag-card--a[data-i="4"] { --ag-d: .85s; }
.annygators-section.is-formed[data-step="4"] .ag-card--b[data-i="4"] { --ag-d: 1.05s; }

/* frame slots per Annygator: A / B  (0 lower-left + upper-right, 1 lower-left + lower-right, 2 two on the right, 3 lower-left + right-middle, 4 lower-left + upper-right) */
.ag-card--b[data-i="1"] { top: auto; bottom: 7%; right: 5%; --ag-ry: -14deg; --ag-rz: 2deg; --ag-fx: -70%; }
.ag-card--a[data-i="2"] { left: auto; bottom: auto; top: 12%; right: 5%; --ag-ry: -14deg; --ag-rz: 2deg; --ag-fx: -70%; }
.ag-card--b[data-i="2"] { top: auto; bottom: 7%; right: 8%; --ag-ry: -12deg; --ag-rz: 1.5deg; --ag-fx: -70%; }
.ag-card--b[data-i="3"] { top: 38%; right: 4%; --ag-ry: -14deg; --ag-rz: 2deg; --ag-fx: -70%; }
@media (max-width: 700px) {
  .annygators-section { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .annygators-section { height: 100svh; }
  .annygators-section .ag-avatar:not([data-i="0"]), .annygators-section .ag-card:not([data-i="0"]) { display: none; }
}

@media (max-width: 700px) {
  .ag-card--a[data-i] { left: 2%; right: auto; top: auto; bottom: 7%; }
  .ag-card--b[data-i] { right: 2%; left: auto; top: 190px; bottom: auto; }
}

/* 5 Oct: hero "Top 3 projects" (layout only; real projects come later). A kicker label over three small glass cards
   (thumbnail + number, title, category), on the right of the portrait. Same glass + violet outline as the Annygator frames. */
.top3 { position: absolute; z-index: 2; right: 5%; top: 50%; transform: translateY(-50%); width: clamp(240px, 22vw, 330px); animation: ag-fade-in .9s ease .5s both; }
.top3__label { margin: 0 0 16px; font-family: 'IBM Plex Sans Condensed', sans-serif;  font-size: 14px; letter-spacing: .18em; text-transform: uppercase; color: #dbb8ff; display: flex; align-items: center; gap: 14px; font-weight: 400;}
.top3__label::after { content: ''; flex: 1; height: 1px; background: rgba(245, 241, 249, .22); }
.top3__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.top3-card {
  display: flex; align-items: center; gap: 14px; padding: 10px; box-sizing: border-box;
  border: 1px solid rgba(183, 108, 255, .4); border-radius: 12px; backdrop-filter: blur(10px);
  background: linear-gradient(145deg, rgba(88, 40, 170, .3), rgba(8, 5, 18, .6));
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.top3-card:hover, .top3-card:focus-within { border-color: #b76cff; box-shadow: 0 0 22px rgba(139, 66, 255, .45); transform: translateX(-4px); }
.top3-card__thumb {
  flex: none; width: 38%; aspect-ratio: 16 / 10; display: grid; place-items: center; border-radius: 7px;
  border: 1px dashed rgba(183, 108, 255, .5); background: rgba(5, 3, 9, .5);
  font-family: 'IBM Plex Sans Condensed', sans-serif; font-size: 9px; letter-spacing: .1em; color: rgba(245, 241, 249, .5); text-align: center; font-weight: 400;}
.top3-card__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.top3-card__no { font-family: 'IBM Plex Sans Condensed', sans-serif; font-size: 13px; line-height: 1; color: #b76cff; font-weight: 400;}
.top3-card__title { font-family: 'Chakra Petch', sans-serif; font-weight: 700; font-size: 14px; letter-spacing: .02em; color: #f9f4ff; }
.top3-card__tag { font-style: normal; font-family: 'IBM Plex Sans Condensed', sans-serif; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: rgba(245, 241, 249, .62); font-weight: 400;}
@media (max-width: 1100px) { .top3 { width: clamp(220px, 24vw, 280px); } .top3-card { gap: 10px; padding: 8px; } }
@media (max-width: 700px) {
  /* phones: a compact row of three along the bottom; the intro text rises above it */
  .top3 { right: 6%; left: 6%; top: auto; bottom: 96px; transform: none; width: auto; }
  .top3__label { margin-bottom: 10px; font-size: 12px; }
  .top3__list { flex-direction: row; gap: 8px; }
  .top3__list li { flex: 1; min-width: 0; }
  .top3-card { flex-direction: column; align-items: stretch; gap: 6px; padding: 6px; }
  .top3-card__thumb { width: auto; }
  .top3-card__no, .top3-card__tag { display: none; }
  .top3-card__title { font-size: 11px; }
  .intro { bottom: 250px; }
}
@media (prefers-reduced-motion: reduce) { .top3 { animation: none; } .top3-card { transition: none; } }


/* ===== Smoothness pass (5 Oct): same look, less GPU work. =====
   - Work section: 15 large layers no longer sit permanently promoted (will-change) and only the visible Annygator's
     frames pay for backdrop blur; the browser still promotes a layer for the length of each transition.
   - Hero Top 3 cards: no live backdrop blur over the animating portrait; the glass is a slightly denser gradient. */
.ag-avatar, .ag-card { will-change: auto; }
.ag-card { -webkit-backdrop-filter: none; backdrop-filter: none; }
.annygators-section.is-formed[data-step="0"] .ag-card[data-i="0"] { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.annygators-section.is-formed[data-step="1"] .ag-card[data-i="1"] { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.annygators-section.is-formed[data-step="2"] .ag-card[data-i="2"] { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.annygators-section.is-formed[data-step="3"] .ag-card[data-i="3"] { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.annygators-section.is-formed[data-step="4"] .ag-card[data-i="4"] { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.top3-card { -webkit-backdrop-filter: none; backdrop-filter: none; background: linear-gradient(145deg, rgba(88, 40, 170, .42), rgba(8, 5, 18, .72)); }

/* ===== Small screens (5 Oct): no cursor-driven effects, native pointer, one-column layouts. ===== */
@media (max-width: 900px), (pointer: coarse) {
  .neon-cursor, .cursor-arrow, .cursor-orbit, .cursor-rot { display: none !important; }
  *, *::before, *::after { cursor: auto !important; }
  .contact-cta, .about-card, .top3-card { --tilt-x: 0deg; --tilt-y: 0deg; }
  .top3-card:hover { transform: none; }
}

/* 5 Oct: Work section on phones. The nav stays full size (fixed box, ~170px), so the stage starts below it:
   smaller title, slimmer avatar, two compact frames (one upper-left, one lower-right) so the avatar stays readable. */
@media (max-width: 700px) {
  .annygators-section.is-formed .ag-head { top: 184px; left: 6%; width: 88%; font-size: 26px; }
  .annygators-section:not(.is-formed) .ag-title { font-size: clamp(34px, 10vw, 44px); }
  .ag-avatars { height: calc(100svh - 250px); }
  .ag-card { width: 38vw; padding: 8px 8px 10px; border-radius: 10px; }
  .ag-card__head { gap: 6px; padding-bottom: 6px; }
  .ag-card__no { font-size: 14px; }
  .ag-card__who b { font-size: 10px; letter-spacing: .02em; }
  .ag-card__who i { font-size: 8px; letter-spacing: .06em; }
  .ag-card__icon { display: none; }
  .ag-card__thumb { margin-top: 6px; font-size: 8px; letter-spacing: .08em; }
  .ag-card__title { margin: 6px 1px 0; font-size: 10px; }
  .ag-card--a[data-i] { left: 2%; right: auto; top: 250px; bottom: auto; }
  .ag-card--b[data-i] { right: 2%; left: auto; top: auto; bottom: 14%; }
}

/* 5 Oct: About on phones. The one-column grid was growing to the width of the logo strip (photo 2900px wide); clamp it to the screen. */
@media (max-width: 900px) {
  .about-card { grid-template-columns: minmax(0, 1fr); }
  .about-card > * { min-width: 0; max-width: 100%; }
  .about-logos { max-width: 100%; }
}
@media (max-width: 700px) {
  .about-card .about-body { font-size: 15px; padding: 8px 18px 28px; }
  .about-card .about-quote { padding: 70px 18px 18px; }
}

/* 5 Oct: smaller type on phones (nav untouched). */
@media (max-width: 700px) {
  .site-footer h2 { font-size: clamp(30px, 9vw, 38px); line-height: 1.12; }
  .intro h1, .hero h1 { font-size: clamp(36px, 11vw, 44px); }
  .intro p, .hero .lede { font-size: 15px; }
}

/* 5 Oct: Work section on tablets (701-900px). The nav is a short bar here, so the title docks top-left under it, the
   avatar is a little smaller, and the two frames sit low at the sides so the avatar and title both stay clear. */
@media (min-width: 701px) and (max-width: 900px) {
  .annygators-section.is-formed .ag-head { top: 130px; left: 5%; width: 38%; font-size: 34px; }
  .annygators-section.is-formed .ag-lede { font-size: 14px; max-height: 200px; margin-top: 14px; }
  .ag-avatars { height: calc(100svh - 230px); }
  .ag-card { width: 25vw; padding: 10px 10px 12px; }
  .ag-card__no { font-size: 18px; }
  .ag-card__who b { font-size: 11px; }
  .ag-card__who i { font-size: 9px; }
  .ag-card__icon { width: 20px; height: 20px; }
  .ag-card__thumb { margin-top: 8px; font-size: 9px; }
  .ag-card__title { font-size: 12px; margin-top: 8px; }
  .ag-card--a[data-i] { left: 3%; right: auto; top: auto; bottom: 9%; }
  .ag-card--b[data-i] { right: 3%; left: auto; top: auto; bottom: 22%; }
}

/* 5 Oct: Skills overlay is taller on phones and tablets. The skill boxes keep a fixed size, so the pile needs more
   height than the wide-screen square to hold them all without crowding or spilling past the top. */
@media (max-width: 900px) {
  .skills-overlay { padding: 16px; }
  .skills-overlay__box { aspect-ratio: auto; width: min(94vw, 720px); height: min(calc(100svh - 32px), 160vw); max-height: calc(100svh - 32px); }
}

/* 5 Oct: desktop -- the right-hand frames sit closer to the avatar. They were pinned to the screen's right edge, so on
   wide screens a big gap opened up; now they hang off the avatar's own width (--ag-aw = her box width), tucked in
   behind her shoulder as they slide out. Left-hand frames are unchanged. */
@media (min-width: 1101px) {
  .ag-stage { --ag-aw: calc((100svh - 96px) * 2 / 3); }
  .ag-card--b[data-i="0"], .ag-card--b[data-i="1"], .ag-card--b[data-i="3"], .ag-card--b[data-i="4"],
  .ag-card--a[data-i="2"] { right: auto; left: calc(50% + var(--ag-aw) * .31); }
  .ag-card--b[data-i="2"] { right: auto; left: calc(50% + var(--ag-aw) * .27); }
}

/* 5 Oct: phone hero. A still portrait (assets/hero-mobile.webp, transparent background) replaces the gaze sequence on
   phones: no cursor to follow there, and the 238 frames aren't needed. It sits under the nav, fades into the black at
   the bottom where the intro text and Top 3 cards lie. Desktop/tablet never load it (display:none + lazy). */
.portrait img.portrait-mobile { display: none; }
@media (max-width: 700px) {
  .portrait .poster, .portrait canvas { display: none !important; }
  .portrait img.portrait-mobile {
    display: block; inset: auto; left: 50%; top: 150px; width: min(112vw, 72svh); height: auto; max-width: none; transform: translateX(-50%);
    object-fit: contain; -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 94%); mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 94%);
  }
}

/* 5 Oct: tighter spacing between sections, all screen sizes. About and Skills no longer force a full screen of height
   (that left big empty bands around their content) and use smaller vertical padding; Work's pinned scroll is a bit
   shorter (one fewer screen of dwell on the last Annygator); the footer's top gap is trimmed. The footer stays a full
   screen so "Get in touch" still lands exactly on it. */
.about-section { min-height: 0; padding-block: clamp(40px, 6vw, 80px); }
.skills-section { min-height: 0; padding-block: clamp(40px, 6vw, 72px); }
.annygators-section { height: 500svh; }
.site-footer { padding-top: max(clamp(70px, 8vw, 110px), 112px); }
@media (max-width: 900px) {
  .about-section { padding-block: 40px 32px; }
  .skills-section { padding-block: 32px 40px; }
}
@media (max-width: 700px) { .site-footer { padding-top: 190px; } }
@media (prefers-reduced-motion: reduce) { .annygators-section { height: 100svh; } }

/* 5 Oct: phone nav is shorter. Annyesha asked for a lower bar on small screens with a smaller "Get in touch" button and
   a tighter gap between the logo row and the Work / About / Play row (152px -> about 100px). Desktop/tablet unchanged.
   Content that was offset by the old bar height (Work stage, hero portrait, footer top) moves up with it. */
@media (max-width: 700px) {
  .masthead { min-height: 0; padding-block: 8px; row-gap: 4px; gap: 4px 12px; }
  .wordmark .wordmark__logo { height: 21px; }
  .contact-cta { min-width: 124px; height: 36px; min-height: 36px; padding-inline: 12px; font-size: 12px; }
  .contact-cta .contact-content { min-width: 0; padding-inline: 10px; }
  .main-nav { gap: 26px; }
  .nav-link { min-height: 36px; padding-block: 8px 8px; font-size: 14px; }
  .nav-link::after { bottom: 4px; }
  .portrait img.portrait-mobile { top: 104px; }
  .annygators-section.is-formed .ag-head { top: 128px; }
  .ag-avatars { height: calc(100svh - 190px); }
  .ag-card--a[data-i] { top: 200px; }
  .site-footer { padding-top: 140px; }
}

/* 5 Oct: close the big empty bands.
   - Work intro title no longer waits a third of the way down its screen on tablets/phones: it starts at the height it
     docks to, so scrolling from the hero into Work has no blank stretch.
   - Footer: no forced full-screen height and no auto top/bottom margin (that centring added ~136px of air above the
     headline); it now starts right under its padding.
   - Tablet hero is no taller than its content. */
@media (max-width: 900px) { .ag-head { top: 130px; } }
@media (max-width: 700px) { .ag-head { top: 110px; } .site-footer { padding-top: 116px; } }
@media (min-width: 701px) and (max-width: 900px) { .hero { height: min(100svh, 108vw); } }
.site-footer { min-height: 0; }
.footer-main { margin-block: 0; }

/* 5 Oct: Annyesha asked for only ~80px between the end of the hero and "Meet the Annygators" on smaller screens.
   The intro title now sits 74px into the section (its text top lands ~80px down); it still docks to its usual place
   under the nav once the section has formed. */
@media (max-width: 900px) { .annygators-section:not(.is-formed) .ag-head { top: 74px; } }

/* 5 Oct: on smaller screens the Work stage pins just BELOW the nav bar (not behind it), so once the "Meet the
   Annygators" animation completes the title docks right at the top of the stage -- it moves up instead of down, and
   the gap under the hero closes. --nav-h = the fixed nav's bottom edge (phone 108px, tablet 104px). */
@media (max-width: 900px) {
  .annygators-section { --nav-h: 104px; }
  .ag-pin { top: var(--nav-h); height: calc(100svh - var(--nav-h)); }
  .annygators-section.is-formed .ag-head { top: 24px; }
}
@media (max-width: 700px) {
  .annygators-section { --nav-h: 108px; }
  .annygators-section.is-formed .ag-head { top: 18px; }
  .ag-card--a[data-i] { top: 92px; }
}

/* 5 Oct: smaller screens -- no project frame sits behind the character. The avatar is a little smaller and held
   above; the two frames sit side by side in a row beneath her (frame A left, frame B right), for every Annygator. */
@media (max-width: 900px) {
  .ag-avatars { height: calc(100svh - var(--nav-h) - 300px); bottom: 210px; }
  .ag-card--a[data-i], .ag-card--b[data-i] { top: auto; bottom: 3%; width: 44vw; --ag-ry: 0deg; --ag-rz: 0deg; }
  .ag-card--a[data-i] { left: 3%; right: auto; --ag-fx: 40%; }
  .ag-card--b[data-i] { right: 3%; left: auto; --ag-fx: -40%; }
}
@media (min-width: 701px) and (max-width: 900px) {
  .ag-avatars { height: calc(100svh - var(--nav-h) - 360px); bottom: 270px; }
  .ag-card--a[data-i], .ag-card--b[data-i] { width: 34vw; bottom: 3%; }
  .ag-card--a[data-i] { left: 12%; }
  .ag-card--b[data-i] { right: 12%; }
}
/* frames sit above the fixed music widget (bottom-left), avatar lifted to match */
@media (max-width: 900px) {
  .ag-avatars { height: calc(100svh - var(--nav-h) - 340px); bottom: 290px; }
  .ag-card--a[data-i], .ag-card--b[data-i] { bottom: 84px; }
}
@media (min-width: 701px) and (max-width: 900px) {
  .ag-avatars { height: calc(100svh - var(--nav-h) - 440px); bottom: 360px; }
  .ag-card--a[data-i], .ag-card--b[data-i] { bottom: 84px; }
}

/* 5 Oct: on smaller screens the frames' outer glow is much tighter and fainter (it bled into the neighbouring frame and
   the music widget). Inner glow kept. */
@media (max-width: 900px) {
  .annygators-section .ag-card[data-i] {
    box-shadow: 0 0 8px color-mix(in srgb, var(--ag-c, #b76cff) 28%, transparent), inset 0 0 22px color-mix(in srgb, var(--ag-c, #b76cff) 14%, transparent);
  }
}

/* 5 Oct: Top 3 cards are taller on smaller screens. Phones: portrait thumbnails (4:5) and the number + category come
   back, so each card is ~65px longer; the intro text rises to make room. Tablets: square thumbnails. */
@media (max-width: 700px) {
  .top3-card__thumb { aspect-ratio: 4 / 5; }
  .top3-card__no, .top3-card__tag { display: block; }
  .top3-card__no { font-size: 11px; }
  .top3-card__tag { font-size: 9px; letter-spacing: .06em; }
  .top3-card__title { font-size: 11px; }
  .top3-card { padding: 7px; gap: 7px; }
  .intro { top: auto; bottom: 322px; transform: none; }
}
@media (min-width: 701px) and (max-width: 900px) {
  .top3-card__thumb { aspect-ratio: 1 / 1; }
}

/* 5 Oct: phone hero -- nothing covers her face or neck. The hero is taller than the screen on phones (at least 940px),
   the portrait sits at the top under the nav, and the intro text + Top 3 cards start BELOW her neck (positioned from
   the top, not centred/bottom-anchored, so it holds on any phone height). */
@media (max-width: 700px) {
  .hero { height: max(100svh, 940px); }
  .portrait img.portrait-mobile { top: 100px; width: min(100vw, 560px); -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 62%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, #000 62%, transparent 100%); }
  .intro { top: 414px; bottom: auto; transform: none; }
  .top3 { top: auto; bottom: 40px; }
}

/* 5 Oct: NO OVERLAPS AT ANY SCREEN SIZE.
   Hero (phones, <=700px): the intro text and the Top 3 block now stack in normal flow below her neck, so they can
   never collide whatever the width/height; the hero simply grows to fit them.
   Work (<=900px): the avatar box is sized from what is left after the title block and the frame row (both measured
   by annygators.js into --ag-hh / --ag-fh), so frames, title and character can never cross.
   Work (901-1100px): frames pushed to the outer edges, clear of the character. */
@media (max-width: 700px) {
  .hero { height: auto; min-height: max(100svh, 940px); display: flex; flex-direction: column; justify-content: flex-start; box-sizing: border-box; padding: 414px 5% 40px; }
  .intro, .top3 { position: relative; inset: auto; transform: none; width: auto; max-width: none; margin: 0; }
  .intro { margin-bottom: 28px; }
}
@media (max-width: 900px) {
  .annygators-section { --ag-fh: 240px; --ag-hh: 60px; --ag-top: 24px; --ag-bot: 84px; --ag-gap: 16px; }
  .ag-card--a[data-i], .ag-card--b[data-i] { top: auto; bottom: var(--ag-bot); }
  .ag-avatars {
    bottom: calc(var(--ag-bot) + var(--ag-fh) + var(--ag-gap));
    height: max(120px, calc(100svh - var(--nav-h) - var(--ag-bot) - var(--ag-fh) - var(--ag-gap) - var(--ag-top) - var(--ag-hh) - 12px));
  }
}
@media (max-width: 700px) { .annygators-section { --ag-top: 18px; } }
@media (min-width: 901px) and (max-width: 1100px) {
  .ag-card { width: min(25vw, 250px); }
  .ag-card--a[data-i] { left: 2%; right: auto; }
  .ag-card--b[data-i] { right: 2%; left: auto; }
}
/* frame A sits under the title block (never behind it): top = title block's measured bottom + gap */
@media (min-width: 901px) {
  .annygators-section { --ag-hh: 230px; }
  .ag-card--a[data-i] { top: calc(19% + var(--ag-hh) + 16px); bottom: auto; }
}
@media (min-width: 901px) and (max-width: 1100px) { .ag-card { width: min(22vw, 220px); } }

/* 5 Oct: tablets -- the character's head lines up with the top of "Meet the Annygators".
   Portrait tablets: title block on the left, character on the right starting at the same top, frame row beneath both.
   Landscape tablets (901-1100): character's box starts at the title's top (19%) and runs to the bottom. */
@media (min-width: 701px) and (max-width: 900px) {
  .ag-avatars { left: auto; right: 6%; transform: none; top: var(--ag-top); height: auto; }
}
@media (min-width: 901px) and (max-width: 1100px) {
  .ag-avatars { top: 19%; height: auto; bottom: 0; }
}

/* 5 Oct: landscape tablets (901-1100): both frames stack in the right-hand column (clear of the title block, the
   music widget and the character), frame B above frame A. */
@media (min-width: 901px) and (max-width: 1100px) {
  .ag-card--b[data-i] { right: 2%; left: auto; top: 15%; bottom: auto; }
  .ag-card--a[data-i] { right: 2%; left: auto; top: calc(15% + var(--ag-fh) + 14px); bottom: auto; }
}

/* desktop: Annygator 3's two frames both sit on the right -- A above B, never stacked on each other or on the title */
@media (min-width: 1101px) {
  .ag-card--a[data-i="2"] { top: 15%; bottom: auto; }
}
@media (min-width: 1101px) {
  .ag-card { width: min(25vw, 400px, calc((100svh - 150px) / 2.05)); }
}

/* never cut off: frame A's top is also capped so its bottom edge always stays inside the stage (wide/tall desktops) */
@media (min-width: 1101px) {
  .ag-card--a[data-i]:not([data-i="2"]) { top: min(calc(19% + var(--ag-hh) + 16px), calc(100% - var(--ag-fh, 300px) - 48px)); }
}

/* 5 Oct: first linked project -- "See Through Their Eyes" on The Empath (frame A). Real thumbnail fills the frame's
   image area; the whole frame is clickable through the title link. */
.ag-card__thumb--img { padding: 0; overflow: hidden; }
.ag-card__thumb--img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ag-card__link { color: inherit; text-decoration: none; }
.ag-card__link::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.ag-card:has(.ag-card__link) { pointer-events: auto; cursor: pointer; }
.ag-card:has(.ag-card__link):hover { border-color: #fff4; }
.ag-card__link:focus-visible { outline: 2px solid var(--ag-c, #b76cff); outline-offset: 4px; }

/* 5 Oct: Top 3 card 01 = Data Narratives (real thumbnail, whole card clickable through the title link) */
.top3-card__thumb--img { border-style: solid; overflow: hidden; padding: 0; }
.top3-card__thumb--img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.top3-card__link { color: inherit; text-decoration: none; }
.top3-card__link::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.top3-card:has(.top3-card__link) { position: relative; cursor: pointer; }
.top3-card__link:focus-visible { outline: 2px solid #b76cff; outline-offset: 4px; }

/* 5 Oct: skill pills in place of the project title (first used on the Investigator's Data Narrative frame) */
.ag-card__pills { list-style: none; margin: 12px 2px 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.ag-card__pills li {
  font-family: 'IBM Plex Sans Condensed', sans-serif; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; line-height: 1;
  padding: 5px 9px; border-radius: 999px; color: #f9f4ff;
  border: 1px solid color-mix(in srgb, var(--ag-c, #b76cff) 70%, transparent);
  background: color-mix(in srgb, var(--ag-c, #b76cff) 14%, transparent); font-weight: 400;}
@media (max-width: 900px) { .ag-card__pills { margin-top: 6px; gap: 4px; } .ag-card__pills li { font-size: 8px; padding: 4px 6px; } }

/* 5 Oct: Top 3 card 01 -- skill pills instead of the category tag */
.top3-card__pills { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.top3-card__pills li {
  font-family: 'IBM Plex Sans Condensed', sans-serif; font-size: 8px; letter-spacing: .06em; text-transform: uppercase; line-height: 1;
  padding: 4px 6px; border-radius: 999px; color: #f9f4ff;
  border: 1px solid rgba(183, 108, 255, .7); background: rgba(183, 108, 255, .16); font-weight: 400;}

/* 5 Oct: "Meet the" + the Annygators wordmark (from Figma) instead of plain text. The wordmark scales with the title's
   font size; the glitch's colour-split layers get matching end padding so they stay over "Meet the". */
.ag-wordmark { display: inline-block; height: .82em; width: auto; vertical-align: -.1em; margin-left: .12em; -webkit-text-fill-color: initial; }
.ag-title__white::before, .ag-title__white::after { padding-inline-end: calc(.82em * 5.47 + .3em); box-sizing: border-box; }

/* 5 Oct: "Meet the" uses the wordmark's own gradient (top #1c19d7 blue -> bottom #e01ffd magenta, vertical), clipped to its own line box */
.ag-title__gradient { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: inherit; }
.ag-title__lead {
  display: inline-block; line-height: 1.2;
  background: linear-gradient(180deg, #1c19d7 0%, #e01ffd 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
}

/* 5 Oct: one-line description per Annygator under the title; it swaps as you scroll from avatar to avatar
   (annygators.js sets data-step 0-4). All five sit in one grid cell so the block never changes height. */
.ag-role { display: grid; margin: 14px 0 0; max-width: 340px; text-align: left; opacity: 0; transition: opacity .6s ease .75s; }
.annygators-section.is-formed .ag-role { opacity: 1; }
.ag-role__item { grid-area: 1 / 1; margin: 0; display: flex; flex-direction: column; gap: 4px; opacity: 0; transform: translateY(6px); pointer-events: none; transition: opacity .35s ease, transform .35s ease; }
.ag-role__item b { font-family: 'IBM Plex Sans Condensed', sans-serif;  font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--ag-c, #b76cff); font-weight: 400;}
.ag-role__item span { font-family: 'Inter', sans-serif; font-size: 16px; line-height: 1.5; color: rgba(245, 241, 249, .85); }
.annygators-section[data-step="0"] .ag-role__item[data-i="0"],
.annygators-section[data-step="1"] .ag-role__item[data-i="1"],
.annygators-section[data-step="2"] .ag-role__item[data-i="2"],
.annygators-section[data-step="3"] .ag-role__item[data-i="3"],
.annygators-section[data-step="4"] .ag-role__item[data-i="4"] { opacity: 1; transform: none; transition-delay: .15s; }
@media (max-width: 900px) { .ag-role { max-width: none; margin-top: 8px; } .ag-role__item span { font-size: 13px; line-height: 1.4; } .ag-role__item b { font-size: 10px; } }
@media (prefers-reduced-motion: reduce) { .ag-role { opacity: 1; transition: none; } .ag-role__item { transition: none; } }
.annygators-section:not([data-step]) .ag-role__item[data-i="0"] { opacity: 1; transform: none; }

/* 5 Oct: avatar names in the Work intro are bigger */
.ag-role__item b { font-size: 17px; letter-spacing: .12em; }
@media (max-width: 900px) { .ag-role__item b { font-size: 14px; } }

/* 5 Oct: avatars are numbered ("01 The Architect / 05") with a 5-step bar, so it is clear where you are and how many are left */
.ag-role__item b em { font-style: normal; margin-right: .5em; opacity: .75; }
.ag-role__item b small { font-size: .7em; letter-spacing: .08em; margin-left: .6em; opacity: .55; }
.ag-role__bar { display: flex; gap: 5px; margin-top: 10px; }
.ag-role__bar u { display: block; width: 26px; height: 3px; border-radius: 2px; background: rgba(245, 241, 249, .2); text-decoration: none; }
.ag-role__bar u.on { background: var(--ag-c, #b76cff); box-shadow: 0 0 8px color-mix(in srgb, var(--ag-c, #b76cff) 60%, transparent); }
@media (max-width: 900px) { .ag-role__bar { margin-top: 6px; } .ag-role__bar u { width: 22px; } }

/* very small screens: hide project pills (they collided) */
@media (max-width: 400px) { .top3-card__pills, .ag-card__pills { display: none !important; } }

/* phones: no project pills at all */
@media (max-width: 700px) { .top3-card__pills, .ag-card__pills { display: none !important; } }

/* Work frames keep their pills on phones; only the Top 3 pills are hidden there */
@media (max-width: 700px) { .ag-card__pills { display: flex !important; } }
@media (max-width: 400px) { .ag-card__pills { display: flex !important; } }

/* Top 3 cards: no pills at any size */
.top3-card__pills { display: none !important; }

/* Top 3 pills: desktop (>=1101px) only; Work frame pills show at every size */
.top3-card__pills { display: none !important; }
@media (min-width: 1101px) { .top3-card__pills { display: flex !important; } }

/* Top 3: a little larger on full desktop */
@media (min-width: 1280px) {
  .top3 { width: clamp(330px, 27vw, 460px); }
  .top3__label { font-size: 15px; margin-bottom: 18px; }
  .top3__list { gap: 14px; }
  .top3-card { gap: 16px; padding: 12px; border-radius: 14px; }
  .top3-card__no { font-size: 15px; }
  .top3-card__title { font-size: 18px; }
  .top3-card__tag { font-size: 13px; }
  .top3-card__pills { gap: 5px; margin-top: 4px; }
  .top3-card__pills li { font-size: 10px; padding: 5px 8px; }
}

/* 6 Oct: Play section -- the laser scan replaces the blob (skills-laser.js). The section starts empty bar the button; the
   canvas reaches above and below the section so the laser can open up into the full-size skills box. */
.skills-blob { display: none !important; }
.skills-laser { position: absolute; left: 0; width: 100%; top: -45svh; height: calc(100% + 90svh); pointer-events: none; z-index: 0; transition: opacity .45s ease; }
.skills-laser.is-off { opacity: 0; }
.skills-stage { z-index: 1; width: 100%; min-height: clamp(380px, 46vw, 560px); }
.skills-overlay.from-laser .skills-overlay__box { transform: none; transition: opacity .35s ease; }
@media (prefers-reduced-motion: reduce) { .skills-laser { transition: none; } }

/* 6 Oct: "Caution / Weapons Inside" and its icon sit inside the chamfered neon outline (same as Get in touch). */
.skills-tap { padding: clamp(18px, 2vw, 26px) clamp(34px, 4vw, 56px); min-width: clamp(250px, 24vw, 340px); border: 0; background: transparent; isolation: isolate; }
.skills-tap .skills-tap__outline { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.skills-tap:hover .contact-outline path, .skills-tap:focus-visible .contact-outline path { stroke: #c98cff; filter: drop-shadow(0 0 4px rgba(201, 140, 255, .95)) drop-shadow(0 0 11px rgba(139, 66, 255, .48)); }
.skills-tap:focus-visible { outline: none; }
.skills-tap::before { content: ''; position: absolute; inset: 1px; z-index: -1; background: rgba(5, 3, 9, .78); clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px); }   /* dark fill so the laser pixels don't run through the words */

/* 6 Oct: small screens (up to 900px) -- hamburger menu in the chamfered CTA style instead of the full nav. */
.menu-cta, .menu-panel { display: none; }
@media (max-width: 900px) {
  .masthead { grid-template-columns: 1fr auto !important; gap: 12px !important; min-height: 0 !important; padding: 10px 4% !important; align-items: center; transition: background .3s ease, box-shadow .3s ease, border-color .3s ease, transform .4s cubic-bezier(.22, 1, .36, 1); }
  .masthead > .main-nav, .masthead > .contact-cta { display: none !important; }
  .masthead.is-hidden { transform: translateY(calc(-100% - 24px)); }
  .menu-cta { display: grid; place-items: center; position: relative; isolation: isolate; width: 64px; height: 44px; padding: 0; border: 0; background: transparent; cursor: pointer; color: #faf7ff; justify-self: end; }
  .menu-cta .contact-outline, .menu-item .contact-outline { z-index: -1; }
  .menu-cta:hover .contact-outline path, .menu-cta:focus-visible .contact-outline path, .menu-cta.is-open .contact-outline path { stroke: #c98cff; filter: drop-shadow(0 0 4px rgba(201, 140, 255, .95)) drop-shadow(0 0 11px rgba(139, 66, 255, .48)); }
  .menu-cta:focus-visible, .menu-item:focus-visible { outline: none; }
  .menu-cta__bars { display: grid; gap: 5px; width: 22px; }
  .menu-cta__bars i { display: block; height: 2px; border-radius: 2px; background: currentColor; box-shadow: 0 0 6px rgba(183, 108, 255, .7); transition: transform .3s cubic-bezier(.22, 1, .36, 1), opacity .2s ease; }
  .menu-cta.is-open .menu-cta__bars i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .menu-cta.is-open .menu-cta__bars i:nth-child(2) { opacity: 0; }
  .menu-cta.is-open .menu-cta__bars i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .menu-panel { position: absolute; top: calc(100% + 10px); right: 0; width: min(78vw, 300px); display: flex; flex-direction: column; gap: 4px; padding: 14px; isolation: isolate; background: rgba(5, 3, 9, .86); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px); }
  .menu-panel[hidden] { display: none; }
  .menu-panel > .contact-outline { z-index: -1; }
  .menu-item { position: relative; isolation: isolate; display: flex; align-items: center; min-height: 48px; padding: 0 16px; border: 0; background: transparent; color: #faf7ff; cursor: pointer; text-align: left; font-family: 'Inter', sans-serif; font-size: 16px; font-weight: 500; letter-spacing: .055em; text-transform: uppercase; }
  .menu-item:hover, .menu-item:focus-visible { color: #fff; text-shadow: 0 0 12px rgba(224, 31, 253, .7); }
  .menu-item--cta { justify-content: center; margin-top: 8px; min-height: 52px; }
  .menu-item--cta .menu-item__label { display: inline-flex; align-items: center; gap: 10px; }
  .menu-item--cta .contact-dot { position: static; margin: 0; }
  .menu-item[disabled] { opacity: .45; cursor: default; }
}
@media (prefers-reduced-motion: reduce) { .masthead, .menu-cta__bars i { transition: none !important; } }

/* 6 Oct: bigger Annygator logo on every screen (was 30 / 24 / 21px). */
.wordmark .wordmark__logo { height: 40px; }
@media (max-width: 900px) { .wordmark .wordmark__logo { height: 34px; } }
@media (max-width: 700px) { .wordmark .wordmark__logo { height: 30px; } }
.menu-panel { background: rgba(5, 3, 9, .94) !important; }
/* 6 Oct: hamburger button a little smaller (64x44 -> 54x38). */
@media (max-width: 900px) {
  .menu-cta { width: 54px; height: 38px; }
  .menu-cta__bars { width: 19px; gap: 4px; }
  .menu-cta.is-open .menu-cta__bars i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .menu-cta.is-open .menu-cta__bars i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
}
/* 6 Oct: menu panel -- the outline now draws the whole chamfered shape (border + fill), so both angled corners show their border.
   (The CSS clip-path used before was cutting the border off along the two diagonals.) */
@media (max-width: 900px) {
  .menu-panel { clip-path: none !important; background: transparent !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .menu-panel > .contact-outline path { fill: rgba(5, 3, 9, .94); }
}

/* 6 Oct: Meet the Annygators heading — "Meet the" smaller, Annygators wordmark larger (all states) */
.ag-title__lead, .ag-title__white { --lead: .62; }
.ag-title__lead { font-size: .62em; }
.ag-title .ag-wordmark { height: .92em; }
.ag-title__white::before, .ag-title__white::after { padding-inline-end: calc(.92em * 5.47 + .3em); }

/* 6 Oct: unfinished-project thumbnails say what is going on instead of "[PROJECT THUMBNAIL]" */
.ag-card__thumb--wip { position: relative; overflow: hidden; border: 1px solid color-mix(in srgb, var(--ag-c, #b76cff) 55%, transparent);
  background: repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 8px, transparent 8px 16px), rgba(5, 3, 9, .6); }
.ag-card__thumb--wip::after { content: ""; position: absolute; inset: 0 auto 0 -40%; width: 40%; pointer-events: none;
  background: linear-gradient(100deg, transparent, color-mix(in srgb, var(--ag-c, #b76cff) 28%, transparent), transparent);
  animation: ag-wip-sweep 3.4s ease-in-out infinite; }
.ag-wip { position: relative; z-index: 1; display: grid; gap: 6px; justify-items: center; text-align: center; padding: 0 8px; }
.ag-wip b { font-family: 'Chakra Petch', sans-serif; font-weight: 700; font-size: clamp(11px, 1.15vw, 16px); letter-spacing: .14em; text-transform: uppercase; color: var(--ag-c, #b76cff);
  text-shadow: 0 0 12px color-mix(in srgb, var(--ag-c, #b76cff) 70%, transparent); }
.ag-wip em { font-style: normal; font-family: 'IBM Plex Sans Condensed', sans-serif; font-size: clamp(8px, .8vw, 11px); letter-spacing: .12em; text-transform: uppercase; color: rgba(245, 241, 249, .6); font-weight: 400;}
.ag-wip u { text-decoration: none; animation: ag-wip-blink 1s steps(1, end) infinite; }
@keyframes ag-wip-sweep { 0% { left: -40%; } 60%, 100% { left: 110%; } }
@keyframes ag-wip-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ag-card__thumb--wip::after, .ag-wip u { animation: none; } }
@media (max-width: 700px) { .ag-wip em { display: none; } .ag-wip b { font-size: 9px; letter-spacing: .08em; } }

/* 6 Oct: glass sheen on the finished-project thumbnails — a pane of light glides across every ~3.6s (staggered per card) */
.ag-card__thumb--img, .top3-card__thumb--img { position: relative; isolation: isolate; }
.ag-card__thumb--img::before, .top3-card__thumb--img::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 0 0 1px rgba(255,255,255,.08);
  background: linear-gradient(160deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 38%); }
.ag-card__thumb--img::after, .top3-card__thumb--img::after { content: ""; position: absolute; top: -20%; bottom: -20%; left: 0; width: 38%; z-index: 3; pointer-events: none;
  background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,.05) 30%, rgba(255,255,255,.34) 50%, rgba(255,255,255,.05) 70%, transparent 100%);
  transform: translateX(-160%) skewX(-18deg); mix-blend-mode: screen; filter: blur(1px);
  animation: thumb-glass 3.6s cubic-bezier(.45, 0, .25, 1) infinite; animation-delay: var(--glass-d, 0s); }
.top3__list > li:nth-child(2) { --glass-d: 1.2s; } .top3__list > li:nth-child(3) { --glass-d: 2.4s; }
.ag-card[data-i="1"] { --glass-d: .9s; } .ag-card[data-i="2"] { --glass-d: 1.8s; } .ag-card[data-i="3"] { --glass-d: 2.7s; }
@keyframes thumb-glass { 0% { transform: translateX(-160%) skewX(-18deg); } 38%, 100% { transform: translateX(380%) skewX(-18deg); } }
@media (prefers-reduced-motion: reduce) { .ag-card__thumb--img::after, .top3-card__thumb--img::after { animation: none; opacity: 0; } }

/* 6 Oct: fix — the glass thumbnails (position:relative) were sitting above the card's stretched link and swallowing clicks. Lift the link overlay above them. */
.ag-card__link::after, .top3-card__link::after { z-index: 5; }

/* 8 Oct: Games section (after Play): kicker + a row of game cards (4 slots). Existing tokens only. */
.games-section { position: relative; padding: clamp(40px, 6vw, 72px) 5% clamp(70px, 9vw, 120px); }
.games-inner { width: 100%; max-width: 1240px; margin: 0 auto; display: flex; flex-direction: column; gap: 26px; }
.games-section .skills-kicker { align-self: flex-start; }
.games-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 24px); }
.game-card { position: relative; display: flex; flex-direction: column; gap: 14px; height: 100%; transition: transform .3s ease; }
.game-card__thumb { position: relative; aspect-ratio: 16 / 9; }
.game-card__pic { position: absolute; inset: 0; overflow: hidden; background: rgba(183, 108, 255, .05); clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px); }
.game-card__pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* chamfered neon outline (top-left + bottom-right cut, same shape as the nav buttons), drawn at the card's real size by games.js */
.game-card__outline { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; overflow: visible; pointer-events: none; }
.game-card__outline path { fill: none; stroke: #b76cff; stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-linejoin: round; filter: drop-shadow(0 0 3px rgba(183, 108, 255, .85)) drop-shadow(0 0 8px rgba(139, 66, 255, .35)); transition: stroke .25s, filter .25s; }
.game-card__text { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px; }
.game-card__no { font-family: 'IBM Plex Sans Condensed', sans-serif; font-size: 13px; letter-spacing: .06em; color: #b76cff; font-weight: 400;}
.game-card__title { margin: 0; font-family: 'Chakra Petch', sans-serif; font-weight: 700; font-size: clamp(20px, 1.9vw, 26px); letter-spacing: -.02em; line-height: 1.1; color: #faf7ff; }
.game-card__title a { color: inherit; text-decoration: none; }
.game-card__link::after { content: ''; position: absolute; inset: 0; z-index: 2; }
.game-card:hover { transform: translateY(-3px); }
.game-card:hover .game-card__outline path, .game-card:focus-within .game-card__outline path { stroke: #c98cff; filter: drop-shadow(0 0 4px rgba(201, 140, 255, .95)) drop-shadow(0 0 11px rgba(139, 66, 255, .48)); }
.game-card__link:focus-visible { outline: 1px solid #b76cff; outline-offset: 4px; }
.game-card__pills { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; flex-basis: 100%; }
.game-card__pills li { font-family: 'IBM Plex Sans Condensed', sans-serif; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: #dbb8ff; border: 1px solid rgba(183, 108, 255, .4); border-radius: 99px; padding: 3px 10px; font-weight: 400;}
.game-card--wip:hover { transform: none; }
.game-card--wip .game-card__pic { display: grid; place-items: center; }
.game-card--wip .game-card__outline path { stroke-dasharray: 6 5; filter: none; stroke: rgba(183, 108, 255, .55); }
.game-card--wip .game-card__title { color: rgba(250, 247, 255, .5); }
.games-section .games-inner > *, .games-grid > li { opacity: 0; transform: translateY(16px); transition: opacity .7s ease, transform .7s ease; }
.games-section.is-in .games-inner > *, .games-section.is-in .games-grid > li { opacity: 1; transform: none; }
.games-section.is-in .games-grid > li:nth-child(2) { transition-delay: .1s; } .games-section.is-in .games-grid > li:nth-child(3) { transition-delay: .2s; } .games-section.is-in .games-grid > li:nth-child(4) { transition-delay: .3s; }
@media (prefers-reduced-motion: reduce), (scripting: none) { .games-section .games-inner > *, .games-grid > li { opacity: 1; transform: none; transition: none; } }
@media (max-width: 1000px) { .games-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .games-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* 8 Oct: title glitches like the Annygator logo: slice shift + magenta/cyan split, on its own every 3-4 seconds and when tapped.
   The text sits in .gl-main (it gets sliced); the colour split layers are the heading's ::before / ::after. Off for reduced motion. */
.gl-title { position: relative; }
.gl-title::before, .gl-title::after { content: attr(data-text); position: absolute; inset: 0; white-space: pre; pointer-events: none; mix-blend-mode: screen; opacity: 0; -webkit-text-fill-color: currentColor; text-align: inherit; }
.gl-title::before { color: #e01ffd; }
.gl-title::after { color: #00e5ff; }
.gl-title.is-glitching::before { animation: lg-split-a .62s steps(1, end) forwards; }
.gl-title.is-glitching::after { animation: lg-split-b .62s steps(1, end) forwards; }
.gl-title.is-glitching .gl-main { display: inline-block; animation: lg-main .62s steps(1, end) forwards; }
@media (prefers-reduced-motion: reduce) { .gl-title.is-glitching::before, .gl-title.is-glitching::after, .gl-title.is-glitching .gl-main { animation: none; } }

/* 8 Oct: "Play now" button inside a game card on hover / keyboard focus (always shown on touch screens and <=900px, where there is no hover) */
.game-card__pic::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(5, 3, 9, .72), rgba(5, 3, 9, .3) 55%, rgba(5, 3, 9, .1)); opacity: 0; transition: opacity .3s ease; pointer-events: none; }
.game-card__cta { position: absolute; left: 50%; top: 50%; z-index: 2; translate: -50% -40%; opacity: 0; width: 170px; height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; isolation: isolate; font-family: 'IBM Plex Sans Condensed', sans-serif; font-size: 14px; letter-spacing: .14em; text-transform: uppercase; color: #faf7ff; text-shadow: 0 0 12px rgba(224, 31, 253, .45); transition: opacity .3s ease, translate .35s cubic-bezier(.2, .7, .2, 1); pointer-events: none; font-weight: 400;}
.game-card__cta svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; overflow: visible; }
.game-card__cta path { fill: rgba(5, 3, 9, .88); stroke: #c98cff; stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-linejoin: round; filter: drop-shadow(0 0 4px rgba(201, 140, 255, .95)) drop-shadow(0 0 11px rgba(139, 66, 255, .48)); }
.game-card__cta span:last-child { font-size: 18px; color: #cda8ff; }
.game-card:hover .game-card__pic::after, .game-card:focus-within .game-card__pic::after { opacity: 1; }
.game-card:hover .game-card__cta, .game-card:focus-within .game-card__cta { opacity: 1; translate: -50% -50%; }
@media (hover: none), (max-width: 900px) {
 .game-card__pic::after { opacity: 1; background: linear-gradient(to top, rgba(5, 3, 9, .78), rgba(5, 3, 9, .3) 38%, rgba(5, 3, 9, 0) 62%); }
 .game-card__cta { left: 12px; top: auto; bottom: 12px; translate: 0 0; opacity: 1; width: 138px; height: 40px; font-size: 12px; }   /* bottom-left, so it doesn't cover the title in the artwork (bottom-right) */
 .game-card:hover .game-card__cta, .game-card:focus-within .game-card__cta { translate: 0 0; }
}

/* 8 Oct: "Games" heading in the same blue-to-magenta vertical gradient as "Meet the" (Annyesha), Chakra Petch 700, bigger */
.games-heading { align-self: flex-start; margin: 0; display: inline-block; font-family: 'Chakra Petch', sans-serif; font-weight: 700; font-size: clamp(48px, 5vw, 72px); line-height: 1.2; letter-spacing: 0; background: linear-gradient(180deg, #1c19d7 0%, #e01ffd 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
@media (max-width: 700px) { .games-heading { font-size: clamp(44px, 12vw, 56px); } }

/* 8 Oct: small screens keep the 4 game cards in a 2x2 grid (Annyesha): tighter gap, smaller chamfer + Play now button so it fits narrow cards */
@media (max-width: 560px) {
 .games-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
 .game-card__pic { clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }
 .game-card__cta { left: 8px; bottom: 8px; width: 96px; height: 30px; font-size: 10px; letter-spacing: .06em; }
}

/* 8 Oct: each game card glows in its own thumbnail's colour (Annyesha). Card 01 stays violet; card 02 (Design, Intersected) is cyan to match its artwork. Outline, hover glow, Play now button, number and focus ring all follow --gc. */
.game-card--cyan { --gc: #00e5ff; --gc-hi: #6ff3ff; --gc-rgb: 0, 229, 255; }
.game-card--cyan .game-card__outline path { stroke: var(--gc); filter: drop-shadow(0 0 3px rgba(var(--gc-rgb), .85)) drop-shadow(0 0 8px rgba(var(--gc-rgb), .4)); }
.game-card--cyan:hover .game-card__outline path, .game-card--cyan:focus-within .game-card__outline path { stroke: var(--gc-hi); filter: drop-shadow(0 0 4px rgba(var(--gc-rgb), .95)) drop-shadow(0 0 12px rgba(var(--gc-rgb), .55)); }
.game-card--cyan .game-card__cta path { stroke: var(--gc-hi); filter: drop-shadow(0 0 4px rgba(var(--gc-rgb), .95)) drop-shadow(0 0 11px rgba(var(--gc-rgb), .5)); }
.game-card--cyan .game-card__cta span:last-child, .game-card--cyan .game-card__no { color: var(--gc); }
.game-card--cyan .game-card__link:focus-visible { outline-color: var(--gc); }
.game-card--cyan .game-card__pic { background: rgba(var(--gc-rgb), .05); }

/* 8 Oct: card 01 (The Glitch Protocol) glows electric blue to match its new blue/orange artwork */
.game-card--blue { --gc: #2f7bff; --gc-hi: #6aa2ff; --gc-rgb: 47, 123, 255; }
.game-card--blue .game-card__outline path { stroke: var(--gc); filter: drop-shadow(0 0 3px rgba(var(--gc-rgb), .85)) drop-shadow(0 0 8px rgba(var(--gc-rgb), .4)); }
.game-card--blue:hover .game-card__outline path, .game-card--blue:focus-within .game-card__outline path { stroke: var(--gc-hi); filter: drop-shadow(0 0 4px rgba(var(--gc-rgb), .95)) drop-shadow(0 0 12px rgba(var(--gc-rgb), .55)); }
.game-card--blue .game-card__cta path { stroke: var(--gc-hi); filter: drop-shadow(0 0 4px rgba(var(--gc-rgb), .95)) drop-shadow(0 0 11px rgba(var(--gc-rgb), .5)); }
.game-card--blue .game-card__cta span:last-child, .game-card--blue .game-card__no { color: var(--gc-hi); }
.game-card--blue .game-card__link:focus-visible { outline-color: var(--gc); }
.game-card--blue .game-card__pic { background: rgba(var(--gc-rgb), .05); }

/* 8 Oct: card 03 (Pixel Patrol) glows red to match its artwork */
.game-card--red { --gc: #ff2e3d; --gc-hi: #ff7a84; --gc-rgb: 255, 46, 61; }
.game-card--red .game-card__outline path { stroke: var(--gc); filter: drop-shadow(0 0 3px rgba(var(--gc-rgb), .85)) drop-shadow(0 0 8px rgba(var(--gc-rgb), .4)); }
.game-card--red:hover .game-card__outline path, .game-card--red:focus-within .game-card__outline path { stroke: var(--gc-hi); filter: drop-shadow(0 0 4px rgba(var(--gc-rgb), .95)) drop-shadow(0 0 12px rgba(var(--gc-rgb), .55)); }
.game-card--red .game-card__cta path { stroke: var(--gc-hi); filter: drop-shadow(0 0 4px rgba(var(--gc-rgb), .95)) drop-shadow(0 0 11px rgba(var(--gc-rgb), .5)); }
.game-card--red .game-card__cta span:last-child, .game-card--red .game-card__no { color: var(--gc-hi); }
.game-card--red .game-card__link:focus-visible { outline-color: var(--gc); }
.game-card--red .game-card__pic { background: rgba(var(--gc-rgb), .05); }

/* Dashes under the Annygator description are clickable (annygators.js): only the visible description's dashes take clicks */
.ag-role__bar u { position: relative; cursor: pointer; transition: background .2s ease, transform .2s ease; }
.ag-role__bar u::after { content: ""; position: absolute; inset: -9px -2px; }
@media (min-width: 1101px) and (hover: hover) and (pointer: fine) { .ag-role__bar u:hover { transform: scaleY(1.7); background: color-mix(in srgb, var(--ag-c, #b76cff) 70%, rgba(245, 241, 249, .35)); } }
.ag-role__bar u:focus-visible { outline: 2px solid var(--ag-c, #b76cff); outline-offset: 3px; }
.ag-role__bar u { pointer-events: none; }
.annygators-section:not([data-step]) .ag-role__item[data-i="0"] .ag-role__bar u,
.annygators-section[data-step="0"] .ag-role__item[data-i="0"] .ag-role__bar u,
.annygators-section[data-step="1"] .ag-role__item[data-i="1"] .ag-role__bar u,
.annygators-section[data-step="2"] .ag-role__item[data-i="2"] .ag-role__bar u,
.annygators-section[data-step="3"] .ag-role__item[data-i="3"] .ag-role__bar u,
.annygators-section[data-step="4"] .ag-role__item[data-i="4"] .ag-role__bar u { pointer-events: auto; }
.annygators-section:not(.is-formed) .ag-role__bar u { pointer-events: none !important; }
@media (prefers-reduced-motion: reduce) { .ag-role__bar u { pointer-events: none !important; cursor: default; } }

/* "Annygators" in the Meet the Annygators title is live text in Chakra Petch (not the logo image) */
.ag-title .ag-wordmark.ag-wordmark--txt { height: auto; width: auto; display: inline-block; font-family: 'Chakra Petch', sans-serif; font-weight: 700; font-size: 1em; line-height: 1.2; letter-spacing: 0; vertical-align: baseline; margin-left: 0;
  background: linear-gradient(180deg, #1c19d7 0%, #e01ffd 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.ag-title__white .ag-wordmark.ag-wordmark--txt { background: none; color: #fff; -webkit-text-fill-color: #fff; }
.ag-title__white::before, .ag-title__white::after { padding-inline-end: calc(5.5em + .3em); }
/* "Meet the" and "Annygators" are the same size */
.ag-title .ag-title__lead { font-size: 1em; }

/* 21 Oct: Work section, desktop (>=1101px). The avatar stands on the far left, its left edge on the same line as the
   title/role text, under the dashes; the two work cards float in the middle of the screen at different angles
   (they still slide out from behind the avatar). Tablets/phones keep their own layouts. */
@media (min-width: 1101px) {
  .annygators-section .ag-avatars { left: 4.5%; transform: none; top: calc(15% + 262px); bottom: 0; height: auto; }
  .annygators-section .ag-avatar { object-position: left bottom; }
  .annygators-section.is-formed .ag-card--a[data-i] { left: 34%; right: auto; top: 40%; bottom: auto; --ag-ry: 9deg; --ag-rz: -4deg; --ag-fx: -70%; }
  .annygators-section.is-formed .ag-card--b[data-i] { left: auto; right: 6%; top: 13%; bottom: auto; --ag-ry: -12deg; --ag-rz: 4deg; --ag-fx: -70%; }
  .annygators-section.is-formed .ag-card--a[data-i="1"], .annygators-section.is-formed .ag-card--a[data-i="3"] { left: 38%; top: 14%; --ag-ry: 7deg; --ag-rz: 3deg; }
  .annygators-section.is-formed .ag-card--b[data-i="1"], .annygators-section.is-formed .ag-card--b[data-i="3"] { right: 7%; top: 44%; --ag-ry: -9deg; --ag-rz: -3.5deg; }
  .annygators-section.is-formed .ag-card--a[data-i="2"] { left: 33%; top: 28%; --ag-ry: 6deg; --ag-rz: -5deg; }
  .annygators-section.is-formed .ag-card--b[data-i="2"] { right: 8%; top: 46%; --ag-ry: -12deg; --ag-rz: 5deg; }
}

/* 21 Oct: "Meet the Annygators" on ONE line on desktop; third Architect card (MITID One) -- desktop only, hidden <=1100px */
.ag-card--c { --ag-ry: 6deg; --ag-rz: -2deg; --ag-fx: -70%; }
.annygators-section.is-formed .ag-card--c { --ag-d: 1.35s; }
.annygators-section.is-formed[data-step="0"] .ag-card--c[data-i="0"] { --ag-d: 1.35s; }
@media (max-width: 1100px) { .ag-card--c { display: none; } }
@media (min-width: 1101px) {
  .annygators-section.is-formed .ag-head { width: auto; white-space: nowrap; }
  .annygators-section.is-formed .ag-card--c[data-i="0"] { left: 62%; right: auto; top: 54%; bottom: auto; --ag-ry: -6deg; --ag-rz: 3deg; --ag-fx: -70%; }
  .annygators-section.is-formed .ag-card--a[data-i="1"], .annygators-section.is-formed .ag-card--a[data-i="3"] { top: 30%; }
}

/* 21 Oct: equal spacing (32px) between the title, the description + dashes block, and the avatar's head (desktop) */
@media (min-width: 1101px) {
  .annygators-section.is-formed .ag-role { margin-top: 32px; }
  .annygators-section .ag-avatars { top: calc(15% + var(--ag-hh) + 32px); }
}

/* 22 Oct: Work cards roll in from the back (all screens) + small-screen layout (avatar left, cards right and middle) */
.annygators-section .ag-card { --ag-from: translate3d(var(--ag-rx, 0%), -4%, -760px) rotateY(var(--ag-spin, 70deg)) scale(.8); }
.annygators-section .ag-card--a { --ag-spin: -78deg; --ag-rx: -30%; }
.annygators-section .ag-card--b { --ag-spin: 78deg; --ag-rx: 30%; }
.annygators-section .ag-card--c { --ag-spin: -64deg; --ag-rx: -20%; }
@media (max-width: 1100px) {
  .annygators-section { --ag-avt: calc(var(--ag-hdb, 230px) + 14px); }
  .annygators-section .ag-avatars { left: 3%; right: auto; transform: none; top: var(--ag-avt); bottom: var(--ag-bot, 84px); height: auto; max-width: 48vw; }
  .annygators-section .ag-avatar { object-position: left bottom; }
  .annygators-section.is-formed .ag-card--a[data-i] { left: auto; right: 3%; top: var(--ag-avt); bottom: auto; width: clamp(150px, 40vw, 300px); --ag-ry: -9deg; --ag-rz: 2deg; }
  .annygators-section.is-formed .ag-card--b[data-i] { left: auto; right: 7%; top: calc(var(--ag-avt) + var(--ag-fh, 200px) + 14px); bottom: auto; width: clamp(150px, 40vw, 300px); --ag-ry: -7deg; --ag-rz: -2.5deg; }
}
@media (min-width: 701px) and (max-width: 900px) {
  .annygators-section .ag-avatars { max-width: 40vw; }
  .annygators-section.is-formed .ag-card--a[data-i] { right: 5%; width: 30vw; }
  .annygators-section.is-formed .ag-card--b[data-i] { right: 22%; top: calc(var(--ag-avt) + var(--ag-fh, 200px) + 16px); width: 30vw; }
}
@media (max-width: 700px) and (max-height: 720px) {
  .annygators-section { --ag-avt: calc(var(--ag-hdb, 230px) + 8px); }
  .annygators-section.is-formed .ag-card--a[data-i], .annygators-section.is-formed .ag-card--b[data-i] { width: 33vw; }
  .annygators-section.is-formed .ag-card--b[data-i] { top: auto; bottom: 8px; }
}
@media (min-width: 901px) and (max-width: 1100px) {
  .annygators-section .ag-avatars { max-width: 34vw; }
  .annygators-section.is-formed .ag-card--a[data-i] { right: 3%; width: 23vw; }
  .annygators-section.is-formed .ag-card--b[data-i] { right: 29%; top: calc(var(--ag-avt) + 56px); width: 23vw; }
}

/* 22 Oct: top cards on big screens start level with the role name, not above the title */
@media (min-width: 1101px) {
  .annygators-section.is-formed .ag-card--b[data-i="0"], .annygators-section.is-formed .ag-card--b[data-i="2"], .annygators-section.is-formed .ag-card--b[data-i="4"] { top: var(--ag-rt, 28%); }
}

/* 22 Oct: big screens, MITID One sits under the Bengzagite card (the top cards moved down to the role name, so they collided) */
@media (min-width: 1101px) {
  .annygators-section.is-formed .ag-card--c[data-i="0"] { left: auto; right: 9%; top: calc(var(--ag-rt, 28%) + var(--ag-fh, 300px) + 6px); bottom: auto; width: calc(min(25vw, 400px, (100svh - 150px) / 2.05) * .8); }
}

/* 22 Oct: big screens, all Work cards one size; MITID One tucked closer under Bengzagite */
@media (min-width: 1101px) {
  .annygators-section .ag-card { width: min(25vw, 400px, calc((100svh - 150px) / 2.3)); }
  .annygators-section.is-formed .ag-card--c[data-i="0"] { width: min(25vw, 400px, calc((100svh - 150px) / 2.3)); top: calc(var(--ag-rt, 28%) + var(--ag-fh, 300px) + 12px); }
}

/* 22 Oct: big screens, first avatar: three cards fan out across the middle (Coffee Board low-left, MITID One in the middle, Bengzagite top-right) */
@media (min-width: 1101px) {
  .annygators-section .ag-card { width: min(21vw, 400px, calc((100svh - 150px) / 2.3)); }
  .annygators-section.is-formed .ag-card--c[data-i="0"] { width: min(21vw, 400px, calc((100svh - 150px) / 2.3)); }
  .annygators-section.is-formed .ag-card--a[data-i="0"] { left: 28%; right: auto; top: 38%; bottom: auto; }
  .annygators-section.is-formed .ag-card--c[data-i="0"] { left: calc(28% + min(21vw, 400px) + 1.5vw); right: auto; top: 52%; bottom: auto; }
  .annygators-section.is-formed .ag-card--b[data-i="0"] { left: auto; right: 6%; }
}

/* 22 Oct: phones (<=700px): title block on the left, avatar (head to chest only) beside it on the right, and the project cards in a tidy 2-column grid below (no floating, no tilt). All five Annygators' cards share the same two grid cells; only the active pair shows. */
@media (max-width: 700px) {
  .annygators-section { --ag-gtop: calc(var(--ag-hdb, 230px) + 16px); }
  .annygators-section.is-formed .ag-head { left: 4%; transform: none; width: 49%; max-width: none; text-align: left; }
  .annygators-section .ag-avatars { left: auto; right: 3%; top: var(--ag-hdt, 18px); bottom: auto; width: 42%; max-width: none; height: auto; aspect-ratio: 1 / .8; overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 100%); mask-image: linear-gradient(to bottom, #000 62%, transparent 100%); }
  .annygators-section .ag-avatar { object-fit: cover; object-position: 50% 0; }
  .annygators-section .ag-cards { position: absolute; left: 4%; right: 4%; top: var(--ag-gtop); display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: stretch; pointer-events: none; }
  .annygators-section .ag-card, .annygators-section.is-formed .ag-card--a[data-i], .annygators-section.is-formed .ag-card--b[data-i] {
    position: relative; left: auto; right: auto; top: auto; bottom: auto; width: auto; margin: 0; --ag-ry: 0deg; --ag-rz: 0deg; --ag-rest: perspective(1100px); pointer-events: none; }
  .annygators-section .ag-card--a, .annygators-section.is-formed .ag-card--a[data-i] { grid-column: 1; grid-row: 1; }
  .annygators-section .ag-card--b, .annygators-section.is-formed .ag-card--b[data-i] { grid-column: 2; grid-row: 1; }
  .annygators-section.is-formed[data-step="0"] .ag-card[data-i="0"]:has(.ag-card__link), .annygators-section.is-formed[data-step="1"] .ag-card[data-i="1"]:has(.ag-card__link), .annygators-section.is-formed[data-step="2"] .ag-card[data-i="2"]:has(.ag-card__link),
  .annygators-section.is-formed[data-step="3"] .ag-card[data-i="3"]:has(.ag-card__link), .annygators-section.is-formed[data-step="4"] .ag-card[data-i="4"]:has(.ag-card__link) { pointer-events: auto; }
}

/* 22 Oct: phones: the avatar box is exactly as tall as the title block (top of "Meet the Annygators" down to the dashes); the figure is scaled so head-to-chest fills that height */
@media (max-width: 700px) {
  .annygators-section { --ag-hdh: calc(var(--ag-hdb, 164px) - var(--ag-hdt, 18px)); }
  .annygators-section .ag-avatars { height: var(--ag-hdh); aspect-ratio: auto; }
  .annygators-section .ag-avatar { inset: 0 auto auto 0; width: 100%; height: calc(var(--ag-hdh) / .46); object-fit: cover; object-position: 50% 0; }
}

/* 22 Oct: every control uses the site fonts, never the browser default (menu buttons fell back to Arial) */
button, input, select, textarea, .menu-item, .menu-item span { font-family: inherit; }
.menu-item, .menu-item span { font-family: 'Inter', sans-serif; }

/* 22 Oct: big screens, steps with only two cards (Investigator, Cartographer, Empath, Strategist): the pair sits close together in the middle of the free area instead of far apart */
@media (min-width: 1101px) {
  .annygators-section { --ag-cw: min(21vw, 400px, calc((100svh - 150px) / 2.3)); }
  .annygators-section.is-formed .ag-card--a:is([data-i="1"], [data-i="2"], [data-i="3"], [data-i="4"]) { left: calc(62% - var(--ag-cw) - 1.75vw); right: auto; }
  .annygators-section.is-formed .ag-card--b:is([data-i="1"], [data-i="2"], [data-i="3"], [data-i="4"]) { left: calc(62% + 1.75vw); right: auto; }
}

/* 22 Oct: phones: when an Annygator has more than two projects (The Architect has three) the cards sit in one row that scrolls sideways (swipe right to left); the next card peeks in as a hint. Two-card Annygators keep the plain 2-column grid. */
@media (max-width: 700px) {
  .annygators-section .ag-card--c[data-i="0"] { display: block; }
  .annygators-section .ag-card--c, .annygators-section.is-formed .ag-card--c[data-i="0"] { position: relative; left: auto; right: auto; top: auto; bottom: auto; width: auto; margin: 0; grid-column: 3; grid-row: 1; --ag-ry: 0deg; --ag-rz: 0deg; --ag-rest: perspective(1100px); pointer-events: none; }
  .annygators-section.is-formed[data-step="0"] .ag-cards {
    grid-template-columns: repeat(3, 44%); left: calc(4% - 6px); right: calc(4% - 6px); top: calc(var(--ag-gtop) - 10px); padding: 10px 6px 16px;
    overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-left: 6px; scrollbar-width: none; -webkit-overflow-scrolling: touch; pointer-events: auto; touch-action: pan-x pan-y; }
  .annygators-section.is-formed[data-step="0"] .ag-cards::-webkit-scrollbar { display: none; }
  .annygators-section.is-formed[data-step="0"] .ag-card { scroll-snap-align: start; }
  .annygators-section.is-formed[data-step="0"] .ag-card--c[data-i="0"] { pointer-events: auto; }
}

/* 22 Oct: phones: every Work card is a fixed square (never squeezed); every Annygator's cards sit in one row that scrolls sideways, the next card peeking in */
@media (max-width: 700px) {
  .annygators-section { --ag-sq: min(64vw, 270px); }
  .annygators-section.is-formed[data-step] .ag-cards { grid-template-columns: none; grid-auto-columns: var(--ag-sq); align-items: start; left: calc(4% - 6px); right: calc(4% - 6px); top: calc(var(--ag-gtop) - 10px); padding: 10px 6px 16px;
    overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-left: 6px; scrollbar-width: none; -webkit-overflow-scrolling: touch; pointer-events: auto; touch-action: pan-x pan-y; }
  .annygators-section.is-formed[data-step] .ag-cards::-webkit-scrollbar { display: none; }
  .annygators-section.is-formed[data-step] .ag-card { aspect-ratio: 1 / 1; height: auto; align-self: start; scroll-snap-align: start; overflow: hidden; }
  .annygators-section.is-formed:not([data-step="0"]) .ag-card--c { display: none; }
}

/* 22 Oct: phones: no scroll-snap on the card row (snapping measured the cards mid-roll and left the row scrolled); it always starts level with the title text */
@media (max-width: 700px) {
  .annygators-section.is-formed[data-step] .ag-cards { scroll-snap-type: none; scroll-padding-left: 0; }
  .annygators-section.is-formed[data-step] .ag-card { scroll-snap-align: none; }
}