/* OPAI motion + clarity layer v2.
   Loaded AFTER opai-theme.css on the section pages (Today, Work, Opportunities, Resume Lab,
   Projects, Academics, DSA, Overview, ...). It is never loaded by KARNA (super-chat.html) and
   nothing here targets KARNA's own elements. Every animation is off under prefers-reduced-motion. */

:root{
  --o2-ease:cubic-bezier(.22,.61,.36,1);
  --o2-spring:cubic-bezier(.34,1.56,.64,1);
  --o2-acc:var(--pri,var(--teal,#1A404D));
  --o2-hd:64px;              /* height of the OPAI header the sticky bars sit under */
  interpolate-size:allow-keywords;
}
html.o2-embed{--o2-hd:0px}
@media(max-width:700px){:root{--o2-hd:56px}html.o2-embed{--o2-hd:0px}}

/* ================= CLARITY ================= */

/* Small grey text was 11px / low contrast on the light theme. Keep the mono "label" look but make it readable. */
.tg,.tag,.sec,.state,.ex h4,.idx,.cap,.sechd .r{font-size:12px}
.mut{font-size:max(13px,1em)}
html[data-theme=light],html:not([data-theme]){--ink-3:#5E6468}   /* was #70838A (3.6:1) -> 5.5:1 on the paper background */

/* Headings land below the sticky header + jump bar instead of underneath them */
:where(h1,h2,h3,section,[id]){scroll-margin-top:calc(var(--o2-hd) + 64px)}

/* Section titles: a short accent bar draws in under each one as it scrolls into view */
h2.o2-hx{background:linear-gradient(var(--o2-acc),var(--o2-acc)) 0 100%/0 2px no-repeat;padding-bottom:5px;
  transition:background-size .8s var(--o2-ease)}
h2.o2-hx.o2-in{background-size:34px 2px}
:is(.card,.panel,section):hover>h2.o2-hx.o2-in,:is(.card,.panel,section):hover>.row>h2.o2-hx.o2-in{background-size:72px 2px}

/* Stacked top-level sections inside a tab get a clear break */
#view>h2:not(:first-child),main>h2:not(:first-child){margin-top:30px;padding-top:18px;border-top:1px solid var(--line,var(--hair,#D8E2E0))}

/* "What is this tab for?" line under every tab strip */
.o2-help{margin:-6px 0 14px;max-width:1080px;font-size:13.5px;line-height:20px;color:var(--mut,var(--ink-2,#5C5F63));
  display:flex;align-items:center;gap:8px;min-height:20px}
.o2-help::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--o2-acc);opacity:.85}
.o2-help span{display:inline-block;animation:o2Txt .35s var(--o2-ease) both}
.wk-bar+.o2-help,.o2-help.o2-flush{margin:0;padding:8px max(14px,calc((100% - 1100px)/2 + 14px));border-bottom:1px solid var(--line,var(--hair,#D8E2E0));
  background:var(--bg,transparent);max-width:none;justify-content:flex-start}
@keyframes o2Txt{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}

/* "On this page" jump bar (built from the page's own section headings) */
.o2-jump{position:sticky;top:var(--o2-hd);z-index:18;margin:0 0 16px;padding:8px 4px;max-width:100%;box-sizing:border-box;display:flex;align-items:center;gap:6px;
  background:color-mix(in srgb,var(--bg,#F0F4F3) 96%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line,var(--hair,#D8E2E0));overflow-x:auto;scrollbar-width:none;
  animation:o2Drop .5s var(--o2-ease) both}
.o2-jump::-webkit-scrollbar{display:none}
.o2-jump>b{flex:none;font:600 11px/1 var(--mono,var(--font,system-ui));letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3,#5E6468);margin-right:4px}
.o2-jump a{position:relative;flex:none;display:inline-flex;gap:6px;align-items:center;padding:6px 12px;border-radius:999px;font-size:13px;font-weight:500;
  text-decoration:none;color:var(--mut,var(--ink-2,#5C5F63));transition:color .25s,background .25s,transform .2s var(--o2-spring)}
.o2-jump a i{font:600 10px/1 var(--mono,var(--font,system-ui));font-style:normal;opacity:.55}
.o2-jump a:hover{color:var(--o2-acc);background:color-mix(in srgb,var(--o2-acc) 9%,transparent);transform:translateY(-1px)}
.o2-jump a[aria-current=true]{color:#fff;background:var(--o2-acc);box-shadow:0 6px 16px -8px var(--o2-acc)}
.o2-jump a[aria-current=true] i{opacity:.8}
.o2-jump a:focus-visible{outline:2px solid var(--o2-acc);outline-offset:2px}
@keyframes o2Drop{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}

/* Where a jump lands: a soft ring so you can see which section you arrived at */
.o2-flash{animation:o2Flash 1.3s var(--o2-ease) 1}
@keyframes o2Flash{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--o2-acc) 55%,transparent)}35%{box-shadow:0 0 0 6px color-mix(in srgb,var(--o2-acc) 28%,transparent)}100%{box-shadow:0 0 0 14px transparent}}

/* Form fields: the label and field light up together so it is obvious which one you are in */
label:has(+ :is(input,textarea,select):focus){color:var(--o2-acc)}
label{transition:color .2s}
input:focus,textarea:focus,select:focus{border-color:var(--o2-acc)!important}
input,textarea,select{transition:border-color .2s,box-shadow .25s,transform .2s var(--o2-ease)}
input:focus,textarea:focus,select:focus{transform:translateY(-1px)}

/* ================= MOTION ================= */

/* Sliding tab indicator (JS adds .o2-ind inside the tab strip) */
.o2-hasind{position:relative}
.o2-ind{position:absolute;left:0;pointer-events:none;opacity:0;z-index:0;
  transition:transform .45s var(--o2-spring),width .45s var(--o2-spring),height .3s,opacity .2s}
.o2-hasind>:not(.o2-ind){position:relative;z-index:1}
.o2-hasind.o2-pill>.o2-ind{top:0;border-radius:999px;background:var(--o2-acc);box-shadow:0 6px 16px -8px var(--o2-acc)}
.o2-hasind.o2-pill>[aria-selected=true]{background:transparent!important;animation:none!important;color:#fff}
.o2-hasind.o2-line>.o2-ind{bottom:0;height:2px;border-radius:2px;background:var(--o2-acc)}
.o2-hasind.o2-line>[aria-selected=true]{border-color:transparent!important}
.o2-hasind.o2-on>.o2-ind{opacity:1}
.o2-hasind>[role=tab],.o2-hasind>button{transition:color .25s,transform .2s var(--o2-spring)}
.o2-hasind>[role=tab]:active,.o2-hasind>button:active{transform:scale(.96)}

/* Work: embedded page fades up when its tab opens; a thin bar runs while it loads */
.wk-frames iframe.on{animation:o2Frame .45s var(--o2-ease) both}
@keyframes o2Frame{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.wk-frames.o2-loading::before{content:"";position:absolute;left:0;top:0;height:2px;width:40%;z-index:5;background:var(--o2-acc);border-radius:2px;
  animation:o2Load 1.1s var(--o2-ease) infinite}
@keyframes o2Load{from{transform:translateX(-100%)}to{transform:translateX(260%)}}

/* Hero copy and action rows arrive in sequence */
.lede,.eyebrow,.ctas>*,.tools>*,main>.sub{animation:o2In .65s var(--o2-ease) backwards}
.eyebrow{animation-delay:.05s}.lede{animation-delay:.25s}.ctas>*:nth-child(1){animation-delay:.35s}.ctas>*:nth-child(2){animation-delay:.42s}.ctas>*:nth-child(3){animation-delay:.49s}
main>.sub{animation-delay:.2s}
.tools>*:nth-child(1){animation-delay:.3s}.tools>*:nth-child(2){animation-delay:.34s}.tools>*:nth-child(3){animation-delay:.38s}.tools>*:nth-child(4){animation-delay:.42s}.tools>*:nth-child(n+5){animation-delay:.46s}
@keyframes o2In{from{opacity:0;transform:translateY(14px)}}

/* Pills, tags and chips pop in one after another whenever a view renders */
:is(.row,.tags,.chips,.mini)>:is(.pill,.tg,.tag,.chip){animation:o2Pop .42s var(--o2-spring) backwards}
:is(.row,.tags,.chips,.mini)>:nth-child(2){animation-delay:.04s}
:is(.row,.tags,.chips,.mini)>:nth-child(3){animation-delay:.08s}
:is(.row,.tags,.chips,.mini)>:nth-child(4){animation-delay:.12s}
:is(.row,.tags,.chips,.mini)>:nth-child(5){animation-delay:.16s}
:is(.row,.tags,.chips,.mini)>:nth-child(6){animation-delay:.2s}
:is(.row,.tags,.chips,.mini)>:nth-child(n+7){animation-delay:.24s}
@keyframes o2Pop{from{opacity:0;transform:scale(.8) translateY(6px)}}

/* Press feedback on anything clickable that looks like a card/row */
:is(.card,.row,.proj,.opp)[data-open]:active,a.card:active,.col .card:active{transform:scale(.985)!important;transition-duration:.08s}

/* Buttons: primary actions follow the pointer a little (JS sets --o2-tx/--o2-ty; uses the independent `translate` property) */
.o2-mag{translate:var(--o2-tx,0) var(--o2-ty,0);transition:translate .25s var(--o2-ease)}
.o2-mag.o2-mag-on{transition:translate .08s linear}

/* Links inside copy: underline sweeps in */
:is(.lede,.note,.mut,.sub,p,li) a:not(.b,.pill,.big,.chip){text-decoration:none;
  background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .3s var(--o2-ease)}
:is(.lede,.note,.mut,.sub,p,li) a:not(.b,.pill,.big,.chip):hover{background-size:100% 1px}

/* Native <details> opens and closes smoothly (progressive: browsers without ::details-content just snap) */
details::details-content{block-size:0;overflow:clip;opacity:0;
  transition:block-size .38s var(--o2-ease),opacity .3s,content-visibility .38s allow-discrete}
details[open]::details-content{block-size:auto;opacity:1}
details>summary{cursor:pointer;transition:color .2s}
details>summary::marker{transition:transform .3s}

/* Progress bars: the fill breathes once it has grown */
.o-in .bar>i,.o-in .meter>*{transition:width .9s var(--o2-ease)}

/* Back to top, with a ring that fills as you scroll */
.o2-top{position:fixed;left:14px;bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:60;width:46px;height:46px;border-radius:50%;border:0;padding:0;
  display:grid;place-items:center;cursor:pointer;color:var(--o2-acc);
  background:conic-gradient(var(--o2-acc) calc(var(--o2-p,0)*1%),color-mix(in srgb,var(--o2-acc) 16%,transparent) 0);
  opacity:0;transform:translateY(16px) scale(.8);pointer-events:none;transition:opacity .3s,transform .4s var(--o2-spring)}
.o2-top::before{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--card,var(--bg,#fff))}
.o2-top svg{position:relative;width:18px;height:18px}
.o2-top.on{opacity:1;transform:none;pointer-events:auto}
.o2-top:hover{transform:translateY(-3px)}
.o2-top:focus-visible{outline:2px solid var(--o2-acc);outline-offset:3px}
html.o2-embed .o2-top{display:none}
@media print{.o2-top,.o2-jump{display:none!important}}


/* ================= reduced motion ================= */
@media(prefers-reduced-motion:reduce){
  .lede,.eyebrow,.ctas>*,.tools>*,main>.sub,:is(.row,.tags,.chips,.mini)>*,.o2-jump,.o2-help span,.o2-flash,
  .wk-frames iframe.on,.wk-frames.o2-loading::before{animation:none!important}
  .o2-ind,.o2-mag,.o2-top,h2.o2-hx,details::details-content{transition:none!important}
  h2.o2-hx{background-size:34px 2px}
  input:focus,textarea:focus,select:focus{transform:none}
}

/* Inside Work the parent page already has the theme switch; don't show a second floating one in every embedded page */
html.o2-embed .opai-theme.float{display:none}

/* help strips removed */
.o2-help{display:none!important}