.hobby-card.is-fishing,
.hobby-card.is-motorcycle {
  isolation: isolate;
}

.hobby-card.is-fishing {
  background: transparent;
}
.hobby-card.is-motorcycle { background-color: #07101a; }

.hobby-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(280px, auto));
  align-items: stretch;
}

.hobby-card.is-fishing {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
  min-height: 0;
  padding: 0;
  grid-template-columns: minmax(0, 1.2fr) minmax(240px, .8fr);
  grid-template-rows: minmax(360px, 1fr) auto;
  gap: 0;
}

.hobby-card.is-vibecoding {
  grid-column: 3 / 5;
  grid-row: 1;
}

.hobby-card.is-motorcycle {
  grid-column: 3;
  grid-row: 2;
}

.hobby-card.is-research {
  grid-column: 4;
  grid-row: 2;
}

.hobby-card.is-motorcycle::before {
  z-index: 1;
}

.hobby-card.is-fishing::before {
  display: none;
}

.hobby-card.is-fishing::after,
.hobby-card.is-motorcycle::after {
  content: '';
  position: absolute;
  z-index: 0;
  inset: 0;
  background-repeat: no-repeat;
  background-size: cover;
  pointer-events: none;
  transform: scale(1.015);
  transition: transform .7s cubic-bezier(.2,.68,.28,1), filter .35s ease;
}

.hobby-card.is-fishing::after {
  display: block;
  z-index: 1;
  background-image: linear-gradient(180deg, rgba(4, 8, 14, 0) 0%, rgba(4, 8, 14, .08) 46%, rgba(4, 8, 14, .32) 100%);
}

.hobby-card.is-motorcycle::after {
  background-image:
    linear-gradient(180deg, rgba(4, 8, 14, .34) 0%, rgba(4, 8, 14, .72) 47%, rgba(4, 8, 14, .97) 100%),
    linear-gradient(90deg, rgba(4, 8, 14, .78) 0%, transparent 82%);
  background-position: center;
}

.hobby-card.is-fishing > *:not(.hobby-photo-reel),
.hobby-card.is-motorcycle > *:not(.motorcycle-photo-reel) {
  position: relative;
  z-index: 2;
}

.hobby-photo-reel {
  position: absolute !important;
  z-index: 0 !important;
  inset: 0 !important;
  min-height: 100%;
  overflow: hidden;
  pointer-events: none;
  border-bottom: 0;
  background: #07101a;
}

.hobby-photo-reel img {
  position: absolute;
  inset: -14% 0 0 0;
  width: 100%;
  height: 114%;
  object-fit: cover;
  object-position: center 68%;
  opacity: 0;
  filter: none;
  animation: fishing-photo-slide 36s infinite;
}

.hobby-photo-reel img:nth-child(2) { animation-delay: 6s; object-position: center 72%; }
.hobby-photo-reel img:nth-child(3) { animation-delay: 12s; object-position: center 58%; }
.hobby-photo-reel img:nth-child(4) { animation-delay: 18s; object-position: center 78%; }
.hobby-photo-reel img:nth-child(5) { animation-delay: 24s; object-position: center 72%; }
.hobby-photo-reel img:nth-child(6) { animation-delay: 30s; object-position: center 62%; }

.motorcycle-photo-reel {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  background: #05080e;
}

.motorcycle-photo-reel img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
  opacity: 0;
  animation: motorcycle-photo-slide 24s infinite;
}

.motorcycle-photo-reel img:nth-child(2) { animation-delay: 6s; object-position: center 52%; }
.motorcycle-photo-reel img:nth-child(3) { animation-delay: 12s; object-position: center 52%; }
.motorcycle-photo-reel img:nth-child(4) { animation-delay: 18s; object-position: center 48%; }

@keyframes fishing-photo-slide {
  0%, 16.7% { opacity: 1; transform: scale(1.015); }
  20%, 100% { opacity: 0; transform: scale(1.075); }
}

@keyframes motorcycle-photo-slide {
  0%, 22% { opacity: 1; transform: scale(1.015); }
  27%, 100% { opacity: 0; transform: scale(1.07); }
}

.hobby-card.is-fishing:hover::after,
.hobby-card.is-motorcycle:hover::after {
  transform: scale(1.055);
  filter: saturate(1) contrast(1.06);
}

html .hobby-card.is-fishing > div:not(.hobby-photo-reel),
html[data-palette] .hobby-card.is-fishing > div:not(.hobby-photo-reel) {
  grid-column: 1;
  grid-row: 2;
  margin: .75rem 0 .75rem .75rem;
  padding: 1.15rem 1.25rem;
  border: 1px solid color-mix(in srgb, var(--gold) 24%, rgba(255, 255, 255, .12));
  border-radius: 15px;
  background: rgba(6, 10, 16, .2) !important;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.hobby-card.is-fishing h3,
.hobby-card.is-motorcycle h3 {
  color: #f5fbff;
  text-shadow: 0 2px 20px rgba(0, 0, 0, .72);
}

.hobby-card.is-fishing > div > p,
.hobby-card.is-motorcycle > p {
  color: #d4dde5;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .92);
}

.hobby-card.is-motorcycle .hobby-icon,
.hobby-card.is-motorcycle .hobby-tags span {
  background: rgba(3, 9, 15, .72);
  backdrop-filter: blur(7px);
}

html .hobby-card.is-fishing .hobby-icon,
html[data-palette] .hobby-card.is-fishing .hobby-icon,
html .hobby-card.is-fishing .hobby-tags span,
html[data-palette] .hobby-card.is-fishing .hobby-tags span {
  background: rgba(6, 10, 16, .26) !important;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

html .hobby-card.is-fishing .fishing-profile,
html[data-palette] .hobby-card.is-fishing .fishing-profile {
  grid-column: 2;
  grid-row: 2;
  align-self: stretch;
  justify-content: space-between;
  height: auto;
  margin: .75rem;
  border-color: color-mix(in srgb, var(--gold) 24%, rgba(255, 255, 255, .12));
  background: rgba(6, 10, 16, .2) !important;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

html .hobby-card.is-fishing .hobby-social,
html[data-palette] .hobby-card.is-fishing .hobby-social {
  border-color: rgba(255, 255, 255, .16);
  background: rgba(6, 10, 16, .24) !important;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

@media (max-width: 1050px) {
  .hobby-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto;
  }

  .hobby-card.is-fishing {
    grid-column: 1 / -1;
    grid-row: auto;
    min-height: 560px;
  }

  .hobby-card.is-vibecoding,
  .hobby-card.is-motorcycle,
  .hobby-card.is-research {
    grid-column: auto;
    grid-row: auto;
  }
}

@media (max-width: 620px) {
  .hobby-grid {
    grid-template-columns: 1fr;
  }

  .hobby-card.is-fishing,
  .hobby-card.is-vibecoding,
  .hobby-card.is-motorcycle,
  .hobby-card.is-research {
    grid-column: auto;
    grid-row: auto;
  }

  .hobby-card.is-fishing {
    min-height: auto;
    grid-template-columns: 1fr;
    grid-template-rows: minmax(280px, 52vw) auto auto;
  }

  .hobby-photo-reel {
    min-height: 100%;
  }

  html .hobby-card.is-fishing > div:not(.hobby-photo-reel),
  html[data-palette] .hobby-card.is-fishing > div:not(.hobby-photo-reel) {
    grid-column: 1;
    grid-row: 2;
    margin: .75rem;
  }

  html .hobby-card.is-fishing .fishing-profile,
  html[data-palette] .hobby-card.is-fishing .fishing-profile {
    grid-column: 1;
    grid-row: 3;
    height: auto;
    margin: 0 .75rem .75rem;
  }

  .hobby-photo-reel img {
    inset: -10% 0 0 0;
    height: 110%;
    object-position: center 58%;
  }
  .hobby-photo-reel img:nth-child(2),
  .hobby-photo-reel img:nth-child(3),
  .hobby-photo-reel img:nth-child(4),
  .hobby-photo-reel img:nth-child(5),
  .hobby-photo-reel img:nth-child(6) { object-position: center 64%; }

  .hobby-card.is-motorcycle::after {
    background-position: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hobby-card.is-fishing::after,
  .hobby-card.is-motorcycle::after {
    transition: none;
  }

  .hobby-photo-reel img {
    display: none;
    animation: none;
  }

  .motorcycle-photo-reel img {
    display: none;
    animation: none;
  }

  .hobby-photo-reel img:first-child {
    display: block;
    opacity: 1;
    transform: scale(1.015);
  }

  .motorcycle-photo-reel img:first-child {
    display: block;
    opacity: 1;
    transform: scale(1.015);
  }

  .hobby-card.is-fishing:hover::after,
  .hobby-card.is-motorcycle:hover::after {
    transform: scale(1.015);
  }
}