/* ==========================================================================
   shayanmaher.site — portfolio, built on the Liquid Glass design system.
   Everything below composes tokens from ds.css. No raw hex outside of the
   backdrop gradients, which the system defines as gradient-only surfaces.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   Accessibility override.
   The system's --label-secondary (#8E8E93) and --label-tertiary (#AEAEB2) are
   the flat iOS system greys. Against the light app background (#F5F5F7) they
   measure 3.0:1 and 2.0:1 — both below WCAG AA for body copy, and this page is
   mostly body copy. iOS itself does not paint secondary text as a flat grey; it
   uses rgba(60,60,67,0.6) composited over the surface. These re-point the two
   text aliases to the same alpha-grey family at ratios that clear AA (5.3:1 and
   4.8:1) while preserving the intended three-step hierarchy.
   Scoped to :not([data-theme]) so the dark theme, whose own greys already clear
   AA on #0b0b0d (8.9:1 and 6.1:1), keeps the values shipped with the system.
   --------------------------------------------------------------------------- */
:root:not([data-theme]){
  --text-secondary:rgba(60,60,67,.78);
  --text-tertiary:rgba(60,60,67,.74);
}

*,*::before,*::after{box-sizing:border-box}

html{
  scroll-behavior:smooth;
  scroll-padding-top:104px;
  -webkit-text-size-adjust:100%;
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

body{
  margin:0;
  min-height:100vh;
  background:var(--surface-app);
  color:var(--text-primary);
  font:var(--text-body);
  letter-spacing:var(--tracking-tight);
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font:inherit;letter-spacing:inherit}

::selection{background:rgba(10,132,255,.18)}

:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:var(--radius-control);
}

/* ---------------------------------------------------------------------------
   Backdrop. Liquid Glass needs something behind the glass to refract. The
   system forbids photography/illustration/texture, so this is gradients only:
   a soft white -> #E5E5EA field with slow-drifting neutral light pools.
   --------------------------------------------------------------------------- */
.backdrop{
  position:fixed;
  inset:0;
  z-index:-1;
  background:
    radial-gradient(120% 120% at 50% 0%,
      var(--gray-app-bg-grad-start) 0%,
      var(--gray-app-bg-grad-end) 100%);
  overflow:hidden;
}
.orb{
  position:absolute;
  border-radius:50%;
  filter:blur(90px);
  opacity:.55;
  will-change:transform;
}
.orb-a{
  width:52vw;height:52vw;
  inset-block-start:-12vw;inset-inline-end:-8vw;
  background:radial-gradient(circle at 30% 30%,rgba(10,132,255,.28),transparent 68%);
  animation:drift-a 34s var(--ease-settle) infinite alternate;
}
.orb-b{
  width:46vw;height:46vw;
  inset-block-start:42%;inset-inline-start:-14vw;
  background:radial-gradient(circle at 60% 40%,rgba(48,209,88,.20),transparent 68%);
  animation:drift-b 41s var(--ease-settle) infinite alternate;
}
.orb-c{
  width:40vw;height:40vw;
  inset-block-end:-10vw;inset-inline-end:8vw;
  background:radial-gradient(circle at 50% 50%,rgba(255,214,10,.18),transparent 68%);
  animation:drift-c 47s var(--ease-settle) infinite alternate;
}
[data-theme="scrolling-layered"] .orb{opacity:.4;filter:blur(110px)}
@keyframes drift-a{to{transform:translate3d(-6vw,7vh,0) scale(1.12)}}
@keyframes drift-b{to{transform:translate3d(8vw,-6vh,0) scale(1.08)}}
@keyframes drift-c{to{transform:translate3d(-5vw,-8vh,0) scale(1.15)}}

/* ---------------------------------------------------------------------------
   Glass primitive. The three non-negotiables from the system: backdrop blur,
   a 1px translucent white rim, and the three-layer refraction shadow.
   --------------------------------------------------------------------------- */
.glass{
  background:var(--surface-glass);
  border:var(--border-glass);
  box-shadow:var(--shadow-glass);
  -webkit-backdrop-filter:blur(var(--blur-dock)) saturate(140%);
  backdrop-filter:blur(var(--blur-dock)) saturate(140%);
}
.glass-tint{
  background:var(--surface-glass-tint);
  border:var(--border-glass-tint);
  box-shadow:var(--shadow-glass-tint);
  -webkit-backdrop-filter:blur(var(--blur-pill)) saturate(140%);
  backdrop-filter:blur(var(--blur-pill)) saturate(140%);
}
[data-theme="scrolling-layered"] .glass,
[data-theme="scrolling-layered"] .glass-tint{
  -webkit-backdrop-filter:blur(var(--blur-header)) saturate(var(--saturate-header));
  backdrop-filter:blur(var(--blur-header)) saturate(var(--saturate-header));
}

/* -------------------------------------------------------------- layout --- */
.wrap{
  width:min(1120px,100% - var(--space-10));
  margin-inline:auto;
}
@media (max-width:640px){
  .wrap{width:min(1120px,100% - var(--space-8))}
}

section{padding-block:clamp(var(--space-16),11vh,120px)}

/* -------------------------------------------------------------- navbar --- */
.nav{
  position:fixed;
  inset-block-start:var(--space-4);
  inset-inline:0;
  z-index:60;
  display:flex;
  justify-content:center;
  pointer-events:none;
  padding-inline:var(--space-4);
}
.nav-inner{
  pointer-events:auto;
  display:flex;
  align-items:center;
  gap:var(--space-2);
  padding:var(--space-2);
  border-radius:var(--radius-pill);
  max-width:100%;
  transition:box-shadow var(--duration-base) var(--ease-settle),
             transform var(--duration-base) var(--ease-settle);
}
.nav.is-scrolled .nav-inner{transform:translateY(-2px)}

.brand{
  display:inline-flex;
  align-items:center;
  gap:2px;
  padding-inline:var(--space-4);
  font:var(--text-headline);
  font-family:var(--font-mono);
  direction:ltr;
  white-space:nowrap;
}
.brand .bracket{color:var(--text-tertiary)}

.nav-links{
  display:flex;
  align-items:center;
  gap:2px;
  list-style:none;
  margin:0;
  padding:0;
}
.nav-links a{
  display:inline-flex;
  align-items:center;
  height:var(--control-height-sm);
  padding-inline:var(--space-4);
  border-radius:var(--radius-pill);
  font:var(--text-subhead);
  color:var(--text-secondary);
  white-space:nowrap;
  transition:color var(--duration-fast) var(--ease-settle),
             background var(--duration-fast) var(--ease-settle);
}
.nav-links a[aria-current="true"]{
  color:var(--text-primary);
  background:var(--surface-glass-tint);
  box-shadow:var(--shadow-glass-soft);
}
.nav-links a:active{transform:scale(.96)}

@media (max-width:900px){
  .nav-links{display:none}
}

/* --------------------------------------------------------- icon button --- */
.icon-btn{
  inline-size:var(--control-height-sm);
  block-size:var(--control-height-sm);
  display:inline-grid;
  place-items:center;
  border-radius:var(--radius-pill);
  background:var(--surface-glass-tint);
  border:var(--border-glass-tint);
  box-shadow:var(--shadow-glass-soft);
  color:var(--text-primary);
  cursor:pointer;
  flex:0 0 auto;
  -webkit-backdrop-filter:blur(var(--blur-indicator));
  backdrop-filter:blur(var(--blur-indicator));
  transition:transform var(--duration-fast) var(--ease-liquid);
}
/* The system specifies press-scale, not colour darkening, as the only state. */
.icon-btn:active{transform:scale(.9)}

/* ------------------------------------------------------------- buttons --- */
.btn{
  height:var(--control-height-md);
  padding-inline:22px;
  border:none;
  cursor:pointer;
  border-radius:var(--radius-pill);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--space-2);
  font:var(--text-headline);
  letter-spacing:var(--tracking-tight);
  -webkit-backdrop-filter:blur(var(--blur-pill));
  backdrop-filter:blur(var(--blur-pill));
  transition:transform var(--duration-fast) var(--ease-liquid),
             box-shadow var(--duration-fast) var(--ease-settle);
}
.btn:active{transform:scale(.96)}
.btn-lg{height:var(--control-height-lg);padding-inline:28px}
.btn-sm{height:var(--control-height-sm);padding-inline:18px;font:var(--text-subhead)}

.btn-tint{
  background:var(--surface-glass-tint);
  border:var(--border-glass-tint);
  color:var(--text-on-tint);
  box-shadow:var(--shadow-glass-tint);
}
.btn-glass{
  background:var(--surface-glass);
  border:var(--border-glass);
  color:var(--text-primary);
  box-shadow:var(--shadow-glass-soft);
}
.btn-plain{
  background:transparent;
  border:none;
  color:var(--accent);
  box-shadow:none;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}
.btn .arrow{
  font-family:var(--font-mono);
  display:inline-block;
  transition:transform var(--duration-base) var(--ease-liquid);
}
.btn:hover .arrow{transform:translateY(2px)}

/* --------------------------------------------------------------- badge --- */
.badge{
  display:inline-flex;
  align-items:center;
  gap:var(--space-2);
  height:var(--control-height-sm);
  padding-inline:var(--space-4);
  border-radius:var(--radius-pill);
  background:var(--surface-glass-tint);
  border:var(--border-glass-tint);
  box-shadow:var(--shadow-glass-soft);
  font:var(--text-footnote);
  color:var(--text-primary);
  -webkit-backdrop-filter:blur(var(--blur-indicator));
  backdrop-filter:blur(var(--blur-indicator));
}
.dot{
  inline-size:8px;
  block-size:8px;
  border-radius:var(--radius-pill);
  background:var(--system-green);
  box-shadow:0 0 0 0 rgba(48,209,88,.5);
  animation:pulse 2.4s var(--ease-settle) infinite;
  flex:0 0 auto;
}
@keyframes pulse{
  70%{box-shadow:0 0 0 10px rgba(48,209,88,0)}
  100%{box-shadow:0 0 0 0 rgba(48,209,88,0)}
}

.chip{
  display:inline-flex;
  align-items:center;
  height:28px;
  padding-inline:var(--space-3);
  border-radius:var(--radius-pill);
  background:var(--surface-glass-tint);
  border:var(--border-glass-tint);
  font:var(--text-caption);
  font-family:var(--font-mono);
  color:var(--text-secondary);
  direction:ltr;
  white-space:nowrap;
}

/* ---------------------------------------------------------------- card --- */
.card{
  border-radius:var(--radius-card);
  padding:var(--space-8);
  background:var(--surface-glass);
  border:var(--border-glass);
  box-shadow:var(--shadow-glass);
  -webkit-backdrop-filter:blur(var(--blur-dock)) saturate(140%);
  backdrop-filter:blur(var(--blur-dock)) saturate(140%);
  transition:transform var(--duration-base) var(--ease-liquid),
             box-shadow var(--duration-base) var(--ease-settle);
}
[data-theme="scrolling-layered"] .card{
  -webkit-backdrop-filter:blur(var(--blur-header)) saturate(var(--saturate-header));
  backdrop-filter:blur(var(--blur-header)) saturate(var(--saturate-header));
}

/* ------------------------------------------------------ section header --- */
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:var(--space-2);
  font:var(--text-caption);
  font-family:var(--font-mono);
  color:var(--text-tertiary);
  direction:ltr;
  text-transform:uppercase;
  margin-block-end:var(--space-5);
}
.eyebrow::before{
  content:"";
  inline-size:24px;
  block-size:1px;
  background:currentColor;
  opacity:.5;
}

h1,h2,h3{margin:0;letter-spacing:var(--tracking-tight);text-wrap:balance}

.h-display{
  font:var(--text-large-title);
  font-size:clamp(38px,6.4vw,64px);
  line-height:1.12;
}
.h-section{
  font:var(--text-title1);
  font-size:clamp(28px,4vw,40px);
  line-height:1.18;
  margin-block-end:var(--space-4);
}
.h-card{font:var(--text-title3)}

.lede{
  font:var(--text-body);
  font-size:clamp(16px,1.6vw,19px);
  color:var(--text-secondary);
  max-width:62ch;
  margin-block:var(--space-5) 0;
  line-height:1.75;
}
.soft{color:var(--text-secondary)}
.mono{font-family:var(--font-mono);direction:ltr;unicode-bidi:isolate}

/* ---------------------------------------------------------------- hero --- */
/* Centred with auto margins rather than align-items:center. When the hero
   content is taller than the viewport (narrow widths, long Persian headings),
   align-items:center overflows equally at both ends and pushes the top of the
   hero up underneath the fixed nav. Auto margins collapse to zero instead of
   overflowing the start edge, so the 140px top padding always survives. */
.hero{
  min-height:100svh;
  display:flex;
  padding-block:140px var(--space-16);
}
/* No width here — this element also carries .wrap, which owns the measure. */
.hero-grid{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:var(--space-12);
  align-items:center;
  margin-block:auto;
}
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:var(--space-10)}
  .hero{min-height:auto;padding-block:132px var(--space-12)}
}

.hero h1 .accent-line{
  display:block;
  background:linear-gradient(120deg,var(--text-primary),var(--text-secondary));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-3);
  margin-block-start:var(--space-8);
}

/* code panel — a glass "window" standing in for the old terminal card */
.code-panel{
  border-radius:var(--radius-sheet);
  padding:0;
  overflow:hidden;
  background:var(--surface-glass);
  border:var(--border-glass);
  box-shadow:var(--shadow-glass);
  -webkit-backdrop-filter:blur(var(--blur-sheet)) saturate(140%);
  backdrop-filter:blur(var(--blur-sheet)) saturate(140%);
  direction:ltr;
}
.code-head{
  display:flex;
  align-items:center;
  gap:var(--space-2);
  padding:var(--space-4) var(--space-5);
  border-block-end:1px solid var(--glass-edge);
}
.code-head .lights{display:flex;gap:6px}
.code-head .lights i{
  inline-size:10px;block-size:10px;border-radius:var(--radius-pill);display:block;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.6);
}
.code-head .lights i:nth-child(1){background:var(--system-red)}
.code-head .lights i:nth-child(2){background:var(--system-yellow)}
.code-head .lights i:nth-child(3){background:var(--system-green)}
.code-head .file{
  font:var(--text-caption);
  font-family:var(--font-mono);
  color:var(--text-secondary);
  margin-inline-start:auto;
}
.code-body{
  margin:0;
  padding:var(--space-6) var(--space-5);
  font-family:var(--font-mono);
  font-size:13.5px;
  line-height:2;
  overflow-x:auto;
  color:var(--text-primary);
}
.code-body .k{color:var(--accent)}
.code-body .s{color:var(--system-green)}
.code-body .c{color:var(--text-tertiary)}
.code-body .p{color:var(--text-secondary)}

.avatar-row{
  display:flex;
  align-items:center;
  gap:var(--space-4);
  margin-block-start:var(--space-6);
  padding:var(--space-3);
  padding-inline-end:var(--space-6);
  border-radius:var(--radius-pill);
  background:var(--surface-glass-tint);
  border:var(--border-glass-tint);
  box-shadow:var(--shadow-glass-soft);
  -webkit-backdrop-filter:blur(var(--blur-pill));
  backdrop-filter:blur(var(--blur-pill));
  width:fit-content;
  max-width:100%;
}
.avatar-row img{
  inline-size:48px;block-size:48px;
  border-radius:var(--radius-pill);
  object-fit:cover;
  border:1px solid var(--glass-edge);
  flex:0 0 auto;
}
.avatar-row .who{display:flex;flex-direction:column;gap:2px;min-width:0}
.avatar-row .who b{font:var(--text-headline)}
.avatar-row .who span{font:var(--text-footnote);color:var(--text-secondary)}

.scroll-hint{
  margin-block-start:var(--space-12);
  display:inline-flex;
  align-items:center;
  gap:var(--space-2);
  font:var(--text-caption);
  font-family:var(--font-mono);
  color:var(--text-tertiary);
  direction:ltr;
}
.scroll-hint .chev{animation:bob 2s var(--ease-settle) infinite}
@keyframes bob{50%{transform:translateY(5px)}}

/* --------------------------------------------------------------- about --- */
.about-grid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:var(--space-12);
  align-items:start;
}
@media (max-width:900px){.about-grid{grid-template-columns:1fr;gap:var(--space-8)}}

.stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--space-4);
}
@media (max-width:520px){.stats{grid-template-columns:1fr}}
.stat{
  border-radius:var(--radius-control);
  padding:var(--space-6) var(--space-5);
  background:var(--surface-glass-tint);
  border:var(--border-glass-tint);
  box-shadow:var(--shadow-glass-soft);
  -webkit-backdrop-filter:blur(var(--blur-pill));
  backdrop-filter:blur(var(--blur-pill));
  text-align:center;
}
.stat b{display:block;font:var(--text-title2);font-size:clamp(26px,3.4vw,34px)}
.stat span{display:block;font:var(--text-footnote);color:var(--text-secondary);margin-block-start:var(--space-2)}

/* ------------------------------------------------------------ projects --- */
.projects{display:grid;gap:var(--space-6)}

.project{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:var(--space-6);
  align-items:start;
}
@media (max-width:760px){
  .project{grid-template-columns:auto 1fr;gap:var(--space-4)}
  .project .go{grid-column:2;justify-self:start}
}
.project .idx{
  font:var(--text-caption);
  font-family:var(--font-mono);
  color:var(--text-tertiary);
  padding-block-start:6px;
  direction:ltr;
}
.project .title-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--space-3);
  margin-block-end:var(--space-3);
}
.project p{margin:0 0 var(--space-5);color:var(--text-secondary);line-height:1.75;max-width:60ch}
.project .chips{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.project .links{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-block-start:var(--space-5)}
.go{
  inline-size:44px;block-size:44px;
  display:inline-grid;place-items:center;
  border-radius:var(--radius-pill);
  background:var(--surface-glass-tint);
  border:var(--border-glass-tint);
  box-shadow:var(--shadow-glass-soft);
  font-family:var(--font-mono);
  color:var(--text-primary);
  flex:0 0 auto;
  transition:transform var(--duration-base) var(--ease-liquid);
}
.project:hover .go{transform:translateY(-3px)}
.go:active{transform:scale(.9)}

/* featured project gets a bit more room + a shot */
.project-featured{grid-template-columns:1fr;gap:var(--space-6)}
.shot{
  border-radius:var(--radius-control);
  overflow:hidden;
  border:1px solid var(--glass-edge);
  box-shadow:var(--shadow-glass-soft);
  background:var(--surface-glass-tint);
}
.shot img{width:100%;height:auto}

/* -------------------------------------------------------------- skills --- */
.skills{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:var(--space-4);
}
.skill{
  border-radius:var(--radius-card);
  padding:var(--space-6);
  background:var(--surface-glass);
  border:var(--border-glass);
  box-shadow:var(--shadow-glass-soft);
  -webkit-backdrop-filter:blur(var(--blur-pill)) saturate(140%);
  backdrop-filter:blur(var(--blur-pill)) saturate(140%);
}
.skill .n{
  font:var(--text-caption);
  font-family:var(--font-mono);
  color:var(--text-tertiary);
  display:block;
  margin-block-end:var(--space-3);
  direction:ltr;
}
.skill h3{font:var(--text-title3);margin-block-end:var(--space-3)}
.skill p{margin:0;font:var(--text-subhead);color:var(--text-secondary);line-height:1.9;direction:ltr;text-align:start}

/* ---------------------------------------------------------------- game --- */
.game-shell{
  border-radius:var(--radius-sheet);
  padding:var(--space-6);
  background:var(--surface-glass);
  border:var(--border-glass);
  box-shadow:var(--shadow-glass);
  -webkit-backdrop-filter:blur(var(--blur-sheet)) saturate(140%);
  backdrop-filter:blur(var(--blur-sheet)) saturate(140%);
}
.hud{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-3);
  margin-block-end:var(--space-5);
}
.hud .cell{
  flex:1 1 110px;
  border-radius:var(--radius-control);
  padding:var(--space-3) var(--space-4);
  background:var(--surface-glass-tint);
  border:var(--border-glass-tint);
  box-shadow:var(--shadow-glass-soft);
  text-align:center;
}
.hud .cell span{
  display:block;
  font:var(--text-caption);
  font-family:var(--font-mono);
  color:var(--text-tertiary);
  direction:ltr;
}
.hud .cell b{display:block;font:var(--text-title3);margin-block-start:var(--space-1)}

.stage{
  position:relative;
  border-radius:var(--radius-control);
  overflow:hidden;
  border:1px solid var(--glass-edge);
  background:linear-gradient(160deg,rgba(255,255,255,.35),rgba(255,255,255,.08));
  aspect-ratio:16/9;
}
[data-theme="scrolling-layered"] .stage{
  background:linear-gradient(160deg,rgba(45,45,50,.55),rgba(20,20,24,.65));
}
.stage canvas{display:block;width:100%;height:100%;touch-action:none}

.stage-overlay{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  text-align:center;
  padding:var(--space-6);
  gap:var(--space-4);
  background:rgba(255,255,255,.28);
  -webkit-backdrop-filter:blur(var(--blur-sheet));
  backdrop-filter:blur(var(--blur-sheet));
  transition:opacity var(--duration-base) var(--ease-settle);
}
[data-theme="scrolling-layered"] .stage-overlay{background:rgba(11,11,13,.45)}
.stage-overlay[hidden]{display:none}
.stage-overlay .inner{display:grid;gap:var(--space-4);justify-items:center}

.keys{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-3);
  margin-block-start:var(--space-5);
  justify-content:center;
}
.key{
  display:inline-flex;
  align-items:center;
  gap:var(--space-2);
  font:var(--text-caption);
  color:var(--text-secondary);
}
.key kbd{
  min-inline-size:30px;
  block-size:30px;
  padding-inline:var(--space-2);
  display:inline-grid;
  place-items:center;
  border-radius:10px;
  background:var(--surface-glass-tint);
  border:var(--border-glass-tint);
  box-shadow:var(--shadow-glass-soft);
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--text-primary);
}

.touch-pad{
  display:none;
  gap:var(--space-3);
  margin-block-start:var(--space-5);
  justify-content:center;
}
@media (pointer:coarse){.touch-pad{display:flex}}
.touch-pad .icon-btn{inline-size:var(--control-height-lg);block-size:var(--control-height-lg);font-size:20px}

/* ------------------------------------------------------------- contact --- */
.contact-card{
  border-radius:var(--radius-sheet);
  padding:clamp(var(--space-8),5vw,var(--space-16));
  text-align:center;
  background:var(--surface-glass);
  border:var(--border-glass);
  box-shadow:var(--shadow-glass);
  -webkit-backdrop-filter:blur(var(--blur-sheet)) saturate(140%);
  backdrop-filter:blur(var(--blur-sheet)) saturate(140%);
}
.contact-card .lede{margin-inline:auto}
.contact-actions{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-3);
  justify-content:center;
  margin-block-start:var(--space-8);
}

/* -------------------------------------------------------------- footer --- */
.footer{
  padding-block:var(--space-10) var(--space-12);
  border-block-start:1px solid var(--glass-edge);
  margin-block-start:var(--space-8);
}
.footer-inner{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-4);
  align-items:center;
  justify-content:space-between;
}
.footer small{font:var(--text-footnote);color:var(--text-secondary)}

/* --------------------------------------------------------------- toast --- */
.toast{
  position:fixed;
  inset-block-end:var(--space-6);
  inset-inline:0;
  z-index:80;
  display:flex;
  justify-content:center;
  padding-inline:var(--space-4);
  pointer-events:none;
  opacity:0;
  transform:translateY(12px);
  transition:opacity var(--duration-base) var(--ease-settle),
             transform var(--duration-base) var(--ease-liquid);
}
.toast.is-open{opacity:1;transform:translateY(0)}
.toast .body{
  display:inline-flex;
  align-items:center;
  gap:var(--space-3);
  height:var(--control-height-md);
  padding-inline:var(--space-6);
  border-radius:var(--radius-pill);
  background:var(--surface-glass);
  border:var(--border-glass);
  box-shadow:var(--shadow-glass);
  font:var(--text-subhead);
  -webkit-backdrop-filter:blur(var(--blur-sheet));
  backdrop-filter:blur(var(--blur-sheet));
}

/* --------------------------------------------------------- reveal-in ----- */
.reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity var(--duration-slow) var(--ease-settle),
             transform var(--duration-slow) var(--ease-liquid);
}
.reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none}
}

/* Fallback: if backdrop-filter is unsupported, fall back to opaque surfaces
   rather than unreadable transparent ones. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .glass,.glass-tint,.card,.skill,.stat,.badge,.chip,.btn-tint,.btn-glass,
  .nav-inner,.code-panel,.game-shell,.contact-card,.avatar-row,.toast .body{
    background:rgba(255,255,255,.92);
  }
  [data-theme="scrolling-layered"] .glass,
  [data-theme="scrolling-layered"] .glass-tint,
  [data-theme="scrolling-layered"] .card,
  [data-theme="scrolling-layered"] .skill,
  [data-theme="scrolling-layered"] .stat,
  [data-theme="scrolling-layered"] .badge,
  [data-theme="scrolling-layered"] .chip,
  [data-theme="scrolling-layered"] .btn-tint,
  [data-theme="scrolling-layered"] .btn-glass,
  [data-theme="scrolling-layered"] .nav-inner,
  [data-theme="scrolling-layered"] .code-panel,
  [data-theme="scrolling-layered"] .game-shell,
  [data-theme="scrolling-layered"] .contact-card,
  [data-theme="scrolling-layered"] .avatar-row,
  [data-theme="scrolling-layered"] .toast .body{
    background:rgba(28,28,32,.95);
  }
}