/* ==========================================================
   Better One — portfolio prototype
   ========================================================== */
:root {
  --bg: #e4e4e2;
  --ink: #111111;
  --ink-soft: #3a3a38;
  --muted: #8c8c88;
  --accent: #e04a32;
  --paper: #f4f4f2;
  --line: rgba(17, 17, 17, .55);

  --font-display: "Unbounded", "Vazirmatn", "Archivo Black", system-ui, sans-serif;
  --font-outline: "Archivo Black", "Vazirmatn", system-ui, sans-serif;
  --font-ui: "Syne", "Vazirmatn", system-ui, sans-serif;
  --font-body: "Syne", "Vazirmatn", system-ui, sans-serif;

  /* hero grid rows (set relative to hero height) */
  --heroH: clamp(330px, 47vh, 470px);
  --row1: calc(var(--heroH) * .12);
  --row2: calc(var(--heroH) * .92);
  --rowMid: calc((var(--row1) + var(--row2)) / 2);
  --col-l: 14%;
  --ease: cubic-bezier(.2, .8, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}
/* subtle paper grain */
body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 100;
  opacity: .22;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.5  0 0 0 0 0.5  0 0 0 0 0.5  0 0 0 .35 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

button { font: inherit; color: inherit; }
a { color: inherit; }

.stage {
  position: fixed; inset: 0;
  overflow: hidden;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
}
.stage.is-dragging { cursor: grabbing; }

/* ================= HERO ================= */
.hero {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: var(--heroH);
  pointer-events: none;
}
.hero a, .hero button { pointer-events: auto; }

.hero__accent {
  position: absolute;
  left: 50%;
  top: var(--row1);
  height: calc(var(--row2) - var(--row1));
  width: clamp(120px, 16vw, 250px);
  transform: translateX(-50%) scaleY(0);
  transform-origin: 50% 0;
  background: var(--accent);
  animation: accentIn 1.1s var(--ease) .1s forwards;
}
@keyframes accentIn { to { transform: translateX(-50%) scaleY(1); } }

.mark {
  position: absolute;
  left: var(--x); top: var(--y);
  transform: translate(-50%, -50%);
}
.cross { width: 11px; height: 11px; opacity: .6; }
.cross::before, .cross::after {
  content: ""; position: absolute; background: var(--ink);
}
.cross::before { left: 5px; top: 0; width: 1px; height: 11px; }
.cross::after  { top: 5px; left: 0; height: 1px; width: 11px; }
.tri { width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.tri--r { border-left: 8px solid var(--ink); }
.tri--l { border-right: 8px solid var(--ink); }

.label {
  position: absolute;
  margin: 0;
  font-family: var(--font-ui);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 11px;
  line-height: 1;
}
.label--welcome {
  left: var(--col-l);
  top: calc(var(--row1) - 6px);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(14px, 1.45vw, 21px);
  letter-spacing: .02em;
  line-height: .98;
}
.label--name { left: var(--col-l); top: var(--row2); transform: translateY(-50%); }
.label--role { right: var(--col-l); top: var(--row2); transform: translateY(-50%); text-align: right; }

.logo {
  position: absolute;
  right: var(--col-l);
  top: calc(var(--row1) - 4px);
  width: clamp(30px, 2.6vw, 40px);
  aspect-ratio: 1;
  transform: translateX(50%);
  display: block;
  color: var(--ink);
}
.logo svg { width: 100%; height: 100%; display: block; transition: transform .8s var(--ease); }
.logo:hover svg { transform: rotate(180deg); }

/* ---------- wordmark ---------- */
.wordmark {
  position: absolute;
  left: 50%; top: var(--rowMid);
  margin: 0;
  transform: translate(-50%, -50%);
  font-family: var(--font-outline);
  font-weight: 400;
  font-size: min(9.4vw, 17vh);
  line-height: .9;
  letter-spacing: -.01em;
  white-space: nowrap;
  text-transform: uppercase;
}
.wm { display: block; }
.wm--main { position: relative; z-index: 2; display: flex; }
.wm--main .w { display: inline-flex; }
.wm--main .w + .w { margin-left: .28em; }
.wm .ch {
  display: inline-block;
  transform-origin: 50% 100%;
  animation: chIn .9s var(--ease) both, chWarp 6s ease-in-out infinite;
  animation-delay: calc(var(--i) * 45ms + .35s), calc(var(--i) * -.45s);
}
.wm .ch--solid { color: var(--ink); }
.wm .ch--outline {
  color: transparent;
  -webkit-text-stroke: max(1.5px, .018em) var(--ink);
}
@keyframes chIn {
  from { opacity: 0; transform: translateY(40%) scaleY(.4); }
  to   { opacity: 1; transform: none; }
}
@keyframes chWarp {
  0%, 100% { translate: 0 0; scale: 1 1; }
  50% { translate: 0 calc(var(--wy, 0) * 1em); scale: 1 var(--ws, 1); }
}

.wm--echo-top, .wm--echo-bottom {
  position: absolute;
  left: 0; right: 0;
  color: transparent;
  -webkit-text-stroke: max(1px, .012em) var(--ink);
  display: flex;
  pointer-events: none;
}
.wm--echo-top .w + .w, .wm--echo-bottom .w + .w { margin-left: .28em; }
.wm--echo-top {
  top: 0;
  transform-origin: 50% 100%;
  transform: translateY(-.6em) skewX(-14deg) scaleY(.5);
  clip-path: inset(0 40% 0 0);
  z-index: 1;
}
.wm--echo-bottom {
  top: 0;
  transform-origin: 50% 100%;
  transform: translateY(-.1em) skewX(16deg) scaleY(-.42);
  clip-path: inset(0 0 0 38%);
  opacity: .85;
  z-index: 1;
}
.wm--echo-top .ch, .wm--echo-bottom .ch { animation: chWarp 6s ease-in-out infinite; animation-delay: calc(var(--i) * -.45s); }

/* ================= WHEEL ================= */
.wheel { position: absolute; inset: 0; pointer-events: none; }
.ring {
  position: absolute;
  overflow: visible;
  left: 0; top: 0; width: 1px; height: 1px;
}
.ring__dash {
  fill: none;
  stroke: var(--ink);
  stroke-opacity: .35;
  stroke-width: 1;
  stroke-dasharray: 6 9;
}
.ring__text {
  font-family: var(--font-outline);
  font-weight: 400;
  font-size: 15px;
  letter-spacing: .32em;
  fill: none;
  stroke: var(--ink);
  stroke-opacity: .32;
  stroke-width: .7;
  text-transform: uppercase;
}
.wheel__me {
  position: absolute;
  transform: translate(-50%, -50%);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 18px;
  letter-spacing: .02em;
  text-align: center;
  line-height: 1;
}
.wheel__me span { display: block; font-size: 11px; margin-bottom: 4px; }

.wheel__cards { position: absolute; left: 0; top: 0; width: 0; height: 0; }

/* ---------- cards ---------- */
.card {
  --r: 18px;
  position: absolute;
  left: 0; top: 0;
  padding: 0;
  border: 0;
  border-radius: var(--r);
  overflow: hidden;
  pointer-events: auto;
  cursor: pointer;
  background: var(--paper);
  box-shadow:
    0 1px 0 rgba(255,255,255,.4) inset,
    0 18px 40px -12px rgba(0,0,0,.35),
    0 4px 10px -4px rgba(0,0,0,.25);
  transform-origin: 50% 50%;
  will-change: transform;
  text-align: left;
  font-family: var(--font-ui);
  outline: none;
  display: block;
  transition: box-shadow .4s var(--ease), filter .4s var(--ease);
}
.card:focus-visible { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--accent), 0 18px 40px -12px rgba(0,0,0,.35); }
.card.is-front { box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 30px 60px -16px rgba(0,0,0,.45), 0 6px 14px -6px rgba(0,0,0,.3); }

.card__face { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 1.05em; }
.card__meta {
  display: flex; justify-content: space-between; align-items: flex-start;
  font-size: .62em; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  line-height: 1.15;
  position: relative; z-index: 2;
}
.card__meta .tiny-tri { display: inline-block; width: 0; height: 0; border-left: .45em solid transparent; border-right: .45em solid transparent; border-bottom: .6em solid currentColor; }
.card__title {
  margin-top: auto;
  position: relative; z-index: 2;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.32em;
  line-height: .98;
  letter-spacing: -.01em;
  text-transform: uppercase;
}
.card__sub { position: relative; z-index: 2; margin-top: .5em; overflow-wrap: anywhere; font-size: .62em; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; opacity: .7; }

/* card colours come from DATA via custom properties */
.card { background: var(--card-bg, var(--paper)); color: var(--card-ink, var(--ink)); text-decoration: none; -webkit-user-drag: none; }
.card * { pointer-events: none; }

/* brand logo, large */
.card__logo {
  position: absolute; left: 50%; top: 45%;
  width: 52%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  color: var(--card-icon, currentColor);
  transition: transform .5s var(--ease);
}
.card__logo svg { width: 100%; height: 100%; display: block; }
.card__logo--mark { width: 66%; }
/* oversized cropped echo of the logo in the corner — ties into the hero's echo motif */
.card__glyph {
  position: absolute; right: -30%; bottom: -24%; width: 70%; aspect-ratio: 1;
  color: var(--card-icon, currentColor); opacity: .06;
}
.card__glyph svg { width: 100%; height: 100%; display: block; }
.card:hover .card__logo, .card:focus-visible .card__logo { transform: translate(-50%, -54%) scale(1.04); }

/* placeholder images (gray) */
.ph {
  position: absolute;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.06) 0 2px, transparent 2px 9px),
    linear-gradient(160deg, #bdbdba, #8f8f8c);
  display: grid; place-items: center; align-content: center; gap: .8em;
  color: rgba(255,255,255,.9);
  font-size: .55em; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
}
.ph svg { width: 42%; opacity: .6; justify-self: center; }
.ph--full { inset: 0; }
.ph--full svg { width: 55%; margin-top: -18%; }
.card--photo .card__face::after {
  content: ""; position: absolute; inset: 45% 0 0 0; z-index: 1; border-radius: inherit;
  background: linear-gradient(to top, rgba(0,0,0,.5), transparent);
}
.card--photo { color: #fff; }
.ph--inset { left: 1.05em; right: 1.05em; top: 2.6em; height: 50%; border-radius: .6em; }
.bignum {
  position: absolute; right: .5em; bottom: 2.9em; z-index: 2;
  font-family: var(--font-display); font-weight: 900; font-size: 3em; line-height: 1;
  color: var(--card-ink);
}

/* hover / focus affordance: label + arrow pill */
.card__cta {
  position: absolute; left: .8em; right: .8em; bottom: .8em; z-index: 5;
  display: flex; justify-content: space-between; align-items: center;
  padding: .6em .9em; border-radius: 99px;
  background: var(--ink); color: var(--paper);
  font-size: .68em; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  transform: translateY(140%); opacity: 0;
  transition: transform .4s var(--ease), opacity .3s var(--ease);
}
.card__cta b { font-size: 1.35em; line-height: 1; color: var(--accent); transition: transform .3s var(--ease); }
.card:hover .card__cta, .card:focus-visible .card__cta { transform: none; opacity: 1; }
.card__face { transition: transform .4s var(--ease); }
.card:hover .card__face, .card:focus-visible .card__face { transform: translateY(-2.5em); }
.card:hover .card__face .card__meta, .card:focus-visible .card__face .card__meta { transform: translateY(4.03em); }
.card__meta { transition: transform .4s var(--ease); }
.card:hover .card__cta b { transform: translate(2px, -2px); }
.card.is-dark .card__cta { background: var(--paper); color: var(--ink); }
.card.is-accent .card__cta b { color: var(--paper); }

/* ================= HUD ================= */
.hud { position: absolute; left: 0; right: 0; bottom: 0; pointer-events: none; z-index: 50; }
.hud p {
  position: absolute; bottom: 18px; margin: 0;
  font-family: var(--font-ui); font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-soft);
}
.hud__hint { left: 22px; }
.hud__count { right: 22px; }
.hud__key { color: var(--accent); }

/* RTL support: flip side labels when dir="rtl" */
[dir="rtl"] .label--welcome, [dir="rtl"] .label--name { left: auto; right: var(--col-l); text-align: right; }
[dir="rtl"] .label--role { right: auto; left: var(--col-l); text-align: left; }
[dir="rtl"] .logo { right: auto; left: var(--col-l); transform: translateX(-50%); }

/* ================= MOBILE ================= */
@media (max-width: 700px) {
  :root {
    --heroH: clamp(300px, 46vh, 400px);
    --row1: 52px;
    --row2: calc(var(--heroH) - 22px);
    --col-l: 7%;
  }
  .mark.cross:nth-of-type(2), .mark.cross:nth-of-type(3),
  .mark.cross:nth-of-type(6), .mark.cross:nth-of-type(7) { display: none; }
  .hero__accent { width: 26vw; }
  .wordmark { font-size: 18vw; line-height: .92; }
  .wm--main { flex-direction: column; align-items: flex-start; }
  .wm--main .w + .w { margin-left: .12em; }
  .wm--echo-top { clip-path: inset(0 30% 0 0); }
  .wm--echo-top .w + .w, .wm--echo-bottom .w + .w { display: none; }
  .wm--echo-bottom { top: auto; bottom: 0; transform-origin: 50% 100%; transform: translateY(-.08em) skewX(16deg) scaleY(-.42); clip-path: inset(0 52% 0 0); }
  .label--welcome { font-size: 15px; }
  .label { font-size: 9.5px; }
  .ring__text { font-size: 12px; }
  .wheel__me { font-size: 15px; }
  .hud__hint { display: none; }
  .hud p { bottom: 12px; }
  .hud__count { right: 50%; transform: translateX(50%); }

}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* touch devices: no hover, so the front card always shows its link pill */
@media (hover: none) {
  .card.is-front .card__cta { transform: none; opacity: 1; }
  .card.is-front .card__face { padding-bottom: 3.4em; transform: none; }
  .card.is-front .card__face .card__meta { transform: none; }
}

/* ================= TYPOGRAPHIC PROJECT CARDS ================= */
.mono {
  position: absolute; left: 0; right: 0; top: 2.4em; bottom: 4.6em;
  display: grid; place-items: center;
  font-family: var(--font-outline);
  color: var(--card-ink);
  line-height: .85;
  overflow: hidden;
}
.mono span { display: block; }
.mono .o { color: transparent; -webkit-text-stroke: 1.5px var(--card-ink); }
.mono .s { color: var(--card-ink); }

/* stack: solid letters between outlined echoes (hero motif) */
.mono--stack { align-content: center; gap: 0; }
.mono--stack span { font-size: 4.6em; }
.mono--stack .o { transform: scaleY(.55) skewX(-12deg); margin-bottom: -.22em; opacity: .9; }
.mono--stack .o--flip { transform: scaleY(-.45) skewX(12deg); margin-top: -.16em; }

/* outline: huge outlined letters bleeding off the card */
.mono--outline { top: 2.2em; bottom: 5.8em; }
.mono--outline span {
  font-size: 8em; letter-spacing: -.04em;
  color: transparent; -webkit-text-stroke: 1.5px var(--card-ink);
  transform: translateX(12%) rotate(-90deg);
}

/* ring: letters inside a dashed ring with a solid dot */
.mono--ring i {
  position: absolute; width: 70%; aspect-ratio: 1; left: 15%; top: 50%; transform: translateY(-50%);
  border-radius: 50%; border: 1.5px dashed var(--card-ink); opacity: .55;
  animation: spin 30s linear infinite;
}
.mono--ring i::after { content: ""; position: absolute; width: 12%; aspect-ratio: 1; border-radius: 50%; background: var(--accent); top: 4%; left: 72%; }
.mono--ring span { font-size: 3.6em; }

/* bar: mini hero — red bar behind solid + outlined letter */
.mono--bar { grid-auto-flow: column; justify-content: center; align-items: center; }
.mono--bar i { position: absolute; left: 38%; width: 24%; top: 6%; bottom: 6%; background: var(--accent); }
.mono--bar span { position: relative; font-size: 5em; }
.mono--bar .o { -webkit-text-stroke-color: var(--ink); }

/* dots: letters over a dot grid */
.mono--dots i {
  position: absolute; inset: 8% 10%;
  background-image: radial-gradient(circle, var(--card-ink) 1.4px, transparent 1.8px);
  background-size: 1.05em 1.05em; opacity: .4;
}
.mono--dots span { position: relative; font-size: 5.4em; letter-spacing: -.03em; transform: skewX(-8deg); }

/* number: giant outlined number with a small solid initial */
.mono--number { justify-items: start; padding-left: .6em; }
.mono--number .o { font-size: 7.6em; letter-spacing: -.05em; }
.mono--number .s {
  position: absolute; right: .55em; top: .2em;
  font-size: 2.2em; width: 1.5em; height: 1.5em; display: grid; place-items: center;
  background: var(--accent); color: var(--ink); border-radius: 50%;
}

/* small brand badge (e.g. Telegram on FasterProxy) */
.card__badge {
  position: absolute; z-index: 3; right: .9em; top: 2.3em;
  width: 2.3em; height: 2.3em; border-radius: 50%;
  display: grid; place-items: center;
  background: #26A5E4; color: #fff;
  box-shadow: 0 4px 10px -4px rgba(0,0,0,.4);
}
.card__badge svg { width: 58%; height: 58%; }

/* "soon" state */
.soon {
  background: var(--accent); color: var(--ink);
  padding: .3em .6em; border-radius: 99px; letter-spacing: .14em;
}
.card.is-soon { cursor: default; }
.card.is-soon .card__cta b { color: var(--muted); }
.card__cta > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
@media (max-width: 700px) { .card__cta { font-size: .6em; padding: .7em .85em; } }

/* ================= MASCOT ================= */
.mascot {
  position: absolute;
  z-index: 1;                 /* under the cards (they are interactive), over the background */
  pointer-events: none;
  visibility: hidden;         /* shown once JS has placed it */
}
.mascot__shadow {
  position: absolute; left: 50%; bottom: -2%;
  width: 46%; height: 5%;
  translate: -50% 0;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0,0,0,.28), rgba(0,0,0,0));
  transition: width .45s var(--ease);
}
.mascot[data-pose="coding"] .mascot__shadow,
.mascot[data-pose="reading"] .mascot__shadow { width: 82%; }

.pose {
  position: absolute; inset: 0;
  opacity: 0;
  transform: translateY(5%) scale(.9);
  transform-origin: 50% 100%;
  transition: opacity .26s ease, transform .5s cubic-bezier(.34, 1.56, .64, 1);
}
.pose.is-active { opacity: 1; transform: none; }

/* the image box: bottom-centred, sized by the pose's aspect ratio */
.pose__anim {
  position: absolute; bottom: 0; left: 50%;
  translate: -50% 0;
  height: 100%;
  aspect-ratio: var(--ar);
  transform-origin: 50% 100%;
}
.pose picture, .pose img { display: block; width: 100%; height: 100%; }
.pose img { object-fit: contain; -webkit-user-drag: none; user-select: none; }
.pose--default .pose__anim { --ar: 306 / 641; }
.pose--music   .pose__anim { --ar: 299 / 646; }
.pose--coding  .pose__anim { --ar: 458 / 647; height: 80%; }   /* seated poses: keep head size consistent */
.pose--reading .pose__anim { --ar: 438 / 639; height: 80%; }

/* default: idle breathing + gentle sway */
.pose--default .pose__anim { animation: m-sway 3.8s ease-in-out infinite, m-breathe 3.2s ease-in-out infinite; }
@keyframes m-sway { 0%, 100% { rotate: -1.6deg; } 50% { rotate: 1.8deg; } }
@keyframes m-breathe { 0%, 100% { scale: 1 1; } 50% { scale: 1.006 1.014; } }

/* music: body bounces on the beat (104 BPM ≈ .577s), head layer bobs + tilts around the wrist/neck pivot */
.pose--music .pose__anim { animation: m-bounce .577s ease-in-out infinite; }
.music__body, .music__head { position: absolute; inset: 0; }
.music__head picture { transform-origin: 20.4% 32.5%; animation: m-bob 1.154s ease-in-out infinite; }
@keyframes m-bounce {
  0%, 100% { translate: -50% 0; scale: 1 1; }
  18%      { translate: -50% .8%; scale: 1.01 .985; }
  55%      { translate: -50% -.9%; scale: .995 1.008; }
}
@keyframes m-bob {
  0%, 100% { transform: rotate(0deg); }
  10%      { transform: rotate(3deg) translateY(.6%); }
  32%      { transform: rotate(.4deg); }
  50%      { transform: rotate(0deg); }
  60%      { transform: rotate(-2deg) translateY(.3%); }
  82%      { transform: rotate(-.3deg); }
}

/* coding: breathing + laptop glow pulse */
.pose--coding .pose__anim { animation: m-breathe 3.6s ease-in-out infinite; }
.coding__glow {
  position: absolute; left: 41%; top: 45%;
  width: 46%; aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 214, 140, .75), rgba(255, 190, 110, .25) 55%, rgba(255, 190, 110, 0));
  mix-blend-mode: screen;
  animation: m-glow 2.4s ease-in-out infinite;
}
@keyframes m-glow { 0%, 100% { opacity: .35; scale: .92; } 50% { opacity: .95; scale: 1.06; } }

/* reading: slow breathing + an occasional tiny nod */
.pose--reading .pose__anim { animation: m-breathe 4.8s ease-in-out infinite, m-nod 7s ease-in-out infinite; }
@keyframes m-nod { 0%, 78%, 100% { rotate: 0deg; } 84% { rotate: 1.4deg; } 90% { rotate: -.3deg; } 95% { rotate: .6deg; } }

/* ---------- per-card scenes (pose--scene), positioned in % of the mascot box ----------
   .fig  = the coding cutout + overlays;  .simg = a full generated scene image (character + props).
   Scene images are scaled a bit beyond the box so the character's head stays close to the other poses. */
.scene { position: absolute; inset: 0; }
.fig, .simg { position: absolute; left: 50%; bottom: 0; translate: -50% 0; }
.fig { aspect-ratio: 458 / 647; }
.fig__anim, .simg__anim { position: absolute; inset: 0; transform-origin: 50% 100%; }
.fig picture, .fig img, .simg picture, .simg img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.fig--full { height: 80%; }
.simg--forex  { height: 104%; aspect-ratio: 423 / 681; }
.simg--niopdc { height: 106%; aspect-ratio: 419 / 668; }
.simg--car    { height: 92%;  aspect-ratio: 661 / 662; left: auto; right: -6%; translate: 0 0; }
.pose--scene .fig__anim, .pose--scene .simg__anim { animation: m-breathe 3.6s ease-in-out infinite; }
.coding__glow--green { left: 36%; top: 11%; width: 30%; background: radial-gradient(closest-side, rgba(150, 255, 170, .6), rgba(60, 200, 110, .2) 55%, rgba(60, 200, 110, 0)); }
.coding__glow--gold  { background: radial-gradient(closest-side, rgba(255, 220, 120, .85), rgba(255, 190, 70, .3) 55%, rgba(255, 190, 70, 0)); }
.mascot[data-pose="forex"] .mascot__shadow { width: 92%; }
.mascot[data-pose="niopdc"] .mascot__shadow { width: 64%; translate: -38% 0; }
.mascot[data-pose="github-cat"] .mascot__shadow,
.mascot[data-pose="yarfood"] .mascot__shadow { width: 82%; }
.mascot[data-pose="sabtekhodro"] .mascot__shadow { width: 150%; translate: -56% 0; }

/* GitHub cat: walks in from the right (slide + bob + waddle), stops with a little hop, surprised "!" */
.cat { position: absolute; left: 66%; bottom: -1%; height: 34%; aspect-ratio: 330 / 599; z-index: 2; }
.cat__walk, .cat__hop { position: absolute; inset: 0; transform-origin: 50% 100%; }
.cat__img, .cat__img img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.cat__wow {
  position: absolute; left: 96%; top: -6%;
  font: 900 1.7em/1 var(--font-display, sans-serif); color: var(--accent);
  opacity: 0; scale: 0; transform-origin: 0% 100%; rotate: 12deg;
}
.pose--github-cat .cat { opacity: 0; }
.pose--github-cat.is-active .cat { opacity: 1; }
.pose--github-cat.is-active .cat__walk { animation: cat-in 1.9s cubic-bezier(.3, .1, .4, 1) .35s both; }
.pose--github-cat.is-active .cat__hop { animation: cat-waddle .38s ease-in-out .35s 5 both, cat-jump .55s cubic-bezier(.3, 1.6, .5, 1) 2.3s, cat-idle 3.6s ease-in-out 3s infinite; }
.pose--github-cat.is-active .cat__wow { animation: cat-bang 1.8s cubic-bezier(.3, 1.6, .5, 1) 2.35s both; }
@keyframes cat-in { from { translate: 230% 0; } to { translate: 0 0; } }
@keyframes cat-waddle { 0%, 100% { translate: 0 0; rotate: 0deg; } 25% { translate: 0 -5%; rotate: -4deg; } 50% { translate: 0 0; rotate: 0deg; } 75% { translate: 0 -5%; rotate: 4deg; } }
@keyframes cat-jump { 0% { translate: 0 0; scale: 1 1; } 25% { scale: 1.08 .9; } 55% { translate: 0 -16%; scale: .95 1.06; } 100% { translate: 0 0; scale: 1 1; } }
@keyframes cat-idle { 0%, 100% { scale: 1 1; rotate: 0deg; } 50% { scale: 1.01 1.02; rotate: 1.5deg; } }
@keyframes cat-bang { 0% { opacity: 0; scale: 0; } 20% { opacity: 1; scale: 1.3; } 35% { scale: 1; } 80% { opacity: 1; } 100% { opacity: 0; scale: 1; translate: 0 -30%; } }

/* Forex: scene sways a touch, the free-standing candles rise/fall, price ticks float up (script.js) */
.fc { animation: c-float 3.4s ease-in-out infinite; }
.fc2 { animation-delay: -1.3s; animation-duration: 3s; }
.fc3 { animation-delay: -2.2s; animation-duration: 3.8s; }
@keyframes c-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -3.5%; } }
.pose--forex .simg__anim { animation: m-breathe 3.6s ease-in-out infinite, f-sway 4.4s ease-in-out infinite; }
@keyframes f-sway { 0%, 100% { rotate: -.8deg; } 50% { rotate: .8deg; } }

/* NIOPDC: 5s frame sequence */
.slam { position: absolute; inset: 0; transform-origin: 50% 100%; }
.nf--raise, .nf--slam { opacity: 0; }
.nio__bang { position: absolute; left: 31%; top: 40%; width: 34%; translate: -50% -50%; opacity: 0; scale: 0; }
.pose--niopdc.is-active .nf--type  { animation: n-type 5s linear .4s infinite; }
.pose--niopdc.is-active .nf--raise { animation: n-raise 5s linear .4s infinite; }
.pose--niopdc.is-active .nf--slam  { animation: n-slamf 5s linear .4s infinite; }
.pose--niopdc.is-active .slam      { animation: n-shake 5s linear .4s infinite; }
.pose--niopdc.is-active .nio__bang { animation: n-bang 5s ease-out .4s infinite; }
@keyframes n-type  { 0%, 61.9% { opacity: 1; } 62%, 79.9% { opacity: 0; } 80%, 100% { opacity: 1; } }
@keyframes n-raise { 0%, 61.9% { opacity: 0; } 62%, 69.9% { opacity: 1; } 70%, 100% { opacity: 0; } }
@keyframes n-slamf { 0%, 69.9% { opacity: 0; } 70%, 79.9% { opacity: 1; } 80%, 100% { opacity: 0; } }
@keyframes n-shake {
  0%, 59% { translate: 0 0; scale: 1 1; }
  62%   { translate: 0 -.6%; scale: .99 1.02; }      /* anticipation as the fist goes up */
  69.9% { translate: 0 -1%; scale: .99 1.025; }
  70%   { translate: -1.8% 1%; scale: 1.025 .96; }   /* impact */
  71.5% { translate: 1.6% 0; scale: .99 1.01; }
  73%   { translate: -1.1% .3%; scale: 1 1; }
  74.5% { translate: .8% 0; }
  76%   { translate: -.4% 0; }
  78%, 100% { translate: 0 0; scale: 1 1; }
}
@keyframes n-bang { 0%, 69.5% { opacity: 0; scale: .2; } 70.5% { opacity: 1; scale: 1.15; } 76% { opacity: .9; scale: 1.3; } 80%, 100% { opacity: 0; scale: 1.4; } }

/* SabteKhodro24: suspension bounce + soft headlight glow pulse */
.pose--sabtekhodro .simg__anim { animation: car-bob 2.8s ease-in-out infinite; }
@keyframes car-bob { 0%, 100% { translate: 0 0; scale: 1 1; } 50% { translate: 0 .8%; scale: 1.004 .992; } }
.lamp {
  position: absolute; width: 15%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 252, 225, .95), rgba(255, 236, 160, .45) 50%, rgba(255, 230, 150, 0));
  mix-blend-mode: screen; opacity: .15; animation: car-lamp 3.2s ease-in-out infinite;
}
.lamp--l { left: 8.6%; top: 72.8%; }
.lamp--r { left: 62%; top: 74%; width: 18%; }
@keyframes car-lamp { 0%, 100% { opacity: .15; scale: .9; } 50% { opacity: .9; scale: 1.08; } }

/* YarFood: star cutouts pop from the screen */
.fx--yarfood { animation: m-star 2.6s cubic-bezier(.2, .7, .3, 1) forwards; }
.fx--yarfood img { width: 26px; height: auto; display: block; }
@keyframes m-star {
  0%   { opacity: 0; transform: translate(0, 0) scale(0) rotate(0deg); }
  12%  { opacity: 1; transform: translate(calc(var(--dx) * .2), -18px) scale(calc(var(--s) * 1.35)) rotate(calc(var(--rot) * .3)); }
  22%  { transform: translate(calc(var(--dx) * .3), -26px) scale(var(--s)) rotate(calc(var(--rot) * .4)); }
  75%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), -120px) scale(calc(var(--s) * .8)) rotate(var(--rot)); }
}
.fx--forex { font-size: 13px; }
@media (max-width: 700px) {
  .fx--yarfood img { width: 15px; }
  .cat__wow { font-size: 1.05em; }
  .simg--forex  { height: 100%; }
  .simg--niopdc { height: 100%; }
  .simg--car    { height: 80%; right: auto; left: 50%; translate: -50% 0; }
  .mascot[data-pose="sabtekhodro"] .mascot__shadow { width: 120%; translate: -50% 0; }
}

/* floating particles */
.mascot__fx { position: absolute; inset: 0; overflow: visible; }
.fx {
  position: absolute;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-weight: 700; font-size: 15px; line-height: 1;
  white-space: nowrap;
  opacity: 0;
  animation: m-rise 2.8s cubic-bezier(.2, .7, .3, 1) forwards;
}
.fx svg { width: 22px; height: 22px; display: block; }
.fx--reading { font-family: var(--font-display); font-size: 13px; animation-duration: 3.6s; }
.fx--coding { animation-duration: 3.2s; }
@keyframes m-rise {
  0%   { opacity: 0; transform: translate(0, 0) scale(.5) rotate(0deg); }
  15%  { opacity: 1; }
  70%  { opacity: .9; }
  100% { opacity: 0; transform: translate(var(--dx), -110px) scale(var(--s)) rotate(var(--rot)); }
}
@media (max-width: 700px) {
  .fx { font-size: 11px; }
  .fx svg { width: 13px; height: 13px; }
  @keyframes m-rise {
    0%   { opacity: 0; transform: translate(0, 0) scale(.5); }
    15%  { opacity: 1; }
    100% { opacity: 0; transform: translate(calc(var(--dx) * .5), -60px) scale(var(--s)) rotate(var(--rot)); }
  }
}