/* ---- theme toggle button (glass, like the navigation) ---- */
.theme-toggle, .lang-toggle {
  position: fixed; z-index: 60; top: 24px; right: 28px; width: 52px; height: 52px; padding: 0; border: 0; border-radius: 50%;
  display: grid; place-items: center; color: #1d1d1f; cursor: pointer; -webkit-tap-highlight-color: transparent;
  background: linear-gradient(135deg, rgba(255,255,255,.62), rgba(255,255,255,.2) 55%, rgba(255,255,255,.45));
  -webkit-backdrop-filter: blur(10px) saturate(1.9); backdrop-filter: blur(10px) saturate(1.9);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.6), inset 1.5px 2px 1px -.5px rgba(255,255,255,.95), 0 0 0 .5px rgba(0,0,0,.06), 0 10px 26px -12px rgba(0,0,0,.28);
  transition: transform .5s cubic-bezier(.22, 1, .36, 1), box-shadow .5s ease;
}
.theme-toggle:hover, .lang-toggle:hover { transform: translateY(-1px) scale(1.04); }
.theme-toggle:active, .lang-toggle:active { transform: scale(.94); transition-duration: .15s; }
.theme-toggle:focus-visible, .lang-toggle:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.theme-toggle svg { grid-area: 1 / 1; transition: transform .6s cubic-bezier(.22, 1, .36, 1), opacity .35s ease; }
.theme-toggle .tt-moon { opacity: 0; transform: rotate(-70deg) scale(.5); }
html[data-theme="dark"] .theme-toggle .tt-sun { opacity: 0; transform: rotate(70deg) scale(.5); }
html[data-theme="dark"] .theme-toggle .tt-moon { opacity: 1; transform: none; }
html[data-theme="dark"] .theme-toggle, html[data-theme="dark"] .lang-toggle {
  color: #f1f2f6;
  background: linear-gradient(135deg, rgba(60,64,80,.55), rgba(24,26,34,.4) 55%, rgba(46,50,64,.5));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), inset 1.5px 2px 1px -.5px rgba(255,255,255,.25), 0 10px 26px -12px rgba(0,0,0,.7);
}
@media (max-width: 760px) { .theme-toggle { top: auto; bottom: 18px; right: 18px; width: 46px; height: 46px; } }

/* language button: the same glass as the theme button, on the opposite (left) side with the same spacing; it shows the language it switches TO */
.lang-toggle {
  right: auto; left: 28px; width: auto; min-width: 52px; padding: 0 19px; border-radius: 360px;
  font-family: inherit; font-size: 14px; font-weight: 700; line-height: 1; letter-spacing: .02em; white-space: nowrap;
}
.lang-toggle .lt-text { display: block; }
@media (max-width: 760px) { .lang-toggle { top: auto; bottom: 18px; left: 18px; right: auto; height: 46px; min-width: 46px; padding: 0 16px; font-size: 13px; } }
/* the "Featured Work" glass box was sized for the English title: in Portuguese it hugs the (shorter) word instead of staying wide */
html[lang="pt-BR"] .work__title { align-self: flex-start; width: fit-content; padding-right: 34px; }
/* Assets & Lab shelf in dark mode */
html[data-theme="dark"] .al__prod-frame { background: linear-gradient(180deg, rgba(17, 17, 21, .78), rgba(17, 17, 21, .42));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 0 0 1px rgba(255, 255, 255, .07), 0 0 0 .5px rgba(0, 0, 0, .08), 0 26px 44px -24px rgba(0, 0, 0, .6); }
html[data-theme="dark"] .al__prod:hover .al__prod-frame { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), inset 0 0 0 1px rgba(255, 255, 255, .09), 0 34px 52px -24px rgba(0, 0, 0, .7); }
html[data-theme="dark"] .al__prod-name, html[data-theme="dark"] .al__prod-price { color: rgb(244, 244, 245); }
html[data-theme="dark"] .al__prod-kind, html[data-theme="dark"] .al__prod-buy { color: rgb(136, 138, 150); }
html[data-theme="dark"] .al__prod:hover .al__prod-buy { color: rgb(244, 244, 245); }
/* Portuguese texts are longer: the big section title gets a little smaller on phones so it keeps its margins */
@media (max-width: 809px) { html[lang="pt-BR"] .cl__title h2 { font-size: 29px; line-height: 28px; } }
/* no-View-Transitions fallback: the page text fades while it is translated */
html.lang-anim body { transition: opacity .16s ease; opacity: .0; }
/* the page is hidden for a moment on load when Portuguese is saved, until it has been translated (no flash of English) */
html.i18n-wait body { visibility: hidden; }

/* colours cross-fade while switching (only for a moment, so normal hover transitions stay untouched) */
html.theme-anim *, html.theme-anim *::before, html.theme-anim *::after {
  transition: background-color .55s ease, color .55s ease, border-color .55s ease, box-shadow .55s ease, fill .55s ease, stroke .55s ease !important;
}

/* ---- dark mode: things the automatic remap cannot know ---- */
html[data-theme="dark"] { color-scheme: dark; }
html[data-theme="dark"] ::selection { background: rgba(255, 255, 255, .22); color: #fff; }

html[data-theme="dark"] { --acc-warm: 58, 62, 92; --ink-apple: #f1f2f6; }

/* tiles / cards whose colours are set from JS or inline custom properties */
html[data-theme="dark"] .al__tile:not(.al__tile--dark) { background: linear-gradient(160deg, #2c3040, #1b1e2a); }
html[data-theme="dark"] .pl__media--soon { background: linear-gradient(160deg, #2a2e3d, #1b1e29); }
html[data-theme="dark"] .pl__media--soon em { color: rgba(255, 255, 255, .6); }
/* inline SVG icons that carry their own colour */
html[data-theme="dark"] .corner svg path { stroke: #e8e8ee; }
html[data-theme="dark"] .work__all-icon svg path { fill: #fff; }
/* native dropdown list */
html[data-theme="dark"] select option { background: #1b1d26; color: #f1f2f6; }

/* project page footer wordmark: light tints of the project accent instead of the deep inks used on the light page */
html[data-theme="dark"] #gf {
  --acc-ink-1: color-mix(in srgb, rgb(var(--acc)) 18%, #fff) !important;
  --acc-ink-2: color-mix(in srgb, rgb(var(--acc)) 55%, #fff) !important;
  --acc-ink-3: rgb(var(--acc)) !important;
}

/* theme switch (View Transitions): old and new page are plain snapshots, the circle reveal is driven from theme.js;
   the toggle button has its own layer so it stays crisp and its icon cross-fades on top */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-old(root) { z-index: 1; }
::view-transition-new(root) { z-index: 2; }
.theme-toggle { view-transition-name: none; }
.lang-toggle { view-transition-name: none; }

/* footer: short brand disclaimer, same quiet style as the credit on the right */
.ft__disclaimer { max-width: 34ch; }
@media (max-width: 809px) { .ft__disclaimer { max-width: 26ch; } }

/* Chrome draws a fully rounded pill as a squarish "squircle" when corner-shape is set: keep the pills truly round */
.nav__avatar, .nav__pill, .nav__lens, .cl__pill, .theme-toggle, .lang-toggle { corner-shape: round; }
.nav__avatar, .nav__pill, .lang-toggle { border-radius: 360px; }

/* Keep glass buttons inside the page snapshot: separate backdrop-filter snapshots can leave rectangular edges. */
.lang-toggle:focus:not(:focus-visible), .theme-toggle:focus:not(:focus-visible) { outline: none; }