/* Cool Enhancements — additive, theme-aware via the CSS custom properties
   already defined in night-mode.css (--primary/--secondary/--accent/...).
   Load AFTER night-mode.css. Safe to add to every page. */

/* Selection + scrollbar */
::selection { background: color-mix(in srgb, var(--secondary) 35%, transparent); color: var(--text); }
html { scrollbar-color: var(--secondary) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--secondary) 55%, transparent); border-radius: 999px; border: 2px solid var(--background); }
::-webkit-scrollbar-thumb:hover { background: var(--secondary); }

/* Scroll reveal (paired with assets/js/scroll-reveal.js) */
.reveal-init {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .75s cubic-bezier(.22,1,.36,1), transform .75s cubic-bezier(.22,1,.36,1);
  will-change: opacity, transform;
}
.reveal-init.reveal-in { opacity: 1; transform: translateY(0); }

/* Nav link glow underline */
nav[role="navigation"] ul[role="menubar"] > li > a {
  position: relative;
  padding-bottom: .2rem;
}
nav[role="navigation"] ul[role="menubar"] > li > a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: -.15rem;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--secondary), var(--accent));
  transition: right .28s cubic-bezier(.22,1,.36,1);
}
nav[role="navigation"] ul[role="menubar"] > li > a:hover::after,
nav[role="navigation"] ul[role="menubar"] > li > a:focus-visible::after { right: 0; }

/* Theme toggle: glow ring + icon rotate-in */
.theme-toggle { overflow: visible; }
.theme-toggle::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 999px;
  background: radial-gradient(circle, color-mix(in srgb, var(--secondary) 45%, transparent), transparent 70%);
  opacity: 0;
  transition: opacity .3s ease;
  z-index: -1;
}
.theme-toggle:hover::before, .theme-toggle:focus-visible::before { opacity: 1; }
.theme-toggle svg { transition: opacity .35s ease, transform .5s cubic-bezier(.22,1,.36,1); }
.theme-toggle__sun { transform: rotate(0deg) scale(1); }
.theme-toggle__moon { transform: rotate(-90deg) scale(.7); }
html[data-theme="dark"] .theme-toggle__sun { transform: rotate(90deg) scale(.7); }
html[data-theme="dark"] .theme-toggle__moon { transform: rotate(0deg) scale(1); }

/* Hero: staged entrance for the headline/copy, and a layered, gently
   drifting photo stage (ring + status chips + mouse parallax via
   assets/js/hero-motion.js setting --px/--py on .hero-photo-stage). */
.hero-grid { position: relative; }

.hero-title-line, .hero-fade-item {
  display: block;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .85s cubic-bezier(.22,1,.36,1), transform .85s cubic-bezier(.22,1,.36,1);
}
.hero-actions.hero-fade-item { display: flex; }
.hero-copy.hero-in .hero-title-line,
.hero-copy.hero-in .hero-fade-item {
  opacity: 1;
  transform: translateY(0);
}
.hero-title-line:nth-child(1) { transition-delay: .05s; }
.hero-title-line:nth-child(2) { transition-delay: .22s; }
p.hero-subtitle.hero-fade-item { transition-delay: .38s; }
p.hero-cta.hero-fade-item { transition-delay: .5s; }
div.hero-actions.hero-fade-item { transition-delay: .62s; }
.hero-fade-item.d1 { transition-delay: .1s; }
.hero-fade-item.d2 { transition-delay: .3s; }

.hero-photo-stage {
  position: relative;
  width: min(100%, 36rem);
  isolation: isolate;
  transform: translate3d(calc(var(--px, 0px) * -1), calc(var(--py, 0px) * -1), 0);
  transition: transform .25s ease-out;
}
.hero-photo-stage .hero-photo {
  position: relative;
  z-index: 1;
  animation: hero-photo-float 7s ease-in-out infinite;
}
@keyframes hero-photo-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

.hero-photo-ring {
  position: absolute;
  inset: -6%;
  z-index: 0;
  border-radius: 42% 58% 55% 45% / 45% 40% 60% 55%;
  border: 1.5px dashed color-mix(in srgb, var(--secondary) 45%, transparent);
  animation: hero-ring-rotate 26s linear infinite;
  pointer-events: none;
}
@keyframes hero-ring-rotate { to { transform: rotate(360deg); } }

.hero-chip {
  position: absolute;
  display: flex;
  align-items: center;
  gap: .5rem;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: .55rem .95rem;
  font-size: .8rem;
  font-weight: 600;
  color: var(--text);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--secondary) 18%, transparent);
  backdrop-filter: blur(10px);
  z-index: 2;
  opacity: 0;
  animation: hero-chip-in .7s cubic-bezier(.22,1,.36,1) forwards, hero-chip-float 6s ease-in-out infinite;
  pointer-events: none;
  white-space: nowrap;
}
.hero-chip-dot { width: .5rem; height: .5rem; border-radius: 999px; background: var(--secondary); flex: none; }
@keyframes hero-chip-in { from { opacity: 0; transform: translateY(10px) scale(.94); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes hero-chip-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

.hero-chip-1 { top: 4%; left: -8%; animation-delay: .9s, .9s; animation-duration: .7s, 5.5s; }
.hero-chip-2 { bottom: 20%; right: -4%; animation-delay: 1.1s, 1.1s; animation-duration: .7s, 6.5s; }
.hero-chip-3 { bottom: -5%; left: 8%; animation-delay: 1.3s, 1.3s; animation-duration: .7s, 7s; }

@media (max-width: 639px) {
  .hero-chip {
    padding: .4rem .7rem;
    font-size: .68rem;
    gap: .35rem;
  }
  .hero-chip-dot { width: .4rem; height: .4rem; }
  .hero-chip-1 { left: -4%; }
  .hero-chip-2 { right: -4%; }
  .hero-chip-3 { left: 4%; bottom: -8%; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-title-line, .hero-fade-item, .hero-chip {
    animation: none !important; opacity: 1 !important; transform: none !important;
  }
  .hero-photo-stage, .hero-photo-stage .hero-photo, .hero-photo-ring {
    animation: none !important; transform: none !important;
  }
}

/* ============ Realistic app-style mockups for Sample Work ============ */
.mock-window { overflow: hidden; }
.mock-titlebar {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  padding: .4rem .3rem .4rem .7rem;
  background: color-mix(in srgb, var(--text) 4%, var(--background));
  border-bottom: 1px solid var(--border);
}
.mock-titlebar-label {
  font-size: .72rem; font-weight: 700;
  color: color-mix(in srgb, var(--text) 55%, transparent);
  letter-spacing: .02em;
}
.mock-winctrls { display: flex; align-items: center; flex: none; }
.mock-winctrl {
  width: 1.9rem; height: 1.5rem; display: grid; place-items: center;
  font-size: .7rem; line-height: 1; font-family: Arial, sans-serif;
  color: color-mix(in srgb, var(--text) 55%, transparent);
}
.mock-winctrl.close { border-radius: 2px; }

.mock-rows { display: flex; flex-direction: column; }
.mock-row {
  display: flex; align-items: flex-start; gap: .6rem;
  padding: .5rem .1rem;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 65%, transparent);
}
.mock-row:last-child { border-bottom: none; }
.mock-row-icon {
  flex: none; width: 1.6rem; height: 1.6rem; border-radius: 999px; margin-top: .05rem;
  display: grid; place-items: center; font-size: .78rem; font-weight: 700; color: #fff;
}
.mock-row-icon-plain {
  flex: none; width: 1.6rem; display: grid; place-items: center; font-size: 1.15rem;
  color: color-mix(in srgb, var(--text) 55%, transparent);
}
.mock-row-body { min-width: 0; flex: 1; }
.mock-row-title { font-weight: 600; }
.mock-row-sub {
  color: color-mix(in srgb, var(--text) 65%, transparent); font-size: .92em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mock-row-meta { flex: none; font-size: .78em; color: color-mix(in srgb, var(--text) 55%, transparent); padding-top: .1rem; }
.mock-row-meta.flag { color: var(--secondary); font-weight: 700; }

.mock-avatar-1 { background: var(--secondary); }
.mock-avatar-2 { background: #a78bfa; }
.mock-avatar-3 { background: #34a0a4; }
.mock-avatar-4 { background: #e0a458; }
.mock-avatar-5 { background: #6b8f71; }

ul.mock-flagged { list-style: none; margin: 0; padding: 0; }
ul.mock-flagged li {
  position: relative; padding-left: 1.15rem; padding-block: .3rem;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
}
ul.mock-flagged li:last-child { border-bottom: none; }
ul.mock-flagged li::before {
  content: ""; position: absolute; left: 0; top: .75rem;
  width: .4rem; height: .4rem; border-radius: 999px;
  background: var(--secondary);
}

.mock-ledger { width: 100%; border-collapse: collapse; }
.mock-ledger th {
  text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em;
  color: color-mix(in srgb, var(--text) 55%, transparent); font-weight: 700;
  padding: .3rem .5rem; border-bottom: 1px solid var(--border);
}
.mock-ledger td { padding: .45rem .5rem; border-bottom: 1px solid color-mix(in srgb, var(--border) 55%, transparent); }
.mock-ledger tr:last-child td { border-bottom: none; }
.mock-ledger .mock-amount { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
.mock-pill { display: inline-block; border-radius: 999px; padding: .1rem .5rem; font-size: .72rem; font-weight: 700; }
.mock-pill.warn { background: color-mix(in srgb, #f59e0b 18%, transparent); color: #92400e; }
.mock-pill.ok { background: color-mix(in srgb, #10b981 18%, transparent); color: #065f46; }
.mock-pill.info { background: color-mix(in srgb, var(--secondary) 16%, transparent); color: var(--primary); }

.mock-cal { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; }
.mock-cal-col { border: 1px solid var(--border); border-radius: .5rem; padding: .45rem; }
.mock-cal-col-label {
  font-size: .68rem; font-weight: 700; text-align: center; margin-bottom: .4rem;
  color: color-mix(in srgb, var(--text) 60%, transparent); text-transform: uppercase; letter-spacing: .04em;
}
.mock-cal-event {
  border-radius: .35rem; padding: .3rem .4rem; font-size: .66rem; font-weight: 700;
  color: #fff; margin-bottom: .3rem; line-height: 1.25;
}
.mock-cal-event.conflict { box-shadow: 0 0 0 2px #e11d48; }
@media (max-width: 639px) {
  .mock-cal { grid-template-columns: repeat(2, 1fr); }
}

/* Primary buttons: gradient + shine sweep + lift */
a.bg-brand-primary, button.bg-brand-primary {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--primary), var(--secondary)) !important;
  box-shadow: 0 10px 26px color-mix(in srgb, var(--secondary) 32%, transparent);
  transition: transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s ease;
}
a.bg-brand-primary::before, button.bg-brand-primary::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.35) 48%, transparent 66%);
  transform: translateX(-120%);
  transition: transform .65s ease;
}
a.bg-brand-primary:hover, button.bg-brand-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 34px color-mix(in srgb, var(--secondary) 42%, transparent);
}
a.bg-brand-primary:hover::before, button.bg-brand-primary:hover::before { transform: translateX(120%); }

/* Outline buttons: subtle lift + tinted glow */
a.border-brand-primary, button.border-brand-primary {
  transition: transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s ease, background-color .2s ease, color .2s ease;
}
a.border-brand-primary:hover, button.border-brand-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--secondary) 20%, transparent);
}

/* Cards: corner glow on hover (system-card already isolates real content at z-index:1) */
.system-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(120px 120px at 100% 0%, color-mix(in srgb, var(--secondary) 20%, transparent), transparent 70%);
  opacity: 0;
  transition: opacity .35s ease;
}
.system-card:hover::before, .system-card:focus-within::before { opacity: 1; }

/* Numbered markers: soft glow ring, brightens with the card */
.ordered-marker {
  position: relative;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--secondary) 14%, transparent);
  transition: box-shadow .3s ease, transform .3s ease;
}
.system-card:hover .ordered-marker { box-shadow: 0 0 0 6px color-mix(in srgb, var(--secondary) 22%, transparent); transform: scale(1.06); }

/* Section kickers: small gradient dash */
.section-intro > p:first-child { position: relative; padding-left: 1.35rem; }
.section-intro > p:first-child::before {
  content: "";
  position: absolute;
  left: 0;
  top: .5em;
  width: 1rem;
  height: 2px;
  background: linear-gradient(90deg, var(--secondary), var(--accent));
  border-radius: 999px;
}

/* Connected steps: a thread that draws itself through the gaps between
   numbered cards once the row scrolls into view (see scroll-reveal.js) */
.steps-row { position: relative; }
.steps-row::before {
  content: "";
  position: absolute;
  left: 3%;
  right: 3%;
  top: 50%;
  height: 2px;
  z-index: 0;
  background: linear-gradient(90deg, var(--secondary), var(--accent), var(--secondary));
  transform: translateY(-50%) scaleX(0);
  transform-origin: left center;
  opacity: .5;
  transition: transform 1.1s cubic-bezier(.22,1,.36,1);
}
.steps-row.steps-in::before { transform: translateY(-50%) scaleX(1); }
.steps-row > * { position: relative; z-index: 1; }

/* Below the single-row (4-up) breakpoint, cards stack into 1 or 2 columns,
   so the horizontal thread hides behind them instead of connecting anything.
   Run the same reveal as a vertical thread through the column/row gutter. */
@media (max-width: 1279px) {
  .steps-row::before {
    left: 50%;
    right: auto;
    top: 3%;
    bottom: 3%;
    height: auto;
    width: 2px;
    background: linear-gradient(180deg, var(--secondary), var(--accent), var(--secondary));
    transform: translateX(-50%) scaleY(0);
    transform-origin: top center;
  }
  .steps-row.steps-in::before { transform: translateX(-50%) scaleY(1); }
}

/* Mini carousel — "A Closer Look at My Work". Grid on desktop, a real
   swipeable/auto-advancing carousel on mobile & tablet. */
.mini-carousel-track {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
.mini-carousel-slide { min-width: 0; }
.mini-carousel-dots { display: none; }

@media (max-width: 1023px) {
  .mini-carousel { position: relative; }
  .mini-carousel-track {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 4px;
    padding-bottom: .5rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .mini-carousel-track::-webkit-scrollbar { display: none; }
  .mini-carousel-slide {
    flex: 0 0 88%;
    scroll-snap-align: center;
  }
  .mini-carousel-slide .system-card { height: 100%; }
  .mini-carousel-dots {
    display: flex;
    justify-content: center;
    gap: .5rem;
    margin-top: 1.1rem;
  }
  .mini-carousel-dot {
    width: .5rem;
    height: .5rem;
    border-radius: 999px;
    border: none;
    padding: 0;
    background: color-mix(in srgb, var(--secondary) 30%, transparent);
    transition: background-color .25s ease, transform .25s ease;
    cursor: pointer;
  }
  .mini-carousel-dot.is-active {
    background: var(--secondary);
    transform: scale(1.3);
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal-init { transition: none; opacity: 1; transform: none; }
  .steps-row::before { transition: none; }
}