/* Reuse the existing palette. No page-wide filter: images and fixed controls
   keep their original rendering, while all shared surfaces switch together. */
:root {
  color-scheme: light;
}

:root[data-theme="dark"] {
  --paper: #000;
  --black: #fff;
  --ink: #eee;
  --muted: #a6a6a6;
  --line: #474747;
  --soft: #191919;
  color-scheme: dark;
}

/* Keep the back-to-top hit area and spacing, with only the theme icon visible. */
#m3ez-theme-toggle-v1 {
  position: fixed;
  left: max(1rem, env(safe-area-inset-left));
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 30;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--black);
  font: inherit;
  cursor: pointer;
  transition: opacity 120ms ease;
}

#m3ez-theme-toggle-v1:hover {
  opacity: .65;
}

#m3ez-theme-toggle-v1:focus-visible {
  outline: 2px solid var(--black);
  outline-offset: 3px;
}

#m3ez-theme-toggle-v1 svg {
  display: block;
  width: 18px;
  height: 18px;
  pointer-events: none;
}

#m3ez-theme-toggle-v1 .theme-icon-sun,
:root[data-theme="dark"] #m3ez-theme-toggle-v1 .theme-icon-moon {
  display: none;
}

:root[data-theme="dark"] #m3ez-theme-toggle-v1 .theme-icon-sun {
  display: block;
}

@media (max-width: 640px) {
  #m3ez-theme-toggle-v1 {
    left: max(.75rem, env(safe-area-inset-left));
    bottom: max(.75rem, env(safe-area-inset-bottom));
  }
}

@media (prefers-reduced-motion: reduce) {
  #m3ez-theme-toggle-v1 {
    transition: none;
  }
}

/* Minimal divider walker. The hero's existing bottom border is the path.
   A 32-frame gait coordinates hip rotation, knee flexion, foot roll, counter-swinging arms, restrained torso motion, and a lightly lagging backpack. */
#top.hero:has(+ #method) {
  position: relative;
  --walker-width: 34px;
  --walker-height: 40.8px;
  --walker-crossing: 48s;
  --walker-cycle: 1.52s;
  --cat-gap: 8px;
  --cat-stride-units: 20;
  --cat-width: calc(var(--walker-width) + 4px);
  --cat-height: calc(var(--walker-height) * .62);
  --cat-offset: calc(var(--cat-width) + var(--cat-gap));
}

#top.hero:has(+ #method)::after {
  display: none;
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: var(--walker-width);
  height: var(--walker-height);
  pointer-events: none;
  background: var(--black);
  opacity: 0;
  -webkit-mask-image: url("./stickman-walk-cycle.svg?v=20261003-2");
  mask-image: url("./stickman-walk-cycle.svg?v=20261003-2");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: calc(var(--walker-width) * 32) 100%;
  mask-size: calc(var(--walker-width) * 32) 100%;
  -webkit-mask-position: 0 0;
  mask-position: 0 0;
  animation:
    m3ez-divider-walk-cross var(--walker-crossing) linear infinite,
    m3ez-divider-walk var(--walker-cycle) steps(32) infinite;
}

/* Neither crossing starts until the cat is mounted: both clocks begin on the
   same style update, and restart together when R/r toggles the pair. */
:root[data-divider-walker="active"] #top.hero:has(+ #method):has(> #m3ez-divider-cat-v1)::after,
:root[data-divider-walker="active"] #top.hero:has(+ #method) > #m3ez-divider-cat-v1 {
  display: block;
}

@keyframes m3ez-divider-walk {
  to {
    -webkit-mask-position: calc(var(--walker-width) * -32) 0;
    mask-position: calc(var(--walker-width) * -32) 0;
  }
}

@keyframes m3ez-divider-walk-cross {
  0% {
    left: var(--cat-offset);
    opacity: 0;
  }
  4% {
    opacity: .28;
  }
  92% {
    opacity: .28;
  }
  96%, 100% {
    left: calc(100% - var(--walker-width));
    opacity: 0;
  }
}

@media (max-width: 640px) {
  #top.hero:has(+ #method) {
    --walker-width: 26px;
    --walker-height: 31.2px;
    --walker-crossing: 24s;
    --walker-cycle: 1.46s;
  }
}

@media (prefers-reduced-motion: reduce) {
  #top.hero:has(+ #method)::after {
    content: none;
    animation: none;
  }
}

@media print {
  #top.hero:has(+ #method)::after {
    content: none;
    animation: none;
  }
}

/* Rounded cat follower: distinct elbow/wrist and stifle/hock chains in
   64 poses. Paws plant, roll off and fold through recovery; crossing is shared. */
#m3ez-divider-cat-v1 {
  display: none;
  position: absolute;
  bottom: 0;
  left: 0;
  width: var(--cat-width);
  height: var(--cat-height);
  color: var(--black);
  pointer-events: none;
  opacity: 0;
  transform: translateX(calc(-1 * var(--cat-offset)));
  animation: m3ez-divider-walk-cross var(--walker-crossing) linear infinite;
}

#m3ez-divider-cat-v1 .divider-cat-pose {
  display: block;
  width: 100%;
  height: 100%;
  background: currentColor;
  -webkit-mask-image: url("./cat-walk-cycle.svg");
  mask-image: url("./cat-walk-cycle.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: calc(var(--cat-width) * 64) 100%;
  mask-size: calc(var(--cat-width) * 64) 100%;
  -webkit-mask-position: 0 0;
  mask-position: 0 0;
  animation: m3ez-cat-gait var(--cat-cycle, var(--walker-cycle)) steps(64) infinite;
}

@keyframes m3ez-cat-gait {
  to {
    -webkit-mask-position: calc(var(--cat-width) * -64) 0;
    mask-position: calc(var(--cat-width) * -64) 0;
  }
}

@media (prefers-reduced-motion: reduce), print {
  #m3ez-divider-cat-v1 {
    display: none !important;
    animation: none;
  }

  #m3ez-divider-cat-v1 .divider-cat-pose {
    animation: none;
  }
}

/* Soft mountain strip behind the walker, on the same existing divider.
   SVG alpha gradients provide the haze; the shared palette supplies the color.
   ::before paints before the existing ::after walker without global z-index changes. */
#top.hero:has(+ #method)::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 56px;
  pointer-events: none;
  background: var(--black);
  -webkit-mask-image: url("./divider-scene.svg");
  mask-image: url("./divider-scene.svg");
  mask-mode: alpha;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-position: center bottom;
  mask-position: center bottom;
}

/* Local-time sky. Time controls the celestial body, light and cloud set;
   the manual theme control only changes the page palette. */
#m3ez-divider-light-v1 {
  position: absolute;
  left: var(--celestial-x, 50%);
  bottom: 0;
  z-index: 0;
  width: 240px;
  height: 104px;
  pointer-events: none;
  opacity: var(--sky-light-opacity, .1);
  transform: translateX(-50%);
  background: radial-gradient(
    ellipse at center bottom,
    rgba(214, 174, 92, .42) 0%,
    rgba(214, 174, 92, .14) 38%,
    rgba(214, 174, 92, 0) 72%
  );
  transition:
    left 1800ms cubic-bezier(.22, 1, .36, 1),
    opacity 900ms ease;
}

:root[data-sky-phase="moon"] #m3ez-divider-light-v1 {
  background: radial-gradient(
    ellipse at center bottom,
    rgba(164, 184, 224, .30) 0%,
    rgba(164, 184, 224, .09) 40%,
    rgba(164, 184, 224, 0) 72%
  );
}

#m3ez-divider-clouds-v1 {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  height: 72px;
  overflow: hidden;
  pointer-events: none;
}

#m3ez-divider-clouds-v1 svg {
  position: absolute;
  display: block;
  color: var(--black);
  background: transparent;
  overflow: visible;
  will-change: left, transform, opacity, filter;
  transform-origin: center;
  filter:
    brightness(var(--cloud-brightness, 1))
    drop-shadow(
      var(--cloud-shadow-x, 0)
      var(--cloud-shadow-y, 4px)
      4px
      rgba(0, 0, 0, .08)
    );
  transition:
    left 1800ms cubic-bezier(.22, 1, .36, 1),
    opacity 680ms cubic-bezier(.4, 0, .2, 1),
    transform 820ms cubic-bezier(.22, 1, .36, 1),
    filter 900ms ease;
}

#m3ez-divider-clouds-v1 .divider-cloud-drift {
  transform-box: fill-box;
  transform-origin: center;
}

/* Rounded daytime clouds follow the sun without covering it completely. */
#m3ez-divider-clouds-v1 .divider-cloud-day {
  opacity: 0;
  transform: translate3d(-4px, 4px, 0) scale(.97);
}

#m3ez-divider-clouds-v1 .divider-cloud-day-1 {
  left: calc(var(--celestial-x, 50%) - 58px);
  bottom: 21px;
  width: 44px;
}

#m3ez-divider-clouds-v1 .divider-cloud-day-2 {
  left: calc(var(--celestial-x, 50%) + 18px);
  bottom: 30px;
  width: 48px;
}

:root[data-sky-phase="sun"] #m3ez-divider-clouds-v1 .divider-cloud-day {
  opacity: .052;
  transform: translate3d(0, 0, 0) scale(1);
}

:root[data-sky="sunrise"] #m3ez-divider-clouds-v1 .divider-cloud-day {
  opacity: .04;
}

:root[data-sky="noon"] #m3ez-divider-clouds-v1 .divider-cloud-day {
  opacity: .06;
}

:root[data-sky="sunset"] #m3ez-divider-clouds-v1 .divider-cloud-day {
  opacity: .048;
}

/* Night uses thin wisps, independently of whether the user selected light or dark UI. */
#m3ez-divider-clouds-v1 .divider-cloud-night {
  opacity: 0;
  transform: translate3d(5px, 4px, 0) scale(.96);
}

#m3ez-divider-clouds-v1 .divider-cloud-night-1 {
  left: calc(var(--celestial-x, 50%) - 52px);
  bottom: 25px;
  width: 47px;
}

#m3ez-divider-clouds-v1 .divider-cloud-night-2 {
  left: calc(var(--celestial-x, 50%) + 17px);
  bottom: 18px;
  width: 41px;
}

:root[data-sky-phase="moon"] #m3ez-divider-clouds-v1 .divider-cloud-night {
  opacity: .09;
  transform: translate3d(0, 0, 0) scale(1);
}

:root[data-sky="midnight"] #m3ez-divider-clouds-v1 .divider-cloud-night {
  opacity: .105;
}

:root[data-sky="late-night"] #m3ez-divider-clouds-v1 .divider-cloud-night {
  opacity: .072;
}

#m3ez-divider-clouds-v1 .divider-cloud-day-1 .divider-cloud-drift {
  animation: m3ez-cloud-day-a 12s ease-in-out infinite alternate;
}

#m3ez-divider-clouds-v1 .divider-cloud-day-2 .divider-cloud-drift {
  animation: m3ez-cloud-day-b 15s ease-in-out -5s infinite alternate;
}

#m3ez-divider-clouds-v1 .divider-cloud-night-1 .divider-cloud-drift {
  animation: m3ez-cloud-night-a 16s ease-in-out -3s infinite alternate;
}

#m3ez-divider-clouds-v1 .divider-cloud-night-2 .divider-cloud-drift {
  animation: m3ez-cloud-night-b 13s ease-in-out -7s infinite alternate;
}

@keyframes m3ez-cloud-day-a {
  from { transform: translate3d(-5px, 0, 0); }
  to { transform: translate3d(7px, -1px, 0); }
}

@keyframes m3ez-cloud-day-b {
  from { transform: translate3d(6px, 0, 0); }
  to { transform: translate3d(-8px, 1px, 0); }
}

@keyframes m3ez-cloud-night-a {
  from { transform: translate3d(4px, 0, 0); }
  to { transform: translate3d(-6px, -.5px, 0); }
}

@keyframes m3ez-cloud-night-b {
  from { transform: translate3d(-3px, 0, 0); }
  to { transform: translate3d(6px, .5px, 0); }
}

/* The celestial mark moves on a shallow arc. Individual SVGs cross-fade by
   time segment, so sunrise/noon/sunset and the night periods are not identical. */
#m3ez-divider-celestial-v1 {
  position: absolute;
  left: var(--celestial-x, 50%);
  bottom: calc(18px + var(--celestial-rise, 12px));
  z-index: 1;
  width: 32px;
  height: 32px;
  pointer-events: none;
  transform: translateX(-50%) rotate(var(--celestial-angle, 0deg));
  transform-origin: center;
  will-change: left, bottom, transform;
  transition:
    left 1800ms cubic-bezier(.22, 1, .36, 1),
    bottom 1800ms cubic-bezier(.22, 1, .36, 1),
    transform 1800ms cubic-bezier(.22, 1, .36, 1);
}

#m3ez-divider-celestial-v1 svg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  background: transparent;
  overflow: visible;
  opacity: 0;
  transform: translateY(7px) scale(.88);
  will-change: transform, opacity, filter;
  transition:
    opacity 620ms cubic-bezier(.4, 0, .2, 1),
    transform 900ms cubic-bezier(.22, 1, .36, 1),
    filter 760ms ease;
}

#m3ez-divider-celestial-v1 .divider-celestial-sunrise {
  color: #d19a58;
}

#m3ez-divider-celestial-v1 .divider-celestial-morning {
  color: #c9a957;
}

#m3ez-divider-celestial-v1 .divider-celestial-noon {
  color: #c8ad58;
}

#m3ez-divider-celestial-v1 .divider-celestial-sunset {
  color: #c98558;
}

#m3ez-divider-celestial-v1 .divider-celestial-evening,
#m3ez-divider-celestial-v1 .divider-celestial-midnight,
#m3ez-divider-celestial-v1 .divider-celestial-late-night {
  color: #747b88;
}

:root[data-theme="dark"] #m3ez-divider-celestial-v1 .divider-celestial-evening,
:root[data-theme="dark"] #m3ez-divider-celestial-v1 .divider-celestial-midnight,
:root[data-theme="dark"] #m3ez-divider-celestial-v1 .divider-celestial-late-night {
  color: #ededf2;
}

:root[data-sky="sunrise"] #m3ez-divider-celestial-v1 .divider-celestial-sunrise {
  opacity: .42;
  transform: translateY(0) scale(1);
  filter: drop-shadow(0 0 7px rgba(209, 154, 88, .24));
}

:root[data-sky="morning"] #m3ez-divider-celestial-v1 .divider-celestial-morning {
  opacity: .38;
  transform: translateY(0) scale(1);
  filter: drop-shadow(0 0 8px rgba(201, 169, 87, .22));
}

:root[data-sky="noon"] #m3ez-divider-celestial-v1 .divider-celestial-noon {
  opacity: .36;
  transform: translateY(0) scale(1.04);
  filter: drop-shadow(0 0 10px rgba(200, 173, 88, .24));
}

:root[data-sky="sunset"] #m3ez-divider-celestial-v1 .divider-celestial-sunset {
  opacity: .42;
  transform: translateY(0) scale(1);
  filter: drop-shadow(0 0 8px rgba(201, 133, 88, .25));
}

:root[data-sky="evening"] #m3ez-divider-celestial-v1 .divider-celestial-evening {
  opacity: .44;
  transform: translateY(0) scale(.98);
  filter: drop-shadow(0 0 7px rgba(185, 201, 232, .15));
}

:root[data-sky="midnight"] #m3ez-divider-celestial-v1 .divider-celestial-midnight {
  opacity: .5;
  transform: translateY(0) scale(1.02);
  filter: drop-shadow(0 0 9px rgba(194, 208, 238, .18));
}

:root[data-sky="late-night"] #m3ez-divider-celestial-v1 .divider-celestial-late-night {
  opacity: .4;
  transform: translateY(0) scale(.96);
  filter: drop-shadow(0 0 6px rgba(185, 201, 232, .12));
}

@media (max-width: 760px) {
  #m3ez-divider-light-v1 {
    width: 150px;
    height: 58px;
  }

  #m3ez-divider-clouds-v1 {
    height: 40px;
  }

  #m3ez-divider-clouds-v1 .divider-cloud-day-1 {
    left: calc(var(--celestial-x, 50%) - 39px);
    bottom: 11px;
    width: 29px;
  }

  #m3ez-divider-clouds-v1 .divider-cloud-day-2 {
    left: calc(var(--celestial-x, 50%) + 10px);
    bottom: 16px;
    width: 34px;
  }

  #m3ez-divider-clouds-v1 .divider-cloud-night-1 {
    left: calc(var(--celestial-x, 50%) - 36px);
    bottom: 13px;
    width: 32px;
  }

  #m3ez-divider-clouds-v1 .divider-cloud-night-2 {
    left: calc(var(--celestial-x, 50%) + 10px);
    bottom: 9px;
    width: 28px;
  }

  #m3ez-divider-celestial-v1 {
    bottom: calc(8px + var(--celestial-rise-mobile, 7px));
    width: 24px;
    height: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #m3ez-divider-light-v1,
  #m3ez-divider-clouds-v1 svg,
  #m3ez-divider-celestial-v1,
  #m3ez-divider-celestial-v1 svg {
    transition: none;
  }

  #m3ez-divider-clouds-v1 .divider-cloud-drift {
    animation: none;
    transform: none;
  }
}

@media print {
  #m3ez-divider-light-v1,
  #m3ez-divider-clouds-v1,
  #m3ez-divider-celestial-v1 {
    display: none;
  }
}

/* Stay within the smaller hero bottom padding on phones and small tablets. */
@media (max-width: 760px) {
  #top.hero:has(+ #method)::before {
    height: 30px;
  }
}

/* A static landscape is retained for reduced motion; the walker already opts out. */
@media print {
  #top.hero:has(+ #method)::before {
    content: none;
  }
}



/* Landing progressive disclosure: desktop keeps Hero + Method; mobile keeps
   Hero only. The head bootstrap sets the state before first paint. */
:root[data-portfolio-expanded="false"] #method ~ *,
:root[data-portfolio-expanded="false"] .site-footer {
  display: none !important;
}

:root[data-portfolio-expanded="false"] #method {
  position: relative;
}

/* Keep the link in its existing section so Hero + Method remain adjacent.
   Reserve landing space for the control outside the section's bottom border. */
:root[data-portfolio-expanded="false"] #content {
  padding-bottom: 4.5rem;
}

#m3ez-explore-more-v1 {
  position: absolute;
  top: 100%;
  left: 50%;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  width: max-content;
  min-height: 44px;
  margin: .5rem 0 0;
  padding: .5rem .75rem;
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  line-height: 1.4;
  text-decoration: none;
  text-transform: uppercase;
  transform: translateX(-50%);
}

#m3ez-explore-more-v1:hover,
#m3ez-explore-more-v1:focus-visible {
  color: var(--ink);
}

#m3ez-explore-more-v1 .m3ez-explore-arrow {
  display: inline-block;
  transition: transform 180ms cubic-bezier(.22, 1, .36, 1);
}

#m3ez-explore-more-v1:hover .m3ez-explore-arrow,
#m3ez-explore-more-v1:focus-visible .m3ez-explore-arrow {
  transform: translateY(2px);
}

:root[data-portfolio-expanded="true"] #m3ez-explore-more-v1 {
  display: none;
}

:root[data-portfolio-reveal="active"] #method ~ *,
:root[data-portfolio-reveal="active"] .site-footer {
  animation: m3ez-extended-content-reveal 520ms cubic-bezier(.22, 1, .36, 1) both;
}

/* Mobile keeps Hero only; the shared link placement stays below its divider. */
@media (max-width: 760px) {
  :root[data-portfolio-expanded="false"] #method {
    display: none !important;
  }

  :root[data-portfolio-reveal="active"] #method {
    animation: m3ez-extended-content-reveal 520ms cubic-bezier(.22, 1, .36, 1) both;
  }
}

@keyframes m3ez-extended-content-reveal {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  #m3ez-explore-more-v1 .m3ez-explore-arrow {
    transition: none;
  }

  :root[data-portfolio-reveal="active"] #method,
  :root[data-portfolio-reveal="active"] #method ~ *,
  :root[data-portfolio-reveal="active"] .site-footer {
    animation: none;
  }
}

@media print {
  :root[data-portfolio-expanded="false"] #content {
    padding-bottom: 0;
  }

  :root[data-portfolio-expanded="false"] #method,
  :root[data-portfolio-expanded="false"] #method ~ *,
  :root[data-portfolio-expanded="false"] .site-footer {
    display: revert !important;
  }

  #m3ez-explore-more-v1 {
    display: none !important;
  }
}