/* =========================================================
   HOME — gorix.zip aesthetic adaptation
   + LATENT-style cinematic scroll layer (GSAP + Lenis)
   ========================================================= */

:root {
  --bg: #0c0c0d;
  --ink: #f4f3f0;
  --accent: #fbbf24;
  --bg-card: #111113;
}

html {
  background: var(--bg);
}

/* Lenis smooth-scroll recommended styles */
html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

body {
  background: var(--bg);
  color: var(--ink);
  overflow-x: hidden;
}

/* ---- Canvas background ---- */
.bg-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  width: 100%;
  height: 100%;
}

/* =========================================================
   NEW: Global noise overlay (SVG turbulence grain)
   ========================================================= */
.noise-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  opacity: 0.55;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");
  background-size: 220px;
  animation: grain-shift 1.2s steps(4) infinite;
}

@keyframes grain-shift {
  0% {
    transform: translate(0, 0);
  }

  25% {
    transform: translate(-6px, 4px);
  }

  50% {
    transform: translate(4px, -6px);
  }

  75% {
    transform: translate(-4px, -4px);
  }

  100% {
    transform: translate(0, 0);
  }
}

/* ---- Nav scrim: top fade like gorix ---- */
.nav-scrim {
  pointer-events: none;
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 40;
  height: 8rem;
  background: linear-gradient(to bottom, rgba(12, 12, 13, 1) 0%, rgba(12, 12, 13, 0.5) 40%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 12%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 12%, transparent 100%);
}

/* ---- Fixed corner meta ---- */
.corner-meta {
  position: fixed;
  z-index: 50;
  font-family: 'Space Grotesk', monospace;
  font-size: 0.78rem;
  color: rgba(244, 243, 240, 0.55);
  pointer-events: none;
  user-select: none;
  display: none;
}

.corner-meta.tl {
  top: 1rem;
  left: 1rem;
}

.corner-meta.bl {
  bottom: 1rem;
  left: 1rem;
  display: flex;
  align-items: center;
  gap: 6px;
}

.corner-meta.br {
  bottom: 1rem;
  right: 1rem;
}

@media (min-width: 1024px) {
  .corner-meta {
    display: flex;
  }
}

.corner-meta:hover {
  color: rgba(244, 243, 240, 0.75);
}

.corner-meta .live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22c55e;
  animation: pulse-dot 2.5s infinite;
}

@keyframes pulse-dot {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.2;
  }
}

/* ---- Main content wrapper ---- */
.home-main {
  position: relative;
  z-index: 10;
}

/* =========================================================
   NEW: fade + blur reveal system
   Every [data-reveal] starts opacity:0 / blur / translateY
   ========================================================= */
[data-reveal] {
  opacity: 0;
  filter: blur(20px);
  transform: translateY(80px);
  will-change: transform, opacity, filter;
}

.no-motion [data-reveal],
.reveal-done[data-reveal] {
  opacity: 1;
  filter: none;
  transform: none;
}

/* =========================================================
   NEW: animated stats strip (number counters)
   ========================================================= */
/* =========================================================
   GITHUB CONTRIBUTIONS GRAPH — monochromatic heatmap
   ========================================================= */
.gh-graph-section {
  position: relative;
  z-index: 10;
  padding: 2rem 0 0;
}

.gh-graph-inner {
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.gh-graph-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.gh-graph-label {
  font-family: 'Space Grotesk', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(244, 243, 240, 0.4);
}

.gh-graph-link {
  font-family: 'Space Grotesk', monospace;
  font-size: 0.72rem;
  color: rgba(244, 243, 240, 0.35);
  text-decoration: none;
  transition: color 0.2s;
}

.gh-graph-link:hover {
  color: rgba(244, 243, 240, 0.7);
}

.gh-graph-wrap {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.gh-graph-grid {
  display: grid;
  grid-template-rows: repeat(7, clamp(10px, 1.1vw, 15px));
  grid-auto-flow: column;
  grid-auto-columns: clamp(10px, 1.1vw, 15px);
  gap: clamp(2px, 0.22vw, 4px);
  overflow: hidden;
  padding-bottom: 4px;
  justify-content: center;
  width: 100%;
}

.gh-graph-grid::-webkit-scrollbar {
  display: none;
}

.gh-cell {
  border-radius: 3px;
  background: rgba(244, 243, 240, 0.06);
}

.gh-cell[data-level="1"] { background: rgba(244, 243, 240, 0.15); }
.gh-cell[data-level="2"] { background: rgba(244, 243, 240, 0.30); }
.gh-cell[data-level="3"] { background: rgba(244, 243, 240, 0.50); }
.gh-cell[data-level="4"] { background: rgba(244, 243, 240, 0.80); }

.gh-graph-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.4rem;
  margin-top: 0.5rem;
}

.gh-graph-less,
.gh-graph-more {
  font-family: 'Space Grotesk', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  color: rgba(244, 243, 240, 0.3);
}

.gh-graph-legend {
  display: flex;
  gap: 3px;
}

.gh-legend-box {
  width: 13px;
  height: 13px;
  border-radius: 3px;
  background: rgba(244, 243, 240, 0.06);
}

.gh-legend-box[data-level="1"] { background: rgba(244, 243, 240, 0.15); }
.gh-legend-box[data-level="2"] { background: rgba(244, 243, 240, 0.30); }
.gh-legend-box[data-level="3"] { background: rgba(244, 243, 240, 0.50); }
.gh-legend-box[data-level="4"] { background: rgba(244, 243, 240, 0.80); }

/* Responsive non-scrollable graph optimization */
@media (max-width: 991px) {
  .gh-cell[data-col="0"], .gh-cell[data-col="1"], .gh-cell[data-col="2"],
  .gh-cell[data-col="3"], .gh-cell[data-col="4"], .gh-cell[data-col="5"],
  .gh-cell[data-col="6"], .gh-cell[data-col="7"], .gh-cell[data-col="8"],
  .gh-cell[data-col="9"] {
    display: none !important;
  }
}

@media (max-width: 767px) {
  /* Hide older weeks on mobile so the graph fits 100% without horizontal scrollbar */
  .gh-cell[data-col="10"], .gh-cell[data-col="11"], .gh-cell[data-col="12"],
  .gh-cell[data-col="13"], .gh-cell[data-col="14"], .gh-cell[data-col="15"],
  .gh-cell[data-col="16"], .gh-cell[data-col="17"], .gh-cell[data-col="18"],
  .gh-cell[data-col="19"], .gh-cell[data-col="20"], .gh-cell[data-col="21"],
  .gh-cell[data-col="22"], .gh-cell[data-col="23"], .gh-cell[data-col="24"],
  .gh-cell[data-col="25"] {
    display: none !important;
  }

  .gh-graph-grid {
    grid-template-rows: repeat(7, 10px);
    grid-auto-columns: 10px;
    gap: 3px;
    justify-content: center;
    overflow: hidden;
  }
}

@media (max-width: 480px) {
  .gh-cell[data-col="26"], .gh-cell[data-col="27"], .gh-cell[data-col="28"],
  .gh-cell[data-col="29"] {
    display: none !important;
  }

  .gh-graph-grid {
    grid-template-rows: repeat(7, 9px);
    grid-auto-columns: 9px;
    gap: 2px;
    justify-content: center;
    overflow: hidden;
  }
}

/* =========================================================
   STATS
   ========================================================= */
.stats-section {
  position: relative;
  z-index: 10;
  padding: 6rem 0;
}

.stats-inner {
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 1.5rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

@media (min-width: 768px) {
  .stats-inner {
    grid-template-columns: repeat(4, 1fr);
  }
}

.stat-card {
  border: 1px solid rgba(244, 243, 240, 0.08);
  border-radius: 12px;
  padding: 1.75rem 1.5rem;
  background: #121216;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  transition: border-color 0.3s, transform 0.3s, scale 0.3s ease-out;
}

.stat-card:hover {
  border-color: rgba(244, 243, 240, 0.22);
  transform: translateY(-3px);
}

.stat-value {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: clamp(2rem, 5vw, 3.25rem);
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.stat-value .suffix {
  color: var(--accent);
  font-size: 0.6em;
  vertical-align: super;
}

.stat-label {
  font-family: 'Space Grotesk', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(244, 243, 240, 0.4);
}

/* =========================================================
   NEW: infinite marquee
   ========================================================= */
.marquee-section {
  position: relative;
  z-index: 10;
  padding: 3.5rem 0;
  overflow: hidden;
  border-top: 1px solid rgba(244, 243, 240, 0.06);
  border-bottom: 1px solid rgba(244, 243, 240, 0.06);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.marquee-track {
  display: flex;
  width: max-content;
  will-change: transform;
}

.marquee-chunk {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.marquee-word {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: clamp(2rem, 6vw, 4.5rem);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(244, 243, 240, 0.28);
  padding: 0 1.5rem;
  white-space: nowrap;
  transition: color 0.4s, -webkit-text-stroke-color 0.4s;
}

.marquee-word.solid {
  color: rgba(244, 243, 240, 0.85);
  -webkit-text-stroke: 0;
}

.marquee-sep {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
  opacity: 0.7;
}

/* =========================================================
   NEW: big typography interstitials (section transitions)
   ========================================================= */
.statement-section {
  position: relative;
  z-index: 10;
  min-height: 70svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4rem 1.5rem;
}

.statement-text {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: clamp(1.6rem, 5vw, 3.75rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  max-width: 60rem;
  text-align: center;
  color: rgba(244, 243, 240, 0.2);
}

.statement-text .w {
  display: inline-block;
  margin-right: 0.28em;
  color: rgba(244, 243, 240, 0.45);
  transition: color 0.3s ease;
}

.statement-text .w.lit {
  color: var(--ink);
}

.statement-text .hl.lit {
  color: var(--accent);
}

/* =========================================================
   FLOATING PROJECT SCATTER CANVAS
   ========================================================= */
.project-scatter-section {
  position: relative;
  /* Must be >= the pinned child's own height (100vh) plus the scroll
     distance driving the pin (ScrollTrigger end: '+=160%' in animations.js).
     Too small and the section's own box ends before the pin releases, so
     the next section's flow starts underneath and bleeds through the fixed
     layer for the back half of the scroll. Keep these two numbers in sync. */
  min-height: 260vh;
  padding: 0;
  /* Override .statement-section's align-items:center: this section pins its
     100vh child inside a taller box, so centering it would fix it well down
     from the real viewport top instead of flush against it. */
  align-items: flex-start;
  justify-content: flex-start;
}

.scatter-sticky-container {
  position: relative;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Statement sits near the top of the pinned viewport, clear of the orbit below */
.scatter-top-statement {
  position: absolute;
  top: 13vh;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 52rem;
  padding: 0 1.5rem;
  text-align: center;
  z-index: 10;
  pointer-events: none;
}

.scatter-top-statement .statement-text {
  font-size: clamp(1.5rem, 3.8vw, 2.75rem);
  line-height: 1.25;
  user-select: none;
}

/* Weighted center dot: the orbit's anchor, set low but clear of the bottom edge */
.scatter-center-dot {
  position: absolute;
  top: 72%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #0c0c0d;
  border: 3px solid var(--accent);
  box-shadow: 0 0 25px rgba(251, 191, 36, 0.45), inset 0 0 14px rgba(251, 191, 36, 0.3),
    0 14px 30px -6px rgba(0, 0, 0, 0.7);
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.scatter-center-dot .dot-inner {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 14px var(--accent), 0 0 28px rgba(251, 191, 36, 0.5);
}

/* Cards layer origin centered on the weighted dot, so the orbit is drawn around it */
.scatter-cards-layer {
  position: absolute;
  top: 72%;
  left: 50%;
  width: 0;
  height: 0;
  z-index: 5;
  pointer-events: none;
}

.scatter-card-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 250px;
  margin-top: -110px;
  margin-left: -125px;
  pointer-events: auto;
  will-change: transform, opacity;
}

.scatter-card-wrapper:hover {
  z-index: 100 !important;
}

.scatter-card-inner {
  position: relative;
  width: 100%;
  background: #141418;
  border: 1px solid rgba(244, 243, 240, 0.14);
  border-radius: 12px;
  padding: 0.75rem;
  color: inherit;
  box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.6);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease;
}

.scatter-card-inner::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background: radial-gradient(220px circle at center, var(--card-accent, rgba(251, 191, 36, 0.2)), transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 0;
}

.scatter-card-wrapper:hover .scatter-card-inner {
  transform: scale(1.12);
  border-color: rgba(251, 191, 36, 0.6);
  box-shadow: 0 20px 45px -10px rgba(0, 0, 0, 0.85), 0 0 25px var(--card-accent, rgba(251, 191, 36, 0.3));
}

.scatter-card-wrapper:hover .scatter-card-inner::before {
  opacity: 1;
}

.scatter-card-media {
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 8px;
  overflow: hidden;
  background: #09090b;
  margin-bottom: 0.6rem;
  position: relative;
  z-index: 1;
}

.scatter-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.scatter-card-wrapper:hover .scatter-card-media img {
  transform: scale(1.06);
}

.scatter-year-badge {
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  font-family: 'Space Grotesk', monospace;
  font-size: 0.62rem;
  padding: 2px 6px;
  border-radius: 4px;
  background: #09090b;
  border: 1px solid rgba(244, 243, 240, 0.12);
  color: rgba(244, 243, 240, 0.7);
}

.scatter-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Space Grotesk', monospace;
  font-size: 2rem;
  font-weight: 700;
  color: var(--accent);
  background: rgba(251, 191, 36, 0.08);
}

.scatter-card-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.scatter-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: 'Space Grotesk', monospace;
  font-size: 0.65rem;
}

.scatter-card-cat {
  color: rgba(244, 243, 240, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.scatter-card-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.98rem;
  font-weight: 600;
  color: #ffffff;
  margin: 0;
  line-height: 1.2;
}

.scatter-card-tagline {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.76rem;
  color: rgba(244, 243, 240, 0.65);
  margin: 0;
  line-height: 1.35;
}

/* Hidden detail section that expands smoothly on hover */
.scatter-card-detail {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease, padding 0.35s ease, margin 0.35s ease;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.scatter-card-wrapper:hover .scatter-card-detail {
  max-height: 260px;
  opacity: 1;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px dashed rgba(244, 243, 240, 0.1);
}

.scatter-card-desc {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.74rem;
  color: rgba(244, 243, 240, 0.55);
  line-height: 1.45;
  margin: 0;
}

.scatter-card-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.scatter-card-stack .badge {
  font-size: 0.6rem;
  font-family: 'Space Grotesk', monospace;
  padding: 1px 6px;
  border-radius: 3px;
  background: rgba(244, 243, 240, 0.05);
  border: 1px solid rgba(244, 243, 240, 0.08);
  color: rgba(244, 243, 240, 0.7);
}

.scatter-card-actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.2rem;
}

.scatter-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.72rem;
  font-weight: 500;
  text-decoration: none;
  border-radius: 5px;
  transition: all 0.2s ease;
}

.scatter-action-btn.primary {
  background: rgba(244, 243, 240, 0.1);
  border: 1px solid rgba(244, 243, 240, 0.2);
  color: #ffffff;
  padding: 0.3rem 0.65rem;
}

.scatter-action-btn.primary:hover {
  background: #ffffff;
  color: #0c0c0d;
  border-color: #ffffff;
}

.scatter-action-btn.secondary {
  padding: 0.3rem 0.5rem;
  border: 1px solid rgba(244, 243, 240, 0.12);
  color: rgba(244, 243, 240, 0.6);
}

.scatter-action-btn.secondary:hover {
  color: #ffffff;
  border-color: rgba(244, 243, 240, 0.3);
  background: rgba(244, 243, 240, 0.1);
}

@media (max-width: 768px) {
  .scatter-card-wrapper {
    width: 180px;
    margin-top: -90px;
    margin-left: -90px;
  }
}

/* ---- About / Hero section ---- */
.about-section {
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

@media (min-width: 640px) {
  .about-section {
    padding: 2.5rem;
  }
}

@media (min-width: 1024px) {
  .about-section {
    padding: 3rem;
  }
}

.about-inner {
  max-width: 58rem;
  width: 100%;
}

.about-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: start;
}

@media (max-width: 639px) {
  .about-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .about-grid {
    justify-items: center;
    text-align: center;
    width: 100%;
    gap: 1.75rem;
  }

  .portrait-wrap {
    width: 100%;
    max-width: 250px;
    margin: 0 auto;
    justify-self: center;
  }

  .identity-col {
    align-items: center;
    text-align: center;
    margin: 0 auto;
    width: 100%;
  }

  .name-row {
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .hero-name {
    text-align: center;
  }

  .action-buttons {
    justify-content: center;
  }

  .bio-wrapper {
    text-align: center;
  }

  .bio-para {
    text-align: center;
  }
}

@media (min-width: 640px) {
  .about-grid {
    grid-template-columns: 260px 1fr;
    gap: 3rem;
  }
}

@media (min-width: 1024px) {
  .about-grid {
    grid-template-columns: 320px 1fr;
    gap: 3rem;
    align-items: stretch;
  }
}

/* Portrait */
.portrait-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 3/4;
  max-width: 34rem;
  flex-shrink: 0;
  perspective: 1000px;
}

@media (min-width: 640px) {
  .portrait-wrap {
    width: 260px;
    height: 100%;
    min-height: 347px;
    max-width: none;
    aspect-ratio: auto;
  }
}

@media (min-width: 1024px) {
  .portrait-wrap {
    width: 320px;
    min-height: 427px;
  }
}

.portrait-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  transform-style: preserve-3d;
}

.portrait-wrap:hover .portrait-card-inner {
  transform: rotateY(180deg);
}

.portrait-front,
.portrait-back {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(244, 243, 240, 0.08);
}

.portrait-front {
  background: #0a0a0b;
}

.portrait-back {
  background: var(--bg-card);
  transform: rotateY(180deg);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 1.5rem;
  border: 1px dashed rgba(244, 243, 240, 0.15);
}

.portrait-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  filter: grayscale(1) contrast(1.1) brightness(0.9);
  transition: opacity 0.5s ease;
}

/* Grain overlay */
.portrait-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.07'/%3E%3C/svg%3E");
  background-size: 200px;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 5;
}

/* Retro Card Back Styles */
.portrait-back-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 1.25rem;
  font-family: 'Space Grotesk', monospace;
  color: rgba(244, 243, 240, 0.7);
  text-align: left;
}

.portrait-back-title {
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  color: var(--accent);
  border-bottom: 1px solid rgba(244, 243, 240, 0.1);
  padding-bottom: 0.5rem;
  text-transform: uppercase;
  font-weight: 600;
}

.portrait-back-grid {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  font-size: 0.78rem;
}

.portrait-back-item {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px dashed rgba(244, 243, 240, 0.06);
  padding-bottom: 0.25rem;
}

.portrait-back-label {
  color: rgba(244, 243, 240, 0.4);
}

.portrait-back-val {
  color: rgba(244, 243, 240, 0.85);
  font-weight: 500;
}

.portrait-back-footer {
  margin-top: auto;
  font-size: 0.65rem;
  color: rgba(244, 243, 240, 0.3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-align: center;
}

/* Identity / bio column */
.identity-col {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  max-width: 34rem;
}

/* Name row */
.name-row {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 0.375rem;
}

@media (min-width: 640px) {
  .name-row {
    flex-direction: row;
    align-items: center;
    gap: 0.625rem;
  }
}

.hero-name {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(1.75rem, 5vw, 2.5rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.005em;
  color: #f4f3f0;
}

/* ---- Intro sequence: terminal typing + staged loads ---- */
/* elements hidden until their turn in the intro timeline */
.intro-hide {
  opacity: 0;
  transform: translateY(18px);
  filter: blur(8px);
}

.no-motion .intro-hide,
.intro-hide.intro-shown {
  opacity: 1;
  transform: none;
  filter: none;
}

/* hide the static name during boot until the typing script
   stashes it (JS-on only; no-JS users always see the name) */
html.boot .hero-name {
  visibility: hidden;
}

html.boot .hero-name.typing-ready {
  visibility: visible;
}

/* typed text container keeps height while empty */
.hero-name .typed-text {
  display: inline-block;
  min-height: 1em;
}

/* blinking terminal caret */
.hero-name .type-caret {
  display: inline-block;
  width: 0.55em;
  height: 1.05em;
  margin-left: 0.08em;
  background: #ffffff;
  vertical-align: text-bottom;
  animation: caret-blink 0.85s step-end infinite;
}

.hero-name .type-caret.caret-off {
  display: none;
}

/* caret that travels through the bio paragraphs as they type */
.bio-caret {
  display: inline-block;
  width: 0.5em;
  height: 1em;
  margin-left: 0.06em;
  background: #ffffff;
  vertical-align: text-bottom;
  animation: caret-blink 0.85s step-end infinite;
}

@keyframes caret-blink {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
}

/* Action buttons (icon-only expandable like gorix) */
.action-buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.625rem;
}

.action-btn {
  display: inline-flex;
  height: 2.25rem;
  align-items: center;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid rgba(244, 243, 240, 0.2);
  background: transparent;
  color: rgba(244, 243, 240, 0.75);
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s, color 0.15s;
  text-decoration: none;
  cursor: pointer;
}

.action-btn:hover {
  border-color: rgba(244, 243, 240, 0.35);
  background: rgba(244, 243, 240, 0.05);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.1);
  color: #f4f3f0;
}

.action-btn-icon {
  display: inline-flex;
  width: 2.25rem;
  height: 2.25rem;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: color 0.15s;
}

.action-btn-label {
  overflow: hidden;
  max-width: 0;
  transition: max-width 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: #f4f3f0;
}

.action-btn:hover .action-btn-label {
  max-width: 160px;
  padding-right: 0.75rem;
}

/* Bio paragraphs */
.bio-para {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.92rem;
  color: rgba(244, 243, 240, 0.55);
  line-height: 1.65;
}

@media (min-width: 640px) {
  .bio-para {
    line-height: 1.7;
  }
}

@media (min-width: 1024px) {
  .bio-para {
    line-height: 1.75;
  }
}

.bio-para svg {
  display: inline;
  vertical-align: -0.15em;
  margin-right: 0.5rem;
  color: #f4f3f0;
}

.bio-link {
  display: inline-block;
  vertical-align: baseline;
  padding: 0 0.25rem;
  border-radius: 5px;
  border: 1px solid transparent;
  font-size: 0.9em;
  color: #f4f3f0;
  transition: border-color 0.15s;
}

.bio-link:hover {
  border-color: rgba(244, 243, 240, 0.4);
}

/* ---- Works section ---- */
.works-section {
  position: relative;
  z-index: 10;
  width: 100%;
  padding: 6rem 0;
}

.works-inner {
  max-width: 76rem;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* Header */
.works-header {
  margin-bottom: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.works-header-left {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.works-top-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.25rem;
}

.section-tag {
  font-family: 'Space Grotesk', monospace;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  color: var(--accent);
  text-transform: uppercase;
  font-weight: 600;
}

.works-counter-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: 'Space Grotesk', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(244, 243, 240, 0.04);
  border: 1px solid rgba(244, 243, 240, 0.12);
  color: rgba(244, 243, 240, 0.7);
}

.works-counter-badge .live-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 6px rgba(34, 197, 94, 0.6);
}

.works-heading {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: clamp(1.85rem, 4.5vw, 2.75rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #ffffff;
}

.works-sub {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.95rem;
  color: rgba(244, 243, 240, 0.55);
  line-height: 1.6;
  max-width: 38rem;
}

/* Toolbar Controls */
.works-controls {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 2.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid rgba(244, 243, 240, 0.08);
}

@media (min-width: 768px) {
  .works-controls {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.works-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.works-controls-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* Search wrap */
.works-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 240px;
}

.works-search-input {
  width: 100%;
  background: rgba(244, 243, 240, 0.03);
  border: 1px solid rgba(244, 243, 240, 0.12);
  border-radius: 6px;
  padding: 0.42rem 1.8rem 0.42rem 2.2rem;
  color: #f4f3f0;
  font-size: 0.78rem;
  font-family: 'Plus Jakarta Sans', sans-serif;
  outline: none;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}

.works-search-input::placeholder {
  color: rgba(244, 243, 240, 0.35);
}

.works-search-input:focus {
  border-color: rgba(251, 191, 36, 0.5);
  background: rgba(244, 243, 240, 0.06);
  box-shadow: 0 0 12px rgba(251, 191, 36, 0.15);
}

.works-search-wrap .search-icon {
  position: absolute;
  left: 0.75rem;
  color: rgba(244, 243, 240, 0.4);
  pointer-events: none;
}

.search-clear-btn {
  position: absolute;
  right: 0.4rem;
  background: transparent;
  border: none;
  color: rgba(244, 243, 240, 0.45);
  font-size: 1.1rem;
  line-height: 1;
  padding: 2px 6px;
  cursor: pointer;
  border-radius: 3px;
  transition: color 0.15s;
}

.search-clear-btn:hover {
  color: #ffffff;
}

/* View switcher — hidden, showcase list is the only layout now */
.works-view-toggle {
  display: none;
}

/* Works Layout Modes */
.works-grid.view-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem;
}

@media (min-width: 640px) {
  .works-grid.view-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1080px) {
  .works-grid.view-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.works-grid.view-list {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* Project Card */
.works-grid .project-card {
  position: relative;
  background: #121216;
  border: 1px solid rgba(244, 243, 240, 0.1);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease, box-shadow 0.35s ease;
}

/* Mouse spotlight */
.works-grid .project-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(380px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), var(--card-accent, rgba(251, 191, 36, 0.15)), transparent 75%);
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.works-grid .project-card:hover {
  border-color: rgba(244, 243, 240, 0.22);
  transform: translateY(-4px);
  box-shadow: 0 16px 36px -12px rgba(0, 0, 0, 0.6);
}

.works-grid .project-card:hover::before {
  opacity: 1;
}

/* Card Cover */
.card-cover-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #09090b;
  border-bottom: 1px solid rgba(244, 243, 240, 0.06);
}

.works-grid .card-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.9) contrast(1.05);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), filter 0.6s ease;
}

.works-grid .project-card:hover .card-cover {
  transform: scale(1.05);
  filter: brightness(1) contrast(1.1);
}

.card-cover-overlay {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 3;
}

.card-year {
  font-family: 'Space Grotesk', monospace;
  font-size: 0.68rem;
  padding: 2px 8px;
  border-radius: 4px;
  background: #09090b;
  border: 1px solid rgba(244, 243, 240, 0.12);
  color: rgba(244, 243, 240, 0.7);
}

.card-cover-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Space Grotesk', monospace;
  font-size: 2.5rem;
  font-weight: 700;
  color: rgba(251, 191, 36, 0.4);
  background: radial-gradient(circle at center, rgba(251, 191, 36, 0.08), transparent 70%);
}

/* Card Body */
.works-grid .card-body {
  padding: 1.35rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  z-index: 2;
  position: relative;
}

.card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  font-family: 'Space Grotesk', monospace;
  font-size: 0.72rem;
}

.card-num {
  color: rgba(244, 243, 240, 0.35);
  font-weight: 600;
}

.card-category {
  color: rgba(244, 243, 240, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.68rem;
}

.card-status {
  font-size: 0.65rem;
  font-family: 'Space Grotesk', monospace;
  padding: 2px 7px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.card-status .status-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}

.card-status[data-status="shipped"] {
  background: rgba(34, 197, 94, 0.08);
  color: #4ade80;
  border: 1px solid rgba(74, 222, 128, 0.2);
}

.card-status[data-status="pre-release"] {
  background: rgba(56, 189, 248, 0.08);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.2);
}

.card-status[data-status="in-progress"],
.card-status[data-status="in-development"] {
  background: rgba(251, 191, 36, 0.08);
  color: #fbbf24;
  border: 1px solid rgba(251, 191, 36, 0.2);
}

.card-header {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.card-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.25;
  color: #ffffff;
  margin: 0;
}

.card-title a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s;
}

.card-title a:hover {
  color: var(--accent);
}

.card-metrics-pill {
  align-self: flex-start;
  font-family: 'Space Grotesk', monospace;
  font-size: 0.68rem;
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(251, 191, 36, 0.08);
  border: 1px solid rgba(251, 191, 36, 0.2);
  color: #fbbf24;
  font-weight: 500;
}

.card-tagline {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.88rem;
  color: rgba(244, 243, 240, 0.78);
  font-weight: 500;
  line-height: 1.4;
  margin: 0;
}

.card-desc {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.82rem;
  color: rgba(244, 243, 240, 0.5);
  line-height: 1.5;
  margin: 0;
}

.card-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: auto;
  padding-top: 0.5rem;
}

.card-stack .badge {
  font-size: 0.68rem;
  font-family: 'Space Grotesk', monospace;
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(244, 243, 240, 0.04);
  border: 1px solid rgba(244, 243, 240, 0.08);
  color: rgba(244, 243, 240, 0.6);
  transition: all 0.2s;
}

.card-stack .badge:hover {
  border-color: rgba(244, 243, 240, 0.25);
  color: #ffffff;
}

.card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-top: 0.9rem;
  margin-top: 0.4rem;
  border-top: 1px dashed rgba(244, 243, 240, 0.08);
}

.card-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  text-decoration: none;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.primary-action {
  color: #ffffff;
  background: rgba(244, 243, 240, 0.06);
  border: 1px solid rgba(244, 243, 240, 0.15);
  padding: 0.4rem 0.85rem;
}

.primary-action:hover {
  background: #ffffff;
  color: #0c0c0d;
  border-color: #ffffff;
  transform: translateX(2px);
}

.secondary-action {
  color: rgba(244, 243, 240, 0.6);
  padding: 0.4rem 0.6rem;
  border: 1px solid rgba(244, 243, 240, 0.1);
  border-radius: 6px;
}

.secondary-action:hover {
  color: #ffffff;
  border-color: rgba(244, 243, 240, 0.3);
  background: rgba(244, 243, 240, 0.08);
}

/* Editorial List View Custom Overrides */
@media (min-width: 768px) {
  .works-grid.view-list .project-card {
    flex-direction: row;
    align-items: stretch;
  }

  .works-grid.view-list .card-cover-wrap {
    width: 220px;
    aspect-ratio: auto;
    border-bottom: none;
    border-right: 1px solid rgba(244, 243, 240, 0.06);
  }

  .works-grid.view-list .card-body {
    padding: 1.25rem 1.6rem;
  }
}

/* Empty State */
.works-empty {
  grid-column: 1 / -1;
  padding: 4rem 2rem;
  text-align: center;
  background: rgba(244, 243, 240, 0.02);
  border: 1px dashed rgba(244, 243, 240, 0.1);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}

.works-empty .empty-icon {
  font-size: 2.2rem;
  color: var(--accent);
}

.works-empty h3 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.25rem;
  color: #ffffff;
  margin: 0;
}

.works-empty p {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.88rem;
  color: rgba(244, 243, 240, 0.55);
  max-width: 28rem;
  margin: 0;
}

/* ============================================================
   SHOWCASE CONTAINER & CARDS
   ============================================================ */
.showcase-container {
  background: transparent;
  border: none;
  padding: 0;
  max-width: 56rem;
  margin: 0 auto;
  box-shadow: none;
}

.showcase-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.showcase-item {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1.25rem 1.4rem;
  border-radius: 20px;
  text-decoration: none;
  color: #f4f3f0;
  position: relative;
  background: #121216;
  border: none;
  outline: none;
  transition: background 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275),
              box-shadow 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275),
              color 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275),
              transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275),
              opacity 0.5s ease-out,
              scale 0.3s ease-out;
  opacity: 0;
  transform: translateY(60px);
}

/* Revealed state (JS-driven) */
.showcase-item.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Hover / Active state: Whole card fills with project's solid cover/brand background color, no outlines/borders */
.showcase-item:hover {
  background: var(--card-bg-hover, #1d1d1d);
  border: none;
  outline: none;
  color: #ffffff;
  transform: scale(1.02);
  z-index: 2;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6);
}

.showcase-item:hover .showcase-title {
  color: #ffffff;
}

.showcase-item:hover .showcase-desc {
  color: rgba(244, 243, 240, 0.85);
}

/* Prominent Icon Box on the left — 92px image thumbnail without border */
.showcase-icon {
  width: 92px;
  height: 92px;
  min-width: 92px;
  border-radius: 18px;
  overflow: hidden;
  background: transparent;
  border: none;
  outline: none;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
  padding: 0;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.showcase-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: none;
  outline: none;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.showcase-item:hover .showcase-icon {
  border: none;
  outline: none;
}

.showcase-item:hover .showcase-icon img {
  transform: scale(1.08);
}

.showcase-icon-fallback {
  font-family: 'Space Grotesk', monospace;
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--accent, #fbbf24);
}

/* Text Content */
.showcase-content {
  flex: 1;
  min-width: 0;
}

.showcase-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 0.2rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
  transition: color 0.25s ease;
}

.showcase-desc {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.88rem;
  color: rgba(244, 243, 240, 0.6);
  line-height: 1.45;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.25s ease;
}

/* Micro pill badges */
.showcase-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
}

.showcase-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: 'Space Grotesk', monospace;
  font-size: 0.7rem;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(244, 243, 240, 0.05);
  border: 1px solid rgba(244, 243, 240, 0.12);
  color: rgba(244, 243, 240, 0.7);
  white-space: nowrap;
  transition: all 0.25s ease;
}

.showcase-badge svg {
  flex-shrink: 0;
}

.showcase-item:hover .showcase-badge {
  background: rgba(244, 243, 240, 0.12);
  border-color: rgba(244, 243, 240, 0.28);
  color: #ffffff;
}

.showcase-arrow {
  flex-shrink: 0;
  color: rgba(244, 243, 240, 0.25);
  transition: all 0.25s ease;
}

.showcase-item:hover .showcase-arrow {
  color: #ffffff;
  transform: translateX(4px);
}

/* Show More button at container bottom */
.showcase-more-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 16px;
  margin-top: 10px;
  background: rgba(244, 243, 240, 0.03);
  border: 1px dashed rgba(244, 243, 240, 0.12);
  border-radius: 16px;
  font-family: 'Space Grotesk', monospace;
  font-size: 0.82rem;
  color: rgba(244, 243, 240, 0.6);
  cursor: pointer;
  transition: all 0.2s ease;
}

.showcase-more-btn:hover {
  color: #ffffff;
  background: rgba(244, 243, 240, 0.07);
  border-color: rgba(244, 243, 240, 0.25);
}

.showcase-more-btn svg {
  transition: transform 0.3s ease;
}

.showcase-more-btn.expanded svg {
  transform: rotate(180deg);
}

/* Mobile adjustments */
@media (max-width: 639px) {
  .showcase-item {
    gap: 1rem;
    padding: 1rem;
    border-radius: 16px;
  }

  .showcase-icon {
    width: 68px;
    height: 68px;
    min-width: 68px;
    border-radius: 14px;
  }

  .showcase-title {
    font-size: 1.1rem;
  }

  .showcase-desc {
    font-size: 0.8rem;
    -webkit-line-clamp: 1;
  }

  .showcase-arrow {
    display: none;
  }
}

/* ============================================================
   PERIODIC TABLE TOOLSTACK
   ============================================================ */
.toolstack-section {
  position: relative;
  z-index: 10;
  padding: 5rem 0 4rem;
}

.toolstack-inner {
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.toolstack-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(244, 243, 240, 0.25);
  margin-bottom: 1.25rem;
}

.toolstack-heading {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: clamp(1.35rem, 3vw, 1.75rem);
  color: #f4f3f0;
  margin-bottom: 0.5rem;
}

.toolstack-sub {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.92rem;
  color: rgba(244, 243, 240, 0.5);
  line-height: 1.6;
  max-width: 28rem;
  margin-bottom: 2.5rem;
}

/* Element grid — periodic table */
.pt-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.75rem;
}

@media (min-width: 640px) {
  .pt-grid {
    gap: 0.625rem;
  }
}

/* Spacer between groups */
.pt-spacer {
  width: 1rem;
  flex-shrink: 0;
}

@media (max-width: 639px) {
  .pt-spacer {
    width: 0.5rem;
  }
}

.pt-el {
  position: relative;
  width: 70px;
  height: 78px;
  border-radius: 6px;
  background: rgba(244, 243, 240, 0.04);
  border: 1px solid rgba(244, 243, 240, 0.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  cursor: default;
  transition: border-color 0.2s, background 0.2s, transform 0.15s, scale 0.3s ease-out;
  flex-shrink: 0;
}

@media (max-width: 639px) {
  .pt-el {
    width: 56px;
    height: 66px;
  }
}

.pt-el:hover {
  border-color: rgba(244, 243, 240, 0.25);
  background: rgba(244, 243, 240, 0.07);
  transform: translateY(-2px);
}

.pt-el-num {
  position: absolute;
  top: 4px;
  right: 6px;
  font-family: 'Space Grotesk', monospace;
  font-size: 0.58rem;
  color: rgba(244, 243, 240, 0.3);
}

.pt-el-sym {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: 1.1rem;
  line-height: 1;
}

@media (max-width: 639px) {
  .pt-el-sym {
    font-size: 0.95rem;
  }
}

.pt-el-name {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.58rem;
  color: rgba(244, 243, 240, 0.45);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 62px;
}

@media (max-width: 639px) {
  .pt-el-name {
    max-width: 48px;
    font-size: 0.52rem;
  }
}

/* Category colours */
.pt-el[data-cat="frontend"] .pt-el-sym {
  color: #ef4444;
}

.pt-el[data-cat="backend"] .pt-el-sym {
  color: #a78bfa;
}

.pt-el[data-cat="systems"] .pt-el-sym {
  color: #22d3ee;
}

.pt-el[data-cat="ai"] .pt-el-sym {
  color: #fbbf24;
}

.pt-el[data-cat="tools"] .pt-el-sym {
  color: #34d399;
}

/* Filter tabs */
.pt-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.pt-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.85rem;
  border-radius: 6px;
  border: 1px solid rgba(244, 243, 240, 0.12);
  background: transparent;
  color: rgba(244, 243, 240, 0.55);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.78rem;
  cursor: pointer;
  transition: all 0.15s;
}

.pt-filter-btn:hover {
  border-color: rgba(244, 243, 240, 0.3);
  color: #f4f3f0;
}

.pt-filter-btn.active {
  background: rgba(244, 243, 240, 0.08);
  border-color: rgba(244, 243, 240, 0.25);
  color: #f4f3f0;
}

.pt-filter-btn .fb-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Dim unmatched */
.pt-el.dimmed {
  opacity: 0.15;
  pointer-events: none;
  filter: grayscale(1);
}

/* Highlight matched elements in their category colour */
.pt-el.lit {
  transform: translateY(-3px);
}

.pt-el.lit .pt-el-name {
  color: rgba(244, 243, 240, 0.75);
}

.pt-el.lit .pt-el-num {
  color: rgba(244, 243, 240, 0.55);
}

.pt-el[data-cat="frontend"].lit {
  border-color: rgba(239, 68, 68, 0.55);
  background: rgba(239, 68, 68, 0.08);
  box-shadow: 0 0 18px rgba(239, 68, 68, 0.18), inset 0 0 12px rgba(239, 68, 68, 0.06);
}

.pt-el[data-cat="backend"].lit {
  border-color: rgba(167, 139, 250, 0.55);
  background: rgba(167, 139, 250, 0.08);
  box-shadow: 0 0 18px rgba(167, 139, 250, 0.18), inset 0 0 12px rgba(167, 139, 250, 0.06);
}

.pt-el[data-cat="systems"].lit {
  border-color: rgba(34, 211, 238, 0.55);
  background: rgba(34, 211, 238, 0.08);
  box-shadow: 0 0 18px rgba(34, 211, 238, 0.18), inset 0 0 12px rgba(34, 211, 238, 0.06);
}

.pt-el[data-cat="ai"].lit {
  border-color: rgba(251, 191, 36, 0.55);
  background: rgba(251, 191, 36, 0.08);
  box-shadow: 0 0 18px rgba(251, 191, 36, 0.18), inset 0 0 12px rgba(251, 191, 36, 0.06);
}

.pt-el[data-cat="tools"].lit {
  border-color: rgba(52, 211, 153, 0.55);
  background: rgba(52, 211, 153, 0.08);
  box-shadow: 0 0 18px rgba(52, 211, 153, 0.18), inset 0 0 12px rgba(52, 211, 153, 0.06);
}

/* ============================================================
   HOBBIES
   ============================================================ */
.hobbies-section {
  position: relative;
  z-index: 10;
  padding: 5rem 0;
}

.hobbies-inner {
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.hobbies-heading {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.hobbies-heading h2,
.hobbies-title {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: clamp(1.35rem, 3vw, 1.75rem);
  color: #f4f3f0;
}

.hobbies-badge {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  color: rgba(244, 243, 240, 0.45);
  border: 1px solid rgba(244, 243, 240, 0.15);
  border-radius: 4px;
  padding: 2px 8px;
}

.hobbies-sub {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.92rem;
  color: rgba(244, 243, 240, 0.5);
  line-height: 1.6;
  max-width: 30rem;
  margin-bottom: 2.5rem;
}

/* Hobby cards grid */
.hobbies-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}

@media (min-width: 768px) {
  .hobbies-cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

.hobbies-card {
  border-radius: 10px;
  border: 1px dashed rgba(244, 243, 240, 0.12);
  background: rgba(244, 243, 240, 0.02);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  transition: border-color 0.2s, background 0.2s, scale 0.3s ease-out;
}

.hobbies-card:hover {
  border-color: rgba(244, 243, 240, 0.25);
  background: rgba(244, 243, 240, 0.04);
}

.hobbies-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.hobbies-card-icon {
  color: rgba(244, 243, 240, 0.45);
}

.hobbies-card-tag {
  font-family: 'Space Grotesk', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  color: rgba(244, 243, 240, 0.3);
}

.hobbies-card-title {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 500;
  font-size: 0.95rem;
  color: #f4f3f0;
}

.hobbies-card-desc {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.8rem;
  color: rgba(244, 243, 240, 0.4);
  line-height: 1.5;
}

/* ============================================================
   CONTACT / FOOTER
   ============================================================ */
.contact-section {
  position: relative;
  z-index: 10;
  padding: 5rem 0 3rem;
}

.contact-inner {
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

@media (min-width: 768px) {
  .contact-inner {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
  }
}

.contact-flex-row {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  width: 100%;
}

@media (min-width: 768px) {
  .contact-flex-row {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
  }

  /* pin both columns to the very top of the footer row */
  .contact-left-col,
  .contact-right-col {
    align-self: flex-start;
    margin-top: 0;
  }
}

.rotator-headline {
  margin: 0;
}

.contact-left-col .rotator-headline {
  /* trim the big font's internal top leading so the cap of
     "Lets" sits level with the EMAIL label */
  line-height: 1.08;
  margin-top: -0.12em;
}

.rotator-headline {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: clamp(1.75rem, 4.5vw, 3rem);
  line-height: 1.15;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  gap: 0.15em;
}

/* line 1: "Lets" + rotating word side by side */
.rotator-line1 {
  display: flex;
  align-items: baseline;
  gap: 0.35em;
  white-space: nowrap;
}

.rotator-headline .static-prefix {
  color: rgba(244, 243, 240, 0.5);
}

.dynamic-word-wrap {
  display: inline-block;
  overflow: hidden;
  height: 1.2em;
}

.dynamic-word {
  display: inline-block;
  color: var(--accent);
  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.32s;
}

.dynamic-word.word-out {
  transform: translateY(-110%);
  opacity: 0;
}

.dynamic-word.word-in-prep {
  transition: none;
  transform: translateY(110%);
  opacity: 0;
}

.rotator-subtext {
  color: rgba(244, 243, 240, 0.85);
}

.contact-right-col {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

/* right-align EMAIL + SOCIAL on desktop */
@media (min-width: 768px) {
  .contact-right-col {
    align-items: flex-end;
    text-align: right;
    margin-left: auto;
  }

  .contact-right-col .contact-block {
    align-items: flex-end;
  }

  .contact-right-col .contact-social-row {
    justify-content: flex-end;
  }
}

.contact-block {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.contact-col-label {
  font-family: 'Space Grotesk', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.25em;
  color: rgba(244, 243, 240, 0.35);
}

.contact-email-link {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(1rem, 2.2vw, 1.35rem);
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  transition: opacity 0.2s;
}

.contact-email-link:hover {
  opacity: 0.7;
}

.contact-social-row {
  display: flex;
  gap: 0.6rem;
}

.social-circle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  border: 1px solid rgba(244, 243, 240, 0.15);
  color: rgba(244, 243, 240, 0.6);
  transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.2s;
}

.social-circle-btn:hover {
  background: var(--ink);
  color: #080808;
  border-color: var(--ink);
  transform: translateY(-2px);
}

/* Expanding logo box */
.logo-box {
  width: 64px;
  height: 64px;
  border-radius: 14px;
  background: rgba(244, 243, 240, 0.04);
  border: 1px solid rgba(244, 243, 240, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: pointer;
  transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s, background 0.2s;
}

.logo-box:hover {
  width: 200px;
  border-color: rgba(244, 243, 240, 0.2);
  background: rgba(244, 243, 240, 0.06);
}

.logo-box-icon {
  flex-shrink: 0;
  width: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(244, 243, 240, 0.65);
}

.logo-box-text {
  opacity: 0;
  white-space: nowrap;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.9rem;
  color: rgba(244, 243, 240, 0.75);
  transition: opacity 0.25s 0.15s;
  padding-right: 1rem;
}

.logo-box:hover .logo-box-text {
  opacity: 1;
}

.contact-bio {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.88rem;
  color: rgba(244, 243, 240, 0.45);
  line-height: 1.65;
}

.contact-email {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(1.1rem, 2.5vw, 1.5rem);
  font-weight: 500;
  color: #f4f3f0;
  text-decoration: none;
  transition: opacity 0.2s;
}

.contact-email:hover {
  opacity: 0.7;
}

/* Right: social links */
.contact-right {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: flex-start;
}

@media (min-width: 768px) {
  .contact-right {
    align-items: flex-end;
  }
}

.contact-right-label {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: rgba(244, 243, 240, 0.35);
}

.social-row {
  display: flex;
  gap: 0.5rem;
}

.social-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2rem;
  width: 2rem;
  padding: 0;
  border-radius: 6px;
  border: 1px solid rgba(244, 243, 240, 0.15);
  background: transparent;
  color: rgba(244, 243, 240, 0.6);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.75rem;
  text-decoration: none;
  transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    padding 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
  overflow: hidden;
  white-space: nowrap;
}

.social-btn svg {
  flex-shrink: 0;
}

.social-label {
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  display: inline-block;
  transition: max-width 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.2s ease,
    margin-left 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  margin-left: 0;
  font-weight: 500;
}

.social-btn:hover {
  background: #f4f3f0;
  color: #080808;
  border-color: #f4f3f0;
  width: auto;
  padding: 0 0.65rem;
}

.social-btn:hover .social-label {
  max-width: 80px;
  opacity: 1;
  margin-left: 0.4rem;
}

/* ---- Animations ---- */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.about-grid {
  animation: fadeInUp 0.6s 0.1s ease both;
}

/* =========================================================
   NEW v2: polish layer
   ========================================================= */

/* selection + scrollbar */
::selection {
  background: var(--accent);
  color: #0c0c0d;
}

html {
  scrollbar-width: thin;
  scrollbar-color: rgba(244, 243, 240, 0.18) transparent;
}

::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-thumb {
  background: rgba(244, 243, 240, 0.15);
  border-radius: 4px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

/* ---- Custom cursor (desktop / fine pointers only) ---- */
.cursor-dot,
.cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 300;
  pointer-events: none;
  border-radius: 50%;
  display: none;
}

@media (pointer: fine) {

  body.has-cursor .cursor-dot,
  body.has-cursor .cursor-ring {
    display: block;
  }

  /* hide the native cursor everywhere — the * selector
     overrides any element-level cursor: default/pointer
     (e.g. .pt-el tiles) that would otherwise resurface it */
  body.has-cursor,
  body.has-cursor * {
    cursor: none !important;
  }
}

.cursor-dot {
  /* thick vertical line — terminal caret */
  width: 3px;
  height: 20px;
  background: #ffffff;
  border-radius: 1px;
  transition: width 0.18s ease, height 0.18s ease;
}

.cursor-dot.is-hover {
  /* thick underscore when over cards / links */
  width: 20px;
  height: 4px;
}

/* trailing ring removed — caret cursor only */
.cursor-ring {
  display: none !important;
}

/* ---- dual marquee spacing ---- */
.marquee-track+.marquee-track {
  margin-top: 0.85rem;
}

/* ---- Corner HUD fix: keep .bl hidden on small screens ---- */
@media (max-width: 1023px) {
  .corner-meta.bl {
    display: none;
  }
}

/* ---- Floating back-to-top (appears near page bottom) ---- */
#back-to-top {
  position: fixed;
  right: 1.25rem;
  bottom: 3rem;
  z-index: 60;
  font-family: 'Space Grotesk', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(244, 243, 240, 0.55);
  text-decoration: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity 0.35s ease, transform 0.35s ease,
    visibility 0.35s, color 0.2s;
}

#back-to-top.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

#back-to-top:hover {
  color: #ffffff;
}

/* =========================================================
   MOBILE POLISH — touch devices & small screens
   ========================================================= */
@media (pointer: coarse) {

  /* action buttons: hover can't reveal labels on touch,
     so show them expanded permanently */
  .action-btn .action-btn-label {
    max-width: 160px;
    padding-right: 0.75rem;
  }

  /* social pills: same deal */
  .social-btn {
    width: auto;
    padding: 0 0.65rem;
  }

  .social-btn .social-label {
    max-width: 80px;
    opacity: 1;
    margin-left: 0.4rem;
  }

  /* logo box expands by tap-hover inconsistently — keep compact */
  .logo-box:hover {
    width: 64px;
  }

  /* comfortable tap targets */
  .pt-filter-btn {
    padding: 0.55rem 1rem;
  }

  .social-circle-btn {
    width: 2.75rem;
    height: 2.75rem;
  }
}

@media (max-width: 639px) {

  /* general breathing room */
  .works-section,
  .toolstack-section,
  .hobbies-section,
  .stats-section,
  .contact-section {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }

  /* about hero: don't force full viewport on small screens
     (mobile URL bars make 100svh jumpy) */
  .about-section {
    min-height: auto;
    padding-top: 5.5rem;
    padding-bottom: 3rem;
  }

  /* portrait: cap size so it doesn't dominate the screen */
  .portrait-wrap {
    max-width: 17rem;
    margin: 0 auto;
  }

  /* stats: tighter cards */
  .stats-inner {
    gap: 0.6rem;
  }

  .stat-card {
    padding: 1.1rem 1rem;
  }

  /* marquee: smaller type so words fit gracefully */
  .marquee-word {
    font-size: clamp(1.4rem, 8vw, 2.2rem);
    padding: 0 0.9rem;
  }

  .marquee-section {
    padding: 2.25rem 0;
  }

  /* statement interstitials: shorter so pinning feels quick */
  .statement-section {
    min-height: 55svh;
  }

  /* hobby / timeline card headers can overflow — let them wrap */
  .hobbies-card-top {
    flex-wrap: wrap;
    gap: 0.35rem;
  }

  /* hobbies grid: single column for readable cards */
  .hobbies-cards {
    grid-template-columns: 1fr;
  }

  /* periodic table filters: scroll horizontally instead of
     wrapping into a tall block */
  .pt-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 0.5rem;
    margin-inline: -1.5rem;
    padding-inline: 1.5rem;
  }

  .pt-filters::-webkit-scrollbar {
    display: none;
  }

  .pt-filter-btn {
    flex-shrink: 0;
    white-space: nowrap;
  }

  /* footer: stack cleanly, headline sizes down */
  .rotator-headline {
    font-size: clamp(1.6rem, 8vw, 2.2rem);
  }

  .contact-email-link {
    word-break: break-all;
  }

  /* back-to-top: closer to the corner */
  #back-to-top {
    right: 1rem;
    bottom: 1.25rem;
  }
}

/* Respect reduced motion: kill everything fancy */
@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* =========================================================
   CURSOR-ATTACHED FLOATING HOVER PREVIEW POPUP
   ========================================================= */
.hover-preview-popup {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999999;
  pointer-events: none;
  width: auto;
  height: auto;
  max-width: min(560px, 85vw);
  max-height: min(420px, 80vh);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(244, 243, 240, 0.18);
  background: #09090b;
  opacity: 0;
  visibility: hidden;
  transform: translate3d(var(--preview-x, 0px), var(--preview-y, 0px), 0px) scale(0.92);
  transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              visibility 0.22s ease;
  will-change: transform, opacity;
}

.hover-preview-popup.active {
  opacity: 1;
  visibility: visible;
  transform: translate3d(var(--preview-x, 0px), var(--preview-y, 0px), 0px) scale(1);
}

.hover-preview-popup img {
  display: block;
  width: auto;
  height: auto;
  max-width: min(560px, 85vw);
  max-height: min(420px, 80vh);
  object-fit: contain;
}

@media (pointer: coarse) {
  .hover-preview-popup {
    display: none !important;
  }
}

/* =========================================================
   RIGHT FLOATING SIDEBAR NAVIGATION DOCK (PILL STYLE)
   ========================================================= */
.floating-dock-nav {
  position: fixed;
  right: 1.5rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 9999;
  pointer-events: auto;
}

.floating-dock-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem;
  background: #121216;
  border: 1px solid rgba(244, 243, 240, 0.12);
  border-radius: 9999px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6);
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.dock-item {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(244, 243, 240, 0.55);
  text-decoration: none;
  background: transparent;
  border: 1px solid transparent;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Active State — dark materialist black circle fill with white icon */
.dock-item.active {
  background: #282830;
  color: #ffffff;
  border-color: rgba(244, 243, 240, 0.16);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
}

/* Hover State — turns crisp white matching cursor color with dark icon */
.dock-item:hover,
.dock-item.active:hover {
  background: #ffffff;
  color: #121216;
  border-color: #ffffff;
  box-shadow: 0 4px 16px rgba(255, 255, 255, 0.25);
}

.dock-item svg {
  transition: transform 0.25s ease;
}

.dock-item:hover svg {
  transform: scale(1.08);
}

/* Smooth left-pointing Tooltips */
.dock-tooltip {
  position: absolute;
  right: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%) translateX(6px);
  background: #18181c;
  color: #ffffff;
  font-family: 'Space Grotesk', monospace;
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.35rem 0.65rem;
  border-radius: 8px;
  border: 1px solid rgba(244, 243, 240, 0.12);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
}

.dock-item:hover .dock-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(0);
}

@media (max-width: 768px) {
  .floating-dock-nav {
    position: fixed;
    top: auto;
    bottom: 1.25rem;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    width: max-content;
    max-width: calc(100vw - 2rem);
    transform: none;
  }

  .floating-dock-inner {
    flex-direction: row;
    padding: 0.4rem 0.65rem;
    gap: 0.5rem;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.75);
  }

  .dock-item {
    width: 40px;
    height: 40px;
  }

  .dock-item svg {
    width: 17px;
    height: 17px;
  }

  .dock-tooltip {
    display: none;
  }
}