/* ═══════════════════════════════════════════════════════════
 *  MAIN — Lorenzo · Portfolio
 *  Bento layout, segmented nav, custom cursor, card types, expand.
 * ═══════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
img, svg { display: block; max-width: 100%; }
ul { list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; }
html { -webkit-text-size-adjust: 100%; }
/* SEO/a11y: present in the DOM (and to screen readers) but visually hidden */
.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; }

body {
  min-height: 100vh;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-primary);
  font-size: var(--text-xl);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-snug);
  -webkit-font-smoothing: antialiased;
  transition: background var(--dur-slow) ease, color var(--dur-slow) ease;
  overflow-x: hidden;
}
::selection { background: var(--c-teal-a18); }

strong, b {
  font-weight: var(--weight-bold);
  background: var(--gradient-brand);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.grad { background: var(--gradient-brand); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }

/* ═══════════ CUSTOM CURSOR ═══════════ */
@media (pointer: fine) and (min-width: 769px) {
  * { cursor: none !important; }
}
.cs-root {
  position: fixed; top: 0; left: 0; width: 24px; height: 24px;
  z-index: 10001; pointer-events: none;
  transition: opacity 0.2s ease;        /* position is JS-driven only — never transitioned */
  will-change: transform;
}
.cs-arrow {
  display: block; width: 24px; height: 24px;
  transform-origin: 5px 3px;            /* the arrow tip — press scales toward it */
  transition: transform 0.14s var(--ease-spring);
}
.cs-root svg { width: 24px; height: 24px; }
.cs-root.is-down .cs-arrow { transform: scale(0.8); }  /* press feedback; outer translate untouched */
.cs-root.is-hidden { opacity: 0; }
[data-theme="dark"] .cs-root svg path { fill: #f5f5f5; stroke: #0e0e18; }
.cursor-tooltip {
  position: fixed; top: 0; left: 0;
  z-index: 10002; pointer-events: none;
  will-change: transform;               /* outer = position only (JS-driven) */
}
.cursor-tooltip__inner {
  display: inline-block; transform-origin: left center;
  background: var(--color-primary); color: #fff;
  border-radius: 8px; padding: 7px 14px;
  font-family: var(--font-primary);
  font-size: var(--tooltip-size); font-weight: var(--tooltip-weight);
  line-height: 1.25; white-space: pre;  /* preserve spaces between char spans */
  opacity: 0;                            /* GSAP composes it in per character */
}
.cursor-tooltip__inner span { display: inline-block; will-change: transform, opacity; }
@media (pointer: coarse), (max-width: 768px) {
  .cs-root, .cursor-tooltip { display: none !important; }
}

/* ═══════════ NAV ═══════════ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center;
  padding: 20px clamp(16px, 4vw, 48px);
  transition: transform 0.35s var(--ease-soft);
}
.nav--hidden { transform: translateY(-130%); }
.nav-logo { width: 46px; height: 46px; flex-shrink: 0; }

/* .rev-btn e .smooth-toggle stanno in header.css: le usa anche la barra
   delle pagine generate, e due copie divergono alla prima modifica. */

/* Aspetto E posizione stanno in header.css, condivisi con .bhead__nav delle
   pagine generate: centrato in alto, isola fissa in basso sul telefono. Qui
   resta solo la transizione del colore al cambio tema. */
.nav-pills { transition: background var(--dur-slow) ease; }
.nav-pill-indicator, .nav-pill-ghost {
  position: absolute; top: 4px; bottom: 4px; left: 0; width: 0;
  border-radius: var(--radius-pill);
  background: var(--color-surface-white);
  pointer-events: none; z-index: 0;
}
.nav-pill-indicator { box-shadow: 0 0 30px var(--c-black-a10); }
.nav-pill-indicator.is-ready {
  transition: left 0.6s var(--ease-spring), width 0.6s var(--ease-spring);
}
.nav-pill-ghost { opacity: 0; filter: opacity(0.4); transition: left 0.25s var(--ease-out), width 0.25s var(--ease-out), opacity 0.18s ease; }
.nav-pill-ghost.is-on { opacity: 0.4; }
/* Aspetto in header.css. Qui solo z-index: la pillola deve stare SOPRA
   l'indicatore che le scorre dietro. */
.nav-pill { position: relative; z-index: 1; }

/* ═══════════ BENTO GRID ═══════════ */
main { padding: 120px clamp(16px, 4vw, 20px) 0; }
.grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), var(--cell));
  grid-auto-rows: var(--cell);
  gap: var(--grid-gap);
  grid-auto-flow: row dense;
  justify-content: center;
  margin: 0 auto;
}
.slot { min-width: 0; min-height: 0; transition: opacity 0.45s var(--ease-out), filter 0.45s var(--ease-out); }
/* Entrance pre-state: cards start slightly offset but FULLY VISIBLE (transform only, no opacity),
   so the LCP element paints at first render instead of waiting for GSAP. main.js animates the
   transform to 0 and removes .anim-ready; if GSAP/JS never runs, main.js clears it so nothing sticks. */
html.anim-ready #grid > .slot { transform: translateY(26px) scale(0.95); }
.s-1x1 { grid-column: span 1; grid-row: span 1; }
.s-2x1 { grid-column: span 2; grid-row: span 1; }
.s-1x2 { grid-column: span 1; grid-row: span 2; }   /* tall portrait */
.s-2x2 { grid-column: span 2; grid-row: span 2; }
/* Filter recompact: matching cards (order 0) pack at the top vivid; non-matching (order 1)
   recompact below, dimmed + non-interactive. GSAP Flip animates the reflow (transform), so
   no transform here; !important on opacity beats the inline value GSAP's entrance leaves. */
.slot.is-dimmed { opacity: 0.28 !important; filter: grayscale(0.6); pointer-events: none; }
/* Irregular bento: mixed spans (1×1, 2×1, 1×2, 2×2) + dense auto-flow stagger the columns
   (mchiu rhythm). DOM order is the base sequence; the filter sets order 0/1 to recompact. */

/* ═══════════ CARD BASE ═══════════ */
.card {
  position: relative; isolation: isolate;
  width: 100%; height: 100%;
  border-radius: var(--radius-card);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-rest),
              inset 0 1px 0 var(--color-card-inset-top),
              inset 0 -1px 0 var(--color-card-inset-bottom);
  overflow: hidden;
  padding: var(--space-6);
  display: flex; flex-direction: column;
  transition: box-shadow var(--dur-mid) var(--ease-out),
              background var(--dur-slow) ease, border-color var(--dur-slow) ease;
}
a.card, button.card { text-align: left; }
/* lift/shadow on hover; the 3D motion is handled by VanillaTilt (transform) */
.card:hover { box-shadow: var(--shadow-lift), inset 0 1px 0 var(--color-card-inset-top), inset 0 -1px 0 var(--color-card-inset-bottom); }
.card > *:not(.card__grain) { position: relative; z-index: 1; }
.card__grain {
  position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none;
  opacity: var(--card-grain-opacity); mix-blend-mode: var(--card-grain-blend);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.card__tag {
  display: inline-block; font-size: var(--text-xs); font-weight: 600;
  letter-spacing: var(--tracking-widest); text-transform: uppercase;
  color: var(--color-text-subtle);
}
.card__tag--row { display: flex; align-items: center; gap: 7px; margin-bottom: auto; }
.card__tag--light { color: rgba(255,255,255,0.85); }

/* ── Icon cards (Gmail / LinkedIn) ── */
.card--icon { align-items: center; justify-content: center; background: var(--color-surface-white); }
.card--icon .card-art { animation: icon-bob 4.5s ease-in-out infinite; transform-origin: center; }

/* ── About (2×1 wide card: photo left, bio right) ── */
.card--about { flex-direction: row; align-items: center; gap: 22px; padding: 24px 28px; cursor: pointer; }
.about__avatar { position: relative; flex-shrink: 0; width: 200px; height: 200px; }
.about__photo {
  width: 100%; height: 100%; display: block;
  object-fit: cover; object-position: 50% 16%;
  background: var(--color-surface-2);
  border-radius: 63% 37% 41% 59% / 57% 45% 55% 43%;   /* organic blob */
  box-shadow: 0 14px 34px var(--c-black-a10);
  animation: blob-morph 9s ease-in-out infinite;
}
.about__text { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.about__hi { display: block; font-weight: 700; }
.about__bio { font-size: var(--text-2xl); line-height: var(--leading-loose); }
.wave { display: inline-block; transform-origin: 70% 70%; animation: wave 2.4s ease-in-out infinite; }
@keyframes wave { 0%,60%,100%{transform:rotate(0)} 10%{transform:rotate(16deg)} 20%{transform:rotate(-8deg)} 30%{transform:rotate(16deg)} 40%{transform:rotate(-4deg)} 50%{transform:rotate(10deg)} }
.about__expand-hint { position: absolute; top: 18px; right: 18px; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--color-surface-2); color: var(--color-text-subtle); opacity: 0; transform: scale(0.8); transition: opacity var(--dur-fast), transform var(--dur-fast) var(--ease-spring); }
.card--about:hover .about__expand-hint { opacity: 1; transform: scale(1); }

/* ── Sun / theme ── */
.card--sun { align-items: center; justify-content: center; cursor: pointer; background: var(--color-surface-white); }
.sun { position: relative; width: 84px; height: 84px; display: grid; place-items: center; transition: opacity var(--dur-mid), transform var(--dur-mid) var(--ease-spring); }
.sun__core { width: 46px; height: 46px; border-radius: 50%; background: radial-gradient(circle at 38% 35%, #ffe877, #f5a623); box-shadow: 0 0 28px rgba(245,166,35,0.55); }
.sun__rays { position: absolute; inset: 0; }
.sun__rays::before, .sun__rays::after { content: ""; position: absolute; inset: 0; border-radius: 50%; }
.sun__rays::before { background:
  conic-gradient(from 0deg, transparent 0 8%, #f5a623 8% 12%, transparent 12% 25%, #f5a623 25% 29%, transparent 29% 42%, #f5a623 42% 46%, transparent 46% 58%, #f5a623 58% 62%, transparent 62% 75%, #f5a623 75% 79%, transparent 79% 92%, #f5a623 92% 96%, transparent 96%);
  -webkit-mask: radial-gradient(circle, transparent 30px, #000 31px); mask: radial-gradient(circle, transparent 30px, #000 31px); animation: spin 22s linear infinite; }
.moon { position: absolute; width: 56px; height: 56px; border-radius: 50%; background: radial-gradient(circle at 38% 38%, #e8e8ff, #b8b8d8); box-shadow: inset -10px -6px 0 -2px rgba(0,0,0,0.18), 0 0 26px rgba(180,180,240,0.45); opacity: 0; transform: scale(0.4) rotate(-40deg); transition: opacity var(--dur-mid), transform var(--dur-mid) var(--ease-spring); }
@keyframes spin { to { transform: rotate(360deg); } }
[data-theme="dark"] .sun { opacity: 0; transform: scale(0.4) rotate(40deg); }
[data-theme="dark"] .moon { opacity: 1; transform: scale(1) rotate(0); }

/* These three cards are full-bleed "screens": every direct child is positioned.
   Re-assert absolute over the `.card > *` relative rule (same specificity, later wins);
   z-index stays 1 for all, so children layer by DOM order. */
.card--sap.card > *, .card--ai.card > *, .card--lab.card > *, .card--proj.card > *, .card--xl.card > * { position: absolute; }

/* ═══ SAP — live ERP process-circuit screen ═══ */
.card--sap { padding: 0; overflow: hidden; color: #fff;
  background: radial-gradient(130% 120% at 82% 8%, #1f7fd6 0%, #0a4ea0 46%, #062c66 100%); }
.sap__grid { position: absolute; inset: -30px; z-index: 0;
  background-image: linear-gradient(rgba(255,255,255,0.07) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,0.07) 1px, transparent 1px);
  background-size: 28px 28px; animation: sap-grid 7s linear infinite; }
@keyframes sap-grid { to { transform: translate(28px, 28px); } }
.sap__circuit { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.sap__pipes path { fill: none; stroke: rgba(255,255,255,0.13); stroke-width: 3; stroke-linecap: round; }
.sap__flows path { fill: none; stroke: url(#sapFlow); stroke-width: 3.5; stroke-linecap: round;
  stroke-dasharray: 30 520; stroke-dashoffset: 550; filter: drop-shadow(0 0 5px rgba(120,205,255,0.9));
  animation: sap-flow 2.8s linear infinite; }
.sap__flows .sap__flow--2 { animation-duration: 3.6s; animation-delay: -1.2s; }
.sap__flows .sap__flow--3 { animation-duration: 2.3s; animation-delay: -0.7s; }
@keyframes sap-flow { to { stroke-dashoffset: 0; } }
.sap__nodes circle { fill: #cdebff; transform-box: fill-box; transform-origin: center; animation: sap-node 2.8s ease-in-out infinite; }
.sap__nodes circle:nth-child(2n) { animation-delay: -0.9s; }
.sap__nodes circle:nth-child(3n) { animation-delay: -1.6s; }
@keyframes sap-node { 0%,100% { opacity: 0.35; transform: scale(0.7); } 50% { opacity: 1; transform: scale(1.3); } }
.sap__scan { position: absolute; left: 0; right: 0; top: 0; height: 46%; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(150,215,255,0.16) 70%, rgba(150,215,255,0.26) 92%, transparent);
  transform: translateY(-110%); animation: sap-scan 5s ease-in-out infinite; }
@keyframes sap-scan { 0% { transform: translateY(-110%); } 100% { transform: translateY(250%); } }
.sap__plate { position: absolute; top: 22px; left: 22px; z-index: 3; display: inline-flex; padding: 11px 15px;
  border-radius: 14px; background: #fff; box-shadow: 0 14px 30px rgba(0,0,0,0.32); }
.sap__plate svg { display: block; }
.sap__cap { position: absolute; left: 22px; right: 22px; bottom: 22px; z-index: 3; }
.sap__cap h3 { font-size: var(--text-5xl); font-weight: 700; line-height: 1.12; margin-top: 4px; max-width: 13ch; text-shadow: 0 2px 14px rgba(0,0,0,0.4); }

/* ═══ AI material taxonomy — animated drill-down of classification levels ═══ */
.card--ai { padding: 0; overflow: hidden; color: #fff;
  background: radial-gradient(120% 110% at 22% 0%, #9a78ff 0%, #6a4ff0 42%, #3a1ba8 100%); }
.ai__particles { position: absolute; inset: -34px; z-index: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.5) 1px, transparent 1.6px);
  background-size: 32px 32px; opacity: 0.15; animation: ai-particles 9s linear infinite; }
@keyframes ai-particles { to { transform: translateY(32px); } }
.ai__beam { position: absolute; top: -10%; left: 50%; width: 150%; height: 70%; z-index: 0; pointer-events: none;
  transform: translateX(-50%); background: radial-gradient(ellipse at top, rgba(120,255,235,0.2), transparent 62%); }
.ai__head { position: absolute; top: 22px; left: 22px; z-index: 3; display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.08em; color: rgba(255,255,255,0.6); }
.ai__head .ai__hdot { width: 7px; height: 7px; border-radius: 50%; background: #6ff0e0; box-shadow: 0 0 8px #6ff0e0; animation: ai-pulse 1.8s ease-in-out infinite; }
@keyframes ai-pulse { 0%,100% { transform: scale(0.8); opacity: 0.75; } 50% { transform: scale(1.25); opacity: 1; } }
.ai__tree { position: absolute; left: 26px; right: 22px; top: 50%; transform: translateY(-52%); z-index: 2; display: flex; flex-direction: column; gap: 16px; }
.ai__node { position: relative; display: flex; align-items: center; gap: 9px; opacity: 0.32; transform: translateX(-6px); }
.ai__node--l2 { margin-left: 22px; }
.ai__node--l3 { margin-left: 44px; }
.ai__node--l4 { margin-left: 66px; }
/* JS adds .is-drill each cycle (after swapping the level labels) to replay the cascade */
.ai__tree.is-drill .ai__node { animation: ai-drill 4.4s ease-in-out; }
.ai__tree.is-drill .ai__node--l2 { animation-delay: 0.4s; }
.ai__tree.is-drill .ai__node--l3 { animation-delay: 0.8s; }
.ai__tree.is-drill .ai__node--l4 { animation-delay: 1.2s; }
.ai__tree.is-static .ai__node { opacity: 1; transform: none; }
@keyframes ai-drill {
  0% { opacity: 0.3; transform: translateX(-6px); }
  18% { opacity: 1; transform: translateX(0); }
  82% { opacity: 1; transform: translateX(0); }
  100% { opacity: 0.3; transform: translateX(-6px); }
}
.ai__node:not(.ai__node--l1)::before { content: ""; position: absolute; left: -14px; top: -15px; width: 13px; bottom: 50%;
  border-left: 1.5px solid rgba(255,255,255,0.3); border-bottom: 1.5px solid rgba(255,255,255,0.3); border-bottom-left-radius: 8px; }
.ai__lv { font-family: var(--font-mono); font-size: 8px; font-weight: 700; letter-spacing: 0.04em; color: rgba(255,255,255,0.5);
  border: 1px solid rgba(255,255,255,0.25); border-radius: 5px; padding: 2px 4px; flex-shrink: 0; }
.ai__dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,0.55); flex-shrink: 0; }
.ai__nm { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 600; color: #fff; white-space: nowrap; }
.ai__node--l4 .ai__dot { background: var(--c-teal-500); box-shadow: 0 0 10px rgba(111,240,224,0.85); }
.ai__node--l4 .ai__nm { color: #aafff2; }
.ai__chk { margin-left: 4px; font-size: 12px; color: #6ff0e0; font-weight: 700; }
.ai__badge { position: absolute; top: 20px; right: 18px; z-index: 3; font-size: 9px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.72); }
.ai__cap { position: absolute; left: 22px; right: 20px; bottom: 20px; z-index: 3; }
.ai__cap h3 { font-size: var(--text-4xl); font-weight: 800; line-height: 1.08; text-shadow: 0 2px 14px rgba(0,0,0,0.3); }

/* ═══ Personal projects — showreel window auto-cycling through 3 apps ═══ */
.card--proj { padding: 0; overflow: hidden; color: #fff;
  background: radial-gradient(120% 100% at 28% 0%, #2c2e58 0%, #181a31 58%, #0e0f1e 100%); }
.proj__orb { border-radius: 50%; filter: blur(42px); opacity: 0.5; z-index: 0; pointer-events: none; }
.proj__orb--a { width: 62%; height: 52%; top: -14%; right: -12%; background: radial-gradient(circle, rgba(15,209,189,0.55), transparent 70%); animation: proj-orb 15s ease-in-out infinite; }
.proj__orb--b { width: 58%; height: 52%; bottom: -12%; left: -10%; background: radial-gradient(circle, rgba(124,92,252,0.5), transparent 70%); animation: proj-orb 19s ease-in-out infinite reverse; }
@keyframes proj-orb { 0%,100% { transform: translate(0,0); } 50% { transform: translate(8%, 7%); } }

.proj__win { inset: 14px; z-index: 1; border-radius: 14px; overflow: hidden;
  background: #0f1120; border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 26px 60px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.08); }
.proj__bar { position: absolute; top: 0; left: 0; right: 0; height: 34px; z-index: 2; display: flex; align-items: center; gap: 10px; padding: 0 12px;
  background: rgba(255,255,255,0.05); border-bottom: 1px solid rgba(255,255,255,0.07); }
.proj__title { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 7px; overflow: hidden; }
.proj__title b { font-size: var(--text-md); font-weight: 700; color: #fff; white-space: nowrap; }
.proj__title i { font-size: 9px; font-style: normal; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(255,255,255,0.6); white-space: nowrap; }
.proj__lights { display: inline-flex; gap: 6px; }
.proj__lights i { width: 9px; height: 9px; border-radius: 50%; }
.proj__lights i:nth-child(1) { background: #ff5f57; }
.proj__lights i:nth-child(2) { background: #febc2e; }
.proj__lights i:nth-child(3) { background: #28c840; }
/* clickable deck tabs (one per app pane) */
.proj__segs { display: flex; gap: 5px; align-items: center; }
.proj__seg { padding: 7px 0; border: 0; background: transparent; cursor: pointer; line-height: 0; }
.proj__seg::before { content: ""; display: block; width: 12px; height: 5px; border-radius: 3px;
  background: rgba(255,255,255,0.22); transition: width 0.35s var(--ease-spring), background 0.3s; }
.proj__seg:hover::before { background: rgba(255,255,255,0.5); }
.proj__seg.is-active::before { width: 26px; background: var(--c-teal-400); }

.proj__screen { position: absolute; top: 34px; left: 0; right: 0; bottom: 0; }
/* JS-driven deck: one pane visible at a time (.is-active); auto-advances + click/swipe to switch */
.proj__app { position: absolute; inset: 0; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px;
  opacity: 0; transform: translateY(10px) scale(0.985); pointer-events: none;
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out); }
.proj__app--fin { opacity: 1; transform: none; }                          /* default before JS boots */
.card--proj.is-live .proj__app { opacity: 0; transform: translateY(10px) scale(0.985); pointer-events: none; }
.card--proj.is-live .proj__app.is-active { opacity: 1; transform: none; pointer-events: auto; }
.pa__head { display: flex; align-items: center; gap: 7px; font-weight: 700; font-size: var(--text-base); }
.pa__head .pa__tag { font-size: 10px; font-weight: 600; color: rgba(255,255,255,0.6); }
.pa__ico { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; font-size: 12px; font-weight: 800; }
.proj__app--fin .pa__ico { background: rgba(15,209,189,0.2); color: #0fd1bd; }
.proj__app--car .pa__ico { background: rgba(90,162,255,0.2); color: #5aa2ff; }
.proj__app--vault .pa__ico { background: rgba(179,157,255,0.2); color: #b39dff; }
/* Finance pane */
.pa__bal { font-size: var(--text-6xl); font-weight: 800; letter-spacing: 0.04em; display: flex; align-items: center; gap: 8px; }
.pa__mask { letter-spacing: 3px; }
.pa__eye { font-family: inherit; font-size: 9px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.6); background: none; border: 1px solid rgba(255,255,255,0.32); border-radius: 5px; padding: 3px 6px; cursor: pointer; transition: color 0.2s, border-color 0.2s; }
.pa__eye:hover { color: rgba(255,255,255,0.7); border-color: rgba(255,255,255,0.45); }
.pa__bal.is-shown .pa__eye { color: var(--c-teal-400); border-color: rgba(15,209,189,0.5); }
.pa__bal.is-shown .pa__mask { letter-spacing: 0.02em; }
.pa__chart { flex: 1; width: 100%; min-height: 0; }
.pa__line--fin { stroke-dasharray: 520; stroke-dashoffset: 520; animation: proj-draw 4s ease-in-out infinite; }
@keyframes proj-draw { 0% { stroke-dashoffset: 520; } 40%,72% { stroke-dashoffset: 0; } 94%,100% { stroke-dashoffset: 520; } }
.pa__bars { display: flex; gap: 6px; align-items: flex-end; height: 28px; }
.pa__bars i { flex: 1; height: var(--h); border-radius: 3px 3px 0 0; background: linear-gradient(180deg, #0fd1bd, rgba(15,209,189,0.25)); }
/* Car pane — Ford Mondeo: odometer + maintenance */
.pa__id { font-weight: 700; font-size: var(--text-base); }
.pa__odo { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; }
.pa__odoval { font-family: var(--font-mono); font-size: clamp(28px, 8vw, 40px); font-weight: 800; letter-spacing: 0.02em; color: #fff; text-shadow: 0 0 18px rgba(90,162,255,0.45); }
.pa__odo i { font-style: normal; font-size: var(--text-md); font-weight: 700; color: #5aa2ff; align-self: flex-end; margin-bottom: 6px; }
.pa__maint { display: flex; flex-direction: column; gap: 7px; }
.pa__mrow { display: flex; align-items: center; gap: 8px; font-size: 11px; color: rgba(255,255,255,0.7); }
.pa__mrow i { font-style: normal; flex: 1; }
.pa__mrow b { font-weight: 700; color: #fff; -webkit-text-fill-color: #fff; }
.pa__mok { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; background: rgba(57,211,83,0.2); position: relative; }
.pa__mok::after { content: ""; width: 6px; height: 3px; border-left: 1.6px solid #39d353; border-bottom: 1.6px solid #39d353; transform: rotate(-45deg) translate(0, -1px); }
/* Vault pane */
.pa__files { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; align-content: center; }
.pa__file { height: 32px; border-radius: 6px; background: rgba(179,157,255,0.16); border: 1px solid rgba(179,157,255,0.3); position: relative; transform: scale(0.6); opacity: 0; animation: proj-pop 4s ease-in-out infinite; }
.pa__file::before { content: ""; position: absolute; top: 7px; left: 7px; right: 11px; height: 3px; border-radius: 2px; background: rgba(179,157,255,0.6); }
.pa__file::after { content: ""; position: absolute; top: 14px; left: 7px; right: 17px; height: 3px; border-radius: 2px; background: rgba(179,157,255,0.35); }
.pa__file:nth-child(2) { animation-delay: 0.08s; } .pa__file:nth-child(3) { animation-delay: 0.16s; }
.pa__file:nth-child(4) { animation-delay: 0.24s; } .pa__file:nth-child(5) { animation-delay: 0.32s; } .pa__file:nth-child(6) { animation-delay: 0.4s; }
@keyframes proj-pop { 0%,4% { opacity: 0; transform: scale(0.6); } 16%,74% { opacity: 1; transform: scale(1); } 94%,100% { opacity: 0; transform: scale(0.6); } }
.pa__secure { display: flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 600; color: rgba(179,157,255,0.85); }

@media (prefers-reduced-motion: reduce) {
  .proj__app { transition: none !important; }   /* instant pane switches (still user-switchable) */
  .pa__line--fin { stroke-dashoffset: 0 !important; }
  .pa__file { opacity: 1 !important; transform: none !important; }
}

/* ── Quote ── */
.card--quote { cursor: pointer; justify-content: center; align-items: center; text-align: center; padding: var(--space-8) var(--space-6); }
.quote__mark { font-family: var(--font-primary); font-weight: 800; font-size: 52px; line-height: 0.4; color: var(--c-teal-400); opacity: 0.5; }
.quote__text { font-size: var(--text-5xl); font-weight: 500; line-height: var(--leading-snug); margin: 18px 0 14px; max-width: 22ch; }
.quote__by { font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--color-text-subtle); }
.quote__exp { position: absolute; top: 16px; right: 16px; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--color-surface-2); color: var(--color-text-subtle); opacity: 0; transition: opacity var(--dur-fast); }
.card--quote:hover .quote__exp { opacity: 1; }
/* compact 1×1 quote (Quote A) — smaller type, tighter mark */
.s-1x1 .card--quote { padding: var(--space-5); }
.s-1x1 .quote__text { font-size: var(--text-3xl); margin: 10px 0 8px; max-width: 14ch; }
.s-1x1 .quote__mark { font-size: 40px; }

/* ═══ Lab — "code → app" build loop (the door to /portfolio/) ═══
   One shared 14s CSS cycle: an editor types six lines (steps() reveal, staggered),
   the terminal strip "builds", then the code pane hands over to a tiny UI that
   assembles itself piece by piece — nav, hero, stats, chart, FAB — holds, and loops.
   Deliberately a CREATION story (typing + morph): a different motion grammar from
   the app-switching window of .card--proj. Pure CSS; no JS controller. */
.card--lab { padding: 0; overflow: hidden; cursor: pointer; color: #fff;
  --lab: 14s;
  background:
    radial-gradient(120% 90% at 86% -10%, rgba(0,168,168,0.30), transparent 55%),
    radial-gradient(130% 100% at -14% 112%, rgba(124,92,252,0.28), transparent 58%),
    linear-gradient(158deg, #141632 0%, #0b0c1a 100%); }
.lab__aurora { inset: -25%; z-index: 0; pointer-events: none; filter: blur(34px); opacity: 0.5;
  background: conic-gradient(from 210deg at 62% 38%, rgba(0,168,168,0.42), rgba(124,92,252,0.40), rgba(0,168,168,0.42));
  animation: lab-aurora 11s ease-in-out infinite; }
@keyframes lab-aurora { 0%,100% { transform: rotate(0deg) scale(1); } 50% { transform: rotate(10deg) scale(1.14); } }

/* the IDE window (full-bleed above the caption strip) */
.lab__ide { inset: 14px 14px 134px; z-index: 1; display: flex; flex-direction: column;
  border-radius: 14px; overflow: hidden; background: rgba(10,11,24,0.88);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 26px 60px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.07); }
.lab__bar { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; height: 32px; padding: 0 12px;
  background: rgba(255,255,255,0.05); border-bottom: 1px solid rgba(255,255,255,0.07); }
.lab__lights { display: inline-flex; gap: 6px; }
.lab__lights i { width: 9px; height: 9px; border-radius: 50%; }
.lab__lights i:nth-child(1) { background: #ff5f57; }
.lab__lights i:nth-child(2) { background: #febc2e; }
.lab__lights i:nth-child(3) { background: #28c840; }
.lab__tab { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 7px;
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.08);
  font-family: var(--font-mono); font-size: 10px; font-weight: 600; color: rgba(255,255,255,0.8); }
.lab__tab svg { color: #2fd4c6; }
.lab__live { margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: rgba(255,255,255,0.55); }
.lab__live i { width: 7px; height: 7px; border-radius: 50%; background: #2fd4c6;
  box-shadow: 0 0 8px #2fd4c6; animation: lab-blink var(--lab) ease-in-out infinite; }
@keyframes lab-blink { 0%,34% { opacity: 0.4; box-shadow: none; } 38%,88% { opacity: 1; box-shadow: 0 0 8px #2fd4c6; } 94%,100% { opacity: 0.4; box-shadow: none; } }

/* ── the stage: code pane and app pane cross-fade on the shared cycle ── */
.lab__body { position: relative; flex: 1 1 auto; min-height: 0; }
.lab__code { position: absolute; inset: 0; margin: 0; padding: 16px 16px 12px 18px; overflow: hidden;
  display: flex; flex-direction: column; gap: 9px;
  font-family: var(--font-mono); font-size: 12px; line-height: 1.5; color: rgba(255,255,255,0.85);
  animation: lab-codepane var(--lab) var(--ease-out) infinite; }
/* the whole pane slides away when the build finishes (code "becomes" the app) */
@keyframes lab-codepane {
  0%,42%  { opacity: 1; transform: translateX(0); filter: blur(0); }
  48%,92% { opacity: 0; transform: translateX(-26px); filter: blur(3px); }
  97%,100%{ opacity: 1; transform: translateX(0); filter: blur(0); }
}
/* each line "types" via a steps() width reveal; a block caret rides the reveal window */
.lab__line { display: block; max-width: 100%; width: 0; overflow: hidden; white-space: nowrap;
  animation: lab-type var(--lab) steps(22, end) infinite; position: relative; }
.lab__line::after { content: ""; position: absolute; top: 2px; bottom: 2px; right: 0; width: 7px;
  background: #2fd4c6; opacity: 0; animation: lab-caret var(--lab) steps(2, jump-none) infinite; }
.lab__line--1 { animation-delay: 0s; }      .lab__line--1::after { animation-delay: 0s; }
.lab__line--2 { animation-delay: 0.75s; }   .lab__line--2::after { animation-delay: 0.75s; }
.lab__line--3 { animation-delay: 1.5s; }    .lab__line--3::after { animation-delay: 1.5s; }
.lab__line--4 { animation-delay: 2.25s; }   .lab__line--4::after { animation-delay: 2.25s; }
.lab__line--5 { animation-delay: 3s; }      .lab__line--5::after { animation-delay: 3s; }
.lab__line--6 { animation-delay: 3.75s; }   .lab__line--6::after { animation-delay: 3.75s; }
@keyframes lab-type { 0% { width: 0; } 5.5% { width: 100%; } 100% { width: 100%; } }
@keyframes lab-caret { 0% { opacity: 1; } 6.5% { opacity: 1; } 7% { opacity: 0; } 100% { opacity: 0; } }
/* syntax tokens */
.lab__code em { font-style: normal; }
.lc-k { color: #b39dff; }   /* keyword  */
.lc-f { color: #2fd4c6; }   /* function */
.lc-s { color: #f0b35e; }   /* string   */
.lc-c { color: rgba(255,255,255,0.38); }  /* comment */

/* ── the assembled app (phase 2) ── */
.lab__app { position: absolute; inset: 0; padding: 14px; display: grid;
  grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr auto; gap: 9px;
  opacity: 0; transform: scale(0.94); animation: lab-apppane var(--lab) var(--ease-out) infinite; }
@keyframes lab-apppane {
  0%,44%  { opacity: 0; transform: scale(0.94); }
  50%,90% { opacity: 1; transform: scale(1); }
  96%,100%{ opacity: 0; transform: scale(0.94); }
}
.lab__ui { border-radius: 9px; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.09); }
/* each block pops in on its own beat once the pane is visible */
.lab__app .lab__ui { opacity: 0; transform: translateY(8px) scale(0.9); animation: lab-pop var(--lab) var(--ease-spring) infinite; }
.lab__ui--nav   { animation-delay: 0.15s; }
.lab__ui--hero  { animation-delay: 0.35s; }
.lab__ui--stat1 { animation-delay: 0.55s; }
.lab__ui--stat2 { animation-delay: 0.70s; }
.lab__ui--chart { animation-delay: 0.90s; }
.lab__ui--fab   { animation-delay: 1.10s; }
@keyframes lab-pop {
  0%,46%  { opacity: 0; transform: translateY(8px) scale(0.9); }
  50%,91% { opacity: 1; transform: translateY(0) scale(1); }
  95%,100%{ opacity: 0; transform: translateY(8px) scale(0.9); }
}
.lab__ui--nav { grid-column: 1 / -1; display: flex; align-items: center; gap: 7px; padding: 7px 10px; }
.lab__ui--nav i { width: 14px; height: 14px; border-radius: 5px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--c-teal-400), var(--c-purple-600)); }
.lab__ui--nav u { width: 26px; height: 5px; border-radius: 3px; background: rgba(255,255,255,0.28); }
.lab__ui--nav u:first-of-type { margin-left: auto; }
.lab__ui--hero { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 7px; padding: 12px; justify-content: center;
  background: linear-gradient(135deg, rgba(0,168,168,0.16), rgba(124,92,252,0.16)); }
.lab__ui--hero b { width: 62%; height: 9px; border-radius: 5px; background: rgba(255,255,255,0.85); }
.lab__ui--hero s { width: 84%; height: 5px; border-radius: 3px; background: rgba(255,255,255,0.25); text-decoration: none; }
.lab__ui--hero s + s { width: 70%; }
.lab__ui--hero em { width: 74px; height: 20px; margin-top: 3px; border-radius: 999px;
  background: linear-gradient(120deg, var(--c-teal-400), var(--c-purple-600));
  box-shadow: 0 6px 16px rgba(0,168,168,0.35); }
.lab__ui--stat { display: flex; flex-direction: column; gap: 6px; padding: 10px 11px; }
.lab__ui--stat i { width: 55%; height: 4px; border-radius: 3px; background: rgba(255,255,255,0.25); }
.lab__ui--stat b { width: 38%; height: 10px; border-radius: 5px; background: #2fd4c6; }
.lab__ui--stat2 b { background: #b39dff; }
.lab__ui--chart { grid-column: 1 / -1; display: flex; align-items: flex-end; gap: 7px; padding: 10px 12px 9px; min-height: 44px; }
.lab__ui--chart i { flex: 1; height: var(--h, 50%); border-radius: 3px 3px 0 0; transform-origin: bottom;
  background: linear-gradient(180deg, #2fd4c6, rgba(47,212,198,0.15));
  animation: lab-bar var(--lab) var(--ease-spring) infinite; }
.lab__ui--chart i:nth-child(2n) { background: linear-gradient(180deg, #b39dff, rgba(179,157,255,0.15)); }
.lab__ui--chart i:nth-child(2) { animation-delay: 0.08s; } .lab__ui--chart i:nth-child(3) { animation-delay: 0.16s; }
.lab__ui--chart i:nth-child(4) { animation-delay: 0.24s; } .lab__ui--chart i:nth-child(5) { animation-delay: 0.32s; }
@keyframes lab-bar { 0%,50% { transform: scaleY(0); } 56%,91% { transform: scaleY(1); } 95%,100% { transform: scaleY(0); } }
.lab__ui--fab { position: absolute; right: 18px; bottom: 16px; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; color: #fff; border: 0;
  background: linear-gradient(135deg, var(--c-teal-400), var(--c-purple-600));
  box-shadow: 0 8px 18px rgba(0,0,0,0.35), 0 0 0 0 rgba(47,212,198,0.5); }

/* ── the terminal strip that "builds" ── */
.lab__term { flex: 0 0 auto; position: relative; display: flex; align-items: center; gap: 10px;
  height: 30px; padding: 0 14px; overflow: hidden;
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  background: rgba(0,0,0,0.35); border-top: 1px solid rgba(255,255,255,0.07); }
.lab__cmd { color: rgba(255,255,255,0.75); animation: lab-cmd var(--lab) ease infinite; }
@keyframes lab-cmd { 0%,26% { opacity: 0; } 30%,92% { opacity: 1; } 97%,100% { opacity: 0; } }
.lab__fill { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; transform-origin: left;
  background: linear-gradient(90deg, var(--c-teal-400), var(--c-purple-600));
  transform: scaleX(0); animation: lab-fill var(--lab) var(--ease-out) infinite; }
@keyframes lab-fill { 0%,30% { transform: scaleX(0); } 42% { transform: scaleX(1); } 92% { transform: scaleX(1); opacity: 1; } 96%,100% { transform: scaleX(0); opacity: 0; } }
.lab__ok { margin-left: auto; color: #3ddc97; opacity: 0; animation: lab-ok var(--lab) ease infinite; }
@keyframes lab-ok { 0%,41% { opacity: 0; transform: translateY(4px); } 44%,91% { opacity: 1; transform: none; } 95%,100% { opacity: 0; } }

/* ── caption (over the gradient, under the IDE) ── */
.lab__cap { position: absolute; left: 22px; right: 22px; bottom: 18px; z-index: 2; }
.lab__cap h3 { font-size: clamp(22px, 3vw, 27px); font-weight: 800; line-height: 1.05; letter-spacing: -0.02em;
  margin-top: 4px; text-shadow: 0 2px 14px rgba(0,0,0,0.4); }
.lab__cap p { color: rgba(255,255,255,0.82); font-size: var(--text-base); margin-top: 3px; }
.lab__cta { display: inline-flex; align-items: center; gap: 6px; margin-top: 9px; font-weight: 600; font-size: var(--text-md);
  padding: 7px 13px; border-radius: var(--radius-pill); background: rgba(255,255,255,0.14);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); transition: background 0.2s ease; }
.lab__cta svg { stroke: currentColor; transition: transform 0.2s var(--ease-out); }
.card--lab:hover .lab__cta { background: rgba(255,255,255,0.26); }
.card--lab:hover .lab__cta svg { transform: translateX(3px); }

/* ── responsive: when the cell shrinks the caption wraps to two lines — give it room ── */
@media (max-width: 1140px) {
  .lab__ide { inset: 12px 12px 152px; }
  .lab__cap { left: 18px; right: 18px; bottom: 14px; }
  .lab__cap h3 { font-size: clamp(19px, 2.6vw, 24px); }
  .lab__code { font-size: 11px; padding: 13px 13px 10px 14px; gap: 8px; }
}
@media (max-width: 720px) {
  .lab__cap h3 { font-size: clamp(19px, 5.4vw, 24px); }
}

/* ── reduced motion: hold the finished story — app assembled, build done ── */
@media (prefers-reduced-motion: reduce) {
  .lab__aurora, .lab__live i, .lab__cmd, .lab__ok, .lab__fill,
  .lab__code, .lab__line, .lab__line::after,
  .lab__app, .lab__app .lab__ui, .lab__ui--chart i { animation: none !important; }
  .lab__code { opacity: 0; }
  .lab__line { width: 100%; }
  .lab__line::after { display: none; }
  .lab__app { opacity: 1; transform: none; }
  .lab__app .lab__ui { opacity: 1; transform: none; }
  .lab__ui--chart i { transform: none; }
  .lab__cmd, .lab__ok { opacity: 1; }
  .lab__fill { transform: scaleX(1); }
}

/* ── Claude enthusiast (2×1 wide: logo left, caption right) ── */
.card--claude { background: linear-gradient(150deg, #e69069 0%, #d97757 52%, #c0573a 100%); color: #fff; flex-direction: row; align-items: center; justify-content: flex-start; gap: 24px; padding: 24px 30px; overflow: hidden; }
.card--claude .card__grain { opacity: 0.1; mix-blend-mode: overlay; }
/* logo is a flow child now (was absolutely centered when the card was tall) */
.card--claude .claude__logo { position: relative; top: auto; left: auto; transform: none; flex-shrink: 0; z-index: 1; filter: drop-shadow(0 8px 20px rgba(120,40,20,0.3)); }
.claude__logo svg { display: block; width: 90px; height: 90px; }
.claude__cap { position: relative; z-index: 2; }
.claude__cap h3 { font-size: clamp(22px, 3vw, 28px); font-weight: 800; line-height: 1.04; margin-top: 4px; letter-spacing: -0.02em; }
.claude__cap p { color: rgba(255,255,255,0.85); font-size: var(--text-base); margin-top: 6px; }

/* ── GitHub graph ── */
.gh-dot { width: 11px; height: 11px; border-radius: 3px; background: var(--c-green-300); }
.gh-graph { display: grid; gap: 3px; margin: auto 0; }
.gh-cell { border-radius: 2.5px; background: var(--gh-0); transform: scale(0); animation: ghpop var(--dur-mid) var(--ease-spring) forwards; }
.gh-cell[data-level="1"]{background:var(--gh-1)} .gh-cell[data-level="2"]{background:var(--gh-2)}
.gh-cell[data-level="3"]{background:var(--gh-3)} .gh-cell[data-level="4"]{background:var(--gh-4)}
@keyframes ghpop { to { transform: scale(1); } }
.gh-foot { font-size: var(--text-base); color: var(--color-text-subtle); margin-top: 8px; }
.gh-handle { font-family: var(--font-mono); font-weight: 600; color: var(--color-text); }

/* ── Excel & Power BI (tall 1×2: fullscreen animated stacked app logos, no text) ── */
.card--xl { padding: 0; overflow: hidden;
  background: linear-gradient(160deg, #102a1d 0%, #15152a 52%, #2c2410 100%); }
.xl__glow { inset: -15%; z-index: 0; pointer-events: none; filter: blur(8px);
  background:
    radial-gradient(circle at 50% 22%, rgba(46,163,106,0.6), transparent 46%),
    radial-gradient(circle at 50% 78%, rgba(232,180,0,0.6), transparent 46%);
  animation: xl-glow 7s ease-in-out infinite; }
@keyframes xl-glow { 0%,100% { opacity: 0.72; } 50% { opacity: 1; } }
.card--xl .xl__logo { z-index: 1; width: 62%; aspect-ratio: 1; left: 19%;
  filter: drop-shadow(0 14px 30px rgba(0,0,0,0.5)); }
.card--xl .xl__logo svg { display: block; width: 100%; height: 100%; }
.xl__logo--excel { top: 8%;    animation: xl-float-a 6.5s ease-in-out infinite; }
.xl__logo--pbi   { bottom: 8%; animation: xl-float-b 6.5s ease-in-out infinite; }
@keyframes xl-float-a { 0%,100% { transform: translateY(0) rotate(-5deg); } 50% { transform: translateY(-8px) rotate(-1deg); } }
@keyframes xl-float-b { 0%,100% { transform: translateY(0) rotate(5deg);  } 50% { transform: translateY(8px)  rotate(1deg);  } }
.card--xl:hover .xl__glow { opacity: 1; filter: blur(12px); transform: scale(1.06); }
@media (prefers-reduced-motion: reduce) {
  .xl__logo--excel, .xl__logo--pbi, .xl__glow { animation: none !important; }
}

/* ═══════════ FOOTER ═══════════ */
.footer { max-width: var(--grid-w); margin: 48px auto 80px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; padding: 24px 4px 0; border-top: 1px solid var(--color-border-strong); }
.footer__col { font-size: var(--text-base); color: var(--color-text-subtle); }
.footer__links { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.footer__links a, .footer__cookie { color: var(--color-text-subtle); font-size: var(--text-base); font-family: var(--font-primary); transition: color 0.2s ease; }
.footer__links a:hover, .footer__cookie:hover { color: var(--color-primary); }
.footer__cookie { border: 0; background: none; cursor: pointer; padding: 0; }

/* ═══════════ BACK TO TOP ═══════════ */
.back-to-top { position: fixed; right: 32px; bottom: 32px; z-index: 500; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: var(--color-surface-white); color: var(--color-text); box-shadow: 0 2px 40px var(--c-black-a10); opacity: 0; transform: scale(0.8); pointer-events: none; transition: opacity 0.2s, transform 0.2s var(--ease-spring); }
.back-to-top.is-visible { opacity: 1; transform: scale(1); pointer-events: auto; }
.back-to-top:hover { transform: scale(1.08); }

/* ═══════════ EXPAND OVERLAY ═══════════ */
.overlay { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 24px; }
.overlay[hidden] { display: none; }
.overlay__backdrop { position: absolute; inset: 0; background: var(--color-backdrop); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); opacity: 0; }
.overlay__card { position: relative; width: min(720px, 92vw); max-height: 86vh; overflow: hidden; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-xl); box-shadow: var(--shadow-expanded); transform-origin: top left; will-change: transform; }
.overlay__close { position: absolute; top: 18px; right: 18px; z-index: 3; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: var(--color-surface-2); color: var(--color-text); }
.overlay__close:hover { background: var(--color-border-strong); }
.overlay__body { max-height: 86vh; overflow-y: auto; overscroll-behavior: contain; padding: 56px clamp(28px, 6vw, 72px); }
.ex-about h2, .ex-cs h2, .ex-quote h2 { font-size: clamp(26px, 4vw, 40px); font-weight: 800; line-height: 1.15; letter-spacing: var(--tracking-tight); margin-bottom: 20px; }
.ex-about p, .ex-cs p, .ex-quote p { font-size: var(--text-3xl); line-height: var(--leading-loose); margin-bottom: 16px; }
.ex-about__links { font-weight: 600; }
.ex-about__links a { color: var(--color-primary); }
/* colour highlights for key terms in the bio (link-style, like the reference) */
.hl { font-weight: 700; }
.hl-teal { color: #00a39a; } .hl-blue { color: #2b7fff; } .hl-purple { color: #7c5cfc; }
.hl-amber { color: #d98a2b; } .hl-red { color: #d23a52; }
[data-theme="dark"] .hl-teal { color: #2fd4c6; } [data-theme="dark"] .hl-blue { color: #6aa6ff; }
[data-theme="dark"] .hl-amber { color: #f0b35e; } [data-theme="dark"] .hl-red { color: #ff7088; }
.ex-quote .quote__mark { display: block; }

/* ═══════════ RESPONSIVE ═══════════ */
@media (max-width: 720px) {
  /* Top bar: just logo + language (declutter); filter pills move to a bottom dock. */
  .nav { padding: 12px 16px; }
  .nav--hidden { transform: none; }            /* keep bars put (pills dock is fixed) */
  /* l'isola in basso e la sua versione scura stanno in header.css */
  main { padding: 88px clamp(14px, 4vw, 20px) 96px; }   /* clear top bar + bottom dock */
  .back-to-top { right: 18px; bottom: 84px; }           /* above the dock */
  .lang { margin-left: auto; }
  /* About is 2×1 = one row tall on mobile → keep photo + bio inside it */
  .card--about { padding: 16px 18px; gap: 16px; }
  .about__avatar { width: 116px; height: 116px; }
  .about__bio { font-size: var(--text-md); line-height: var(--leading-snug); }
  .about__hi { font-size: var(--text-base); }
}
@media (max-width: 560px) {
  .nav-pills { gap: 0; padding: 4px; }
  .nav-pill { padding: 8px 11px; font-size: 13px; }
}
@media (max-width: 360px) {
  .s-2x1 { grid-column: span 1; }
  .s-2x2 { grid-column: span 1; grid-row: span 2; }
  .card--about { flex-direction: column; padding: 20px; text-align: center; }
  .about__avatar { width: 120px; height: 120px; }
}

/* ═══════════ LANGUAGE MENU (flags) ═══════════
   The component itself now lives in src/styles/langmenu.css, shared with the
   generated pages so the two cannot drift apart. Only where it sits in this
   nav stays here. */
.lang { margin-left: 10px; }
@media (max-width: 720px) { .lang { margin-left: auto; } }

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

/* ═══════════════════════════════════════════════════════════
 *  ENHANCEMENTS — ambient bg, scroll progress, CV, more motion
 * ═══════════════════════════════════════════════════════════ */

/* Background is a single flat colour (var(--color-bg)) — no ambient orbs. */
main { position: relative; z-index: 1; }

/* ── Photo in the expanded about ── */
.ex-about__photo { width: 124px; height: 124px; object-fit: cover; object-position: 50% 14%; margin-bottom: 6px; border-radius: 63% 37% 41% 59% / 57% 45% 55% 43%; box-shadow: 0 10px 26px var(--c-black-a10); animation: blob-morph 9s ease-in-out infinite; }

/* ── CV card ── */
.card--cv { justify-content: space-between; align-items: flex-start; cursor: pointer; background: var(--color-surface-white); }
.cv__doc { filter: drop-shadow(0 10px 18px var(--c-black-a10)); transition: transform var(--dur-mid) var(--ease-spring); }
.card--cv:hover .cv__doc { transform: translateY(-5px) rotate(-5deg); }
.cv__meta { display: flex; flex-direction: column; gap: 3px; }
.cv__title { font-size: var(--text-5xl); font-weight: 700; letter-spacing: var(--tracking-snug); }
.cv__hint { display: inline-flex; align-items: center; gap: 5px; font-size: var(--text-base); font-weight: 600; color: var(--color-primary); }
.cv__hint svg { stroke: currentColor; transition: transform var(--dur-fast) var(--ease-out); }
.card--cv:hover .cv__hint svg { transform: translateX(4px); }

/* ── CV viewer modal ── */
.cv-modal { position: fixed; inset: 0; z-index: 600; display: grid; place-items: center; padding: clamp(12px, 3vw, 40px); }
.cv-modal[hidden] { display: none; }
.cv-modal__backdrop { position: absolute; inset: 0; background: var(--color-backdrop); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.cv-modal__panel { position: relative; width: min(1000px, 96vw); height: min(90vh, 1300px); display: flex; flex-direction: column; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-expanded); }
.cv-modal__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--color-border); }
.cv-modal__title { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: var(--text-xl); }
.cv-modal__dot { width: 9px; height: 9px; border-radius: 50%; background: #e64b3c; }
.cv-modal__actions { display: flex; align-items: center; gap: 8px; }
.cv-act { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px; border-radius: var(--radius-pill); background: var(--color-surface-2); color: var(--color-text); font-weight: 600; font-size: var(--text-base); transition: background var(--dur-fast), transform var(--dur-fast) var(--ease-spring); }
.cv-act:hover { transform: translateY(-1px); }
.cv-act svg { stroke: currentColor; }
.cv-act--primary { background: var(--gradient-brand); color: #fff; }
.cv-close { width: 38px; padding: 0; justify-content: center; }
.cv-modal__viewer { position: relative; flex: 1; background: #525659; }
.cv-modal__frame { width: 100%; height: 100%; border: 0; display: block; }
.cv-modal__spinner { position: absolute; top: 50%; left: 50%; width: 40px; height: 40px; margin: -20px; border-radius: 50%; border: 3px solid rgba(255,255,255,0.25); border-top-color: #fff; animation: spin 0.8s linear infinite; }
@media (max-width: 560px) { .cv-modal__title { font-size: var(--text-base); } .cv-act span, .cv-act--primary { font-size: var(--text-sm); } }

/* ── Extra decorative loops ── */
strong, b, .grad { background-size: 220% 220%; animation: grad-shimmer 7s ease infinite; }
@keyframes grad-shimmer { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }

@media (prefers-reduced-motion: reduce) {
  strong, b, .grad { animation: none !important; }
}

/* ═══════════ ORGANIC SHAPE + ICON MOTION ═══════════ */
@keyframes blob-morph {
  0%,100% { border-radius: 63% 37% 41% 59% / 57% 45% 55% 43%; }
  34%     { border-radius: 42% 58% 63% 37% / 48% 62% 38% 52%; }
  67%     { border-radius: 56% 44% 35% 65% / 38% 47% 53% 62%; }
}
@keyframes icon-bob { 0%,100%{transform:translateY(0) rotate(0)} 50%{transform:translateY(-6px) rotate(3deg)} }
.card--icon[href*="linkedin"] .card-art { animation-delay: -2.2s; }   /* desync LinkedIn's bob from Gmail (position-independent) */

@keyframes logo-wiggle { 0%,100%{transform:rotate(0) scale(1)} 25%{transform:rotate(-8deg) scale(1.06)} 50%{transform:rotate(0) scale(1)} 75%{transform:rotate(8deg) scale(1.06)} }
.nav-logo svg { animation: logo-wiggle 6s ease-in-out infinite; transform-origin: 50% 50%; }

@keyframes bob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-3px)} }
.back-to-top svg { animation: bob 1.8s ease-in-out infinite; }

.np-dot, .gh-dot { display: inline-block; animation: dot-pulse 2.2s ease-in-out infinite; }
@keyframes dot-pulse { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.35);opacity:0.65} }

.sun__core { animation: sun-glow 3.4s ease-in-out infinite; }
@keyframes sun-glow { 0%,100%{box-shadow:0 0 24px rgba(245,166,35,0.5)} 50%{box-shadow:0 0 40px rgba(245,166,35,0.85)} }

@media (prefers-reduced-motion: reduce) {
  .about__photo, .ex-about__photo, .card--icon .card-art, .nav-logo svg, .back-to-top svg,
  .np-dot, .gh-dot, .sun__core { animation: none !important; }
}

/* ── <picture> wrapper: must fill the avatar container like the img did ── */
.about__avatar picture { display: block; width: 100%; height: 100%; }
.overlay__body picture  { display: block; }

/* ═══════════════════════════════════════════════════════════
 *  CORNER ICONS · COPY-TO-CLIPBOARD · INSTAGRAM CARD
 * ═══════════════════════════════════════════════════════════ */

/* Top-right affordance (copy / external link).
   `.card > *` forces position:relative, so re-assert from a (0,2,0) selector. */
.card .card__corner {
  position: absolute; top: 14px; right: 14px; z-index: 3;
  width: 30px; height: 30px; display: grid; place-items: center;
  border-radius: 50%; background: var(--color-surface-2);
  color: var(--color-text-subtle); opacity: 0.6;
  transition: opacity var(--dur-fast), transform var(--dur-fast) var(--ease-spring),
              color var(--dur-fast), background var(--dur-fast);
}
.card:hover .card__corner { opacity: 1; transform: scale(1.08); }
.card--icon:hover .card__corner { color: var(--color-primary); }

/* about + quote expand hints are corner-pinned too (same specificity fix) */
.card--about .about__expand-hint,
.card--quote .quote__exp { position: absolute; z-index: 3; }

/* Copy-to-clipboard feedback toast */
.card .copy-toast {
  position: absolute; left: 50%; bottom: 14px; z-index: 4;
  transform: translate(-50%, 8px);
  padding: 5px 12px; border-radius: var(--radius-pill);
  background: var(--color-primary); color: #fff;
  font-size: var(--text-sm); font-weight: 600; white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-mid), transform var(--dur-mid) var(--ease-spring);
}
.card--icon.is-copied .copy-toast { opacity: 1; transform: translate(-50%, 0); }
.card--icon.is-copied .card__corner { color: var(--color-primary); opacity: 1; }

/* Instagram — a logo that opens into a looping profile feed */
.card--ig { padding: 0; overflow: hidden; background: #12121f; color: #fff; }
.card--ig .ig__feed { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.ig__track { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 6px; animation: ig-scroll 16s linear infinite; }
.ig__tile { aspect-ratio: 1; border-radius: 9px; }
.ig__tile:nth-child(6n+1) { background: linear-gradient(135deg, #feda75, #fa7e1e); }
.ig__tile:nth-child(6n+2) { background: linear-gradient(135deg, #d62976, #962fbf); }
.ig__tile:nth-child(6n+3) { background: linear-gradient(135deg, #4f5bd5, #962fbf); }
.ig__tile:nth-child(6n+4) { background: linear-gradient(135deg, #fa7e1e, #d62976); }
.ig__tile:nth-child(6n+5) { background: linear-gradient(135deg, #962fbf, #4f5bd5); }
.ig__tile:nth-child(6n+6) { background: linear-gradient(135deg, #feda75, #d62976); }
@keyframes ig-scroll { to { transform: translateY(-50%); } }

.card--ig .ig__veil {
  position: absolute; inset: 0; z-index: 1;
  background: radial-gradient(circle at 32% 18%, rgba(214,41,150,0.5), rgba(79,91,213,0.82) 65%, rgba(18,18,31,0.94));
  transition: opacity var(--dur-slow) var(--ease-out);
}
.card--ig:hover .ig__veil { opacity: 0.3; }

/* wide 2×1 layout: logo + handle inline, Follow CTA reveals on hover */
.card--ig .ig__overlay {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: row; align-items: center; justify-content: center;
  gap: 16px; text-align: left; padding: 0 24px;
}
.ig__logo {
  display: grid; place-items: center; width: 62px; height: 62px; flex-shrink: 0;
  border-radius: 18px; background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.4); color: #fff;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  transition: transform var(--dur-slow) var(--ease-spring);
}
.card--ig:hover .ig__logo { transform: scale(0.92) rotate(-4deg); }
.ig__handle { font-family: var(--font-display); font-weight: 600; font-size: var(--text-5xl); text-shadow: 0 2px 14px rgba(0,0,0,0.45); }
.ig__cta {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 18px; border-radius: var(--radius-pill);
  background: #fff; color: #d62976; font-weight: 700; font-size: var(--text-base);
  opacity: 0; transform: translateY(10px);
  transition: opacity var(--dur-mid), transform var(--dur-mid) var(--ease-spring);
}
.ig__cta svg { stroke: currentColor; }
.card--ig:hover .ig__cta { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .ig__track { animation: none !important; transform: none !important; }
}

/* ── Blog card (2×2: link to the writing section /blog) ── */
.card--blog { position: relative; justify-content: flex-end; padding: 26px 28px; overflow: hidden;
  background: linear-gradient(150deg, var(--c-teal-500) 0%, #2f6fb0 48%, var(--c-purple-600) 100%); color: #fff; }
.card--blog .card__grain { opacity: 0.12; mix-blend-mode: overlay; }
/* NB: scoped under .card--blog so `position` beats the generic
   `.card > *:not(.card__grain){position:relative}` rule (0,2,0) — otherwise the
   art/glow fall back into flow and the icon overlaps the caption. */
.card--blog .blog__glow { position: absolute; inset: -20%; z-index: 0; pointer-events: none; filter: blur(10px);
  background: radial-gradient(circle at 78% 20%, rgba(255,255,255,0.34), transparent 45%),
              radial-gradient(circle at 22% 88%, rgba(124,92,252,0.5), transparent 50%);
  animation: blog-glow 8s ease-in-out infinite; }
@keyframes blog-glow { 0%,100% { opacity: 0.8; } 50% { opacity: 1; } }
.card--blog .blog__art { position: absolute; top: 20px; right: 18px; z-index: 1; color: rgba(255,255,255,0.92);
  filter: drop-shadow(0 10px 24px rgba(0,40,60,0.32)); }
.blog__pen { transform-origin: 84px 90px; animation: blog-write 5s var(--ease-soft) infinite; }
@keyframes blog-write { 0%,100% { transform: translate(0,0) rotate(0); } 50% { transform: translate(-7px,3px) rotate(-5deg); } }
.card--blog .blog__cap { position: relative; z-index: 2; }
.card--blog .card__tag--light { color: rgba(255,255,255,0.95); }
.blog__cap h3 { font-size: clamp(30px, 4vw, 42px); font-weight: 800; line-height: 1.0; letter-spacing: -0.02em; margin-top: 6px; }
.blog__cap p { color: rgba(255,255,255,0.88); font-size: var(--text-2xl); margin-top: 8px; max-width: 22ch; }
.blog__cta { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; font-weight: 600; font-size: var(--text-xl);
  padding: 8px 14px; border-radius: var(--radius-pill); background: rgba(255,255,255,0.16);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  transition: background 0.2s ease; }
.blog__cta svg { stroke: currentColor; transition: transform 0.2s var(--ease-out); }
.card--blog:hover .blog__cta { background: rgba(255,255,255,0.28); }
.card--blog:hover .blog__cta svg { transform: translateX(3px); }

/* Compact footprints — the styles above assume the 2×2 slot; these tighten the
   card when the blog slot is set to s-2x1 (wide, short) or s-1x1 (small square).
   SHIPPED at s-2x1. Accepted trade-off: the 4-col "Side" filter then has a 2-cell
   gap (Side = 14 cells); only s-2x2 tiles that filter hole-free. See DOCUMENTATION §9. */
.s-2x1 .card--blog { padding: 22px 26px; }
.s-2x1 .blog__art { top: 50%; right: 22px; transform: translateY(-50%); }
.s-2x1 .blog__art svg { width: 94px; height: 94px; }
.s-2x1 .blog__cap { max-width: 70%; }
.s-2x1 .blog__cap h3 { font-size: clamp(26px, 3.2vw, 34px); margin-top: 4px; }
.s-2x1 .blog__cap p { font-size: var(--text-xl); margin-top: 6px; max-width: 32ch; }
.s-2x1 .blog__cta { margin-top: 12px; }

.s-1x1 .card--blog { padding: 18px 20px; }
.s-1x1 .blog__art { top: 14px; right: 12px; }
.s-1x1 .blog__art svg { width: 58px; height: 58px; }
.s-1x1 .blog__cap h3 { font-size: clamp(24px, 7vw, 30px); margin-top: 4px; }
.s-1x1 .blog__cap p { display: none; }            /* no room for the blurb at this size */
.s-1x1 .blog__cta { margin-top: 10px; font-size: var(--text-base); padding: 6px 12px; }

/* ── Nav "Blog" link (floating pill, matches the other nav controls) ── */
/* margin-left detaches the Blog pill from the Revolut button beside it. */
.nav-link { flex-shrink: 0; margin-left: 12px; display: inline-flex; align-items: center; gap: 7px;
  height: 36px; padding: 0 15px; border-radius: var(--radius-pill);
  background: var(--color-nav-blur); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: var(--shadow-rest); color: var(--color-text);
  font-family: var(--font-primary); font-weight: 500; font-size: 13px;
  transition: background 0.3s ease, transform 0.2s var(--ease-spring), box-shadow 0.2s ease, color 0.2s ease; }
.nav-link:hover { transform: translateY(-1px); box-shadow: var(--shadow-hover); color: var(--color-primary); }
.nav-link svg { flex-shrink: 0; }

@media (prefers-reduced-motion: reduce) { .blog__pen, .blog__glow { animation: none; } }

/* ── Mobile nav: move the Blog pill to the right, beside the language selector ──
   Placed at the end so source order beats the desktop `.nav-link{margin-left:12px}`
   and the earlier `.lang{margin-left:auto}` rules (equal specificity). */
@media (max-width: 720px) {
  .nav-link { margin-left: auto; padding: 0 13px; }   /* push Blog to the right edge */
  .lang { margin-left: 8px; }                          /* sit it right next to Blog */
}
@media (max-width: 360px) {
  .nav-link span { display: none; }   /* very small screens: icon-only Blog pill to save room */
  .nav-link { padding: 0 11px; }
}