/* =========================================================
   Mohammed Abbakar — Portfolio v3
   Bento tiles, light and dark theme, one orange accent.
   ========================================================= */

:root,
[data-theme="light"] {
  --page:     #FFFFFF;
  --band:     #F1F1F1;
  --tile:     #ECECEC;
  --card:     #FFFFFF;
  --ink:      #232323;
  --ink-soft: #5B5B5B;
  --line:     rgba(35, 35, 35, 0.16);
  --accent:   #E2572B;
  --invert-bg:  #262626;
  --invert-ink: #F4F4F4;
  --shadow:   0 1px 2px rgba(0, 0, 0, 0.04), 0 18px 36px -26px rgba(0, 0, 0, 0.28);
  --spot:     rgba(255, 255, 255, 0.85);
  --spot-inv: rgba(255, 255, 255, 0.10);
  color-scheme: light;
}
[data-theme="dark"] {
  --page:     #1E1E1E;
  --band:     #262626;
  --tile:     #2C2C2C;
  --card:     #1A1A1A;
  --ink:      #F2F2F2;
  --ink-soft: #B4B4B4;
  --line:     rgba(242, 242, 242, 0.2);
  --accent:   #F26A3D;
  --invert-bg:  #F2F2F2;
  --invert-ink: #232323;
  --shadow:   0 1px 2px rgba(0, 0, 0, 0.3), 0 18px 36px -26px rgba(0, 0, 0, 0.7);
  --spot:     rgba(255, 255, 255, 0.07);
  --spot-inv: rgba(0, 0, 0, 0.06);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Sora', 'Helvetica Neue', Arial, sans-serif;
  background: var(--page);
  color: var(--ink);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  transition: background 0.4s ease, color 0.4s ease;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; text-align: left; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

.wrap { width: min(1180px, 100% - 2.5rem); margin-inline: auto; }
.band { padding: clamp(3.5rem, 8vw, 6rem) 0; transition: background 0.4s ease; }
.band-page { background: var(--page); }
.band-alt  { background: var(--band); }
#hello { padding-top: clamp(1.25rem, 4vw, 3.5rem); }

/* ---------- Side rail ---------- */
.rail {
  position: fixed;
  z-index: 40;
  left: max(1rem, calc((100vw - 1180px) / 2 - 4.5rem));
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.35rem;
  border-radius: 100px;
  background: var(--band);
  border: 1px solid var(--line);
  transition: background 0.4s ease;
}
.rail a {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  padding: 0.9rem 0.45rem;
  border-radius: 100px;
  font-size: 0.78rem;
  text-decoration: none;
  color: var(--ink-soft);
  transition: background 0.25s, color 0.25s;
}
.rail a:hover { color: var(--ink); }
.rail a { position: relative; z-index: 1; }
.rail a.is-active { color: var(--invert-ink); }
.rail-pill {
  position: absolute;
  z-index: 0;
  left: 0.35rem;
  right: 0.35rem;
  top: 0;
  height: 0;
  border-radius: 100px;
  background: var(--invert-bg);
  transition: top 0.5s cubic-bezier(0.22, 1, 0.36, 1), height 0.5s cubic-bezier(0.22, 1, 0.36, 1), left 0.5s cubic-bezier(0.22, 1, 0.36, 1), width 0.5s cubic-bezier(0.22, 1, 0.36, 1), background 0.4s;
}

.lang {
  position: fixed;
  z-index: 40;
  top: 1rem;
  right: 1rem;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  text-align: center;
  font-size: 0.78rem;
  font-weight: 600;
  background: var(--band);
  border: 1px solid var(--line);
  transition: background 0.25s;
}
.lang:hover { background: var(--tile); }

/* ---------- Tiles ---------- */
.bento {
  display: grid;
  grid-template-columns: 2.6fr 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 1rem;
}
.tile {
  position: relative;
  border-radius: 26px;
  background-color: var(--tile);
  background-image: radial-gradient(320px circle at var(--mx, -500px) var(--my, -500px), var(--spot), transparent 70%);
  padding: clamp(1.4rem, 2.4vw, 2rem);
  transition: background-color 0.4s ease, color 0.4s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Hero tile */
.tile-hero {
  grid-row: span 2;
  display: flex;
  flex-direction: column;
  background-image:
    radial-gradient(420px circle at var(--mx, -500px) var(--my, -500px), var(--spot), transparent 70%),
    linear-gradient(145deg, var(--tile), color-mix(in srgb, var(--tile) 70%, var(--page)));
}
.hero-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1.8rem; }
.avatar {
  width: 64px;
  height: 64px;
  border-radius: 14px;
  object-fit: cover;
  object-position: center 20%;
  box-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.45);
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.avatar:hover { transform: rotate(-6deg) scale(1.12); }
.status { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.92rem; }
.dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #3DBE4E;
  box-shadow: 0 0 0 4px rgba(61, 190, 78, 0.18);
}
.hero-title {
  font-size: clamp(1.8rem, 3vw, 2.55rem);
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: -0.025em;
  margin-bottom: 1.6rem;
}
.hero-title .was {
  text-decoration: none;
  white-space: nowrap;
  background: linear-gradient(currentColor, currentColor) no-repeat 0 58% / 100% 0.075em;
  -webkit-box-decoration-break: slice;
          box-decoration-break: slice;
}
.js .hero-title .was { background-size: 0% 0.075em; animation: strike 0.7s cubic-bezier(0.65, 0, 0.35, 1) 1s forwards; }
@keyframes strike { to { background-size: 100% 0.075em; } }
.js .hero-title .star { opacity: 0; animation: fadeIn 0.3s ease 1.6s forwards; }
.js .hero-title .now { opacity: 0; transform: translateY(0.3em); filter: blur(6px); animation: nowIn 0.8s cubic-bezier(0.22, 1, 0.36, 1) 1.75s forwards; }
@keyframes fadeIn { to { opacity: 1; } }
@keyframes nowIn { to { opacity: 1; transform: none; filter: none; } }
.hero-title .star { font-size: 0.7em; top: -0.35em; margin-left: 0.04em; }
.hero-title .now { display: block; color: var(--accent); }
.hero-meta { font-size: 0.92rem; line-height: 1.65; margin-bottom: 2rem; }
.hero-meta a { text-underline-offset: 3px; }
.footnote { margin-top: 0.6rem; color: var(--ink-soft); font-size: 0.82rem; }
.hero-actions { margin-top: auto; display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.socials { margin-left: auto; display: flex; gap: 0.6rem; }

.btn {
  display: inline-block;
  padding: 0.7em 1.3em;
  border-radius: 100px;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.25s, color 0.25s, transform 0.2s;
}
.btn:active { transform: scale(0.97); }
.btn-solid { background: var(--invert-bg); color: var(--invert-ink); border: 1px solid var(--invert-bg); }
.btn-solid:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-ghost { border: 1px solid var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--page); }
.round {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--invert-bg);
  color: var(--invert-ink);
  transition: background 0.25s, color 0.25s;
}
.round svg { width: 19px; height: 19px; }
.round:hover { background: var(--accent); color: #fff; }

/* Theme tile: always the opposite of the page */
.tile-theme {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2.5rem;
  min-height: 210px;
  background-color: var(--invert-bg);
  background-image: radial-gradient(260px circle at var(--mx, -500px) var(--my, -500px), var(--spot-inv), transparent 70%);
  color: var(--invert-ink);
}
.tile-theme:hover { transform: translateY(-3px); }
.theme-icon svg { width: 44px; height: 44px; }
.i-sun { display: none; }
[data-theme="dark"] .i-sun { display: block; }
[data-theme="dark"] .i-moon { display: none; }
.tile-theme[data-spin] .theme-icon { animation: spin 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes spin { from { transform: rotate(-90deg) scale(0.6); opacity: 0; } }
.theme-text { font-size: 0.92rem; line-height: 1.5; max-width: 15rem; }

/* Link tiles (Works, About, LinkedIn, GitHub) */
.tile-link {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  text-decoration: none;
}
.tile-link:hover { transform: translateY(-3px); }
.tile-h { font-size: clamp(1.45rem, 2.3vw, 1.9rem); font-weight: 600; letter-spacing: -0.02em; }
.tile-p { font-size: 0.9rem; color: var(--ink-soft); max-width: 16rem; }
.tile-p u { text-underline-offset: 3px; color: var(--ink); }
.tile-link .arrow { margin-top: auto; }
.tile-works { grid-column: 2; grid-row: 2; min-height: 250px; }
.tile-about { grid-column: 3; grid-row: 1 / span 2; }

/* About tile: a small stage. The lamp switches on after the headline animation,
   and the light gets brighter while the tile is hovered. Dark in both themes. */
.stage {
  overflow: hidden;
  isolation: isolate;
  background-color: #0A0A0A;
  background-image: none;
  color: #F4F4F4;
  min-height: 460px;
}
.stage .tile-p { color: rgba(244, 244, 244, 0.72); }
.stage .tile-p u { color: #fff; }
.stage > .tile-h, .stage > .tile-p, .stage > .arrow { position: relative; z-index: 3; }
.stage-lamp {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 50%;
  width: 46%;
  height: 4px;
  transform: translateX(-50%);
  border-radius: 0 0 50% 50%;
  background: radial-gradient(ellipse at 50% 0%, #fff 0%, rgba(255, 255, 255, 0.85) 35%, transparent 72%);
  filter: blur(0.4px);
  box-shadow: 0 0 18px 4px rgba(255, 255, 255, 0.35);
}
.stage-beam {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: radial-gradient(ellipse 62% 78% at 50% 0%, rgba(255, 255, 255, 0.38) 0%, rgba(255, 255, 255, 0.14) 38%, rgba(255, 255, 255, 0.03) 62%, transparent 78%);
  transform-origin: 50% 0;
  transition: opacity 0.6s ease, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.stage-floor {
  position: absolute;
  z-index: -1;
  left: 8%;
  right: 8%;
  bottom: -6%;
  height: 22%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 50%, rgba(255, 255, 255, 0.16), transparent 70%);
  transition: opacity 0.6s ease;
}
.stage-photo {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: 0;
  height: 68%;
  width: auto;
  max-width: none;
  transform: translateX(-50%);
  filter: brightness(0.92) contrast(1.05);
  -webkit-mask: linear-gradient(to bottom, #000 62%, transparent 100%);
          mask: linear-gradient(to bottom, #000 62%, transparent 100%);
  transition: filter 0.6s ease, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Light falling on the head and shoulders */
.stage-glow {
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 45% 40% at 50% 34%, rgba(255, 255, 255, 0.22), transparent 70%);
  mix-blend-mode: soft-light;
  transition: opacity 0.6s ease;
}
.stage:hover .stage-beam { transform: scale(1.08); opacity: 1; }
.stage:hover .stage-photo { filter: brightness(1.05) contrast(1.05); transform: translateX(-50%) translateY(-6px); }
.stage .arrow { border-color: rgba(255, 255, 255, 0.85); }

/* Switch-on flicker, once, after the headline has finished */
.js .stage-beam, .js .stage-lamp, .js .stage-glow, .js .stage-floor { opacity: 0; animation: lampOn 1.1s steps(1, end) 2.6s forwards; }
.js .stage-photo { filter: brightness(0.35) contrast(1.05); animation: subjectLit 1.1s ease 2.6s forwards; }
@keyframes lampOn {
  0%   { opacity: 0.9; }
  12%  { opacity: 0.1; }
  22%  { opacity: 0.85; }
  30%  { opacity: 0.2; }
  45%  { opacity: 1; }
  100% { opacity: 1; }
}
@keyframes subjectLit {
  0%, 44% { filter: brightness(0.45) contrast(1.05); }
  100%    { filter: brightness(0.92) contrast(1.05); }
}
.js .stage:hover .stage-photo { animation: none; filter: brightness(1.05) contrast(1.05); }

.arrow {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1.5px solid currentColor;
  flex-shrink: 0;
  transition: background 0.25s, color 0.25s, border-color 0.25s, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.arrow svg { width: 17px; height: 17px; }
a:hover > .arrow { background: var(--accent); border-color: var(--accent); color: #fff; transform: rotate(45deg); }

/* Load sequence: tiles settle in once */
.bento > .tile { animation: tileIn 0.8s cubic-bezier(0.22, 1, 0.36, 1) both; }
.bento > .tile:nth-child(2) { animation-delay: 0.08s; }
.bento > .tile:nth-child(3) { animation-delay: 0.16s; }
.bento > .tile:nth-child(4) { animation-delay: 0.24s; }
@keyframes tileIn { from { opacity: 0; transform: translateY(16px) scale(0.985); } }

/* ---------- Section headings ---------- */
.h2 {
  font-size: clamp(1.75rem, 3.2vw, 2.6rem);
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: -0.025em;
  margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem);
}
.scribble {
  position: relative;
  color: var(--accent);
  white-space: nowrap;
}
.scribble svg {
  position: absolute;
  left: -4%;
  bottom: -0.28em;
  width: 108%;
  height: 0.4em;
  overflow: visible;
  pointer-events: none;
}
.scribble path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-dasharray: 240;
  stroke-dashoffset: 0;
}
.js [data-reveal]:not(.in) .scribble path { stroke-dashoffset: 240; }
.js [data-reveal].in .scribble path { transition: stroke-dashoffset 1s cubic-bezier(0.65, 0, 0.35, 1) 0.45s; }

/* ---------- Work cards ---------- */
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.card {
  --pad: 1.75rem;
  --thumb: 56px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 330px;
  padding: var(--pad);
  border-radius: 26px;
  background: var(--card);
  box-shadow: var(--shadow);
  transition: background-color 0.4s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s;
}

/* Full-card image, clipped down to the thumbnail's exact spot until hover */
.card-reveal {
  position: absolute;
  inset: 0;
  z-index: -1;
  clip-path: inset(var(--pad) calc(100% - var(--pad) - var(--thumb)) calc(100% - var(--pad) - var(--thumb)) var(--pad) round 14px);
  transition: clip-path 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.card-reveal img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1); }
.card-reveal::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10, 10, 10, 0.92) 0%, rgba(10, 10, 10, 0.62) 50%, rgba(10, 10, 10, 0.2) 100%);
  opacity: 0;
  transition: opacity 0.5s ease;
}

.card-thumb {
  width: var(--thumb);
  height: var(--thumb);
  border-radius: 14px;
  margin-bottom: 2.1rem;
  position: relative;
  z-index: 2;
  cursor: zoom-in;
}
.card-thumb img {
  width: 100%;
  height: 100%;
  border-radius: 14px;
  object-fit: cover;
  transition: opacity 0.3s ease;
}
/* The small expand badge tells visitors there is an image to see */
.zoom {
  position: absolute;
  right: -8px;
  bottom: -8px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--accent);
  color: #fff;
  box-shadow: 0 0 0 3px var(--card);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s;
}
.zoom svg { width: 13px; height: 13px; }
.card-thumb:hover .zoom, .card-thumb:focus-visible .zoom { transform: scale(1.18); }

.card h3 { font-size: 1.22rem; font-weight: 600; line-height: 1.35; letter-spacing: -0.015em; margin-bottom: 0.9rem; transition: color 0.4s; }
.card-link { text-decoration: none; }
.card-link::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.card-link:focus-visible { outline: none; }
.card:has(.card-link:focus-visible) { outline: 3px solid var(--accent); outline-offset: 3px; }
.card p { font-size: 0.9rem; color: var(--ink-soft); line-height: 1.6; margin-bottom: 1.8rem; transition: color 0.4s; }
.card .arrow { margin-top: auto; transition: background 0.3s, color 0.3s, border-color 0.3s, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1); }

@media (hover: hover) {
  .card:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.55); }
  .card:hover .card-reveal,
  .card:focus-within .card-reveal { clip-path: inset(0 0 0 0 round 26px); }
  .card:hover .card-reveal img { transform: scale(1); }
  .card:hover .card-reveal::after,
  .card:focus-within .card-reveal::after { opacity: 1; }
  .card:hover .card-thumb img,
  .card:focus-within .card-thumb img { opacity: 0; }
  .card:hover .zoom { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.9); }
  .card:hover h3, .card:focus-within h3 { color: #fff; }
  .card:hover p, .card:focus-within p { color: rgba(255, 255, 255, 0.82); }
  .card:hover .arrow { background: var(--accent); border-color: var(--accent); color: #fff; transform: rotate(45deg); }
}

/* Touch screens: no hover, so show a proper image strip instead */
@media (hover: none) {
  .card-reveal { display: none; }
}

/* ---------- Lightbox ---------- */
.lightbox {
  margin: auto;
  width: min(1100px, 100% - 2rem);
  max-height: calc(100% - 2rem);
  padding: 0;
  border: 0;
  border-radius: 24px;
  overflow: hidden;
  background: var(--card);
  color: var(--ink);
  box-shadow: 0 40px 100px -20px rgba(0, 0, 0, 0.6);
}
.lightbox::backdrop { background: rgba(10, 10, 10, 0.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.lightbox[open] { animation: lbIn 0.45s cubic-bezier(0.22, 1, 0.36, 1); }
.lightbox[open]::backdrop { animation: fadeIn2 0.3s ease; }
@keyframes lbIn { from { opacity: 0; transform: translateY(24px) scale(0.96); } }
@keyframes fadeIn2 { from { opacity: 0; } }
.lightbox img { width: 100%; max-height: 72vh; object-fit: contain; background: #111; }
.lb-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.4rem; flex-wrap: wrap; }
.lb-bar p { font-weight: 600; font-size: 1.05rem; }
.lb-close {
  position: absolute;
  top: 0.8rem;
  right: 0.8rem;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.92);
  color: #111;
  transition: transform 0.3s;
}
.lb-close:hover { transform: rotate(90deg); }
.lb-close svg { width: 20px; height: 20px; }

/* ---------- Process: from raw data to a decision ---------- */
.process {
  border-radius: 32px;
  background: var(--band);
  padding: clamp(1.25rem, 3vw, 2.25rem);
  transition: background-color 0.4s ease;
}
.stepper {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.5rem;
  margin-bottom: clamp(1.25rem, 3vw, 2rem);
}
.step {
  --fill: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  padding: 0.9rem 0.5rem 1rem;
  border-radius: 20px;
  border: 1px solid transparent;
  text-align: center;
  transition: background 0.3s, border-color 0.3s;
}
.step:hover { background: var(--card); border-color: var(--line); }
/* Connector to the next step; fills with the accent as the step completes */
.step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: calc(0.9rem + 22px);
  left: calc(50% + 30px);
  right: calc(-50% + 30px - 0.5rem);
  height: 3px;
  border-radius: 3px;
  background:
    linear-gradient(var(--accent), var(--accent)) no-repeat 0 0 / calc(var(--fill) * 100%) 100%,
    var(--line);
}
.step.is-done::after { --fill: 1; }
.step-node {
  position: relative;
  z-index: 1;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--tile);
  color: var(--ink-soft);
  font-weight: 600;
  font-size: 0.95rem;
  transition: background 0.4s, color 0.4s, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.step-node .i-check { position: absolute; width: 20px; height: 20px; opacity: 0; transform: scale(0.4); transition: opacity 0.3s, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
.step.is-done .step-node { background: color-mix(in srgb, var(--accent) 18%, var(--card)); color: var(--accent); }
.step.is-done .step-num { opacity: 0; }
.step.is-done .i-check { opacity: 1; transform: scale(1); }
.step[aria-selected="true"] .step-node { background: var(--accent); color: #fff; transform: scale(1.08); }
/* Dashed ring that turns slowly around the current step */
.step[aria-selected="true"] .step-node::before {
  content: '';
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  border: 2px dashed color-mix(in srgb, var(--accent) 70%, transparent);
  animation: ring 8s linear infinite;
}
@keyframes ring { to { transform: rotate(360deg); } }
.step-name { font-size: clamp(0.85rem, 1.3vw, 1.05rem); font-weight: 600; color: var(--ink-soft); transition: color 0.3s; }
.step[aria-selected="true"] .step-name, .step.is-done .step-name { color: var(--ink); }

.process-body {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(1rem, 2.5vw, 2rem);
  align-items: stretch;
}
.process-text {
  background: var(--card);
  border-radius: 24px;
  padding: clamp(1.4rem, 2.6vw, 2.2rem);
  box-shadow: var(--shadow);
  transition: background-color 0.4s ease;
}
.step-panel { animation: panelIn 0.55s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes panelIn { from { opacity: 0; transform: translateX(14px); } }
.step-count { font-size: 0.8rem; color: var(--ink-soft); margin-bottom: 1.2rem; }
.step-panel h3 { font-size: clamp(1.35rem, 2.2vw, 1.8rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; margin-bottom: 0.9rem; }
.step-desc { color: var(--ink-soft); font-size: 0.98rem; line-height: 1.7; margin-bottom: 1.4rem; max-width: 34rem; }
.step-tools { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1.6rem; }
.step-tools li { padding: 0.35em 0.85em; border-radius: 100px; border: 1px solid var(--line); font-size: 0.8rem; }
.step-rule {
  padding: 1rem 1.1rem;
  border-radius: 16px;
  background: color-mix(in srgb, var(--accent) 10%, var(--card));
  border-left: 3px solid var(--accent);
  font-size: 0.92rem;
  line-height: 1.55;
}
.step-rule > span:first-child { font-weight: 600; }

/* Specimen: a small window whose content changes with each step */
.specimen {
  display: flex;
  flex-direction: column;
  border-radius: 24px;
  overflow: hidden;
  background: #151515;
  color: #EDEDED;
  box-shadow: 0 30px 60px -35px rgba(0, 0, 0, 0.6);
  min-height: 380px;
}
.spec-bar { display: flex; align-items: center; gap: 0.9rem; padding: 0.8rem 1rem; background: #1F1F1F; }
.spec-dots { display: flex; gap: 6px; }
.spec-dots i { width: 10px; height: 10px; border-radius: 50%; background: #3A3A3A; }
.spec-dots i:first-child { background: var(--accent); }
.spec-file { font-size: 0.78rem; color: #A9A9A9; }
.spec-body { flex: 1; padding: 1.3rem 1.3rem 1rem; font-size: 0.86rem; position: relative; }
.spec-caption { padding: 0.7rem 1.3rem 0.9rem; font-size: 0.72rem; color: #8C8C8C; border-top: 1px solid #262626; }

/* Step 1: the question */
.sp-ask { display: flex; flex-direction: column; gap: 1rem; }
.sp-bubble {
  align-self: flex-start;
  max-width: 92%;
  padding: 1rem 1.15rem;
  border-radius: 18px 18px 18px 4px;
  background: #262626;
  font-size: 1.05rem;
  line-height: 1.5;
}
.sp-caret { display: inline-block; width: 2px; height: 1.05em; margin-left: 2px; vertical-align: -0.15em; background: var(--accent); animation: caret 0.9s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.sp-need { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.sp-need div { padding: 0.8rem 0.9rem; border-radius: 14px; border: 1px dashed #3C3C3C; opacity: 0; animation: pop 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
.sp-need small { display: block; color: #8F8F8F; font-size: 0.7rem; margin-bottom: 0.2rem; }

/* Step 2 and 3: SQL + table */
.sp-code {
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.78rem;
  line-height: 1.6;
  color: #CFCFCF;
  white-space: pre-wrap;
  margin-bottom: 1rem;
  min-height: 5.2em;
}
.sp-code b { color: var(--accent); font-weight: 500; }
.sp-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.sp-table th { text-align: left; font-weight: 500; color: #8F8F8F; font-size: 0.72rem; padding: 0.35rem 0.5rem; border-bottom: 1px solid #2E2E2E; }
.sp-table td { padding: 0.42rem 0.5rem; border-bottom: 1px solid #242424; white-space: nowrap; transition: background 0.4s, color 0.4s; }
.sp-table tr { opacity: 0; animation: rowIn 0.45s ease forwards; }
@keyframes rowIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.sp-table .bad { background: rgba(226, 87, 43, 0.22); color: #FFB59C; }
.sp-table .fixed { background: rgba(61, 190, 78, 0.18); color: #9BE3A5; }
.sp-table .fix-new { display: none; }
.sp-table .dup td { background: rgba(226, 87, 43, 0.14); }
.is-cleaning .sp-table .bad .fix-old { display: none; }
.is-cleaning .sp-table .bad .fix-new { display: inline; }
.is-cleaning .sp-table .bad { background: rgba(61, 190, 78, 0.18); color: #9BE3A5; }
.is-cleaning .sp-table tr.dup { animation: dupOut 0.6s ease forwards; }
@keyframes dupOut { to { opacity: 0.15; text-decoration: line-through; } }
.sp-log { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 1rem; }
.sp-log span { padding: 0.3em 0.75em; border-radius: 100px; background: #232323; font-size: 0.72rem; color: #BDBDBD; opacity: 0; animation: pop 0.45s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
.sp-log span::before { content: '✓ '; color: #6FD27C; }
@keyframes pop { from { opacity: 0; transform: scale(0.85) translateY(6px); } to { opacity: 1; transform: none; } }

/* Step 4: chart */
.sp-chart-title { color: #BDBDBD; margin-bottom: 1.2rem; }
.sp-chart-title b { color: #fff; font-weight: 600; }
.sp-bars { display: flex; flex-direction: column; gap: 0.85rem; }
.sp-bar { display: grid; grid-template-columns: 6.5rem 1fr 2.6rem; align-items: center; gap: 0.7rem; }
.sp-bar span:first-child { color: #CFCFCF; font-size: 0.8rem; }
.sp-track { display: block; height: 22px; border-radius: 6px; background: #222; overflow: hidden; }
.sp-fill { display: block; height: 100%; width: var(--w); border-radius: 6px; background: #4A4A4A; transform-origin: left; animation: grow 0.9s cubic-bezier(0.22, 1, 0.36, 1) both; }
.sp-bar.top .sp-fill { background: var(--accent); }
.sp-bar b { font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
@keyframes grow { from { transform: scaleX(0); } }
.sp-axis { margin-top: 1.2rem; color: #8F8F8F; font-size: 0.72rem; }

/* Step 5: decision */
.sp-decide { display: flex; flex-direction: column; gap: 1rem; }
.sp-big { font-size: clamp(3rem, 7vw, 4.6rem); font-weight: 600; letter-spacing: -0.04em; line-height: 1; color: var(--accent); font-variant-numeric: tabular-nums; }
.sp-lead { font-size: 1.05rem; line-height: 1.5; max-width: 26rem; }
.sp-card { padding: 1rem 1.1rem; border-radius: 16px; background: #222; border: 1px solid #2E2E2E; opacity: 0; animation: pop 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.5s forwards; }
.sp-card small { display: block; color: #8F8F8F; font-size: 0.7rem; margin-bottom: 0.3rem; }

.process-foot { display: flex; align-items: center; gap: 0.5rem; margin-top: 1.25rem; }
.p-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  background: var(--card);
  transition: background 0.25s, color 0.25s, border-color 0.25s;
}
.p-btn:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.p-btn:disabled { opacity: 0.35; pointer-events: none; }
.p-btn svg { width: 18px; height: 18px; }
.p-play { position: relative; }
.p-play::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: conic-gradient(var(--accent) calc(var(--t, 0) * 1turn), transparent 0);
  -webkit-mask: radial-gradient(circle, transparent 23px, #000 24px);
          mask: radial-gradient(circle, transparent 23px, #000 24px);
}
.p-play .i-play, .p-play .i-replay { display: none; }
.process.is-paused .p-play .i-pause { display: none; }
.process.is-paused .p-play .i-play { display: block; }
.process.is-ended .p-play .i-pause, .process.is-ended .p-play .i-play { display: none; }
.process.is-ended .p-play .i-replay { display: block; }
.p-hint { margin-left: 0.6rem; font-size: 0.82rem; color: var(--ink-soft); }

@media (max-width: 980px) {
  .process-body { grid-template-columns: 1fr; }
  .specimen { min-height: 340px; }
}
@media (max-width: 600px) {
  .stepper { gap: 0; }
  .step { padding: 0.6rem 0.1rem; }
  .step:hover { background: none; border-color: transparent; }
  .step-name { font-size: 0.68rem; }
  .step-node { width: 36px; height: 36px; font-size: 0.85rem; }
  .step:not(:last-child)::after { top: calc(0.6rem + 18px); left: calc(50% + 22px); right: calc(-50% + 22px); }
  .sp-table th:nth-child(1), .sp-table td:nth-child(1) { display: none; }
  .sp-bar { grid-template-columns: 5.2rem 1fr 2.4rem; }
  .p-hint { display: none; }
}

/* ---------- Stories ---------- */
.stories {
  display: grid;
  grid-template-columns: 0.9fr 1.4fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}
.stories-intro { position: sticky; top: 2rem; }
.lead { color: var(--ink-soft); font-size: 1rem; max-width: 26rem; margin-bottom: 1.5rem; }
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 0.45rem; }
.chips li {
  padding: 0.4em 0.9em;
  border-radius: 100px;
  border: 1px solid var(--line);
  font-size: 0.82rem;
}
.story-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.story {
  padding: clamp(1.4rem, 2.4vw, 1.9rem);
  border-radius: 26px;
  background-color: var(--card);
  background-image: radial-gradient(300px circle at var(--mx, -500px) var(--my, -500px), var(--spot-card, transparent), transparent 70%);
  box-shadow: var(--shadow);
  min-height: 220px;
  display: flex;
  flex-direction: column;
  transition: background 0.4s ease;
}
.story-year {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.82rem;
  color: var(--ink-soft);
  margin-bottom: auto;
  padding-bottom: 2rem;
}
.story h3 { font-size: 1.2rem; font-weight: 600; letter-spacing: -0.015em; margin-bottom: 0.6rem; }
.story p:last-child { font-size: 0.9rem; color: var(--ink-soft); line-height: 1.6; }
.story-now { background-color: var(--invert-bg); background-image: radial-gradient(300px circle at var(--mx, -500px) var(--my, -500px), var(--spot-inv), transparent 70%); color: var(--invert-ink); }
.story-now .story-year, .story-now p:last-child { color: color-mix(in srgb, var(--invert-ink) 72%, transparent); }

/* ---------- Contact: business card ---------- */
.biz {
  --biz-accent: var(--accent);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  padding: clamp(2rem, 4vw, 3.5rem) clamp(1.5rem, 4vw, 3.5rem);
  border-radius: 32px;
  background: var(--card);
  box-shadow: var(--shadow);
  transition: background-color 0.4s ease;
}
.biz-disc {
  position: absolute;
  z-index: -1;
  top: -70px;
  left: clamp(6rem, 12vw, 10rem);
  width: 190px;
  height: 190px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 28%, var(--card));
}
.biz-photo {
  width: clamp(150px, 16vw, 210px);
  aspect-ratio: 0.56;
  border-radius: 200px;
  overflow: hidden;
  background: var(--accent);
  display: flex;
  align-items: flex-end;
  box-shadow: 0 24px 40px -22px color-mix(in srgb, var(--accent) 80%, transparent);
}
.biz-photo img { width: 118%; max-width: none; margin-left: -9%; transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1); }
.biz:hover .biz-photo img { transform: translateY(-4px) scale(1.03); }

.biz-name { display: flex; flex-direction: column; min-width: 0; }
.biz-first, .biz-last, .biz-role { font-family: 'Oswald', 'Arial Narrow', sans-serif; text-transform: uppercase; }
.biz-first {
  font-weight: 300;
  font-size: clamp(2rem, 4.4vw, 3.6rem);
  line-height: 1;
  letter-spacing: 0.02em;
}
.biz-rule {
  display: block;
  height: 1.5px;
  margin: 0.9rem 0 0.7rem;
  background: var(--line);
  transform-origin: left;
}
.biz-last {
  font-weight: 700;
  font-size: clamp(3rem, 8vw, 6.6rem);
  line-height: 0.92;
  letter-spacing: 0.005em;
}
.biz-role {
  margin-top: 0.8rem;
  font-weight: 300;
  font-size: clamp(0.85rem, 1.2vw, 1rem);
  letter-spacing: 0.55em;
  color: var(--ink-soft);
}

.biz-lines {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  padding-left: clamp(1.5rem, 3vw, 2.5rem);
  border-left: 1px solid var(--line);
}
.biz-lines li { display: flex; align-items: center; gap: 0.8rem; font-size: 0.98rem; }
.biz-lines a { text-decoration: none; transition: color 0.25s; }
.biz-lines a:hover { color: var(--accent); }
.biz-key {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  background: var(--invert-bg);
  color: var(--invert-ink);
  font-size: 0.72rem;
  font-weight: 700;
  transition: background 0.25s, color 0.25s;
}
.biz-lines li:hover .biz-key { background: var(--accent); color: #fff; }

.copy {
  position: relative;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: var(--ink-soft);
  transition: background 0.2s, color 0.2s;
}
.copy:hover { background: var(--tile); color: var(--ink); }
.copy svg { width: 15px; height: 15px; }
.copy-tip {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translate(-50%, 4px);
  padding: 0.3em 0.7em;
  border-radius: 8px;
  background: var(--invert-bg);
  color: var(--invert-ink);
  font-size: 0.72rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.25s;
}
.copy.is-done .copy-tip { opacity: 1; transform: translate(-50%, 0); }

/* Card entrance: rule draws, surname rises */
.js .biz:not(.in) .biz-rule { transform: scaleX(0); }
.js .biz.in .biz-rule { transition: transform 1s cubic-bezier(0.65, 0, 0.35, 1) 0.35s; }
.js .biz:not(.in) .biz-last { opacity: 0; transform: translateY(0.3em); }
.js .biz.in .biz-last { transition: opacity 0.7s ease 0.55s, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.55s; }
.js .biz:not(.in) .biz-photo { transform: translateY(30px); }
.js .biz.in .biz-photo { transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1) 0.15s; }

/* Pills under the card: icon slides in on hover, width stays the same */
.pills { display: flex; flex-wrap: wrap; gap: clamp(0.6rem, 1.6vw, 1.1rem); margin-top: 1.6rem; }
.pill {
  --pad-x: calc((1.8rem + 34px + 0.6rem) / 2);
  display: inline-flex;
  align-items: center;
  min-height: calc(34px + 0.8rem);
  padding: 0.4rem var(--pad-x);
  border-radius: 100px;
  background: var(--card);
  box-shadow: var(--shadow);
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
  transition: padding 0.4s cubic-bezier(0.22, 1, 0.36, 1), transform 0.35s, background-color 0.4s;
}
.pill-icon {
  width: 0;
  height: 34px;
  margin-right: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--invert-bg);
  color: var(--invert-ink);
  opacity: 0;
  transform: scale(0.5);
  transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1), margin 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.25s;
}
.pill-icon svg { width: 16px; height: 16px; }
a.pill:hover, a.pill:focus-visible { padding: 0.4rem 1.4rem 0.4rem 0.4rem; transform: translateY(-2px); }
a.pill:hover .pill-icon, a.pill:focus-visible .pill-icon { width: 34px; margin-right: 0.6rem; opacity: 1; transform: scale(1); background: var(--accent); color: #fff; }
.pill-me {
  gap: 0.6rem;
  padding: 0.4rem 1.3rem 0.4rem 0.4rem;
  background: var(--invert-bg);
  color: var(--invert-ink);
}
.pill-me img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
@media (hover: none) {
  .pill { padding: 0.4rem 1.2rem 0.4rem 0.4rem; }
  .pill-icon { width: 34px; margin-right: 0.6rem; opacity: 1; transform: none; }
}

/* ---------- Footer ---------- */
.foot {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 2rem 0 2.5rem;
  font-size: 0.82rem;
  color: var(--ink-soft);
}
.foot-links { display: flex; gap: 0.6rem; }
.foot a { text-underline-offset: 3px; }

/* Scroll reveal */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s ease var(--d, 0s), transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0s);
}
.js [data-reveal].in { opacity: 1; transform: none; }
.js .card[data-reveal].in { transition: opacity 0.8s ease var(--d, 0s), transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s, background-color 0.4s; }

/* Theme switch: circular reveal from the tile (View Transitions) */
::view-transition-old(root),
::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-old(root) { z-index: 1; }
::view-transition-new(root) { z-index: 2; }

/* Language crossfade */
[data-fr] { transition: opacity 0.18s; }
body.switching [data-fr] { opacity: 0; }

/* ---------- Responsive ---------- */
@media (max-width: 1320px) {
  .rail { left: 0.75rem; }
  .wrap { width: min(1180px, 100% - 7rem); }
}

@media (max-width: 980px) {
  .wrap { width: min(1180px, 100% - 2rem); }
  .rail {
    left: 50%;
    top: auto;
    bottom: 0.9rem;
    transform: translateX(-50%);
    flex-direction: row;
    background: color-mix(in srgb, var(--band) 88%, transparent);
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
    box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.35);
  }
  .rail a { writing-mode: horizontal-tb; transform: none; padding: 0.55rem 0.9rem; white-space: nowrap; }
  .rail-pill { top: 0.35rem; bottom: 0.35rem; height: auto !important; right: auto; }
  body { padding-bottom: 4.5rem; }

  .bento { grid-template-columns: 1fr 1fr; }
  .tile-hero { grid-column: 1 / -1; grid-row: auto; }
  .tile-theme { grid-column: 1; grid-row: auto; min-height: 180px; }
  .tile-works { grid-column: 2; grid-row: auto; min-height: 180px; }
  .tile-about { grid-column: 1 / -1; grid-row: auto; min-height: 460px; }
  .tile-about .stage-photo { left: auto; right: -8%; transform: none; height: 84%; }
  .stage:hover .stage-photo { transform: translateY(-6px); }
  .stage-beam { background: radial-gradient(ellipse 50% 85% at 70% 0%, rgba(255, 255, 255, 0.36) 0%, rgba(255, 255, 255, 0.12) 40%, transparent 75%); }
  .stage-lamp { left: 70%; width: 32%; }
  .stage .tile-p { max-width: 11rem; }
  .cards { grid-template-columns: repeat(2, 1fr); }
  .stories { grid-template-columns: 1fr; }
  .stories-intro { position: static; }
  .biz { grid-template-columns: auto 1fr; }
  .biz-lines { grid-column: 1 / -1; border-left: 0; padding-left: 0; padding-top: 1.5rem; border-top: 1px solid var(--line); }
}

@media (max-width: 600px) {
  .lang { top: 0.75rem; right: 0.75rem; width: 40px; height: 40px; }
  .hero-top { margin-bottom: 1.4rem; padding-right: 3rem; flex-direction: column; }
  .hero-title .was { white-space: normal; }
  .socials { margin-left: 0; }
  .tile-theme, .tile-works { grid-column: 1 / -1; min-height: 0; gap: 1.2rem; }
  .theme-icon svg { width: 34px; height: 34px; }
  .cards { grid-template-columns: 1fr; }
  .card { min-height: 0; }
  .card { --thumb: 100%; }
  .card-reveal { display: none; }
  .card-thumb { width: 100%; height: 150px; }
  .zoom { right: 10px; bottom: 10px; width: 34px; height: 34px; box-shadow: none; }
  .zoom svg { width: 16px; height: 16px; }
  .story-grid { grid-template-columns: 1fr; }
  .story { min-height: 0; }
  .biz { grid-template-columns: 1fr; gap: 1.5rem; }
  .biz-photo { width: 130px; }
  .biz-disc { left: 5rem; width: 150px; height: 150px; }
  .biz-role { letter-spacing: 0.4em; }
  .biz-lines li { font-size: 0.92rem; }
  .rail a { padding: 0.5rem 0.55rem; font-size: 0.7rem; }
  .rail { max-width: calc(100vw - 1rem); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  .js [data-reveal] { opacity: 1; transform: none; }
  .js .hero-title .was { background-size: 100% 0.075em; }
  .js .hero-title .star, .js .hero-title .now { opacity: 1; transform: none; filter: none; }
  .js [data-reveal]:not(.in) .scribble path { stroke-dashoffset: 0; }
  .js .biz:not(.in) .biz-rule, .js .biz:not(.in) .biz-last, .js .biz:not(.in) .biz-photo { transform: none; opacity: 1; }
  .js .stage-beam, .js .stage-lamp, .js .stage-glow, .js .stage-floor { opacity: 1; }
  .js .stage-photo { filter: brightness(0.92) contrast(1.05); }
  .sp-table tr, .sp-need div, .sp-log span, .sp-card { opacity: 1; }
}