@import url("styles-base.css?v=20260517");

/* Hero avatar slideshow fix
   Uses the actual uploaded files in /assets:
   profile-1.jpg, profile-2.jpg, profile-3.jpg
*/
.avatar-orbit::before {
  content: "";
  position: absolute;
  z-index: 3;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  padding: 4px;
  background-image: url("assets/profile-1.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow:
    0 28px 70px rgba(80, 227, 194, 0.28),
    0 0 0 5px rgba(80, 227, 194, 0.7),
    0 0 0 9px rgba(255, 207, 90, 0.72);
  animation: heroAvatarSlideshow 9s infinite ease-in-out;
}

.avatar.profile-photo {
  opacity: 0 !important;
  visibility: hidden !important;
  position: absolute !important;
  pointer-events: none !important;
}

@keyframes heroAvatarSlideshow {
  0%, 30% {
    background-image: url("assets/profile-1.jpg");
    transform: scale(1);
  }
  33%, 63% {
    background-image: url("assets/profile-2.jpg");
    transform: scale(1.015);
  }
  66%, 96% {
    background-image: url("assets/profile-3.jpg");
    transform: scale(1);
  }
  100% {
    background-image: url("assets/profile-1.jpg");
    transform: scale(1);
  }
}

/* Light/contrast mode readability fix.
   The original bright yellow works on dark backgrounds but becomes weak on the pale theme.
*/
[data-theme="light"] .time {
  color: #7a4b00;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
}

[data-theme="light"] .timeline::before,
[data-theme="light"] .timeline:before {
  background: rgba(7, 17, 31, 0.22);
}

[data-theme="light"] .timeline-item > div {
  background: rgba(255, 255, 255, 0.86);
}

/* Flood Intelligence HD-style visual preview.
   The card shows a compact highlighted preview. Clicking Details opens the full visual inside the modal.
*/
.project-card.feature {
  position: relative;
  overflow: hidden;
}

.project-card.feature::after {
  content: "";
  display: block;
  width: min(100%, 620px);
  aspect-ratio: 16 / 10;
  min-height: unset;
  margin: 24px auto 0;
  border-radius: 22px;
  border: 1px solid rgba(80, 227, 194, 0.32);
  background-image:
    linear-gradient(145deg, rgba(7, 17, 31, 0.04), rgba(7, 17, 31, 0.16)),
    url("assets/flood-scene-preview.webp?v=hd-highlight-2");
  background-size: cover;
  background-position: center 42%;
  background-repeat: no-repeat;
  background-color: rgba(255, 255, 255, 0.055);
  filter: contrast(1.08) saturate(1.08);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.10),
    0 18px 40px rgba(0,0,0,.18),
    0 0 34px rgba(80, 227, 194, 0.10);
}

.project-card.feature::before {
  content: "HD visual highlight · Click Details for full map";
  position: absolute;
  left: 48px;
  bottom: 42px;
  z-index: 2;
  padding: 8px 12px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 999px;
  color: #07111f;
  background: linear-gradient(135deg, rgba(80, 227, 194, 0.92), rgba(255, 207, 90, 0.92));
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  box-shadow: 0 12px 30px rgba(0,0,0,.18);
}

[data-theme="light"] .project-card.feature::after {
  border-color: rgba(7, 17, 31, 0.18);
  background-color: rgba(255, 255, 255, 0.78);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.42),
    0 18px 36px rgba(7,17,31,.12),
    0 0 28px rgba(80, 227, 194, 0.12);
}

.modal-card.has-project-image {
  width: min(1120px, calc(100vw - 32px));
  max-height: calc(100vh - 40px);
  overflow: auto;
}

.modal-card.has-project-image #modal-points {
  margin-bottom: 18px;
}

.modal-project-visual {
  margin-top: 18px;
}

.modal-project-visual a {
  display: block;
  color: inherit;
  text-decoration: none;
}

.modal-project-visual img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.06);
  box-shadow: 0 18px 45px rgba(0,0,0,.25);
}

.modal-project-visual small {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  text-align: center;
}

@media (max-width: 640px) {
  .avatar-orbit::before {
    width: 148px;
    height: 148px;
  }

  .project-card.feature::after {
    width: min(100%, 420px);
    aspect-ratio: 4 / 3;
    margin-top: 18px;
    border-radius: 18px;
  }

  .project-card.feature::before {
    left: 34px;
    right: 34px;
    bottom: 34px;
    text-align: center;
    font-size: 10px;
  }

  .modal-card.has-project-image {
    width: min(100%, calc(100vw - 20px));
    padding: 24px;
  }
}