/* Motion layer: every rule here is decorative; the page reads the same without it. */
html{overflow-x:clip}

/* ---------- scroll progress ---------- */
.scroll-progress{position:fixed;inset:0 0 auto;height:2px;z-index:50;background:linear-gradient(90deg,var(--accent),#d88a4f 60%,var(--green));transform-origin:0 50%;transform:scaleX(0);pointer-events:none}

/* ---------- hero ---------- */
.hero{position:relative;isolation:isolate}
#hero-canvas{position:absolute;top:0;left:50%;width:100vw;height:100%;transform:translateX(-50%);z-index:-1;display:block}
.hero-glow{position:absolute;top:0;bottom:0;left:50%;width:100vw;transform:translateX(-50%);overflow:hidden;z-index:-2;pointer-events:none}
.hero-glow span{position:absolute;border-radius:50%;filter:blur(60px);opacity:.55}
.hero-glow span:first-child{width:420px;height:300px;left:max(4%,calc(50% - 560px));top:4%;background:radial-gradient(circle,#f3d6bf,transparent 70%);animation:drift-a 16s ease-in-out infinite alternate}
.hero-glow span:last-child{width:380px;height:280px;right:max(4%,calc(50% - 540px));top:30%;background:radial-gradient(circle,#d7e6d8,transparent 70%);animation:drift-b 19s ease-in-out infinite alternate}
@keyframes drift-a{to{transform:translate(90px,50px) scale(1.15)}}
@keyframes drift-b{to{transform:translate(-80px,-40px) scale(1.1)}}
.hero>*:not(canvas):not(.hero-glow){position:relative}

.motion h1 .ch{display:inline-block;opacity:0;transform:translateY(.45em) rotate(4deg);filter:blur(10px);animation:ch-in .9s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(var(--i) * 45ms + 120ms)}
@keyframes ch-in{to{opacity:1;transform:none;filter:blur(0)}}
.motion h1:not(.split),.motion .intro:not(.split){visibility:hidden}
.motion h1 em{position:relative;display:inline-block}
.motion h1 em::after{content:"";position:absolute;left:4%;right:2%;bottom:.02em;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--accent),#e0a067,var(--green));transform:scaleX(0);transform-origin:0 50%;animation:underline 1s cubic-bezier(.2,.8,.2,1) 1.25s forwards}
@keyframes underline{to{transform:scaleX(1)}}

.motion .hero .paper-title,.motion .hero .authors,.motion .hero .affiliations,.motion .hero .paper-links{opacity:0;animation:rise .9s cubic-bezier(.2,.8,.2,1) forwards}
.motion .hero .paper-title{animation-delay:.55s}.motion .hero .authors{animation-delay:.7s}.motion .hero .affiliations{animation-delay:.8s}.motion .hero .paper-links{animation-delay:.92s}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.motion .intro .word{display:inline-block;opacity:0;transform:translateY(8px);filter:blur(4px);animation:ch-in .7s ease-out forwards;animation-delay:calc(var(--i) * 55ms + 1.15s)}

.paper-links .button{position:relative;overflow:hidden}
.paper-links .button:not(.unavailable)::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,#ffffff55 50%,transparent 70%);transform:translateX(-120%);transition:transform .6s}
.paper-links .button:not(.unavailable):hover::after{transform:translateX(120%)}
.paper-links .button:not(.unavailable){transition:background .15s,border-color .15s,transform .2s,box-shadow .2s}
.paper-links .button:not(.unavailable):hover{transform:translateY(-2px);box-shadow:0 8px 20px -12px #4b382e88}

/* ---------- scroll reveal ---------- */
.motion [data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .9s cubic-bezier(.2,.8,.2,1),transform .9s cubic-bezier(.2,.8,.2,1);transition-delay:var(--delay,0s)}
.motion [data-reveal].in{opacity:1;transform:none}

/* ---------- demo shell spotlight ---------- */
.demo-shell{position:relative}
.demo-shell::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%),#b85323cc,#b8532322 45%,transparent 70%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;opacity:0;transition:opacity .35s;z-index:3}
.demo-shell:hover::after{opacity:1}

/* ---------- timeline ---------- */
.timeline{grid-column:1/-1;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;border-bottom:1px solid var(--line);background:#fbfaf6;padding:0 14px}
.timeline-step{position:relative;border:0;background:transparent;text-align:left;display:flex;align-items:center;gap:9px;padding:13px 10px 15px;font-size:12px;color:var(--muted);min-width:0;transition:color .3s}
.timeline-step:disabled{opacity:.5}
.timeline-index{flex:none;width:21px;height:21px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-variant-numeric:tabular-nums;border:1px solid #d6cfc2;background:var(--paper);transition:background .3s,border-color .3s,color .3s,box-shadow .3s}
.timeline-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.timeline-bar{position:absolute;left:10px;right:10px;bottom:0;height:2px;background:#e7e2d7;overflow:hidden;border-radius:2px}
.timeline-bar::after{content:"";position:absolute;inset:0;background:var(--role);transform:scaleX(0);transform-origin:0 50%}
.timeline-step.done{color:#57534a}.timeline-step.done .timeline-index{background:#f1eee6;border-color:#cfc6b6}.timeline-step.done .timeline-bar::after{transform:scaleX(1);opacity:.45}
.timeline-step.current{color:var(--ink);font-weight:500}.timeline-step.current .timeline-index{background:var(--role);border-color:var(--role);color:white;box-shadow:0 0 0 4px color-mix(in srgb,var(--role) 20%,transparent)}
.timeline-step.current .timeline-bar::after{transform:scaleX(1);transition:transform .5s}
.timeline-step.counting .timeline-bar::after{animation:dwell var(--dwell,2600ms) linear forwards;opacity:.7}
.timeline-step.counting .timeline-index{border-color:var(--role);color:var(--role)}
@keyframes dwell{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ---------- streaming step ---------- */
.step .pending{display:none}
.thinking{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--role);padding:2px 0 6px;font-style:italic}
.thinking span{margin-right:4px}
.thinking i{width:5px;height:5px;border-radius:50%;background:var(--role);animation:blink 1.1s infinite ease-in-out}
.thinking i:nth-of-type(2){animation-delay:.15s}.thinking i:nth-of-type(3){animation-delay:.3s}
@keyframes blink{0%,80%,100%{opacity:.2;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
.typing::after{content:"";display:inline-block;width:7px;height:1.05em;margin-left:2px;vertical-align:-2px;background:var(--role);animation:caret .8s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
.step-body>*:not(.pending){animation:arrive .35s ease-out}
.critic-review.pop .verdict{display:inline-block;padding:1px 8px;border-radius:99px;background:#efe9f6;animation:verdict .55s cubic-bezier(.2,1.6,.4,1)}
@keyframes verdict{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}
.ledger-update:not(.pending){animation:update-in .6s ease-out}
@keyframes update-in{0%{opacity:0;transform:translateX(-10px)}60%{opacity:1;background:#e3efe0}100%{transform:none;background:transparent}}
.step.streaming details{border-color:var(--role);box-shadow:0 0 0 3px color-mix(in srgb,var(--role) 12%,transparent),0 10px 30px -22px var(--role)}
.step::before{transition:background .4s}
.step.selected .step-number{color:var(--role);font-weight:600}
.step.final.complete details{position:relative;overflow:hidden}
.step.final.complete details::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,#ffffffcc 50%,transparent 65%);transform:translateX(-120%);animation:shine 1.4s .2s ease-out forwards;pointer-events:none}
@keyframes shine{to{transform:translateX(120%)}}

.raw-observation.traced{animation:traced 1.8s ease-out}
@keyframes traced{0%,35%{background:#f6e7d6;box-shadow:0 0 0 3px #b8532333}100%{box-shadow:0 0 0 3px transparent}}

/* ---------- ledger writes ---------- */
.ledger-panel{position:relative}
.ledger-panel.writing::before{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 0 1.5px #70a06f;animation:ledger-flash 1.2s ease-out forwards}
@keyframes ledger-flash{0%{opacity:0}20%{opacity:1}100%{opacity:0}}
.motion .changed{animation:row-in .7s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--order,0) * 110ms)}
@keyframes row-in{from{opacity:0;transform:translateX(-14px);background:#cfe5c9}to{opacity:1;transform:none}}
.readiness.just-ready .readiness-title strong{display:inline-block;animation:ready-pop .7s cubic-bezier(.2,1.6,.4,1)}
.readiness.just-ready{animation:ready-glow 1.6s ease-out}
@keyframes ready-pop{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}
@keyframes ready-glow{0%{box-shadow:0 -1px 0 var(--line)}30%{box-shadow:0 -1px 0 var(--line),0 0 0 6px #7aab8833;background:#eef6ec}100%{box-shadow:0 -1px 0 var(--line)}}

/* ---------- controls ---------- */
.control-left{display:flex;align-items:center;gap:10px}
.speed-button{border:1px solid var(--line);background:var(--paper);border-radius:99px;font-size:12px;padding:3px 10px;color:var(--muted);font-variant-numeric:tabular-nums;min-width:44px;min-height:30px}
.speed-button:hover{border-color:#c9c2b5;color:var(--ink)}
#play.is-playing{background:#f4eade;border-color:#dbc3a4;color:#713d21}
#start{position:relative}
.motion #start::before{content:"";position:absolute;inset:-1px;border-radius:inherit;border:1px solid var(--accent);animation:ring 2.2s ease-out infinite;pointer-events:none}
@keyframes ring{from{transform:scale(1);opacity:.7}to{transform:scale(1.25,1.5);opacity:0}}

/* ---------- results ---------- */
.motion .omnigaia-table tbody tr{opacity:0;transform:translateY(8px);transition:opacity .5s ease-out,transform .5s ease-out;transition-delay:calc(var(--i,0) * 45ms)}
.motion .omnigaia-table.in tbody tr{opacity:1;transform:none}
.omnigaia-table td.col-hover,.omnigaia-table th.col-hover{background-color:#f6efe4}
.omnigaia-table tbody tr:not(.table-group):hover>*{background-color:#f6efe4}
.omnigaia-table tbody tr.ours-row:hover>*,.omnigaia-table tbody tr.ours-row>.col-hover{background-color:#efdfcc}
.omnigaia-table .ours-row>th{position:relative;overflow:hidden}
.omnigaia-table.in .ours-row>th::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,#ffffffaa 50%,transparent 70%);transform:translateX(-120%);animation:shine 1.6s 1.3s ease-out forwards;pointer-events:none}

@media(max-width:760px){.timeline{grid-template-columns:repeat(5,minmax(0,1fr));padding:0 6px}.timeline-title{display:none}.timeline-step{justify-content:center;padding:11px 4px 13px}.timeline-bar{left:4px;right:4px}.hero-glow span{filter:blur(40px)}}
@media(prefers-reduced-motion:reduce){.hero-glow,#hero-canvas{display:none}}