/* Layout: fixed vertical rail on the left; one long centred column of sections with generous air. */
:root {
  --red: #7a121c;          /* primary ground, a touch softer than #7e111a */
  --red-deep: #5f0d15;     /* recessed surfaces */
  --red-lift: #8c1a25;     /* raised surfaces, hovers */
  --cream: #f8eee6;        /* secondary 1: warm off-white */
  --cream-soft: #e2c3bd;   /* secondary text */
  --apricot: #f6b58a;      /* secondary 2: accent */
  --line: rgba(248, 238, 230, .16);
  --serif: "EB Garamond", Garamond, "Cormorant Garamond", "Times New Roman", serif;
  --rail: 132px;
  --ease: cubic-bezier(.22, .8, .24, 1);
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  background: var(--red); color: var(--cream);
  font-family: var(--serif); font-size: 19px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
a { color: inherit; }
::selection { background: var(--apricot); color: var(--red-deep); }
:focus-visible { outline: 1.5px solid var(--apricot); outline-offset: 4px; border-radius: 4px; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* ---------- Navigation rail ---------- */
.rail {
  position: fixed; inset: 0 auto 0 0; width: var(--rail); z-index: 20;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3.2rem;
}
.rail-icon {
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; overflow: hidden;
  border: 1px solid var(--line); font-style: italic; font-size: 1.35rem; text-decoration: none; color: var(--apricot);
  transition: transform .6s var(--ease), border-color .4s;
}
.rail-icon img { width: 100%; height: 100%; object-fit: cover; }
.rail-icon:hover { transform: rotate(-12deg) scale(1.08); border-color: var(--apricot); }
.rail ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: center; gap: 1.15rem; }
.rail a.nav {
  position: relative; text-decoration: none; font-size: 1.02rem; letter-spacing: .04em; color: var(--cream-soft);
  transition: color .4s var(--ease);
}
.rail a.nav::after {
  content: ""; position: absolute; left: 50%; bottom: -3px; height: 1px; width: 0; background: var(--apricot);
  transition: width .5s var(--ease), left .5s var(--ease);
}
.rail a.nav:hover, .rail a.nav.active { color: var(--cream); }
.rail a.nav.active::after, .rail a.nav:hover::after { width: 100%; left: 0; }
.rail a.nav.active { font-style: italic; color: var(--apricot); }

main { margin-left: var(--rail); padding-inline: 24px; }
section { display: flex; flex-direction: column; align-items: center; text-align: center; padding-block: 9rem; }
.eyebrow { font-size: .82rem; letter-spacing: .28em; text-transform: uppercase; color: var(--apricot); margin: 0 0 1.4rem; }
h2 { font-weight: 400; font-size: clamp(2.4rem, 5vw, 3.6rem); line-height: 1.1; margin: 0 0 3rem; text-wrap: balance; }
h2 em { color: var(--apricot); }

/* gentle reveal: content is readable at rest, it just settles into place */
.rise { transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); }
.rise.pre { opacity: .3; transform: translateY(18px); }

/* ---------- Landing ---------- */
#me { min-height: min(100vh, 980px); justify-content: center; padding-block: 5rem; }
.hello {
  font-weight: 400; font-size: clamp(3rem, 9vw, 7.4rem); line-height: 1; margin: 0; letter-spacing: -.01em;
}
.hello .name { font-style: italic; color: var(--apricot); }
.hello span.w { display: inline-block; animation: word-in 1.4s var(--ease) both; }
.hello span.w:nth-child(2) { animation-delay: .12s } .hello span.w:nth-child(3) { animation-delay: .24s }
@keyframes word-in { from { opacity: 0; transform: translateY(.35em); filter: blur(6px); } }

.stage { display: grid; justify-items: center; margin-top: 3.2rem; min-height: 260px; }
.stage > * { grid-area: 1 / 1; }
.meet {
  align-self: center; padding: .85rem 2.4rem; border-radius: 999px; border: 1px solid var(--cream);
  font-size: 1.2rem; letter-spacing: .06em; position: relative; overflow: hidden; isolation: isolate;
  transition: color .5s var(--ease), opacity .7s var(--ease), transform .7s var(--ease), border-color .5s;
  animation: word-in 1.4s .5s var(--ease) both;
}
.meet::before {
  content: ""; position: absolute; inset: 0; background: var(--cream); z-index: -1;
  transform: translateY(101%); transition: transform .55s var(--ease);
}
.meet:hover { color: var(--red); }
.meet:hover::before { transform: translateY(0); }
.meet.gone { opacity: 0; transform: scale(.85); pointer-events: none; }

.intro { display: flex; flex-direction: column; align-items: center; gap: 1.6rem; opacity: 0; transform: translateY(24px); pointer-events: none;
  transition: opacity 1s .25s var(--ease), transform 1s .25s var(--ease); }
.intro.on { opacity: 1; transform: none; pointer-events: auto; }
.avatar {
  width: 200px; height: 200px; border-radius: 50%; position: relative; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 38%, var(--red-lift), var(--red-deep) 72%);
  transition: transform .6s var(--ease);
}
.avatar:hover { transform: scale(1.04); }
.avatar::after { /* speaking ring */
  content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 1px solid var(--apricot); opacity: 0;
}
.avatar.talking::after { animation: ring 1.6s var(--ease) infinite; }
@keyframes ring { 0% { opacity: .7; transform: scale(.94); } 100% { opacity: 0; transform: scale(1.14); } }
.avatar svg { width: 150px; height: 150px; animation: bob 5s ease-in-out infinite; }
.avatar model-viewer { width: 200px; height: 200px; border-radius: 50%; --poster-color: transparent; }
@keyframes bob { 50% { transform: translateY(-5px) rotate(-1.5deg); } }
.avatar .mouth { transform-origin: 100px 124px; transform-box: view-box; }
.avatar.talking .mouth { animation: talk .22s ease-in-out infinite alternate; }
@keyframes talk { to { transform: scaleY(2.6) scaleX(.85); } }
.avatar-hint { font-size: .85rem; font-style: italic; color: var(--cream-soft); margin-top: -.6rem; }

.caption {
  min-height: 3.4em; max-width: 34ch; font-size: 1.22rem; font-style: italic; line-height: 1.45; color: var(--cream);
  transition: opacity .45s var(--ease), transform .45s var(--ease);
}
.caption.swap { opacity: 0; transform: translateY(6px); }
.socials { display: flex; gap: 1.6rem; list-style: none; padding: 0; margin: 0; }
.socials a {
  width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line);
  transition: border-color .4s, transform .5s var(--ease), background .4s;
}
.socials a:hover { border-color: var(--apricot); transform: translateY(-4px); background: var(--red-lift); }
.socials svg { width: 20px; height: 20px; fill: none; stroke: var(--cream); stroke-width: 1.5; }
.email-text { font-size: .9rem; color: var(--cream-soft); user-select: all; letter-spacing: .02em; }
.intro .socials li { opacity: 0; transform: translateY(10px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.intro.on .socials li { opacity: 1; transform: none; }
.intro.on .socials li:nth-child(1) { transition-delay: .8s } .intro.on .socials li:nth-child(2) { transition-delay: .95s } .intro.on .socials li:nth-child(3) { transition-delay: 1.1s }

/* the roaming "Meet me" */
.roamer {
  position: fixed; z-index: 30; padding: .6rem 1.6rem; border-radius: 999px; background: var(--cream); color: var(--red);
  font-size: 1.05rem; letter-spacing: .05em; box-shadow: 0 12px 40px rgba(40, 0, 6, .45);
  opacity: 0; transform: scale(.6) rotate(-6deg); pointer-events: none;
  transition: opacity .6s var(--ease), transform .7s var(--ease);
}
.roamer.show { opacity: 1; transform: none; pointer-events: auto; }
.roamer:hover { background: var(--apricot); }

/* ---------- About ---------- */
.about-copy { max-width: 36ch; font-size: clamp(1.35rem, 2.4vw, 1.75rem); line-height: 1.55; margin: 0; }
.about-copy p { margin: 0 0 1.3rem; }
.about-copy em { color: var(--apricot); }

/* ---------- Experience ---------- */
#experience { overflow-x: clip; }
.role-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 1.8rem; margin: 0 0 3.2rem; max-width: 720px; }
.role-tab { display: flex; flex-direction: column; align-items: center; gap: .1rem; padding: .3rem .2rem; color: var(--cream-soft); position: relative; transition: color .4s var(--ease); }
.role-tab .t-name { font-size: 1.1rem; }
.role-tab .t-year { font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; font-variant-numeric: tabular-nums; opacity: .7; }
.role-tab::after { content: ""; position: absolute; left: 50%; right: 50%; bottom: -4px; height: 1px; background: var(--apricot); transition: left .5s var(--ease), right .5s var(--ease); }
.role-tab:hover { color: var(--cream); }
.role-tab[aria-selected="true"] { color: var(--apricot); }
.role-tab[aria-selected="true"] .t-name { font-style: italic; }
.role-tab[aria-selected="true"]::after { left: 0; right: 0; }
.roles { list-style: none; margin: 0; padding: 0; display: grid; max-width: 640px; width: 100%; }
.role { grid-area: 1 / 1; transition: opacity .7s var(--ease), transform .8s var(--ease), visibility 0s .8s; }
.role:not(.on) { opacity: 0; visibility: hidden; transform: translateX(calc(var(--dir, 1) * 40px)); pointer-events: none; }
.role.on { transition: opacity .8s .15s var(--ease), transform .9s .15s var(--ease), visibility 0s; }
.role.leaving { transform: translateX(calc(var(--dir, 1) * -40px)); }
.role-nav { display: flex; align-items: center; gap: 1.6rem; margin-top: 3rem; }
.role-nav button { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; transition: border-color .4s, transform .5s var(--ease); }
.role-nav button:hover { border-color: var(--apricot); }
.role-nav button:first-child:hover { transform: translateX(-4px); } .role-nav button:last-child:hover { transform: translateX(4px); }
.role-nav svg { width: 18px; height: 18px; stroke: var(--cream); fill: none; stroke-width: 1.4; }
.role-count { font-size: .9rem; letter-spacing: .12em; color: var(--cream-soft); font-variant-numeric: tabular-nums; min-width: 4ch; }
.role header { display: flex; flex-direction: column; align-items: center; gap: .2rem; margin-bottom: 1.4rem; }
.role .when { font-size: .8rem; letter-spacing: .24em; text-transform: uppercase; color: var(--apricot); font-variant-numeric: tabular-nums; }
.role h3 { font-weight: 400; font-size: clamp(1.8rem, 3.4vw, 2.4rem); margin: .3rem 0 0; line-height: 1.15; }
.role .title { font-style: italic; color: var(--cream-soft); }
.role .where { font-size: .9rem; color: var(--cream-soft); letter-spacing: .04em; }
.role ul { list-style: none; padding: 0; margin: 0 auto; max-width: 54ch; display: flex; flex-direction: column; gap: .9rem; color: var(--cream); }
.role li { font-size: 1.04rem; line-height: 1.6; }
.role li + li::before { content: "·"; display: block; color: var(--apricot); line-height: .6; margin-bottom: .9rem; font-size: 1.4rem; }
.repo {
  display: inline-flex; align-items: center; gap: .55rem; margin-top: 1.6rem; padding: .45rem 1.1rem; border-radius: 999px;
  border: 1px solid var(--line); text-decoration: none; font-size: .95rem; font-style: italic; transition: border-color .4s, background .4s;
}
.repo:hover { border-color: var(--apricot); background: var(--red-lift); }
.repo svg { width: 16px; height: 16px; fill: var(--cream); }

/* ---------- Portfolio carousel ---------- */
#portfolio { overflow: hidden; }
.carousel { position: relative; width: 100%; max-width: 980px; height: 620px; perspective: 1500px; touch-action: pan-y; cursor: grab; user-select: none; }
.carousel:active { cursor: grabbing; }
.ring { position: absolute; left: 50%; top: 20px; width: 0; height: 0; transform-style: preserve-3d; }
.card {
  --w: 320px; position: absolute; width: var(--w); left: calc(var(--w) / -2); top: 0;
  background: var(--red-deep); border: 1px solid var(--line); border-radius: 22px; padding: 1.8rem 1.6rem 1.7rem;
  display: flex; flex-direction: column; align-items: center; gap: .9rem; 
  transition: transform 1.1s var(--ease), opacity .9s var(--ease), filter .9s var(--ease);
  opacity: .32; filter: saturate(.6);
}
.card.front { opacity: 1; filter: none; box-shadow: 0 30px 80px rgba(40, 0, 6, .5); }
.card:not(.front) a { pointer-events: none; }
.model-slot { width: 100%; height: 170px; display: grid; place-items: center; perspective: 600px; }
.model-slot model-viewer { width: 100%; height: 170px; --poster-color: transparent; }
.cube { width: 74px; height: 74px; position: relative; transform-style: preserve-3d; animation: spin 14s linear infinite; }
.cube i { position: absolute; inset: 0; border: 1px solid var(--apricot); background: rgba(246, 181, 138, .06); }
.cube i:nth-child(1) { transform: translateZ(37px) } .cube i:nth-child(2) { transform: rotateY(180deg) translateZ(37px) }
.cube i:nth-child(3) { transform: rotateY(90deg) translateZ(37px) } .cube i:nth-child(4) { transform: rotateY(-90deg) translateZ(37px) }
.cube i:nth-child(5) { transform: rotateX(90deg) translateZ(37px) } .cube i:nth-child(6) { transform: rotateX(-90deg) translateZ(37px) }
.card:nth-child(2) .cube { border-radius: 50%; animation-duration: 18s } .card:nth-child(2) .cube i { border-radius: 50% }
.card:nth-child(3) .cube { animation-direction: reverse }
@keyframes spin { from { transform: rotateX(-22deg) rotateY(0) } to { transform: rotateX(-22deg) rotateY(360deg) } }
.card .when { font-size: .75rem; letter-spacing: .24em; text-transform: uppercase; color: var(--apricot); }
.card h3 { font-weight: 400; font-size: 1.9rem; margin: -.4rem 0 0; line-height: 1.1; }
.card p { margin: 0; font-size: 1rem; line-height: 1.5; color: var(--cream-soft); }
.tags { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; list-style: none; padding: 0; margin: .2rem 0 0; }
.tags li { font-size: .78rem; letter-spacing: .03em; padding: .15rem .65rem; border-radius: 999px; border: 1px solid var(--line); color: var(--cream); }
.card-link {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--cream); margin-top: .4rem;
  transition: transform .5s var(--ease), background .4s;
}
.card-link:hover { transform: scale(1.1) rotate(-8deg); background: var(--apricot); }
.card-link svg { width: 18px; height: 18px; fill: var(--red); }
.card-nolink { font-size: .85rem; font-style: italic; color: var(--cream-soft); margin-top: .4rem; }
.car-ctrl { display: flex; align-items: center; gap: 2rem; margin-top: 1rem; }
.car-ctrl button.arrow {
  width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center;
  transition: border-color .4s, transform .5s var(--ease);
}
.car-ctrl button.arrow:hover { border-color: var(--apricot); }
.car-ctrl button.arrow:first-child:hover { transform: translateX(-4px); } .car-ctrl button.arrow:last-child:hover { transform: translateX(4px); }
.car-ctrl svg { width: 18px; height: 18px; stroke: var(--cream); fill: none; stroke-width: 1.4; }
.dots { display: flex; gap: .7rem; }
.dots button { width: 8px; height: 8px; border-radius: 50%; background: var(--line); transition: background .4s, transform .4s var(--ease); }
.dots button.on { background: var(--apricot); transform: scale(1.4); }

/* ---------- Future ---------- */
#future { padding-bottom: 6rem; }
.field { position: relative; width: 100%; max-width: 1100px; height: min(70vh, 620px); min-height: 420px; }
.phrase {
  position: absolute; white-space: nowrap; font-style: italic; line-height: 1; color: var(--cream);
  opacity: 0; transform: translateY(12px) scale(.96); filter: blur(4px);
  transition: opacity 1.2s var(--ease), transform 1.4s var(--ease), filter 1.2s var(--ease), color .4s;
}
.phrase.show { opacity: 1; transform: none; filter: none; }
.phrase:hover { color: var(--apricot); }
.phrase.speaking { color: var(--apricot); }
.phrase.speaking::after { content: ""; position: absolute; left: 0; right: 0; bottom: -.18em; height: 1px; background: var(--apricot); animation: grow .8s var(--ease); }
@keyframes grow { from { transform: scaleX(0) } }
.field-hint { font-size: .9rem; font-style: italic; color: var(--cream-soft); margin: 0; }
footer { text-align: center; padding-block: 3rem 4rem; margin-left: var(--rail); font-size: .85rem; color: var(--cream-soft); letter-spacing: .06em; }

/* ---------- Small screens: the rail folds into a bottom bar ---------- */
@media (max-width: 760px) {
  :root { --rail: 0px; }
  body { font-size: 17px; }
  .rail {
    inset: auto 0 0 0; width: auto; flex-direction: row; justify-content: center; gap: 1.1rem;
    padding: .7rem 16px calc(.7rem + env(safe-area-inset-bottom, 0px));
    background: color-mix(in srgb, var(--red-deep) 88%, transparent); backdrop-filter: blur(10px); border-top: 1px solid var(--line);
  }
  .rail-icon { width: 34px; height: 34px; font-size: 1rem; flex: none; }
  .rail ul { flex-direction: row; gap: .9rem; }
  .rail a.nav { font-size: .92rem; }
  main { padding-inline: 16px; }
  section { padding-block: 6rem; }
  .carousel { height: 640px; }
  .card { --w: min(80vw, 300px); }
  footer { padding-bottom: 6rem; }
}
@media (max-width: 400px) { .rail ul { gap: .6rem; } .rail a.nav { font-size: .84rem; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; }
  html { scroll-behavior: auto; }
}