/* Figma node 69:14 theme layer. Layout and motion intentionally stay shared. */

html[data-theme="light"] body.figma-light-active {
  background-color: #fff !important;
  background-image: none !important;
}

html[data-theme="dark"] {
  color-scheme: dark;
  background: #101010 !important;
}

html[data-theme="dark"] body.figma-light-active {
  background-color: #101010 !important;
  background-image: none !important;
}

html[data-theme] .fl-page,
html[data-theme] .fl-page > .fl-section,
html[data-theme] .fl-page > .fl-hero {
  background-color: transparent !important;
  background-image: none !important;
}
.fl-dot-field {
  position: fixed;
  z-index: 0;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
}
.fl-page > :not(.fl-dot-field) { z-index: 1; }

html[data-theme="dark"] .fl-page {
  --ink: #fff;
  --line: #fff;
  --muted: rgba(255,255,255,.66);
  color: #fff;
}

html[data-theme="dark"] .fl-page :where(h1,h2,h3,h4,p,small,strong,span,em,label,sup),
html[data-theme="dark"] .fl-page a,
html[data-theme="dark"] .fl-page button { color: inherit; }

html[data-theme="dark"] :where(.fl-pill,.fl-mini-pill,.fl-id-card,.fl-about-card,.fl-data-grid article,.fl-work-card,.fl-viewer,.fl-job,.fl-dialog) {
  background-color: #101010 !important;
  color: #fff !important;
  border-color: #fff !important;
}

/* Rough.js owns the visible outline; hide the underlying CSS outline. */
html[data-theme="dark"] :where(.fl-pill,.fl-mini-pill,.fl-about-card,.fl-id-card,.fl-data-grid article,.fl-work-card,.fl-btn,.fl-download,.fl-contact-grid a,.fl-contact-grid button).fl-roughened {
  border-color: transparent !important;
}

/* The gallery action uses Rough.js too; avoid stacking its native outline. */
.fl-view-work.fl-roughened { border-color: transparent !important; }

/* Once Rough.js has mounted, its canvas is the only visible outline. */
.fl-roughened:not(.fl-about-card)::after { display: none !important; }

html[data-theme="dark"] :where(.fl-about-card mark,.fl-id-card h3,.fl-job,.fl-job strong,.fl-job small) { color: #fff !important; }
html[data-theme="dark"] :where(.fl-hero p,.fl-section-desc,.fl-about-card>p:nth-child(2),.fl-id-card p,.fl-profile-copy>p,.fl-wide-head>p,.fl-job span,.fl-work-card>p,.fl-dialog form>p:not(.fl-kicker)) { color: rgba(255,255,255,.66) !important; }

html[data-theme="dark"] :where(.fl-kicker i,.fl-hero h1 i) { border-color: #fff !important; }
html[data-theme="dark"] .fl-route path { stroke: #fff !important; }
html[data-theme="dark"] .fl-rough-border { filter: invert(1); }

html[data-theme="dark"] .fl-note { color: #0d0d0d !important; }
html[data-theme="dark"] .fl-note-hire { background: #b5e2be !important; }
html[data-theme="dark"] .fl-note-year { background: #f4daa2 !important; }
html[data-theme="dark"] .fl-note-info { background: #b5e3f0 !important; }
html[data-theme="dark"] .fl-note-work { background: #c4bcea !important; color: #101010 !important; }

html[data-theme="dark"] .fl-id-card>small { background: #101010 !important; color: #fff !important; }
html[data-theme="dark"] .fl-about-card:before,
html[data-theme="dark"] .fl-about-card:after { border-color: #fff !important; }
html[data-theme="dark"] .fl-job b { background: #fff !important; color: #101010 !important; }

html[data-theme="dark"] :where(.fl-btn,.fl-download,.fl-contact-grid a,.fl-contact-grid button,.fl-view-work) {
  background: transparent !important;
  border-color: #fff !important;
  color: #fff !important;
}
html[data-theme="dark"] :where(.fl-btn-black,.fl-store) {
  background: #fff !important;
  border-color: #fff !important;
  color: #101010 !important;
}

html[data-theme="dark"] .fl-cover { background: #101010 !important; }
html[data-theme="dark"] .fl-pdf { border-color: rgba(255,255,255,.35) !important; }
html[data-theme="dark"] .fl-tags span:hover {
  background: rgba(255,255,255,.09) !important;
  color: #fff !important;
  box-shadow: 0 9px 22px rgba(0,0,0,.28) !important;
}

html[data-theme="dark"] .fl-dock {
  background: rgba(16,16,16,.68) !important;
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 8px 34px rgba(255,255,255,.14) !important;
  backdrop-filter: blur(18px);
}
html[data-theme="dark"] .fl-dock img { filter: none !important; opacity: 1; }
html[data-theme="dark"] :where(.fl-theme,.fl-backtop) {
  background: #101010 !important;
  border-color: rgba(255,255,255,.32) !important;
  color: #fff !important;
  box-shadow: 0 5px 20px rgba(0,0,0,.45) !important;
}

html[data-theme="dark"] .fl-dialog::backdrop { background: rgba(0,0,0,.78); }
html[data-theme="dark"] :where(.fl-dialog input) {
  background: #101010 !important;
  border-color: #fff !important;
  color: #fff !important;
}
html[data-theme="dark"] .fl-dialog-x { color: #fff !important; }

html[data-theme="dark"] :where(.portfolio-gallery-panel,.portfolio-gallery-header,.portfolio-gallery-loader,.portfolio-gallery-grid) {
  background: #101010 !important;
  color: #fff !important;
}
html[data-theme="dark"] .portfolio-gallery-panel,
html[data-theme="dark"] .portfolio-gallery-header { border-color: #fff !important; }
html[data-theme="dark"] :where(.portfolio-gallery-download,.portfolio-gallery-close,.fl-gallery-download,.fl-gallery-close) {
  background: transparent !important;
  border-color: #fff !important;
  color: #fff !important;
}
html[data-theme="dark"] .portfolio-gallery-progress { background: rgba(255,255,255,.2) !important; }
html[data-theme="dark"] .portfolio-gallery-progress i { background: #fff !important; }
html[data-theme="dark"] .portfolio-bike { color: #fff !important; }
html[data-theme="dark"] .fl-route { filter: brightness(0) invert(1) url(#fl-line-wiggle) !important; }
html[data-theme="dark"] .fl-work-download-icon img { filter: brightness(0) invert(1) !important; }

html[data-theme="light"] .fl-dock {
  background: rgba(255,255,255,.68) !important;
  border: 1px solid rgba(255,255,255,.55);
  -webkit-backdrop-filter: blur(18px) saturate(135%);
  backdrop-filter: blur(18px) saturate(135%);
}

/* The glass plate enters with the icons, then remains visually stable. */
.fl-dock {
  transform-origin: 50% 100%;
  transition: none !important;
  animation: fl-glass-dock-enter 2.96s cubic-bezier(.22,1,.36,1) .04s both !important;
}
@keyframes fl-glass-dock-enter {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(46px) scale(.975);
    filter: blur(5px);
  }
  58% { opacity: 1; }
  100% {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
    filter: blur(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-theme="dark"] .fl-page * { scroll-behavior: auto; }
  /* Keep this one compositional entrance aligned with the icon entrance. */
  .fl-dock { animation: fl-glass-dock-enter 2.96s cubic-bezier(.22,1,.36,1) .04s both !important; }
}

/* Theme dissolve: visual properties only, so existing hover/scroll transforms remain intact. */
html.fl-theme-transitioning body.figma-light-active,
html.fl-theme-transitioning .fl-page,
html.fl-theme-transitioning .fl-page :where(section,article,div,nav,header,footer,a,button,input,span,p,h1,h2,h3,h4,small,strong,em,label,sup,mark,i) {
  transition-property: background-color,color,border-color,box-shadow,fill,stroke,filter !important;
  transition-duration: .75s !important;
  transition-timing-function: ease !important;
}

/* Canvas and raster/vector assets redraw immediately; never interpolate them. */
html.fl-theme-transitioning :where(canvas,img,svg,.fl-rough-border,.fl-dot-field) {
  transition: none !important;
}

.fl-theme-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  opacity: 0;
  background: var(--fl-theme-overlay-color,#101010);
  mix-blend-mode: normal;
}
.fl-theme-overlay.is-active {
  animation: fl-theme-dissolve .75s ease both !important;
}
@keyframes fl-theme-dissolve {
  0% { opacity: 0; }
  34% { opacity: .105; }
  100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html.fl-theme-transitioning body.figma-light-active,
  html.fl-theme-transitioning .fl-page,
  html.fl-theme-transitioning .fl-page :where(section,article,div,nav,header,footer,a,button,input,span,p,h1,h2,h3,h4,small,strong,em,label,sup,mark,i) {
    transition-property: background-color,color,border-color,box-shadow,fill,stroke,filter !important;
    transition-duration: .75s !important;
    transition-timing-function: ease !important;
  }
  .fl-theme-overlay.is-active { animation: fl-theme-dissolve .75s ease both !important; }
}

/* Separate the glass plate from its icons so scroll-state motion never overlaps them. */
html[data-theme="light"] .fl-dock,
html[data-theme="dark"] .fl-dock {
  border-color: transparent !important;
}
html[data-theme="light"] .fl-dock {background-color:rgba(255,255,255,.5)!important;box-shadow:0 10px 34px rgba(0,0,0,.12)!important;-webkit-backdrop-filter:blur(16px)!important;backdrop-filter:blur(16px)!important}
html[data-theme="dark"] .fl-dock {background-color:rgba(0,0,0,.5)!important;box-shadow:0 10px 34px rgba(0,0,0,.3)!important;-webkit-backdrop-filter:blur(16px)!important;backdrop-filter:blur(16px)!important}
.fl-dock-glass {
  position: absolute;
  z-index: 0;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  transform-origin: 50% 100%;
  will-change: opacity,transform;
}
.fl-dock-glass::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  clip-path: inset(100% 0 0 round 999px);
}
html[data-theme="light"] .fl-dock-glass {
  background: transparent !important;
  border: 1px solid rgba(255,255,255,.55);
  box-shadow: 0 10px 34px rgba(0,0,0,.12);
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
html[data-theme="light"] .fl-dock-glass::after {
  background: rgba(255,255,255,.34);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.82),0 8px 28px rgba(0,0,0,.06);
  -webkit-backdrop-filter: blur(24px) saturate(145%);
  backdrop-filter: blur(24px) saturate(145%);
}
html[data-theme="dark"] .fl-dock-glass {
  background: transparent !important;
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 8px 34px rgba(255,255,255,.14);
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
html[data-theme="dark"] .fl-dock-glass::after {
  background: rgba(255,255,255,.055);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14),0 8px 28px rgba(0,0,0,.18);
  -webkit-backdrop-filter: blur(24px) saturate(135%);
  backdrop-filter: blur(24px) saturate(135%);
}
.fl-dock-glass.is-nav-changing {
  animation: none !important;
}
.fl-dock-glass.is-nav-changing::after {
  animation: fl-dock-glass-follow 1.5s cubic-bezier(.22,1,.36,1) both !important;
}
@keyframes fl-dock-glass-follow {
  0% { opacity: 0; clip-path: inset(100% 0 0 round 999px); }
  48% { opacity: .72; }
  72% { opacity: .42; clip-path: inset(0 0 0 round 999px); }
  100% { opacity: 0; clip-path: inset(0 0 0 round 999px); }
}
@media (prefers-reduced-motion: reduce) {
  .fl-dock-glass.is-nav-changing { animation: none !important; }
  .fl-dock-glass.is-nav-changing::after { animation: fl-dock-glass-follow 1.5s cubic-bezier(.22,1,.36,1) both !important; }
}