/* Giulia Bins portfolio, shared styles */
:root {
  --yellow: #FFCF2E; --black: #151515; --ink: #2E2E2E; --paper: #F4F2ED; --white: #fff;
  --blue: #2E6CB5; --lime: #C8D84A; --red: #E8412C; --gray: #6E6E6E; --line: #D9D6CF;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: Inter, Helvetica, Arial, sans-serif; font-weight: 400; color: var(--ink); background: var(--white); line-height: 1.55; }
::selection { background: var(--yellow); color: var(--black); }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
:focus-visible { outline: 3px solid var(--black); outline-offset: 4px; border-radius: 4px; }
.dark :focus-visible { outline-color: var(--yellow); }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- top bar ---------- */
.top { position: sticky; top: 0; z-index: 20; background: var(--white); border-bottom: 2px solid var(--black); }
.top.float { position: fixed; inset: 0 0 auto 0; transform: translateY(-110%); transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.top.float.show { transform: none; }
.top .wrap { display: flex; align-items: center; justify-content: space-between; height: 60px; gap: 16px; }
.top .me { font-weight: 600; }
.top nav { display: flex; gap: 22px; align-items: center; font-size: 15px; }
.top nav a:hover, .top nav a[aria-current] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.top .cv { background: var(--yellow); padding: 6px 14px; border-radius: 99px; font-weight: 500; }
.top .cv:hover { text-decoration: none; }
.lang b { font-weight: 600; } .lang span { font-weight: 300; }

/* ---------- shared pieces ---------- */
h2 { font-weight: 200; font-size: clamp(40px, 6vw, 76px); line-height: 1.02; letter-spacing: -.03em; color: var(--black); margin-bottom: 48px; text-wrap: balance; }
.tape { background: var(--yellow); color: var(--black); font-weight: 500; padding: 0 .25em; display: inline-block; transform: rotate(-1.5deg); line-height: 1.15; }
.tape.r { transform: rotate(1.2deg); }
.btn { display: inline-block; border-radius: 99px; padding: 9px 18px; font-weight: 500; font-size: 15px; border: 2px solid currentColor; transition: transform .2s; }
.btn:hover { transform: rotate(-2deg); }
.btn.y { background: var(--yellow); color: var(--black); border-color: var(--yellow); }
.btn.k { background: var(--black); color: var(--white); border-color: var(--black); }
.more { display: inline-block; margin-top: 36px; font-weight: 500; font-size: 17px; color: var(--black); border-bottom: 2px solid var(--black); padding-bottom: 2px; }
.more:hover { border-bottom-style: dashed; }
.deco { position: absolute; fill: none; stroke: var(--paper); stroke-width: 2; opacity: .35; pointer-events: none; }

/* ---------- case cards ---------- */
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.case { background: var(--white); display: flex; flex-direction: column; position: relative; transition: transform .25s cubic-bezier(.3,1.6,.5,1); }
.case.edge { outline: 2px solid var(--black); }
.case:hover, .case:focus-within { transform: translateY(-6px) rotate(-.6deg); }
.case h3 a::after { content: ""; position: absolute; inset: 0; }
.case h3 a:focus-visible { outline: none; }
.case:focus-within { outline: 3px solid var(--black); outline-offset: 4px; }
.art { aspect-ratio: 4/3; overflow: hidden; }
.art svg { width: 100%; height: 100%; display: block; }
.body { padding: 22px 22px 26px; }
.co { font-size: 14px; color: var(--gray); }
.co b { color: var(--black); font-weight: 600; }
.case h3 { font-weight: 300; font-size: 26px; line-height: 1.15; letter-spacing: -.02em; color: var(--black); margin: 6px 0 10px; text-wrap: balance; }
.case p { font-size: 16px; }
.case p strong { font-weight: 600; color: var(--black); }
.feat { grid-column: span 2; flex-direction: row; }
.feat .art { flex: 1.1; aspect-ratio: auto; min-height: 400px; }
.feat .body { flex: 1; padding: 32px; display: flex; flex-direction: column; justify-content: center; }
.feat h3 { font-size: 34px; }
.stats { list-style: none; margin-top: 18px; display: grid; gap: 14px; }
.stats li { border-top: 1.5px dashed var(--black); padding-top: 10px; font-size: 15px; }
.stats strong { display: block; font-weight: 500; font-size: 30px; letter-spacing: -.02em; color: var(--black); line-height: 1.1; }
.tag { display: inline-block; margin-top: 12px; font-size: 13px; font-weight: 500; border: 1.5px solid var(--black); border-radius: 99px; padding: 4px 12px; }

/* ---------- articles ---------- */
.rail-x { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(300px, 380px); gap: 28px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px 4px 18px; }
.post { scroll-snap-align: start; background: var(--paper); color: var(--ink); display: flex; flex-direction: column; }
.post .thumb { aspect-ratio: 16/10; background: var(--blue); overflow: hidden; position: relative; }
.post .thumb svg { width: 100%; height: 100%; display: block; }
.post .pb { padding: 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.post .date { font-size: 14px; color: #555; }
.post h3 { font-weight: 300; font-size: 24px; line-height: 1.2; letter-spacing: -.02em; color: var(--black); text-wrap: balance; }
.post .reads { font-size: 14px; }
.post .links { margin-top: auto; padding-top: 8px; display: flex; gap: 10px; flex-wrap: wrap; }
.post .btn { font-size: 14px; padding: 7px 14px; }

/* ---------- timeline ---------- */
.rail { display: grid; grid-template-columns: repeat(7, 1fr); position: relative; list-style: none; }
.time { overflow: hidden; }
/* the thread keeps going past the last stop, to the edge of the box: the story isn't over */
.rail::before { content: ""; position: absolute; left: 10px; right: calc((100% - 100vw) / 2); top: 13px; border-top: 2.5px dashed var(--black); }
.stop { position: relative; padding: 46px 10px 0 0; font-size: 15px; color: var(--black); }
.stop i { position: absolute; top: 0; left: 0; width: 28px; height: 28px; border: 2px solid var(--black); }
.stop:nth-child(4n+1) i { border-radius: 50%; background: var(--yellow); }
.stop:nth-child(4n+2) i { border-radius: 0 0 0 28px; background: var(--white); }
.stop:nth-child(4n+3) i { background: var(--blue); transform: rotate(14deg); }
.stop:nth-child(4n) i { border-radius: 14px 14px 0 0; background: var(--red); }
.stop b { display: block; font-weight: 600; font-size: 17px; }
.stop small { font-size: 14px; }

/* ---------- page header (inner pages) ---------- */
.phead { position: relative; overflow: hidden; padding: 96px 0 72px; color: var(--black); }
.phead h1 { font-weight: 200; font-size: clamp(56px, 9vw, 120px); line-height: .95; letter-spacing: -.04em; color: inherit; position: relative; z-index: 1; }
.phead p { margin-top: 20px; font-size: 19px; max-width: 46ch; color: inherit; position: relative; z-index: 1; }
.phead .cut { position: absolute; pointer-events: none; }

/* ---------- contact footer ---------- */
.contact { background: var(--black); color: var(--paper); padding: 120px 0 56px; position: relative; overflow: hidden; }
.contact h2 { color: var(--paper); max-width: 16ch; margin-bottom: 32px; }
.contact .act { display: flex; gap: 12px; flex-wrap: wrap; }
.contact .fine { margin-top: 80px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: 14px; color: var(--line); border-top: 1px solid #3a3a3a; padding-top: 22px; }

@media (max-width: 860px) {
  .top nav { gap: 14px; } .top nav .hide-m { display: none; }
  .grid { grid-template-columns: 1fr; }
  .feat { grid-column: auto; flex-direction: column; } .feat .art { min-height: 0; aspect-ratio: 4/3; }
  .rail { display: flex; flex-direction: column-reverse; }
  .rail::before { top: -2000px; bottom: 10px; left: 13px; right: auto; border-top: 0; border-left: 2.5px dashed var(--black); }
  .time h2 { padding-left: 46px; }
  .stop { padding: 0 0 22px 46px; }
  .rail-x { grid-auto-columns: 82%; }
  .phead { padding: 64px 0 48px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before { animation: none !important; transition: none !important; } html { scroll-behavior: auto; } }

/* ---------- language switch: two halves of one pill ---------- */
.lang-switch { display: inline-flex; border: 2px solid currentColor; border-radius: 99px; overflow: hidden; font-size: 13px; font-weight: 600; letter-spacing: .04em; line-height: 1; }
.lang-switch a { padding: 6px 10px 6px; transition: background .2s; }
.lang-switch a[aria-current] { background: var(--black); color: var(--white); }
.dark .lang-switch a[aria-current] { background: var(--yellow); color: var(--black); }
.lang-switch a:not([aria-current]):hover { background: var(--yellow); color: var(--black); }
.top nav .lang-switch a, .top nav .lang-switch a:hover { text-decoration: none; }

/* download arrow: nudges down on hover */
.dl { width: .95em; height: .95em; display: inline-block; vertical-align: -.12em; margin-left: .3em; overflow: visible; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
a:hover .dl .ar, a:focus-visible .dl .ar { animation: nudge .9s ease-in-out infinite; }
@keyframes nudge { 0%, 100% { transform: translateY(-1px); } 50% { transform: translateY(3px); } }

/* keep the top bar on one line on phones, arrow included */
.top .me, .top .cv { white-space: nowrap; }
@media (max-width: 420px) {
  .top nav { gap: 10px; font-size: 14px; }
  .top .cv { padding: 6px 11px; }
  .lang-switch a { padding: 6px 8px; }
}

/* NDA note on Tradeverifyd cases */
.nda { display: flex; gap: 10px; align-items: flex-start; max-width: 760px; margin: 28px auto 0; padding: 12px 16px; border: 1.5px dashed var(--black); font-size: 14px; color: var(--black); background: var(--paper); }
.nda b { font-weight: 600; white-space: nowrap; }

/* mobile fit fixes (2026-11-10) */
body { overflow-x: clip; }
@media (max-width: 420px) {
  .top .wrap { gap: 10px; }
  .top .me { font-size: 15px; }
  .top nav { gap: 8px; }
  .top .cv svg { display: none; }
  .btns { display: block; overflow-x: auto; }
}
@media (max-width: 640px) {
  .ways > * { min-width: 0; }
  body .way ol, body .way.fast ol { grid-template-columns: 1fr; row-gap: 12px; }
  body .way ol::before { display: none; }
  body .way li { text-align: left; padding: 4px 0 4px 58px; min-height: 44px; }
  body .way li i { position: absolute; left: 0; top: 0; margin: 0; }
}

/* ---------- Motion (motion.js adds .mo on <html>; nothing moves without it) ---------- */
@view-transition { navigation: auto; }
.top { view-transition-name: topbar; }
::view-transition-old(root) { animation: vt-out .28s cubic-bezier(.4,0,1,1) both; }
::view-transition-new(root) { animation: vt-in .5s cubic-bezier(.2,.8,.2,1) both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-12px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(18px); } }

/* blocks slide up as they enter */
.mo .rv { opacity: 0; transform: translateY(28px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
.mo .rv.in { opacity: 1; transform: none; }
/* groups: children land one after another */
.mo .rv-g > * { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--i, 0) * 70ms + 80ms); }
.mo .rv-g.in > * { opacity: 1; transform: none; }

/* case header: the cut-paper art drops in, the words follow */
.mo .chead .cut { animation: cut-drop 1s cubic-bezier(.2,.9,.3,1.15) .15s backwards; }
.mo .chead .crumb, .mo .chead h1, .mo .chead .lede, .mo .chead .meta, .mo .chead .nda { animation: rise .9s cubic-bezier(.2,.7,.2,1) backwards; }
.mo .chead h1 { animation-delay: .08s; } .mo .chead .lede { animation-delay: .2s; } .mo .chead .meta { animation-delay: .32s; }
.mo .results li { animation: none; }
@keyframes cut-drop { from { opacity: 0; transform: translateY(-40px) rotate(-10deg) scale(.9); } }
@keyframes rise { from { opacity: 0; transform: translateY(26px); } }

/* charts: bars grow when the chart comes into view */
.picks .bar i, .stack .seg { transform-origin: left center; transition: transform 1.1s cubic-bezier(.2,.8,.2,1); }
.mo .picks:not(.in) .bar i, .mo .picks:not(.in) .stack .seg { transform: scaleX(0); }
.picks li:nth-child(2) .bar i { transition-delay: .06s; } .picks li:nth-child(3) .bar i { transition-delay: .12s; } .picks li:nth-child(4) .bar i { transition-delay: .18s; }
.picks li:nth-child(5) .bar i { transition-delay: .24s; } .picks li:nth-child(n+6) .bar i { transition-delay: .3s; }

/* ---------- Case art: each one tells its story.
   Every animation starts and ends on the resting drawing, so it can loop without a jump.
   motion.js adds .go (plays once: header on load, cards when they show up)
   and .loop while the pointer is on a card or on the header art (keeps playing). ---------- */
[class*="a-"] * { transform-box: fill-box; transform-origin: center; }
.go [class*="a-"] * { animation-fill-mode: both; animation-iteration-count: 1; }
.loop [class*="a-"] *, [class*="a-"].loop * { animation-iteration-count: infinite !important; }
.chead svg[class*="a-"] { pointer-events: auto; }

/* Disney+: the play button plays: a press, a ripple, the progress bar runs */
.a-willbank .rp { opacity: 0; }
.a-willbank .pg { transform-origin: left center; transform: scaleX(.18); }
.go .a-willbank .pl { animation: wb-press 2.4s ease-in-out; }
.go .a-willbank .rp { animation: wb-rp 2.4s ease-out; }
.go .a-willbank .pg { animation: wb-pg 2.4s linear; }
@keyframes wb-press { 0%, 100% { transform: none; } 8% { transform: scale(.78); } 18% { transform: scale(1.14); } 28% { transform: none; } }
@keyframes wb-rp { 0%, 14% { opacity: 0; transform: scale(.7); } 18% { opacity: .9; } 60%, 100% { opacity: 0; transform: scale(1.45); } }
@keyframes wb-pg { 0%, 18% { transform: scaleX(.18); } 90% { transform: scaleX(1); } 100% { transform: scaleX(.18); } }

/* Personalized insurance: the pieces keep changing, like someone picking coverages */
.go .a-buildyourown .p1 { animation: by-p1 3.6s cubic-bezier(.3,1.4,.5,1); }
.go .a-buildyourown .p3 { animation: by-p3 3.6s .3s cubic-bezier(.3,1.4,.5,1); }
.go .a-buildyourown .p2 { animation: by-p2 3.6s .6s cubic-bezier(.3,1.4,.5,1); }
.go .a-buildyourown .p4 { animation: by-p4 3.6s .6s cubic-bezier(.3,1.4,.5,1); }
@keyframes by-p1 { 0%, 100% { fill: var(--yellow); transform: none; } 30% { fill: var(--yellow); transform: none; } 34% { fill: var(--red); transform: scale(.8) rotate(-8deg); } 40%, 62% { fill: var(--red); transform: none; } 66% { fill: var(--lime); transform: scale(.8) rotate(8deg); } 72%, 94% { fill: var(--lime); transform: none; } 97% { fill: var(--yellow); transform: scale(.85); } }
@keyframes by-p3 { 0%, 30%, 100% { fill: var(--blue); transform: none; } 34% { fill: var(--yellow); transform: scale(.75); } 40%, 62% { fill: var(--yellow); transform: none; } 66% { fill: var(--red); transform: scale(.75); } 72%, 94% { fill: var(--red); transform: none; } 97% { fill: var(--blue); transform: scale(.8); } }
@keyframes by-p2 { 0%, 30%, 100% { fill: var(--black); transform: none; } 34% { fill: var(--blue); transform: scaleX(.85); } 40%, 62% { fill: var(--blue); transform: none; } 66% { fill: var(--red); transform: scaleX(.85); } 72%, 94% { fill: var(--red); transform: none; } 97% { fill: var(--black); transform: scaleX(.9); } }
@keyframes by-p4 { 0%, 30%, 100% { fill: var(--yellow); } 40%, 62% { fill: var(--white); } 72%, 94% { fill: var(--yellow); } }

/* Contextual offers: only the offers appear */
.go .a-contextualoffers .o1 { animation: co-o 2.6s cubic-bezier(.3,1.4,.5,1); }
.go .a-contextualoffers .o2 { animation: co-o 2.6s .25s cubic-bezier(.3,1.4,.5,1); }
@keyframes co-o { 0%, 100% { opacity: 1; transform: none; } 12% { opacity: 0; transform: scale(.6); } 40% { opacity: 0; transform: scale(.6); } 55% { opacity: 1; transform: scale(1.08); } 65% { transform: none; } }

/* Teaching the assistant: someone adjusting the personality sliders, ending where they started */
.go .a-aisetup .k1 { animation: ai-k1 3.2s ease-in-out; }
.go .a-aisetup .k2 { animation: ai-k2 3.2s .25s ease-in-out; }
.go .a-aisetup .k3 { animation: ai-k3 3.2s .5s ease-in-out; }
@keyframes ai-k1 { 0%, 100% { transform: none; } 30% { transform: translateX(62px); } 60% { transform: translateX(24px); } }
@keyframes ai-k2 { 0%, 100% { transform: none; } 30% { transform: translateX(-70px); } 60% { transform: translateX(-30px); } }
@keyframes ai-k3 { 0%, 100% { transform: none; } 30% { transform: translateX(-40px); } 60% { transform: translateX(50px); } }

/* OLX navigation: the active tab slides along the bar, the screen fades into the next one */
.go .a-olxnavigation .ind { animation: nv-ind 5s cubic-bezier(.6,0,.3,1); }
.go .a-olxnavigation .scr { animation: nv-fade 5s ease-in-out; }
.go .a-olxnavigation .s1 { animation: nv-s1 5s; }
.go .a-olxnavigation .s2 { animation: nv-s2 5s; }
.go .a-olxnavigation .s3 { animation: nv-s3 5s; }
@keyframes nv-ind { 0%, 14% { transform: none; } 20%, 34% { transform: translateX(24px); } 40%, 54% { transform: translateX(48px); } 60%, 74% { transform: translateX(72px); } 80%, 92% { transform: translateX(96px); } 100% { transform: none; } }
@keyframes nv-fade { 0%, 14%, 22%, 34%, 42%, 54%, 62%, 74%, 82%, 92%, 100% { opacity: 1; } 18%, 38%, 58%, 78%, 96% { opacity: 0; } }
@keyframes nv-s1 { 0%, 17.9% { fill: var(--yellow); } 18%, 37.9% { fill: var(--black); } 38%, 57.9% { fill: var(--red); } 58%, 77.9% { fill: var(--lime); } 78%, 95.9% { fill: var(--blue); } 96%, 100% { fill: var(--yellow); } }
@keyframes nv-s2 { 0%, 17.9% { fill: var(--blue); } 18%, 37.9% { fill: var(--yellow); } 38%, 57.9% { fill: var(--black); } 58%, 77.9% { fill: var(--red); } 78%, 95.9% { fill: var(--lime); } 96%, 100% { fill: var(--blue); } }
@keyframes nv-s3 { 0%, 17.9% { transform: none; } 18%, 37.9% { transform: scaleX(.5); } 38%, 57.9% { transform: scaleX(.8); } 58%, 77.9% { transform: scaleX(.35); } 78%, 95.9% { transform: scaleX(.65); } 96%, 100% { transform: none; } }
.a-olxnavigation .s3 { transform-origin: left center; }

/* Why people stop replying: you send (right), they type (left)... then turn into a ghost and leave */
.a-olxreplies .gh { opacity: 0; }
.go .a-olxreplies .rep { animation: rp-rep 4.2s; }
.go .a-olxreplies .t1 { animation: rp-type 4.2s ease-in-out; }
.go .a-olxreplies .t2 { animation: rp-type 4.2s .12s ease-in-out; }
.go .a-olxreplies .t3 { animation: rp-type 4.2s .24s ease-in-out; }
.go .a-olxreplies .gh { animation: rp-ghost 4.2s ease-in-out; }
@keyframes rp-type { 0%, 4%, 12%, 20%, 28%, 36%, 100% { transform: none; } 8%, 16%, 24%, 32% { transform: translateY(-7px); } }
@keyframes rp-rep { 0%, 38%, 100% { opacity: 1; transform: none; } 46% { opacity: 0; transform: scale(.85); } 90% { opacity: 0; transform: translateY(10px); } }
@keyframes rp-ghost { 0%, 40% { opacity: 0; transform: scale(.7); } 48% { opacity: 1; transform: none; } 56% { opacity: 1; transform: rotate(-6deg); } 82% { opacity: 0; transform: translate(-30px, -70px) rotate(8deg); } 100% { opacity: 0; transform: translate(-30px, -70px); } }

/* The ideal negotiation: both sides lean in, the lines run toward the meeting point, the pin lands */
.go .a-olxnegotiation .lb { animation: ng-l 3s ease-in-out; }
.go .a-olxnegotiation .rb { animation: ng-r 3s ease-in-out; }
.go .a-olxnegotiation .ln { animation: ng-ln 3s linear; }
.go .a-olxnegotiation .pin { animation: ng-pin 3s; transform-origin: 50% 100%; }
@keyframes ng-l { 0%, 100% { transform: none; } 35%, 55% { transform: translateX(14px); } }
@keyframes ng-r { 0%, 100% { transform: none; } 35%, 55% { transform: translateX(-14px); } }
@keyframes ng-ln { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -52; } }
@keyframes ng-pin { 0%, 30%, 100% { transform: none; } 42% { transform: translateY(-18px); } 52% { transform: scaleY(.86) scaleX(1.08); } 60% { transform: translateY(-5px); } 68% { transform: none; } }

/* One design system: two systems come together, become one circle split in two, then one color.
   At rest it shows the result. Each round starts by fading the result out, so the loop never jumps. */
.a-designsystem .ca, .a-designsystem .cb { opacity: 0; }
.go .a-designsystem .ca { animation: ds-a 4s cubic-bezier(.6,0,.4,1); }
.go .a-designsystem .cb { animation: ds-b 4s cubic-bezier(.6,0,.4,1); }
.go .a-designsystem .split { animation: ds-split 4s ease-out; }
.go .a-designsystem .rim { animation: ds-split 4s ease-out; }
.go .a-designsystem .one { animation: ds-one 4s ease-in-out; }
@keyframes ds-a { 0%, 4% { opacity: 0; transform: none; } 12%, 18% { opacity: 1; transform: none; } 40% { opacity: 1; transform: translateX(60px); } 44%, 100% { opacity: 0; transform: translateX(60px); } }
@keyframes ds-b { 0%, 4% { opacity: 0; transform: none; } 12%, 18% { opacity: 1; transform: none; } 40% { opacity: 1; transform: translateX(-60px); } 44%, 100% { opacity: 0; transform: translateX(-60px); } }
@keyframes ds-split { 0% { opacity: 1; transform: none; } 6%, 38% { opacity: 0; transform: scale(.6); } 46% { opacity: 1; transform: scale(1.06); } 52%, 100% { opacity: 1; transform: none; } }
@keyframes ds-one { 0% { opacity: 1; } 6%, 58% { opacity: 0; } 78%, 100% { opacity: 1; } }

/* Most used screens: suppliers shuffle, sort by risk, and the red triangle appears only when red reaches the top */
.go .a-screens .b1 { animation: sc-1 3.6s cubic-bezier(.6,0,.3,1); } .go .a-screens .b2 { animation: sc-2 3.6s cubic-bezier(.6,0,.3,1); }
.go .a-screens .b3 { animation: sc-3 3.6s cubic-bezier(.6,0,.3,1); } .go .a-screens .b4 { animation: sc-4 3.6s cubic-bezier(.6,0,.3,1); }
.go .a-screens .crit { animation: sc-crit 3.6s; }
@keyframes sc-1 { 0%, 6%, 76%, 100% { transform: none; } 22%, 46% { transform: translateY(114px); } }
@keyframes sc-2 { 0%, 6%, 76%, 100% { transform: none; } 22%, 46% { transform: translateY(38px); } }
@keyframes sc-3 { 0%, 6%, 76%, 100% { transform: none; } 22%, 46% { transform: translateY(-76px); } }
@keyframes sc-4 { 0%, 6%, 76%, 100% { transform: none; } 22%, 46% { transform: translateY(-76px); } }
@keyframes sc-crit { 0% { opacity: 1; transform: none; } 6%, 76% { opacity: 0; transform: scale(.2); } 84% { opacity: 1; transform: scale(1.25); } 90%, 100% { opacity: 1; transform: none; } }

/* Keeping watch: the bell rings, the alert pulses, then calm */
.a-knowledgebase .bl { transform-origin: 50% 8%; }
.a-knowledgebase .ring { opacity: 0; }
.go .a-knowledgebase .bl { animation: kb-ring 2.4s ease-in-out; }
.go .a-knowledgebase .dot { animation: kb-dot 2.4s ease-in-out; }
.go .a-knowledgebase .ring { animation: kb-ringpulse 2.4s ease-out; }
@keyframes kb-ring { 0%, 50%, 100% { transform: none; } 8% { transform: rotate(14deg); } 16% { transform: rotate(-12deg); } 24% { transform: rotate(9deg); } 32% { transform: rotate(-6deg); } 40% { transform: rotate(3deg); } }
@keyframes kb-dot { 0%, 30%, 60%, 100% { transform: none; } 40% { transform: scale(1.25); } }
@keyframes kb-ringpulse { 0%, 32% { opacity: 0; transform: scale(.9); } 36% { opacity: .9; } 70%, 100% { opacity: 0; transform: scale(1.9); } }

/* Design in the age of AI: code is typed, then turns into the screen */
.a-nofigma .code text { opacity: 0; }
.a-nofigma .u3 { transform-origin: left center; }
.go .a-nofigma .ui > * { animation: nf-ui 4.4s ease-in-out; }
.go .a-nofigma .c1 { animation: nf-type 4.4s steps(9, end); }
.go .a-nofigma .c2 { animation: nf-type2 4.4s steps(9, end); }
.go .a-nofigma .c3 { animation: nf-type3 4.4s steps(8, end); }
.go .a-nofigma .c4 { animation: nf-type4 4.4s steps(10, end); }
@keyframes nf-ui { 0%, 100% { opacity: 1; transform: none; } 8%, 62% { opacity: 0; transform: scale(.9); } 72% { opacity: 1; transform: scale(1.04); } 78% { transform: none; } }
@keyframes nf-type { 0%, 10% { opacity: 1; clip-path: inset(0 100% 0 0); } 22% { opacity: 1; clip-path: inset(0 0 0 0); } 60% { opacity: 1; clip-path: inset(0 0 0 0); } 68%, 100% { opacity: 0; clip-path: inset(0 0 0 0); } }
@keyframes nf-type2 { 0%, 22% { opacity: 1; clip-path: inset(0 100% 0 0); } 32% { clip-path: inset(0 0 0 0); } 60% { opacity: 1; clip-path: inset(0 0 0 0); } 68%, 100% { opacity: 0; clip-path: inset(0 0 0 0); } }
@keyframes nf-type3 { 0%, 32% { opacity: 1; clip-path: inset(0 100% 0 0); } 42% { clip-path: inset(0 0 0 0); } 60% { opacity: 1; clip-path: inset(0 0 0 0); } 68%, 100% { opacity: 0; clip-path: inset(0 0 0 0); } }
@keyframes nf-type4 { 0%, 42% { opacity: 1; clip-path: inset(0 100% 0 0); } 52% { clip-path: inset(0 0 0 0); } 60% { opacity: 1; clip-path: inset(0 0 0 0); } 68%, 100% { opacity: 0; clip-path: inset(0 0 0 0); } }

.case { cursor: pointer; }

/* links in text: underline that draws in */
.story .txt a.inl { background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat; transition: background-size .35s; }
.story .txt a.inl:hover { background-size: 100% 2px; }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}
@media print { .mo .rv, .mo .rv-g > * { opacity: 1 !important; transform: none !important; } }

/* Protected screens (lock.js) */
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
figure.locked .lock { display: flex; gap: 20px; align-items: flex-start; background: var(--paper); border: 2px dashed var(--black); padding: 28px; color: var(--black); }
figure.locked .lock > svg { width: 48px; flex: none; }
figure.locked .lock b { display: block; font-weight: 600; font-size: 18px; margin-bottom: 6px; }
figure.locked .lock p { font-size: 15px; max-width: 56ch; }
figure.locked .lock a { text-decoration: underline; text-underline-offset: 3px; }
figure.locked .unlock { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; align-items: center; }
figure.locked .unlock input { font: inherit; font-size: 15px; padding: 9px 14px; border: 2px solid var(--black); border-radius: 99px; background: var(--white); min-width: 220px; }
figure.locked .unlock .btn { background: var(--yellow); color: var(--black); cursor: pointer; }
figure.locked .err { flex-basis: 100%; font-size: 14px; color: var(--red); min-height: 1em; }
figure.unlocked { animation: rise .7s cubic-bezier(.2,.7,.2,1); }
@media (max-width: 640px) { figure.locked .lock { flex-direction: column; padding: 20px; } figure.locked .unlock input { min-width: 0; flex: 1; } }

/* ---------- Mobile: navigation at the bottom, within thumb reach ---------- */
.tabbar { display: none; }
@media (max-width: 860px) {
  .tabbar { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--white); border-top: 2px solid var(--black); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); }
  .tabbar a { display: grid; justify-items: center; align-content: center; gap: 3px; min-height: 50px; font-size: 11px; font-weight: 500; color: var(--black); border-radius: 12px; }
  .tabbar svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .tabbar a[aria-current] { background: var(--yellow); }
  .tabbar .p-lang b { display: grid; place-content: center; width: 30px; height: 24px; border: 2px solid var(--black); border-radius: 99px; font-size: 11px; font-weight: 700; letter-spacing: .04em; line-height: 1; }
  .tabbar .tb-cv svg { background: var(--yellow); border-radius: 50%; padding: 3px; width: 28px; height: 28px; margin: -2px 0 -2px; }
  body { padding-bottom: calc(66px + env(safe-area-inset-bottom)); }
  /* the top bar keeps only the name; everything else lives in the bottom bar */
  .top nav { display: none; }
}