/* =====================================================================
   imprala – shared layer
   Loaded after each page's own styles: font, press feedback, spring
   motion, translucent floating controls, reduced-motion fallbacks.
   Remove the <link> to this file and the pages look like before.
   ===================================================================== */

/* Open Sans (SIL Open Font License, see fonts/OFL-LICENSE.txt),
   served from this site so it looks the same in every browser. */
@font-face{font-family:"Open Sans";font-style:normal;font-display:swap;font-weight:300 800;
  src:url(fonts/open-sans.woff2) format("woff2-variations"),url(fonts/open-sans.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Open Sans";font-style:normal;font-display:swap;font-weight:300 800;
  src:url(fonts/open-sans-ext.woff2) format("woff2-variations"),url(fonts/open-sans-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  /* Critically damped spring (damping 1.0). Response 0.3s / 0.4s.
     Springs have no "duration": this is the time until it has settled. */
  --spring: cubic-bezier(.2,.8,.2,1);
  --spring-fast: 440ms;   /* response 0.3 – small controls */
  --spring-calm: 590ms;   /* response 0.4 – cards, repositioning */
  --press: 100ms;         /* feedback on pointer-down is instant */

  --font: "Open Sans","Segoe UI Variable Display","Segoe UI",system-ui,Roboto,sans-serif;
  --font-display: var(--font);

  /* Glass for floating chrome */
  --glass: rgba(255,255,255,.62);
  --glass-edge: rgba(255,255,255,.75);
  --glass-line: rgba(36,19,59,.10);
  --lift: 0 1px 2px rgba(36,19,59,.06), 0 8px 24px -12px rgba(36,19,59,.28);
  --lift-hover: 0 2px 4px rgba(36,19,59,.06), 0 18px 40px -18px rgba(36,19,59,.38);
}
@supports (transition-timing-function: linear(0, 1)){
  :root{
    --spring: linear(0, .0575, .1804, .3209, .4553, .5731, .6712, .7502, .8123, .8602, .8967, .9241, .9445, .9597, .9708, .9789, .9848, .9891, .9922, .9945, .996, .9972, .998, .9986, .999, 1);
  }
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --glass: rgba(30,20,48,.58);
    --glass-edge: rgba(255,255,255,.10);
    --glass-line: rgba(255,255,255,.08);
    --lift: 0 1px 2px rgba(0,0,0,.25), 0 10px 28px -14px rgba(0,0,0,.7);
    --lift-hover: 0 2px 4px rgba(0,0,0,.3), 0 22px 44px -20px rgba(0,0,0,.85);
  }
}
:root[data-theme="dark"]{
  --glass: rgba(30,20,48,.58);
  --glass-edge: rgba(255,255,255,.10);
  --glass-line: rgba(255,255,255,.08);
  --lift: 0 1px 2px rgba(0,0,0,.25), 0 10px 28px -14px rgba(0,0,0,.7);
  --lift-hover: 0 2px 4px rgba(0,0,0,.3), 0 22px 44px -20px rgba(0,0,0,.85);
}

/* ---------- Typography: system font, tracking + leading per size ---------- */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  font-family:var(--font);
  font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  letter-spacing:-.003em;
  -webkit-tap-highlight-color:transparent;
}
/* Large display text: tight leading, negative tracking */
.mark,.hero h1,.sticker-hero h1,h1{font-family:var(--font-display);letter-spacing:-.035em;line-height:.92}
.hero h1 span,.sticker-hero h1 span{letter-spacing:-.015em;line-height:1.1}
/* Headings: a little tighter */
h2,section h2{font-family:var(--font-display);letter-spacing:-.022em;line-height:1.12}
.project h3{font-family:var(--font-display);letter-spacing:-.025em}
h3{letter-spacing:-.012em}
.project h3 small{letter-spacing:-.005em}
/* Body copy: near zero; small text: slightly positive for legibility */
p,li{letter-spacing:-.003em}
small,.fileinfo,.note,footer,.mini code,.chip small,.badge{letter-spacing:.006em}
.lede{line-height:1.5;text-wrap:pretty}
h1,h2,h3{text-wrap:balance}

/* ---------- Response: feedback on press, instant ---------- */
.project,.soc,.btn,.chip,.pager button,.stk,.copy,.snip-copy,.ows-up,.back,
.lang-switch button,.search .clr,.btnlike,button{
  transition-property:transform,box-shadow,border-color,background-color,color,filter,opacity;
  transition-duration:var(--spring-fast);
  transition-timing-function:var(--spring);
}
.project{transition-duration:var(--spring-calm)}
.project:active,.soc:active,.btn:active,.chip:active,.pager button:active:not(:disabled),
.copy:active,.snip-copy:active,.btnlike:active,.search .clr:active{
  transform:scale(.97)!important;transition-duration:var(--press)!important;transition-timing-function:ease-out!important;
}
.stk:active{transform:scale(.94)!important;transition-duration:var(--press)!important;transition-timing-function:ease-out!important}
.project:active{transform:scale(.985)!important}
.ows-up:active{transform:translate(-50%,0) scale(.94)!important;transition-duration:var(--press)!important}

/* ---------- Cards: depth instead of borders flashing ---------- */
.project{box-shadow:var(--lift);border-color:color-mix(in srgb,var(--line) 70%,transparent)}
@media (hover:hover){
  .project:hover{transform:translateY(-3px);box-shadow:var(--lift-hover);border-color:color-mix(in srgb,var(--plum) 45%,var(--line))}
  .project .go{transition:transform var(--spring-calm) var(--spring)}
  /* Hint in the direction the click goes */
  .project:hover .go{transform:translateX(3px)}
  .project[target="_blank"]:hover .go{transform:translate(2px,-2px)}
  .soc:hover{transform:translateY(-1px);box-shadow:var(--lift)}
  .btn.primary:hover{transform:translateY(-1px)}
}
.chat,.preview{box-shadow:0 1px 2px rgba(0,0,0,.08),0 30px 60px -30px rgba(36,19,59,.55)}

/* ---------- Floating chrome as translucent material ---------- */
.lang-switch,.ows-up{
  background:var(--glass)!important;
  -webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);
  border:1px solid var(--glass-line)!important;
  box-shadow:inset 0 1px 0 var(--glass-edge),0 8px 28px -12px rgba(36,19,59,.45)!important;
}
.ows-up{color:var(--ink)!important;font-weight:650}
/* Light catching the top edge */
.lang-switch{isolation:isolate;padding:3px}
.lang-switch button{position:relative;z-index:1;font-weight:650;letter-spacing:.01em}
.lang-switch button[aria-pressed="true"]{background:transparent!important;color:var(--paper)!important}
/* Sliding thumb: moves to the pressed language with a spring */
.lang-switch .ui-thumb{
  position:absolute;z-index:0;top:3px;bottom:3px;left:0;border-radius:999px;background:var(--ink);
  transform:var(--thumb-x,none);
  transition:transform var(--spring-fast) var(--spring),width var(--spring-fast) var(--spring);
  will-change:transform;pointer-events:none;
}
/* No JS? Keep the old solid pill */
.lang-switch:not(.ui-ready) button[aria-pressed="true"]{background:var(--ink)!important}
.lang-switch:active .ui-thumb{transform:var(--thumb-x) scale(.94)}

/* Back-to-top materializes (blur + scale + opacity) and leaves the way it came */
.ows-up{
  transition:transform var(--spring-calm) var(--spring),opacity 260ms ease,filter var(--spring-calm) var(--spring),visibility 0s linear 0s!important;
}
.ows-up.away{
  transform:translate(-50%,18px) scale(.9)!important;filter:blur(6px);
  transition:transform var(--spring-fast) var(--spring),opacity 200ms ease,filter var(--spring-fast) var(--spring),visibility 0s linear 260ms!important;
}
@media (hover:hover){.ows-up:not(.away):hover{transform:translate(-50%,-2px)!important}}

/* Scroll edge: soft blur where content slides under the floating switch, no hard line */
.ui-edge{
  position:fixed;left:0;right:0;top:0;height:64px;z-index:40;pointer-events:none;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  background:linear-gradient(to bottom,color-mix(in srgb,var(--paper) 70%,transparent),transparent);
  -webkit-mask-image:linear-gradient(to bottom,#000 30%,transparent);mask-image:linear-gradient(to bottom,#000 30%,transparent);
  opacity:0;transition:opacity 300ms ease;
}
.ui-edge.on{opacity:1}

/* ---------- Inputs & chips ---------- */
.search input{transition:border-color var(--spring-fast) var(--spring),box-shadow var(--spring-fast) var(--spring)}
.chip[aria-pressed="true"],.pager button[aria-current="page"]{box-shadow:0 4px 12px -6px rgba(36,19,59,.5)}

/* ---------- Sticker swipe between pages ---------- */
#grid{touch-action:pan-y;will-change:transform}
#grid.ui-dragging .stk{pointer-events:none}

/* ---------- Page entrance: content settles in once, quietly ---------- */
@keyframes ui-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.ui-anim main > *,.ui-anim .wrap > header,.ui-anim .hero,.ui-anim .sticker-hero{
  animation:ui-in var(--spring-calm) var(--spring) backwards;
}
.ui-anim main > *:nth-child(2){animation-delay:40ms}
.ui-anim main > *:nth-child(3){animation-delay:80ms}
.ui-anim main > *:nth-child(4){animation-delay:120ms}
.ui-anim main > *:nth-child(5){animation-delay:160ms}
.ui-anim main > *:nth-child(n+6){animation-delay:200ms}

/* ---------- Accessibility ---------- */
@media (prefers-reduced-motion: reduce){
  .ui-anim main > *,.ui-anim .wrap > header,.ui-anim .hero,.ui-anim .sticker-hero{animation:ui-fade 200ms ease backwards!important}
  @keyframes ui-fade{from{opacity:0}to{opacity:1}}
  .project:hover,.soc:hover,.btn.primary:hover,.project:hover .go{transform:none!important}
  .project:active,.soc:active,.btn:active,.chip:active,.stk:active,.copy:active,.snip-copy:active{transform:none!important;opacity:.75}
  .ows-up,.ows-up.away{transform:translate(-50%,0)!important;filter:none!important;transition:opacity 200ms ease,visibility 0s linear 200ms!important}
  .lang-switch .ui-thumb{transition:none}
}
@media (prefers-reduced-transparency: reduce){
  .lang-switch,.ows-up{background:var(--sheet)!important;-webkit-backdrop-filter:none;backdrop-filter:none}
  .ui-edge{display:none}
}
@media (prefers-contrast: more){
  .lang-switch,.ows-up{background:var(--sheet)!important;-webkit-backdrop-filter:none;backdrop-filter:none;border:2px solid var(--ink)!important}
  .project{border-color:var(--ink)}
  .ui-edge{display:none}
}

/* Open Sans runs heavier than Segoe UI at the same weight: one step lighter for headings */
h1,h2,h3,.mark,.project h3,section h2{font-weight:700}
.btn,.soc,.lang-switch button{font-weight:650}