/* ===================================================================
   ARIF MAULANA — PORTFOLIO
   Prism background · Gooey Nav · Electric Border · ASCII Hero ·
   Splash Cursor · Lanyard · Circular Gallery · Folder · Model Viewer
   =================================================================== */

:root {
  /* === ELEGANT GALAXY · refined deep-space palette === */
  --bg: #03061a;
  --bg-2: #070b24;
  --bg-3: #0a1133;
  --surface: rgba(16, 24, 56, 0.62);
  --surface-2: rgba(24, 36, 78, 0.78);
  --surface-3: rgba(32, 46, 96, 0.55);
  --border: rgba(200, 220, 255, 0.10);
  --border-strong: rgba(200, 220, 255, 0.20);
  --border-elegant: rgba(233, 216, 166, 0.22);

  --text: #eef1f8;
  --text-mute: #9badcc;
  --text-dim: #6478a0;

  /* Starlight silver (used as "gold" var name for compat) */
  --gold: #c8d6f0;
  --gold-2: #e2eaf8;
  --gold-soft: rgba(200, 214, 240, 0.14);

  /* Champagne gold — elegant accent for premium touches */
  --champagne: #e9d8a6;
  --champagne-2: #f4e7c0;
  --champagne-soft: rgba(233, 216, 166, 0.18);

  /* Galaxy blue */
  --cyan: #5a96ff;
  --cyan-2: #84b4ff;
  --cyan-soft: rgba(90, 150, 255, 0.14);
  --magenta: #4a7bff;
  --pink: #ffb0d0;
  --teal: #88d4f0;
  --nebula: #8e6dd6;

  --glow-gold: 0 0 40px rgba(200, 214, 240, 0.35);
  --glow-cyan: 0 0 40px rgba(90, 150, 255, 0.4);
  --glow-champagne: 0 0 30px rgba(233, 216, 166, 0.35);

  /* Elegant shadow stack — soft, layered, premium */
  --shadow-elegant: 0 1px 2px rgba(0,0,0,0.4), 0 8px 24px rgba(0,0,0,0.35), 0 24px 60px rgba(90, 150, 255, 0.10);
  --shadow-luxe: 0 2px 4px rgba(0,0,0,0.45), 0 16px 40px rgba(0,0,0,0.4), 0 32px 80px rgba(233, 216, 166, 0.08);

  --f-sans: "Inter", system-ui, -apple-system, sans-serif;
  --f-display: "Space Grotesk", "Inter", sans-serif;
  --f-serif: "Instrument Serif", Georgia, serif;
  --f-mono: "JetBrains Mono", monospace;

  --max: 1240px;
  --pad-x: clamp(20px, 5vw, 60px);

  --ease: cubic-bezier(0.65, 0.05, 0.35, 1);
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  font-family: var(--f-sans);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  font-size: 16px;
  overflow-x: hidden;
  position: relative;
  /* Native cursor stays visible by default. The custom cursor only hides it
     AFTER script.js confirms it is active (adds body.cursor-ready). If the JS
     ever fails to run, the cursor will not disappear. */
  cursor: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
}
body.cursor-ready,
body.cursor-ready button,
body.cursor-ready a { cursor: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font: inherit; background: none; border: none; color: inherit; cursor: pointer; }
.defs-only { position: absolute; width: 0; height: 0; pointer-events: none; }

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

/* ============ LOADER ============ */
.loader {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  transition: opacity .8s var(--ease), visibility .8s var(--ease);
  /* FAILSAFE: auto-dismiss the splash even if JavaScript never runs, errors
     out, or the window 'load' event never fires (e.g. a CDN/audio resource
     stalls). Without this the page can stay stuck on the loader forever. */
  animation: loaderFailsafe 0.8s ease 2.8s forwards;
}
@keyframes loaderFailsafe {
  to { opacity: 0; visibility: hidden; pointer-events: none; }
}
.loader.gone { opacity: 0; visibility: hidden; pointer-events: none; animation: none; }
.loader-inner { text-align: center; }
.loader-crest {
  width: 110px; height: 110px;
  margin: 0 auto 18px;
  display: block;
  filter: drop-shadow(0 8px 24px rgba(90, 150, 255, 0.5));
}
.loader-ring {
  transform-origin: 50px 50px;
  animation: loaderRotate 12s linear infinite;
}
@keyframes loaderRotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.loader-name {
  display: flex; flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-bottom: 18px;
}
.loader-first {
  font-family: var(--f-serif);
  font-size: clamp(28px, 4vw, 40px);
  font-style: italic;
  font-weight: 400;
  background: linear-gradient(120deg, #d8e2f5 30%, #5a96ff 50%, #d8e2f5 70%);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shine 2.2s linear infinite;
}
.loader-last {
  font-family: var(--f-display);
  font-size: clamp(11px, 1.2vw, 13px);
  font-weight: 500;
  letter-spacing: 0.5em;
  color: var(--text-mute);
}
@keyframes shine { 0% { background-position: 200% 0; } 100% { background-position: -100% 0; } }
.loader-bar {
  width: 220px; height: 1px; margin: 22px auto 12px;
  background: rgba(255,255,255,0.08);
  overflow: hidden;
}
.loader-bar span {
  display: block; height: 100%;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  width: 40%;
  animation: bar 1.4s var(--ease) infinite;
}
@keyframes bar { 0% { transform: translateX(-100%); } 100% { transform: translateX(350%); } }
.loader-mute {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* ============ ELEGANT CURSOR ============ */
.cursor, .cursor-dot {
  position: fixed; top: 0; left: 0;
  pointer-events: none;
  z-index: 9999;
  will-change: transform;
}
.cursor {
  width: 28px; height: 28px;
  border: 1px solid rgba(184, 201, 232, 0.7);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  mix-blend-mode: difference;
  transition: width .35s cubic-bezier(0.34, 1.4, 0.6, 1),
              height .35s cubic-bezier(0.34, 1.4, 0.6, 1),
              border-color .35s var(--ease),
              opacity .3s;
  box-shadow: inset 0 0 6px rgba(184, 201, 232, 0.25);
}
.cursor::before {
  /* Inner gold ring (aperture base) */
  content: '';
  position: absolute;
  inset: 4px;
  border: 1px solid transparent;
  border-radius: 50%;
  transition: border 0.4s var(--ease), inset 0.4s var(--ease);
}
.cursor::after {
  /* Rotating dashed segments — appears on hover */
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 1px dashed rgba(90, 150, 255, 0);
  transition: border-color 0.4s var(--ease);
  animation: cursorSpin 6s linear infinite;
}
@keyframes cursorSpin { to { transform: rotate(360deg); } }

.cursor-dot {
  width: 4px; height: 4px;
  background: var(--gold);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 8px rgba(184, 201, 232, 0.8);
  transition: width .25s var(--ease), height .25s var(--ease), opacity .25s;
}

.cursor.hover {
  width: 52px; height: 52px;
  border-color: rgba(184, 201, 232, 0.95);
  mix-blend-mode: normal;
  background: rgba(90, 150, 255, 0.08);
  backdrop-filter: blur(2px);
}
.cursor.hover::before {
  inset: 6px;
  border-color: rgba(90, 150, 255, 0.5);
}
.cursor.hover::after {
  border-color: rgba(90, 150, 255, 0.45);
  inset: -4px;
}
.cursor.hover ~ .cursor-dot,
.cursor.hover + .cursor-dot { opacity: 0; }

.cursor.click {
  width: 22px; height: 22px;
  border-color: var(--cyan);
  background: rgba(90, 150, 255, 0.25);
}
.cursor.click::after { border-color: rgba(184, 201, 232, 0.7); }

@media (max-width: 900px), (hover: none) {
  .cursor, .cursor-dot { display: none; }
  body, button, a { cursor: auto; }
}

/* ============ GALAXY BLUE BACKGROUND ============ */
.prism-bg {
  position: fixed; inset: 0; z-index: -1;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 30% 0%, rgba(20, 38, 90, 0.5), transparent 55%),
    radial-gradient(ellipse at 70% 100%, rgba(8, 14, 38, 0.75), transparent 65%),
    linear-gradient(180deg, #060c22 0%, #04081a 100%);
}

/* WebGL Prism canvas container (ReactBits port) */
.prism-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.95;
  mix-blend-mode: screen;
}
.prism-canvas canvas { display: block; }
.bg-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(110px);
  opacity: 0.65;
  mix-blend-mode: screen;
  will-change: transform;
}
.orb-1 {
  /* Galaxy blue nebula */
  width: 700px; height: 700px;
  top: -180px; left: -140px;
  background: radial-gradient(circle, rgba(74, 123, 255, 0.6) 0%, rgba(90, 150, 255, 0.28) 45%, transparent 70%);
  animation: orbDrift1 28s ease-in-out infinite;
}
.orb-2 {
  /* Nebula pink — warm contrast */
  width: 560px; height: 560px;
  bottom: -160px; right: -120px;
  background: radial-gradient(circle, rgba(255, 176, 208, 0.32) 0%, rgba(132, 180, 255, 0.18) 50%, transparent 75%);
  animation: orbDrift2 36s ease-in-out infinite;
}
.orb-3 {
  /* Cyan starlight */
  width: 520px; height: 520px;
  top: 45%; left: 55%;
  background: radial-gradient(circle, rgba(136, 212, 240, 0.32) 0%, rgba(90, 150, 255, 0.14) 50%, transparent 75%);
  animation: orbDrift3 42s ease-in-out infinite;
}
@keyframes orbDrift1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(120px, 80px) scale(1.08); }
  66%      { transform: translate(60px, 160px) scale(0.95); }
}
@keyframes orbDrift2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-140px, -100px) scale(1.12); }
}
@keyframes orbDrift3 {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.5; }
  50%      { transform: translate(-40%, -60%) scale(1.15); opacity: 0.8; }
}

/* Vertical light rays — moonlight through velvet */
.bg-rays {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0.4;
  mix-blend-mode: screen;
}
.ray {
  position: absolute;
  top: -10%;
  width: 280px; height: 120%;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(90, 150, 255, 0.1) 20%,
    rgba(184, 201, 232, 0.18) 50%,
    rgba(90, 150, 255, 0.1) 80%,
    transparent 100%);
  filter: blur(40px);
  transform-origin: top center;
  animation: rayShimmer 14s ease-in-out infinite;
}
.r1 { left: 12%;  transform: rotate(8deg);  animation-delay: 0s;   }
.r2 { left: 48%;  transform: rotate(-6deg); animation-delay: -5s;  width: 360px; }
.r3 { left: 82%;  transform: rotate(10deg); animation-delay: -9s;  width: 240px; }
@keyframes rayShimmer {
  0%, 100% { opacity: 0.5; transform: translateY(0) rotate(var(--rot, 8deg)); }
  50%      { opacity: 1;   transform: translateY(-20px) rotate(var(--rot, 8deg)); }
}

/* ============ SILK WAVES — elegant flowing background ============ */
.bg-silk {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  opacity: 0.55;
  mix-blend-mode: screen;
  filter: blur(0.5px);
}
.silk-line {
  stroke-dasharray: 1600 1600;
  stroke-dashoffset: 0;
  filter: drop-shadow(0 0 6px rgba(184, 201, 232, 0.35));
  will-change: stroke-dashoffset, transform;
}
.silk-1 { animation: silkFlow1 18s linear infinite; }
.silk-2 { animation: silkFlow2 22s linear infinite; }
.silk-3 { animation: silkFlow3 26s linear infinite; }
.silk-4 { animation: silkFlow4 30s linear infinite; }
@keyframes silkFlow1 {
  0%   { transform: translateX(-8%) translateY(0); stroke-dashoffset: 0; }
  50%  { transform: translateX(0%)  translateY(-10px); }
  100% { transform: translateX(-8%) translateY(0); stroke-dashoffset: -3200; }
}
@keyframes silkFlow2 {
  0%   { transform: translateX(0)    translateY(0); stroke-dashoffset: 0; }
  50%  { transform: translateX(-6%)  translateY(8px); }
  100% { transform: translateX(0)    translateY(0); stroke-dashoffset: 3200; }
}
@keyframes silkFlow3 {
  0%   { transform: translateX(-4%) translateY(0); stroke-dashoffset: 0; }
  50%  { transform: translateX(2%)  translateY(-12px); }
  100% { transform: translateX(-4%) translateY(0); stroke-dashoffset: -3200; }
}
@keyframes silkFlow4 {
  0%   { transform: translateX(0)   translateY(0); stroke-dashoffset: 0; }
  50%  { transform: translateX(-3%) translateY(6px); }
  100% { transform: translateX(0)   translateY(0); stroke-dashoffset: 3200; }
}

/* ============ STAR FIELD (fancy sparkles) ============ */
.bg-stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.9;
  mix-blend-mode: screen;
}
.star {
  position: absolute;
  width: 2px; height: 2px;
  background: radial-gradient(circle, rgba(240, 236, 248, 0.95) 0%, rgba(240, 236, 248, 0.4) 50%, transparent 100%);
  border-radius: 50%;
  animation: starTwinkle 4s ease-in-out infinite;
  box-shadow: 0 0 4px rgba(240, 236, 248, 0.6);
}
.star.s-lg { width: 3px; height: 3px; box-shadow: 0 0 8px rgba(184, 201, 232, 0.8); }
.star.s-gold { background: radial-gradient(circle, rgba(184, 201, 232, 1) 0%, transparent 100%); }
.star.s-amethyst { background: radial-gradient(circle, rgba(90, 150, 255, 1) 0%, transparent 100%); }
@keyframes starTwinkle {
  0%, 100% { opacity: 0.2; transform: scale(0.7); }
  50%      { opacity: 1;   transform: scale(1.2); }
}

.prism-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 100px 100px;
  mask-image: radial-gradient(ellipse at center, black 10%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 10%, transparent 80%);
  opacity: 0.7;
}
.prism-vignette {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent 30%, rgba(4, 8, 26, 0.65) 100%);
  pointer-events: none;
}
.prism-noise {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 15% 25%, rgba(255,255,255,0.018) 1px, transparent 1px),
    radial-gradient(circle at 75% 60%, rgba(255,255,255,0.014) 1px, transparent 1px),
    radial-gradient(circle at 35% 80%, rgba(255,255,255,0.018) 1px, transparent 1px);
  background-size: 220px 220px, 280px 280px, 200px 200px;
  opacity: 0.55;
  pointer-events: none;
}

/* ============ GOOEY NAV ============ */
.gooey-nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px var(--pad-x);
  transition: padding .35s var(--ease), background .35s var(--ease), backdrop-filter .35s var(--ease);
}
.gooey-nav.scrolled {
  padding: 12px var(--pad-x);
  background: rgba(26, 34, 64, 0.45);
  backdrop-filter: blur(20px) saturate(1.1);
  -webkit-backdrop-filter: blur(20px) saturate(1.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.nav-logo {
  display: flex; align-items: center; gap: 12px;
  text-decoration: none;
  z-index: 2;
  transition: transform .35s var(--ease);
}
.nav-logo:hover { transform: scale(1.02); }
.logo-crest {
  width: 42px; height: 42px;
  flex-shrink: 0;
  filter: drop-shadow(0 4px 12px rgba(90, 150, 255, 0.4));
  transition: transform .5s cubic-bezier(0.34, 1.4, 0.6, 1), filter .35s var(--ease);
}
.nav-logo:hover .logo-crest {
  transform: rotate(-8deg);
  filter: drop-shadow(0 6px 18px rgba(90, 150, 255, 0.7));
}

/* ============ CURVED LOOP — marquee text along curved path (ReactBits port) ============ */
.curved-loop-section {
  position: relative;
  width: 100%;
  margin: 40px 0;
  padding: 30px 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}
.curved-loop-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 0%, rgba(90, 150, 255, 0.03) 50%, transparent 100%);
}
.curved-loop-svg {
  width: 100%;
  height: 180px;
  display: block;
  filter: drop-shadow(0 4px 18px rgba(90, 150, 255, 0.25));
}
.curved-loop-text {
  letter-spacing: 0.02em;
  text-shadow: 0 0 12px rgba(184, 201, 232, 0.4);
}
@media (max-width: 768px) {
  .curved-loop-section { margin: 28px 0; }
  .curved-loop-svg { height: 150px; }
  .curved-loop-text { font-size: 88px !important; }
}
@media (max-width: 480px) {
  .curved-loop-svg { height: 132px; }
  .curved-loop-text { font-size: 98px !important; }
}

/* ============ CIRCULAR TEXT LOGO (ReactBits CircularText port) ============ */
.circular-text {
  position: relative;
  width: 64px; height: 64px;
  flex-shrink: 0;
  overflow: visible;
  filter: drop-shadow(0 4px 14px rgba(90, 150, 255, 0.4));
  transition: filter .35s var(--ease), transform .5s cubic-bezier(0.34, 1.4, 0.6, 1);
}
.ct-svg { overflow: visible; }
.nav-logo:hover .circular-text {
  filter: drop-shadow(0 6px 20px rgba(90, 150, 255, 0.75));
  transform: scale(1.05);
}
.ct-svg {
  width: 100%; height: 100%;
  display: block;
}
/* Rotating text group — animation runs through 360° on the same SVG.
   IMPORTANT: keep transform-origin in SVG user-space (no transform-box),
   so the spin pivots around the SVG center (50,50). */
.ct-spin {
  transform-origin: 50px 50px;
  animation: ctSpin 22s linear infinite;
}
.nav-logo:hover .ct-spin { animation-duration: 9s; }
@keyframes ctSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.ct-text {
  filter: drop-shadow(0 0 3px rgba(184, 201, 232, 0.5));
}
@media (max-width: 600px) {
  .circular-text { width: 48px; height: 48px; }
}
.logo-wordmark {
  display: flex; flex-direction: column;
  line-height: 1;
}
.logo-first {
  font-family: var(--f-serif);
  font-size: 17px;
  font-style: italic;
  font-weight: 400;
  background: linear-gradient(135deg, #d8e2f5 0%, #5a96ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: -0.01em;
}
.logo-last {
  font-family: var(--f-display);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-top: 3px;
}
@media (max-width: 600px) {
  .logo-wordmark { display: none; }
}
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }

.gooey-wrap {
  position: relative;
}
.gooey-list {
  position: relative;
  display: flex; align-items: center;
  padding: 6px;
  background: rgba(20, 25, 40, 0.6);
  border-radius: 999px;
  border: 1px solid var(--border);
  backdrop-filter: blur(10px);
}
.gooey-item {
  position: relative;
  z-index: 2;
  cursor: pointer;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-mute);
  border-radius: 999px;
  transition: color .35s var(--ease);
  user-select: none;
}
.gooey-item:hover { color: var(--text); }
.gooey-item.active { color: #06080d; font-weight: 600; }
.gooey-item span { position: relative; z-index: 3; }
.gooey-blob {
  position: absolute;
  top: 6px; left: 6px;
  height: calc(100% - 12px);
  background: linear-gradient(120deg, var(--gold), var(--gold-2));
  border-radius: 999px;
  z-index: 1;
  transition: transform .55s cubic-bezier(0.5, 1.6, 0.4, 1), width .55s var(--ease);
  box-shadow: 0 4px 16px rgba(184, 201, 232, 0.4);
}

.nav-toggle { display: none; }

@media (max-width: 1024px) {
  .gooey-wrap { display: none; }
  .nav-toggle {
    display: flex; flex-direction: column; gap: 5px;
    padding: 10px; cursor: pointer;
  }
  .nav-toggle span {
    width: 22px; height: 1.5px;
    background: var(--text);
    transition: transform .3s, opacity .3s;
  }
  .nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle.open span:nth-child(2) { opacity: 0; }
  .nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .gooey-nav.mobile-open .gooey-wrap {
    display: block;
    position: absolute;
    top: 100%; left: 20px; right: 20px;
    padding: 24px;
    background: rgba(5, 7, 13, 0.95);
    backdrop-filter: blur(20px);
    border: 1px solid var(--border);
    border-radius: 18px;
    margin-top: 8px;
  }
  .gooey-nav.mobile-open .gooey-list {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    background: transparent;
    border: none;
    padding: 0;
  }
  .gooey-nav.mobile-open .gooey-blob { display: none; }
  .gooey-nav.mobile-open .gooey-item {
    text-align: center;
    padding: 12px;
  }
  .gooey-nav.mobile-open .gooey-item.active {
    color: var(--gold);
    background: var(--gold-soft);
  }
}

/* ============ MUSIC PLAYER ============ */
.music-player {
  position: fixed;
  bottom: 24px; right: 24px;
  z-index: 90;
  display: flex; align-items: center;
  gap: 14px;
  padding: 10px 16px 10px 10px;
  background: rgba(8, 11, 20, 0.78);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border);
  border-radius: 999px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.4);
  transform: translateY(0);
  transition: transform .4s var(--ease), opacity .4s var(--ease);
}
.music-toggle {
  position: relative;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: linear-gradient(120deg, var(--gold), var(--gold-2));
  color: #06080d;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: box-shadow .3s var(--ease);
}
.music-toggle:hover { box-shadow: 0 0 30px rgba(184, 201, 232, 0.6); }
.music-icon { display: none; }
.music-player .icon-play { display: flex; }
.music-player.playing .icon-play { display: none; }
.music-player.playing .icon-pause { display: flex; }
.music-bars {
  display: none;
  align-items: flex-end;
  gap: 2px;
  height: 16px;
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}
.music-player.playing .music-bars { display: flex; }
.music-player.playing .icon-pause { display: none; }
.music-player.playing:hover .icon-pause { display: flex; }
.music-player.playing:hover .music-bars { display: none; }
.music-bars span {
  width: 2.5px;
  background: #06080d;
  border-radius: 1px;
  animation: bars 1s ease-in-out infinite;
}
.music-bars span:nth-child(1) { height: 30%; animation-delay: 0.0s; }
.music-bars span:nth-child(2) { height: 70%; animation-delay: 0.15s; }
.music-bars span:nth-child(3) { height: 50%; animation-delay: 0.3s; }
.music-bars span:nth-child(4) { height: 90%; animation-delay: 0.45s; }
@keyframes bars {
  0%, 100% { transform: scaleY(0.4); }
  50%      { transform: scaleY(1); }
}
.music-info {
  display: flex; flex-direction: column;
  min-width: 110px;
}
.music-title {
  font-family: var(--f-display);
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  letter-spacing: 0.02em;
}
.music-sub {
  font-family: var(--f-mono);
  font-size: 9px;
  color: var(--text-dim);
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

/* ============ ELASTIC SLIDER ============ */
.elastic-slider {
  display: flex; align-items: center; gap: 8px;
  padding: 0 4px;
}
.elastic-ico {
  color: var(--text-mute);
  transition: color .3s, transform .3s var(--ease-back);
  display: flex;
}
.elastic-slider:hover .el-min,
.elastic-slider:hover .el-max {
  color: var(--text);
}
.elastic-slider.stretching .el-min { transform: translateX(-4px); }
.elastic-slider.stretching .el-max { transform: translateX(4px); }
.elastic-track {
  position: relative;
  width: 90px; height: 22px;
  display: flex; align-items: center;
  cursor: pointer;
  touch-action: none;
}
.elastic-track::before {
  content: '';
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  height: 3px;
  background: rgba(255,255,255,0.08);
  border-radius: 999px;
  transform: translateY(-50%);
  transition: height .35s var(--ease-back), transform .35s var(--ease-back);
}
.elastic-slider.stretching .elastic-track::before {
  height: 5px;
}
.elastic-fill {
  position: absolute;
  left: 0; top: 50%;
  height: 3px;
  width: 0;
  background: linear-gradient(90deg, var(--gold), var(--gold-2));
  border-radius: 999px;
  transform: translateY(-50%);
  transition: width .15s linear, height .35s var(--ease-back);
  box-shadow: 0 0 10px rgba(184, 201, 232, 0.5);
}
.elastic-slider.stretching .elastic-fill { height: 5px; }
.elastic-handle {
  position: absolute;
  top: 50%; left: 0;
  width: 14px; height: 14px;
  background: var(--gold);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(1);
  transition: transform .15s linear, box-shadow .25s;
  box-shadow: 0 0 0 4px rgba(184, 201, 232, 0.15);
  pointer-events: none;
}
.elastic-slider:hover .elastic-handle {
  box-shadow: 0 0 0 6px rgba(184, 201, 232, 0.2);
}
.elastic-slider.dragging .elastic-handle { transform: translate(-50%, -50%) scale(1.25); }

@media (max-width: 700px) {
  .music-player { bottom: 14px; right: 14px; padding: 8px 12px 8px 8px; gap: 8px; }
  .music-info { display: none; }
  .elastic-track { width: 70px; }
}

/* ============ SECTIONS ============ */
.section {
  position: relative;
  padding: clamp(80px, 11vw, 140px) var(--pad-x);
}
.container {
  max-width: var(--max);
  margin: 0 auto;
  position: relative;
}
.section-head {
  margin-bottom: clamp(40px, 6vw, 80px);
  max-width: 800px;
}
.section-num {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: 13px;
  color: var(--gold);
  margin-bottom: 18px;
  padding: 4px 12px;
  border: 1px solid var(--gold-soft);
  border-radius: 999px;
  background: var(--gold-soft);
  letter-spacing: 0.05em;
}
.section-title {
  font-family: var(--f-display);
  font-size: clamp(32px, 5.2vw, 60px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.section-title.huge {
  font-size: clamp(40px, 7vw, 88px);
}
.section-sub {
  margin-top: 22px;
  font-size: clamp(16px, 1.6vw, 18px);
  color: var(--text-mute);
  max-width: 620px;
  line-height: 1.6;
}
.text-gradient {
  background: linear-gradient(120deg, var(--gold) 0%, var(--gold-2) 50%, var(--cyan) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-style: italic;
  font-family: var(--f-serif);
  font-weight: 400;
}

/* ============ REVEAL ============ */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}

/* ============ HERO ============ */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  position: relative;
  padding: 120px var(--pad-x) 80px;
  overflow: clip;
}
.hero-inner {
  max-width: var(--max);
  margin: 0 auto;
  width: 100%;
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(30px, 4vw, 70px);
  align-items: center;
}
@media (max-width: 1024px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-right { order: -1; min-height: 460px; }
}
.hero-left { min-width: 0; }

.hero-meta {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  backdrop-filter: blur(10px);
  font-size: 13px;
  color: var(--text-mute);
  margin-bottom: 28px;
}
.status-dot {
  width: 8px; height: 8px;
  background: #4ade80;
  border-radius: 50%;
  box-shadow: 0 0 10px #4ade80;
  animation: pulse 2s ease-in-out infinite;
}

/* ============ ASCII TEXT ============ */
/* ============ FUZZY TEXT — Canvas-driven glitchy name (ReactBits port) ============ */
.fuzzy-stage {
  position: relative;
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  user-select: none;
  filter: drop-shadow(0 0 18px rgba(184, 201, 232, 0.25));
}
.fuzzy-canvas {
  display: block;
  max-width: 100%;
  height: auto !important;
}
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
/* Legacy ascii fallback (kept hidden in case browsers without JS still render) */
.ascii-stage, .ascii-text, .hero-title-fallback { display: none; }
@media (max-width: 768px) {
  .fuzzy-stage { gap: 2px; }
}

.hero-role {
  font-family: var(--f-display);
  font-size: clamp(15px, 1.7vw, 19px);
  font-weight: 400;
  margin-bottom: 24px;
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
}
.role-shiny {
  background: linear-gradient(120deg, var(--text) 30%, var(--gold-2) 50%, var(--text) 70%);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shine 4s linear infinite;
  font-weight: 500;
}
.role-divider { color: var(--gold); }
.role-mute { color: var(--text-mute); }

.hero-quote {
  font-family: var(--f-serif);
  font-size: clamp(18px, 2.1vw, 24px);
  color: var(--text);
  max-width: 640px;
  line-height: 1.5;
  margin-bottom: 36px;
  font-style: italic;
}
.hero-quote em { color: var(--gold-2); font-style: italic; }
.quote-mark {
  font-family: var(--f-serif);
  font-size: 1.3em;
  color: var(--gold);
  font-style: normal;
  vertical-align: -0.05em;
}

.hero-ctas {
  display: flex; flex-wrap: wrap; gap: 14px;
  margin-bottom: 52px;
}

/* Buttons */
.btn {
  position: relative;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 26px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  transition: transform .3s var(--ease);
  overflow: hidden;
  isolation: isolate;
  cursor: pointer;
  border: none;
}
.btn-primary {
  color: #06080d;
  background: var(--gold);
}
.btn-primary .btn-bg {
  position: absolute; inset: 0;
  background: linear-gradient(120deg, var(--gold), var(--gold-2), var(--gold));
  background-size: 200% 100%;
  z-index: -1;
  animation: shine 3s linear infinite;
}
.btn-primary:hover { box-shadow: 0 12px 40px rgba(184, 201, 232, 0.4); }
.btn-ghost {
  border: 1px solid var(--border-strong);
  background: var(--surface);
  backdrop-filter: blur(10px);
  color: var(--text);
}
.btn-ghost:hover { border-color: var(--gold); color: var(--gold); }

.hero-stats {
  display: flex; flex-wrap: wrap;
  gap: clamp(18px, 3vw, 40px);
  align-items: center;
}
.stat { display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap; }
.stat-num {
  font-family: var(--f-display);
  font-size: clamp(26px, 2.8vw, 38px);
  font-weight: 600;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.stat-plus {
  font-family: var(--f-display);
  font-size: clamp(20px, 2.2vw, 28px);
  color: var(--gold);
  font-weight: 500;
}
.stat-label {
  font-size: 12px;
  color: var(--text-mute);
  margin-left: 8px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.stat-divider { width: 1px; height: 26px; background: var(--border); }

.scroll-indicator {
  position: absolute;
  bottom: 30px; left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  color: var(--text-mute);
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.scroll-line {
  width: 1px; height: 50px;
  background: rgba(255,255,255,0.1);
  overflow: hidden;
  position: relative;
}
.scroll-line span {
  position: absolute; top: -50%;
  left: 0; width: 100%; height: 50%;
  background: linear-gradient(180deg, transparent, var(--gold));
  animation: scrollLine 2.2s var(--ease) infinite;
}
@keyframes scrollLine { to { top: 100%; } }

/* ============ LANYARD ============ */
.hero-right {
  position: relative;
  min-height: 620px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  overflow: visible;
}
.lanyard {
  position: relative;
  width: 100%;
  max-width: 340px;
  height: 760px;
  margin-top: -120px;       /* strap reaches all the way up past hero padding */
  perspective: 1200px;
  user-select: none;
  -webkit-user-select: none;
}
/* Pivot wraps strap+clip+card — all rotate as one rigid unit */
.lanyard-pivot {
  position: absolute;
  inset: 0;
  transform-origin: 50% 0;
  will-change: transform;
}
/* Tiny anchor ring at the very top of the strap — looks like a screw fixed to ceiling */
.lanyard-anchor {
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 22px; height: 22px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, #f4f6fa 0%, #b8c9e8 35%, #5a96ff 80%, #1a2540 100%);
  border: 1.5px solid rgba(216, 226, 245, 0.5);
  box-shadow:
    0 0 14px rgba(90, 150, 255, 0.55),
    inset 0 -2px 4px rgba(0, 0, 0, 0.45),
    inset 0 2px 3px rgba(255, 255, 255, 0.5);
  z-index: 4;
  pointer-events: none;
}
.lanyard-strap {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 372px;            /* extended so it visually anchors at the top */
  pointer-events: none;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.4));
}
.lanyard-clip {
  position: absolute;
  left: 50%;
  top: 364px;
  margin-left: -22px;
  width: 44px;
  height: 60px;
  pointer-events: none;
  z-index: 3;
}
.clip-ring {
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 30px; height: 38px;
  border: 4px solid;
  border-color: #c9c9d0 #8a8a92 #5a5a62 #8a8a92;
  border-radius: 50% 50% 40% 40%;
  background: linear-gradient(180deg, rgba(255,255,255,0.4), transparent 30%);
  box-shadow:
    inset 0 -4px 8px rgba(0,0,0,0.35),
    inset 0 3px 4px rgba(255,255,255,0.4),
    0 2px 6px rgba(0,0,0,0.4);
}
.clip-bar {
  position: absolute;
  top: 30px;
  left: 50%;
  transform: translateX(-50%);
  width: 38px; height: 14px;
  background: linear-gradient(180deg, #d4d4dc, #9a9aa2 50%, #6a6a72);
  border-radius: 4px;
  box-shadow: inset 0 1px 2px rgba(255,255,255,0.5), inset 0 -2px 4px rgba(0,0,0,0.4), 0 2px 6px rgba(0,0,0,0.5);
}

.id-card {
  position: absolute;
  left: 50%;
  top: 415px;
  width: 290px;
  height: 400px;
  margin-left: -145px;
  transform-style: preserve-3d;
  will-change: transform;
  filter: drop-shadow(0 30px 50px rgba(0,0,0,0.6));
}
.id-card-inner {
  position: relative;
  width: 100%; height: 100%;
  transform-style: preserve-3d;
}
.id-face {
  position: absolute; inset: 0;
  border-radius: 18px;
  overflow: hidden;
  backface-visibility: hidden;
}
.id-front {
  background:
    linear-gradient(135deg, rgba(90, 150, 255, 0.18), transparent 40%),
    linear-gradient(180deg, #0a1230 0%, #122050 100%);
  border: 1px solid rgba(184, 201, 232, 0.42);
  display: flex; flex-direction: column;
  padding: 18px 18px 16px;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.04),
    inset 0 30px 60px rgba(90, 150, 255, 0.1);
}
.id-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 14px;
}
.id-logo { display: flex; align-items: center; gap: 8px; }
.id-logo-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border: 1px solid var(--gold);
  border-radius: 6px;
  font-family: var(--f-display);
  font-size: 11px; font-weight: 600;
  color: var(--gold);
  background: var(--gold-soft);
}
.id-logo-text {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.25em;
  color: var(--text-mute);
}
.id-chip { display: flex; gap: 3px; }
.id-chip span {
  width: 4px; height: 4px;
  background: var(--gold);
  border-radius: 50%;
  box-shadow: 0 0 6px var(--gold);
  animation: pulse 2.4s ease-in-out infinite;
}
.id-chip span:nth-child(2) { animation-delay: 0.3s; }
.id-chip span:nth-child(3) { animation-delay: 0.6s; }

.id-photo-wrap {
  position: relative;
  width: 100%;
  height: 230px;
  margin-bottom: 14px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(184, 201, 232, 0.2);
}
.id-photo {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, #16204a, #060c22);
  overflow: hidden;
}
.id-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}
.id-photo-glow {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.55));
  pointer-events: none;
}
.id-photo-scan {
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--cyan), transparent);
  box-shadow: 0 0 12px var(--cyan);
  opacity: 0.65;
  top: 0;
  animation: scan 4s ease-in-out infinite;
  pointer-events: none;
  mix-blend-mode: screen;
}
@keyframes scan {
  0%, 100% { top: 0; opacity: 0.5; }
  45%      { top: 100%; opacity: 0.85; }
  50%      { top: 100%; opacity: 0; }
  55%      { top: 0; opacity: 0; }
  60%      { top: 0; opacity: 0.5; }
}
.id-corner {
  position: absolute;
  width: 10px; height: 10px;
  border: 1.5px solid var(--gold);
  pointer-events: none;
}
.id-corner.tl { top: 6px; left: 6px; border-right: none; border-bottom: none; }
.id-corner.tr { top: 6px; right: 6px; border-left: none; border-bottom: none; }
.id-corner.bl { bottom: 6px; left: 6px; border-right: none; border-top: none; }
.id-corner.br { bottom: 6px; right: 6px; border-left: none; border-top: none; }

.id-info { flex: 1; }
.id-name {
  font-family: var(--f-display);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
  margin-bottom: 3px;
}
.id-role {
  font-family: var(--f-mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
}
.id-meta { display: grid; gap: 4px; }
.id-meta-row {
  display: grid;
  grid-template-columns: 32px 1fr;
  align-items: baseline;
  gap: 8px;
  font-family: var(--f-mono);
  font-size: 10px;
}
.id-label { color: var(--text-dim); letter-spacing: 0.15em; }
.id-value { color: var(--text-mute); letter-spacing: 0.05em; }

.id-footer {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 12px;
  border-top: 1px dashed rgba(255,255,255,0.07);
  margin-top: 10px;
}
.id-barcode { display: flex; gap: 1.5px; align-items: flex-end; height: 18px; }
.id-barcode span { width: 1.5px; background: var(--text-mute); display: block; }
.id-barcode span:nth-child(odd) { height: 100%; background: var(--text); }
.id-barcode span:nth-child(3n) { height: 70%; }
.id-barcode span:nth-child(4n) { width: 2px; }
.id-barcode span:nth-child(5n) { height: 85%; }
.id-status {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--f-mono);
  font-size: 9px;
  color: var(--gold);
  letter-spacing: 0.15em;
}
.id-status .status-dot {
  width: 5px; height: 5px;
  background: var(--gold);
  box-shadow: 0 0 8px var(--gold);
}

.id-shine {
  position: absolute; inset: 0;
  background: linear-gradient(
    var(--shine-angle, 110deg),
    transparent 30%,
    rgba(255, 255, 255, 0.06) 45%,
    rgba(255, 255, 255, 0.16) 50%,
    rgba(255, 255, 255, 0.06) 55%,
    transparent 70%
  );
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.95;
}
.id-hologram {
  position: absolute;
  bottom: 14px; right: 14px;
  width: 30px; height: 30px;
  border-radius: 50%;
  background:
    conic-gradient(from 0deg, rgba(90, 150, 255, 0.7), rgba(74, 123, 255, 0.7), rgba(255, 107, 157, 0.7), rgba(184, 201, 232, 0.7), rgba(90, 150, 255, 0.7));
  filter: blur(0.5px);
  opacity: 0.55;
  animation: holoSpin 4s linear infinite;
  pointer-events: none;
  mix-blend-mode: screen;
}
@keyframes holoSpin { to { transform: rotate(360deg); } }

.lanyard-hint {
  position: absolute;
  bottom: 0; left: 50%;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 6px;
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  animation: hintPulse 2.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes hintPulse {
  0%,100% { opacity: 0.4; transform: translate(-50%, 0); }
  50%     { opacity: 0.9; transform: translate(-50%, -3px); }
}

@media (max-width: 1024px) {
  .hero-right { min-height: 800px; }
  .lanyard { max-width: 320px; height: 800px; margin-top: -90px; }
  .lanyard-strap { height: 332px; }
  .lanyard-clip { top: 324px; }
  .id-card { width: 270px; height: 380px; margin-left: -135px; top: 375px; }
  .id-photo-wrap { height: 200px; }
}
@media (max-width: 600px) {
  .hero-right { min-height: 620px; }
  .lanyard { max-width: 280px; height: 620px; margin-top: -70px; }
  .lanyard-strap { height: 280px; }
  .lanyard-clip { top: 272px; }
  .id-card { width: 240px; height: 320px; margin-left: -120px; top: 322px; }
  .id-photo-wrap { height: 170px; }
}

/* ============ ELECTRIC BORDER CARDS ============ */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: start;
}
@media (max-width: 880px) { .about-grid { grid-template-columns: 1fr; } }

.about-text p {
  font-size: clamp(16px, 1.5vw, 18px);
  color: var(--text-mute);
  margin-bottom: 22px;
  line-height: 1.75;
}
.about-text strong { color: var(--text); font-weight: 500; }

.about-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 540px) { .about-cards { grid-template-columns: 1fr; } }

.ec-card {
  position: relative;
  padding: 1px;
  border-radius: 18px;
  isolation: isolate;
}
.electric-border {
  position: absolute; inset: 0;
  border-radius: 18px;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity .35s var(--ease);
}
.ec-card:hover .electric-border,
.dp-card:hover .electric-border { opacity: 1; }
.electric-frame {
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background:
    conic-gradient(from var(--ec-angle, 0deg),
      transparent 0%,
      rgba(90, 150, 255, 0.0) 10%,
      var(--cyan) 25%,
      var(--magenta) 35%,
      rgba(255, 107, 157, 0.8) 45%,
      transparent 50%,
      transparent 70%,
      var(--gold) 85%,
      rgba(184, 201, 232, 0.0) 95%,
      transparent 100%);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: ecRotate 4s linear infinite;
}
@keyframes ecRotate { to { --ec-angle: 360deg; } }
@property --ec-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
.electric-spark {
  position: absolute; inset: -8px;
  border-radius: 24px;
  background:
    radial-gradient(circle 80px at 20% 20%, rgba(90, 150, 255, 0.35), transparent 60%),
    radial-gradient(circle 80px at 80% 80%, rgba(74, 123, 255, 0.3), transparent 60%);
  filter: blur(16px);
  z-index: -1;
  animation: ecPulse 4s linear infinite;
}
@keyframes ecPulse {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 0.9; }
}

.ec-inner {
  position: relative;
  z-index: 2;
  background: var(--surface);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border);
  border-radius: 17px;
  padding: 22px;
  height: 100%;
  transition: border-color .3s, transform .3s var(--ease);
}
.ec-card:hover .ec-inner {
  border-color: rgba(90, 150, 255, 0.3);
  transform: translateY(-2px);
}
.ec-icon {
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 10px;
  background: var(--gold-soft);
  color: var(--gold);
  margin-bottom: 16px;
}
.ec-icon svg { width: 22px; height: 22px; }
.ec-inner h3 {
  font-family: var(--f-display);
  font-size: 17px;
  font-weight: 500;
  margin-bottom: 8px;
}
.ec-inner p {
  font-size: 14px;
  color: var(--text-mute);
  line-height: 1.6;
}

/* ============ EXPERIENCE / TIMELINE ============ */
.timeline {
  position: relative;
  padding-left: 50px;
}
.timeline-line {
  position: absolute;
  left: 20px; top: 10px; bottom: 10px;
  width: 1px;
  background: var(--border);
}
.timeline-progress {
  display: block;
  width: 100%;
  background: linear-gradient(180deg, var(--gold), var(--cyan));
  height: 0;
  transition: height .3s linear;
  box-shadow: 0 0 12px var(--gold);
}
.tl-item {
  position: relative;
  padding-bottom: 60px;
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 30px;
  align-items: start;
}
.tl-item:last-child { padding-bottom: 0; }
@media (max-width: 760px) {
  .tl-item { grid-template-columns: 1fr; gap: 12px; }
}
.tl-dot {
  position: absolute;
  left: -38px; top: 12px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--gold);
  box-shadow: 0 0 0 4px var(--bg), 0 0 20px var(--gold);
  z-index: 2;
}
/* ── Satisfying dot animation as each experience point scrolls into view ── */
.tl-dot::before, .tl-dot::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 100%; height: 100%; border-radius: 50%;
  transform: translate(-50%, -50%) scale(1);
  border: 2px solid var(--gold);
  opacity: 0; pointer-events: none;
}
.tl-item.reveal.in .tl-dot {
  animation: tlDotPop 0.65s cubic-bezier(0.34, 1.7, 0.5, 1) both, tlDotGlow 3s ease-in-out 1.1s infinite;
}
.tl-item.reveal.in .tl-dot::before { animation: tlDotRipple 1s ease-out 0.12s; }
.tl-item.reveal.in .tl-dot::after  { animation: tlDotRipple 1s ease-out 0.38s; }
@keyframes tlDotPop {
  0%   { transform: scale(0.2);  box-shadow: 0 0 0 4px var(--bg), 0 0 0 rgba(233,216,166,0); }
  55%  { transform: scale(1.35); box-shadow: 0 0 0 4px var(--bg), 0 0 28px var(--gold); }
  100% { transform: scale(1);    box-shadow: 0 0 0 4px var(--bg), 0 0 20px var(--gold); }
}
@keyframes tlDotRipple {
  0%   { opacity: 0.65; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0;    transform: translate(-50%, -50%) scale(3.6); }
}
@keyframes tlDotGlow {
  0%, 100% { box-shadow: 0 0 0 4px var(--bg), 0 0 14px var(--gold); }
  50%      { box-shadow: 0 0 0 4px var(--bg), 0 0 28px var(--gold); }
}
@media (prefers-reduced-motion: reduce) {
  .tl-item.reveal.in .tl-dot,
  .tl-item.reveal.in .tl-dot::before,
  .tl-item.reveal.in .tl-dot::after { animation: none; }
}
.tl-date {
  display: flex; flex-direction: column; gap: 4px;
  font-family: var(--f-mono);
  font-size: 13px;
  color: var(--gold);
  padding-top: 10px;
}
.tl-location { color: var(--text-dim); font-size: 12px; }
.tl-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 26px 28px;
  backdrop-filter: blur(10px);
  transition: border-color .3s, transform .3s var(--ease);
}
.tl-card:hover {
  border-color: rgba(184, 201, 232, 0.3);
  transform: translateY(-3px);
}
.tl-role {
  font-family: var(--f-display);
  font-size: clamp(20px, 2vw, 24px);
  font-weight: 500;
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}
.tl-company {
  font-size: 14px;
  color: var(--text-mute);
  margin-bottom: 18px;
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap;
}
.badge {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 4px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.badge-gold {
  background: var(--gold-soft);
  color: var(--gold);
  border: 1px solid var(--gold-soft);
}
.tl-list li {
  position: relative;
  padding-left: 22px;
  font-size: 14.5px;
  color: var(--text-mute);
  line-height: 1.65;
  margin-bottom: 10px;
}
.tl-list li::before {
  content: '';
  position: absolute;
  left: 0; top: 11px;
  width: 12px; height: 1px;
  background: var(--gold);
}
.tl-list li:last-child { margin-bottom: 0; }

/* ============ SKILLS ============ */
.skills-grid { display: grid; gap: 50px; }
.skill-cat {
  font-family: var(--f-display);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-mute);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 22px;
  display: flex; align-items: center; gap: 10px;
}
.cat-dot {
  width: 6px; height: 6px;
  background: var(--gold);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--gold);
}
.chip-row { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  padding: 12px 20px;
  font-family: var(--f-sans);
  font-size: 14px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  backdrop-filter: blur(10px);
  transition: all .3s var(--ease);
  position: relative;
  overflow: hidden;
  cursor: default;
}
.chip::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent, var(--gold-soft), transparent);
  transform: translateX(-100%);
  transition: transform .6s var(--ease);
}
.chip:hover {
  border-color: var(--gold);
  color: var(--gold);
  transform: translateY(-2px);
}
.chip:hover::before { transform: translateX(100%); }

/* ============ FEATURED PROJECTS (home page) ============ */
.featured-projects {
  padding-top: clamp(80px, 11vw, 140px);
  padding-bottom: clamp(80px, 11vw, 140px);
}
.fp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 22px;
  margin-bottom: 50px;
}
.fp-large {
  grid-column: 1 / span 3;
  flex-direction: row;
}
.fp-large .fp-visual {
  flex: 0 0 36%;
  margin-bottom: 0;
  margin-right: 28px;
  aspect-ratio: 16 / 10;
  max-height: 280px;
}
/* Compact the inner content so it doesn't have huge gaps */
.fp-large .fp-content { padding: 4px 0; gap: 10px; }
.fp-large .fp-name { font-size: clamp(22px, 2.4vw, 28px); }
.fp-large .fp-desc { font-size: 14.5px; line-height: 1.6; max-width: 60ch; }
.fp-large .fp-bullets { gap: 6px; margin: 2px 0; }
.fp-large .fp-bullets li { font-size: 13px; line-height: 1.45; }
.fp-large .fp-metrics { padding: 10px 12px; gap: 8px; margin: 8px 0 4px; }
.fp-large .fp-metric-num { font-size: clamp(20px, 2.2vw, 26px); }
.fp-large .fp-live-strip { padding: 7px 12px; font-size: 10px; margin-top: 4px; }
.fp-large .fp-tech { margin-top: 6px; }
.fp-large .fp-arrow { margin-top: 6px; }
@media (max-width: 900px) {
  .fp-grid { grid-template-columns: 1fr 1fr; }
  .fp-large { grid-column: 1 / span 2; flex-direction: column; }
  .fp-large .fp-visual { flex: 1; margin-right: 0; margin-bottom: 22px; aspect-ratio: 16 / 9; }
}
@media (max-width: 640px) {
  .fp-grid { grid-template-columns: 1fr; }
  .fp-large { grid-column: 1; }
}

.fp-card {
  position: relative;
  display: flex; flex-direction: column;
  padding: 28px;
  background:
    linear-gradient(135deg, rgba(90, 150, 255, 0.08), transparent 55%),
    linear-gradient(180deg, rgba(14, 22, 50, 0.7), rgba(8, 14, 32, 0.85));
  border: 1px solid var(--border);
  border-radius: 22px;
  backdrop-filter: blur(14px);
  overflow: hidden;
  transition: transform 0.45s var(--ease), border-color 0.4s var(--ease), box-shadow 0.5s var(--ease);
  text-decoration: none;
  color: inherit;
}
.fp-card:hover {
  transform: translateY(-6px);
  border-color: rgba(90, 150, 255, 0.45);
  box-shadow: 0 24px 60px rgba(90, 150, 255, 0.18);
}
.fp-glow {
  position: absolute;
  inset: -30%;
  background: radial-gradient(circle at 50% 0%, rgba(90, 150, 255, 0.18), transparent 50%);
  pointer-events: none;
  opacity: 0.4;
  transition: opacity 0.5s var(--ease);
}
.fp-card:hover .fp-glow { opacity: 1; }

.fp-visual {
  width: 100%;
  aspect-ratio: 16 / 9;
  margin-bottom: 22px;
  background:
    linear-gradient(135deg, rgba(90, 150, 255, 0.12), rgba(184, 201, 232, 0.05));
  border: 1px solid var(--border);
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  position: relative;
  transition: transform 0.5s var(--ease);
}
.fp-card:hover .fp-visual { transform: scale(1.02); }
.fp-visual-sm {
  aspect-ratio: 16 / 9;
  margin-bottom: 18px;
}
.fp-visual::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(90, 150, 255, 0.18), transparent 60%);
  pointer-events: none;
}
.fp-icon {
  width: 70%; height: 70%;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 8px 16px rgba(90, 150, 255, 0.3));
}

.fp-content { display: flex; flex-direction: column; gap: 10px; flex: 1; justify-content: center; }
.fp-large .fp-content { justify-content: center; gap: 14px; padding: 6px 0; }
.fp-tag {
  align-self: flex-start;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 4px 10px;
  background: rgba(90, 150, 255, 0.12);
  border: 1px solid rgba(90, 150, 255, 0.28);
  color: var(--cyan);
  border-radius: 999px;
}
.fp-tag-featured {
  background: linear-gradient(120deg, rgba(90, 150, 255, 0.25), rgba(255, 176, 208, 0.15));
  border-color: rgba(184, 201, 232, 0.5);
  color: var(--gold-2);
}
.fp-name {
  font-family: var(--f-display);
  font-size: clamp(20px, 2.4vw, 28px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--text);
}
.fp-large .fp-name { font-size: clamp(24px, 3vw, 36px); }
.fp-desc {
  font-size: 14px;
  color: var(--text-mute);
  line-height: 1.6;
}
.fp-large .fp-desc { font-size: 16px; line-height: 1.7; max-width: 56ch; }
.fp-bullets {
  list-style: none;
  padding: 0;
  margin: 4px 0 2px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.fp-bullets li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 13.5px;
  color: var(--text-mute);
  line-height: 1.55;
  font-family: var(--f-body);
}
.fp-b-dot {
  flex-shrink: 0;
  width: 6px; height: 6px;
  margin-top: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, #5a96ff, #ffb0d0);
  box-shadow: 0 0 8px rgba(90, 150, 255, 0.55);
}
.fp-tech {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 4px;
}
.fp-tech span {
  font-family: var(--f-mono);
  font-size: 10.5px;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-mute);
}
.fp-arrow {
  font-family: var(--f-mono);
  font-size: 12px;
  color: var(--cyan);
  letter-spacing: 0.05em;
  margin-top: 8px;
  transition: transform 0.4s var(--ease);
  display: inline-block;
  align-self: flex-start;
}
.fp-large .fp-arrow { margin-top: 12px; }
.fp-card:hover .fp-arrow { transform: translateX(6px); }

.fp-cta {
  display: flex;
  justify-content: center;
}

/* ============ MODEL VIEWER SHOWCASE ============ */
.model-stage {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 40px;
  align-items: stretch;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 24px;
  backdrop-filter: blur(12px);
  margin-bottom: 30px;
}
@media (max-width: 880px) { .model-stage { grid-template-columns: 1fr; } }
.model-stage model-viewer {
  width: 100%;
  height: 480px;
  min-height: 380px;
  background:
    radial-gradient(circle at 50% 60%, rgba(90, 150, 255, 0.14), transparent 70%),
    linear-gradient(180deg, rgba(28, 18, 52, 0.55), rgba(12, 8, 22, 0.85));
  border-radius: 16px;
  --poster-color: transparent;
}
/* ===== Cosmo the Space Pig — real-time 3D astronaut (Three.js / WebGL) ===== */
.pig-scene {
  position: relative;
  width: 100%;
  height: 480px;
  min-height: 380px;
  border-radius: 16px;
  overflow: hidden;
  align-self: start;
  background:
    radial-gradient(circle at 50% 34%, rgba(90,150,255,0.20), transparent 60%),
    radial-gradient(circle at 82% 82%, rgba(142,109,214,0.16), transparent 55%),
    linear-gradient(180deg, rgba(20,16,46,0.7), rgba(8,8,20,0.92));
}
.pig-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.pig-canvas canvas { display: block; }
.pig-hint {
  position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 7px;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.05em;
  color: #9badcc; background: rgba(10,14,30,0.5);
  border: 1px solid rgba(255,255,255,0.1);
  padding: 5px 12px; border-radius: 999px;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  pointer-events: none; z-index: 2;
}
@media (max-width: 880px) { .pig-scene { height: 420px; } }
.model-loading {
  width: 100%; height: 100%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 16px;
  color: var(--text-mute);
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.15em;
}
.model-loading-spinner {
  width: 30px; height: 30px;
  border: 2px solid var(--gold-soft);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.model-info {
  display: flex; flex-direction: column;
  justify-content: center;
  gap: 14px;
  padding: 20px 10px;
}
.model-info-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 0;
  border-bottom: 1px dashed var(--border);
}
.model-info-row:last-of-type { border-bottom: none; }
.model-label {
  font-family: var(--f-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--text-dim);
}
.model-value {
  font-family: var(--f-mono);
  font-size: 13px;
  color: var(--gold);
}
.model-caption {
  margin-top: 12px;
  font-family: var(--f-serif);
  font-size: 16px;
  font-style: italic;
  color: var(--text-mute);
  line-height: 1.5;
}
.cta-row {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 40px;
  flex-wrap: wrap;
}

/* ============ HIGHLIGHT CTA SECTION ============ */
.highlight-section {
  padding-top: clamp(60px, 8vw, 100px);
  padding-bottom: clamp(60px, 8vw, 100px);
}
.highlight-card {
  position: relative;
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: center;
  padding: clamp(40px, 6vw, 70px);
  background:
    linear-gradient(135deg, rgba(74, 123, 255, 0.12), transparent 60%),
    linear-gradient(180deg, rgba(28, 18, 56, 0.5), rgba(12, 8, 24, 0.7));
  border: 1px solid rgba(90, 150, 255, 0.22);
  border-radius: 28px;
  backdrop-filter: blur(20px);
  overflow: hidden;
}
.highlight-card::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 0% 0%,   rgba(90, 150, 255, 0.18), transparent 50%),
    radial-gradient(circle at 100% 100%, rgba(240, 197, 213, 0.12), transparent 50%);
  pointer-events: none;
}
@media (max-width: 900px) {
  .highlight-card { grid-template-columns: 1fr; }
  .highlight-right { display: none; }
}
.highlight-left { position: relative; z-index: 1; }
.highlight-title {
  font-family: var(--f-display);
  font-size: clamp(32px, 4.8vw, 56px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 14px 0 18px;
}
.highlight-sub {
  font-size: clamp(15px, 1.5vw, 17px);
  color: var(--text-mute);
  line-height: 1.65;
  margin-bottom: 26px;
}
.highlight-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 30px;
}
.hf-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: rgba(90, 150, 255, 0.08);
  border: 1px solid rgba(90, 150, 255, 0.18);
  border-radius: 999px;
  font-size: 13px;
  color: var(--text);
}
.hf-icon {
  color: var(--cyan);
  font-size: 14px;
  font-family: var(--f-mono);
}
.highlight-ctas {
  display: flex; flex-wrap: wrap; gap: 12px;
}
.btn-large {
  padding: 18px 32px;
  font-size: 15px;
}

/* Right side — stacked browser mockups */
.highlight-right {
  position: relative;
  height: 360px;
  perspective: 1200px;
}
.hl-stack {
  position: relative;
  width: 100%; height: 100%;
  transform-style: preserve-3d;
}
.hl-mockup {
  position: absolute;
  width: 78%;
  height: 58%;
  background: linear-gradient(180deg, #100a1d, #0a0712);
  border: 1px solid rgba(90, 150, 255, 0.18);
  border-radius: 10px;
  padding: 10px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
  transform-origin: center center;
  transition: transform 0.6s var(--ease);
}
.hl-m1 {
  top: 4%; left: -4%;
  transform: rotate(-7deg) translateZ(0);
  animation: hlFloat1 8s ease-in-out infinite;
}
.hl-m2 {
  top: 18%; left: 14%;
  transform: rotate(2deg) translateZ(40px);
  animation: hlFloat2 9s ease-in-out infinite;
  z-index: 2;
}
.hl-m3 {
  bottom: 0%; right: -4%;
  transform: rotate(8deg) translateZ(0);
  animation: hlFloat3 10s ease-in-out infinite;
}
@keyframes hlFloat1 {
  0%, 100% { transform: rotate(-7deg) translate(0, 0); }
  50%      { transform: rotate(-6deg) translate(-6px, -8px); }
}
@keyframes hlFloat2 {
  0%, 100% { transform: rotate(2deg) translateZ(40px); }
  50%      { transform: rotate(3deg) translate(2px, -10px) translateZ(50px); }
}
@keyframes hlFloat3 {
  0%, 100% { transform: rotate(8deg) translate(0, 0); }
  50%      { transform: rotate(7deg) translate(6px, -8px); }
}
.highlight-card:hover .hl-m1 { transform: rotate(-12deg) translate(-14px, -10px); }
.highlight-card:hover .hl-m2 { transform: rotate(0deg) translate(0, -16px) translateZ(60px); }
.highlight-card:hover .hl-m3 { transform: rotate(13deg) translate(14px, -10px); }

.hl-dots { display: flex; gap: 4px; margin-bottom: 8px; }
.hl-dots span { width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,0.15); }
.hl-dots span:nth-child(1) { background: #ff5f57; opacity: 0.7; }
.hl-dots span:nth-child(2) { background: #ffbd2e; opacity: 0.7; }
.hl-dots span:nth-child(3) { background: #28c941; opacity: 0.7; }

.hl-bar {
  height: 18px;
  background: linear-gradient(90deg, rgba(90, 150, 255, 0.25), rgba(240, 197, 213, 0.1));
  border-radius: 4px;
  margin-bottom: 8px;
}
.hl-row {
  height: 6px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 2px;
  margin-bottom: 6px;
}
.hl-row.short { width: 60%; background: rgba(255, 255, 255, 0.08); }
.hl-banner {
  height: 36px;
  background: linear-gradient(120deg, rgba(90, 150, 255, 0.3), rgba(184, 201, 232, 0.15));
  border-radius: 4px;
  margin-bottom: 8px;
}
.hl-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}
.hl-grid.sm { grid-template-columns: repeat(4, 1fr); }
.hl-grid > div {
  aspect-ratio: 1;
  background: rgba(90, 150, 255, 0.12);
  border-radius: 3px;
}
.hl-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  margin-top: 6px;
}
.hl-cards > div {
  height: 30px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 3px;
}

/* ============ CONTACT (form) ============ */
.contact-layout {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 50px;
  align-items: start;
}
@media (max-width: 880px) { .contact-layout { grid-template-columns: 1fr; gap: 40px; } }

.contact-form {
  padding: 36px 32px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 22px;
  backdrop-filter: blur(14px);
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media (max-width: 540px) { .form-row { grid-template-columns: 1fr; } }
.form-field {
  position: relative;
  margin-bottom: 26px;
}
.form-field input,
.form-field textarea {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border-strong);
  padding: 16px 0 8px;
  font-family: var(--f-sans);
  font-size: 15px;
  color: var(--text);
  outline: none;
  resize: vertical;
  transition: border-color .3s var(--ease);
}
.form-field textarea { min-height: 110px; line-height: 1.6; }
.form-field label {
  position: absolute;
  left: 0; top: 17px;
  font-size: 14px;
  color: var(--text-mute);
  pointer-events: none;
  transition: transform .35s var(--ease), color .35s var(--ease), font-size .35s var(--ease);
  transform-origin: left;
}
.form-field input:focus + label,
.form-field input:valid + label,
.form-field textarea:focus + label,
.form-field textarea:valid + label {
  transform: translateY(-22px) scale(0.85);
  color: var(--gold);
}
.field-line {
  position: absolute;
  left: 0; bottom: 0;
  width: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--gold), var(--cyan));
  transition: width .5s var(--ease);
}
.form-field input:focus ~ .field-line,
.form-field textarea:focus ~ .field-line { width: 100%; }
.form-submit {
  margin-top: 8px;
  cursor: pointer;
}
.form-status {
  margin-top: 16px;
  padding: 12px 14px;
  font-family: var(--f-sans);
  font-size: 13px;
  line-height: 1.55;
  letter-spacing: 0.01em;
  color: var(--text-mute);
  min-height: 1.4em;
  border-radius: 12px;
  background: transparent;
  border: 1px solid transparent;
  transition: background 0.4s var(--ease), border-color 0.4s var(--ease), transform 0.5s var(--ease-back);
}
.form-status:empty {
  padding: 0;
  margin-top: 0;
  min-height: 0;
}
.form-status.pending {
  color: var(--cyan);
  background: rgba(90, 150, 255, 0.08);
  border-color: rgba(90, 150, 255, 0.3);
}
.form-status.success {
  color: #4ade80;
  background: rgba(74, 222, 128, 0.08);
  border-color: rgba(74, 222, 128, 0.35);
  animation: formSuccessPulse 0.7s cubic-bezier(0.34, 1.4, 0.6, 1);
}
.form-status.error {
  color: #fca5a5;
  background: rgba(239, 68, 68, 0.08);
  border-color: rgba(239, 68, 68, 0.3);
}
@keyframes formSuccessPulse {
  0%   { transform: translateY(8px); opacity: 0; }
  60%  { transform: translateY(-2px); opacity: 1; }
  100% { transform: translateY(0); opacity: 1; }
}

/* Character counter inside textarea field */
.form-field { position: relative; }
.field-counter {
  position: absolute;
  right: 0;
  bottom: -18px;
  font-family: var(--f-mono);
  font-size: 10.5px;
  color: var(--text-dim);
  letter-spacing: 0.06em;
  opacity: 0.7;
  transition: opacity 0.3s var(--ease), color 0.3s var(--ease);
}
.form-field:focus-within .field-counter { opacity: 1; }
.field-counter.near-limit { color: var(--gold-2); }
.field-counter.at-limit { color: #fca5a5; }

/* Helper hint under a field (e.g. "your email gets a CC copy") */
.field-hint {
  display: block;
  margin-top: 7px;
  font-family: var(--f-mono);
  font-size: 10.5px;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--text-dim);
  opacity: 0.75;
  transition: opacity 0.3s var(--ease), color 0.3s var(--ease);
}
.form-field:focus-within .field-hint { opacity: 1; color: var(--blue-2, #84b4ff); }

/* Submit button spinner state */
.form-submit[data-state="sending"] { cursor: progress; pointer-events: none; opacity: 0.85; }
.form-submit[data-state="sending"] .cf-send-icon { display: none !important; }
.form-submit[data-state="sending"] .cf-spin-icon {
  display: inline-block !important;
  animation: cfSpin 0.9s linear infinite;
}
.form-submit[data-state="sent"] {
  background: linear-gradient(120deg, rgba(74, 222, 128, 0.95), rgba(132, 180, 255, 0.95)) !important;
}
@keyframes cfSpin { to { transform: rotate(360deg); } }

/* Confetti burst on successful send (subtle) */
.form-confetti {
  position: absolute;
  pointer-events: none;
  width: 6px; height: 6px;
  border-radius: 50%;
  will-change: transform, opacity;
}

.contact-direct {
  display: flex; flex-direction: column;
  gap: 16px;
}
.contact-direct-title {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 8px;
}
.contact-card-mini {
  display: flex; align-items: center; gap: 14px;
  padding: 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  backdrop-filter: blur(10px);
  transition: all .3s var(--ease);
}
.contact-card-mini:hover {
  border-color: var(--gold);
  transform: translateX(6px);
}
.contact-icon {
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 10px;
  background: var(--gold-soft);
  color: var(--gold);
  flex-shrink: 0;
}
.contact-icon svg { width: 20px; height: 20px; }
.contact-label {
  display: block;
  font-family: var(--f-mono);
  font-size: 10px;
  color: var(--text-dim);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 2px;
}
.contact-value {
  display: block;
  font-family: var(--f-display);
  font-size: 14px;
  color: var(--text);
  word-break: break-word;
}
.contact-availability {
  display: flex; align-items: center; gap: 10px;
  margin-top: 16px;
  padding: 16px;
  border: 1px dashed var(--border-strong);
  border-radius: 12px;
  font-size: 13px;
  color: var(--text-mute);
}

/* ============ FOOTER ============ */
.footer {
  padding: 40px var(--pad-x);
  border-top: 1px solid var(--border);
  position: relative;
  z-index: 10;
}
.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  font-size: 13px;
  color: var(--text-mute);
}
.footer-logo {
  font-family: var(--f-display);
  font-weight: 500;
  color: var(--text);
  margin-right: 8px;
}
.footer-mute { color: var(--text-dim); }
.footer-mid { display: flex; gap: 20px; }
.footer-mid a { transition: color .3s; }
.footer-mid a:hover { color: var(--gold); }
.footer-right { display: flex; gap: 18px; align-items: center; }
.footer-right a { transition: color .3s; }
.footer-right a:hover { color: var(--gold); }

/* ============ ARIF MAULANA ASSISTANT — Waving Robot Chatbot ============ */
.bot-launcher {
  position: fixed;
  bottom: 100px; right: 24px;
  z-index: 95;
  width: 70px; height: 70px;
  border-radius: 22px;
  background: linear-gradient(135deg, #4636a0 0%, #5f5ad4 48%, #7b8cff 100%);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow:
    0 12px 32px rgba(111, 123, 255, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transition: transform 0.4s var(--ease-back), box-shadow 0.4s var(--ease), border-radius 0.4s var(--ease);
}
.bot-launcher:hover {
  transform: scale(1.08) translateY(-4px);
  box-shadow: 0 18px 44px rgba(90, 150, 255, 0.6);
  border-radius: 50%;
}
.bot-launcher.active {
  transform: scale(0.92);
  background: rgba(20, 32, 68, 0.95);
  border: 1px solid var(--cyan);
}
.bot-launcher.active .bot-pulse { display: none; }
.bot-avatar {
  position: relative;
  z-index: 2;
  display: flex; align-items: center; justify-content: center;
}
.bot-pulse {
  position: absolute;
  inset: -4px;
  border-radius: 22px;
  background: radial-gradient(circle, rgba(90, 150, 255, 0.45), transparent 70%);
  animation: botPulse 2.5s ease-out infinite;
}
@keyframes botPulse {
  0%   { transform: scale(0.92); opacity: 0.75; }
  100% { transform: scale(1.5); opacity: 0; }
}
.bot-badge {
  position: absolute;
  top: 6px; right: 6px;
  width: 11px; height: 11px;
  background: #4ade80;
  border: 2px solid #0a1230;
  border-radius: 50%;
  z-index: 3;
  animation: pulse 2s ease-in-out infinite;
  box-shadow: 0 0 8px #4ade80;
}

/* Waving robot arm — animated to grab attention */
.bot-arm {
  transform-origin: 42px 32px;
  animation: botWave 2.4s ease-in-out infinite;
}
.bot-launcher.active .bot-arm { animation: none; }
@keyframes botWave {
  0%, 60%, 100%  { transform: rotate(0deg); }
  10%, 30%, 50%  { transform: rotate(-25deg); }
  20%, 40%       { transform: rotate(22deg); }
}

/* Blinking eyes */
.bot-eyes {
  transform-origin: 28px 24px;
  animation: botBlink 5s linear infinite;
}
.bot-launcher.active .bot-eyes { animation: none; }
@keyframes botBlink {
  0%, 92%, 100% { transform: scaleY(1); }
  95%, 97%      { transform: scaleY(0.1); }
}

/* Speech-bubble peek that pops out periodically */
.bot-peek {
  position: fixed;
  bottom: 130px;
  right: 110px;
  z-index: 94;
  padding: 10px 16px;
  background: rgba(20, 32, 68, 0.96);
  border: 1px solid rgba(90, 150, 255, 0.45);
  border-radius: 16px;
  border-bottom-right-radius: 4px;
  color: var(--text);
  font-family: var(--f-sans);
  font-size: 13px;
  white-space: nowrap;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(10px);
  opacity: 0;
  transform: translateY(8px) scale(0.92);
  transform-origin: bottom right;
  pointer-events: none;
  transition: opacity 0.45s var(--ease), transform 0.55s var(--ease-back);
}
.bot-peek::after {
  content: '';
  position: absolute;
  right: -8px; bottom: 14px;
  width: 0; height: 0;
  border-style: solid;
  border-width: 6px 0 6px 10px;
  border-color: transparent transparent transparent rgba(20, 32, 68, 0.96);
}
.bot-peek.show {
  opacity: 1;
  transform: translateY(0) scale(1);
}

@media (max-width: 600px) {
  .bot-launcher { bottom: 88px; right: 16px; width: 60px; height: 60px; }
  .bot-launcher .bot-avatar svg { width: 34px; height: 34px; }
  .bot-peek { bottom: 116px; right: 88px; font-size: 12px; padding: 8px 12px; }
}

/* Chat panel */
.bot-panel {
  position: fixed;
  bottom: 170px; right: 24px;
  z-index: 96;
  width: 380px;
  max-width: calc(100vw - 32px);
  height: 540px;
  max-height: calc(100vh - 200px);
  background:
    linear-gradient(135deg, rgba(74, 123, 255, 0.1), transparent 50%),
    linear-gradient(180deg, rgba(28, 18, 56, 0.96), rgba(14, 8, 26, 0.98));
  border: 1px solid rgba(90, 150, 255, 0.28);
  border-radius: 20px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(20px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px) scale(0.95);
  transform-origin: bottom right;
  transition: opacity 0.4s var(--ease), visibility 0.4s var(--ease),
              transform 0.5s cubic-bezier(0.34, 1.4, 0.6, 1);
}
.bot-panel.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}
@media (max-width: 600px) {
  .bot-panel {
    bottom: 152px; right: 16px; left: 16px;
    width: auto;
    height: 60vh;
  }
}

.bot-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(90, 150, 255, 0.08), transparent);
  flex-shrink: 0;
}
.bot-header-info {
  display: flex; align-items: center; gap: 12px;
}
.bot-header-avatar {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--cyan), var(--magenta));
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px rgba(74, 123, 255, 0.4);
}
.bot-name {
  font-family: var(--f-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}
.bot-status {
  font-family: var(--f-mono);
  font-size: 10px;
  color: var(--text-mute);
  letter-spacing: 0.05em;
  display: flex; align-items: center; gap: 6px;
  text-transform: uppercase;
}
.bot-status .status-dot { width: 6px; height: 6px; }
.bot-close {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  color: var(--text-mute);
  display: flex; align-items: center; justify-content: center;
  transition: all 0.3s var(--ease);
}
.bot-close:hover {
  background: rgba(74, 123, 255, 0.2);
  color: var(--text);
  transform: rotate(90deg);
}

.bot-messages {
  flex: 1;
  padding: 18px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  scroll-behavior: smooth;
}
.bot-messages::-webkit-scrollbar { width: 6px; }
.bot-messages::-webkit-scrollbar-track { background: transparent; }
.bot-messages::-webkit-scrollbar-thumb { background: rgba(90, 150, 255, 0.25); border-radius: 3px; }

.bot-msg {
  max-width: 80%;
  padding: 10px 14px;
  font-size: 13.5px;
  line-height: 1.55;
  border-radius: 16px;
  animation: msgIn 0.4s var(--ease-out);
}
@keyframes msgIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.bot-msg.bot {
  align-self: flex-start;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
  color: var(--text);
  border-bottom-left-radius: 4px;
}
.bot-msg.user {
  align-self: flex-end;
  background: linear-gradient(135deg, var(--cyan), var(--magenta));
  color: #fff;
  border-bottom-right-radius: 4px;
}
.bot-msg.bot strong { color: var(--cyan); font-weight: 600; }
.bot-msg.bot a { color: var(--cyan); text-decoration: underline; }
.bot-msg.bot ul {
  margin: 6px 0 2px 18px;
  list-style: none;
  padding: 0;
}
.bot-msg.bot li {
  position: relative;
  padding-left: 14px;
  margin-bottom: 4px;
}
.bot-msg.bot li::before {
  content: '✦';
  position: absolute; left: 0;
  color: var(--cyan);
  font-size: 9px;
  top: 4px;
}
.bot-typing {
  align-self: flex-start;
  display: flex; align-items: center; gap: 4px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
  border-radius: 16px;
  border-bottom-left-radius: 4px;
}
.bot-typing span {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--cyan);
  animation: typing 1.4s ease-in-out infinite;
}
.bot-typing span:nth-child(2) { animation-delay: 0.2s; }
.bot-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes typing {
  0%, 100% { opacity: 0.3; transform: translateY(0); }
  50%      { opacity: 1;   transform: translateY(-4px); }
}

.bot-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 18px 12px;
  flex-shrink: 0;
}
.bot-quick button {
  font-family: var(--f-sans);
  font-size: 11.5px;
  padding: 7px 12px;
  background: rgba(90, 150, 255, 0.1);
  border: 1px solid rgba(90, 150, 255, 0.25);
  border-radius: 999px;
  color: var(--text);
  transition: all 0.25s var(--ease);
}
.bot-quick button:hover {
  background: rgba(90, 150, 255, 0.2);
  border-color: var(--cyan);
}

.bot-input-wrap {
  display: flex;
  gap: 8px;
  padding: 14px 18px 18px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.bot-input {
  flex: 1;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text);
  font-family: var(--f-sans);
  font-size: 13.5px;
  outline: none;
  transition: border-color 0.3s;
}
.bot-input:focus { border-color: var(--cyan); }
.bot-input::placeholder { color: var(--text-dim); }
.bot-send {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--cyan), var(--magenta));
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
  flex-shrink: 0;
}
.bot-send:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 16px rgba(74, 123, 255, 0.4);
}

/* ============ TOAST ============ */
.toast {
  position: fixed;
  bottom: 90px;
  left: 50%;
  transform: translateX(-50%) translateY(80px);
  padding: 12px 20px;
  background: rgba(184, 201, 232, 0.95);
  color: #06080d;
  font-family: var(--f-display);
  font-size: 14px;
  font-weight: 500;
  border-radius: 999px;
  z-index: 200;
  opacity: 0;
  transition: opacity .35s var(--ease), transform .35s var(--ease);
  box-shadow: 0 20px 40px rgba(0,0,0,0.4);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ============================================================
   PROJECTS PAGE
   ============================================================ */
.page-projects .proj-hero {
  padding: 160px var(--pad-x) 80px;
  position: relative;
}
.proj-hero-inner { max-width: 900px; margin: 0 auto; text-align: center; }
.proj-hero-meta {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  backdrop-filter: blur(10px);
  font-size: 13px;
  color: var(--text-mute);
  margin-bottom: 24px;
}
.proj-hero-title {
  font-family: var(--f-display);
  font-size: clamp(48px, 8vw, 96px);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.03em;
  margin-bottom: 24px;
}
.proj-hero-sub {
  font-size: clamp(16px, 1.6vw, 18px);
  color: var(--text-mute);
  max-width: 720px;
  margin: 0 auto;
  line-height: 1.7;
}

/* ============ CIRCULAR GALLERY ============ */
.circular-gallery {
  position: relative;
  height: 520px;
  perspective: 1400px;
  user-select: none;
  margin: 40px 0;
  touch-action: pan-y;   /* vertical page scroll OK; horizontal stays inside the gallery */
}
/* Ambient depth so the sides never read as empty */
.cg-ambient { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.cg-ambient::before {
  content: ''; position: absolute; top: 50%; left: 50%; width: 120%; height: 132%;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse 42% 46% at 50% 50%, rgba(120,150,255,0.16), rgba(90,120,220,0.06) 45%, transparent 72%);
}
.cg-orbit {
  position: absolute; top: 50%; left: 50%; border-radius: 50%;
  border: 1px dashed rgba(184,201,232,0.14);
  transform: translate(-50%, -50%);
}
.cg-orbit-1 { width: 760px; height: 360px; animation: cgOrbitSpin 60s linear infinite; }
.cg-orbit-2 { width: 1080px; height: 470px; border-style: solid; border-color: rgba(184,201,232,0.07); animation: cgOrbitSpin 92s linear infinite reverse; }
@keyframes cgOrbitSpin { to { transform: translate(-50%, -50%) rotate(360deg); } }
.cg-spark {
  position: absolute; width: 4px; height: 4px; border-radius: 50%;
  background: rgba(233,216,166,0.7); box-shadow: 0 0 8px rgba(233,216,166,0.6);
  animation: cgSparkTwinkle 4s ease-in-out infinite;
}
@keyframes cgSparkTwinkle { 0%,100% { opacity: 0.15; transform: scale(0.7); } 50% { opacity: 0.9; transform: scale(1.1); } }
.cg-spark.s1 { top: 26%; left: 9%;  animation-delay: 0s; }
.cg-spark.s2 { top: 64%; left: 14%; animation-delay: 1.1s; }
.cg-spark.s3 { top: 40%; left: 5%;  animation-delay: 2.2s; width: 3px; height: 3px; }
.cg-spark.s4 { top: 78%; left: 20%; animation-delay: 0.6s; width: 3px; height: 3px; }
.cg-spark.s5 { top: 24%; right: 9%;  left: auto; animation-delay: 1.6s; }
.cg-spark.s6 { top: 60%; right: 13%; left: auto; animation-delay: 2.7s; }
.cg-spark.s7 { top: 44%; right: 6%;  left: auto; animation-delay: 0.3s; width: 3px; height: 3px; }
.cg-spark.s8 { top: 80%; right: 18%; left: auto; animation-delay: 1.9s; width: 3px; height: 3px; }
@media (prefers-reduced-motion: reduce) { .cg-orbit, .cg-spark { animation: none; } }
@media (max-width: 640px) {
  .cg-orbit-1 { width: 380px; height: 280px; }
  .cg-orbit-2 { width: 560px; height: 360px; }
}
.cg-stage {
  position: relative;
  width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.85s cubic-bezier(0.3, 1.05, 0.3, 1);
  display: flex;
  justify-content: center;
  align-items: center;
  will-change: transform;
}
.cg-item {
  position: absolute;
  top: 50%; left: 50%;
  width: 300px;
  height: 410px;
  margin-top: -205px;
  margin-left: -150px;
  transform-style: preserve-3d;
  /* Show neighbors dimmed so viewer sees the carousel */
  opacity: 0.20;
  filter: blur(8px) brightness(0.45);
  pointer-events: none;
  transition: opacity 0.7s cubic-bezier(0.3, 1, 0.3, 1),
              filter  0.7s cubic-bezier(0.3, 1, 0.3, 1);
}
/* Adjacent (prev + next) cards are slightly more visible */
.cg-item.cg-adjacent {
  opacity: 0.5;
  filter: blur(2.5px) brightness(0.75);
}
.cg-item.cg-active {
  opacity: 1;
  filter: none;
  pointer-events: auto;
  z-index: 5;
}
.cg-card {
  width: 100%; height: 100%;
  background:
    linear-gradient(135deg, rgba(184, 201, 232, 0.12), transparent 50%),
    linear-gradient(180deg, rgba(18, 23, 38, 0.9), rgba(10, 14, 26, 0.96));
  border: 1px solid rgba(184, 201, 232, 0.3);
  border-radius: 20px;
  padding: 16px 18px 22px;
  backdrop-filter: blur(12px);
  display: flex; flex-direction: column;
  box-shadow: 0 30px 60px rgba(0,0,0,0.5);
  position: relative;
  overflow: hidden;
}
.cg-card::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 0%, rgba(184, 201, 232, 0.18), transparent 50%);
  pointer-events: none;
}
.cg-mockup {
  position: relative;
  width: 100%;
  margin-bottom: 16px;
  border-radius: 10px;
  overflow: hidden;
  background: #08090f;
  box-shadow: 0 10px 25px rgba(0,0,0,0.4);
  flex-shrink: 0;
}
.cg-mockup svg {
  width: 100%;
  height: auto;
  display: block;
}
.cg-tag {
  align-self: flex-start;
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 4px 10px;
  background: var(--gold-soft);
  color: var(--gold);
  border-radius: 999px;
  margin-bottom: 10px;
}
.cg-card h3 {
  font-family: var(--f-display);
  font-size: 21px;
  font-weight: 600;
  margin-bottom: 8px;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.cg-card p {
  font-size: 12.5px;
  color: var(--text-mute);
  line-height: 1.5;
  margin-bottom: auto;
}
.cg-stack {
  font-family: var(--f-mono);
  font-size: 10px;
  color: var(--text-dim);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding-top: 12px;
  margin-top: 12px;
  border-top: 1px dashed var(--border);
}
.cg-controls {
  display: flex; align-items: center; justify-content: center;
  gap: 24px;
  margin-top: 36px;
}
.cg-btn {
  width: 44px; height: 44px;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  background: var(--surface);
  backdrop-filter: blur(10px);
  color: var(--text);
  display: flex; align-items: center; justify-content: center;
  transition: all .3s var(--ease);
  cursor: pointer;
}
.cg-btn:hover {
  border-color: var(--gold);
  color: var(--gold);
  box-shadow: var(--glow-gold);
}
.cg-pager {
  font-family: var(--f-mono);
  font-size: 14px;
  color: var(--text-mute);
  letter-spacing: 0.15em;
  min-width: 70px;
  text-align: center;
}
.cg-pager span { color: var(--gold); }
/* Pagination dots under the carousel */
.cg-dots { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 16px; }
.cg-dot {
  width: 9px; height: 9px; padding: 0; border-radius: 50%;
  border: 1px solid rgba(184, 201, 232, 0.45);
  background: transparent; cursor: pointer;
  transition: transform .3s var(--ease-back), background .3s, border-color .3s, width .3s;
}
.cg-dot:hover { border-color: var(--gold); transform: scale(1.2); }
.cg-dot-active {
  width: 26px; border-radius: 6px;
  background: linear-gradient(120deg, var(--champagne), var(--gold-2));
  border-color: transparent;
}

@media (max-width: 640px) {
  .circular-gallery { height: 460px; }
  .cg-item { width: 260px; height: 360px; margin-left: -130px; margin-top: -180px; }
}

/* ============ FOLDER COMPONENT ============ */
.folder-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 32px;
  padding-top: 30px;
}
.folder {
  position: relative;
  width: 100%;
  height: 220px;
  cursor: pointer;
  transition: transform .35s var(--ease);
}
.folder:hover { transform: translateY(-8px); }
.folder-base {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 140px;
  background: linear-gradient(180deg, #b88950 0%, #8a6638 100%);
  border-radius: 0 12px 12px 12px;
  box-shadow: inset 0 -10px 20px rgba(0,0,0,0.25), 0 8px 20px rgba(0,0,0,0.4);
  z-index: 1;
}
.folder-tab {
  position: absolute;
  top: 50px;
  left: 0;
  width: 50%;
  height: 24px;
  background: linear-gradient(180deg, #d4a574, #b88950);
  border-radius: 12px 12px 0 0;
  z-index: 1;
  box-shadow: inset 0 2px 4px rgba(255,255,255,0.15);
}
.folder-tab::before {
  content: '';
  position: absolute;
  top: 0; right: -20px;
  width: 0; height: 0;
  border-style: solid;
  border-width: 0 0 24px 20px;
  border-color: transparent transparent #b88950 transparent;
}
.folder-front {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 130px;
  background: linear-gradient(180deg, #d4a574 0%, #b88950 100%);
  border-radius: 8px 12px 12px 12px;
  z-index: 3;
  box-shadow: inset 0 2px 4px rgba(255,255,255,0.2), 0 6px 14px rgba(0,0,0,0.3);
  transition: transform .55s cubic-bezier(0.34, 1.4, 0.6, 1), border-radius .55s var(--ease);
  transform-origin: bottom center;
}
.folder.open .folder-front {
  transform: skewX(-15deg) translateY(-6px) translateX(-12px);
}
.folder-papers {
  position: absolute;
  bottom: 30px; left: 16px; right: 16px;
  z-index: 2;
  display: flex; flex-direction: column;
  gap: 4px;
  pointer-events: none;
}
.paper {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  background: linear-gradient(135deg, #fefefe 0%, #d8d8e0 100%);
  color: #1a1a2e;
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 500;
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  transform: translateY(50px);
  opacity: 0;
  transition: transform .55s cubic-bezier(0.34, 1.4, 0.6, 1), opacity .4s var(--ease);
}
.folder.open .paper { opacity: 1; }
.folder.open .paper.p1 { transform: translateY(-65px) rotate(-3deg); transition-delay: 0.05s; }
.folder.open .paper.p2 { transform: translateY(-50px) rotate(2deg); transition-delay: 0.1s; }
.folder.open .paper.p3 { transform: translateY(-35px) rotate(-1deg); transition-delay: 0.15s; }
.paper-icon { font-size: 14px; }

.folder-label {
  position: absolute;
  bottom: -40px;
  left: 0; right: 0;
  font-family: var(--f-display);
  font-size: 16px;
  font-weight: 500;
  color: var(--text);
  text-align: center;
}
.folder-count {
  position: absolute;
  bottom: -62px;
  left: 0; right: 0;
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: 0.1em;
  text-align: center;
}

/* ============ FOLDER DETAILS MODAL ============ */
.folder-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s var(--ease), visibility 0.45s var(--ease);
}
.folder-modal.open {
  opacity: 1;
  visibility: visible;
}
.folder-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 5, 15, 0.78);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.folder-modal-panel {
  position: relative;
  max-width: 720px;
  width: calc(100% - 40px);
  max-height: calc(100vh - 80px);
  margin: 40px auto;
  background:
    linear-gradient(135deg, rgba(74, 123, 255, 0.14), transparent 50%),
    linear-gradient(180deg, rgba(30, 18, 56, 0.95), rgba(14, 8, 26, 0.98));
  border: 1px solid rgba(90, 150, 255, 0.28);
  border-radius: 22px;
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.02);
  overflow-y: auto;
  overflow-x: hidden;
  transform: translateY(40px) scale(0.96);
  transition: transform 0.55s cubic-bezier(0.34, 1.4, 0.6, 1);
}
.folder-modal.open .folder-modal-panel {
  transform: translateY(0) scale(1);
}
.folder-modal-close {
  position: absolute;
  top: 18px; right: 18px;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border);
  color: var(--text);
  display: flex; align-items: center; justify-content: center;
  transition: all 0.3s var(--ease);
  z-index: 2;
}
.folder-modal-close:hover {
  background: rgba(90, 150, 255, 0.2);
  border-color: var(--cyan);
  transform: rotate(90deg);
}
.folder-modal-body { padding: 40px 36px 36px; }

.fm-header {
  display: flex; align-items: center; gap: 16px;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px dashed var(--border);
}
.fm-icon {
  width: 56px; height: 56px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--cyan), var(--magenta));
  display: flex; align-items: center; justify-content: center;
  font-size: 26px;
  flex-shrink: 0;
  box-shadow: 0 8px 20px rgba(90, 150, 255, 0.35);
}
.fm-title-wrap { flex: 1; min-width: 0; }
.fm-cat {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 4px;
}
.fm-title {
  font-family: var(--f-display);
  font-size: clamp(22px, 3vw, 28px);
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
}
.fm-summary {
  font-size: 15px;
  color: var(--text-mute);
  line-height: 1.65;
  margin-bottom: 28px;
}

.fm-files {
  display: flex; flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
}
.fm-file {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 16px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--border);
  border-radius: 12px;
  transition: all 0.3s var(--ease);
}
.fm-file:hover {
  border-color: rgba(90, 150, 255, 0.35);
  background: rgba(90, 150, 255, 0.06);
  transform: translateX(4px);
}
.fm-file-icon {
  width: 38px; height: 38px;
  border-radius: 8px;
  background: rgba(90, 150, 255, 0.15);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.fm-file-text { min-width: 0; }
.fm-file-name {
  font-family: var(--f-display);
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 2px;
}
.fm-file-desc {
  font-size: 13px;
  color: var(--text-mute);
  line-height: 1.5;
}
.fm-file-meta {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  text-align: right;
  flex-shrink: 0;
}

.fm-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding: 18px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px dashed var(--border);
  border-radius: 12px;
}
.fm-stat {
  text-align: center;
}
.fm-stat-val {
  font-family: var(--f-display);
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 600;
  color: var(--gold);
  display: block;
}
.fm-stat-lbl {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* ============ DETAILED PROJECT CARDS ============ */
.dp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}
@media (max-width: 800px) { .dp-grid { grid-template-columns: 1fr; } }
.dp-card {
  position: relative;
  padding: 1px;
  border-radius: 22px;
  isolation: isolate;
}
.dp-inner {
  position: relative;
  z-index: 2;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 21px;
  backdrop-filter: blur(14px);
  padding: 32px 30px;
  height: 100%;
  display: flex; flex-direction: column;
  gap: 14px;
  transition: border-color .35s var(--ease), transform .35s var(--ease);
}
.dp-card:hover .dp-inner {
  border-color: rgba(90, 150, 255, 0.3);
  transform: translateY(-3px);
}
.dp-head {
  display: flex; justify-content: space-between; align-items: center;
}
.dp-num {
  font-family: var(--f-mono);
  font-size: 13px;
  color: var(--gold);
  letter-spacing: 0.2em;
}
.dp-pill {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 4px 10px;
  background: rgba(90, 150, 255, 0.12);
  color: var(--cyan);
  border-radius: 999px;
}
.dp-pill.featured {
  background: var(--gold-soft);
  color: var(--gold);
}
.dp-title {
  font-family: var(--f-display);
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.dp-desc {
  font-size: 14.5px;
  color: var(--text-mute);
  line-height: 1.65;
  flex: 1;
}
.dp-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  padding: 16px 0;
  border-top: 1px dashed var(--border);
  border-bottom: 1px dashed var(--border);
}
.dp-stats > div {
  display: flex; flex-direction: column;
  gap: 4px;
  align-items: center;
  text-align: center;
}
.dp-stat-val {
  font-family: var(--f-display);
  font-size: 22px;
  font-weight: 600;
  color: var(--gold);
  letter-spacing: -0.02em;
}
.dp-stat-lbl {
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.dp-stack {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.dp-stack span {
  font-family: var(--f-mono);
  font-size: 11px;
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-mute);
}

/* ============ METRICS DASHBOARD ============ */
.metrics-dashboard {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 16px;
  padding: 32px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 22px;
  backdrop-filter: blur(14px);
  margin-bottom: 60px;
}
.metric {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  padding: 16px;
  border-right: 1px dashed var(--border);
}
.metric:last-child { border-right: none; }
.metric-val {
  font-family: var(--f-display);
  font-size: clamp(28px, 3.5vw, 44px);
  font-weight: 600;
  color: var(--gold);
  letter-spacing: -0.02em;
  margin-bottom: 4px;
  display: flex; align-items: baseline; gap: 2px;
}
.metric-lbl {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--text-mute);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
@media (max-width: 700px) {
  .metric { border-right: none; border-bottom: 1px dashed var(--border); padding: 14px; }
  .metric:last-child { border-bottom: none; }
}

.achievements-list {
  display: flex; flex-direction: column;
  gap: 4px;
}
.ach-row {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 30px;
  padding: 24px 0;
  border-bottom: 1px solid var(--border);
  align-items: start;
}
.ach-row:last-child { border-bottom: none; }
@media (max-width: 600px) {
  .ach-row { grid-template-columns: 1fr; gap: 8px; }
}
.ach-year {
  font-family: var(--f-mono);
  font-size: 13px;
  color: var(--gold);
  letter-spacing: 0.1em;
  padding-top: 4px;
}
.ach-content h4 {
  font-family: var(--f-display);
  font-size: 17px;
  font-weight: 500;
  margin-bottom: 8px;
  color: var(--text);
}
.ach-content p {
  font-size: 14px;
  color: var(--text-mute);
  line-height: 1.65;
}

/* ============ CTA SECTION ============ */
.cta-section {
  padding-top: 60px;
}
.cta-inner {
  text-align: center;
  max-width: 700px;
}

/* ============ MOBILE ADJUSTMENTS ============ */
@media (max-width: 600px) {
  .gooey-nav { padding: 16px var(--pad-x); }
  .hero { padding: 100px 20px 80px; }
  .stat-divider { display: none; }
  .hero-stats { gap: 22px; }
}

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

/* ============================================================================
   ANIMATED CARDS — float, tilt, sheen border
   ============================================================================ */
.fp-card, .ec-card, .dp-card, .contact-card-mini {
  transform-style: preserve-3d;
  /* tilt is driven by JS-set --rx and --ry */
  --rx: 0deg;
  --ry: 0deg;
  --mx: 50%;
  --my: 50%;
  transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform 0.55s cubic-bezier(0.34, 1.0, 0.6, 1), border-color 0.45s var(--ease), box-shadow 0.45s var(--ease);
}
/* Spotlight sheen that follows the cursor.
   mix-blend-mode: screen makes it ADD light to the surface without
   darkening the text underneath — even when it overlays content. */
.fp-card::after,
.ec-card::after,
.dp-card::after,
.contact-card-mini::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(360px circle at var(--mx) var(--my),
              rgba(255, 176, 208, 0.12),
              rgba(90, 150, 255, 0.06) 30%,
              transparent 60%);
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 0.5s var(--ease);
  z-index: 1;
}
/* Ensure card text containers render above the spotlight overlay */
.fp-content,
.fp-visual,
.ec-card > *,
.dp-inner,
.contact-card-mini > * { position: relative; z-index: 2; }
.fp-card:hover::after,
.ec-card:hover::after,
.dp-card:hover::after,
.contact-card-mini:hover::after { opacity: 1; }

/* Gentle floating idle animation */
@keyframes cardFloat {
  0%, 100% { transform: perspective(900px) rotateX(var(--rx, 0)) rotateY(var(--ry, 0)) translateY(0); }
  50%      { transform: perspective(900px) rotateX(var(--rx, 0)) rotateY(var(--ry, 0)) translateY(-3px); }
}
.fp-card { animation: cardFloat 6s ease-in-out infinite; }
.fp-card:nth-child(2) { animation-delay: 0.6s; }
.fp-card:nth-child(3) { animation-delay: 1.2s; }
.fp-card:nth-child(4) { animation-delay: 1.8s; }
/* Disable float while hovered or tilting so tilt looks responsive */
.fp-card:hover { animation: none; }

/* Animated gradient sheen along the border on hover */
.fp-card, .ec-card, .dp-card {
  position: relative;
}
.fp-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from var(--sheen-angle, 0deg),
              transparent 0%,
              rgba(90, 150, 255, 0.65) 18%,
              rgba(255, 176, 208, 0.65) 32%,
              transparent 50%,
              transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.45s var(--ease);
  pointer-events: none;
  z-index: 0;
}
.fp-card:hover::before {
  opacity: 1;
  animation: sheenSpin 4s linear infinite;
}
@property --sheen-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
@keyframes sheenSpin {
  to { --sheen-angle: 360deg; }
}

/* ============================================================================
   STARFIELD — twinkling stars + shooting stars (canvas)
   ============================================================================ */
.starfield-layer {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.starfield-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0.85;
}

/* ============================================================================
   UFO FLEET — ambient flying UFOs across the galaxy background
   ============================================================================ */
.ufo-fleet {
  position: fixed;
  inset: 0;
  /* sits in the background layer alongside prism-bg so it never obstructs text
     (game mode flips this to a foreground z-index for clickability) */
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
.ufo-sprite {
  position: absolute;
  top: 0; left: 0;
  width: 92px; height: 58px;
  opacity: 0.55;
  transform: translate3d(-9999px, -9999px, 0);
  filter: drop-shadow(0 6px 14px rgba(90, 150, 255, 0.35)) blur(0.4px);
  will-change: transform;
  transition: opacity .4s var(--ease);
}
.ufo-svg { width: 100%; height: 100%; display: block; overflow: visible; }
.ufo-light {
  animation: ufoLightBlink 1.8s ease-in-out infinite;
}
.ufo-sprite .ufo-light:nth-child(7) { animation-delay: 0s; }
.ufo-sprite .ufo-light:nth-child(8) { animation-delay: 0.4s; }
.ufo-sprite .ufo-light:nth-child(9) { animation-delay: 0.8s; }
.ufo-sprite .ufo-light:nth-child(10){ animation-delay: 1.2s; }
@keyframes ufoLightBlink {
  0%, 100% { opacity: 0.4; transform: scale(0.9); }
  50%      { opacity: 1; transform: scale(1.15); }
}
.ufo-beam {
  transform-origin: 40px 28px;
  animation: ufoBeamFlicker 2.6s ease-in-out infinite;
  opacity: 0.85;
}
@keyframes ufoBeamFlicker {
  0%, 100% { opacity: 0.65; transform: scaleY(1); }
  50%      { opacity: 1; transform: scaleY(1.08); }
}

/* Game mode: UFOs become interactive and fully visible */
body.ufo-game-mode .ufo-fleet { pointer-events: auto; z-index: 86; }
body.ufo-game-mode .ufo-sprite {
  cursor: crosshair;
  opacity: 1;
  filter: drop-shadow(0 6px 18px rgba(90, 150, 255, 0.85))
          drop-shadow(0 0 24px rgba(255, 176, 208, 0.4));
}
body.ufo-game-mode .ufo-sprite:hover {
  filter: drop-shadow(0 6px 18px rgba(255, 176, 208, 0.9))
          drop-shadow(0 0 28px rgba(255, 176, 208, 0.7));
}

/* Explosion animation when hit */
.ufo-exploding {
  animation: ufoExplode 1s cubic-bezier(0.34, 1.4, 0.6, 1) forwards;
  pointer-events: none !important;
}
@keyframes ufoExplode {
  0%   { transform: translate3d(var(--explX, 0), var(--explY, 0), 0) scale(1) rotate(0); opacity: 1; filter: brightness(1); }
  20%  { transform: translate3d(var(--explX, 0), var(--explY, 0), 0) scale(1.4) rotate(15deg); opacity: 1; filter: brightness(2.4) drop-shadow(0 0 40px #ffb0d0); }
  100% { transform: translate3d(var(--explX, 0), calc(var(--explY, 0) + 80px), 0) scale(0.4) rotate(-30deg); opacity: 0; filter: brightness(0.4) blur(2px); }
}

/* ============================================================================
   UFO DEFENDER — mini game UI (launcher button + HUD + overlay)
   ============================================================================ */
.game-launcher {
  position: fixed;
  right: 26px;
  bottom: 196px;       /* sits above the chatbot launcher (which is at ~26px) */
  z-index: 92;
  width: 52px; height: 52px;
  border-radius: 50%;
  border: 1px solid rgba(255, 176, 208, 0.45);
  background:
    radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.18), transparent 55%),
    linear-gradient(135deg, rgba(90, 150, 255, 0.95), rgba(255, 176, 208, 0.9));
  box-shadow:
    0 8px 24px rgba(255, 176, 208, 0.4),
    0 0 0 6px rgba(90, 150, 255, 0.08),
    inset 0 -3px 8px rgba(0, 0, 0, 0.25);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: transform 0.4s cubic-bezier(0.34, 1.4, 0.6, 1), box-shadow 0.4s var(--ease);
  animation: gameLauncherPulse 2.4s ease-in-out infinite;
}
.game-launcher:hover {
  transform: scale(1.12) rotate(-6deg);
  box-shadow:
    0 12px 32px rgba(255, 176, 208, 0.7),
    0 0 0 10px rgba(255, 176, 208, 0.12),
    inset 0 -3px 8px rgba(0, 0, 0, 0.25);
}
.game-launcher svg { width: 26px; height: 26px; }
@keyframes gameLauncherPulse {
  0%, 100% { box-shadow: 0 8px 24px rgba(255, 176, 208, 0.4), 0 0 0 6px rgba(90, 150, 255, 0.08), inset 0 -3px 8px rgba(0, 0, 0, 0.25); }
  50%      { box-shadow: 0 10px 30px rgba(255, 176, 208, 0.65), 0 0 0 12px rgba(255, 176, 208, 0.14), inset 0 -3px 8px rgba(0, 0, 0, 0.25); }
}
.game-launcher-badge {
  position: absolute;
  top: -6px; right: -6px;
  font-family: var(--f-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  background: #fff;
  color: #1a2540;
  padding: 3px 6px;
  border-radius: 999px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

/* Pre-game hint bubble */
.game-tip {
  position: fixed;
  right: 88px;
  bottom: 210px;
  z-index: 91;
  padding: 10px 14px;
  background: rgba(20, 32, 68, 0.96);
  border: 1px solid rgba(255, 176, 208, 0.45);
  border-radius: 14px;
  border-bottom-right-radius: 4px;
  color: var(--text);
  font-family: var(--f-sans);
  font-size: 12.5px;
  white-space: nowrap;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
  opacity: 0;
  transform: translateY(6px) scale(0.96);
  transform-origin: bottom right;
  pointer-events: none;
  transition: opacity 0.4s var(--ease), transform 0.5s var(--ease);
}
.game-tip.visible { opacity: 1; transform: translateY(0) scale(1); }

/* HUD overlay (visible only during play) */
.game-hud {
  position: fixed;
  top: 80px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 95;
  display: none;
  gap: 14px;
  padding: 12px 22px;
  background: rgba(8, 14, 32, 0.72);
  border: 1px solid rgba(255, 176, 208, 0.45);
  border-radius: 999px;
  backdrop-filter: blur(14px);
  font-family: var(--f-mono);
  font-size: 13px;
  color: var(--text);
  letter-spacing: 0.05em;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45);
}
body.ufo-game-mode .game-hud { display: flex; align-items: center; }
.hud-stat {
  display: flex; align-items: center; gap: 8px;
}
.hud-divider {
  width: 1px; height: 18px;
  background: rgba(184, 201, 232, 0.25);
}
.hud-label {
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.hud-value {
  font-family: var(--f-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--gold-2);
  letter-spacing: 0.02em;
}
.hud-lives {
  display: flex; gap: 4px;
}
.hud-life {
  width: 12px; height: 12px;
  background:
    radial-gradient(circle at 35% 30%, #ffd1e2, #ffb0d0 50%, #c97aa0 100%);
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(255, 176, 208, 0.55);
}
.hud-life.lost { background: rgba(255, 255, 255, 0.08); box-shadow: none; opacity: 0.4; }
.hud-exit {
  font-size: 10px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 176, 208, 0.4);
  background: rgba(255, 176, 208, 0.08);
  color: var(--text);
  cursor: pointer;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: background 0.3s var(--ease);
}
.hud-exit:hover { background: rgba(255, 176, 208, 0.2); }

/* Crosshair shown only in game mode (HUD/banner keep cursor for usability) */
body.ufo-game-mode { cursor: none; }
body.ufo-game-mode .game-hud,
body.ufo-game-mode .game-hud *,
body.ufo-game-mode .game-banner,
body.ufo-game-mode .game-banner * { cursor: pointer; }
.game-crosshair {
  position: fixed;
  width: 36px; height: 36px;
  pointer-events: none;
  z-index: 96;
  transform: translate(-50%, -50%);
  display: none;
}
body.ufo-game-mode .game-crosshair { display: block; }

/* Game-mode "scan" tint over the page */
body.ufo-game-mode::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at 50% 50%, transparent 0%, transparent 50%, rgba(255, 176, 208, 0.06) 80%, rgba(90, 150, 255, 0.12) 100%);
  pointer-events: none;
  z-index: 85;
  animation: gameScan 4s ease-in-out infinite;
}
@keyframes gameScan {
  0%, 100% { opacity: 0.7; }
  50%      { opacity: 1; }
}

/* Bullet sparks */
.game-bullet {
  position: fixed;
  width: 6px; height: 6px;
  pointer-events: none;
  z-index: 95;
  background: radial-gradient(circle, #fff 0%, #ffb0d0 40%, transparent 80%);
  border-radius: 50%;
  box-shadow: 0 0 12px #ffb0d0, 0 0 24px rgba(255, 176, 208, 0.6);
  transform: translate(-50%, -50%);
  will-change: transform, opacity;
}

/* Game start / end overlay */
.game-banner {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  z-index: 97;
  padding: 30px 44px;
  background:
    linear-gradient(135deg, rgba(74, 123, 255, 0.28), rgba(255, 176, 208, 0.18)),
    linear-gradient(180deg, rgba(14, 22, 50, 0.92), rgba(8, 14, 32, 0.95));
  border: 1px solid rgba(255, 176, 208, 0.45);
  border-radius: 22px;
  text-align: center;
  backdrop-filter: blur(14px);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.6);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s var(--ease), transform 0.6s cubic-bezier(0.34, 1.4, 0.6, 1);
}
.game-banner.visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  pointer-events: auto;
}
.game-banner h3 {
  font-family: var(--f-display);
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 600;
  color: var(--gold-2);
  letter-spacing: -0.01em;
  margin-bottom: 8px;
}
.game-banner p {
  font-size: 14px;
  color: var(--text-mute);
  margin-bottom: 4px;
}
.game-banner .game-banner-score {
  font-family: var(--f-display);
  font-size: 40px;
  color: var(--text);
  font-weight: 700;
  margin: 6px 0 14px;
}
.game-banner .game-banner-actions {
  display: flex; gap: 10px;
  justify-content: center;
  margin-top: 16px;
}
.game-banner .game-banner-btn {
  padding: 8px 18px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-radius: 999px;
  cursor: pointer;
  transition: transform 0.3s var(--ease), background 0.3s var(--ease);
}
.game-banner-btn.primary {
  background: linear-gradient(120deg, var(--cyan), var(--magenta));
  border: none;
  color: #fff;
}
.game-banner-btn.primary:hover { transform: translateY(-2px); }
.game-banner-btn.ghost {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-mute);
}
.game-banner-btn.ghost:hover { background: rgba(255, 255, 255, 0.06); }

/* Wave-up flash */
.game-wave-flash {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 94;
  font-family: var(--f-display);
  font-size: clamp(40px, 6vw, 76px);
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--text);
  text-shadow: 0 0 30px rgba(255, 176, 208, 0.75), 0 0 60px rgba(90, 150, 255, 0.45);
  opacity: 0;
  pointer-events: none;
}
.game-wave-flash.show { animation: waveFlash 1.6s ease-out forwards; }
@keyframes waveFlash {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.6); }
  30%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  70%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.15); }
}

@media (max-width: 600px) {
  .game-launcher { right: 18px; bottom: 168px; width: 46px; height: 46px; }
  .game-tip { right: 70px; bottom: 180px; font-size: 11.5px; }
  .game-hud { font-size: 12px; padding: 10px 16px; gap: 10px; top: 70px; }
}

/* ============================================================================
   ELEGANT REFINEMENTS · POLISH PASS · v2026.05
   Layered on top of the original styles. Reach for the most impactful tweaks.
   ============================================================================ */

/* Subtle film grain over the page — adds the luxe, printed-on-velvet feel */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9997;
  opacity: 0.025;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ─── REFINED HERO QUOTE — premium framed motto ─── */
.hero-quote {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(8px, 1.5vw, 18px);
  max-width: 720px;
  padding: clamp(22px, 3vw, 36px) clamp(22px, 3vw, 38px);
  margin-bottom: 40px;
  background:
    radial-gradient(circle at 0% 0%, rgba(233, 216, 166, 0.06), transparent 50%),
    radial-gradient(circle at 100% 100%, rgba(90, 150, 255, 0.08), transparent 55%),
    linear-gradient(135deg, rgba(20, 28, 60, 0.55), rgba(10, 16, 38, 0.7));
  border: 1px solid var(--border-elegant);
  border-radius: 18px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow:
    inset 0 1px 0 rgba(233, 216, 166, 0.12),
    0 10px 30px rgba(0, 0, 0, 0.35),
    0 0 60px rgba(90, 150, 255, 0.08);
  isolation: isolate;
  overflow: hidden;
  font-size: clamp(17px, 2vw, 22px);
  line-height: 1.55;
  font-family: var(--f-serif);
  font-style: italic;
  color: var(--text);
}
.hero-quote .hq-frame { position: absolute; inset: 0; pointer-events: none; }
.hero-quote .hq-corner {
  position: absolute;
  width: 22px; height: 22px;
  border: 1.5px solid var(--champagne);
  opacity: 0.45;
  transition: opacity 0.6s var(--ease), width 0.6s var(--ease), height 0.6s var(--ease);
}
.hero-quote .hq-corner.tl { top: 10px; left: 10px; border-right: none; border-bottom: none; border-top-left-radius: 6px; }
.hero-quote .hq-corner.tr { top: 10px; right: 10px; border-left: none; border-bottom: none; border-top-right-radius: 6px; }
.hero-quote .hq-corner.bl { bottom: 10px; left: 10px; border-right: none; border-top: none; border-bottom-left-radius: 6px; }
.hero-quote .hq-corner.br { bottom: 10px; right: 10px; border-left: none; border-top: none; border-bottom-right-radius: 6px; }
.hero-quote:hover .hq-corner { opacity: 0.95; width: 28px; height: 28px; }

.hero-quote .hq-orbit {
  position: absolute;
  inset: -2px;
  border-radius: 18px;
  background: conic-gradient(from var(--orbit-angle, 0deg), transparent 0deg, rgba(233, 216, 166, 0.5) 30deg, transparent 90deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
  mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: 1px;
  opacity: 0;
  animation: hqOrbit 6s linear infinite;
  pointer-events: none;
}
.hero-quote:hover .hq-orbit { opacity: 0.7; }
@property --orbit-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes hqOrbit { to { --orbit-angle: 360deg; } }

.hero-quote .hq-glow {
  position: absolute;
  width: 180px; height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(233, 216, 166, 0.18), transparent 65%);
  filter: blur(20px);
  top: -40px; left: -20px;
  pointer-events: none;
  animation: hqGlowFloat 9s ease-in-out infinite;
}
@keyframes hqGlowFloat {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.5; }
  50%      { transform: translate(40px, 30px) scale(1.2); opacity: 0.85; }
}

.hero-quote .hq-mark {
  flex-shrink: 0;
  width: clamp(28px, 3vw, 40px);
  height: clamp(28px, 3vw, 40px);
  filter: drop-shadow(0 0 8px rgba(233, 216, 166, 0.35));
}
.hero-quote .hq-mark.left { align-self: flex-start; margin-top: -8px; }
.hero-quote .hq-mark.right { align-self: flex-end; margin-bottom: -8px; transform: rotate(180deg); }

.hero-quote .hq-text {
  flex: 1;
  margin: 0;
  font-family: inherit;
  font-style: italic;
  font-size: inherit;
  line-height: inherit;
  color: var(--text);
  position: relative;
  z-index: 1;
}
.hero-quote .hq-text em {
  font-style: italic;
  background: linear-gradient(120deg, var(--gold-2) 0%, var(--champagne) 50%, var(--gold-2) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 500;
  animation: hqShimmer 6s linear infinite;
}
@keyframes hqShimmer {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
.hero-quote .hq-dash { color: var(--champagne); margin: 0 2px; font-style: normal; }
.hero-quote .hq-star {
  color: var(--champagne);
  font-size: 0.9em;
  display: inline-block;
  animation: hqStarSpin 8s linear infinite;
  text-shadow: 0 0 8px rgba(233, 216, 166, 0.6);
}
@keyframes hqStarSpin { to { transform: rotate(360deg); } }

.hero-quote .hq-attribution {
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 14px;
  background: var(--bg);
  border: 1px solid var(--border-elegant);
  border-radius: 999px;
  font-family: var(--f-mono);
  font-size: 9.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--champagne);
  font-style: normal;
  white-space: nowrap;
}
.hero-quote .hq-line {
  width: 14px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--champagne), transparent);
}

@media (max-width: 600px) {
  .hero-quote {
    padding: 26px 20px 30px;
    gap: 4px;
  }
  .hero-quote .hq-mark { display: none; }
  .hero-quote .hq-attribution { font-size: 8.5px; padding: 2px 10px; }
}

/* Hide the old quote-mark style if any persists */
.hero-quote .quote-mark { display: none; }

/* ─── FEATURED PROJECT METRICS (fills empty card space) ─── */
.fp-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 18px 0 6px;
  padding: 14px;
  background:
    linear-gradient(135deg, rgba(233, 216, 166, 0.05), transparent 60%),
    rgba(8, 14, 36, 0.5);
  border: 1px solid var(--border-elegant);
  border-radius: 14px;
  position: relative;
  overflow: hidden;
}
.fp-metrics::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(233, 216, 166, 0.06), transparent);
  background-size: 200% 100%;
  animation: fpMetricsSweep 6s linear infinite;
  pointer-events: none;
}
@keyframes fpMetricsSweep {
  0%   { background-position: -100% 0; }
  100% { background-position: 200% 0; }
}
.fp-metric {
  display: flex; flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  padding: 8px 6px;
  position: relative;
  z-index: 1;
}
.fp-metric + .fp-metric { border-left: 1px solid var(--border); }
.fp-metric-num {
  display: flex;
  align-items: baseline;
  gap: 2px;
  font-family: var(--f-display);
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 600;
  background: linear-gradient(135deg, var(--gold-2), var(--champagne));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.fp-metric-suf { font-size: 0.65em; color: var(--champagne); -webkit-text-fill-color: var(--champagne); }
.fp-metric-lbl {
  font-family: var(--f-mono);
  font-size: 9.5px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.fp-metric-spark {
  width: 48px; height: 14px;
  opacity: 0.8;
  margin-top: 4px;
}
.fp-metric-spark svg { width: 100%; height: 100%; }

/* Live status strip */
.fp-live-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  background: linear-gradient(90deg, rgba(74, 222, 128, 0.10), rgba(74, 222, 128, 0.02));
  border: 1px solid rgba(74, 222, 128, 0.22);
  border-radius: 999px;
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  margin-top: 8px;
  position: relative;
  overflow: hidden;
  align-self: flex-start;
}
.fp-live-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.7);
  animation: fpLivePulse 1.8s ease-out infinite;
}
@keyframes fpLivePulse {
  0%   { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.7); }
  100% { box-shadow: 0 0 0 10px rgba(74, 222, 128, 0); }
}
.fp-live-label { color: #4ade80; font-weight: 600; }
.fp-live-sep   { color: var(--text-mute); opacity: 0.5; }
.fp-live-value { color: var(--text); text-transform: uppercase; letter-spacing: 0.18em; font-size: 9.5px; }
.fp-live-pulse {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, #4ade80, transparent);
  background-size: 50% 100%;
  background-repeat: no-repeat;
  animation: fpLineSweep 2.4s linear infinite;
}
@keyframes fpLineSweep {
  0%   { background-position: -50% 0; }
  100% { background-position: 150% 0; }
}

@media (max-width: 720px) {
  .fp-metrics { grid-template-columns: 1fr 1fr; }
  .fp-metric:nth-child(3) { grid-column: 1 / span 2; border-left: none; border-top: 1px solid var(--border); padding-top: 12px; margin-top: 4px; }
}

/* ─── ELEGANT THEME REFINEMENTS · scrollbar, focus, selection ─── */
::selection { background: rgba(233, 216, 166, 0.35); color: #fff; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: rgba(10, 16, 36, 0.6); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--cyan), var(--nebula));
  border-radius: 999px;
  border: 2px solid rgba(10, 16, 36, 0.6);
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--champagne), var(--cyan)); }
* { scrollbar-width: thin; scrollbar-color: var(--cyan) rgba(10, 16, 36, 0.6); }

/* Elegant section-num refinement */
.section-num {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-left: 22px;
}
.section-num::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 14px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--champagne));
}

/* Refined buttons — luxe sheen */
.btn-primary {
  background: linear-gradient(135deg, #f4e7c0 0%, #e9d8a6 40%, #d8e2f5 100%);
  color: #1a1530;
  box-shadow: 0 4px 12px rgba(233, 216, 166, 0.18), inset 0 1px 0 rgba(255,255,255,0.4);
}
.btn-primary:hover {
  box-shadow: 0 16px 50px rgba(233, 216, 166, 0.5), inset 0 1px 0 rgba(255,255,255,0.5);
}
.btn-ghost { border-color: var(--border-elegant); }
.btn-ghost:hover { border-color: var(--champagne); color: var(--champagne); }

/* Text gradient elegance */
.text-gradient {
  background: linear-gradient(120deg, var(--champagne) 0%, var(--gold-2) 35%, var(--cyan-2) 70%, var(--champagne) 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: textGradShimmer 8s linear infinite;
}
@keyframes textGradShimmer { 0% { background-position: 0% 50%; } 100% { background-position: 250% 50%; } }

/* Chip elegance */
.chip {
  border-color: var(--border-elegant) !important;
  background: linear-gradient(135deg, rgba(233, 216, 166, 0.06), rgba(90, 150, 255, 0.04)) !important;
}
.chip:hover {
  border-color: var(--champagne) !important;
  color: var(--champagne) !important;
}

/* ─── EASTER EGG · "Is Arif cool?" reward section ─── */
.reward-section {
  position: relative;
  padding: clamp(60px, 8vw, 100px) 0 clamp(40px, 5vw, 60px);
  overflow: hidden;
}
.reward-card {
  position: relative;
  text-align: center;
  padding: clamp(40px, 5vw, 64px) clamp(28px, 4vw, 56px);
  background:
    radial-gradient(circle at 50% 0%, rgba(233, 216, 166, 0.10), transparent 60%),
    radial-gradient(circle at 30% 100%, rgba(142, 109, 214, 0.12), transparent 50%),
    radial-gradient(circle at 70% 100%, rgba(90, 150, 255, 0.10), transparent 50%),
    linear-gradient(135deg, rgba(20, 28, 60, 0.55), rgba(10, 16, 38, 0.7));
  border: 1px solid var(--border-elegant);
  border-radius: 28px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--shadow-luxe);
  overflow: hidden;
}
.reward-confetti {
  position: absolute;
  inset: 0;
  pointer-events: none;
  font-size: 18px;
  color: var(--champagne);
}
.reward-confetti span {
  position: absolute;
  opacity: 0.4;
  animation: rwFloat 12s ease-in-out infinite;
}
.reward-confetti span:nth-child(1) { top: 12%; left: 8%;  animation-delay: 0s;   color: var(--champagne); }
.reward-confetti span:nth-child(2) { top: 22%; right: 12%; animation-delay: 2s;  color: var(--cyan-2); font-size: 22px; }
.reward-confetti span:nth-child(3) { top: 68%; left: 14%;  animation-delay: 4s;  color: var(--pink); font-size: 14px; }
.reward-confetti span:nth-child(4) { top: 82%; right: 8%;  animation-delay: 6s;  color: var(--champagne); }
.reward-confetti span:nth-child(5) { top: 38%; left: 4%;   animation-delay: 8s;  color: var(--cyan); }
.reward-confetti span:nth-child(6) { top: 50%; right: 4%;  animation-delay: 10s; color: var(--champagne); font-size: 20px; }
@keyframes rwFloat {
  0%, 100% { transform: translateY(0) rotate(0); opacity: 0.3; }
  50%      { transform: translateY(-30px) rotate(180deg); opacity: 1; }
}

.reward-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: rgba(233, 216, 166, 0.10);
  border: 1px solid var(--border-elegant);
  border-radius: 999px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--champagne);
  margin-bottom: 22px;
}
.reward-badge-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--champagne);
  box-shadow: 0 0 12px var(--champagne);
  animation: rwBadgePulse 2s ease-in-out infinite;
}
@keyframes rwBadgePulse { 0%, 100% { opacity: 0.5; transform: scale(1); } 50% { opacity: 1; transform: scale(1.3); } }

.reward-title {
  font-family: var(--f-display);
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-bottom: 14px;
  color: var(--text);
}
.reward-sub {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: clamp(15px, 1.6vw, 18px);
  color: var(--text-mute);
  max-width: 540px;
  margin: 0 auto 32px;
  line-height: 1.6;
}

.reward-choice {
  position: relative;
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
  min-height: 60px;
}
.reward-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 30px;
  border-radius: 999px;
  font-family: var(--f-display);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s, border-color 0.3s, box-shadow 0.4s;
  will-change: transform;
}
.reward-btn-icon { font-size: 18px; }
.reward-btn-yes {
  background: linear-gradient(135deg, #f4e7c0 0%, #e9d8a6 40%, #d8e2f5 100%);
  color: #1a1530;
  border: none;
  box-shadow: 0 4px 14px rgba(233, 216, 166, 0.25);
}
.reward-btn-yes:hover {
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 20px 50px rgba(233, 216, 166, 0.5);
}
.reward-btn-no {
  background: rgba(20, 28, 60, 0.7);
  color: var(--text-mute);
  border: 1px solid var(--border-strong);
}
.reward-btn-no.dodging {
  /* Smooth dodge transitions */
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s, border-color 0.3s;
}

.reward-hint {
  margin-top: 24px;
  font-family: var(--f-mono);
  font-size: 11.5px;
  letter-spacing: 0.05em;
  color: var(--text-dim);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.reward-hint em { color: var(--champagne); font-style: italic; }
.reward-hint-icon { font-size: 14px; }

/* Reward "you found me!" mode after Yes is chosen */
.reward-card.celebrated .reward-choice,
.reward-card.celebrated .reward-hint { display: none; }
.reward-card.celebrated::after {
  content: '✦ Thanks for being awesome ✦';
  display: block;
  margin-top: 12px;
  font-family: var(--f-serif);
  font-style: italic;
  font-size: clamp(18px, 2vw, 24px);
  color: var(--champagne);
  text-shadow: 0 0 18px rgba(233, 216, 166, 0.5);
  animation: rwReveal 0.8s var(--ease-back);
}
@keyframes rwReveal { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

/* ─── ALIEN CAT DANCE MODAL ─── */
.alien-cat-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  cursor: none; /* keep custom cursor working */
}
/* Boost the custom cursor's z-index above the modal */
.alien-cat-modal.open ~ .cursor,
.alien-cat-modal.open ~ .cursor-dot { z-index: 10001 !important; opacity: 1 !important; }
.cursor, .cursor-dot { z-index: 99999 !important; }
.alien-cat-modal.open { display: flex; animation: acFade 0.4s var(--ease) both; }
@keyframes acFade { from { opacity: 0; } to { opacity: 1; } }

.alien-cat-backdrop {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(20, 12, 50, 0.85), rgba(0, 0, 0, 0.95));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.alien-cat-stage {
  position: relative;
  width: min(440px, 100%);
  padding: 36px 28px 30px;
  text-align: center;
  background:
    radial-gradient(circle at 50% 0%, rgba(142, 109, 214, 0.22), transparent 60%),
    linear-gradient(135deg, rgba(20, 28, 60, 0.95), rgba(10, 12, 30, 0.95));
  border: 1px solid var(--champagne);
  border-radius: 26px;
  box-shadow: 0 30px 90px rgba(0,0,0,0.6), 0 0 0 1px rgba(233, 216, 166, 0.25), 0 0 80px rgba(142, 109, 214, 0.35);
  animation: acPop 0.6s cubic-bezier(0.34, 1.7, 0.64, 1) both;
  overflow: hidden;
}
@keyframes acPop {
  0%   { transform: scale(0.5) rotate(-8deg); opacity: 0; }
  60%  { transform: scale(1.05) rotate(2deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

.alien-cat-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.alien-cat-bg .ac-star {
  position: absolute;
  width: 2px; height: 2px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0 4px #fff;
  animation: acTwinkle 3s ease-in-out infinite;
}
.alien-cat-bg .ac-star:nth-child(1) { top: 10%; left: 15%; animation-delay: 0s; }
.alien-cat-bg .ac-star:nth-child(2) { top: 20%; left: 80%; animation-delay: 0.5s; }
.alien-cat-bg .ac-star:nth-child(3) { top: 35%; left: 25%; animation-delay: 1s; }
.alien-cat-bg .ac-star:nth-child(4) { top: 55%; left: 88%; animation-delay: 1.5s; width: 3px; height: 3px; }
.alien-cat-bg .ac-star:nth-child(5) { top: 70%; left: 12%; animation-delay: 2s; }
.alien-cat-bg .ac-star:nth-child(6) { top: 85%; left: 70%; animation-delay: 2.5s; }
.alien-cat-bg .ac-star:nth-child(7) { top: 15%; left: 50%; animation-delay: 0.8s; width: 3px; height: 3px; }
.alien-cat-bg .ac-star:nth-child(8) { top: 65%; left: 45%; animation-delay: 1.8s; }
.alien-cat-bg .ac-star:nth-child(9) { top: 90%; left: 30%; animation-delay: 0.3s; }
@keyframes acTwinkle {
  0%, 100% { opacity: 0.2; transform: scale(0.8); }
  50%      { opacity: 1;   transform: scale(1.4); }
}

.alien-cat-close {
  position: absolute;
  top: 12px; right: 12px;
  width: 36px; height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--text-mute);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border);
  z-index: 2;
  transition: background 0.3s, color 0.3s;
}
.alien-cat-close:hover { background: rgba(255, 255, 255, 0.14); color: var(--champagne); }

.alien-cat-title {
  font-family: var(--f-display);
  font-size: clamp(18px, 2.4vw, 24px);
  font-weight: 600;
  color: var(--champagne);
  margin-bottom: 14px;
  letter-spacing: 0.01em;
  text-shadow: 0 0 14px rgba(233, 216, 166, 0.35);
  position: relative;
  z-index: 1;
}
.alien-cat-title .ac-sparkle {
  display: inline-block;
  animation: acSparkleSpin 4s linear infinite;
  margin: 0 6px;
  font-size: 0.85em;
}
@keyframes acSparkleSpin { to { transform: rotate(360deg); } }

.alien-cat-figure {
  position: relative;
  width: 240px;
  height: 280px;
  margin: 0 auto 18px;
  filter: drop-shadow(0 14px 28px rgba(142, 109, 214, 0.55))
          drop-shadow(0 0 30px rgba(233, 216, 166, 0.25));
  animation: acDance 0.8s ease-in-out infinite alternate;
  z-index: 1;
}
@keyframes acDance {
  0%   { transform: translateY(0) rotate(-3deg); }
  50%  { transform: translateY(-8px) rotate(0deg); }
  100% { transform: translateY(0) rotate(3deg); }
}
.alien-cat-figure svg { width: 100%; height: 100%; }

/* SVG element animations — make the cat actually dance */
.ac-head {
  transform-origin: 120px 110px;
  animation: acHeadBob 0.8s ease-in-out infinite alternate;
}
@keyframes acHeadBob {
  0%   { transform: translateY(0) rotate(-4deg); }
  100% { transform: translateY(-3px) rotate(4deg); }
}
.ac-arm-l { transform-origin: 78px 180px; animation: acArmL 0.4s ease-in-out infinite alternate; }
.ac-arm-r { transform-origin: 162px 180px; animation: acArmR 0.4s ease-in-out infinite alternate; }
@keyframes acArmL {
  0% { transform: rotate(-10deg); }
  100% { transform: rotate(18deg); }
}
@keyframes acArmR {
  0% { transform: rotate(10deg); }
  100% { transform: rotate(-18deg); }
}
.ac-leg-l { transform-origin: 92px 240px; animation: acLegL 0.4s ease-in-out infinite alternate; }
.ac-leg-r { transform-origin: 148px 240px; animation: acLegR 0.4s ease-in-out infinite alternate; }
@keyframes acLegL { 0% { transform: translateY(0); } 100% { transform: translateY(-4px); } }
@keyframes acLegR { 0% { transform: translateY(-4px); } 100% { transform: translateY(0); } }
.ac-tail {
  transform-origin: 175px 195px;
  animation: acTail 1.2s ease-in-out infinite alternate;
}
@keyframes acTail { 0% { transform: rotate(-10deg); } 100% { transform: rotate(15deg); } }
.ac-antenna-l { transform-origin: 95px 60px; animation: acAntennaL 1.4s ease-in-out infinite alternate; }
.ac-antenna-r { transform-origin: 145px 60px; animation: acAntennaR 1.4s ease-in-out infinite alternate; }
@keyframes acAntennaL { 0% { transform: rotate(-3deg); } 100% { transform: rotate(6deg); } }
@keyframes acAntennaR { 0% { transform: rotate(3deg); } 100% { transform: rotate(-6deg); } }
.ac-sparkles text { animation: acSparkleTwinkle 2s ease-in-out infinite alternate; }
.ac-sparkles text:nth-child(2) { animation-delay: 0.3s; }
.ac-sparkles text:nth-child(3) { animation-delay: 0.6s; }
.ac-sparkles text:nth-child(4) { animation-delay: 0.9s; }
.ac-sparkles text:nth-child(5) { animation-delay: 1.2s; }
.ac-sparkles text:nth-child(6) { animation-delay: 1.5s; }
@keyframes acSparkleTwinkle { 0% { opacity: 0.3; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1.2); } }

.alien-cat-confetti {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.ac-confetti-piece {
  position: absolute;
  top: -10px;
  width: 8px; height: 12px;
  border-radius: 2px;
  animation: acConfettiFall 3s linear forwards;
}
@keyframes acConfettiFall {
  0%   { transform: translateY(0) rotate(0); opacity: 1; }
  100% { transform: translateY(500px) rotate(720deg); opacity: 0; }
}

.alien-cat-message {
  font-family: var(--f-sans);
  font-size: 14px;
  color: var(--text);
  line-height: 1.6;
  margin-bottom: 18px;
  position: relative;
  z-index: 1;
}
.alien-cat-message strong { color: var(--champagne); }
.alien-cat-actions { position: relative; z-index: 1; }
.alien-cat-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 26px;
  border-radius: 999px;
  border: none;
  background: linear-gradient(135deg, #f4e7c0, #e9d8a6, #d8e2f5);
  color: #1a1530;
  font-family: var(--f-display);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.3s var(--ease-back), box-shadow 0.4s;
  box-shadow: 0 8px 20px rgba(233, 216, 166, 0.3);
}
.alien-cat-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(233, 216, 166, 0.5); }
.alien-cat-actions { display: flex; gap: 10px; justify-content: center; align-items: center; flex-wrap: wrap; }
.alien-cat-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  border-radius: 999px;
  border: 1px solid rgba(255, 143, 191, 0.55);
  background: rgba(255, 143, 191, 0.10);
  color: #ffd6e8;
  font-family: var(--f-display);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.3s var(--ease-back), box-shadow 0.4s, background 0.3s;
}
.alien-cat-btn-ghost:hover { transform: translateY(-2px); background: rgba(255, 143, 191, 0.2); box-shadow: 0 12px 30px rgba(255, 143, 191, 0.35); }
.alien-cat-btn-ghost.reading { background: rgba(255, 143, 191, 0.28); border-color: rgba(255, 143, 191, 0.9); }
/* Word-by-word highlight while the cosmic cat "reads" in meows */
.alien-cat-message .meow-word { transition: color .15s ease, text-shadow .15s ease; border-radius: 4px; }
.alien-cat-message .meow-word.meow-active {
  color: #fff;
  text-shadow: 0 0 14px rgba(255, 143, 191, 0.95), 0 0 4px rgba(255, 255, 255, 0.8);
}

/* ─── PERFORMANCE HINTS — gate heavy effects on small/low-power devices ─── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .hero-quote .hq-orbit,
  .hero-quote .hq-glow,
  .reward-confetti,
  .ac-arm-l, .ac-arm-r, .ac-leg-l, .ac-leg-r, .ac-tail, .ac-head { animation: none !important; }
}

/* Lower-end device gates — remove blur/backdrops on weak GPUs */
@media (max-width: 600px) {
  .hero-quote { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .reward-card { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
}

/* Class toggled by JS when low-power device detected */
body.low-power .prism-bg,
body.low-power .ufo-fleet,
body.low-power .starfield-layer { display: none; }
body.low-power *:not(input):not(textarea):not(button) {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
body.low-power .reward-confetti,
body.low-power .hero-quote .hq-orbit,
body.low-power .hero-quote .hq-glow,
body.low-power .fp-metrics::before { display: none; }

/* ============================================================================
   POLISH PASS · v2026.05.27 — FIXES & STARRY NIGHT THEME
   ============================================================================ */

/* ─── HERO QUOTE FIX — attribution moved INTO the card (no clipping) ─── */
.hero-quote {
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  padding: clamp(20px, 2.8vw, 30px) clamp(24px, 3.5vw, 38px) clamp(22px, 3vw, 32px);
  margin-bottom: 38px;
  overflow: hidden;
}
.hero-quote .hq-body {
  display: flex;
  align-items: flex-start;
  gap: clamp(8px, 1.5vw, 16px);
}
.hero-quote .hq-attribution-top {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--f-mono);
  font-size: 9.5px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--champagne);
  margin: 0 auto;
  padding-bottom: 6px;
  border-bottom: 1px dashed rgba(233, 216, 166, 0.2);
  font-style: normal;
}
.hero-quote .hq-attribution-top .hq-line {
  width: 24px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--champagne), transparent);
}
.hero-quote .hq-attribution { display: none; } /* hide old attribution */
.hero-quote .hq-mark.left { align-self: flex-start; margin-top: 0; }
.hero-quote .hq-mark.right { align-self: flex-end; margin-bottom: 0; }

@media (max-width: 600px) {
  .hero-quote .hq-attribution-top { font-size: 8px; gap: 6px; }
  .hero-quote .hq-attribution-top .hq-line { width: 14px; }
}

/* ─── ABOUT CARDS — elegant glass redesign (replaces glitchy electric border) ─── */
.ec-card {
  position: relative;
  background:
    radial-gradient(circle at 0% 0%, rgba(233, 216, 166, 0.06), transparent 50%),
    radial-gradient(circle at 100% 100%, rgba(90, 150, 255, 0.08), transparent 55%),
    linear-gradient(135deg, rgba(18, 26, 56, 0.7), rgba(10, 16, 38, 0.85));
  border: 1px solid var(--border-elegant);
  border-radius: 18px;
  padding: 28px 26px;
  overflow: hidden;
  transition: transform 0.5s var(--ease), border-color 0.4s var(--ease), box-shadow 0.5s var(--ease);
  isolation: isolate;
}
.ec-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 18px;
  padding: 1px;
  background: linear-gradient(135deg, rgba(233, 216, 166, 0.35), transparent 35%, transparent 65%, rgba(90, 150, 255, 0.25));
  -webkit-mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
  mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.5s var(--ease);
  pointer-events: none;
}
.ec-card:hover {
  transform: translateY(-4px);
  border-color: rgba(233, 216, 166, 0.45);
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.35),
    0 16px 60px rgba(233, 216, 166, 0.12);
}
.ec-card:hover::before { opacity: 1; }

/* Replace electric-border + spark with subtle shimmer that sweeps on hover */
.ec-shimmer {
  position: absolute;
  inset: 0;
  border-radius: 18px;
  background: linear-gradient(120deg, transparent 30%, rgba(233, 216, 166, 0.12) 50%, transparent 70%);
  background-size: 200% 100%;
  background-position: -100% 0;
  pointer-events: none;
  transition: background-position 0.9s var(--ease);
  z-index: 0;
}
.ec-card:hover .ec-shimmer { background-position: 200% 0; }

/* Hide the old broken electric-border decoration if anything still references it */
.electric-border,
.electric-frame,
.electric-spark { display: none !important; }

.ec-inner {
  position: relative;
  z-index: 1;
}
.ec-icon {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(233, 216, 166, 0.18), rgba(90, 150, 255, 0.12));
  border: 1px solid var(--border-elegant);
  color: var(--champagne);
  margin-bottom: 18px;
}
.ec-icon svg { width: 22px; height: 22px; }
.ec-card h3 {
  font-family: var(--f-display);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 10px;
  color: var(--text);
}
.ec-card p {
  font-size: 13.5px;
  color: var(--text-mute);
  line-height: 1.6;
}

/* ─── STARRY NIGHT ANIMATED BACKGROUND (replaces heavy prism) ─── */
/* Subtle, non-distracting layered backdrop: deep gradient + drifting nebula + twinkling stars */
.starry-night-bg {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 18% 8%, rgba(86, 58, 150, 0.32), transparent 52%),
    radial-gradient(ellipse at 82% 82%, rgba(34, 70, 140, 0.34), transparent 56%),
    radial-gradient(ellipse at 50% 46%, rgba(24, 34, 82, 0.28), transparent 72%),
    radial-gradient(ellipse 120% 60% at 50% 122%, rgba(120, 90, 200, 0.12), transparent 60%),
    linear-gradient(180deg, #02040f 0%, #050a22 48%, #03061a 100%);
}
.starry-night-bg::before,
.starry-night-bg::after {
  content: '';
  position: absolute;
  inset: -10%;
  background-repeat: repeat;
  opacity: 0.55;
  will-change: transform;
}
/* Layer 1: tiny dense stars, slow drift */
.starry-night-bg::before {
  background-image:
    radial-gradient(1px 1px at 25% 30%, rgba(255,255,255,0.85), transparent 60%),
    radial-gradient(1px 1px at 70% 70%, rgba(200,220,255,0.75), transparent 60%),
    radial-gradient(1px 1px at 50% 90%, rgba(255,240,200,0.7), transparent 60%),
    radial-gradient(1px 1px at 15% 60%, rgba(180,210,255,0.8), transparent 60%),
    radial-gradient(1px 1px at 90% 20%, rgba(255,255,255,0.7), transparent 60%),
    radial-gradient(1px 1px at 45% 40%, rgba(220,200,255,0.65), transparent 60%),
    radial-gradient(1px 1px at 80% 50%, rgba(200,200,255,0.7), transparent 60%),
    radial-gradient(1px 1px at 35% 15%, rgba(255,255,255,0.6), transparent 60%);
  background-size: 280px 280px;
  animation: snDrift1 180s linear infinite;
}
/* Layer 2: larger sparkles, twinkling */
.starry-night-bg::after {
  background-image:
    radial-gradient(2px 2px at 18% 25%, rgba(233,216,166,0.9), transparent 60%),
    radial-gradient(1.5px 1.5px at 78% 60%, rgba(255,255,255,0.85), transparent 60%),
    radial-gradient(2px 2px at 55% 80%, rgba(170,200,255,0.8), transparent 60%),
    radial-gradient(1.5px 1.5px at 30% 50%, rgba(255,255,255,0.7), transparent 60%);
  background-size: 480px 480px;
  animation: snDrift2 240s linear infinite, snTwinkle 4s ease-in-out infinite;
  opacity: 0.45;
}
@keyframes snDrift1 {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-280px, -140px, 0); }
}
@keyframes snDrift2 {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(240px, -120px, 0); }
}
@keyframes snTwinkle {
  0%, 100% { filter: brightness(1); }
  50%      { filter: brightness(1.6); }
}

/* Slow nebula glow drift — gives gentle motion without distracting */
.starry-night-nebula {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 42% at var(--nx, 28%) var(--ny, 36%), rgba(142, 109, 214, 0.22), transparent 60%),
    radial-gradient(ellipse 52% 40% at var(--nx2, 74%) var(--ny2, 68%), rgba(90, 150, 255, 0.18), transparent 60%),
    radial-gradient(ellipse 72% 30% at 55% 80%, rgba(233, 216, 166, 0.07), transparent 65%),
    radial-gradient(circle at 88% 14%, rgba(127, 233, 255, 0.10), transparent 46%);
  filter: blur(48px);
  animation: snNebula 60s ease-in-out infinite;
}
@keyframes snNebula {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.7; }
  33%      { transform: translate(40px, -30px) scale(1.1); opacity: 1; }
  66%      { transform: translate(-30px, 40px) scale(0.95); opacity: 0.85; }
}

/* When starry-night is active, fade the prism + heavy backgrounds */
body.starry-night-active .prism-bg {
  opacity: 0.15;
  transition: opacity 1.5s var(--ease);
}
body.starry-night-active .prism-grid,
body.starry-night-active .prism-noise { display: none; }

/* Disable starry-night entirely on low power */
body.low-power .starry-night-bg { display: none; }
@media (prefers-reduced-motion: reduce) {
  .starry-night-bg::before,
  .starry-night-bg::after,
  .starry-night-nebula { animation: none !important; }
}

/* ─── ALIEN CAT GIF + always-visible emoji fallback ─── */
.alien-cat-figure {
  position: relative;
  width: 240px;
  height: 240px;
  margin: 0 auto 18px;
  border-radius: 20px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 50%, rgba(142, 109, 214, 0.35), rgba(80, 50, 160, 0.18) 60%, transparent 80%);
  filter: drop-shadow(0 14px 28px rgba(142, 109, 214, 0.55))
          drop-shadow(0 0 30px rgba(233, 216, 166, 0.25));
  animation: acBounce 0.7s ease-in-out infinite alternate;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
/* Emoji fallback — sits underneath; guarantees something is always shown */
.alien-cat-emoji {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
.alien-cat-emoji .ace-cat {
  font-size: 140px;
  line-height: 1;
  display: inline-block;
  animation: acCatDance 0.5s ease-in-out infinite alternate;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,0.4));
}
@keyframes acCatDance {
  0%   { transform: translateY(0) rotate(-8deg) scale(1); }
  100% { transform: translateY(-12px) rotate(8deg) scale(1.05); }
}
.alien-cat-emoji .ace-music {
  position: absolute;
  font-size: 32px;
  color: var(--champagne);
  text-shadow: 0 0 12px rgba(233, 216, 166, 0.6);
  animation: aceMusicFloat 2.4s ease-in-out infinite;
}
.alien-cat-emoji .ace-m1 { top: 20%; left: 14%; animation-delay: 0s; }
.alien-cat-emoji .ace-m2 { top: 14%; right: 18%; animation-delay: 0.6s; color: var(--cyan-2); }
.alien-cat-emoji .ace-m3 { bottom: 22%; right: 22%; animation-delay: 1.2s; color: var(--pink); font-size: 22px; }
@keyframes aceMusicFloat {
  0%   { transform: translateY(8px) rotate(-10deg); opacity: 0.2; }
  50%  { transform: translateY(-12px) rotate(8deg); opacity: 1; }
  100% { transform: translateY(-30px) rotate(-12deg); opacity: 0; }
}

.alien-cat-figure img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 20px;
  display: block;
  z-index: 2; /* sits ABOVE the emoji when loaded */
}
@keyframes acBounce {
  0%   { transform: translateY(0) rotate(-2deg); }
  100% { transform: translateY(-6px) rotate(2deg); }
}

/* ─── CONTACT FORM STATUS — better readability ─── */
.form-status a {
  color: var(--champagne);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.form-status.pending { line-height: 1.55; }

/* ─── PERFORMANCE — disable expensive backdrop-filter on cards by default ─── */
/* `backdrop-filter` triggers per-frame GPU compositing for every blurred area
   and is one of the biggest perf hits on this site. Limit it to a few key surfaces. */
@supports (backdrop-filter: blur(10px)) {
  /* Keep blur only on the most important containers */
  .gooey-nav,
  .music-player,
  .bot-panel,
  .alien-cat-stage {
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }
  /* Drop blur from many cards — visually identical at this opacity */
  .fp-card,
  .ec-card,
  .model-stage,
  .contact-card-mini,
  .highlight-card {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

/* Promote frequently-animated elements to their own GPU layer (prevents layout thrash) */
.lanyard-pivot,
.cursor,
.cursor-dot,
.fuzzy-canvas,
.starry-night-bg::before,
.starry-night-bg::after { will-change: transform; }

/* When tab hidden, freeze every animation */
body.tab-hidden *,
body.tab-hidden *::before,
body.tab-hidden *::after {
  animation-play-state: paused !important;
}

/* ============================================================================
   MOBILE LANYARD — replace ID card with full portrait photo
   ============================================================================ */
@media (max-width: 768px) {
  /* Hide the entire lanyard scaffolding (strap, clip, ID card chrome) */
  .lanyard-strap,
  .lanyard-clip,
  .lanyard-anchor,
  .lanyard-hint,
  .id-card .id-header,
  .id-card .id-info,
  .id-card .id-footer,
  .id-card .id-photo-scan,
  .id-card .id-corner,
  .id-card .id-shine,
  .id-card .id-hologram {
    display: none !important;
  }
  /* Make the lanyard area just show the full portrait photo */
  .lanyard {
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    perspective: none;
  }
  .lanyard-pivot { position: relative !important; inset: auto !important; }
  .id-card {
    position: relative;
    width: 88%;
    max-width: 320px;
    margin: 0 auto;
    aspect-ratio: 3 / 4;
    background: transparent !important;
    border: none !important;
    box-shadow: 0 20px 50px rgba(90, 150, 255, 0.25), 0 0 0 1px rgba(233, 216, 166, 0.25);
    border-radius: 20px;
    overflow: hidden;
  }
  .id-card-inner, .id-face {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    height: 100%;
  }
  .id-photo-wrap, .id-photo {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 20px;
  }
  .id-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
    display: block;
  }
  .id-photo-glow {
    inset: -20px !important;
    border-radius: 30px;
    filter: blur(20px);
    opacity: 0.6;
  }
}

/* ============================================================================
   MOBILE NAV REDESIGN — more visually engaging slide-in panel
   ============================================================================ */
@media (max-width: 900px) {
  /* Re-style the gooey-list when mobile-open is set */
  .gooey-nav.mobile-open .gooey-wrap {
    display: block !important;
    position: fixed;
    top: 0; right: 0;
    width: min(320px, 86vw);
    height: 100vh;
    background:
      radial-gradient(circle at 50% 0%, rgba(233, 216, 166, 0.10), transparent 60%),
      linear-gradient(180deg, rgba(10, 14, 36, 0.98), rgba(3, 6, 26, 0.98));
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-left: 1px solid var(--border-elegant);
    box-shadow: -20px 0 60px rgba(0, 0, 0, 0.5);
    padding: 100px 28px 40px;
    z-index: 95;
    animation: mobileSlideIn 0.45s cubic-bezier(0.34, 1.4, 0.6, 1) both;
    filter: none !important;
  }
  @keyframes mobileSlideIn {
    from { transform: translateX(100%); opacity: 0; }
    to   { transform: translateX(0); opacity: 1; }
  }
  .gooey-nav.mobile-open .gooey-list {
    display: flex !important;
    flex-direction: column;
    gap: 8px;
    list-style: none;
    padding: 0;
  }
  .gooey-nav.mobile-open .gooey-item {
    display: flex !important;
    align-items: center;
    gap: 12px;
    padding: 14px 18px !important;
    background: rgba(20, 28, 60, 0.5);
    border: 1px solid var(--border-elegant);
    border-radius: 12px;
    font-family: var(--f-display);
    font-size: 16px;
    font-weight: 500;
    color: var(--text);
    cursor: pointer;
    transition: background 0.3s var(--ease), transform 0.3s var(--ease), border-color 0.3s var(--ease);
    position: relative;
    overflow: hidden;
  }
  .gooey-nav.mobile-open .gooey-item::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(233, 216, 166, 0.15), rgba(90, 150, 255, 0.10));
    opacity: 0;
    transition: opacity 0.3s var(--ease);
  }
  .gooey-nav.mobile-open .gooey-item:hover::before,
  .gooey-nav.mobile-open .gooey-item.active::before { opacity: 1; }
  .gooey-nav.mobile-open .gooey-item:hover,
  .gooey-nav.mobile-open .gooey-item.active {
    border-color: var(--champagne);
    transform: translateX(-4px);
  }
  .gooey-nav.mobile-open .gooey-item.active span {
    color: var(--champagne) !important;
    text-shadow: 0 0 12px rgba(233, 216, 166, 0.6) !important;
  }
  .gooey-nav.mobile-open .gooey-item span { position: relative; z-index: 1; }
  /* Hide the gooey blob on mobile open */
  .gooey-nav.mobile-open .gooey-blob { display: none !important; }
  /* Backdrop overlay */
  .gooey-nav.mobile-open::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(3, 6, 26, 0.7);
    backdrop-filter: blur(4px);
    z-index: 94;
    animation: mobileBackdropFade 0.45s ease both;
  }
  @keyframes mobileBackdropFade {
    from { opacity: 0; } to { opacity: 1; }
  }
}

/* ============================================================================
   PERFORMANCE — additional aggressive optimizations
   ============================================================================ */
/* Avoid expensive box-shadow recalculation on scroll */
.fp-card, .ec-card, .dp-card, .contact-card-mini {
  transform: translateZ(0); /* own layer */
  contain: layout style paint;
}
/* Limit background paint area */
.starry-night-bg,
.prism-bg,
.ufo-fleet,
.starfield-layer {
  contain: strict;
}
/* Reduce paint cost of large animated text */
.curved-loop-text,
.fuzzy-canvas { contain: layout paint; }
/* On <900px screens, kill the heaviest decorative animations */
@media (max-width: 900px) {
  .starry-night-bg::after { display: none; } /* second star layer */
  .fp-metrics::before,
  .hero-quote .hq-orbit,
  .hero-quote .hq-glow { display: none; }
  .reward-confetti { display: none; }
}

/* ============================================================================
   RESPONSIVE POLISH — tighter breakpoints + mobile tidy-up
   ============================================================================ */
@media (max-width: 1024px) {
  .hero-inner { grid-template-columns: 1fr; gap: 40px; padding: 60px 0; }
  .hero-right { min-height: 460px; }
  .fp-large { flex-direction: column !important; }
  .fp-large .fp-visual { flex: 1 !important; margin-right: 0 !important; margin-bottom: 18px !important; max-height: 240px !important; }
  .deep-dive .dd-domain { grid-template-columns: 1fr; gap: 18px; padding: 26px; }
  .highlight-card { grid-template-columns: 1fr; gap: 28px; }
  .highlight-right { display: none; }
}

@media (max-width: 768px) {
  .container { padding: 0 18px; }
  .section { padding: 60px 0; }
  .section-title { font-size: clamp(28px, 7vw, 42px); }
  .hero-stats { gap: 14px; }
  .stat-divider { display: none; }
  .stat { flex: 1 1 30%; min-width: 90px; }
  /* Hero CTAs full-width stacked */
  .hero-ctas { flex-direction: column; align-items: stretch; }
  .hero-ctas .btn { justify-content: center; }
  /* Featured projects single column */
  .fp-grid { grid-template-columns: 1fr !important; }
  .fp-large { grid-column: 1 !important; }
  /* About — back to single column on mobile, hide cards */
  .about-grid { grid-template-columns: 1fr !important; }
  .about-text { display: block !important; }
  .about-text > * { grid-column: auto !important; grid-row: auto !important; }
  .about-cards { display: none !important; }
  /* Contact form stacking */
  .contact-layout { grid-template-columns: 1fr; gap: 32px; }
  .form-row { grid-template-columns: 1fr; }
  /* Skills grid single column */
  .skills-grid { grid-template-columns: 1fr; }
  /* Timeline tighter */
  .tl-item { grid-template-columns: 1fr; gap: 12px; padding-left: 32px; }
  .timeline-line { left: 12px; }
  .tl-dot { left: 12px; }
  /* Music player full-width with smaller info */
  .music-player { left: 12px; right: 12px; bottom: 12px; padding: 8px 12px; }
  .music-info { display: none; }
  .elastic-track { width: 80px; }
  /* Bot launcher smaller */
  .bot-launcher { width: 52px; height: 52px; right: 16px; bottom: 80px; }
  .bot-panel { right: 12px; bottom: 144px; width: calc(100% - 24px); max-width: 360px; }
  /* Game launcher smaller and tucked away */
  .game-launcher, .wt-launcher, .ss-launcher {
    right: 16px; bottom: 144px; width: 44px; height: 44px;
  }
  /* Backroom door smaller on mobile */
  .backroom-door { width: 42px; height: 60px; bottom: 20px; left: 20px; }
  /* Resume nav tighter */
  .resume-nav { padding: 10px 14px; flex-wrap: wrap; gap: 8px; }
  .resume-nav-actions { gap: 8px; flex-wrap: wrap; }
  .resume-nav-link { font-size: 12px; }
  /* CV sheet padding tighter */
  .cv-sheet { padding: 22px 18px; }
  .cv-grid { grid-template-columns: 1fr; gap: 22px; }
  .cv-top { grid-template-columns: 1fr; }
  /* Featured Projects — bigger touch targets */
  .fp-card { padding: 20px; }
  /* Reward section tighter */
  .reward-card { padding: 32px 22px; }
  .reward-choice { flex-direction: column; gap: 12px; align-items: stretch; }
  .reward-btn { width: 100%; justify-content: center; }
}

@media (max-width: 480px) {
  /* Keep the status dot aligned to the first line of the wrapping text (no orphan dot on its own row) */
  .hero-meta { font-size: 11px; align-items: flex-start; gap: 8px; border-radius: 14px; padding: 8px 13px; line-height: 1.45; max-width: 100%; }
  .hero-meta .status-dot { flex: 0 0 auto; margin-top: 4px; }
  .hero-quote { padding: 18px 16px 22px; gap: 8px; }
  .hero-quote .hq-mark { width: 22px; height: 22px; }
  .hero-quote .hq-text { font-size: 15px; }
  .fp-metrics { grid-template-columns: 1fr 1fr; }
  .fp-metric:nth-child(3) { grid-column: 1 / span 2; }
  /* Bot panel takes more screen */
  .bot-panel { max-width: 100%; }
  /* Featured cards more compact */
  .fp-name { font-size: 18px; }
  .fp-desc { font-size: 13px; }
  /* Easter egg buttons */
  .reward-title { font-size: 22px; }
}

/* Touch-device tweaks */
@media (hover: none) and (pointer: coarse) {
  /* Disable expensive hover-triggered effects */
  .fp-card:hover { transform: none; }
  .ec-card:hover { transform: none; }
  .dd-domain:hover { transform: none; box-shadow: var(--shadow-elegant); }
  /* Larger touch targets */
  .btn, .nav-toggle, .gooey-item { min-height: 44px; }
  /* Custom cursor off on touch */
  .cursor, .cursor-dot { display: none !important; }
  body { cursor: auto; }
}

/* Landscape phone tweaks */
@media (max-height: 480px) and (orientation: landscape) {
  .hero { min-height: auto; padding: 80px 0; }
  .lanyard { height: 320px; margin-top: 0; }
  .loader-am-mark { width: 80px; }
}

/* ============================================================================
   HD + SMOOTH RENDERING PASS
   ============================================================================ */

/* Crisp text everywhere — best-in-class font rendering */
html, body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  font-variant-ligatures: contextual;
}

/* HD images — use crisp scaling for retina displays */
img, svg {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}
img.fp-icon, .id-photo img { image-rendering: auto; } /* photographs use smooth */

/* GPU-accelerate all transform/animated elements — no layout thrash */
.cursor, .cursor-dot,
.gooey-blob,
.lanyard-pivot,
.id-card, .id-card-inner,
.fuzzy-canvas,
.cg-stage, .cg-item,
.ufo-sprite,
.bot-launcher, .bot-panel,
.music-player,
.curved-loop-svg,
.curved-loop-text,
.alien-cat-figure,
.starry-night-bg::before,
.starry-night-bg::after,
.starry-night-nebula,
.fp-card, .ec-card, .dp-card,
.reward-btn-no,
.btn, .btn-primary, .btn-ghost {
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Crisp animations — smoother easing + better timing */
* {
  -webkit-tap-highlight-color: transparent;
}

/* Smooth marquee — GPU layer + linear timing, no jitter */
.curved-loop-svg {
  width: 100%;
  height: auto;
  display: block;
  will-change: transform;
  transform: translateZ(0);
  shape-rendering: geometricPrecision;
  text-rendering: geometricPrecision;
}
.curved-loop-text {
  shape-rendering: geometricPrecision;
}

/* Animations get smooth GPU compositing — never touch layout */
@media (prefers-reduced-motion: no-preference) {
  .reveal { transform: translate3d(0, 30px, 0); will-change: transform, opacity; }
  .reveal.in { transform: translate3d(0, 0, 0); will-change: auto; }
}

/* HD scrollbar — slimmer, more polished */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--cyan), var(--champagne));
  border-radius: 8px;
  border: 1px solid rgba(10, 16, 36, 0.6);
}

/* SVG icons — pin to integer pixels for crisp edges */
svg [stroke] { vector-effect: non-scaling-stroke; }

/* ─── Highlight section CTAs — tidy flex row with consistent sizing ─── */
.highlight-ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
}
.highlight-ctas .btn {
  padding: 13px 22px;
  font-size: 13.5px;
  white-space: nowrap;
}
.highlight-ctas .btn-large { padding: 14px 26px; font-size: 14px; }
@media (max-width: 540px) {
  .highlight-ctas { flex-direction: column; align-items: stretch; }
  .highlight-ctas .btn { justify-content: center; }
}

/* ============================================================================
   v2026.05.27.3 · NEW PAGES + GALLERY MODAL + STARDUST + BOT POLISH
   ============================================================================ */

/* ─── CIRCULAR GALLERY click affordance — pinned to the gallery STAGE (not items)
       so it doesn't break the 3D positioning of the rotating cards ─── */
.cg-item { cursor: pointer; }
.cg-click-hint {
  position: absolute;
  top: -36px;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 12px;
  background: linear-gradient(135deg, var(--champagne), var(--gold-2));
  color: #1a1530;
  font-family: var(--f-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-radius: 999px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
  box-shadow: 0 6px 20px rgba(233, 216, 166, 0.4);
  z-index: 5;
  /* Hide individual hint chips — we use a single global hint above gallery */
  display: none;
}

/* ─── FOLDER CLICKABLE INDICATOR ─── */
.folder {
  position: relative;
  cursor: pointer;
}
.folder::after {
  content: '✦ Click to open ✦';
  position: absolute;
  bottom: -28px;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 12px;
  background: linear-gradient(135deg, var(--champagne), var(--gold-2));
  color: #1a1530;
  font-family: var(--f-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-radius: 999px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
  box-shadow: 0 6px 20px rgba(233, 216, 166, 0.45);
  z-index: 5;
}
.folder:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(-4px);
}
/* A single hand hint travels across and taps EACH folder in turn (positioned by projects-page.js).
   Robust to the auto-fit grid reflow because the script reads live folder positions. */
.folder-hand {
  position: absolute;
  top: 0; left: 0;
  font-size: 30px;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5));
  pointer-events: none;
  z-index: 8;
  opacity: 0;
  transform: translate(-50%, 0);
  transition: left .7s cubic-bezier(0.5, 0, 0.2, 1), top .7s cubic-bezier(0.5, 0, 0.2, 1), opacity .4s ease;
  will-change: left, top;
}
.folder-hand.tap { animation: folderHandTap 0.9s ease-in-out; }
@keyframes folderHandTap {
  0%   { transform: translate(-50%, -14px) rotate(-8deg) scale(1); }
  40%  { transform: translate(-50%, 2px)   rotate(0deg)  scale(0.86); }  /* tap down */
  62%  { transform: translate(-50%, 2px)   rotate(0deg)  scale(0.86); }  /* hold */
  100% { transform: translate(-50%, -14px) rotate(-8deg) scale(1); }     /* lift */
}
/* The folder currently being visited gives a little peek in sync with the tap */
.folder.hand-visit:not(.open) .folder-front {
  transform: skewX(-9deg) translateY(-4px) translateX(-7px);
  transition: transform .35s ease;
}
@media (prefers-reduced-motion: reduce) { .folder-hand { display: none; } }

/* Single global hint above the circular gallery */
.cg-global-hint {
  position: absolute;
  top: 12px; left: 50%;
  transform: translateX(-50%);
  padding: 6px 16px;
  background: linear-gradient(135deg, var(--champagne), var(--gold-2));
  color: #1a1530;
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border-radius: 999px;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 6px 20px rgba(233, 216, 166, 0.4);
  z-index: 10;
  animation: cgGlobalHintPulse 2.5s ease-in-out infinite;
}
@keyframes cgGlobalHintPulse {
  0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.85; }
  50%      { transform: translateX(-50%) translateY(-4px); opacity: 1; }
}

/* ─── PROJECT DETAIL MODAL (opened from rotating gallery) ─── */
.project-modal {
  position: fixed; inset: 0;
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.project-modal.open { display: flex; animation: pmFade 0.4s var(--ease) both; }
@keyframes pmFade { from { opacity: 0; } to { opacity: 1; } }
.project-modal-backdrop {
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(10, 12, 28, 0.92), rgba(0, 0, 0, 0.96));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.project-modal-panel {
  position: relative;
  width: min(720px, 100%);
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(circle at 0% 0%, rgba(233, 216, 166, 0.08), transparent 50%),
    radial-gradient(circle at 100% 100%, rgba(90, 150, 255, 0.10), transparent 50%),
    linear-gradient(135deg, rgba(18, 26, 56, 0.96), rgba(8, 12, 30, 0.96));
  border: 1px solid var(--champagne);
  border-radius: 24px;
  box-shadow: 0 30px 90px rgba(0,0,0,0.6), 0 0 0 1px rgba(233, 216, 166, 0.20), 0 0 80px rgba(90, 150, 255, 0.25);
  overflow: hidden;
  animation: pmPop 0.5s var(--ease-back) both;
}
@keyframes pmPop {
  from { transform: scale(0.85) translateY(20px); opacity: 0; }
  to   { transform: scale(1) translateY(0); opacity: 1; }
}
.project-modal-close {
  position: absolute;
  top: 16px; right: 16px;
  width: 38px; height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--text-mute);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border);
  z-index: 2;
  transition: background 0.3s, color 0.3s;
}
.project-modal-close:hover { background: rgba(255, 255, 255, 0.14); color: var(--champagne); }
.project-modal-body {
  padding: 40px 36px 16px;
  overflow-y: auto;
  flex: 1;
}
.project-modal-footer {
  padding: 18px 36px 28px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: center;
  background: rgba(8, 12, 30, 0.7);
}
.pm-tag {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 4px 12px;
  border: 1px solid var(--border-elegant);
  border-radius: 999px;
  color: var(--cyan-2);
  background: rgba(90, 150, 255, 0.10);
  margin-bottom: 14px;
}
.pm-tag-featured {
  background: linear-gradient(135deg, rgba(233, 216, 166, 0.25), rgba(90, 150, 255, 0.12));
  border-color: rgba(233, 216, 166, 0.6);
  color: var(--champagne);
}
.pm-title {
  font-family: var(--f-display);
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0 0 8px;
  color: var(--text);
}
.pm-role {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--champagne);
  margin: 0 0 18px;
}
.pm-summary {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  margin: 0 0 28px;
  padding-bottom: 22px;
  border-bottom: 1px dashed var(--border-elegant);
}
.pm-section {
  margin-top: 22px;
}
.pm-section-title {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--champagne);
  margin: 0 0 12px;
}
.pm-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.pm-list li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-mute);
}
.pm-bullet {
  flex-shrink: 0;
  margin-top: 4px;
  color: var(--champagne);
  font-size: 10px;
}
.pm-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.pm-stat {
  text-align: center;
  padding: 12px 8px;
  background: rgba(10, 16, 36, 0.55);
  border: 1px solid var(--border-elegant);
  border-radius: 10px;
}
.pm-stat-val {
  display: block;
  font-family: var(--f-display);
  font-size: 20px;
  font-weight: 600;
  background: linear-gradient(135deg, var(--gold-2), var(--champagne));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 4px;
}
.pm-stat-lbl {
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.pm-stack { display: flex; flex-wrap: wrap; gap: 6px; }
.pm-stack span {
  font-family: var(--f-mono);
  font-size: 10.5px;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-mute);
  background: rgba(233, 216, 166, 0.04);
}
@media (max-width: 600px) {
  .pm-stats { grid-template-columns: 1fr 1fr; }
  .project-modal-body { padding: 32px 22px 12px; }
  .project-modal-footer { padding: 14px 22px 22px; }
}

/* ─── DEEP-DIVE DOMAIN BLOCKS (projects.html) ─── */
.deep-dive { padding-top: 30px; }
.dd-domain {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 40px;
  padding: 36px;
  margin-bottom: 28px;
  background:
    radial-gradient(circle at 0% 0%, rgba(233, 216, 166, 0.06), transparent 50%),
    linear-gradient(135deg, rgba(18, 26, 56, 0.55), rgba(10, 16, 38, 0.70));
  border: 1px solid var(--border-elegant);
  border-radius: 24px;
  transition: border-color 0.5s var(--ease), box-shadow 0.5s var(--ease), transform 0.4s var(--ease);
}
.dd-domain:hover {
  border-color: rgba(233, 216, 166, 0.4);
  box-shadow: 0 12px 40px rgba(90, 150, 255, 0.12);
}
.dd-domain.dd-highlight {
  border-color: var(--champagne);
  box-shadow: 0 0 0 2px rgba(233, 216, 166, 0.45), 0 12px 40px rgba(233, 216, 166, 0.25);
  animation: ddHighlightPulse 2s ease-out;
}
@keyframes ddHighlightPulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(233, 216, 166, 0.45), 0 12px 40px rgba(233, 216, 166, 0.25); }
  50%      { box-shadow: 0 0 0 4px rgba(233, 216, 166, 0.55), 0 16px 50px rgba(233, 216, 166, 0.40); }
}

@media (max-width: 880px) {
  .dd-domain { grid-template-columns: 1fr; gap: 22px; padding: 26px; }
}

.dd-side .dd-num {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--champagne);
  margin-bottom: 12px;
}
.dd-side .dd-pill {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 4px 12px;
  background: rgba(90, 150, 255, 0.12);
  border: 1px solid rgba(90, 150, 255, 0.25);
  color: var(--cyan-2);
  border-radius: 999px;
  margin-left: 8px;
}
.dd-side .dd-pill.featured {
  background: linear-gradient(135deg, rgba(233, 216, 166, 0.20), rgba(90, 150, 255, 0.10));
  border-color: rgba(233, 216, 166, 0.55);
  color: var(--champagne);
}
.dd-title {
  font-family: var(--f-display);
  font-size: clamp(22px, 2.6vw, 28px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 12px 0 8px;
  color: var(--text);
}
.dd-tag {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--text-mute);
  margin-bottom: 18px;
}
.dd-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  font-size: 12.5px;
  color: var(--text-mute);
  line-height: 1.5;
}
.dd-meta strong { color: var(--text); font-weight: 500; }

.dd-section { margin-bottom: 22px; }
.dd-section:last-child { margin-bottom: 0; }
.dd-section h4 {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--champagne);
  margin: 0 0 12px;
}
.dd-section p {
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-mute);
  margin: 0;
}
.dd-section p strong { color: var(--text); font-weight: 500; }
.dd-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 9px;
}
.dd-list li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-mute);
}
.dd-list li::before {
  content: '◆';
  flex-shrink: 0;
  margin-top: 4px;
  color: var(--champagne);
  font-size: 10px;
  text-shadow: 0 0 6px rgba(233, 216, 166, 0.4);
}
.dd-list li strong { color: var(--text); font-weight: 500; }
.dd-metrics .dd-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.dd-metrics .dd-stat-grid > div {
  display: flex; flex-direction: column;
  align-items: center;
  padding: 14px 8px;
  background: rgba(10, 16, 36, 0.55);
  border: 1px solid var(--border-elegant);
  border-radius: 12px;
  text-align: center;
}
.dd-stat-val {
  font-family: var(--f-display);
  font-size: 22px;
  font-weight: 600;
  background: linear-gradient(135deg, var(--gold-2), var(--champagne));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 4px;
}
.dd-stat-lbl {
  font-family: var(--f-mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-mute);
}
@media (max-width: 600px) {
  .dd-metrics .dd-stat-grid { grid-template-columns: 1fr 1fr; }
}

/* ─── STARDUST DRIFT GAME ─── */
.stardust-field {
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  display: none;
}
.stardust-field.active { display: block; }
.stardust-field.sd-flash {
  background: rgba(255, 80, 80, 0.12);
  transition: background 0.2s;
}
/* Individual stars accept clicks even though the field doesn't */
.stardust-field .sd-star { pointer-events: auto; }
body.stardust-game-mode .cursor,
body.stardust-game-mode .cursor-dot { opacity: 0.6; }

/* ─── BOT FOLLOW-UP CHIPS + AI PILL ─── */
.bot-ai-pill {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 7px;
  font-family: var(--f-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.15em;
  background: linear-gradient(135deg, var(--champagne), var(--cyan));
  color: #1a1530;
  border-radius: 999px;
  vertical-align: middle;
}
.bot-followups {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 4px;
  padding: 0 4px;
}
.bot-followup-chip {
  display: inline-block;
  padding: 6px 12px;
  font-family: var(--f-display);
  font-size: 11.5px;
  background: rgba(90, 150, 255, 0.08);
  border: 1px solid rgba(90, 150, 255, 0.25);
  color: var(--cyan-2);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.3s, border-color 0.3s, color 0.3s, transform 0.3s;
}
.bot-followup-chip:hover {
  background: rgba(233, 216, 166, 0.12);
  border-color: var(--champagne);
  color: var(--champagne);
  transform: translateY(-1px);
}

/* ─── RESUME PAGE ─── */
.resume-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px clamp(20px, 5vw, 60px);
  background: rgba(3, 6, 26, 0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
.resume-back {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--text-mute);
  text-decoration: none;
  transition: color 0.3s;
}
.resume-back:hover { color: var(--champagne); }
/* Brand logo (added to the minimal nav) — sized to fit the slim bar */
.resume-nav .am-logo { padding: 3px 4px; }
.resume-nav .am-logo .am-mark { width: 34px; }
.resume-nav .am-wordswap { font-size: 18.5px; }
@media (max-width: 600px) {
  .resume-nav .am-logo .am-mark { width: 28px; }
  .resume-nav .am-wordswap { font-size: 16px; }
}
.resume-nav-actions {
  display: flex; gap: 16px; align-items: center;
}
.resume-nav-link {
  font-family: var(--f-display);
  font-size: 13px;
  color: var(--text-mute);
  text-decoration: none;
  transition: color 0.3s;
}
.resume-nav-link:hover { color: var(--champagne); }
.resume-print-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  font-family: var(--f-display);
  font-size: 12.5px;
  font-weight: 600;
  background: linear-gradient(135deg, var(--champagne), var(--gold-2));
  color: #1a1530;
  text-decoration: none;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  transition: transform 0.3s var(--ease-back), box-shadow 0.4s;
}
.resume-print-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(233, 216, 166, 0.4);
}

.resume-page {
  min-height: 100vh;
  padding: 40px clamp(16px, 4vw, 40px) 80px;
  display: flex;
  justify-content: center;
}
.resume-sheet {
  width: min(900px, 100%);
  background:
    radial-gradient(circle at 0% 0%, rgba(233, 216, 166, 0.04), transparent 50%),
    linear-gradient(135deg, rgba(18, 26, 56, 0.6), rgba(8, 12, 30, 0.75));
  border: 1px solid var(--border-elegant);
  border-radius: 18px;
  padding: clamp(28px, 4vw, 56px);
  color: var(--text);
  box-shadow: var(--shadow-elegant);
}
.resume-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding-bottom: 28px;
  margin-bottom: 32px;
  border-bottom: 2px solid var(--champagne);
}
.resume-name {
  font-family: var(--f-display);
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 6px;
  background: linear-gradient(135deg, var(--gold-2), var(--champagne));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.resume-title {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: 16px;
  color: var(--text-mute);
  margin: 0 0 14px;
}
.resume-contact {
  display: flex; flex-wrap: wrap; gap: 12px 18px;
  font-size: 13px;
  color: var(--text-mute);
}
.resume-contact a { color: var(--text); text-decoration: none; }
.resume-contact a:hover { color: var(--champagne); }
.resume-monogram {
  width: 86px; height: 86px;
  flex-shrink: 0;
  filter: drop-shadow(0 8px 16px rgba(233, 216, 166, 0.3));
}
@media (max-width: 600px) {
  .resume-header { flex-direction: column; align-items: flex-start; }
}
.resume-section { margin-bottom: 30px; }
.resume-section-title {
  font-family: var(--f-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--champagne);
  margin: 0 0 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-elegant);
}
.resume-prose {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--text);
  margin: 0;
}
.resume-prose strong { color: var(--champagne); font-weight: 500; }
.resume-entry { margin-bottom: 20px; }
.resume-entry:last-child { margin-bottom: 0; }
.resume-entry.compact { margin-bottom: 12px; }
.resume-entry-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.resume-role {
  font-family: var(--f-display);
  font-size: 15.5px;
  font-weight: 600;
  margin: 0;
  color: var(--text);
}
.resume-company {
  font-family: var(--f-sans);
  font-size: 13px;
  color: var(--text-mute);
  margin: 2px 0 0;
}
.resume-period {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--champagne);
  white-space: nowrap;
}
.resume-list {
  list-style: none;
  padding: 0; margin: 8px 0 0;
  display: flex; flex-direction: column; gap: 6px;
}
.resume-list li {
  position: relative;
  padding-left: 18px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-mute);
}
.resume-list li::before {
  content: '◆';
  position: absolute;
  left: 0;
  top: 1px;
  font-size: 9px;
  color: var(--champagne);
}
.resume-list li strong { color: var(--text); font-weight: 500; }
.resume-twocol {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}
@media (max-width: 700px) { .resume-twocol { grid-template-columns: 1fr; gap: 20px; } }
.resume-skill-block { margin-bottom: 14px; }
.resume-skill-block h4 {
  font-family: var(--f-display);
  font-size: 13px;
  color: var(--cyan-2);
  margin: 0 0 4px;
  font-weight: 600;
}
.resume-skill-block p {
  font-size: 13px;
  color: var(--text-mute);
  margin: 0;
  line-height: 1.55;
}
.resume-projects {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 700px) { .resume-projects { grid-template-columns: 1fr; } }
.resume-project {
  padding: 14px 16px;
  background: rgba(14, 22, 50, 0.55);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.resume-project h4 {
  font-family: var(--f-display);
  font-size: 14px;
  margin: 0 0 6px;
  color: var(--text);
}
.resume-project p {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-mute);
  margin: 0;
}
.resume-footer {
  margin-top: 36px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.05em;
  color: var(--text-dim);
}

/* Print-friendly resume — clean, no decorations, fits on 1–2 pages */
@media print {
  body { background: white !important; color: #000 !important; }
  .resume-nav, .footer, .bot-launcher, .bot-panel, .music-player,
  .cursor, .cursor-dot, .starry-night-bg, .prism-bg, .ufo-fleet,
  .toast, .game-launcher, .game-tip { display: none !important; }
  .resume-sheet {
    width: 100%;
    background: white !important;
    color: #000 !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 20px !important;
    box-shadow: none !important;
  }
  .resume-name {
    background: none !important;
    -webkit-text-fill-color: #1a1530 !important;
    color: #1a1530 !important;
  }
  .resume-title, .resume-contact, .resume-prose, .resume-list li,
  .resume-skill-block p, .resume-project p, .resume-company { color: #444 !important; }
  .resume-role, .resume-prose strong, .resume-list li strong { color: #000 !important; }
  .resume-section-title, .resume-period, .resume-list li::before { color: #1a1530 !important; }
  .resume-section-title { border-bottom: 1px solid #1a1530 !important; }
  .resume-header { border-bottom: 2px solid #1a1530 !important; }
  .resume-project { border: 1px solid #ccc !important; background: white !important; }
  .resume-footer { color: #888 !important; }
  .text-gradient {
    background: none !important;
    -webkit-text-fill-color: inherit !important;
    color: inherit !important;
  }
}

/* ─── PROCESS PAGE ─── */
.process-hero {
  padding: 100px clamp(20px, 5vw, 60px) 40px;
  text-align: center;
}
.process-tag {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--champagne);
  margin-bottom: 14px;
}
.process-title {
  font-family: var(--f-display);
  font-size: clamp(32px, 5vw, 56px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0 0 18px;
  color: var(--text);
}
.process-sub {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: clamp(15px, 1.8vw, 19px);
  max-width: 640px;
  margin: 0 auto;
  color: var(--text-mute);
  line-height: 1.6;
}
.process-phases {
  padding: 30px 0 60px;
}
.process-phase {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 32px;
  padding: 32px 36px;
  margin-bottom: 24px;
  background: linear-gradient(135deg, rgba(18, 26, 56, 0.5), rgba(10, 16, 38, 0.65));
  border: 1px solid var(--border-elegant);
  border-radius: 22px;
  transition: border-color 0.4s, box-shadow 0.5s;
}
.process-phase:hover {
  border-color: rgba(233, 216, 166, 0.35);
  box-shadow: 0 12px 40px rgba(90, 150, 255, 0.10);
}
.phase-num {
  font-family: var(--f-display);
  font-size: 64px;
  font-weight: 700;
  background: linear-gradient(135deg, var(--champagne), var(--cyan));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1;
  opacity: 0.85;
}
.phase-body h2 {
  font-family: var(--f-display);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 4px;
  color: var(--text);
}
.phase-tag {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--champagne);
  margin: 0 0 14px;
}
.phase-body > p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-mute);
  margin: 0 0 18px;
}
.phase-body > p strong { color: var(--text); font-weight: 500; }
.phase-body h4 {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--champagne);
  margin: 18px 0 10px;
}
.phase-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.phase-list li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-mute);
}
.phase-list li::before {
  content: '◆';
  flex-shrink: 0;
  margin-top: 3px;
  color: var(--champagne);
  font-size: 9px;
}
.phase-list li strong { color: var(--text); font-weight: 500; }
@media (max-width: 700px) {
  .process-phase { grid-template-columns: 1fr; gap: 16px; padding: 24px; }
  .phase-num { font-size: 44px; }
}
.process-principles {
  padding: 40px 0 80px;
}
.principles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 30px;
}
@media (max-width: 880px) { .principles-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .principles-grid { grid-template-columns: 1fr; } }
.principle-card {
  padding: 24px 22px;
  background: linear-gradient(135deg, rgba(18, 26, 56, 0.5), rgba(10, 16, 38, 0.65));
  border: 1px solid var(--border-elegant);
  border-radius: 16px;
  transition: transform 0.4s, border-color 0.4s;
}
.principle-card:hover { transform: translateY(-3px); border-color: rgba(233, 216, 166, 0.4); }
.principle-icon { font-size: 28px; display: block; margin-bottom: 10px; }
.principle-card h3 {
  font-family: var(--f-display);
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 8px;
  color: var(--text);
}
.principle-card p {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-mute);
  margin: 0;
}

/* ============================================================================
   FEATURED PROJECT CARD SVG ANIMATIONS — satisfying smooth motion
   ============================================================================ */

/* Web Builder: blocks slide in from left + drop zone glows + arrow pulses */
.fpic-builder .fpb-block { transform-origin: left center; animation: fpbBlockSlide 4s cubic-bezier(0.4, 0, 0.2, 1) infinite; }
.fpic-builder .fpb-b1 { animation-delay: 0s; }
.fpic-builder .fpb-b2 { animation-delay: 0.3s; }
.fpic-builder .fpb-b3 { animation-delay: 0.6s; }
@keyframes fpbBlockSlide {
  0%   { transform: translateX(-30px) scale(0.92); opacity: 0; }
  25%  { transform: translateX(0) scale(1); opacity: 1; }
  75%  { transform: translateX(0) scale(1); opacity: 1; }
  100% { transform: translateX(30px) scale(0.92); opacity: 0; }
}
.fpic-builder .fpb-drop { transform-origin: 154px 99px; animation: fpbDropPulse 2s ease-in-out infinite; }
@keyframes fpbDropPulse {
  0%, 100% { transform: scale(1); opacity: 0.7; }
  50%      { transform: scale(1.1); opacity: 1; }
}
.fpic-builder .fpb-arrow { animation: fpbArrowSlide 2s ease-in-out infinite; }
@keyframes fpbArrowSlide {
  0%, 100% { transform: translateX(-3px); opacity: 0.6; }
  50%      { transform: translateX(3px); opacity: 1; }
}
.fpic-builder .fpb-glow { animation: fpbGlowBurst 4s ease-out infinite; }
@keyframes fpbGlowBurst {
  0%, 70%, 100% { opacity: 0; transform: scale(0.5); }
  85%           { opacity: 0.5; transform: scale(1.8); }
}

/* Corporate site: nav fades, hero zooms, columns stagger up */
.fpic-corporate .fpc-nav    { animation: fpcNavFade 4s ease-in-out infinite; }
.fpic-corporate .fpc-hero   { transform-origin: center; animation: fpcHeroZoom 4s ease-in-out infinite; }
.fpic-corporate .fpc-col    { transform-origin: center; animation: fpcColRise 3s cubic-bezier(0.34, 1.4, 0.6, 1) infinite; }
.fpic-corporate .fpc-c1     { animation-delay: 0s; }
.fpic-corporate .fpc-c2     { animation-delay: 0.2s; }
.fpic-corporate .fpc-c3     { animation-delay: 0.4s; }
.fpic-corporate .fpc-footer { animation: fpcFooterPulse 4s ease-in-out infinite; }
@keyframes fpcNavFade    { 0%, 100% { opacity: 0.4; } 50% { opacity: 0.9; } }
@keyframes fpcHeroZoom   { 0%, 100% { opacity: 0.25; transform: scale(0.98); } 50% { opacity: 0.55; transform: scale(1.02); } }
@keyframes fpcColRise    { 0%, 100% { transform: translateY(0) scale(1); opacity: 0.55; } 50% { transform: translateY(-4px) scale(1.05); opacity: 1; } }
@keyframes fpcFooterPulse{ 0%, 100% { opacity: 0.4; } 50% { opacity: 0.9; } }

/* E-commerce: products bob like browsing, sale banner shimmers, cart bounces */
.fpic-ecom .fpe-banner   { animation: fpeBannerShimmer 3s ease-in-out infinite; }
.fpic-ecom .fpe-sale     { animation: fpeSaleBlink 1.5s ease-in-out infinite; }
.fpic-ecom .fpe-prod     { transform-origin: center; animation: fpeProdBob 2.4s ease-in-out infinite; }
.fpic-ecom .fpe-p1       { animation-delay: 0s; }
.fpic-ecom .fpe-p2       { animation-delay: 0.3s; }
.fpic-ecom .fpe-p3       { animation-delay: 0.6s; }
.fpic-ecom .fpe-cart     { transform-origin: 158px 35px; animation: fpeCartBounce 2s cubic-bezier(0.34, 1.6, 0.4, 1) infinite; }
.fpic-ecom .fpe-cart-num { animation: fpeCartBounce 2s cubic-bezier(0.34, 1.6, 0.4, 1) infinite; }
@keyframes fpeBannerShimmer { 0%, 100% { opacity: 0.45; } 50% { opacity: 0.85; } }
@keyframes fpeSaleBlink     { 0%, 100% { opacity: 0.7; } 50% { opacity: 1; } }
@keyframes fpeProdBob {
  0%, 100% { transform: translateY(0) scale(1); opacity: 0.35; }
  50%      { transform: translateY(-3px) scale(1.03); opacity: 0.6; }
}
@keyframes fpeCartBounce {
  0%, 70%, 100% { transform: scale(1) translateY(0); }
  80%           { transform: scale(1.18) translateY(-3px); }
  90%           { transform: scale(0.95) translateY(2px); }
}

/* Job portal: search pulses, listings flow in vertically, thumbs highlight active */
.fpic-portal .fpp-search { animation: fppSearchPulse 2.5s ease-in-out infinite; }
.fpic-portal .fpp-mag    { animation: fppMagBounce 2.5s ease-in-out infinite; transform-origin: 54px 51px; }
.fpic-portal .fpp-query  { animation: fppQueryType 3s ease-in-out infinite; transform-origin: left center; }
.fpic-portal .fpp-list   { transform-origin: left center; animation: fppListSlide 3.5s ease-in-out infinite; }
.fpic-portal .fpp-l1     { animation-delay: 0s; }
.fpic-portal .fpp-l2     { animation-delay: 0.3s; }
.fpic-portal .fpp-l3     { animation-delay: 0.6s; }
.fpic-portal .fpp-thumb  { animation: fppThumbCycle 3s ease-in-out infinite; }
.fpic-portal .fpp-t1     { animation-delay: 0s; }
.fpic-portal .fpp-t2     { animation-delay: 1s; }
.fpic-portal .fpp-t3     { animation-delay: 2s; }
@keyframes fppSearchPulse  { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }
@keyframes fppMagBounce    { 0%, 100% { transform: scale(1) rotate(0deg); } 50% { transform: scale(1.15) rotate(-8deg); } }
@keyframes fppQueryType    { 0% { transform: scaleX(0.4); opacity: 0.3; } 60% { transform: scaleX(1); opacity: 0.8; } 100% { transform: scaleX(0.4); opacity: 0.3; } }
@keyframes fppListSlide    { 0%, 100% { transform: translateX(0); opacity: 0.3; } 50% { transform: translateX(4px); opacity: 0.6; } }
@keyframes fppThumbCycle   { 0%, 100% { opacity: 0.3; } 33% { opacity: 1; } 66% { opacity: 0.3; } }

/* Pause animations when user prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
  .fpic-builder *, .fpic-corporate *, .fpic-ecom *, .fpic-portal * {
    animation: none !important;
  }
}

/* ============================================================================
   MODERN CV LAYOUT — matches user's actual PDF resume design
   ============================================================================ */
.cv-page {
  min-height: 100vh;
  padding: 30px clamp(12px, 3vw, 30px) 80px;
  display: flex;
  justify-content: center;
}
.cv-sheet {
  width: min(1100px, 100%);
  background:
    radial-gradient(circle at 0% 0%, rgba(233, 216, 166, 0.04), transparent 50%),
    linear-gradient(180deg, rgba(11, 18, 44, 0.85), rgba(8, 13, 32, 0.92));
  border: 1px solid var(--border-elegant);
  border-radius: 16px;
  padding: clamp(28px, 4vw, 56px);
  color: var(--text);
  box-shadow: var(--shadow-luxe);
  position: relative;
}
.cv-sheet::before {
  /* Subtle top-left accent block matching the PDF */
  content: '';
  position: absolute;
  top: 0;
  left: clamp(28px, 4vw, 56px);
  width: 70px;
  height: 5px;
  background: linear-gradient(90deg, var(--champagne), var(--cyan));
  border-radius: 0 0 4px 4px;
}

.cv-top {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 24px;
  margin-bottom: 24px;
}
.cv-name {
  font-family: var(--f-display);
  font-size: clamp(30px, 4.5vw, 44px);
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1;
  margin: 0 0 6px;
  color: var(--text);
}
.cv-job {
  font-family: var(--f-sans);
  font-size: clamp(15px, 1.8vw, 18px);
  letter-spacing: 0.06em;
  color: var(--text-mute);
  margin: 0 0 12px;
}
.cv-tagline {
  font-family: var(--f-sans);
  font-style: italic;
  font-size: 12.5px;
  color: var(--text-dim);
  margin: 0 0 12px;
}
.cv-contact {
  font-family: var(--f-sans);
  font-size: 13px;
  color: var(--text-mute);
  line-height: 1.6;
  margin: 0;
}
.cv-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: rgba(74, 222, 128, 0.10);
  border: 1px solid rgba(74, 222, 128, 0.35);
  border-radius: 999px;
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: #4ade80;
  white-space: nowrap;
}
.cv-status-dot {
  width: 7px; height: 7px;
  background: #4ade80;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.6);
  animation: cvStatusPulse 2s ease-out infinite;
}
@keyframes cvStatusPulse {
  0%   { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.6); }
  100% { box-shadow: 0 0 0 10px rgba(74, 222, 128, 0); }
}

.cv-quote {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 14px 0;
  margin: 0 0 28px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  font-family: var(--f-serif);
  font-style: italic;
  font-size: clamp(13px, 1.4vw, 15px);
  color: var(--text-mute);
  text-align: center;
}
.cv-quote em { color: var(--text); font-style: italic; }
.cv-quote em strong {
  background: linear-gradient(120deg, var(--gold-2), var(--champagne));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-style: italic;
  font-weight: 600;
}
.cv-quote-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-elegant), transparent);
}

.cv-grid {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: 36px;
}
@media (max-width: 880px) {
  .cv-grid { grid-template-columns: 1fr; gap: 24px; }
  .cv-top  { grid-template-columns: 1fr; }
}

.cv-section { margin-bottom: 22px; }
.cv-h2 {
  font-family: var(--f-display);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--text);
  margin: 0 0 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-elegant);
  position: relative;
}
.cv-h2::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 42px;
  height: 2px;
  background: var(--champagne);
}
.cv-body {
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--text-mute);
  margin: 0;
}
.cv-body strong { color: var(--text); font-weight: 600; }

.cv-job-entry { margin-bottom: 20px; }
.cv-job-entry:last-child { margin-bottom: 0; }
.cv-company-head { margin-bottom: 8px; }
.cv-company {
  font-family: var(--f-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 2px;
}
.cv-company-meta {
  font-family: var(--f-sans);
  font-style: italic;
  font-size: 12px;
  color: var(--text-dim);
  margin: 0;
}
.cv-role-block {
  padding-left: 14px;
  margin-top: 12px;
  border-left: 2px solid var(--border-elegant);
}
.cv-role-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 2px;
}
.cv-role-title {
  font-family: var(--f-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin: 0;
}
.cv-promoted {
  font-family: var(--f-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.15em;
  padding: 3px 9px;
  background: rgba(233, 216, 166, 0.18);
  border: 1px solid var(--champagne);
  color: var(--champagne);
  border-radius: 4px;
}
.cv-role-period {
  font-family: var(--f-sans);
  font-style: italic;
  font-size: 11.5px;
  color: var(--text-dim);
  margin: 0 0 6px;
}
.cv-bullets {
  list-style: none;
  padding: 0;
  margin: 6px 0 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.cv-bullets li {
  position: relative;
  padding-left: 14px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-mute);
}
.cv-bullets li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: var(--champagne);
  font-size: 14px;
  line-height: 1.45;
}

.cv-projects-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 560px) { .cv-projects-grid { grid-template-columns: 1fr; } }
.cv-project-cell {
  padding: 10px 14px;
  border-left: 2px solid var(--champagne);
  background: rgba(14, 22, 50, 0.40);
}
.cv-project-cell h4 {
  font-family: var(--f-display);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 4px;
}
.cv-project-cell p {
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--text-mute);
  margin: 0;
}

/* ── SIDEBAR ── */
.cv-col-side {
  font-size: 12.5px;
}
.cv-lang, .cv-ach, .cv-cert, .cv-style { margin-bottom: 12px; }
.cv-lang h4, .cv-ach h4, .cv-cert h4, .cv-style h4 {
  font-family: var(--f-display);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 2px;
}
.cv-lang p, .cv-cert p, .cv-style p {
  font-style: italic;
  font-size: 11.5px;
  color: var(--text-mute);
  margin: 0;
}
.cv-ach p {
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-mute);
  margin: 4px 0 0;
}
.cv-ach h4 { color: var(--champagne); }

.cv-skills-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}
.cv-skills-grid span {
  display: block;
  text-align: center;
  font-family: var(--f-display);
  font-size: 11.5px;
  font-weight: 500;
  padding: 8px 6px;
  background: rgba(14, 22, 50, 0.55);
  border: 1px solid var(--border-elegant);
  border-radius: 4px;
  color: var(--text);
  transition: background 0.3s, border-color 0.3s, color 0.3s, transform 0.3s;
}
.cv-skills-grid span:hover {
  background: rgba(233, 216, 166, 0.12);
  border-color: var(--champagne);
  color: var(--champagne);
  transform: translateY(-1px);
}

.cv-tools p {
  font-size: 12px;
  line-height: 1.7;
  color: var(--text-mute);
  margin: 0 0 4px;
}
.cv-tools strong { color: var(--text); font-weight: 600; }

.cv-foot {
  margin-top: 28px;
  padding-top: 14px;
  border-top: 1px solid var(--border-elegant);
  text-align: center;
  font-family: var(--f-mono);
  font-size: 9.5px;
  letter-spacing: 0.2em;
  color: var(--text-dim);
}

/* PRINT — strips animations + dark theme, prints clean on white paper */
@media print {
  body { background: white !important; }
  .resume-nav, .footer, .bot-launcher, .bot-panel, .music-player, .bot-peek,
  .cursor, .cursor-dot, .starry-night-bg, .prism-bg, .ufo-fleet, .toast,
  .game-launcher, .game-tip, .game-hud, .game-banner { display: none !important; }
  .cv-sheet {
    width: 100%; background: white !important;
    border: none !important; border-radius: 0 !important;
    padding: 20px !important; box-shadow: none !important;
  }
  .cv-name, .cv-job, .cv-company, .cv-role-title, .cv-h2, .cv-bullets li,
  .cv-body, .cv-tagline, .cv-contact, .cv-company-meta, .cv-role-period,
  .cv-lang p, .cv-cert p, .cv-style p, .cv-ach p, .cv-tools p, .cv-quote,
  .cv-project-cell h4, .cv-project-cell p, .cv-skills-grid span, .cv-foot {
    color: #1a1530 !important;
  }
  .cv-name { color: #0a1230 !important; }
  .cv-h2 { color: #1a1530 !important; border-bottom-color: #1a1530 !important; }
  .cv-h2::after { background: #c9a23d !important; }
  .cv-promoted { background: #fff5d6 !important; border-color: #c9a23d !important; color: #8a6a1a !important; }
  .cv-status { background: #e6f9e8 !important; border-color: #4ade80 !important; color: #1f8a3a !important; }
  .cv-bullets li::before { color: #c9a23d !important; }
  .cv-project-cell { background: #f4f6fa !important; border-left-color: #c9a23d !important; }
  .cv-skills-grid span { background: white !important; border-color: #ccc !important; }
  .cv-quote em strong { background: none !important; -webkit-text-fill-color: #c9a23d !important; color: #c9a23d !important; }
  .cv-foot { color: #888 !important; }
  .cv-role-block { border-left-color: #ccc !important; }
  .cv-sheet::before { background: linear-gradient(90deg, #c9a23d, #5a96ff) !important; }
}

/* ============================================================================
   NEW HEADER LOGO COMPONENT — "Arif Maulana" ↔ "Universe" swap animation
   Namespaced .am-logo to avoid collisions
   ============================================================================ */
.am-logo {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  text-decoration: none;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 14px;
  transition: background .3s ease, transform .3s ease;
  -webkit-tap-highlight-color: transparent;
}
.am-logo:hover { background: rgba(120,160,255,.07); transform: translateY(-1px); }
.am-logo .am-mark {
  width: 42px; height: auto; flex: 0 0 auto; display: block;
  animation: am-markGlow 5.5s ease-in-out infinite;
}
@keyframes am-markGlow {
  0%, 100% { filter: drop-shadow(0 0 3px rgba(120,160,235,.35)) drop-shadow(0 0 8px rgba(93,134,216,.3)); }
  50%      { filter: drop-shadow(0 0 5px rgba(140,180,255,.55)) drop-shadow(0 0 14px rgba(93,134,216,.42)); }
}
.am-logo .am-lock { display: flex; align-items: center; line-height: 1; margin-left: -2px; }
.am-wordswap {
  position: relative; display: inline-block; white-space: nowrap;
  font-family: 'Cormorant Garamond', 'Instrument Serif', serif;
  font-style: italic; font-weight: 600;
  font-size: 22px; letter-spacing: .01em;
  animation: am-wsGlow 4.5s ease-in-out infinite;
}
.am-wordswap .am-state { display: inline-block; }
.am-wordswap .am-a {
  color: #eef2ff; opacity: 1;
  text-shadow: 0 0 11px rgba(160,195,255,.6), 0 0 22px rgba(140,180,255,.35);
  animation: am-swapA 8.5s ease-in-out infinite;
}
.am-wordswap .am-b {
  position: absolute; left: 0; top: 0; color: #bcd0ff; opacity: 0;
  text-shadow: 0 0 12px rgba(170,200,255,.7), 0 0 24px rgba(150,185,255,.42);
  animation: am-swapB 8.5s ease-in-out infinite;
}
@keyframes am-swapA {
  0%, 40% { opacity: 1; transform: translateX(0); }
  49%, 82% { opacity: 0; transform: translateX(-7px); }
  91%, 100% { opacity: 1; transform: translateX(0); }
}
@keyframes am-swapB {
  0%, 40% { opacity: 0; transform: translateX(7px); }
  49%, 82% { opacity: 1; transform: translateX(0); }
  91%, 100% { opacity: 0; transform: translateX(7px); }
}
@keyframes am-wsGlow {
  0%, 100% { filter: drop-shadow(0 0 5px rgba(150,185,255,.25)); }
  50%      { filter: drop-shadow(0 0 11px rgba(165,198,255,.5)); }
}
.am-wordswap .am-shoot {
  position: absolute; top: 50%; left: 118%; transform: translateY(-50%);
  display: flex; align-items: center; gap: 1px; pointer-events: none; opacity: 0;
  animation: am-shoot 8.5s ease-in-out infinite;
}
.am-wordswap .am-shoot .am-head {
  width: 12px; height: 12px; flex: 0 0 auto;
  filter: drop-shadow(0 0 5px rgba(255,243,205,1)) drop-shadow(0 0 10px rgba(244,221,168,.8));
}
.am-wordswap .am-shoot .am-tail {
  width: 32px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, rgba(244,221,168,.95) 0%, rgba(244,221,168,0) 100%);
  filter: drop-shadow(0 0 4px rgba(244,221,168,.7));
}
@keyframes am-shoot {
  0%, 40% { left: 118%; opacity: 0; }
  42% { opacity: 1; }
  49% { left: -16%; opacity: 1; }
  50.5% { left: -16%; opacity: 0; }
  50.6%, 81% { left: 118%; opacity: 0; }
  83% { opacity: 1; }
  90% { left: -16%; opacity: 1; }
  91.5% { left: -16%; opacity: 0; }
  91.6%, 100% { left: 118%; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .am-logo .am-mark, .am-wordswap, .am-wordswap .am-a, .am-wordswap .am-b, .am-wordswap .am-shoot { animation: none !important; }
  .am-wordswap .am-shoot { display: none; }
}
@media (max-width: 600px) {
  .am-logo .am-mark { width: 34px; }
  .am-wordswap { font-size: 18px; }
}

/* Hide the OLD circular-text/wordmark when new logo is present */
.gooey-nav.has-am-logo .circular-text,
.gooey-nav.has-am-logo .logo-wordmark { display: none; }

/* ============================================================================
   NAV ACTIVE STATE — gold glow instead of dark pill
   ============================================================================ */
.gooey-blob {
  background: linear-gradient(135deg, #f4e7c0, #e9d8a6, #d8e2f5) !important;
  box-shadow:
    0 0 22px rgba(233, 216, 166, 0.6),
    0 0 44px rgba(233, 216, 166, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
}
.gooey-item.active span {
  color: #1a1530 !important;
  font-weight: 600 !important;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.7) !important;
}
.gooey-item:not(.active) span {
  color: var(--text-mute);
  transition: color 0.3s var(--ease);
}
.gooey-item:not(.active):hover span {
  color: var(--champagne);
  text-shadow: 0 0 12px rgba(233, 216, 166, 0.5);
}

/* ============================================================================
   GENERIC GAME LAUNCHERS — Word Topple (resume) + Starship Dodge (process)
   Share styling with the existing UFO game launcher
   ============================================================================ */
.wt-launcher, .ss-launcher {
  position: fixed; right: 26px; bottom: 196px;
  z-index: 92; width: 52px; height: 52px;
  border-radius: 50%;
  border: 1px solid rgba(255, 176, 208, 0.45);
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.18), transparent 55%),
              linear-gradient(135deg, rgba(90, 150, 255, 0.95), rgba(233, 216, 166, 0.9));
  box-shadow: 0 8px 24px rgba(233, 216, 166, 0.4),
              0 0 0 6px rgba(90, 150, 255, 0.08),
              inset 0 -3px 8px rgba(0, 0, 0, 0.25);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: transform 0.4s cubic-bezier(0.34, 1.4, 0.6, 1), box-shadow 0.4s var(--ease);
  animation: gameLauncherPulse 2.4s ease-in-out infinite;
}
.wt-launcher:hover, .ss-launcher:hover {
  transform: scale(1.12) rotate(-6deg);
}
.wt-launcher svg, .ss-launcher svg { width: 24px; height: 24px; }
.wt-launcher-badge, .ss-launcher-badge {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  padding: 2px 8px; font-family: var(--f-mono); font-size: 8.5px; font-weight: 700;
  letter-spacing: 0.2em; background: var(--bg); border: 1px solid var(--champagne);
  color: var(--champagne); border-radius: 4px; white-space: nowrap;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
}

/* Banners — share UFO game banner styling */
.wt-banner, .ss-banner {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
  z-index: 96; padding: 28px 36px;
  background: linear-gradient(135deg, rgba(18, 26, 56, 0.96), rgba(8, 12, 30, 0.96));
  border: 1px solid var(--champagne);
  border-radius: 20px; min-width: 320px; max-width: 480px; text-align: center;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6), 0 0 60px rgba(233, 216, 166, 0.25);
  opacity: 0; visibility: hidden;
  transition: opacity 0.4s var(--ease), visibility 0.4s var(--ease), transform 0.4s var(--ease-back);
}
.wt-banner.show, .ss-banner.show {
  opacity: 1; visibility: visible;
  transform: translate(-50%, -50%) scale(1);
}
.wt-banner h3, .ss-banner h3 {
  font-family: var(--f-display); font-size: 22px; font-weight: 600;
  color: var(--champagne); margin: 0 0 10px;
}
.wt-banner p, .ss-banner p {
  font-size: 14px; line-height: 1.55; color: var(--text-mute); margin: 0 0 16px;
}
.wt-banner-actions, .ss-banner-actions {
  display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 16px;
}
.wt-btn, .ss-btn {
  padding: 8px 18px; font-family: var(--f-mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase; border-radius: 999px;
  cursor: pointer; transition: transform 0.3s var(--ease), background 0.3s var(--ease);
}
.wt-btn-primary, .ss-btn-primary {
  background: linear-gradient(120deg, var(--cyan), var(--champagne));
  border: none; color: #1a1530;
}
.wt-btn-primary:hover, .ss-btn-primary:hover { transform: translateY(-2px); }
.wt-btn-ghost, .ss-btn-ghost {
  background: transparent; border: 1px solid var(--border); color: var(--text-mute);
}
.wt-btn-ghost:hover, .ss-btn-ghost:hover { background: rgba(255, 255, 255, 0.06); }
.wt-counter {
  margin-top: 12px; font-family: var(--f-mono); font-size: 11px;
  color: var(--text-mute); letter-spacing: 0.1em;
}
.wt-counter strong { color: var(--champagne); }

/* Blackhole singularity */
.bh-hole {
  position: fixed;
  top: 50%; left: 50%;
  width: 0; height: 0;
  transform: translate(-50%, -50%);
  z-index: 11400;
  pointer-events: none;
  transition: width 1.2s cubic-bezier(0.4, 0, 0.6, 1), height 1.2s cubic-bezier(0.4, 0, 0.6, 1);
}
.bh-hole.active { width: 220px; height: 220px; }
.bh-disk {
  position: absolute; inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, transparent 28%, rgba(90, 150, 255, 0.6) 35%, rgba(233, 216, 166, 0.7) 45%, rgba(255, 100, 50, 0.4) 55%, transparent 70%);
  transform: rotate(0deg);
  animation: bhSpin 6s linear infinite;
}
.bh-disk-2 {
  inset: 12%;
  background: radial-gradient(circle, transparent 30%, rgba(255, 240, 200, 0.5) 40%, rgba(255, 80, 30, 0.3) 60%, transparent 75%);
  animation: bhSpin 3s linear infinite reverse;
}
.bh-core {
  position: absolute;
  top: 50%; left: 50%;
  width: 60%; height: 60%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, #000 50%, rgba(0, 0, 0, 0.95) 65%, transparent 80%);
  box-shadow: 0 0 80px rgba(0, 0, 0, 1), inset 0 0 30px rgba(90, 150, 255, 0.3);
}
@keyframes bhSpin { to { transform: rotate(360deg); } }

.bh-char {
  display: inline-block;
  pointer-events: none;
  font: inherit;
  color: inherit;
}

/* Starship Dodge field */
.ss-field {
  position: fixed; inset: 0; z-index: 90; pointer-events: none; display: none;
  background: radial-gradient(ellipse at 50% 50%, rgba(10, 16, 36, 0.4), rgba(0, 0, 0, 0.7));
}
.ss-field.active { display: block; }
.ss-hud {
  position: fixed; top: 70px; left: 50%; transform: translateX(-50%);
  z-index: 95; display: flex; gap: 14px; align-items: center;
  padding: 10px 18px; font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.1em;
  background: rgba(8, 12, 30, 0.85);
  border: 1px solid var(--border-elegant);
  border-radius: 999px; pointer-events: auto; color: var(--text);
  backdrop-filter: blur(10px);
}
.ss-hud strong { color: var(--champagne); font-weight: 700; }
.ss-divider { width: 1px; height: 14px; background: var(--border); }
.ss-exit { padding: 4px 10px; font-family: var(--f-mono); font-size: 10px;
  letter-spacing: 0.15em; color: var(--text-mute); background: transparent;
  border: 1px solid var(--border); border-radius: 4px; cursor: pointer; }
.ss-exit:hover { color: var(--champagne); border-color: var(--champagne); }
.ss-ship {
  position: fixed; width: 32px; height: 32px; pointer-events: none;
  filter: drop-shadow(0 0 12px rgba(90, 150, 255, 0.8));
  z-index: 91; transition: filter 0.2s ease;
}
.ss-rocks { position: fixed; inset: 0; pointer-events: none; }
.ss-rock {
  position: fixed; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.5));
  will-change: transform; z-index: 91;
}
.ss-rock svg { width: 100%; height: 100%; }
body.ss-game-mode { cursor: crosshair; }
body.ss-game-mode * { cursor: crosshair !important; }
body.ss-game-mode .cursor, body.ss-game-mode .cursor-dot { opacity: 0.4; }

/* ============================================================================
   COSMIC CAMEOS — subtle light-based background visitors
   (portals replaced by soft pools of starlight; characters are faint glows)
   ============================================================================ */
.portal-aliens-layer {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
  opacity: 0.3;             /* very subtle — pure ambience, never competes with content */
}
.pa-alien { position: absolute; inset: 0; pointer-events: none; }
/* Soft pool of starlight — replaces the old cartoon portal */
.pa-glow {
  position: absolute;
  width: 90px; height: 90px;
  border-radius: 50%;
  transform: scale(0.25);
  opacity: 0;
  transition: transform 0.9s ease, opacity 0.9s ease;
  background: radial-gradient(circle at 50% 50%,
    rgba(228, 240, 255, 0.55) 0%,
    rgba(160, 195, 255, 0.25) 32%,
    rgba(130, 160, 255, 0.10) 58%,
    transparent 76%);
  filter: blur(1.5px);
}
.pa-glow::after {
  content: ''; position: absolute; inset: 40%; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.85) 0%, rgba(200,220,255,0.25) 60%, transparent 100%);
  animation: paGlowCore 1.6s ease-in-out infinite alternate;
}
.pa-glow.open { transform: scale(1); opacity: 0.85; }
.pa-glow-lg { width: 120px; height: 120px; }
@keyframes paGlowCore { from { transform: scale(0.82); opacity: 0.7; } to { transform: scale(1.12); opacity: 1; } }
.pa-body {
  position: absolute;
  width: 34px; height: 46px;
  opacity: 0;
  transition: transform 1.6s cubic-bezier(0.4, 0, 0.6, 1), opacity 0.5s ease;
  filter: drop-shadow(0 0 7px rgba(170, 200, 255, 0.55)) saturate(0.7) brightness(1.12);
}
.pa-body svg { width: 100%; height: 100%; display: block; transform: scaleX(var(--flip, 1)); }
.pa-body.go { opacity: 0.6; }
.pa-body.walk.go svg { animation: paBob 0.42s ease-in-out infinite alternate; }
.pa-body.hop.go svg  { animation: paHop 0.5s ease-in-out infinite; }
@keyframes paBob {
  0%   { transform: scaleX(var(--flip,1)) translateY(0) rotate(-2deg); }
  100% { transform: scaleX(var(--flip,1)) translateY(-3px) rotate(2deg); }
}
@keyframes paHop {
  0%,100% { transform: scaleX(var(--flip,1)) translateY(0); }
  50%     { transform: scaleX(var(--flip,1)) translateY(-7px); }
}
.pa-body.jump-in { opacity: 0; }
.pa-tip { animation: paTip 1.2s ease-in-out infinite alternate; }
@keyframes paTip { from { opacity: 0.45; } to { opacity: 1; } }
.pa-tents { transform-box: fill-box; transform-origin: 50% 0; animation: paTents 0.7s ease-in-out infinite alternate; }
@keyframes paTents { from { transform: skewX(-5deg); } to { transform: skewX(5deg); } }

/* Rick & Morty chase — a faint, glowing sprint straight across the screen */
.pa-chase { position: absolute; inset: 0; pointer-events: none; }
.pa-runner {
  position: absolute; will-change: transform;
  opacity: 0.55;
  filter: drop-shadow(0 0 8px rgba(170, 200, 255, 0.55)) saturate(0.65) brightness(1.1);
}
.pa-morty { width: 54px; height: 64px; }
.pa-rick  { width: 64px; height: 66px; }
.pa-runner svg { width: 100%; height: 100%; display: block; transform: scaleX(var(--dir, 1)); }
.pa-runner.run svg { animation: paRunBob 0.26s ease-in-out infinite alternate; }
@keyframes paRunBob {
  from { transform: scaleX(var(--dir,1)) translateY(0); }
  to   { transform: scaleX(var(--dir,1)) translateY(-4px); }
}
/* swinging limbs (pendulum from the top of each rect) */
.pa-runner.run .pa-leg-a, .pa-runner.run .pa-leg-b,
.pa-runner.run .pa-arm-a, .pa-runner.run .pa-arm-b {
  transform-box: fill-box; transform-origin: 50% 0;
}
.pa-runner.run .pa-leg-a, .pa-runner.run .pa-arm-b { animation: paStride 0.26s linear infinite; }
.pa-runner.run .pa-leg-b, .pa-runner.run .pa-arm-a { animation: paStrideRev 0.26s linear infinite; }
@keyframes paStride    { 0%,100% { transform: rotate(26deg);  } 50% { transform: rotate(-26deg); } }
@keyframes paStrideRev { 0%,100% { transform: rotate(-26deg); } 50% { transform: rotate(26deg);  } }

/* Cute little quips floating above the runners — soft glass, not loud comic */
.pa-bubble {
  position: absolute;
  top: -24px; left: 50%;
  transform: translateX(-50%);
  padding: 3px 10px;
  border-radius: 10px;
  background: rgba(16, 24, 52, 0.78);
  border: 1px solid rgba(170, 200, 255, 0.5);
  box-shadow: 0 0 12px rgba(140, 175, 255, 0.25);
  font-family: 'Comic Sans MS', 'Comic Neue', 'Space Grotesk', cursive, sans-serif;
  font-size: 10px; font-weight: 700;
  color: #dce8ff;
  white-space: nowrap;
  animation: paBubblePop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both, paBubbleBob 0.9s ease-in-out 0.45s infinite alternate;
}
.pa-bubble::after {
  content: ''; position: absolute; bottom: -5px; left: 50%; transform: translateX(-50%);
  width: 8px; height: 8px;
  background: inherit;
  border-right: 1px solid rgba(170, 200, 255, 0.5);
  border-bottom: 1px solid rgba(170, 200, 255, 0.5);
  transform: translateX(-50%) rotate(45deg);
  border-radius: 0 0 3px 0;
}
.pa-bubble-rick { border-color: rgba(186, 230, 255, 0.55); color: #cfeeff; }
.pa-bubble-morty { border-color: rgba(255, 224, 150, 0.55); color: #ffeec2; }
@keyframes paBubblePop {
  from { opacity: 0; transform: translateX(-50%) translateY(6px) scale(0.7); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}
@keyframes paBubbleBob {
  from { transform: translateX(-50%) translateY(0); }
  to   { transform: translateX(-50%) translateY(-3px); }
}

/* ─── ALIEN CAT — direct <img> with no Tenor chrome ─── */
.alien-cat-direct {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  border-radius: 20px;
  z-index: 2;
}

/* ============================================================================
   PHOBIE — Arif's real cat as cosmic dancer + section stroller
   ============================================================================ */
.phobie-figure {
  position: relative;
  background:
    radial-gradient(circle at 50% 50%, rgba(142, 109, 214, 0.45), rgba(80, 50, 160, 0.22) 60%, transparent 80%);
  overflow: visible;
}
.phobie-img {
  width: 86%;
  height: 86%;
  margin: 7% auto;
  display: block;
  object-fit: cover;
  border-radius: 50%;
  border: 4px solid var(--champagne);
  box-shadow:
    0 0 30px rgba(233, 216, 166, 0.6),
    0 0 60px rgba(142, 109, 214, 0.5),
    0 14px 28px rgba(0, 0, 0, 0.5);
  animation: phobieDance 0.7s ease-in-out infinite alternate;
  transform-origin: center bottom;
  position: relative;
  z-index: 2;
}
@keyframes phobieDance {
  0%   { transform: translateY(0) rotate(-7deg) scale(1); }
  25%  { transform: translateY(-8px) rotate(0deg) scale(1.04); }
  50%  { transform: translateY(-3px) rotate(7deg) scale(1.02); }
  75%  { transform: translateY(-10px) rotate(2deg) scale(1.05); }
  100% { transform: translateY(0) rotate(-7deg) scale(1); }
}
.phobie-notes {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
}
.phobie-note {
  position: absolute;
  font-size: 24px;
  font-weight: 700;
  color: var(--champagne);
  text-shadow: 0 0 10px rgba(233, 216, 166, 0.7);
  animation: phobieNoteFloat 2.6s ease-in-out infinite;
}
.phobie-n1 { top: 20%; left: 8%; animation-delay: 0s; }
.phobie-n2 { top: 12%; right: 12%; animation-delay: 0.6s; color: var(--cyan-2); }
.phobie-n3 { bottom: 18%; right: 8%; animation-delay: 1.2s; color: var(--pink); font-size: 18px; }
.phobie-n4 { bottom: 20%; left: 12%; animation-delay: 1.8s; color: var(--champagne-2); font-size: 20px; }
@keyframes phobieNoteFloat {
  0%   { transform: translateY(10px) rotate(-12deg) scale(0.6); opacity: 0; }
  40%  { opacity: 1; }
  100% { transform: translateY(-40px) rotate(15deg) scale(1.3); opacity: 0; }
}

/* Phobie strolls across the "Is Arif Cool" reward section */
.phobie-stroll {
  position: absolute;
  bottom: 14px;
  left: -90px;
  width: 64px;
  height: 64px;
  z-index: 1;
  pointer-events: none;
  animation: phobieWalk 24s linear infinite;
}
.phobie-stroll-img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid var(--champagne);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4), 0 0 12px rgba(233, 216, 166, 0.5);
  animation: phobieStrollBob 0.45s ease-in-out infinite alternate;
  display: block;
}
.phobie-stroll-shadow {
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 44px;
  height: 6px;
  background: radial-gradient(ellipse, rgba(0,0,0,0.45) 0%, transparent 70%);
  filter: blur(2px);
}
@keyframes phobieWalk {
  0%   { left: -90px; transform: scaleX(1); }
  48%  { left: calc(100% + 20px); transform: scaleX(1); }
  50%  { left: calc(100% + 20px); transform: scaleX(-1); }
  98%  { left: -90px; transform: scaleX(-1); }
  100% { left: -90px; transform: scaleX(1); }
}
@keyframes phobieStrollBob {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-3px); }
}

/* ============================================================================
   LOADING SCREEN — match new AM header logo
   ============================================================================ */
.loader-am-mark {
  width: 130px;
  height: auto;
  margin: 0 auto 22px;
  display: block;
  animation: loaderMarkGlow 3s ease-in-out infinite;
}
@keyframes loaderMarkGlow {
  0%, 100% { filter: drop-shadow(0 0 6px rgba(120, 160, 235, 0.5)); transform: scale(1); }
  50%      { filter: drop-shadow(0 0 18px rgba(140, 180, 255, 0.85)); transform: scale(1.04); }
}
.loader-orbiter { transform-origin: 65px 92px; animation: loaderOrbit 3.5s linear infinite; }
@keyframes loaderOrbit { to { transform: rotate(360deg); } }
.loader-letter { stroke-dasharray: 320; stroke-dashoffset: 320; animation: loaderDraw 1.5s ease-out forwards; }
@keyframes loaderDraw { to { stroke-dashoffset: 0; } }
.loader-name-new {
  font-family: 'Cormorant Garamond', 'Instrument Serif', serif;
  font-style: italic;
  font-weight: 600;
  font-size: 30px;
  color: #eef2ff;
  letter-spacing: 0.01em;
  display: block;
  text-align: center;
  margin-bottom: 18px;
  text-shadow: 0 0 14px rgba(160, 195, 255, 0.6), 0 0 28px rgba(140, 180, 255, 0.4);
}
.loader-name-new .loader-maul { font-weight: 400; opacity: 0.85; }

/* ============================================================================
   NAV — distinguish pages vs section anchors
   ============================================================================ */
.gooey-item[data-target^="#"] span::before,
.gooey-item[data-target*="index.html#"] span::before {
  content: '·';
  margin-right: 4px;
  color: var(--text-mute);
  opacity: 0.5;
}
.gooey-item[data-target$=".html"]:not([data-target="index.html"]) span::before {
  content: '↗';
  margin-right: 4px;
  font-size: 0.7em;
  color: var(--champagne);
  vertical-align: middle;
  opacity: 0.85;
}
.gooey-item[data-target="index.html"] span::before {
  content: '⌂';
  margin-right: 4px;
  font-size: 0.85em;
  color: var(--champagne);
  vertical-align: middle;
}

/* ============================================================================
   ABOUT — move highlighted "Currently Focused / Certs / Languages / Motto" RIGHT
   ============================================================================ */
@media (min-width: 901px) {
  .about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(24px, 4vw, 56px);
    align-items: start;
  }
  .about-text { grid-column: 1; }
  /* Move the highlighted blocks (about-focus, about-meta-grid, about-signature) to right column */
  .about-text .about-focus,
  .about-text .about-meta-grid,
  .about-text .about-signature {
    grid-column: 2;
  }
  /* But since they're inside .about-text, we use a sub-grid trick */
  .about-text {
    display: contents;
  }
  .about-text > p,
  .about-text > .about-crossroles {
    grid-column: 1;
    grid-row: auto;
  }
  .about-text > .about-focus { grid-column: 2; grid-row: 1; align-self: start; }
  .about-text > .about-meta-grid { grid-column: 2; grid-row: 2; }
  .about-text > .about-signature { grid-column: 2; grid-row: 3; }
  /* Hide the about-cards grid since highlights are now in right column */
  .about-cards { display: none; }
}

/* ============================================================================
   ROTATING GALLERY — brighten side cards more
   ============================================================================ */
.cg-item.cg-adjacent {
  opacity: 0.7 !important;
  filter: blur(1.5px) brightness(0.85) !important;
}

/* ============================================================================
   FOLDER SECTION — roaming alien circles the grid
   ============================================================================ */
.folder-section { position: relative; }
.folder-roamer {
  position: absolute;
  top: 50%; left: 50%;
  width: 36px; height: 36px;
  margin: -18px 0 0 -18px;
  pointer-events: none;
  z-index: 4;
  animation: folderRoamerOrbit 14s linear infinite;
}
.folder-roamer svg { width: 100%; height: 100%; }
.folder-roamer-inner { animation: folderRoamerBob 0.6s ease-in-out infinite alternate; transform-origin: center; }
@keyframes folderRoamerOrbit {
  0%   { transform: translate(280px, -120px) rotate(0deg); }
  25%  { transform: translate(280px,  120px); }
  50%  { transform: translate(-280px, 120px); }
  75%  { transform: translate(-280px, -120px); }
  100% { transform: translate(280px, -120px); }
}
@keyframes folderRoamerBob {
  from { transform: translateY(0) rotate(-6deg); }
  to   { transform: translateY(-6px) rotate(6deg); }
}
@media (max-width: 700px) {
  .folder-roamer { display: none; }
}

/* ============================================================================
   BACKROOM DOOR — easter egg on resume page
   ============================================================================ */
.backroom-door {
  position: fixed;
  bottom: 32px;
  left: 32px;
  width: 56px;
  height: 80px;
  z-index: 50;
  cursor: pointer;
  background: linear-gradient(180deg, #3a2818, #1e1108);
  border: 2px solid #5a3a1f;
  border-radius: 4px 4px 0 0;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6), inset 0 0 20px rgba(0, 0, 0, 0.6);
  transition: transform 0.3s var(--ease), box-shadow 0.4s var(--ease);
  overflow: hidden;
}
.backroom-door::before {
  content: '';
  position: absolute;
  top: 18px;
  right: 6px;
  width: 5px;
  height: 5px;
  background: #d4af37;
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(212, 175, 55, 0.8);
}
.backroom-door::after {
  content: '';
  position: absolute;
  inset: 4px;
  border: 1px solid #5a3a1f;
  border-radius: 2px 2px 0 0;
  pointer-events: none;
}
.backroom-door:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 40px rgba(212, 175, 55, 0.35), 0 0 30px rgba(212, 175, 55, 0.2);
}
.backroom-door-label {
  position: absolute;
  bottom: -22px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  color: var(--text-dim);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}
.backroom-door:hover .backroom-door-label { opacity: 1; }

/* Backroom modal — full-screen liminal yellow room */
.backroom-modal {
  position: fixed;
  inset: 0;
  z-index: 11000;
  display: none;
  background: #c8a14a;
  background-image:
    repeating-linear-gradient(90deg,
      rgba(0, 0, 0, 0.04) 0,
      rgba(0, 0, 0, 0.04) 1px,
      transparent 1px,
      transparent 80px),
    repeating-linear-gradient(0deg,
      rgba(0, 0, 0, 0.04) 0,
      rgba(0, 0, 0, 0.04) 1px,
      transparent 1px,
      transparent 80px),
    radial-gradient(ellipse at 50% 60%, rgba(240, 210, 140, 0.7), rgba(140, 100, 40, 0.95));
  cursor: none;
}
.backroom-modal.open { display: block; animation: backroomFlicker 0.15s steps(2) 1, backroomFade 0.6s ease-in 1; }
@keyframes backroomFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes backroomFlicker {
  0%, 100% { filter: brightness(1); }
  50%      { filter: brightness(1.4); }
}
.backroom-stage {
  position: absolute;
  inset: 0;
  perspective: 800px;
}
.backroom-walls {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.4) 100%);
  pointer-events: none;
}
.backroom-buzz {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Courier New', monospace;
  font-size: 13px;
  color: rgba(0,0,0,0.7);
  letter-spacing: 0.3em;
  animation: backroomBuzz 0.5s ease-in-out infinite;
}
@keyframes backroomBuzz {
  0%, 100% { opacity: 0.4; transform: translateX(-50%) skewX(0deg); }
  50%      { opacity: 0.9; transform: translateX(-50%) skewX(2deg); }
}
.backroom-exit {
  position: absolute;
  top: 30px;
  right: 30px;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(0, 0, 0, 0.8);
  border-radius: 4px;
  color: #c8a14a;
  cursor: pointer;
  font-family: var(--f-mono);
  font-size: 18px;
  z-index: 11002;
  transition: background 0.3s, transform 0.3s;
}
.backroom-exit:hover { background: rgba(0, 0, 0, 0.85); transform: scale(1.1); }
.backroom-message {
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Courier New', monospace;
  font-size: clamp(20px, 3vw, 32px);
  color: rgba(0, 0, 0, 0.85);
  letter-spacing: 0.15em;
  text-align: center;
  text-shadow: 2px 2px 0 rgba(255, 255, 255, 0.2);
  max-width: 90%;
}
.backroom-message small {
  display: block;
  font-size: 0.5em;
  margin-top: 14px;
  opacity: 0.7;
  letter-spacing: 0.2em;
}
/* ── Backroom: interactive flashlight + stalking entity + jumpscare ── */
.backroom-flashlight {
  position: absolute; inset: 0; z-index: 20; pointer-events: none;
  background: radial-gradient(circle 150px at var(--mx, 50%) var(--my, 55%),
    rgba(0,0,0,0) 0, rgba(0,0,0,0) 92px, rgba(8,6,2,0.5) 150px, rgba(3,2,1,0.95) 300px);
}
.backroom-message, .backroom-buzz { z-index: 30; }
.backroom-monster { transform-origin: bottom center; }
.backroom-jumpscare {
  position: absolute; inset: 0; z-index: 11050;
  display: none; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 50%, #2a0606 0%, #000 78%);
}
.backroom-jumpscare.show { display: flex; animation: jsIn 0.16s ease-out both; }
.backroom-jumpscare svg {
  width: min(92vw, 92vh); height: min(92vw, 92vh);
  filter: drop-shadow(0 0 34px rgba(255,40,20,0.55));
  animation: jsTwitch 0.1s steps(2) infinite;
}
@keyframes jsIn { from { transform: scale(0.15); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes jsTwitch { 0% { transform: translate(0,0) scale(1); } 100% { transform: translate(3px,-3px) scale(1.03); } }
.backroom-modal.shake { animation: backroomShake 0.3s linear infinite !important; }
/* scale(1.06) keeps the overlay larger than the viewport so the shake never reveals page edges */
@keyframes backroomShake {
  0%,100% { transform: scale(1.06) translate(0,0) rotate(0deg); }
  20% { transform: scale(1.06) translate(-9px,5px) rotate(-1deg); }
  40% { transform: scale(1.06) translate(8px,-6px) rotate(1deg); }
  60% { transform: scale(1.06) translate(-7px,5px) rotate(-1deg); }
  80% { transform: scale(1.06) translate(7px,-4px) rotate(1deg); }
}
@media (prefers-reduced-motion: reduce) { .backroom-jumpscare svg { animation: none; } }
.backroom-entity {
  position: absolute;
  bottom: 10%;
  width: 80px;
  height: 120px;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(0, 0, 0, 0.95), rgba(0, 0, 0, 0.5) 60%, transparent 80%);
  animation: backroomEntity 8s ease-in-out infinite;
  pointer-events: none;
}
@keyframes backroomEntity {
  0%   { left: -100px; opacity: 0; }
  20%  { opacity: 0.7; }
  50%  { left: 50%; opacity: 0.9; transform: translateX(-50%); }
  80%  { opacity: 0.7; }
  100% { left: calc(100% + 100px); opacity: 0; }
}

/* ─── ABOUT TEXT — extra content blocks ─── */
/* Cross-roles "Also open to" paragraph with highlighted phrases */
.about-crossroles {
  position: relative;
  padding: 22px 24px 22px 26px;
  margin-top: 24px;
  background:
    linear-gradient(135deg, rgba(233, 216, 166, 0.15), rgba(142, 109, 214, 0.10)),
    rgba(10, 16, 36, 0.42);
  border: 1px solid rgba(233, 216, 166, 0.34);
  border-radius: 0 16px 16px 0;
  box-shadow: 0 12px 36px rgba(233, 216, 166, 0.12), inset 0 0 34px rgba(142, 109, 214, 0.07);
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--text);
  overflow: hidden;
}
.about-crossroles::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 4px; height: 100%;
  background: linear-gradient(180deg, var(--champagne), var(--cyan));
  box-shadow: 0 0 18px rgba(233, 216, 166, 0.65);
  animation: acrPulse 3.2s ease-in-out infinite;
}
@keyframes acrPulse { 0%, 100% { opacity: 0.72; } 50% { opacity: 1; } }
.acr-badge {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #ffeec2;
  padding: 4px 11px;
  margin-right: 8px;
  background: linear-gradient(135deg, rgba(233, 216, 166, 0.30), rgba(233, 216, 166, 0.16));
  border: 1px solid rgba(233, 216, 166, 0.65);
  border-radius: 5px;
  box-shadow: 0 0 14px rgba(233, 216, 166, 0.35);
  text-shadow: 0 0 8px rgba(233, 216, 166, 0.5);
  vertical-align: middle;
}
/* Scannable layout for the rewritten "Also open to" block */
.about-crossroles .acr-badge { margin-right: 0; margin-bottom: 11px; }
.about-crossroles .acr-lead { margin: 0 0 12px; font-size: 14.5px; line-height: 1.65; color: var(--text); }
.about-crossroles .acr-roles { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 13px; }
.about-crossroles .acr-roles span {
  font-family: var(--f-display); font-size: 13px; font-weight: 600;
  color: #ffeec2; white-space: nowrap;
  padding: 6px 13px; border-radius: 999px;
  background: linear-gradient(135deg, rgba(233,216,166,0.16), rgba(90,150,255,0.12));
  border: 1px solid rgba(233,216,166,0.4);
}
.about-crossroles .acr-note { margin: 0; font-size: 13px; line-height: 1.6; color: var(--text-mute); }
.about-crossroles strong {
  color: var(--champagne);
  font-weight: 600;
  background: linear-gradient(180deg, transparent 62%, rgba(233, 216, 166, 0.22) 62%);
  padding: 0 2px;
}
.hl-pop {
  background: linear-gradient(180deg, transparent 65%, rgba(90, 150, 255, 0.30) 65%);
  color: var(--text);
  padding: 0 4px;
  border-radius: 3px;
  font-weight: 500;
}

.about-focus {
  margin-top: 28px;
  padding: 22px 24px;
  background:
    linear-gradient(135deg, rgba(233, 216, 166, 0.04), rgba(90, 150, 255, 0.06)),
    rgba(10, 16, 36, 0.45);
  border: 1px solid var(--border-elegant);
  border-radius: 16px;
  position: relative;
  overflow: hidden;
}
.about-focus::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 3px; height: 100%;
  background: linear-gradient(180deg, var(--champagne), var(--cyan));
}
.about-block-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--champagne);
  margin-bottom: 16px;
}
.abt-pulse {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--champagne);
  box-shadow: 0 0 0 0 rgba(233, 216, 166, 0.6);
  animation: aboutPulse 2s ease-out infinite;
}
@keyframes aboutPulse {
  0%   { box-shadow: 0 0 0 0 rgba(233, 216, 166, 0.6); }
  100% { box-shadow: 0 0 0 10px rgba(233, 216, 166, 0); }
}
.about-focus-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0;
  margin: 0;
}
.about-focus-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-mute);
}
.about-focus-list li strong { color: var(--text); font-weight: 500; }
.afl-icon {
  flex-shrink: 0;
  margin-top: 4px;
  color: var(--champagne);
  font-size: 10px;
  text-shadow: 0 0 8px rgba(233, 216, 166, 0.5);
}

.about-meta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 18px;
}
.about-meta-card {
  padding: 16px 18px;
  background: rgba(14, 22, 50, 0.55);
  border: 1px solid var(--border);
  border-radius: 14px;
  transition: border-color 0.4s var(--ease), transform 0.4s var(--ease);
}
.about-meta-card:hover {
  border-color: var(--border-elegant);
  transform: translateY(-2px);
}
.amc-wide { grid-column: 1 / span 2; }
@media (max-width: 540px) {
  .about-meta-grid { grid-template-columns: 1fr; }
  .amc-wide { grid-column: 1; }
}
.amc-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--champagne);
  margin-bottom: 10px;
}
.amc-label svg { color: var(--champagne); }
.amc-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0;
  margin: 0;
}
.amc-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--text-mute);
  line-height: 1.5;
}
.amc-year {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  padding: 2px 6px;
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 600;
  color: var(--cyan-2);
  background: rgba(90, 150, 255, 0.10);
  border: 1px solid rgba(90, 150, 255, 0.25);
  border-radius: 4px;
  letter-spacing: 0.05em;
}
.amc-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.amc-tags span {
  font-family: var(--f-mono);
  font-size: 10.5px;
  padding: 4px 10px;
  border: 1px solid var(--border-elegant);
  border-radius: 999px;
  color: var(--text-mute);
  background: rgba(233, 216, 166, 0.04);
  transition: color 0.3s, border-color 0.3s, background 0.3s;
}
.amc-tags span:hover {
  color: var(--champagne);
  border-color: var(--champagne);
  background: rgba(233, 216, 166, 0.10);
}

.about-signature {
  position: relative;
  margin-top: 24px;
  padding: 22px 24px 22px 56px;
  background: linear-gradient(135deg, rgba(233, 216, 166, 0.08), rgba(142, 109, 214, 0.08));
  border-left: 3px solid var(--champagne);
  border-radius: 0 14px 14px 0;
}
.about-signature p {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: clamp(15px, 1.7vw, 18px);
  color: var(--text);
  line-height: 1.5;
  margin: 0 0 6px 0;
}
.as-icon {
  position: absolute;
  top: 4px;
  left: 16px;
  font-family: var(--f-serif);
  font-size: 60px;
  line-height: 1;
  color: var(--champagne);
  opacity: 0.65;
  font-style: italic;
}
.as-author {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--champagne);
  opacity: 0.7;
}

/* ============================================================================
   v2026.05.30.FINAL — POLISH PASS
   ============================================================================ */

/* ─── BOT FIXES — z-index above header + don't get clipped ─── */
.bot-panel {
  z-index: 99998 !important;
  max-height: calc(100vh - 140px) !important;
}
.bot-launcher { z-index: 99997 !important; }
.bot-peek { z-index: 99996 !important; }
@media (min-width: 901px) {
  .bot-panel { bottom: 100px !important; right: 26px !important; }
}
/* Bot bow + arm animations */
.bot-launcher .bot-bow { transform-origin: 28px 8px; animation: amiBowBounce 1.8s ease-in-out infinite; }
@keyframes amiBowBounce { 0%, 100% { transform: rotate(-3deg) scale(1); } 50% { transform: rotate(3deg) scale(1.05); } }

/* ─── ABOUT layout — RESTORE 2-COL but without empty space ─── */
@media (min-width: 901px) {
  .about-grid {
    display: grid !important;
    grid-template-columns: 1.05fr 1fr !important;
    gap: clamp(28px, 4vw, 48px) !important;
    align-items: start !important;
  }
  .about-text { display: flex !important; flex-direction: column !important; gap: 18px !important; grid-column: 1 !important; }
  .about-text > * { grid-column: auto !important; grid-row: auto !important; }
  .about-cards {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important;
    align-self: start !important;
  }
}

/* ─── MOBILE LANYARD — restore lanyard chrome ─── */
@media (max-width: 768px) {
  .lanyard-strap, .lanyard-clip, .lanyard-anchor, .lanyard-hint,
  .id-card .id-header, .id-card .id-info, .id-card .id-footer,
  .id-card .id-photo-scan, .id-card .id-corner,
  .id-card .id-shine, .id-card .id-hologram {
    display: revert !important;
  }
  .lanyard {
    max-width: 280px !important;
    height: 560px !important;
    margin: 0 auto !important;
    perspective: 1000px !important;
  }
  .lanyard-pivot { position: absolute !important; inset: 0 !important; transform-origin: 50% 0 !important; }
  .id-card {
    position: absolute !important;
    width: 220px !important;
    aspect-ratio: 3 / 4 !important;
    top: 340px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    box-shadow: var(--shadow-elegant) !important;
    border-radius: 18px !important;
    overflow: visible !important;
    margin: 0 !important;
    padding: 14px !important;
  }
  .id-card-inner, .id-face {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    height: 100% !important;
  }
  .id-photo-wrap, .id-photo {
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
    inset: auto !important;
    position: relative !important;
    margin: 0 0 10px 0 !important;
    border-radius: 12px !important;
  }
  .id-photo img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center 20% !important;
    border-radius: 12px !important;
  }
  .id-header { padding: 0 !important; margin-bottom: 8px !important; font-size: 10px !important; }
  .id-info { padding: 0 !important; margin-top: 6px !important; }
  .id-name { font-size: 13px !important; }
  .id-role { font-size: 10px !important; }
  .id-meta { display: none !important; }
  .id-footer { padding: 0 !important; margin-top: 4px !important; font-size: 9px !important; }
  .id-barcode { display: none !important; }
}

/* ─── MOBILE NAV — visible X exit button ─── */
.mobile-nav-exit {
  display: none;
  position: absolute;
  top: 14px;
  right: 14px;
  width: 42px; height: 42px;
  z-index: 99999;
  background: var(--bg);
  border: 1px solid var(--champagne);
  border-radius: 50%;
  color: var(--champagne);
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(233, 216, 166, 0.5);
}
@media (max-width: 900px) {
  body.nav-open .mobile-nav-exit { display: flex; }
}

/* ─── RESUME mobile buttons — fix distortion ─── */
@media (max-width: 600px) {
  .resume-nav {
    flex-direction: column !important;
    gap: 10px !important;
    padding: 12px !important;
  }
  .resume-back { display: inline-block; text-align: center; width: 100%; padding: 8px 0; }
  .resume-nav-actions {
    width: 100%;
    flex-direction: column !important;
    gap: 8px !important;
    align-items: stretch !important;
  }
  .resume-nav-link, .resume-print-btn {
    width: 100% !important;
    justify-content: center !important;
    padding: 12px 16px !important;
    font-size: 13px !important;
    text-align: center !important;
    white-space: normal !important;
  }
}

/* ─── ARIF MAULANA — orbital stars around the name ─── */
.fuzzy-stage { position: relative; }
.fuzzy-orbital {
  position: absolute;
  inset: -40px;
  pointer-events: none;
  z-index: -1;
  animation: fuzzyOrbitalRotate 60s linear infinite;
}
.fuzzy-orbital::before, .fuzzy-orbital::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px dashed rgba(233, 216, 166, 0.25);
  border-radius: 50% / 30%;
}
.fuzzy-orbital::after {
  transform: rotate(35deg);
  border-color: rgba(90, 150, 255, 0.20);
}
.fuzzy-orbital-star {
  position: absolute;
  width: 6px; height: 6px;
  background: radial-gradient(circle, #fff 30%, var(--champagne) 60%, transparent 80%);
  border-radius: 50%;
  box-shadow: 0 0 12px var(--champagne), 0 0 20px rgba(233, 216, 166, 0.6);
  top: 50%; left: 50%;
  margin: -3px 0 0 -3px;
}
.fos-1 { animation: fos1 8s linear infinite; }
.fos-2 { animation: fos2 11s linear infinite; }
.fos-3 { animation: fos3 14s linear infinite; }
@keyframes fos1 { from { transform: rotate(0deg) translateX(280px) rotate(0deg); } to { transform: rotate(360deg) translateX(280px) rotate(-360deg); } }
@keyframes fos2 { from { transform: rotate(120deg) translateX(320px) rotate(-120deg); } to { transform: rotate(480deg) translateX(320px) rotate(-480deg); } }
@keyframes fos3 { from { transform: rotate(240deg) translateX(260px) rotate(-240deg); } to { transform: rotate(600deg) translateX(260px) rotate(-600deg); } }
@keyframes fuzzyOrbitalRotate { to { transform: rotate(360deg); } }
@media (max-width: 768px) {
  .fuzzy-orbital { display: none; }
}

/* ─── BEAUTIFUL MOON ─── */
.theme-moon {
  position: fixed;
  top: 8%;
  right: 6%;
  width: 90px;
  height: 90px;
  z-index: 0;
  pointer-events: none;
  filter: drop-shadow(0 0 30px rgba(233, 216, 166, 0.45)) drop-shadow(0 0 60px rgba(233, 216, 166, 0.25));
  animation: moonFloat 24s ease-in-out infinite;
}
.theme-moon svg { width: 100%; height: 100%; }
@keyframes moonFloat {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(-12px, 14px); }
}
@media (max-width: 600px) {
  .theme-moon { width: 60px; height: 60px; top: 84px; right: 16px; }
}

/* ─── ANIMATED ICONS ─── */
.ec-icon svg, .amc-label svg, .contact-icon svg, .afl-icon, .hf-icon {
  transition: transform 0.4s var(--ease-back);
}
.ec-card:hover .ec-icon svg { transform: scale(1.15) rotate(-6deg); }
.amc-label svg { animation: iconFloat 3s ease-in-out infinite; }
.contact-card-mini:hover .contact-icon svg { transform: scale(1.2) rotate(6deg); }
.hf-item .hf-icon { display: inline-block; animation: iconFloat 3s ease-in-out infinite; }
.hf-item:nth-child(2) .hf-icon { animation-delay: 0.4s; }
.hf-item:nth-child(3) .hf-icon { animation-delay: 0.8s; }
.hf-item:nth-child(4) .hf-icon { animation-delay: 1.2s; }
@keyframes iconFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}

/* ─── Always-on icon animations (about cards + contact) ─── */
.ec-icon svg { animation: ecIconIdle 3.6s ease-in-out infinite; transform-origin: center; }
.ec-card:nth-child(2) .ec-icon svg { animation-delay: 0.5s; }
.ec-card:nth-child(3) .ec-icon svg { animation-delay: 1.0s; }
.ec-card:nth-child(4) .ec-icon svg { animation-delay: 1.5s; }
.ec-icon { animation: ecIconGlow 4.2s ease-in-out infinite; }
.ec-card:nth-child(2) .ec-icon { animation-delay: 0.6s; }
.ec-card:nth-child(3) .ec-icon { animation-delay: 1.2s; }
.ec-card:nth-child(4) .ec-icon { animation-delay: 1.8s; }
/* hover overrides the idle loop so the lift still reads */
.ec-card:hover .ec-icon svg { animation: none; transform: scale(1.16) rotate(-6deg); }
.contact-icon svg { animation: ecIconIdle 3.8s ease-in-out infinite; transform-origin: center; }
.contact-card-mini:nth-child(2) .contact-icon svg { animation-delay: 0.5s; }
.contact-card-mini:nth-child(3) .contact-icon svg { animation-delay: 1.0s; }
.contact-card-mini:hover .contact-icon svg { animation: none; transform: scale(1.2) rotate(6deg); }
@keyframes ecIconIdle {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  30%      { transform: translateY(-3px) rotate(-5deg); }
  65%      { transform: translateY(0) rotate(4deg); }
}
@keyframes ecIconGlow {
  0%, 100% { box-shadow: 0 0 0 rgba(233,216,166,0); border-color: var(--border-elegant); }
  50%      { box-shadow: 0 0 16px rgba(233,216,166,0.22); border-color: rgba(233,216,166,0.42); }
}
@media (prefers-reduced-motion: reduce) {
  .ec-icon svg, .ec-icon, .contact-icon svg { animation: none !important; }
}

/* ─── SLEEPING CATS on Quick Question card ─── */
.reward-card { overflow: visible; }
.sleeping-cats {
  position: absolute;
  top: -56px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 18px;
  pointer-events: none;
  z-index: 4;
}
.sleeping-cats img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid var(--champagne);
  box-shadow: 0 8px 20px rgba(0,0,0,0.5);
  animation: catSleep 4s ease-in-out infinite;
  filter: drop-shadow(0 0 8px rgba(233, 216, 166, 0.4));
}
.sleeping-cats img:nth-child(2) { animation-delay: 0.8s; transform: rotate(8deg); }
.sleeping-cats .zzz {
  position: absolute;
  top: -16px;
  font-family: var(--f-serif);
  font-style: italic;
  font-size: 18px;
  color: var(--champagne);
  animation: zzzFloat 3s ease-in-out infinite;
  pointer-events: none;
}
.sleeping-cats .zzz:nth-of-type(1) { left: 20%; animation-delay: 0s; }
.sleeping-cats .zzz:nth-of-type(2) { left: 50%; animation-delay: 1s; }
.sleeping-cats .zzz:nth-of-type(3) { left: 80%; animation-delay: 2s; }
@keyframes catSleep {
  0%, 100% { transform: translateY(0) rotate(0); }
  50%      { transform: translateY(-2px) rotate(2deg); }
}
@keyframes zzzFloat {
  0%   { opacity: 0; transform: translateY(0) scale(0.6); }
  50%  { opacity: 1; transform: translateY(-12px) scale(1.1); }
  100% { opacity: 0; transform: translateY(-28px) scale(0.8); }
}

/* ─── FEEDBACK FORM ─── */
.feedback-section { padding: clamp(40px, 6vw, 70px) 0; }
.feedback-card {
  max-width: 680px;
  margin: 0 auto;
  padding: clamp(28px, 4vw, 44px);
  background:
    radial-gradient(circle at 0% 0%, rgba(233, 216, 166, 0.08), transparent 50%),
    linear-gradient(135deg, rgba(20, 28, 60, 0.7), rgba(10, 16, 38, 0.85));
  border: 1px solid var(--border-elegant);
  border-radius: 24px;
  text-align: center;
}
.feedback-title {
  font-family: var(--f-display);
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 600;
  margin: 0 0 8px;
  color: var(--text);
}
.feedback-sub {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: 15px;
  color: var(--text-mute);
  margin: 0 0 18px;
}
.feedback-stars {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin: 18px 0 6px;
}
.feedback-star {
  width: 38px; height: 38px;
  font-size: 32px;
  color: var(--text-dim);
  cursor: pointer;
  background: none;
  border: none;
  transition: transform 0.3s var(--ease-back), color 0.3s;
  padding: 0; line-height: 1;
}
.feedback-star:hover, .feedback-star.active {
  color: var(--champagne);
  transform: scale(1.2) rotate(-8deg);
  text-shadow: 0 0 14px rgba(233, 216, 166, 0.6);
}
.feedback-rating-label {
  margin: 0 0 18px;
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--champagne);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  min-height: 14px;
}
.feedback-form textarea {
  width: 100%;
  min-height: 110px;
  padding: 14px 16px;
  background: rgba(8, 12, 30, 0.5);
  border: 1px solid var(--border-elegant);
  border-radius: 12px;
  color: var(--text);
  font-family: var(--f-sans);
  font-size: 14px;
  resize: vertical;
  margin-bottom: 14px;
}
.feedback-form textarea:focus { outline: none; border-color: var(--champagne); }
.feedback-form .form-field { margin-bottom: 14px; text-align: left; }

/* ─── BACKROOM monster ─── */
.backroom-monster {
  position: absolute;
  bottom: 18%;
  left: -200px;
  width: 100px;
  height: 220px;
  z-index: 10;
  animation: backroomMonsterWalk 18s linear infinite;
  pointer-events: none;
}
.backroom-monster svg { width: 100%; height: 100%; filter: drop-shadow(0 0 24px rgba(0, 0, 0, 0.9)) drop-shadow(0 0 8px rgba(255, 80, 30, 0.4)); }
@keyframes backroomMonsterWalk {
  0%   { left: -150px; transform: scale(0.5); }
  40%  { left: 40%; transform: scale(1.1); }
  60%  { left: 60%; transform: scale(1.1); }
  100% { left: calc(100% + 150px); transform: scale(0.5); }
}

/* ─── TEAM GALLERY (projects page) ─── */
.team-gallery-section { padding: clamp(60px, 8vw, 100px) 0; }
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 32px;
}
.team-photo {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--border-elegant);
  cursor: pointer;
  transition: transform 0.4s var(--ease), border-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.team-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s var(--ease);
}
.team-photo:hover {
  transform: translateY(-4px);
  border-color: var(--champagne);
  box-shadow: 0 14px 40px rgba(233, 216, 166, 0.25);
}
.team-photo:hover img { transform: scale(1.05); }
.team-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(3, 6, 26, 0.7));
  opacity: 0.6;
  transition: opacity 0.4s var(--ease);
}
.team-photo:hover::after { opacity: 0.3; }
.team-caption {
  position: absolute;
  bottom: 12px; left: 12px; right: 12px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--champagne);
  z-index: 2;
  pointer-events: none;
}

/* ─── BLACKHOLE — force launcher above other layers ─── */
.wt-launcher {
  z-index: 99996 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  /* Move to left side so it doesn't fight bot launcher for space */
  right: auto !important;
  left: 26px !important;
  bottom: 100px !important;
}
@media (max-width: 768px) {
  .wt-launcher { left: 16px !important; bottom: 90px !important; right: auto !important; }
}
.wt-banner { z-index: 99999 !important; }
.bh-hole { z-index: 99500 !important; }
.bh-char { z-index: 99700 !important; }

/* ============================================================================
   v-d ENHANCEMENTS — applied site-wide (last in file = wins)
   ============================================================================ */

/* ---- Item 1: About — text left, right column = cards + moved certs/langs ---- */
@media (min-width: 881px) {
  .about-grid { display: grid !important; grid-template-columns: 1.05fr 1fr !important; gap: clamp(28px,4vw,52px) !important; align-items: start !important; }
  .about-text { display: flex !important; flex-direction: column !important; gap: 14px !important; grid-column: 1 !important; }
  .about-text > * { grid-column: auto !important; grid-row: auto !important; }
  .about-cards { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 14px !important; grid-column: 2 !important; align-content: start !important; }
  .about-cards .about-aside { grid-column: 1 / -1 !important; }
}
.about-aside { display: flex; flex-direction: column; gap: 16px; }
.about-aside .about-crossroles, .about-aside .about-meta-grid { margin-top: 0; }
@media (max-width: 880px) {
  .about-cards { display: block !important; }
  .about-cards .ec-card { display: none !important; }   /* keep decorative cards desktop-only, as before */
  .about-aside { display: flex !important; }
}

/* ---- Items 6 & 7: rotating coverflow smoothness + gallery never clipped ---- */
/* Drag strip drives transform every frame, so only animate opacity (no transform lag) */
.cg-item { transition: opacity .45s ease !important; }
.circular-gallery { overflow: hidden; }
.circular-gallery.cg-dragging { cursor: grabbing; }
.circular-gallery { cursor: grab; }

/* ===== Work Gallery — ReactBits-style circular gallery (curved draggable photo strip) ===== */
.wg-gallery {
  position: relative;
  height: 470px;
  margin: 36px 0 6px;
  perspective: 1400px;
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y;
}
.wg-gallery.wg-dragging { cursor: grabbing; }
.wg-stage { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; }
.wg-item {
  --wgw: clamp(230px, 32vw, 360px);
  --wgh: clamp(172px, 24vw, 270px);
  position: absolute; top: 50%; left: 50%;
  width: var(--wgw); height: var(--wgh);
  margin-left: calc(var(--wgw) * -0.5);
  margin-top: calc(var(--wgh) * -0.5);
  transition: opacity .45s ease;
  will-change: transform;
}
.wg-item .team-photo {
  display: block; width: 100%; height: 100%;
  margin: 0; padding: 0; position: relative; overflow: hidden;
  border-radius: 18px;
  border: 1px solid var(--border-elegant);
  background: var(--surface);
  cursor: pointer;
  box-shadow: 0 18px 40px rgba(0,0,0,0.45);
}
.wg-item.wg-active .team-photo {
  border-color: rgba(233,216,166,0.6);
  box-shadow: 0 22px 60px rgba(90,150,255,0.28), 0 0 0 1px rgba(233,216,166,0.4);
}
.wg-item .team-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wg-item .team-caption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 22px 14px 12px;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: #e9d8a6; text-align: left;
  background: linear-gradient(180deg, transparent, rgba(4,6,16,0.85));
}
.wg-controls {
  position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 14px; z-index: 5;
}
.wg-btn {
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--border-elegant); background: rgba(16,22,44,0.7);
  color: var(--champagne); font-size: 20px; line-height: 1; cursor: pointer;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: transform .25s var(--ease-back), border-color .3s, background .3s;
}
.wg-btn:hover { transform: translateY(-2px); border-color: var(--champagne); background: rgba(26,34,64,0.85); }
.wg-count { font-family: var(--f-mono); font-size: 12px; color: #9badcc; letter-spacing: 0.1em; min-width: 56px; text-align: center; }
.wg-count .wg-sep { margin: 0 6px; opacity: 0.5; }
.wg-hint {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.06em; color: #6f80a6;
  pointer-events: none;
}
@media (max-width: 768px) { .wg-gallery { height: 400px; } }
@media (max-width: 480px) {
  .wg-gallery { height: 360px; }
  .wg-item { --wgw: clamp(210px, 64vw, 280px); --wgh: clamp(158px, 48vw, 210px); }
}
@media (prefers-reduced-motion: reduce) { .wg-item { transition: none; } }

/* ── Credentials gallery (process page): landscape certificate previews shown in full ── */
.wg-docs .wg-item { --wgw: clamp(260px, 40vw, 440px); --wgh: clamp(196px, 30vw, 320px); }
.wg-docs .wg-item .team-photo { background: radial-gradient(circle at 50% 35%, #131c38, #0a0f22); cursor: pointer; }
.wg-docs .wg-item .team-photo img { object-fit: contain; padding: 14px 14px 34px; }
.wg-docs .wg-item .team-caption { background: linear-gradient(180deg, transparent, rgba(4,6,16,0.92)); }
@media (max-width: 480px) {
  .wg-docs .wg-item { --wgw: clamp(232px, 74vw, 320px); --wgh: clamp(176px, 56vw, 240px); }
}

/* ===== Certificates slider (process page) — PDF previews, tap to open ===== */
.cert-slider-wrap { position: relative; margin-top: 36px; display: flex; align-items: center; gap: 8px; }
.cert-track {
  display: flex; gap: 22px; flex: 1 1 auto;
  overflow-x: auto; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
  padding: 6px 4px 18px;
}
.cert-track::-webkit-scrollbar { display: none; }
.cert-card {
  flex: 0 0 auto; width: clamp(240px, 30vw, 300px);
  scroll-snap-align: center;
  text-decoration: none; color: inherit;
  background: rgba(14,20,42,0.55); border: 1px solid var(--border-elegant);
  border-radius: 18px; overflow: hidden;
  transition: transform .35s var(--ease-back), border-color .35s, box-shadow .35s;
}
.cert-card:hover { transform: translateY(-6px); border-color: rgba(233,216,166,0.5); box-shadow: 0 18px 50px rgba(90,150,255,0.22); }
.cert-preview { position: relative; width: 100%; aspect-ratio: 1 / 1.32; background: #fff; overflow: hidden; }
.cert-preview iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; pointer-events: none; background: #fff; }
.cert-open {
  position: absolute; bottom: 10px; right: 10px;
  font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: #0a1024; background: var(--champagne);
  padding: 5px 10px; border-radius: 999px; opacity: 0; transform: translateY(6px);
  transition: opacity .3s, transform .3s; pointer-events: none;
}
.cert-card:hover .cert-open { opacity: 1; transform: translateY(0); }
.cert-meta { padding: 14px 16px 16px; }
.cert-meta h4 { font-family: var(--f-display); font-size: 14.5px; font-weight: 600; color: var(--text); margin: 0 0 4px; line-height: 1.3; }
.cert-meta p { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--text-mute); margin: 0; }
.cert-arrow {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--border-strong); background: var(--surface);
  color: var(--text); font-size: 22px; line-height: 1; cursor: pointer;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: transform .25s var(--ease-back), border-color .3s, color .3s;
}
.cert-arrow:hover { transform: scale(1.08); border-color: var(--gold); color: var(--gold); }
@media (max-width: 768px) {
  .cert-arrow { display: none; }
  .cert-card { width: clamp(220px, 74vw, 280px); }
}

/* ---- Item 15: bolder header logo (match the loader logo) ---- */
.nav-logo .am-mark, .am-logo .am-mark { transform: scale(1.2); transform-origin: left center; }
.nav-logo .am-state, .am-logo .am-state { font-weight: 700 !important; letter-spacing: 0.005em; }
.nav-logo .am-lock, .am-logo .am-lock { font-weight: 700; }

/* ---- Item 16: bigger moon + planets/rocket/astronaut/satellite (every page) ---- */
.theme-moon { width: 190px !important; height: 190px !important; top: 4% !important; right: 4% !important; overflow: visible; }
@media (max-width: 600px) { .theme-moon { width: 112px !important; height: 112px !important; top: 66px !important; right: 12px !important; } }

/* ─── E.T.-STYLE MOON RIDER — a small, slim silhouette gliding across the moon ─── */
.moon-rider {
  position: absolute;
  bottom: 36%;
  left: 0;
  width: 34%;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  animation: moonRide 18s linear infinite;
  animation-delay: 2.5s;
}
.moon-rider svg { width: 100%; height: auto; display: block; }
.moon-rider .mr-wheel { transform-box: fill-box; transform-origin: center; animation: mrSpin 0.9s linear infinite; }
@keyframes mrSpin { to { transform: rotate(360deg); } }
/* a smooth, gentle arc: rises over the disc, settles on the far side */
@keyframes moonRide {
  0%    { transform: translateX(-65%) translateY(16%) rotate(6deg) scale(0.94); opacity: 0; }
  3%    { opacity: 1; }
  8%    { transform: translateX(8%) translateY(2%) rotate(2deg) scale(0.98); }
  16%   { transform: translateX(105%) translateY(-14%) rotate(-3deg) scale(1); }
  24%   { opacity: 1; }
  30%   { transform: translateX(255%) translateY(4%) rotate(-7deg) scale(0.94); opacity: 0; }
  100%  { transform: translateX(255%) translateY(4%) rotate(-7deg) scale(0.94); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .moon-rider { display: none; } }
.space-decor { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
body.low-power .space-decor { display: none; }
.space-decor .sd-planet { position: absolute; border-radius: 50%; }
.space-decor .sd-earth { width: 76px; height: 76px; top: 26%; left: 4%; background: radial-gradient(circle at 34% 30%, #8fd0ff 0%, #3f86dd 45%, #1c4f96 75%, #0e2f63 100%); box-shadow: inset -10px -8px 22px rgba(0,0,0,0.45), 0 0 28px rgba(80,150,255,0.4); animation: sdFloat 28s ease-in-out infinite; }
.space-decor .sd-earth::after { content:''; position:absolute; inset:0; border-radius:50%; background: radial-gradient(ellipse 18px 10px at 32% 40%, rgba(90,200,140,0.85), transparent 70%), radial-gradient(ellipse 14px 9px at 62% 60%, rgba(90,200,140,0.8), transparent 70%), radial-gradient(ellipse 10px 7px at 48% 25%, rgba(120,210,150,0.7), transparent 70%); mix-blend-mode: screen; }
.space-decor .sd-mars { width: 44px; height: 44px; bottom: 16%; right: 7%; background: radial-gradient(circle at 35% 30%, #ffb083 0%, #df6334 50%, #9c3618 100%); box-shadow: inset -7px -6px 14px rgba(0,0,0,0.5), 0 0 18px rgba(223,99,52,0.4); animation: sdFloat 33s ease-in-out infinite reverse; }
.space-decor .sd-saturn { width: 108px; height: 76px; top: 60%; left: 4%; background: none; box-shadow: none; border-radius: 0; animation: sdFloat 36s ease-in-out infinite; }
.space-decor .sd-saturn::after { display: none; }
.space-decor .sd-saturn svg { width: 100%; height: 100%; display: block; overflow: visible; filter: drop-shadow(0 0 12px rgba(233,216,166,0.3)); }
@keyframes sdFloat { 0%,100% { transform: translate(0,0); } 50% { transform: translate(12px,-18px); } }
.space-decor .sd-satellite { position: absolute; top: 16%; left: 46%; width: 240px; height: 240px; animation: sdOrbit 40s linear infinite; }
.space-decor .sd-satellite svg { position: absolute; top: 0; left: 50%; width: 38px; height: 38px; transform: translateX(-50%); filter: drop-shadow(0 0 8px rgba(120,180,255,0.6)); }
@keyframes sdOrbit { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.space-decor .sd-rocket { position: absolute; left: -80px; bottom: 12%; width: 56px; height: 56px; animation: sdRocketFly 26s linear infinite; }
.space-decor .sd-rocket svg { width: 100%; height: 100%; filter: drop-shadow(0 0 10px rgba(255,160,120,0.5)); }
.space-decor .sd-rocket .rk-flame { transform-origin: 24px 32px; animation: rkFlame .18s ease-in-out infinite alternate; }
@keyframes rkFlame { from { transform: scaleY(0.7); opacity: .8; } to { transform: scaleY(1.25); opacity: 1; } }
@keyframes sdRocketFly { 0% { transform: translate(0,0) rotate(38deg); opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { transform: translate(112vw,-86vh) rotate(38deg); opacity: 0; } }
.space-decor .sd-astronaut { position: absolute; right: 9%; top: 34%; width: 74px; height: 74px; animation: sdAstroFloat 18s ease-in-out infinite; }
.space-decor .sd-astronaut svg { width: 100%; height: 100%; filter: drop-shadow(0 6px 14px rgba(0,0,0,0.4)); animation: sdAstroSpin 24s linear infinite; transform-origin: 50% 50%; }
@keyframes sdAstroFloat { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-16px,22px); } }
@keyframes sdAstroSpin { from { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } to { transform: rotate(-8deg); } }
@media (max-width: 700px) {
  .space-decor .sd-earth { width: 50px; height: 50px; top: 18%; }
  .space-decor .sd-mars { width: 30px; height: 30px; }
  .space-decor .sd-saturn { width: 82px; height: 58px; }
  .space-decor .sd-astronaut { width: 52px; height: 52px; right: 4%; }
  .space-decor .sd-rocket { width: 42px; height: 42px; }
  .space-decor .sd-satellite { width: 160px; height: 160px; }
}

/* ============================================================================
   ELEGANT AMBIENT SPACE DECOR (refinement)
   Make the astronaut, rocket, satellite and planets recede into the cosmic
   backdrop — distant, dreamy depth instead of bright foreground stickers.
   Uses !important so it also tames the per-page inline definitions.
   ============================================================================ */
.space-decor {
  opacity: 0.4 !important;
  filter: saturate(0.55) brightness(0.78) blur(0.8px) !important;
}
/* Remove the cartoon characters entirely — keeps the galaxy elegant & professional */
.space-decor .sd-astronaut,
.space-decor .sd-rocket { display: none !important; }
/* Distant planets + satellite: pushed back into soft, elegant depth */
.space-decor .sd-earth  { box-shadow: inset -10px -8px 22px rgba(0,0,0,0.6), 0 0 14px rgba(80,150,255,0.12) !important; }
.space-decor .sd-mars   { box-shadow: inset -7px -6px 14px rgba(0,0,0,0.62), 0 0 10px rgba(223,99,52,0.10) !important; }
.space-decor .sd-saturn { box-shadow: none !important; }
.space-decor .sd-saturn svg { filter: drop-shadow(0 0 6px rgba(233,216,166,0.18)) !important; }
.space-decor .sd-satellite svg { filter: drop-shadow(0 0 5px rgba(120,180,255,0.26)) !important; }
@media (prefers-reduced-motion: reduce) {
  .space-decor { opacity: 0.3 !important; }
}

/* ---- Item 8: blackhole launcher sits ABOVE the assistant (right side) ---- */
.wt-launcher { left: auto !important; right: 26px !important; bottom: 176px !important; }
@media (max-width: 768px) { .wt-launcher { left: auto !important; right: 16px !important; bottom: 150px !important; } }

/* ---- Mobile lanyard: give the strap enough height to fully contain the ID card,
        so it never overlaps the hero status line or the ARIF MAULANA name ---- */
@media (max-width: 768px) {
  .hero-right { margin-top: 0 !important; min-height: 0 !important; }
  .lanyard { height: 800px !important; margin-top: 0 !important; }
}
@media (max-width: 600px) {
  .hero-right { margin-top: 0 !important; }
  .lanyard { height: 690px !important; margin-top: 0 !important; }
}

/* ---- Item 10: creepier, more-hidden backroom door + lurking monsters ---- */
.backroom-door {
  bottom: 18px !important; left: 18px !important;
  opacity: 0.38 !important;
  filter: brightness(0.65) saturate(0.85);
  transition: opacity .5s ease, transform .3s ease, filter .5s ease !important;
  animation: doorFlicker 6.5s ease-in-out infinite;
}
.backroom-door::before { background: #ff3b1f !important; box-shadow: 0 0 10px rgba(255,59,31,0.9) !important; animation: doorEye 2.6s ease-in-out infinite; }
.backroom-door::after { box-shadow: inset 0 0 24px rgba(0,0,0,0.92); }
.backroom-door:hover { opacity: 1 !important; filter: none; transform: translateY(-4px); }
@keyframes doorFlicker { 0%,46%,100% { opacity: 0.38; } 47% { opacity: 0.14; } 49% { opacity: 0.44; } 72% { opacity: 0.26; } 74% { opacity: 0.4; } }
@keyframes doorEye { 0%,100% { opacity: 1; } 50% { opacity: 0.25; } }

.backroom-lair {
  position: fixed; bottom: 0; left: 0; width: 230px; height: 230px;
  z-index: 49; pointer-events: none;
  background: radial-gradient(circle at 12% 88%, rgba(0,0,0,0.8), rgba(0,0,0,0.35) 45%, transparent 65%);
}
.lair-eyes { position: absolute; width: 22px; height: 6px; }
.lair-eyes::before, .lair-eyes::after {
  content: ''; position: absolute; top: 0; width: 6px; height: 6px; border-radius: 50%;
  background: #ff3b1f; box-shadow: 0 0 9px rgba(255,59,31,0.95);
  animation: lairBlink 4.2s ease-in-out infinite;
}
.lair-eyes::before { left: 0; } .lair-eyes::after { right: 0; }
.le-1 { bottom: 98px; left: 76px; } .le-1::before, .le-1::after { animation-delay: 0.4s; }
.le-2 { bottom: 146px; left: 34px; transform: scale(0.7); }
.le-2::before, .le-2::after { animation-delay: 1.9s; background: #7fffa0; box-shadow: 0 0 9px rgba(127,255,160,0.85); }
.le-3 { bottom: 58px; left: 128px; transform: scale(0.82); } .le-3::before, .le-3::after { animation-delay: 3.1s; }
@keyframes lairBlink { 0%,40%,100% { opacity: 0.92; } 43%,47% { opacity: 0; } 60% { opacity: 0.92; } }
@media (max-width: 600px) { .backroom-lair { display: none; } }

/* ---- Item 13: projects Work Gallery becomes a swipeable slider on mobile ---- */
@media (max-width: 768px) {
  .work-gallery-grid {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 14px !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 14px;
    scrollbar-width: none;
  }
  .work-gallery-grid::-webkit-scrollbar { display: none; }
  .work-gallery-grid .team-photo {
    flex: 0 0 72%;
    scroll-snap-align: center;
    aspect-ratio: 3 / 4;
  }
}

/* ---- Projects page — comprehensive mobile responsiveness ---- */
@media (max-width: 768px) {
  .proj-hero { padding: 116px 18px 46px !important; }
  .proj-hero-title { font-size: clamp(34px, 11vw, 64px); }
  .proj-hero-sub { font-size: 14px; }
  .circular-section { padding-top: 28px; overflow: hidden; }
  /* Clip the 3D carousel so its rotating cards can't spill past the viewport (no sideways scroll) */
  .circular-gallery { height: 420px; margin: 22px 0; overflow: hidden; }
  .cg-global-hint { font-size: 11px; }
  .metrics-dashboard { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .dd-domain { padding: 22px 16px; }
}
@media (max-width: 480px) {
  .proj-hero-title { font-size: clamp(30px, 12vw, 50px); }
  .circular-gallery { height: 372px; }
  .cg-item { width: 220px !important; height: 300px !important; margin-left: -110px !important; margin-top: -150px !important; }
  .metrics-dashboard { grid-template-columns: repeat(2, 1fr); }
  .metric-val { font-size: 30px; }
}

/* ---- Item 14: tidy resume/process top nav into a clean homepage-style pill ---- */
.resume-nav {
  position: sticky; top: 14px; z-index: 200;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  max-width: 900px; margin: 14px auto 0; padding: 8px 12px 8px 18px;
  background: rgba(10,16,38,0.72); backdrop-filter: blur(14px);
  border: 1px solid var(--border-elegant); border-radius: 999px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}
.resume-back { font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--text-mute); white-space: nowrap; }
.resume-back:hover { color: var(--champagne); }
.resume-nav-actions { display: flex; align-items: center; gap: 6px; }
.resume-nav-link {
  padding: 7px 14px; border-radius: 999px; font-size: 13px; color: var(--text);
  transition: background .25s ease, color .25s ease;
}
.resume-nav-link:hover { background: rgba(233,216,166,0.14); color: var(--champagne); }
@media (max-width: 600px) {
  .resume-nav {
    flex-direction: row !important; flex-wrap: wrap; justify-content: center;
    top: 10px; padding: 10px 12px !important; gap: 6px 8px !important;
    max-width: calc(100% - 20px); border-radius: 20px;
  }
  .resume-back { width: 100% !important; text-align: center; padding: 2px 0 6px !important; border-bottom: 1px solid var(--border); }
  .resume-nav-actions { width: 100% !important; justify-content: center !important; gap: 6px !important; flex-direction: row !important; flex-wrap: wrap; align-items: center !important; }
  .resume-nav-link { width: auto !important; padding: 8px 14px !important; font-size: 12px !important; text-align: center !important; }
  .resume-print-btn { width: auto !important; padding: 8px 14px !important; font-size: 12px !important; }
}

/* ============================================================================
   STRESS ROOM — page styles + the deliberately-different nav button
   ============================================================================ */

/* ---- The Stress Room nav button: a chunky arcade button (press me!) ------- */
.nav-stress-btn,
.gooey-item-stress {
  position: relative;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px;
  margin-left: 12px;
  border-radius: 12px;
  font-family: var(--f-mono);
  font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: #ffe9d6;
  background:
    linear-gradient(180deg, rgba(255, 140, 76, 0.36) 0%, rgba(216, 74, 52, 0.46) 100%),
    linear-gradient(180deg, rgba(30, 16, 40, 0.92), rgba(16, 10, 28, 0.92));
  border: 1px solid rgba(255, 138, 86, 0.8);
  /* the 3D arcade base lives in box-shadow so the layout never shifts */
  box-shadow:
    0 4px 0 rgba(132, 34, 18, 0.9),
    0 7px 18px rgba(255, 100, 50, 0.3),
    inset 0 1px 0 rgba(255, 220, 190, 0.4);
  cursor: pointer;
  overflow: hidden;
  transition: transform .14s ease, box-shadow .14s ease, filter .2s ease;
  animation: stressGlowPulse 2.8s ease-in-out infinite;
}
/* scanline texture + travelling shine = retro game cabinet feel */
.nav-stress-btn::before,
.gooey-item-stress::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 3px);
  opacity: 0.5;
}
.nav-stress-btn::after,
.gooey-item-stress::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 36%;
  left: -45%; pointer-events: none;
  background: linear-gradient(105deg, transparent, rgba(255, 236, 210, 0.38), transparent);
  animation: stressShine 3.4s ease-in-out infinite;
}
.nav-stress-btn:hover,
.gooey-item-stress:hover {
  filter: brightness(1.18);
  transform: translateY(2px);
  box-shadow:
    0 2px 0 rgba(132, 34, 18, 0.9),
    0 5px 16px rgba(255, 100, 50, 0.45),
    inset 0 1px 0 rgba(255, 220, 190, 0.4);
  color: #fff4ea;
}
.nav-stress-btn:active,
.gooey-item-stress:active {
  transform: translateY(4px);
  box-shadow:
    0 0 0 rgba(132, 34, 18, 0.9),
    0 3px 12px rgba(255, 100, 50, 0.5),
    inset 0 1px 0 rgba(255, 220, 190, 0.3);
}
.nav-stress-btn.active {
  color: #fff4ea;
  box-shadow:
    0 4px 0 rgba(132, 34, 18, 0.9),
    0 0 24px rgba(255, 110, 56, 0.55),
    inset 0 1px 0 rgba(255, 220, 190, 0.45);
}
.nsb-pad { flex: 0 0 auto; filter: drop-shadow(0 0 5px rgba(255, 150, 90, 0.8)); }
.nsb-spark {
  position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
  border: 1px solid rgba(255, 170, 110, 0);
  animation: stressRing 2.8s ease-out infinite;
}
@keyframes stressGlowPulse {
  0%, 100% { filter: brightness(1); }
  50%      { filter: brightness(1.12); }
}
@keyframes stressShine {
  0%, 55%  { left: -45%; }
  85%, 100% { left: 115%; }
}
@keyframes stressRing {
  0%   { border-color: rgba(255, 170, 110, 0.55); transform: scale(1); opacity: 1; }
  70%  { border-color: rgba(255, 170, 110, 0); transform: scale(1.22); opacity: 0; }
  100% { opacity: 0; transform: scale(1.22); }
}
/* ─── NAV ANIMATIONS — entrance stagger, hover lift, breathing blob ─── */
/* the whole bar drops in softly on load */
.gooey-nav { animation: navDropIn 0.65s cubic-bezier(0.34, 1.3, 0.64, 1) both; }
@keyframes navDropIn {
  from { transform: translateY(-22px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
/* items cascade in one by one */
.gooey-list .gooey-item, .gooey-list .gooey-sep { animation: navItemIn 0.5s cubic-bezier(0.34, 1.4, 0.64, 1) both; }
.gooey-list > *:nth-child(1)  { animation-delay: 0.16s; }
.gooey-list > *:nth-child(2)  { animation-delay: 0.22s; }
.gooey-list > *:nth-child(3)  { animation-delay: 0.28s; }
.gooey-list > *:nth-child(4)  { animation-delay: 0.34s; }
.gooey-list > *:nth-child(5)  { animation-delay: 0.40s; }
.gooey-list > *:nth-child(6)  { animation-delay: 0.46s; }
.gooey-list > *:nth-child(7)  { animation-delay: 0.52s; }
.gooey-list > *:nth-child(8)  { animation-delay: 0.58s; }
.gooey-list > *:nth-child(9)  { animation-delay: 0.64s; }
.gooey-list > *:nth-child(10) { animation-delay: 0.70s; }
@keyframes navItemIn {
  from { opacity: 0; transform: translateY(-12px) scale(0.92); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
/* hover micro-lift on desktop */
@media (min-width: 901px) {
  .gooey-nav:not(.mobile-open) .gooey-item { transition: transform 0.22s var(--ease-back, ease), color 0.22s ease; }
  .gooey-nav:not(.mobile-open) .gooey-item:hover { transform: translateY(-2px); }
}
/* the highlight blob breathes (box-shadow only — JS owns its transform) */
.gooey-blob { animation: blobBreathe 3.2s ease-in-out infinite; }
@keyframes blobBreathe {
  0%, 100% { box-shadow: 0 0 14px rgba(244, 221, 168, 0.35), 0 0 0 rgba(244, 221, 168, 0); }
  50%      { box-shadow: 0 0 24px rgba(244, 221, 168, 0.6), 0 0 44px rgba(244, 221, 168, 0.18); }
}
/* the minimal nav on the other pages drops in too */
.resume-nav { animation: navDropIn 0.65s cubic-bezier(0.34, 1.3, 0.64, 1) both; }
.resume-nav .resume-nav-link, .resume-nav .nav-stress-btn, .resume-nav .resume-print-btn { animation: navItemIn 0.5s cubic-bezier(0.34, 1.4, 0.64, 1) both; }
.resume-nav-actions > *:nth-child(1) { animation-delay: 0.18s; }
.resume-nav-actions > *:nth-child(2) { animation-delay: 0.26s; }
.resume-nav-actions > *:nth-child(3) { animation-delay: 0.34s; }
.resume-nav-actions > *:nth-child(4) { animation-delay: 0.42s; }
.resume-nav-actions > *:nth-child(5) { animation-delay: 0.50s; }
@media (prefers-reduced-motion: reduce) {
  .gooey-nav, .gooey-list .gooey-item, .gooey-list .gooey-sep, .gooey-blob,
  .resume-nav, .resume-nav .resume-nav-link, .resume-nav .nav-stress-btn, .resume-nav .resume-print-btn { animation: none !important; }
}

/* slim divider between on-page section links and standalone page links */
.gooey-sep {
  list-style: none;
  width: 1px;
  height: 18px;
  margin: 0 7px;
  align-self: center;
  background: linear-gradient(180deg, transparent, rgba(184, 201, 232, 0.5), transparent);
  pointer-events: none;
}
.gooey-nav.mobile-open .gooey-sep {
  width: 86%;
  height: 1px;
  margin: 6px auto;
  background: linear-gradient(90deg, transparent, rgba(184, 201, 232, 0.45), transparent);
}

/* gooey-nav variant (homepage): clean text-only ember pill — no icon, no shine */
li.gooey-item-stress { list-style: none; }
li.gooey-item-stress span { color: inherit; }
li.gooey-item-stress.active { color: #fff3ea; }
li.gooey-item-stress::before,
li.gooey-item-stress::after { display: none; }
/* keep the ember look inside the opened mobile menu too (beats the generic card style) */
.gooey-nav.mobile-open .gooey-item.gooey-item-stress {
  background: linear-gradient(120deg, rgba(255, 94, 58, 0.28), rgba(255, 158, 64, 0.18)) !important;
  border-color: rgba(255, 122, 70, 0.75) !important;
  box-shadow: 0 0 18px rgba(255, 100, 50, 0.35);
  margin-left: 0;
}
.gooey-nav.mobile-open .gooey-item.gooey-item-stress span { color: #ffd9c4 !important; text-shadow: 0 0 10px rgba(255, 130, 70, 0.6) !important; }
@media (max-width: 600px) {
  .nav-stress-btn { padding: 8px 14px !important; font-size: 11px !important; margin-left: 0; }
}

/* ---- Hero ------------------------------------------------------------------ */
.stress-hero { padding: 130px 0 26px; position: relative; z-index: 2; text-align: center; }
.stress-hero .process-sub { margin: 0 auto; }
.stress-gradient {
  background: linear-gradient(120deg, #ff8a5c 0%, #ffb86b 35%, #ff5e9d 75%, #c4b5fd 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.stress-instructions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 26px; }
.si-chip {
  padding: 8px 16px; border-radius: 999px;
  font-family: var(--f-mono); font-size: 11.5px; letter-spacing: 0.05em;
  color: var(--text-mute);
  background: rgba(14, 20, 44, 0.66);
  border: 1px solid var(--border-elegant);
}

/* ---- Scroll-velocity rows ---------------------------------------------------- */
.sv-section { padding: 30px 0 26px; overflow: hidden; position: relative; z-index: 2; }
.sv-section-b { padding: 10px 0 30px; }
.sv-row { overflow: hidden; white-space: nowrap; padding: 6px 0; }
.sv-track {
  display: inline-block; white-space: nowrap; will-change: transform;
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(30px, 5.4vw, 62px);
  font-weight: 700; letter-spacing: 0.02em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(170, 195, 245, 0.4);
}
.sv-row-alt .sv-track {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic; font-weight: 400;
  -webkit-text-stroke: 0;
  color: rgba(213, 224, 248, 0.34);
  font-size: clamp(24px, 4.2vw, 48px);
}

/* ---- HUD --------------------------------------------------------------------- */
.stress-main { position: relative; z-index: 2; padding: 4px 0 30px; }
.stress-hud {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-bottom: 14px;
}
.stress-score-wrap { display: flex; align-items: baseline; gap: 12px; }
.stress-score-label { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.18em; color: var(--text-dim); }
.stress-score {
  font-family: 'Space Grotesk', sans-serif; font-size: 38px; font-weight: 700;
  color: #ffb88a; text-shadow: 0 0 18px rgba(255, 138, 92, 0.45);
  min-width: 52px; display: inline-block;
}
.stress-score.bump { animation: scoreBump .35s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes scoreBump { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }
.stress-controls { display: flex; gap: 9px; flex-wrap: wrap; }
.stress-btn {
  padding: 10px 18px; border-radius: 999px; cursor: pointer;
  font-family: var(--f-mono); font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--text); background: rgba(16, 24, 52, 0.8);
  border: 1px solid var(--border-elegant);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), background .22s var(--ease);
}
.stress-btn:hover { transform: translateY(-2px); background: rgba(26, 38, 76, 0.9); box-shadow: 0 8px 22px rgba(0,0,0,0.4); }
.stress-btn-danger {
  color: #ffe7da; border-color: rgba(255, 110, 64, 0.7);
  background: linear-gradient(120deg, rgba(255, 80, 40, 0.3), rgba(255, 140, 60, 0.22));
  box-shadow: 0 0 16px rgba(255, 100, 50, 0.3);
}
.stress-btn-danger:hover { background: linear-gradient(120deg, rgba(255, 80, 40, 0.5), rgba(255, 140, 60, 0.36)); box-shadow: 0 0 26px rgba(255, 100, 50, 0.55); }
.stress-btn-ghost { background: transparent; color: var(--text-mute); }

/* ---- The arena ----------------------------------------------------------------- */
.stress-arena {
  position: relative;
  height: min(64vh, 620px);
  min-height: 380px;
  border-radius: 22px;
  border: 1px solid var(--border-elegant);
  background:
    radial-gradient(ellipse at 50% 120%, rgba(255, 120, 60, 0.07), transparent 55%),
    linear-gradient(180deg, rgba(8, 12, 30, 0.55), rgba(10, 14, 34, 0.82));
  overflow: hidden;
  cursor: crosshair;
  touch-action: none;       /* let the physics own touch gestures inside */
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45), inset 0 0 60px rgba(8, 10, 30, 0.6);
}
.sr-arena-glow {
  position: absolute; left: 0; right: 0; bottom: 0; height: 90px; pointer-events: none;
  background: linear-gradient(0deg, rgba(255, 130, 70, 0.10), transparent);
}
.sr-hint {
  position: absolute; top: 18px; left: 50%; transform: translateX(-50%);
  font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.14em;
  color: var(--text-dim); text-transform: uppercase;
  transition: opacity .6s ease; pointer-events: none; white-space: nowrap;
}
.sr-hint.hide { opacity: 0; }
.stress-arena.sr-shake { animation: srShake .3s linear; }
@keyframes srShake {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-5px, 3px); }
  40% { transform: translate(5px, -3px); }
  60% { transform: translate(-4px, -2px); }
  80% { transform: translate(3px, 2px); }
}

/* falling words (DOM bodies synced to the physics engine) */
.sr-word {
  position: absolute; top: 0; left: 0;
  display: inline-block;
  padding: 9px 16px;
  border-radius: 12px;
  border: 1px solid;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700; letter-spacing: 0.04em; white-space: nowrap;
  backdrop-filter: blur(3px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
  user-select: none; -webkit-user-select: none;
  will-change: transform;
  cursor: pointer;
}
.sr-word-die { transition: opacity .2s ease, filter .2s ease; opacity: 0; filter: blur(4px) brightness(2); }

/* static fallback grid (reduced motion / engine unavailable) */
.stress-arena.sr-static { display: flex; flex-wrap: wrap; gap: 12px; align-content: center; justify-content: center; padding: 40px 24px; cursor: default; touch-action: auto; }
.sr-word-static { position: static; transform: none; cursor: pointer; }
.sr-word-static:hover { filter: brightness(1.3); }

/* debris, shockwave, float labels */
.sr-debris {
  position: absolute; width: 7px; height: 7px; border-radius: 2px;
  pointer-events: none; z-index: 5;
  animation: srDebris .9s cubic-bezier(0.2, 0.8, 0.4, 1) forwards;
}
@keyframes srDebris {
  0%   { transform: translate(-50%, -50%) rotate(0deg) scale(1); opacity: 1; }
  100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(var(--rot)) scale(0.3); opacity: 0; }
}
.sr-shockwave {
  position: absolute; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid rgba(255, 190, 150, 0.85);
  transform: translate(-50%, -50%);
  pointer-events: none; z-index: 4;
  animation: srShock .6s cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
}
@keyframes srShock {
  0%   { transform: translate(-50%, -50%) scale(0.4); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(9); opacity: 0; border-width: 1px; }
}
.sr-float {
  position: absolute; transform: translate(-50%, -50%);
  font-family: var(--f-mono); font-size: 13px; font-weight: 700;
  color: #ffd9b8; text-shadow: 0 0 12px rgba(255, 150, 80, 0.7);
  pointer-events: none; z-index: 6; white-space: nowrap;
  animation: srFloat 1s ease-out forwards;
}
@keyframes srFloat {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.7); }
  18%  { opacity: 1; transform: translate(-50%, -70%) scale(1.05); }
  100% { opacity: 0; transform: translate(-50%, -180%) scale(1); }
}

.stress-footnote {
  margin-top: 16px; text-align: center;
  font-size: 13px; color: var(--text-dim); font-style: italic;
}

/* keep HUD above the decorative fixed moon at any scroll position */
.stress-hud { position: relative; z-index: 3; }

/* ---- Captain Whiskers — chibi pirate cat perched on the arena ------------------ */
.arena-wrap { position: relative; }
.pirate-cat {
  position: absolute;
  top: -64px;
  left: 22%;
  width: 112px;
  z-index: 3;
  pointer-events: none;
  filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.45));
}
.pirate-cat svg {
  width: 100%; height: auto; display: block;
  transform-origin: 50% 100%;
  animation: pcSway 5.4s ease-in-out infinite;   /* gentle idle sway — never stiff */
}
.pirate-cat .pc-body { transform-origin: 50% 92%; animation: pcBreath 3.2s ease-in-out infinite; }
.pirate-cat .pc-tail { transform-box: fill-box; transform-origin: 8% 92%; animation: pcTail 2.4s ease-in-out infinite alternate; }
.pirate-cat .pc-ear,
.pirate-cat .pc-earL { transform-box: fill-box; transform-origin: 50% 100%; }
.pirate-cat .pc-ear  { animation: pcEar 5.5s ease-in-out infinite; }
.pirate-cat .pc-earL { animation: pcEar 7.5s ease-in-out 2.2s infinite; }
.pirate-cat .pc-eye { transform-box: fill-box; transform-origin: 50% 50%; animation: pcBlink 4.2s ease-in-out infinite; }
@keyframes pcSway { 0%, 100% { transform: rotate(-1.6deg); } 50% { transform: rotate(1.8deg); } }
@keyframes pcBreath { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.04) translateY(-1px); } }
@keyframes pcTail { from { transform: rotate(-4deg); } to { transform: rotate(14deg); } }
@keyframes pcEar { 0%, 91%, 100% { transform: rotate(0); } 93% { transform: rotate(-12deg); } 96% { transform: rotate(6deg); } }
@keyframes pcBlink { 0%, 90%, 100% { transform: scaleY(1); } 94% { transform: scaleY(0.08); } }
/* startle: when the arena shakes, the captain hops and her eye goes wide */
.pirate-cat.pc-startle svg { animation: pcHop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); }
.pirate-cat.pc-startle .pc-eye { animation: pcWide 0.45s ease; }
@keyframes pcHop {
  0%   { transform: translateY(0) rotate(0); }
  30%  { transform: translateY(-15px) rotate(-3.5deg); }
  62%  { transform: translateY(2px) rotate(2.5deg); }
  100% { transform: translateY(0) rotate(0); }
}
@keyframes pcWide { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.32); } }
@media (max-width: 700px) {
  /* give the critters their own perch space so they never cover the HUD buttons */
  .arena-wrap { margin-top: 54px; }
  .pirate-cat { width: 72px; top: -41px; left: 4%; }
}
@media (prefers-reduced-motion: reduce) {
  .pirate-cat svg, .pirate-cat .pc-body, .pirate-cat .pc-tail,
  .pirate-cat .pc-ear, .pirate-cat .pc-earL, .pirate-cat .pc-eye { animation: none !important; }
}

/* ============================================================================
   FOOTER v3 — simple, neat, animated: glowing hairline, twinkles, one clean
   row (brand · links · socials · ROUND rocket), tidy mobile stacking.
   ============================================================================ */
.footer {
  position: relative;
  margin-top: 64px;
  padding: 0 0 24px;
  background: linear-gradient(180deg, rgba(8, 12, 30, 0) 0%, rgba(8, 12, 30, 0.66) 38%, rgba(6, 9, 24, 0.9) 100%);
  overflow: hidden;
  z-index: 2;
}
.f-hairline {
  height: 1px;
  background: linear-gradient(90deg, transparent 4%, rgba(233, 216, 166, 0.55) 30%, rgba(90, 150, 255, 0.6) 70%, transparent 96%);
  box-shadow: 0 0 16px rgba(120, 160, 255, 0.35);
  animation: fHairline 6s ease-in-out infinite;
}
@keyframes fHairline { 0%, 100% { opacity: 0.7; } 50% { opacity: 1; } }
.f-stars { position: absolute; inset: 0; pointer-events: none; }
.f-stars span {
  position: absolute;
  width: 2.5px; height: 2.5px; border-radius: 50%;
  background: #dfe8ff;
  animation: fTwinkle 4.2s ease-in-out infinite;
}
.f-stars span:nth-child(1) { top: 26%; left: 6%; }
.f-stars span:nth-child(2) { top: 62%; left: 16%; animation-delay: 0.9s; }
.f-stars span:nth-child(3) { top: 20%; left: 40%; animation-delay: 1.7s; }
.f-stars span:nth-child(4) { top: 66%; left: 60%; animation-delay: 0.4s; }
.f-stars span:nth-child(5) { top: 28%; left: 80%; animation-delay: 2.3s; }
.f-stars span:nth-child(6) { top: 72%; left: 92%; animation-delay: 1.2s; }
@keyframes fTwinkle { 0%, 100% { opacity: 0.15; transform: scale(0.7); } 50% { opacity: 0.85; transform: scale(1.2); } }
/* soft aurora wash behind the footer content */
.footer::before {
  content: '';
  position: absolute;
  left: -8%; right: -8%; top: -55%;
  height: 230px;
  background:
    radial-gradient(ellipse 40% 90% at 26% 100%, rgba(142, 109, 214, 0.14), transparent 70%),
    radial-gradient(ellipse 44% 90% at 72% 100%, rgba(90, 150, 255, 0.12), transparent 70%);
  filter: blur(34px);
  pointer-events: none;
  animation: fAurora 11s ease-in-out infinite alternate;
}
@keyframes fAurora { from { opacity: 0.65; transform: translateX(-14px); } to { opacity: 1; transform: translateX(14px); } }
/* an occasional shooting star streaks across the footer */
.f-stars::after {
  content: '';
  position: absolute;
  top: 32%; left: -12%;
  width: 74px; height: 1.5px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, #e6eeff 60%, #fff);
  box-shadow: 0 0 8px rgba(220, 235, 255, 0.8);
  transform: rotate(-11deg);
  opacity: 0;
  animation: fShoot 9.5s linear infinite;
}
@keyframes fShoot {
  0%, 84%  { opacity: 0; left: -12%; }
  86%      { opacity: 0.95; }
  95%      { opacity: 0; left: 106%; }
  100%     { opacity: 0; left: 106%; }
}
/* the brand glows when greeted */
.f-logo { transition: filter 0.35s ease; }
.f-brand:hover .f-logo { filter: drop-shadow(0 0 12px rgba(121, 192, 255, 0.65)); }

/* one clean row */
.f-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 22px 30px;
  padding: 30px 0 24px;
}
.f-brand { display: flex; flex-direction: column; gap: 7px; }
.f-logo {
  font-family: var(--f-display, 'Space Grotesk', sans-serif);
  font-size: 21px; font-weight: 700;
  background: linear-gradient(120deg, #dcefff, #79c0ff 45%, #e9d8a6);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.f-status { display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.08em; color: var(--text-dim); }

.f-links { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 20px; }
.f-links a {
  position: relative;
  font-size: 13.5px;
  color: var(--text-mute);
  padding: 4px 0;
  transition: color 0.25s ease;
}
.f-links a::after {
  content: ''; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: linear-gradient(90deg, var(--champagne, #e9d8a6), rgba(90, 150, 255, 0.8));
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.3s var(--ease, ease);
}
.f-links a:hover { color: var(--champagne, #e9d8a6); }
.f-links a:hover::after { transform: scaleX(1); }
.f-links .f-stress { color: #ffc9a8; }
.f-links .f-stress:hover { color: #ffe2cd; }

/* round social buttons */
.f-social { display: flex; align-items: center; gap: 10px; }
.f-social a {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  color: var(--text-mute);
  background: rgba(14, 20, 44, 0.55);
  border: 1px solid var(--border-elegant);
  transition: transform 0.25s var(--ease-back, ease), color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.f-social a:hover {
  transform: translateY(-3px);
  color: var(--champagne, #e9d8a6);
  border-color: rgba(233, 216, 166, 0.55);
  box-shadow: 0 8px 20px rgba(90, 150, 255, 0.25);
}
.f-social svg { width: 16px; height: 16px; }

/* ROUND back-to-top rocket */
.f-rocket {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  background: none; border: none; padding: 0;
  color: var(--text-dim);
  cursor: pointer;
}
.f-rocket-circle {
  display: flex; align-items: center; justify-content: center;
  width: 58px; height: 58px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, rgba(90, 150, 255, 0.22), rgba(14, 20, 44, 0.85) 70%);
  border: 1px solid var(--border-elegant);
  overflow: hidden;
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}
.f-rocket:hover .f-rocket-circle {
  border-color: rgba(233, 216, 166, 0.6);
  box-shadow: 0 0 22px rgba(90, 150, 255, 0.35), inset 0 0 14px rgba(90, 150, 255, 0.15);
  transform: translateY(-2px);
}
.f-rocket-ship { display: block; transition: transform 0.5s cubic-bezier(0.34, 1.45, 0.64, 1); }
.f-rocket:hover .f-rocket-ship { transform: translateY(-7px); }
.f-flame { transform-origin: 24px 31px; transform: scaleY(0.35); opacity: 0.35; transition: transform 0.25s ease, opacity 0.25s ease; }
.f-rocket:hover .f-flame { animation: fFlame 0.16s ease-in-out infinite alternate; opacity: 1; }
@keyframes fFlame { from { transform: scaleY(0.85); } to { transform: scaleY(1.3); } }
.f-rocket-label { font-family: var(--f-mono); font-size: 9.5px; letter-spacing: 0.2em; text-transform: uppercase; transition: color 0.25s ease; }
.f-rocket:hover .f-rocket-label { color: var(--champagne, #e9d8a6); }

.f-bottom {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 10px;
  padding-top: 16px;
  border-top: 1px solid var(--border, rgba(255, 255, 255, 0.08));
  font-size: 12.5px;
  color: var(--text-dim);
  text-align: center;
}
.f-bottom .f-dot { opacity: 0.5; }

/* ── tablet: links drop to their own centered row, brand/socials/rocket share row 1 ── */
@media (max-width: 1080px) and (min-width: 761px) {
  .f-main { row-gap: 16px; }
  .f-links { order: 5; width: 100%; justify-content: center; border-top: 1px dashed rgba(184, 201, 232, 0.16); padding-top: 16px; }
}
/* ── tidy mobile stacking: everything centers, in order ── */
@media (max-width: 760px) {
  .f-main {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 18px;
    padding: 26px 0 20px;
  }
  .f-brand { align-items: center; }
  .f-links { justify-content: center; gap: 4px 16px; }
  .f-links a { font-size: 13px; }
  .f-social { gap: 12px; }
  .f-social a { width: 42px; height: 42px; }     /* comfier touch targets */
  .f-bottom { flex-direction: column; gap: 4px; }
  .f-bottom .f-dot { display: none; }
  .footer::before { top: -30%; height: 160px; }
}
@media (prefers-reduced-motion: reduce) {
  .f-stars span, .f-stars::after, .f-hairline, .footer::before, .f-rocket:hover .f-flame { animation: none !important; }
}

/* ============================================================================
   AMI CHAN 2.0 — kawaii assistant avatar: twin-tail sway, blink, sparkles
   ============================================================================ */
.bot-avatar svg { overflow: visible; animation: amiFloat 3.6s ease-in-out infinite; }
@keyframes amiFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2.5px); } }
.ami-tl, .ami-tr { transform-box: fill-box; }
.ami-tl { transform-origin: 85% 8%; animation: amiSwayL 3.4s ease-in-out infinite; }
.ami-tr { transform-origin: 15% 8%; animation: amiSwayR 3.4s ease-in-out -1.7s infinite; }
@keyframes amiSwayL { 0%, 100% { transform: rotate(3deg); } 50% { transform: rotate(-5deg); } }
@keyframes amiSwayR { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(5deg); } }
.ami-ahoge { transform-box: fill-box; transform-origin: 15% 95%; animation: amiAhoge 4.5s ease-in-out infinite; }
@keyframes amiAhoge { 0%, 86%, 100% { transform: rotate(0); } 90% { transform: rotate(-10deg); } 95% { transform: rotate(6deg); } }
.ami-spark { transform-box: fill-box; transform-origin: center; animation: amiSpark 2.2s ease-in-out infinite; }
.ami-spark.as2 { animation-delay: -1.1s; }
@keyframes amiSpark {
  0%, 100% { opacity: 0.3; transform: scale(0.7) rotate(0deg); }
  50%      { opacity: 1; transform: scale(1.15) rotate(20deg); }
}
/* retuned pivots for the new art (override the legacy px origins) */
.bot-avatar .bot-bow { transform-origin: 17px 9px; }
.bot-avatar .bot-arm { transform-origin: 36px 42px; }
.bot-avatar .bot-eyes { transform-origin: 28px 27px; }
/* the small header portrait blinks + bow bounces too */
.bot-header-avatar svg { overflow: visible; }
.bot-header-avatar .bot-eyes { transform-origin: 28px 31px; animation: botBlink 5s linear infinite; }
.bot-header-avatar .bot-bow { transform-origin: 16px 13px; animation: amiBowBounce 1.8s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .bot-avatar svg, .ami-tl, .ami-tr, .ami-ahoge, .ami-spark,
  .bot-header-avatar .bot-eyes, .bot-header-avatar .bot-bow { animation: none !important; }
}

/* ============================================================================
   TWILIGHT TOWN SCENE — stress-page-only dusk backdrop (Lazy Afternoons mood)
   ============================================================================ */
/* re-tint the shared night sky into a violet→amber dusk on this page only */
body.page-stress .starry-night-bg {
  background:
    radial-gradient(ellipse 120% 55% at 24% 100%, rgba(255, 170, 90, 0.30), transparent 62%),
    radial-gradient(ellipse 90% 40% at 70% 104%, rgba(255, 130, 90, 0.18), transparent 60%),
    linear-gradient(180deg,
      #131031 0%, #2a1d4a 24%, #4d2c5c 44%,
      #7c4060 60%, #b05b51 74%, #dd8055 86%, #f2a865 100%);
}
body.page-stress .starry-night-nebula {
  background:
    radial-gradient(ellipse 60% 42% at 30% 30%, rgba(142, 109, 214, 0.16), transparent 60%),
    radial-gradient(ellipse 52% 40% at 74% 62%, rgba(255, 160, 110, 0.14), transparent 60%),
    radial-gradient(ellipse 72% 30% at 55% 86%, rgba(255, 200, 130, 0.12), transparent 65%);
}
.twilight-scene {
  position: fixed;
  inset: 0;
  z-index: -1;             /* above the sky gradient, below page content */
  pointer-events: none;
  overflow: hidden;
}
body.low-power .twilight-scene { display: none; }

/* low golden sun + horizon bloom */
.tw-sun {
  position: absolute;
  left: 17%;
  bottom: 13vh;
  width: 200px; height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle,
    #fff3d6 0%, #ffd998 26%, rgba(255, 178, 102, 0.55) 52%, rgba(255, 150, 90, 0.18) 72%, transparent 82%);
  filter: blur(2px);
  animation: twSun 9s ease-in-out infinite;
}
.tw-sun::after {
  content: ''; position: absolute; left: 50%; top: 58%;
  width: 90vw; height: 130px; transform: translateX(-50%);
  background: radial-gradient(ellipse, rgba(255, 190, 120, 0.30), transparent 70%);
  filter: blur(8px);
}
@keyframes twSun {
  0%, 100% { transform: scale(1); opacity: 0.95; }
  50%      { transform: scale(1.05); opacity: 1; }
}

/* long painterly clouds drifting home */
.tw-cloud {
  position: absolute;
  height: 22px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255, 196, 150, 0.34) 22%, rgba(255, 214, 170, 0.45) 50%, rgba(255, 196, 150, 0.34) 78%, transparent);
  filter: blur(7px);
  will-change: transform;
}
.tw-cloud-1 { top: 16%; width: 44vw; animation: twCloud 130s linear infinite; }
.tw-cloud-2 { top: 26%; width: 30vw; height: 16px; opacity: 0.8; animation: twCloud 170s linear -60s infinite; }
.tw-cloud-3 { top: 9%;  width: 36vw; height: 14px; opacity: 0.6; animation: twCloud 200s linear -130s infinite; }
@keyframes twCloud {
  from { transform: translateX(-50vw); }
  to   { transform: translateX(110vw); }
}

/* rolling hills */
.tw-hills {
  position: absolute;
  left: 0; right: 0; bottom: 6vh;
  width: 100%; height: 24vh;
  filter: blur(1.5px);
}

/* rail viaduct + ghost train */
.tw-viaduct {
  position: absolute;
  left: 0; right: 0; bottom: 13vh;
  height: 72px;
  opacity: 0.95;
}
.tw-viaduct svg { width: 100%; height: 100%; display: block; }
.tw-train {
  position: absolute;
  top: -1px;
  left: 0;
  width: 132px; height: 13px;
  border-radius: 4px;
  background: linear-gradient(180deg, #3c2342 0%, #2c1834 100%);
  /* lit carriage windows */
  background-image:
    repeating-linear-gradient(90deg, transparent 0 9px, rgba(255, 206, 143, 0.95) 9px 15px, transparent 15px 24px),
    linear-gradient(180deg, #3c2342 0%, #2c1834 100%);
  background-size: 100% 5px, 100% 100%;
  background-position: 4px 4px, 0 0;
  background-repeat: no-repeat;
  animation: twTrain 34s linear infinite;
  will-change: transform;
}
.tw-train-light {
  position: absolute; right: -7px; top: 3px;
  width: 9px; height: 7px; border-radius: 50%;
  background: radial-gradient(circle, #ffe9b8, rgba(255, 210, 130, 0) 75%);
}
/* roll across for ~12s, then rest off-screen until the next pass */
@keyframes twTrain {
  0%        { transform: translateX(-160px); }
  36%       { transform: translateX(calc(100vw + 40px)); }
  100%      { transform: translateX(calc(100vw + 40px)); }
}

/* town skyline + waking windows */
.tw-town {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  width: 100%; height: 19vh;
}
.tw-win { animation: twWin 6s ease-in-out infinite; }
.tw-win.w2 { animation-delay: 1.3s; }
.tw-win.w3 { animation-delay: 2.6s; }
.tw-win.w4 { animation-delay: 3.8s; }
.tw-win.w5 { animation-delay: 5s; }
@keyframes twWin {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}

/* birds heading home across the dusk */
.tw-birds {
  position: absolute;
  top: 22%;
  left: 0;
  width: 90px;
  animation: twBirds 26s linear infinite;
  opacity: 0;
  will-change: transform;
}
.tw-birds svg { width: 100%; height: auto; display: block; }
@keyframes twBirds {
  0%   { transform: translateX(-120px) translateY(0); opacity: 0; }
  4%   { opacity: 0.8; }
  20%  { transform: translateX(40vw) translateY(-26px); }
  36%  { opacity: 0.8; }
  40%  { transform: translateX(104vw) translateY(-10px); opacity: 0; }
  100% { transform: translateX(104vw) translateY(-10px); opacity: 0; }
}

@media (max-width: 700px) {
  .tw-sun { width: 130px; height: 130px; left: 10%; }
  .tw-hills { bottom: 5vh; height: 18vh; }
  .tw-viaduct { bottom: 10.5vh; height: 52px; }
  .tw-town { height: 14vh; }
}
@media (prefers-reduced-motion: reduce) {
  .tw-sun, .tw-cloud, .tw-train, .tw-birds, .tw-win { animation: none !important; }
  .tw-birds { display: none; }
}

/* ---- Arena buddies — King Piglet & Pip the space chick -------------------------- */
.buddy-pig, .buddy-chick {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.4));
}
.buddy-pig { top: -54px; left: 35%; width: 92px; }
.buddy-chick { top: -46px; left: 47%; width: 66px; }
.buddy-pig svg, .buddy-chick svg {
  width: 100%; height: auto; display: block;
  transform-origin: 50% 100%;
}
.buddy-pig svg { animation: pcSway 6.2s ease-in-out -2s infinite; }
.buddy-chick svg { animation: bcBob 3.4s ease-in-out infinite; }
@keyframes bcBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
/* pig idle bits */
.buddy-pig .bp-body { transform-origin: 50% 92%; animation: pcBreath 3.6s ease-in-out -1s infinite; }
.buddy-pig .bp-ear { transform-box: fill-box; transform-origin: 80% 90%; animation: bpEar 4.8s ease-in-out infinite; }
.buddy-pig .bp-ear2 { transform-box: fill-box; transform-origin: 20% 90%; animation: bpEar 4.8s ease-in-out 1.6s infinite; }
.buddy-pig .bp-tail { transform-box: fill-box; transform-origin: 0% 100%; animation: bpTail 2.2s ease-in-out infinite alternate; }
.buddy-pig .bp-snout { transform-box: fill-box; transform-origin: center; animation: bpSniff 5.5s ease-in-out infinite; }
@keyframes bpEar { 0%, 88%, 100% { transform: rotate(0); } 92% { transform: rotate(-10deg); } 96% { transform: rotate(5deg); } }
@keyframes bpTail { from { transform: rotate(-6deg); } to { transform: rotate(10deg); } }
@keyframes bpSniff { 0%, 90%, 100% { transform: scale(1); } 94% { transform: scale(1.12); } 97% { transform: scale(1.05); } }
/* chick idle bits */
.buddy-chick .bc-wing  { transform-box: fill-box; transform-origin: 90% 20%; }
.buddy-chick .bc-wing2 { transform-box: fill-box; transform-origin: 10% 20%; }
.buddy-chick .bc-antenna { animation: bcPing 2.4s ease-in-out infinite; }
@keyframes bcPing { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }
/* startle reactions — each friend panics in their own way */
.buddy-pig.pc-startle svg { animation: bpJump 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes bpJump {
  0%   { transform: translateY(0) scaleY(1); }
  20%  { transform: translateY(2px) scaleY(0.88); }
  55%  { transform: translateY(-13px) scaleY(1.06) rotate(2.5deg); }
  80%  { transform: translateY(1px) scaleY(0.96); }
  100% { transform: translateY(0) scaleY(1); }
}
.buddy-pig.pc-startle .bp-ear  { animation: bpEarFlap 0.5s ease; }
.buddy-pig.pc-startle .bp-ear2 { animation: bpEarFlap 0.5s ease 0.05s; }
@keyframes bpEarFlap { 0%, 100% { transform: rotate(0); } 40% { transform: rotate(-16deg); } 70% { transform: rotate(8deg); } }
.buddy-chick.pc-startle svg { animation: bcPanic 0.55s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes bcPanic {
  0%   { transform: translateY(0) rotate(0); }
  30%  { transform: translateY(-17px) rotate(-5deg); }
  60%  { transform: translateY(-6px) rotate(4deg); }
  100% { transform: translateY(0) rotate(0); }
}
.buddy-chick.pc-startle .bc-wing  { animation: bcFlapL 0.55s ease; }
.buddy-chick.pc-startle .bc-wing2 { animation: bcFlapR 0.55s ease; }
@keyframes bcFlapL { 0%, 100% { transform: rotate(0); } 35% { transform: rotate(-38deg); } 70% { transform: rotate(-12deg); } }
@keyframes bcFlapR { 0%, 100% { transform: rotate(0); } 35% { transform: rotate(38deg); } 70% { transform: rotate(12deg); } }
@media (max-width: 700px) {
  .buddy-pig { width: 58px; top: -34px; left: 42%; }
  .buddy-chick { width: 44px; top: -30px; left: 74%; }
}
@media (prefers-reduced-motion: reduce) {
  .buddy-pig svg, .buddy-chick svg, .buddy-pig .bp-body, .buddy-pig .bp-ear, .buddy-pig .bp-ear2,
  .buddy-pig .bp-tail, .buddy-pig .bp-snout, .buddy-chick .bc-antenna { animation: none !important; }
}

/* ============================================================================
   UNIVERSE CLAW — stress-page claw machine + fans + winnings shelf
   ============================================================================ */
.claw-section { position: relative; z-index: 2; }
.claw-stage {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 30px;
  flex-wrap: wrap;
}
/* excited onlookers */
.claw-fans { display: flex; align-items: flex-end; gap: 6px; }
.cf-fan { width: 64px; filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.4)); }
.cf-fan svg { width: 100%; height: auto; display: block; }
.cf-alien { animation: cfBounce 1.1s ease-in-out infinite; }
.cf-chick { width: 54px; animation: cfBounce 1.1s ease-in-out 0.3s infinite; }
@keyframes cfBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.cf-fan .cf-armL, .cf-fan .cf-armR { transform-box: fill-box; transform-origin: 90% 10%; }
.cf-fan .cf-armR { transform-origin: 10% 10%; }
.cf-fan .cf-wingL, .cf-fan .cf-wingR { transform-box: fill-box; transform-origin: 90% 80%; }
.cf-fan .cf-wingR { transform-origin: 10% 80%; }
.cf-fan.cheer { animation: cfCheer 0.32s ease-in-out 4; }
@keyframes cfCheer { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-16px) rotate(-5deg); } }
.cf-fan.cheer .cf-armL { animation: cfWaveL 0.3s ease-in-out 4 alternate; }
.cf-fan.cheer .cf-armR { animation: cfWaveR 0.3s ease-in-out 4 alternate; }
@keyframes cfWaveL { from { transform: rotate(0); } to { transform: rotate(-42deg); } }
@keyframes cfWaveR { from { transform: rotate(0); } to { transform: rotate(42deg); } }
.cf-fan.cheer .cf-wingL { animation: cfWaveL 0.25s ease-in-out 5 alternate; }
.cf-fan.cheer .cf-wingR { animation: cfWaveR 0.25s ease-in-out 5 alternate; }
.cf-fan.aww { animation: cfAww 1.3s ease both; }
@keyframes cfAww { 0% { transform: translateY(0); } 35%, 70% { transform: translateY(4px) rotate(3deg); } 100% { transform: translateY(0); } }

/* cabinet */
.claw-machine {
  width: min(430px, 100%);
  border-radius: 20px 20px 14px 14px;
  background: linear-gradient(180deg, #2c1f52 0%, #1d1438 60%, #16102c 100%);
  border: 1px solid rgba(176, 150, 255, 0.4);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5), 0 0 34px rgba(142, 109, 214, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  overflow: hidden;
}
.cm-marquee {
  padding: 9px 0;
  text-align: center;
  font-family: var(--f-mono);
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.3em;
  color: #ffe9a8;
  text-shadow: 0 0 12px rgba(255, 233, 168, 0.7);
  background:
    repeating-linear-gradient(90deg, rgba(255, 233, 168, 0.18) 0 8px, rgba(255, 176, 208, 0.16) 8px 16px, rgba(127, 233, 255, 0.16) 16px 24px),
    rgba(10, 8, 24, 0.6);
  animation: cmMarquee 1.2s steps(3) infinite;
}
@keyframes cmMarquee { to { background-position: 24px 0, 0 0; } }
.cm-glass {
  position: relative;
  height: 300px;
  margin: 10px 12px 0;
  border-radius: 10px;
  background:
    linear-gradient(155deg, rgba(190, 215, 255, 0.10) 0%, rgba(190, 215, 255, 0.02) 38%, rgba(190, 215, 255, 0.08) 100%),
    rgba(8, 10, 26, 0.65);
  border: 1px solid rgba(176, 196, 240, 0.3);
  overflow: hidden;
}
.cm-rail { position: absolute; top: 12px; left: 6px; right: 6px; height: 5px; border-radius: 3px; background: linear-gradient(180deg, #6f6396, #3c3458); }
.cm-arm {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 5;
}
.cm-cable { width: 3px; height: 14px; background: linear-gradient(180deg, #8d82b8, #5d5384); transition: height 0.95s ease-in-out; }
.cm-claw { display: block; }
.cm-prong { transform-box: fill-box; transition: transform 0.3s ease; }
.cm-prong-l { transform-origin: 100% 0; }
.cm-prong-r { transform-origin: 0 0; }
.cm-claw.cm-grab .cm-prong-l { transform: rotate(18deg); }
.cm-claw.cm-grab .cm-prong-r { transform: rotate(-18deg); }
.cm-hold { position: relative; width: 0; height: 0; }
.cm-hold .cm-prize {
  position: absolute;
  left: 0; top: -6px;
  transform: translateX(-50%) scale(0.94);
  bottom: auto;
  transition: opacity 0.5s ease, top 0.55s ease-in;
}
.cm-hold .cm-prize.cm-falling { top: 230px; opacity: 0; }
.cm-pile { position: absolute; inset: auto 0 0 0; height: 70px; }
.cm-prize { position: absolute; width: 44px; height: 44px; }
.cm-prize svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.45)); }
.cm-chute {
  position: absolute;
  left: 3%; bottom: 0;
  width: 18%;
  height: 56px;
  border-radius: 8px 8px 0 0;
  background: linear-gradient(180deg, rgba(10, 8, 24, 0.92), rgba(20, 14, 40, 0.85));
  border: 1px solid rgba(176, 150, 255, 0.35);
  border-bottom: none;
  display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: 6px;
  z-index: 4;
}
.cm-chute span { font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.22em; color: #ffe9a8; opacity: 0.85; }
.cm-flash { position: absolute; inset: 0; background: radial-gradient(circle at 12% 86%, rgba(255, 233, 168, 0.5), transparent 55%); opacity: 0; transition: opacity 0.25s ease; pointer-events: none; }
.cm-flash.on { opacity: 1; }
.cm-conf {
  position: absolute;
  width: 7px; height: 7px; border-radius: 2px;
  animation: cmConf 1s cubic-bezier(0.2, 0.8, 0.4, 1) forwards;
  z-index: 6;
}
@keyframes cmConf {
  from { transform: translate(0, 0) rotate(0); opacity: 1; }
  to   { transform: translate(var(--cx), var(--cy)) rotate(260deg); opacity: 0; }
}
.cm-panel {
  display: flex;
  justify-content: center;
  gap: 14px;
  padding: 14px 0 16px;
}
.claw-btn {
  min-width: 56px;
  padding: 11px 16px;
  border-radius: 12px;
  font-family: var(--f-mono);
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.08em;
  color: #fff1f4;
  background: linear-gradient(180deg, #5a4ab0, #41338a);
  border: 1px solid rgba(176, 150, 255, 0.55);
  box-shadow: 0 4px 0 #2c2260, 0 8px 18px rgba(0, 0, 0, 0.4);
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.2s ease;
  user-select: none; -webkit-user-select: none; touch-action: none;
}
.claw-btn:hover { filter: brightness(1.15); }
.claw-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #2c2260, 0 4px 10px rgba(0, 0, 0, 0.4); }
.claw-btn:disabled { opacity: 0.45; cursor: default; }
.claw-btn-drop {
  background: linear-gradient(180deg, #d8542a, #a83a1c);
  border-color: rgba(255, 160, 110, 0.7);
  box-shadow: 0 4px 0 #6e2410, 0 8px 18px rgba(216, 84, 42, 0.4);
  animation: clawDropPulse 2.2s ease-in-out infinite;
}
.claw-btn-drop:active { box-shadow: 0 1px 0 #6e2410, 0 4px 10px rgba(216, 84, 42, 0.4); }
@keyframes clawDropPulse { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.22); } }

/* winnings shelf */
.claw-shelf {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 150px;
  max-width: 190px;
  padding: 16px;
  border-radius: 16px;
  background: rgba(14, 20, 44, 0.6);
  border: 1px solid var(--border-elegant);
}
.cs-label { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.22em; color: var(--champagne, #e9d8a6); }
.cs-row { display: flex; flex-wrap: wrap; gap: 7px; min-height: 40px; }
.cs-item { width: 36px; height: 36px; animation: csPop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.cs-item svg { width: 100%; height: 100%; }
@keyframes csPop { from { transform: scale(0) rotate(-30deg); } to { transform: scale(1) rotate(0); } }
.cs-count { font-size: 11.5px; color: var(--text-dim); font-family: var(--f-mono); }

@media (max-width: 820px) {
  .claw-stage { gap: 20px; }
  .claw-fans { order: 2; }
  .claw-shelf { order: 3; flex-direction: row; align-items: center; max-width: 100%; width: min(430px, 100%); }
  .cs-row { flex: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .cf-alien, .cf-chick, .cm-marquee, .claw-btn-drop { animation: none !important; }
}

/* ---- Pet parade — cats & pigs pacing back and forth along the bottom ---------- */
.cat-parade {
  position: relative;
  height: 92px;
  overflow: hidden;
  z-index: 2;
  margin-top: 8px;
}
.cp-walker {
  position: absolute;
  bottom: 4px;
  left: 0;
  width: 100px;
  will-change: transform;
  /* "alternate" = walk to the far edge, turn around, walk back — bolak-balik */
  animation: cpWalk 26s linear infinite alternate;
}
.cp-walker svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.4)); }
/* the flip wrapper turns the character to face its walking direction;
   the snap happens at the turnaround point, off-screen, so it's invisible */
.cp-flip { animation: cpFace 52s linear infinite; }
@keyframes cpFace {
  0%, 49.999%  { transform: scaleX(1); }
  50%, 100%    { transform: scaleX(-1); }
}
.cp-w1 { --fur: #8ea2cf; --fur-d: #7e92bd; animation-duration: 26s; }
.cp-w1 .cp-flip { animation-duration: 52s; }
.cp-w2 { --fur: #f4b8c8; --fur-d: #e294ab; width: 84px; bottom: 2px; animation-duration: 21s; animation-delay: -7s; }
.cp-w2 .cp-flip { animation-duration: 42s; animation-delay: -7s; }
.cp-w3 { --fur: #d8b46a; --fur-d: #c2a05c; width: 70px; bottom: 0; animation-duration: 31s; animation-delay: -18s; }
.cp-w3 .cp-flip { animation-duration: 62s; animation-delay: -18s; }
.cp-w4 { --fur: #f6c8a8; --fur-d: #e2a380; width: 62px; bottom: 0; animation-duration: 24s; animation-delay: -13s; }
.cp-w4 .cp-flip { animation-duration: 48s; animation-delay: -13s; }
/* pace between just past each edge */
@keyframes cpWalk {
  from { transform: translateX(-130px); }
  to   { transform: translateX(calc(100vw + 30px)); }
}
/* ---- They GLIDE — feathered wings, a gentle bank, breathing hover-shadow ---- */
.cp-walker .cpw { animation: cpFly 1.9s ease-in-out infinite alternate; transform-origin: 50% 92%; will-change: transform; }
@keyframes cpFly {
  from { transform: translateY(-2px) rotate(-1.3deg); }
  to   { transform: translateY(-11px) rotate(1.3deg); }
}
/* feathered wings flap from the shoulder with a soft feather-spread on the down-stroke */
.cp-walker .cp-wing-f,
.cp-walker .cp-wing-b { transform-box: fill-box; transform-origin: 90% 92%; will-change: transform; }
.cp-walker .cp-wings { filter: drop-shadow(0 0 2.6px rgba(200, 222, 255, 0.55)); }
.cp-w2 .cp-wings, .cp-w4 .cp-wings { filter: drop-shadow(0 0 2.6px rgba(255, 200, 222, 0.55)); }
.cp-walker .cp-wing-f { animation: cpFlapF 0.55s cubic-bezier(0.42, 0, 0.4, 1) infinite alternate; }
.cp-walker .cp-wing-b { animation: cpFlapB 0.55s cubic-bezier(0.42, 0, 0.4, 1) 0.07s infinite alternate; opacity: 0.9; }
/* up-stroke (raised, feathers furled) ←→ down-stroke (lowered, feathers spread) */
@keyframes cpFlapF { from { transform: rotate(-32deg) scaleY(0.94); } to { transform: rotate(14deg) scaleY(1.06); } }
@keyframes cpFlapB { from { transform: rotate(-22deg) scaleY(0.96); } to { transform: rotate(20deg) scaleY(1.03); } }
/* soft shadow on the ground below each flyer — breathes in time with the glide */
.cp-walker::after {
  content: '';
  position: absolute;
  left: 22%; right: 22%; bottom: -7px;
  height: 7px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(10, 8, 20, 0.45), transparent 70%);
  animation: cpShadow 1.9s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes cpShadow { from { transform: scaleX(1); opacity: 0.5; } to { transform: scaleX(0.64); opacity: 0.26; } }
/* legs dangle & paddle softly — they're airborne now, not marching */
.cp-leg { transform-box: fill-box; transform-origin: 50% 0; }
.cp-leg-a, .cp-leg-b2 { animation: cpDangle 0.95s ease-in-out infinite alternate; }
.cp-leg-b, .cp-leg-a2 { animation: cpDangle 0.95s ease-in-out 0.47s infinite alternate; }
@keyframes cpDangle { from { transform: rotate(-8deg); } to { transform: rotate(10deg); } }
.cp-walker .cp-tail { transform-box: fill-box; transform-origin: 90% 90%; animation: cpTailWag 1.5s ease-in-out infinite alternate; }
@keyframes cpTailWag { from { transform: rotate(-7deg); } to { transform: rotate(11deg); } }
.cp-walker .cp-head { transform-box: fill-box; transform-origin: 20% 80%; animation: cpHeadBob 1.9s ease-in-out infinite alternate; }
@keyframes cpHeadBob { from { transform: rotate(-2.5deg); } to { transform: rotate(2.5deg); } }
/* piggy ears flap as they trot */
.cp-walker .pg-ear, .cp-walker .pg-ear2 { transform-box: fill-box; transform-origin: 50% 100%; }
.cp-walker .pg-ear  { animation: pgFlap 0.62s ease-in-out infinite alternate; }
.cp-walker .pg-ear2 { animation: pgFlap 0.62s ease-in-out 0.2s infinite alternate; }
@keyframes pgFlap { from { transform: rotate(-4deg); } to { transform: rotate(7deg); } }
.cp-butterfly {
  position: absolute;
  bottom: 50px; left: 0;
  font-size: 15px;
  animation: cpWalk 21s linear -7s infinite alternate, cpFlutter 1.6s ease-in-out infinite alternate;
  filter: drop-shadow(0 0 6px rgba(160, 190, 255, 0.6));
}
@keyframes cpFlutter { from { margin-bottom: 0; } to { margin-bottom: 16px; } }
@media (prefers-reduced-motion: reduce) { .cat-parade { display: none; } }

/* ---- Outro: breathing circle -------------------------------------------------- */
.stress-outro { text-align: center; position: relative; z-index: 2; }
.breath-circle {
  width: 120px; height: 120px; margin: 0 auto 26px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(170, 200, 255, 0.5);
  background: radial-gradient(circle, rgba(90, 150, 255, 0.16), rgba(90, 150, 255, 0.03) 70%);
  box-shadow: 0 0 34px rgba(110, 160, 255, 0.25);
  animation: breathe 7s ease-in-out infinite;
}
.breath-circle span { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-mute); }
@keyframes breathe {
  0%, 100% { transform: scale(0.86); box-shadow: 0 0 22px rgba(110, 160, 255, 0.18); }
  50%      { transform: scale(1.1);  box-shadow: 0 0 44px rgba(110, 160, 255, 0.4); }
}
@media (prefers-reduced-motion: reduce) {
  .breath-circle, .nav-stress-btn, .gooey-item-stress, .nsb-spark,
  .nav-stress-btn::after, .gooey-item-stress::after { animation: none !important; }
}

@media (max-width: 700px) {
  .stress-hero { padding: 112px 0 18px; }
  .stress-arena { height: 56vh; min-height: 330px; }
  .stress-hud { flex-direction: column; align-items: stretch; }
  .stress-score-wrap { justify-content: center; }
  .stress-controls { justify-content: center; }
  .sv-track { -webkit-text-stroke-width: 0.8px; }
}