@import "cards.css";
@import "pages.css";
@import "animations.css";

/* ========================================================================
   1. TOKENS
   ======================================================================== */
:root {
  color-scheme: light;

  /* Page backgrounds */
  --color-light-background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  --color-dark-background:  linear-gradient(to bottom, #030712 0%, #111827 50%, #1E1B4B 100%);

  --color-bg-solid: #F1F4F8;
  --color-bg-blob:  #a855f7;

  /* Text (Light defaults) */
  --color-text-primary:       #334155;
  --color-text-primary-hover: #0F172A;
  --color-text-headlines:     #1E293B;
  --color-text-subtile:       #64748B;

  /* Surface / Glass */
  --surface-glass:        rgba(255, 255, 255, 0.18);
  --surface-glass-shadow: 0 8px 32px rgba(15, 23, 42, 0.08),
                          inset 0 1px 0 rgba(255, 255, 255, 0.6);
  --surface-glass-shine:  linear-gradient(var(--shine, to bottom),
                            rgba(255,255,255,.9)  0%,
                            rgba(255,255,255,.05) 40%,
                            rgba(255,255,255,.05) 60%,
                            rgba(255,255,255,.5)  100%);
  --surface-glass-fallback: rgba(255, 255, 255, 0.85);

  /* Borders / Dividers */
  --border-subtle: rgba(15, 23, 42, 0.12);
  --border-strong: rgba(15, 23, 42, 0.22);

  /* Icon Button */
  --btn-icon-bg:           transparent;
  --btn-icon-bg-hover:     rgba(15, 23, 42, 0.10);
  --btn-icon-border:       rgba(15, 23, 42, 0.12);
  --btn-icon-border-hover: rgba(15, 23, 42, 0.22);
  --btn-icon-color:        var(--color-text-headlines);

  /* Card */
  --card-bg:     rgba(148, 163, 184, 0.25);
  --card-border: rgba(255, 255, 255, 0.7);

  /* Page Transition */
  --flow-swallow-gradient: linear-gradient(135deg,
                            #ede9fe 0%,
                            #ddd6fe 50%,
                            #c4b5fd 100%);

  /* Typo scaling */
  --font-calc: calc(((100vw - 1512px) / 302.4));
}

[data-theme="dark"] {
  color-scheme: dark;

  --color-bg-solid: #111827;
  --color-bg-blob:  #8b5cf6;

  --color-text-primary:       rgba(255, 255, 255, 0.75);
  --color-text-primary-hover: #ffffff;
  --color-text-headlines:     rgba(255, 255, 255, 0.85);
  --color-text-subtile:       rgba(255, 255, 255, 0.45);

  --surface-glass:        rgba(255, 255, 255, 0.08);
  --surface-glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.45),
                          inset 0 1px 0 rgba(255, 255, 255, 0.12);
  --surface-glass-shine:  linear-gradient(var(--shine, to bottom),
                            rgba(255,255,255,.35) 0%,
                            rgba(255,255,255,.04) 40%,
                            rgba(255,255,255,.04) 60%,
                            rgba(255,255,255,.18) 100%);
  --surface-glass-fallback: rgba(30, 27, 75, 0.85);

  --border-subtle: rgba(255, 255, 255, 0.2);
  --border-strong: rgba(255, 255, 255, 0.35);

  --btn-icon-bg-hover:     rgba(255, 255, 255, 0.20);
  --btn-icon-border:       rgba(255, 255, 255, 0.20);
  --btn-icon-border-hover: rgba(255, 255, 255, 0.35);
  --btn-icon-color:        var(--color-text-primary);

  --card-bg:     rgba(255, 255, 255, 0.06);
  --card-border: rgba(255, 255, 255, 0.10);

  --flow-swallow-gradient: linear-gradient(135deg,
                            #2a1f5e 0%,
                            #1E1B4B 50%,
                            #0a0820 100%);
}


/* ========================================================================
   2. RESET & BASE
   ======================================================================== */
*, *::before, *::after { box-sizing: border-box; }
*                      { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  font-size: max(10px, calc(100vw / 1512 * 10 - var(--font-calc)));
  /* Gradient fallback: visible in Safari if body::before compositor layer fails */
  background: var(--color-light-background);
  scrollbar-gutter: stable;
  /* Prevent Safari rubber-band overscroll revealing background elements */
  overscroll-behavior: none;
  /* Horizontal clip on html so position:fixed children keep viewport reference */
  overflow-x: hidden;
}

/* Dark-mode fallback on html (same principle as light mode above) */
html[data-theme="dark"] { background: var(--color-dark-background); }

body {
  position: relative;
  /* transparent: html gradient shows through when body::before fails in Safari */
  background-color: transparent;
  line-height: 1;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--color-text-primary);
  min-height: 100vh;
  /* clip (not hidden): prevents horizontal overflow & keeps mobile breakpoints
     intact without creating a scroll container that would break position:fixed */
  overflow-x: clip;
  overscroll-behavior: none;
  isolation: isolate;
}

a              { color: inherit; text-decoration: none; }
a:visited      { color: inherit; }
button         { background: none; border: 0; color: inherit; font: inherit; cursor: pointer; }
ul, ol         { list-style: none; }
svg            { max-width: 100%; display: block; }

/* Keyboard focus — consistent, visible ring across all interactive controls.
   (Custom rings already exist on .post-card / .contact-palette-item.) */
:focus-visible {
  outline: 2px solid var(--color-text-primary-hover);
  outline-offset: 3px;
  border-radius: 4px;
}
.nav-mode-btn:focus-visible,
.nav-hamburger:focus-visible,
.stack-dot:focus-visible,
.nav-logo-link:focus-visible { outline-offset: 4px; }


/* ========================================================================
   3. LAYOUT
   ======================================================================== */
html {
  --padgut:     calc(var(--gutgrid) + var(--padgrid));
  --sizegrid:   calc(100vw - (var(--padgut) * 2));
  --padgut-s:   calc(var(--gutgrid) + var(--padgrid-s));
  --sizegrid-s: calc(100vw - (var(--padgut-s) * 2));
}

@media (width > 1194px) {
  html { --padgrid: 5.2rem; --padgrid-s: 21rem; --gutgrid: 0.8rem; }
}
@media (width <= 1194px) {
  html { --padgrid: 16px; --padgrid-s: 16px; --gutgrid: 4px; }
}
@media (540px < width <= 1194px) and (min-aspect-ratio: 1.2) {
  html {
    --padgrid:   calc(8px + 12 * (100vw - 375px) / 819);
    --padgrid-s: calc(8px + 12 * (100vw - 375px) / 819);
    --gutgrid:   calc(4px + 4  * (100vw - 375px) / 819);
  }
}
@media (max-aspect-ratio: 1.2) and (width <= 1194px) {
  html { --padgrid: 16px; --padgrid-s: 16px; --gutgrid: 4px; }
}

.grid-vw   { width: 100%; padding-inline: var(--padgut); }
.grid-vw-s { width: 100%; padding-inline: var(--padgut-s); }
.grid      { width: 100%; max-width: var(--sizegrid); margin-inline: auto; }

.wrapper { position: relative; width: 100%; min-height: 100vh; }
main     { position: relative; }
section  { position: relative; z-index: 2; }


/* ========================================================================
   4. BACKGROUND
   ======================================================================== */
body::before,
body::after {
  content: "";
  position: fixed;
  z-index: -1;
  pointer-events: none;
}

/* Gradient */
body::before {
  inset: -25%;
  background: var(--color-light-background);
  background-size: 200% 200%;
  animation: bgFloat 20s ease-in-out infinite;
}

/* Blob — oval, centered behind hero, parallax via --blob-scroll */
body::after {
  top: calc(38vh + 3rem + var(--blob-scroll, 0px));
  left: 50%;
  width: 75vw;
  height: 45vw;
  max-width: 960px;
  max-height: 560px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center,
                var(--color-bg-blob) 0%,
                transparent 65%);
  filter: blur(80px);
  opacity: .35;
  transform: translate(-50%, -50%);
  animation: blobSway 18s ease-in-out infinite;
}

/* FX layer */
.bg-fx {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

/* Dark mode: sparse large stars */
.bg-fx-stars {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .6s ease;
}
.bg-fx-stars::before,
.bg-fx-stars::after,
.bg-fx-stars > span {
  content: "";
  position: absolute;
  inset: 0;
  background-repeat: repeat;
}
.bg-fx-stars::before {
  background-image:
    radial-gradient(1.5px 1.5px at 80px 60px,   #fff, transparent 50%),
    radial-gradient(1.5px 1.5px at 280px 180px, rgba(255,255,255,.85), transparent 50%);
  background-size: 420px 380px;
  animation: starsTwinkle 4s ease-in-out infinite;
}
.bg-fx-stars::after {
  background-image:
    radial-gradient(2.5px 2.5px at 150px 100px, #fff, transparent 50%),
    radial-gradient(2px   2px   at 380px 320px, rgba(255,255,255,.9), transparent 50%);
  background-size: 520px 460px;
  animation: starsTwinkle 7s ease-in-out infinite 1.5s;
}
.bg-fx-stars > span {
  background-image:
    radial-gradient(3px 3px at 220px 240px, #fff, transparent 50%);
  background-size: 680px 600px;
  animation: starsTwinkle 10s ease-in-out infinite 3s;
}

/* Light mode: floating pastel bokeh */
.bg-fx-bokeh {
  position: absolute;
  inset: 0;
  opacity: 1;
  transition: opacity .6s ease;
  background-image:
    radial-gradient(circle at 15% 25%, rgba(196, 181, 253, .55) 0%, transparent 14%),
    radial-gradient(circle at 82% 18%, rgba(251, 207, 232, .55) 0%, transparent 16%),
    radial-gradient(circle at 25% 78%, rgba(186, 230, 253, .55) 0%, transparent 18%),
    radial-gradient(circle at 75% 70%, rgba(221, 214, 254, .55) 0%, transparent 15%),
    radial-gradient(circle at 50% 92%, rgba(252, 231, 243, .45) 0%, transparent 14%),
    radial-gradient(circle at 92% 45%, rgba(199, 210, 254, .5)  0%, transparent 12%);
  filter: blur(40px);
  animation: bokehFloat 18s ease-in-out infinite;
}

/* Zone gradient overlay: cool blue-steel left — warm amber + forest green right */
.bg-fx-zones {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(ellipse 55% 70% at  8% 62%, rgba(120, 155, 190, .22) 0%, transparent 100%),
    radial-gradient(ellipse 50% 55% at 90% 28%, rgba(196, 164, 124, .16) 0%, transparent 100%),
    radial-gradient(ellipse 38% 44% at 80% 80%, rgba(107, 173, 146, .13) 0%, transparent 100%);
  animation: zonesFadeIn 2.4s ease .4s forwards;
}

/* Grain / Film texture — applies sitewide */
.bg-grain {
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  opacity: .026;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 220px 220px;
  animation: grainShift 8s steps(10) infinite;
}

/* Dark mode overrides */
[data-theme="dark"] body::before    { background: var(--color-dark-background); background-size: 200% 200%; }
[data-theme="dark"] body::after     { opacity: .55; filter: blur(70px); }
[data-theme="dark"] .bg-fx-stars    { opacity: .95; }
[data-theme="dark"] .bg-fx-bokeh    { opacity: 0; }
[data-theme="dark"] .bg-grain       { opacity: .042; }

/* Landing dark mode — atmospheric night sky */
[data-theme="dark"] body.page-landing {
  --color-text-primary:       rgba(255, 255, 255, 0.72);
  --color-text-primary-hover: #ffffff;
  --color-text-headlines:     rgba(255, 255, 255, 0.90);
  --color-text-subtile:       rgba(255, 255, 255, 0.42);
  --surface-glass:            rgba(255, 255, 255, 0.08);
  --surface-glass-shadow:     0 8px 32px rgba(0, 0, 0, 0.45),
                              inset 0 1px 0 rgba(255, 255, 255, 0.12);
  --surface-glass-shine:      linear-gradient(var(--shine, to bottom),
                                rgba(255,255,255,.35) 0%,
                                rgba(255,255,255,.04) 40%,
                                rgba(255,255,255,.04) 60%,
                                rgba(255,255,255,.18) 100%);
  --border-subtle:            rgba(255, 255, 255, 0.18);
  --border-strong:            rgba(255, 255, 255, 0.32);
  --btn-icon-bg-hover:        rgba(255, 255, 255, 0.12);
  --btn-icon-border:          rgba(255, 255, 255, 0.20);
  --btn-icon-border-hover:    rgba(255, 255, 255, 0.35);
  --btn-icon-color:           rgba(255, 255, 255, 0.72);
}
[data-theme="dark"] body.page-landing::before {
  background: linear-gradient(135deg, #0b1120 0%, #111827 55%, #160b1f 100%);
  background-size: 200% 200%;
  animation: bgFloat 20s ease-in-out infinite;
}
[data-theme="dark"] body.page-landing::after      { opacity: .55; filter: blur(70px); }
[data-theme="dark"] body.page-landing .bg-fx-stars { opacity: .80; }
[data-theme="dark"] body.page-landing .bg-fx-bokeh { opacity: 0 !important; }


/* ========================================================================
   5. NAVIGATION
   ======================================================================== */
.nav {
  position: fixed;
  top: 2rem;
  left: 50%;
  z-index: 55;
  transform: translateX(-50%);
  width: min(calc(100% - 3.2rem), 58rem);
  --shine: 156deg;
  transition: .6s transform cubic-bezier(.55, 0, .1, 1);
}

/* Main pill bar */
.nav-bar {
  --radius: 9999px;
  position: relative;
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0.65rem 0.65rem 0.65rem 1.2rem;
  border-radius: var(--radius);
  background: var(--surface-glass);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  box-shadow: var(--surface-glass-shadow);
}
.nav-bar::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: var(--radius);
  border: 1.5px solid transparent;
  background: var(--surface-glass-shine) border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box,
                linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask: linear-gradient(#fff 0 0) padding-box,
        linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
}
@supports not ((backdrop-filter: blur(5px)) or (-webkit-backdrop-filter: blur(5px))) {
  .nav-bar { background: var(--surface-glass-fallback); }
}

/* Logo */
.nav-logo {
  flex-shrink: 0;
  display: inline-flex;
  margin: 0;
}
.nav-logo-link {
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-primary);
  transition: .45s color cubic-bezier(.55, 0, .1, 1);
}
.nav-logo-link svg path { fill: currentColor; }
@media (hover: hover) {
  .nav-logo-link:hover { color: var(--color-text-primary-hover); }
}

/* Links */
.nav-links {
  display: flex;
  align-items: center;
  gap: 2.4rem;
  flex: 1;
  justify-content: center;
}
.nav-link,
.nav-link:visited {
  font-size: max(1.4rem, 14px);
  line-height: 1;
  font-weight: 600;
  color: var(--color-text-primary);
  transition: .45s color cubic-bezier(.55, 0, .1, 1);
}
/* Underline — grows from center on hover */
.nav-link { position: relative; }
.nav-link::after {
  content: '';
  position: absolute;
  bottom: -.3rem;
  left: 50%; right: 50%;
  height: 1px;
  border-radius: 10rem;
  background: currentColor;
  opacity: .40;
  transition: left  .32s cubic-bezier(.22, 1, .36, 1),
              right .32s cubic-bezier(.22, 1, .36, 1);
}
@media (hover: hover) {
  .nav-link:hover        { color: var(--color-text-primary-hover); }
  .nav-link:hover::after { left: 8%; right: 8%; }
}

/* Actions (theme toggle + divider) */
.nav-actions {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.nav-divider {
  width: 1px;
  height: 1.6rem;
  background: var(--border-subtle);
  margin-inline: 0.4rem;
}
.nav-mode-btn {
  width: 3.2rem;
  height: 3.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--btn-icon-color);
  font-size: max(1.4rem, 14px);
  cursor: pointer;
  transition: background .3s;
}
@media (hover: hover) {
  .nav-mode-btn:hover { background: var(--btn-icon-bg-hover); }
}

/* Hamburger */
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 50%;
  border: 1.5px solid var(--btn-icon-border);
  background: var(--btn-icon-bg);
  color: var(--btn-icon-color);
  cursor: pointer;
  transition: background .3s, border-color .3s;
  flex-shrink: 0;
}
.nav-hamburger .bar {
  display: block;
  width: 1.4rem;
  height: 1.5px;
  background: currentColor;
  border-radius: 2px;
  transform-origin: center;
  transition: transform .35s cubic-bezier(.55, 0, .1, 1),
              opacity .25s ease;
}
.nav-hamburger[aria-expanded="true"] .bar:nth-child(1) { transform: translateY(3.25px) rotate(45deg); }
.nav-hamburger[aria-expanded="true"] .bar:nth-child(2) { transform: translateY(-3.25px) rotate(-45deg); }
@media (hover: hover) {
  .nav-hamburger:hover {
    background: var(--btn-icon-bg-hover);
    border-color: var(--btn-icon-border-hover);
  }
}

/* Mobile dropdown */
.nav-mobile {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin-top: 0; /* no gap in closed state — keeps nav height stable */
  border-radius: 2rem;
  background: var(--surface-glass);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  box-shadow: var(--surface-glass-shadow);
  overflow: hidden;
  max-height: 0;
  padding: 0 0.8rem;
  opacity: 0;
  pointer-events: none;
  transition: max-height .4s cubic-bezier(.55, 0, .1, 1),
              opacity .3s ease,
              padding .35s cubic-bezier(.55, 0, .1, 1),
              margin-top .35s cubic-bezier(.55, 0, .1, 1);
}
.nav-mobile.is-open {
  max-height: 24rem;
  padding: 0.8rem;
  margin-top: 0.8rem;
  opacity: 1;
  pointer-events: auto;
}
.nav-mobile-link,
.nav-mobile-link:visited {
  display: block;
  padding: 1.2rem 1.6rem;
  border-radius: 1.4rem;
  font-size: max(1.5rem, 15px);
  font-weight: 600;
  color: var(--color-text-primary);
  transition: background .3s ease, color .3s ease;
}
@media (hover: hover) {
  .nav-mobile-link:hover {
    background: var(--btn-icon-bg-hover);
    color: var(--color-text-primary-hover);
  }
}

/* Dark mode glass */
[data-theme="dark"] .nav-bar {
  background: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(40px) saturate(180%) brightness(1.10);
  -webkit-backdrop-filter: blur(40px) saturate(180%) brightness(1.10);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.44),
              0 1px 0 rgba(255, 255, 255, 0.16) inset;
}
[data-theme="dark"] .nav-bar::after {
  background: linear-gradient(156deg,
                rgba(255, 255, 255, 0.22) 0%,
                rgba(255, 255, 255, 0.04) 40%,
                rgba(255, 255, 255, 0.04) 60%,
                rgba(255, 255, 255, 0.12) 100%) border-box;
}
[data-theme="dark"] .nav-mobile {
  background: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(40px) saturate(180%) brightness(1.10);
  -webkit-backdrop-filter: blur(40px) saturate(180%) brightness(1.10);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.44),
              0 1px 0 rgba(255, 255, 255, 0.14) inset;
}


/* ========================================================================
   6. BUTTONS
   ======================================================================== */
.btn {
  --radius: 4rem;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  padding: 1.2rem 2.2rem;
  border-radius: var(--radius);
  background: var(--surface-glass);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: var(--surface-glass-shadow);
  border: 2px solid transparent;
  color: var(--color-text-primary);
  font-size: max(1.4rem, 14px);
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: color     .45s cubic-bezier(.55, 0, .1, 1),
              background .3s cubic-bezier(.55, 0, .1, 1),
              transform  .35s cubic-bezier(.22, 1, .36, 1),
              box-shadow .35s ease;
}
.btn::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: var(--radius);
  border: 2px solid transparent;
  background: var(--surface-glass-shine) border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box,
                linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask: linear-gradient(#fff 0 0) padding-box,
        linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
}
@supports not ((backdrop-filter: blur(5px)) or (-webkit-backdrop-filter: blur(5px))) {
  .btn { background: var(--surface-glass-fallback); }
}
@media (hover: hover) {
  .btn:hover {
    color: var(--color-text-primary-hover);
    background: var(--surface-glass);
    transform: scale(1.025);
    box-shadow: 0 0 30px rgba(255, 255, 255, .05);
  }
}

/* Ghost variant */
.btn-ghost {
  background: transparent;
  box-shadow: none;
  border: 1.5px solid var(--border-strong);
  font-weight: 600;
}
.btn-ghost::after { display: none; }
@media (hover: hover) {
  .btn-ghost:hover { background: var(--btn-icon-bg-hover); }
}



/* ========================================================================
   11. CONTACT PALETTE
   ======================================================================== */

/* Overlay wrapper */
.contact-palette {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: clamp(8rem, 18vh, 14rem);
  padding-inline: 1.6rem;
  pointer-events: none;
  visibility: hidden;
}
.contact-palette.is-open {
  pointer-events: auto;
  visibility: visible;
}

/* Backdrop */
.contact-palette-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .50);
  backdrop-filter: blur(7px) saturate(120%);
  -webkit-backdrop-filter: blur(7px) saturate(120%);
  opacity: 0;
  transition: opacity .22s ease;
}
.contact-palette.is-open .contact-palette-backdrop { opacity: 1; }

/* Panel */
.contact-palette-panel {
  position: relative;
  z-index: 1;
  width: clamp(38rem, 88vw, 52rem);
  border-radius: 2rem;
  background: var(--surface-glass);
  backdrop-filter: blur(28px) saturate(200%);
  -webkit-backdrop-filter: blur(28px) saturate(200%);
  border: 0.5px solid var(--card-border);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .06) inset,
    0 32px 80px rgba(0, 0, 0, .54),
    0 8px 24px rgba(0, 0, 0, .34);
  overflow: hidden;
  transform: scale(.96) translateY(-16px);
  opacity: 0;
  transition:
    transform .3s cubic-bezier(.22, 1, .36, 1),
    opacity .25s ease;
}
.contact-palette.is-open .contact-palette-panel {
  transform: scale(1) translateY(0);
  opacity: 1;
}
@supports not ((backdrop-filter: blur(5px)) or (-webkit-backdrop-filter: blur(5px))) {
  .contact-palette-panel { background: var(--surface-glass-fallback); }
}

/* Header */
.contact-palette-header {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 1.6rem 2rem;
  border-bottom: 1px solid var(--border-subtle);
}
.contact-palette-header-icon {
  font-size: 1.8rem;
  color: var(--color-text-subtile);
}
.contact-palette-header-title {
  flex: 1;
  font-size: max(1.25rem, 11px);
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--color-text-subtile);
}
.contact-palette-header-esc {
  font: inherit;
  font-size: max(1.1rem, 10px);
  font-weight: 600;
  line-height: 1.4;
  color: var(--color-text-subtile);
  background: var(--border-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: .45rem;
  padding: .25rem .65rem;
  cursor: pointer;
  transition: opacity .18s ease;
}
.contact-palette-header-esc:hover { opacity: .6; }

/* Channel list */
.contact-palette-list {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: .3rem;
}
.contact-palette-item {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  padding: 1.1rem 1.2rem;
  border-radius: 1.2rem;
  color: var(--color-text-primary);
  text-decoration: none;
  transition: background .18s ease, transform .18s ease;
}
@media (hover: hover) {
  .contact-palette-item:hover {
    background: var(--border-subtle);
    transform: translateX(3px);
  }
  .contact-palette-item:hover .contact-palette-arrow {
    opacity: 1;
    transform: translateX(0);
  }
}
.contact-palette-item:focus-visible {
  outline: 2px solid rgba(168, 85, 247, .55);
  outline-offset: -2px;
  background: var(--border-subtle);
}
.contact-palette-item:focus-visible .contact-palette-arrow {
  opacity: 1;
  transform: translateX(0);
}

/* Icon bubble */
.contact-palette-icon {
  display: grid;
  place-items: center;
  width: 4.2rem;
  height: 4.2rem;
  border-radius: 1rem;
  flex: none;
  font-size: 2rem;
}
.contact-palette-item--mail      .contact-palette-icon { background: radial-gradient(circle at 35% 30%, rgba(168, 85, 247, .36), rgba(120, 80, 200, .18)); color: #a855f7; }
.contact-palette-item--instagram .contact-palette-icon { background: radial-gradient(circle at 35% 30%, rgba(225, 80, 160, .36), rgba(245, 160, 80, .22)); color: #e1509c; }
.contact-palette-item--paypal    .contact-palette-icon { background: radial-gradient(circle at 35% 30%, rgba(0, 130, 200, .34), rgba(0, 90, 175, .20)); color: #0082c8; }
.contact-palette-item--github    .contact-palette-icon { background: radial-gradient(circle at 35% 30%, rgba(150, 160, 180, .32), rgba(80, 90, 110, .18)); color: var(--color-text-primary); }

/* Text info */
.contact-palette-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: .2rem;
  min-width: 0;
}
.contact-palette-label {
  font-size: max(1.5rem, 14px);
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--color-text-headlines);
}
.contact-palette-value {
  font-size: max(1.2rem, 11px);
  color: var(--color-text-subtile);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Arrow — slides in on hover / focus */
.contact-palette-arrow {
  font-size: 1.6rem;
  color: var(--color-text-subtile);
  flex: none;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity .18s ease, transform .18s ease;
}

/* Footer — availability chips */
.contact-palette-footer {
  display: flex;
  gap: .8rem;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  padding: 1.1rem 1.6rem 1.5rem;
  border-top: 1px solid var(--border-subtle);
}
.contact-palette-avail-chip {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-size: max(1.15rem, 10.5px);
  font-weight: 700;
  letter-spacing: .01em;
  color: #fff;
  white-space: nowrap;
  padding: .4rem .9rem;
  border-radius: 10rem;
  background: color-mix(in srgb, var(--c) 68%, transparent);
}
.contact-palette-avail-chip--dev    { --c: #5a8ab4; }
.contact-palette-avail-chip--ride   { --c: #3a9e78; }
.contact-palette-avail-chip--coffee { --c: #b8893a; }

/* Mini-orbit indicator (used in footer chips) */
.avail-orbit { position: relative; width: 1.8rem; height: 1.8rem; flex: none; }
.avail-orbit::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid var(--c);
  opacity: .32;
}
.avail-orbit-spin {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  animation: aboutOrbit 2.8s linear infinite;
}
.avail-orbit-spin::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: var(--c);
  box-shadow: 0 0 7px var(--c);
}
/* Footer: scaled down orbit with white ring + dot on colored background */
.contact-palette-footer .avail-orbit { width: 1.3rem; height: 1.3rem; }
.contact-palette-footer .avail-orbit::before { border-color: rgba(255, 255, 255, .55); opacity: 1; }
.contact-palette-footer .avail-orbit-spin::after { width: 4px; height: 4px; background: #fff; box-shadow: 0 0 5px rgba(255,255,255,.7); }

/* Light mode overrides */
[data-theme="light"] .contact-palette-backdrop { background: rgba(15, 23, 42, .38); }
[data-theme="light"] .contact-palette-panel {
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(24px) saturate(130%);
  -webkit-backdrop-filter: blur(24px) saturate(130%);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .70) inset,
    0 32px 80px rgba(0, 0, 0, .16),
    0 8px 24px rgba(0, 0, 0, .10);
}

/* Mobile — bottom sheet */
@media (width <= 600px) {
  .contact-palette {
    align-items: flex-end;
    padding-top: 0;
    padding-inline: 0;
  }
  .contact-palette-panel {
    width: 100%;
    border-radius: 2rem 2rem 0 0;
    transform: translateY(24px);
    max-height: 86dvh;
    overflow-y: auto;
  }
  .contact-palette.is-open .contact-palette-panel { transform: translateY(0); }
  .contact-palette-footer { gap: 1rem; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .contact-palette-panel,
  .contact-palette-backdrop { transition: none; }
  .avail-orbit-spin { animation: none; }
}


/* ========================================================================
   12. PAGE TRANSITION
   ======================================================================== */

/* Nav / logo: quick content fade */
body.is-transitioning .wrapper {
  transition: opacity .25s ease;
  opacity: 0;
}

/* CTA buttons: scale-out + fade */
body.is-zooming .wrapper {
  transition: opacity .25s ease, transform .25s cubic-bezier(.4, 0, .2, 1);
  opacity: 0;
  transform: scale(1.04);
}


/* ========================================================================
   13. NAV VISIBILITY FIX
   ── animations.css is @imported before this file's own rules, so its
   ── media-query display overrides get beaten by the static .nav-links and
   ── .nav-hamburger rules above. Re-assert here (last in cascade = wins).
   ======================================================================== */
@media (width > 600px) {
  .nav-links     { display: flex; }
  .nav-hamburger { display: none; }
}
@media (width <= 600px) {
  .nav-links     { display: none; }
  .nav-hamburger { display: flex; }
}