/* Mesh gradient used for title, subtitles, gradient button (define once) */
:root {
  --mesh-gradient:
    radial-gradient(ellipse 85% 70% at 6% 18%, #6366f1 0%, transparent 52%),
    radial-gradient(ellipse 60% 90% at 94% 12%, #22d3ee 0%, transparent 48%),
    radial-gradient(ellipse 70% 65% at 38% 88%, #c084fc 0%, transparent 55%),
    radial-gradient(ellipse 55% 80% at 72% 6%, #38bdf8 0%, transparent 45%),
    radial-gradient(ellipse 90% 55% at 18% 62%, #818cf8 0%, transparent 50%),
    radial-gradient(ellipse 50% 70% at 88% 58%, #2dd4bf 0%, transparent 46%),
    radial-gradient(ellipse 75% 75% at 52% 42%, #a855f7 0%, transparent 58%),
    radial-gradient(ellipse 65% 60% at 12% 92%, #f472b6 0%, transparent 44%),
    radial-gradient(ellipse 80% 50% at 82% 82%, #34d399 0%, transparent 51%),
    radial-gradient(ellipse 45% 85% at 48% 8%, #fcd34d 0%, transparent 40%),
    radial-gradient(ellipse 70% 70% at 28% 34%, #7c3aed 0%, transparent 53%),
    radial-gradient(ellipse 55% 65% at 65% 72%, #0ea5e9 0%, transparent 47%),
    radial-gradient(ellipse 95% 45% at 55% 95%, #fb923c 0%, transparent 42%),
    radial-gradient(ellipse 50% 55% at 3% 48%, #4f46e5 0%, transparent 49%),
    radial-gradient(ellipse 60% 95% at 96% 38%, #14b8a6 0%, transparent 45%),
    radial-gradient(ellipse 85% 60% at 44% 52%, #5b21b6 0%, transparent 56%),
    radial-gradient(ellipse 40% 70% at 76% 28%, #e879f9 0%, transparent 38%);
  --mesh-gradient-btn:
    radial-gradient(ellipse 80% 65% at 8% 22%, #6366f1 0%, transparent 50%),
    radial-gradient(ellipse 65% 85% at 92% 14%, #22d3ee 0%, transparent 46%),
    radial-gradient(ellipse 72% 62% at 40% 90%, #c084fc 0%, transparent 52%),
    radial-gradient(ellipse 58% 78% at 70% 8%, #38bdf8 0%, transparent 44%),
    radial-gradient(ellipse 88% 52% at 16% 58%, #818cf8 0%, transparent 48%),
    radial-gradient(ellipse 52% 72% at 86% 62%, #2dd4bf 0%, transparent 45%),
    radial-gradient(ellipse 78% 72% at 50% 45%, #a855f7 0%, transparent 54%),
    radial-gradient(ellipse 62% 58% at 14% 88%, #f472b6 0%, transparent 42%),
    radial-gradient(ellipse 82% 48% at 84% 78%, #34d399 0%, transparent 49%),
    radial-gradient(ellipse 48% 82% at 46% 10%, #fcd34d 0%, transparent 38%),
    radial-gradient(ellipse 68% 68% at 30% 38%, #7c3aed 0%, transparent 51%),
    radial-gradient(ellipse 54% 62% at 68% 68%, #0ea5e9 0%, transparent 46%),
    radial-gradient(ellipse 92% 42% at 58% 92%, #fb923c 0%, transparent 40%),
    radial-gradient(ellipse 52% 58% at 5% 44%, #4f46e5 0%, transparent 47%),
    radial-gradient(ellipse 58% 92% at 94% 36%, #14b8a6 0%, transparent 43%),
    radial-gradient(ellipse 82% 58% at 42% 54%, #5b21b6 0%, transparent 53%),
    #4f46e5;
}

.mesh-bg {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  animation: meshBgFadeIn 2.5s ease-out forwards;
}

@keyframes meshBgFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 0.35;
  }
}

html.mesh-grab,
html.mesh-grab body,
html.mesh-grab .mesh-bg {
  cursor: grab;
}

html.mesh-grab *:active {
  cursor: grabbing;
}

/* Foreground eases out while B is held so the mesh reads clearly; restores on keyup.
 * Fade .nav directly — opacity on the .row wrapper composes badly with position:fixed
 * + backdrop-filter (nav can pop or skip interpolation). pointer-events:none on .row
 * alone does not disable hits on descendants, so the nav strip must be cleared too. */
body.home > .top-blur,
body.home > .page {
  transition: opacity 0.75s ease;
}

html.mesh-grab body.home > .top-blur,
html.mesh-grab body.home .nav,
html.mesh-grab body.home > .page {
  opacity: 0.5;
  pointer-events: none;
}

html.mesh-grab body.home > .row,
html.mesh-grab body.home > .row * {
  pointer-events: none;
}

* {
  padding: 0;
  margin: 0;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 120px;
}

html,
body {
  overflow-x: hidden;
}

body {
  max-width: 1920px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  transition: all 1s ease;
}

.page {
  overflow-y: hidden;
  letter-spacing: 0.04em;
  font-weight: 400;
}

.page-content {
  animation: pageLoadIn 0.6s ease-out forwards;
}

body.home .page-content {
  animation: none;
}

@keyframes pageLoadIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Top progressive blur fade (home landing only) */
body.home .top-blur {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 180px;

  /* Keep below nav (nav z-index is 10) */
  z-index: 9;

  pointer-events: none;

  /* Color behind the blur so it blends even on light backgrounds */
  /* background: rgba(255, 255, 255, 1); */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  mask-image: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 1) 40%,
    rgba(255, 255, 255, 0.8) 50%,
    rgba(255, 255, 255, 0.4) 60%,
    rgba(255, 255, 255, 0.2) 80%,
    rgba(255, 255, 255, 0) 100%
  );
}

/* Fade-in on scroll (sections below landing) */
.scroll-fade {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.65s ease-out,
    transform 0.65s ease-out;
}

.scroll-fade.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/*Global Font Formats and Containers*/

.container {
  max-width: 80%;
  margin: auto;
}

a:hover {
  color: black;
  transition: 0.5s;
}

/*Landing*/

.landing {
  position: relative;
  height: 90vh;
  width: 80%;
  margin: auto;
  padding-top: 30vh;
}

.title {
  font-size: 86px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.02;
  transition: 0.01s;
  filter: saturate(1.1) contrast(1.04);

  background: var(--mesh-gradient);
  background-size: 320% 300%;
  background-position: 0% 0%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: meshDrift 20s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}

@keyframes meshDrift {
  0% {
    background-position: 22% 18%;
  }
  7% {
    background-position: 61% 9%;
  }
  13% {
    background-position: 88% 34%;
  }
  21% {
    background-position: 41% 71%;
  }
  29% {
    background-position: 62% 12%;
  }
  37% {
    background-position: 95% 88%;
  }
  44% {
    background-position: 73% 58%;
  }
  52% {
    background-position: 57% 91%;
  }
  61% {
    background-position: 78% 46%;
  }
  68% {
    background-position: 34% 72%;
  }
  76% {
    background-position: 100% 62%;
  }
  84% {
    background-position: 19% 38%;
  }
  92% {
    background-position: 66% 84%;
  }
  100% {
    background-position: 22% 18%;
  }
}

.landingsub2 {
  font-size: 20px;
  font-weight: 450;
  margin-top: 16px;
  color: rgb(110, 110, 110);
}

.button-row {
  display: flex;
  gap: 16px;
}

.solid-btn {
  font-size: 16px;
  font-weight: 450;
  gap: 2px;
  color: white;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  /* border: 1px solid rgba(0, 0, 0, 0.1); */
  border-radius: 100px;
  overflow: hidden;
  transition: all 0.2s;
  cursor: pointer;
  text-decoration: none;
  background: var(--mesh-gradient-btn);
  background-size: 500% 500%;
  background-position: 0% 0%;
  animation: meshDrift 20s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
  transition: transform 0.2s;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
}

.solid-btn:link,
.solid-btn:visited,
.solid-btn:active {
  color: white;
  text-decoration: none;
}

.solid-btn svg {
  fill: currentColor;
  display: block;
  transform-origin: center center;
  transition: transform 0.3s ease-in-out;
}

.solid-btn span {
  display: block;
  margin-left: 0.3em;
  transition: all 0.3s ease-in-out;
}

@media (hover: hover) and (pointer: fine) {
  .solid-btn:hover {
    transform: scale(0.96);
    transition: 0.25s;
  }

  .solid-btn:hover .svg-wrapper {
    animation: fly-1 0.6s ease-in-out infinite alternate;
  }

  .solid-btn:hover svg {
    transform: translateX(2.5em) rotate(45deg) scale(1.1);
  }

  .solid-btn:hover span {
    transform: translateX(8em);
  }

  .gray-btn:hover .svg-wrapper {
    animation: none;
  }

  .gray-btn:hover svg {
    transform: none;
  }

  .gray-btn:hover span {
    transform: none;
  }

  .gray-btn:hover {
    transform: scale(0.96);
    transition: 0.25s;
  }
}

.gray-btn {
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  /* border: 1px solid rgba(0, 0, 0, 0.06); */
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.04);
  animation: none;
  transition: 0.25s;
}

.gray-btn:link,
.gray-btn:visited,
.gray-btn:active {
  color: rgb(110, 110, 110);
}

@keyframes fly-1 {
  from {
    transform: translateY(0.1em);
  }

  to {
    transform: translateY(-0.1em);
  }
}

.me-wrapper {
  position: relative;
  width: 100%;
  max-width: 300px;
  aspect-ratio: 1;
  display: block;
  margin-left: auto;
}

.me {
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(0, 0, 0, 0.06);
  display: block;
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: cover;
  border-radius: 50%;
  position: relative;
  z-index: 1;
}

.arrowA {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: lightgray;
  opacity: 0.75;
  text-decoration: none;
  text-align: center;
}

.arrowA svg {
  width: clamp(28px, 3vw, 40px);
  height: clamp(28px, 3vw, 40px);
  display: block;
}

.arrowA.is-hidden {
  pointer-events: none;
}

.bounce {
  position: absolute;
  left: 50%;
  bottom: 8vh;
  animation: bounce 2s infinite;
}

@keyframes bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translate(-50%, 0);
  }
  40% {
    transform: translate(-50%, -30px);
  }
  60% {
    transform: translate(-50%, -15px);
  }
}

/* Highlight reel — cinematic expand/fade-in on scroll */

.reel-section {
  padding-top: 2vh;
  padding-bottom: 16vh;
}

/* Shadow lives on an unclipped wrapper. clip-path on the frame (needed to
   round the composited <video> in Safari) would otherwise clip the box-shadow
   away, since clip-path clips the element's entire painted output. */
.reel-shadow {
  border-radius: 2vw;
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.18),
    0 10px 32px rgba(0, 0, 0, 0.08);
}

.reel-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 2460 / 900;
  border-radius: 2vw;
  overflow: hidden;
  /* Safari/WebKit won't clip the composited <video> layer to the rounded
     corners with overflow:hidden alone. clip-path clips at the compositor
     level so the corners round reliably. */
  clip-path: inset(0 round 2vw);
  isolation: isolate;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.12));
  transform-origin: center center;
  will-change: transform, opacity, filter;
}

/* Override the generic .scroll-fade defaults with a richer entrance */
.reel-frame.scroll-fade {
  opacity: 0;
  transform: translateY(40px) scale(0.9);
  filter: blur(12px) saturate(0.9);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
  transition:
    opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1.3s cubic-bezier(0.16, 1, 0.3, 1),
    filter 1.1s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 1.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.reel-frame.scroll-fade.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0) saturate(1);
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.18),
    0 10px 32px rgba(0, 0, 0, 0.08);
}

.reel-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #0a0a0a;
  transform: scale(1.02);
}

/* Playback progress bar pinned to bottom of the reel */
.reel-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 24px; /* expanded hit area for easier scrubbing */
  display: flex;
  align-items: flex-end;
  z-index: 2;
  cursor: pointer;
  touch-action: none;
}

.reel-progress-track {
  position: relative;
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.18);
  overflow: hidden;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: height 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.reel-progress:hover .reel-progress-track,
.reel-progress.is-scrubbing .reel-progress-track {
  height: 10px;
}

.reel-progress-fill {
  height: 100%;
  width: 0%;
  background: var(--mesh-gradient-btn);
  background-size: 500% 500%;
  background-position: 0% 0%;
  animation: meshDrift 20s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.35);
  will-change: width;
}

/* Subtle diagonal sheen that sweeps across once when the reel comes into view */
.reel-sheen {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    115deg,
    rgba(255, 255, 255, 0) 35%,
    rgba(255, 255, 255, 0.18) 50%,
    rgba(255, 255, 255, 0) 65%
  );
  transform: translateX(-100%);
  opacity: 0;
  mix-blend-mode: screen;
}

.reel-frame.is-visible .reel-sheen {
  animation: reelSheen 1.6s cubic-bezier(0.22, 0.61, 0.36, 1) 0.45s 1 forwards;
}

@keyframes reelSheen {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    transform: translateX(100%);
    opacity: 0;
  }
}

/* Looped loading shimmer shown over the black frame until the reel can play */
.reel-loading {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(
      115deg,
      rgba(255, 255, 255, 0) 35%,
      rgba(255, 255, 255, 0.12) 50%,
      rgba(255, 255, 255, 0) 65%
    ),
    #0a0a0a;
  background-size:
    200% 100%,
    auto;
  background-repeat: no-repeat;
  background-position:
    -150% 0,
    0 0;
  animation: reelLoadingSheen 1.6s linear infinite;
  opacity: 1;
  transition: opacity 0.5s ease-out;
}

/* Once the reel is ready, fade the shimmer out and stop animating */
.reel-frame.is-loaded .reel-loading {
  opacity: 0;
  animation: none;
}

@keyframes reelLoadingSheen {
  0% {
    background-position:
      -150% 0,
      0 0;
  }
  100% {
    background-position:
      250% 0,
      0 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reel-frame.scroll-fade {
    transition:
      opacity 0.4s ease-out,
      transform 0.4s ease-out;
    transform: translateY(0) scale(1);
    filter: none;
  }
  .reel-frame.is-visible .reel-sheen {
    animation: none;
  }
  .reel-loading {
    animation: none;
  }
}

/* "Click to expand" hint — hidden on desktop, sheens on mobile */
.reel-expand-hint {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 0.45em;
  margin: 1.4vh auto 0;
  padding: 0;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-align: center;
  cursor: pointer;
}

.reel-expand-icon {
  width: 1.05em;
  height: 1.05em;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .reel-section {
    padding-bottom: 6vh;
  }
  .reel-shadow {
    border-radius: 4vw;
  }
  .reel-frame {
    border-radius: 4vw;
    clip-path: inset(0 round 4vw);
  }
  .reel-video {
    cursor: pointer;
  }
  .reel-expand-hint {
    display: flex;
    color: rgba(0, 0, 0, 0.45);
    background: linear-gradient(
      100deg,
      rgba(0, 0, 0, 0.45) 0%,
      rgba(0, 0, 0, 0.45) 42%,
      rgba(0, 0, 0, 0.95) 50%,
      rgba(0, 0, 0, 0.45) 58%,
      rgba(0, 0, 0, 0.45) 100%
    );
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: reelHintSheen 2.2s linear infinite;
  }
}

@keyframes reelHintSheen {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: 0% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reel-expand-hint {
    animation: none;
  }
}

/*Section Headers*/

.section-header {
  align-items: flex-end;
  padding-top: 5vh;
  padding-bottom: 5vh;
}

.section-eyebrow {
  color: #ababab;
  font-size: 18px;

  margin-bottom: 6px;
}

.section-title {
  font-size: 52px;
  color: black;
  font-weight: 400;
  margin: 0;
}

.section-lead {
  color: gray;
  font-size: 16px;

  margin: 0;
}

/*Experience*/

.experience-section {
  padding-bottom: 12vh;
}

.experience {
  width: 100%;
}

.experience-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 96px;
  width: 100%;
}

.experience-row {
  display: grid;
  align-items: center;
  grid-template-columns: 1fr auto;
  gap: 16px;
  padding: 24px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  position: relative;
  cursor: pointer;
  transition: 0.25s ease;
}

.experience-row-left {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.experience-row-right {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  position: relative;
  flex-shrink: 0;
  min-width: 0;
  justify-items: start;
}

@media (hover: hover) and (pointer: fine) {
  .experience-row:hover {
    background-color: rgba(0, 0, 0, 0.02);
    border-radius: 16px;
    padding-left: 24px;
    border-bottom: 0;
    border-top: 0;
    transition: 0.25s ease;
  }

  /* Hide border-bottom of the previous row when hovering over current row */
  .experience-row:hover ~ .experience-row,
  .role-link:hover ~ .role-link .experience-row {
    border-top: 0;
    transition: 0.25s ease;
  }

  /* Hide border-bottom of previous sibling when hovering - target the row that comes before the hovered one */
  .experience > .role-link:has(+ .role-link:hover) .experience-row,
  .experience > .experience-row:has(+ .role-link:hover),
  .experience > .role-link:has(+ .experience-row:hover) .experience-row,
  .experience > .experience-row:has(+ .experience-row:hover),
  .experience > .role-link:has(+ *:hover) .experience-row,
  .experience > .experience-row:has(+ *:hover) {
    border-bottom: 0 !important;
    transition: 0.25s ease;
  }
}

.experience > .role-link:last-child .experience-row,
.experience > .experience-row:last-child {
  border-bottom: 0;
}

.year {
  color: #ababab;
  font-size: 14px;

  transition: color 0.5s ease;
}

.role-link:hover {
  text-decoration: none;
}

/* Role name and year color on hover - matches pill brand colors */
.role-name {
  font-size: 14px;
  color: gray;
  transition: color 0.5s ease;
}

@media (hover: hover) and (pointer: fine) {
  .experience-row:has(.pill.stealth):hover .role-name,
  .experience-row:has(.pill.stealth):hover .year {
    color: rgba(104, 104, 104, 1);
  }

  .experience-row:has(.pill.beavr):hover .role-name,
  .experience-row:has(.pill.beavr):hover .year {
    color: rgba(110, 142, 138, 1);
  }

  .experience-row:has(.pill.garden):hover .role-name,
  .experience-row:has(.pill.garden):hover .year {
    color: rgba(29, 44, 47, 1);
  }

  .experience-row:has(.pill.instagram):hover .role-name,
  .experience-row:has(.pill.instagram):hover .year {
    color: rgba(201, 33, 169, 1);
  }

  .experience-row:has(.pill.shopify):hover .role-name,
  .experience-row:has(.pill.shopify):hover .year {
    color: rgba(149, 191, 71, 1);
  }

  .experience-row:has(.pill.robinhood):hover .role-name,
  .experience-row:has(.pill.robinhood):hover .year {
    color: rgba(0, 207, 152, 1);
  }

  .experience-row:has(.pill.twitch):hover .role-name,
  .experience-row:has(.pill.twitch):hover .year {
    color: rgba(145, 70, 255, 1);
  }

  .experience-row:has(.pill.deltahacks):hover .role-name,
  .experience-row:has(.pill.deltahacks):hover .year {
    color: rgba(30, 184, 201, 1);
  }
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 100px;

  font-size: 14px;
  transition: transform 0.25s ease;
}

.experience-row-right .ext-arrow {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.25s ease;
  transform-origin: center;
}

.experience-row-right .ext-arrow svg {
  width: 16px;
  height: 16px;
  display: block;
  fill: none;
  stroke: #ababab;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Brand colors */

.stealth {
  background-color: rgba(104, 104, 104, 0.05);
  color: rgba(104, 104, 104, 1);
  border: 1px solid rgba(104, 104, 104, 0.1);
}

.beavr {
  background-color: rgba(110, 142, 138, 0.05);
  color: rgba(110, 142, 138, 1);
  border: 1px solid rgba(110, 142, 138, 0.1);
}

.garden {
  background-color: rgba(29, 44, 47, 0.05);
  color: rgba(29, 44, 47, 1);
  border: 1px solid rgba(29, 44, 47, 0.1);
}

.instagram {
  background-color: rgba(201, 33, 169, 0.05);
  color: rgba(201, 33, 169, 1);
  border: 1px solid rgba(201, 33, 169, 0.1);
}

.shopify {
  background-color: rgba(149, 191, 71, 0.05);
  color: rgba(149, 191, 71, 1);
  border: 1px solid rgba(149, 191, 71, 0.1);
}

.robinhood {
  background-color: rgba(0, 207, 152, 0.05);
  color: rgba(0, 207, 152, 1);
  border: 1px solid rgba(0, 207, 152, 0.1);
}

.twitch {
  background-color: rgba(145, 70, 255, 0.05);
  color: rgba(145, 70, 255, 1);
  border: 1px solid rgba(145, 70, 255, 0.1);
}

.deltahacks {
  background-color: rgba(30, 184, 201, 0.05);
  color: rgba(30, 184, 201, 1);
  border: 1px solid rgba(30, 184, 201, 0.1);
}

@media (hover: hover) and (pointer: fine) {
  .experience-row:hover .pill {
    transform: translateX(-24px);
  }

  .experience-row:hover .ext-arrow {
    transform: translateX(-24px) rotate(45deg);
  }
}

/* Work */

.work-section {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  padding-top: 2vh;
  padding-bottom: 12vh;
  column-gap: 5vh;
  row-gap: 5vh;
}

.work-item-full {
  grid-column: 1 / -1;
}

.work-item-half {
  grid-column: span 6;
}

.work-item-third {
  grid-column: span 4;
}

.work-section .work-item img,
.work-section .work-item picture img,
.work-section .work-item video {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 2vw;
  transition: transform 0.5s ease;
  object-fit: cover;
}

@media (hover: hover) and (pointer: fine) {
  .work-section .work-item a:hover img,
  .work-section .work-item img.work-item-img:hover,
  .work-section .work-item video.work-item-img:hover {
    cursor: pointer;
    transform: scale(0.97);
  }

  .work-section .work-item img.work-item-img.no-hover:hover {
    cursor: default;
    transform: none;
  }
}

/*Footer*/

.footer {
  padding-top: 10vh;
  padding-bottom: 10vh;
}

.footer-line {
  width: 100%;
  height: 1px;
  background-color: gray;
  opacity: 0.1;
  margin-bottom: 24px;
}

.footer-bottom {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
}

.footer-name {
  font-size: 14px;
  color: gray;
  letter-spacing: 16px;
}

.footer-copyright {
  font-size: 14px;
  color: gray;
  opacity: 0.5;
}

/* Testimonials — masonry via multi-column layout */

.testimonials-section {
  padding-top: 2vh;
}

.testimonials-masonry {
  column-count: 3;
  column-gap: 24px;
  column-fill: balance;
}

.testimonial-card {
  break-inside: avoid;
  page-break-inside: avoid;
  -webkit-column-break-inside: avoid;
  margin-bottom: 24px;
  padding: 24px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 24px;
  display: inline-block;
  width: 100%;
  vertical-align: top;
  box-sizing: border-box;
}

.testimonial-text {
  margin: 0;
  padding: 0;
  border: 0;
  quotes: none;
}

.testimonial-text::before,
.testimonial-text::after {
  content: none;
}

.testimonial-text p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(0, 0, 0, 0.82);
  font-weight: 400;
}

.testimonial-footer {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
}

.testimonial-avatar {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.testimonial-avatar-placeholder {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(145deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.04));
  color: rgba(0, 0, 0, 0.55);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
  justify-content: center;
}

.testimonial-byline {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.testimonial-name {
  font-style: normal;
  font-size: 14px;
  font-weight: 700;
  color: #111;
  line-height: 1.25;
}

.testimonial-role {
  font-size: 14px;
  color: #888;
  line-height: 1.3;
}

@media (max-width: 991px) {
  .testimonials-masonry {
    column-count: 2;
    column-gap: 22px;
  }
}

@media (max-width: 767px) {
  .testimonials-masonry {
    column-count: 1;
    column-gap: 0;
  }

  .testimonial-card {
    margin-bottom: 16px;
  }
}

/* Background interaction hint (bottom-right) */

.bg-hint {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 8;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 8px 14px;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  /* border: 1px solid rgba(0, 0, 0, 0.06); */
  border-radius: 100px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05);
  font-size: 14px;
  font-weight: 450;
  color: rgba(0, 0, 0, 0.6);
  letter-spacing: 0.02em;
  pointer-events: none;
  user-select: none;
  opacity: 0;
  transform: translateY(8px);
  animation: bgHintIn 0.6s ease-out 0.8s forwards;
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}

@keyframes bgHintIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Hide hint while user is actively using the feature */
html.mesh-grab .bg-hint {
  opacity: 0;
  transform: translateY(4px);
}

.bg-hint-text {
  text-align: center;
  line-height: 1.2;
  font-size: 8px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.35);
}

.bg-hint-key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-bottom: 4px;
  border-radius: 7px;
  background: linear-gradient(180deg, #ffffff 0%, #f1f1f3 100%);
  border: 1px solid rgba(0, 0, 0, 0.12);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 2px 0 rgba(0, 0, 0, 0.09),
    0 3px 4px rgba(0, 0, 0, 0.06);
  font-size: 12px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.72);
  animation: bgHintKeyPress 2.6s ease-in-out infinite;
}

@keyframes bgHintKeyPress {
  0%,
  8% {
    transform: translateY(0);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.9),
      0 2px 0 rgba(0, 0, 0, 0.09),
      0 3px 4px rgba(0, 0, 0, 0.06);
  }
  14%,
  88% {
    transform: translateY(2px);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.7),
      0 0 0 rgba(0, 0, 0, 0.05),
      0 1px 2px rgba(0, 0, 0, 0.05);
  }
  94%,
  100% {
    transform: translateY(0);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.9),
      0 2px 0 rgba(0, 0, 0, 0.09),
      0 3px 4px rgba(0, 0, 0, 0.06);
  }
}

.bg-hint-plus {
  font-size: 12px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.35);
}

.bg-hint-mouse {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 24px;
  margin-bottom: 1px;
  animation: bgHintMouseDrag 2.6s ease-in-out infinite;
}

.bg-hint-mouse-icon {
  width: 22px;
  height: 24px;
  stroke: rgba(0, 0, 0, 0.72);
  display: block;
  overflow: visible;
  transform-origin: center top;
  animation: bgHintMousePress 2.6s ease-in-out infinite;
}

.bg-hint-mouse-click {
  fill: rgba(0, 0, 0, 0.25);
  stroke: none;
  opacity: 0;
  transform-origin: center top;
  animation: bgHintMouseClickFade 2.6s ease-in-out infinite;
}

.bg-hint-mouse-rays {
  stroke: rgba(0, 0, 0, 0.65);
  stroke-width: 1.6;
  opacity: 0;
  transform-origin: 5px 5px;
  animation: bgHintMouseRays 2.6s ease-in-out infinite;
}

@keyframes bgHintMouseRays {
  0%,
  14%,
  88%,
  100% {
    opacity: 0;
    transform: scale(0.55);
  }
  20%,
  82% {
    opacity: 1;
    transform: scale(1);
  }
}

/* @keyframes bgHintMousePress {
  0%,
  14%,
  88%,
  100% {
    transform: scaleY(1);
  }
  20%,
  82% {
    transform: scaleY(0.96);
  }
} */

@keyframes bgHintMouseClickFade {
  0%,
  14%,
  88%,
  100% {
    opacity: 0;
  }
  20%,
  82% {
    opacity: 1;
  }
}

/* .bg-hint-mouse-trail {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 1.5px;
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.18) 50%,
    rgba(0, 0, 0, 0) 100%
  );
  border-radius: 2px;
  transform: translate(-50%, -50%);
  opacity: 0;
  animation: bgHintMouseTrail 2.6s ease-in-out infinite;
} */

@keyframes bgHintMouseDrag {
  0%,
  14% {
    transform: translateX(-4px);
  }
  50% {
    transform: translateX(4px);
  }
  88%,
  100% {
    transform: translateX(-4px);
  }
}
/* 
@keyframes bgHintMouseTrail {
  0%,
  14%,
  88%,
  100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
} */

@media (max-width: 768px) {
  .bg-hint {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bg-hint-key,
  .bg-hint-mouse,
  .bg-hint-mouse-icon,
  .bg-hint-mouse-trail,
  .bg-hint-mouse-click,
  .bg-hint-mouse-rays {
    animation: none;
  }
  .bg-hint-mouse-trail,
  .bg-hint-mouse-click,
  .bg-hint-mouse-rays {
    opacity: 0;
  }
}

@media (max-width: 1560px) {
  .title {
    font-size: 72px;
  }

  .landingsub1 {
    font-size: 14px;
  }

  .landingsub2 {
    font-size: 18px;
  }

  .solid-btn {
    font-size: 15px;
  }
}

@media (max-width: 1370px) {
  .title {
    font-size: 70px;
  }
}

@media (max-width: 1280px) {
  .title {
    font-size: 62px;
  }

  .section-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    row-gap: 16px;
  }

  .section-header > [class*="col-"] {
    width: 100%;
    max-width: 100%;
  }
}

@media (max-width: 1120px) {
  .title {
    font-size: 50px;
  }

  .landingsub2 {
    font-size: 16px;
    margin-top: 6px;
    line-height: 1.6;
  }

  .solid-btn {
    font-size: 14px;
    gap: 4px;
    font-weight: 500;
  }

  .get-in-touch-btn {
    margin-top: 20px;
    padding: 10px 20px;
  }
}

@media (max-width: 990px) {
  .landing {
    width: 100%;
    padding-top: 20vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .landing > [class*="col-"] {
    width: 100%;
    max-width: 100%;
  }

  .landing .button-row {
    justify-content: center;
  }

  .get-in-touch-btn {
    margin-top: 20px;
    padding: 10px 20px;
  }

  /* Fix me image size on mobile and move to top */

  .landing > .col-lg-3 {
    order: -1;
    margin-bottom: 16px;
  }

  .me-wrapper {
    aspect-ratio: 1;
    max-width: 180px;
    width: 100%;
    margin: 0 auto;
  }

  .experience-section {
    padding-bottom: 10vh;
  }

  .work-section {
    padding-bottom: 10vh;
  }

  /* Experience Section - Single Column on Mobile */

  .experience-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .experience-row {
    padding: 32px 0;
  }

  .experience-row .pill {
    white-space: nowrap;
  }

  /* Ensure Instagram experience row has border-bottom on mobile */
  .experience-row:has(.pill.instagram) {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
  }
}

@media (max-width: 768px) {
  .container {
    max-width: 100%;
  }

  .landing {
    padding-top: 15vh;
  }

  .title {
    font-size: 34px;
    line-height: 1.2;
    margin-top: 0;
  }

  .landingsub2 {
    margin-top: 6px;
    line-height: 1.6;
    max-width: 80%;
    margin-left: auto;
    margin-right: auto;
  }

  .section-title {
    font-size: 32px;
  }

  .work-section {
    grid-template-columns: 1fr;
    row-gap: 24px;
    column-gap: 0;
  }

  .work-item-full,
  .work-item-half,
  .work-item-third {
    grid-column: 1 / -1;
  }

  .work-section .work-item img,
  .work-section .work-item picture img,
  .work-section .work-item video {
    border-radius: 4vw;
  }

  .footer-bottom {
    justify-content: center;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .footer-name {
    margin-right: -16px; /* cancel trailing space from letter-spacing so text stays centered */
  }
}