*{
  box-sizing:border-box;
  margin:0;
  padding:0;
  font-family:'Inter', sans-serif;
}

html, body{
  width:100%;
  height:100%;
}

body.no-scroll{
  overflow:hidden;
}

body{
  background:#191622;
  color:#F9F7F7;
}

#map{
  width:100vw;
  height:calc(100vh - 72px);
  margin-top:72px;
}

.hero-nav{
  position:fixed;
  top:0;
  left:0;
  right:0;
  height:72px;
  background:#191622;
  display:flex;
  align-items:center;
  padding:0 32px;
  z-index:9998;
}

.nav-brand{
  font-size:1.6rem;
  font-family:'Montserrat', sans-serif;
  font-weight:900;
  color:#F9F7F7;
  text-decoration:none;
}

.nav-center{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:32px;
}

.nav-link{
  color:#b2a1e9;
  text-decoration:none;
  font-size:0.95rem;
  font-weight:700;
}

.nav-link:hover{
  color:#F9F7F7;
}

.hero{
  position:relative;
  overflow:hidden;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:32px;
  padding-top:44px;
  background:#191622;
}

.hero-content{
  text-align:center;
  max-width:700px;
  color:#F9F7F7;
  margin-bottom:20vh;
  position:relative;
  z-index:2;
}

.hero-image{
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  transform:translateY(35%);
  opacity:0.8;
  pointer-events:none;
  z-index:0;
}

.hero-image-wobble{
  transform-origin:bottom center;
  animation:imageWobble 8s ease-in-out infinite;
}

@keyframes imageWobble{
  0%   { transform: translateY(35%) translateX(0)    rotate(0deg)    scale(1); }
  20%  { transform: translateY(34%) translateX(6px)  rotate(0.3deg)  scale(1.005); }
  40%  { transform: translateY(35.5%) translateX(-4px) rotate(-0.2deg) scale(0.998); }
  60%  { transform: translateY(34.5%) translateX(5px)  rotate(0.25deg) scale(1.004); }
  80%  { transform: translateY(35%) translateX(-3px) rotate(-0.15deg) scale(1.001); }
  100% { transform: translateY(35%) translateX(0)    rotate(0deg)    scale(1); }
}

.clouds-layer{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:1;
}

.cloud{
  position:absolute;
  pointer-events:none;
  opacity:0.85;
}

#c1{ width:100vw; top:10%; left:-10%;  animation: drift1 8s linear infinite; }
#c2{ width:100vw; top:5%;  left:5%;    animation: drift2 10s linear infinite; }
#c3{ width:100vw; top:20%; left:-5%;   animation: drift1 12s linear infinite reverse; }
#c4{ width:100vw; top:0%;  left:10%;   animation: drift2 9s linear infinite; }
#c5{ width:100vw; top:25%; left:-8%;   animation: drift1 11s linear infinite; }
#c6{ width:100vw; top:8%;  left:5%;    animation: drift2 13s linear infinite reverse; }
#c7{ width:100vw; top:30%; left:-5%;   animation: drift1 7s linear infinite; }
#c8{ width:100vw; top:15%; left:8%;    animation: drift2 10s linear infinite reverse; }
#c9{ width:100vw; top:22%; left:-8%;   animation: drift1 9s linear infinite; }

@keyframes drift1{
  0%   { transform: translateX(0)    translateY(0); }
  25%  { transform: translateX(18px)  translateY(-6px); }
  50%  { transform: translateX(32px)  translateY(0); }
  75%  { transform: translateX(18px)  translateY(6px); }
  100% { transform: translateX(0)    translateY(0); }
}

@keyframes drift2{
  0%   { transform: translateX(0)    translateY(0); }
  25%  { transform: translateX(-14px) translateY(5px); }
  50%  { transform: translateX(-26px) translateY(0); }
  75%  { transform: translateX(-14px) translateY(-5px); }
  100% { transform: translateX(0)    translateY(0); }
}


/* index page animation */
.hero-content h1 .accent{
  color:#9e8be3;
  font-family:'Montserrat', sans-serif;
  font-weight:900;
}


.hero-content h1{
  animation: hero-rise 1.2s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: 0s;
}

.hero-content p{
  animation: hero-fade 1.2s ease both;
  animation-delay: 0.4s;
}

.hero-content .btn{
  animation: hero-fade 1.2s ease both;
  animation-delay: 0.8s;
}

@keyframes hero-rise{
  from{
    opacity:0;
    transform:translateY(32px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

@keyframes hero-fade{
  from{ opacity:0; }
  to{ opacity:1; }
}

.hero-content h1{
  font-family:'Montserrat', sans-serif;
  font-weight:900;
  font-size:7rem;
  line-height:0.9;
  margin-bottom:16px;
}

.hero-content p{
  font-size:1.1rem;
  margin-top: 40px;
  margin-bottom:24px;
  line-height:1.6;
}

.btn{
  background:linear-gradient(135deg,#5a4bd0,#3b36c9);
  color:white;
  border:none;
  border-radius:12px;
  padding:14px 28px;
  cursor:pointer;
  text-decoration:none;
  display:inline-block;
  font-weight:700;
  font-size:1rem;
  text-transform:uppercase;
  letter-spacing:0.05em;
  box-shadow:0 8px 18px rgba(90,75,208,0.3);
}

.full-width{
  width:100%;
}

.floating-btn{
  position:fixed;
  top:84px;
  right:20px;
  z-index:1000;
  background:linear-gradient(135deg,#5a4bd0,#3b36c9);
  color:white;
  border:none;
  border-radius:999px;
  padding:14px 20px;
  font-size:1rem;
  font-weight:700;
  cursor:pointer;
  box-shadow:0 10px 28px rgba(90,75,208,0.35);
}

.modal{
  position:fixed;
  top:72px;
  left:0;
  right:0;
  bottom:0;
  background:transparent;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:2000;
  padding:20px;
}

.hidden{
  display:none !important;
}

.modal-card{
  width:100%;
  max-width:420px;
  background:#2e2b37;
  border-radius:18px;
  padding:20px;
  box-shadow:0 12px 30px rgba(0,0,0,0.2);
}

.modal-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:12px;
}

.close-btn{
  background:none;
  border:none;
  font-size:1.6rem;
  cursor:pointer;
}

.location-toast{
  position:fixed;
  bottom:40px;
  left:50%;
  transform:translateX(-50%);
  background:#2e2b37;
  color:#F9F7F7;
  padding:12px 24px;
  border-radius:999px;
  font-weight:700;
  font-size:0.95rem;
  z-index:1000;
  pointer-events:none;
}

.location-status{
  font-size:0.9rem;
  color:#9e8be3;
  padding:8px 10px;
  background:#2e2b37;
  border-radius:8px;
  text-align:center;
}

.location-status.location-set{
  color:#F9F7F7;
  background:#2d4a2d;
}

.helper-text{
  color:#75737c;
  margin-bottom:12px;
  font-size:0.95rem;
}

form{
  display:flex;
  flex-direction:column;
  gap:10px;
}

input, textarea, select{
  width:100%;
  padding:10px;
  border:1px solid #45424d;
  border-radius:10px;
  background:#2e2b37;
  color:#F9F7F7;
}

.popup-content{
  width:340px;
}

.popup-content h3{
  margin-bottom:10px;
  font-size:0.95rem;
}

.popup-entries-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:6px;
  margin-bottom:10px;
}

.popup-entry{
  display:flex;
  flex-direction:column;
}

.popup-entry img{
  width:100%;
  aspect-ratio:1;
  object-fit:cover;
  border-radius:6px;
}

.popup-date{
  font-size:0.7rem;
  color:#75737c;
  margin-top:3px;
}

.popup-caption{
  font-size:0.75rem;
  color:#8f8d94;
}

.popup-date{
  font-size:0.9rem;
  color:#75737c;
  margin-bottom:4px;
}

.popup-caption{
  font-size:0.95rem;
  color:#8f8d94;
}

.custom-marker {
  filter: hue-rotate(200deg) saturate(2);
}

.filter-bar {
  position: fixed;
  top: 80px;
  left: 20px;
  z-index: 1000;
  display: flex;
  gap: 10px;
}

.filter-bar button {
  background: #2e2b37;
  color: #F9F7F7;
  border: none;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 700;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}

.filter-bar button.active {
  background: #5a4bd0;
  color: #F9F7F7;
  box-shadow: 0 6px 20px rgba(90,75,208,0.5);
}

.trace-popup .leaflet-popup-content-wrapper{
  border-radius:18px;
  padding:0;
  overflow:hidden;
  background:#2e2b37;
  box-shadow:0 18px 42px rgba(0,0,0,0.4);
}

.trace-popup .leaflet-popup-content{
  margin:0;
  width:auto !important;
}

.trace-popup .leaflet-popup-tip{
  background:#2e2b37;
}

.popup-content{
  width:100%;
  padding:16px;
  background:#2e2b37;
}

.popup-content-animated{
  transform-origin:bottom center;
}

.popup-opening .leaflet-popup-content-wrapper{
  animation:popupRise 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes popupRise{
  0%{
    opacity:0;
    transform:translateY(16px) scale(0.96);
  }
  100%{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}

.popup-header-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}

.popup-header-row h3{
  margin:0;
  font-size:1rem;
  font-weight:700;
  color:#F9F7F7;
}

.timeline-count{
  background:#45424d;
  color:#F9F7F7;
  border-radius:999px;
  padding:6px 10px;
  font-size:0.75rem;
  font-weight:700;
  white-space:nowrap;
}

.timeline-scroll{
  overflow-x:auto;
  overflow-y:hidden;
  padding-bottom:8px;
  margin-bottom:12px;
  scroll-behavior:smooth;
}

.timeline-scroll::-webkit-scrollbar{
  height:8px;
}

.timeline-scroll::-webkit-scrollbar-track{
  background:#2e2b37;
  border-radius:999px;
}

.timeline-scroll::-webkit-scrollbar-thumb{
  background:#5a4bd0;
  border-radius:999px;
}

.timeline-track{
  display:flex;
  align-items:flex-start;
  gap:18px;
  min-width:max-content;
  padding:4px 2px 6px 2px;
}

.timeline-entry{
  width:170px;
  flex:0 0 170px;
}

.timeline-node-wrap{
  display:flex;
  align-items:center;
  margin-bottom:10px;
  min-height:14px;
}

.timeline-node{
  width:14px;
  height:14px;
  border-radius:50%;
  background:#5a4bd0;
  border:3px solid #191622;
  box-shadow:0 0 0 2px #45424d;
  flex:0 0 auto;
}

.timeline-line{
  height:3px;
  width:100%;
  background:linear-gradient(90deg,#5a4bd0,#45424d);
  margin-left:8px;
  border-radius:999px;
}

.timeline-card{
  background:#2e2b37;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 4px 14px rgba(0,0,0,0.3);
  border:1px solid #45424d;
}

.timeline-card img{
  width:100%;
  height:120px;
  object-fit:cover;
  display:block;
}

.timeline-meta{
  padding:10px;
}

.timeline-date{
  font-size:0.8rem;
  font-weight:700;
  color:#9e8be3;
  margin-bottom:6px;
}

.timeline-caption{
  font-size:0.82rem;
  line-height:1.35;
  color:#8f8d94;
}

@media (max-width: 640px){
  .popup-content{
    width:300px;
    max-width:300px;
  }

  .timeline-entry{
    width:150px;
    flex:0 0 150px;
  }

  .timeline-card img{
    height:100px;
  }
}

.trace-popup .leaflet-popup-content-wrapper{
  border-radius:20px;
  padding:0;
  overflow:hidden;
  background:#2e2b37;
  box-shadow:0 20px 48px rgba(0,0,0,0.45);
  transform-origin:bottom center;
  backface-visibility:hidden;
  will-change:transform, opacity;
}

.trace-popup .leaflet-popup-content{
  margin:0;
  width:auto !important;
}

.trace-popup .leaflet-popup-tip{
  background:#2e2b37;
  box-shadow:none;
  transform-origin:center;
  will-change:transform, opacity;
}

/* main popup entrance */
.popup-opening .leaflet-popup-content-wrapper{
  animation:popupZoomIn 520ms cubic-bezier(0.22, 1, 0.36, 1);
}

.popup-opening .leaflet-popup-tip{
  animation:popupTipIn 520ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* animate the internal content slightly after the shell */
.popup-opening .popup-content{
  animation:popupContentFade 420ms ease-out;
}

.popup-opening .popup-header-row{
  animation:popupHeaderSlide 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* stagger timeline cards */
.popup-opening .timeline-entry{
  opacity:0;
  transform:translateY(12px) scale(0.96);
  animation:timelineCardIn 420ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.popup-opening .timeline-entry:nth-child(1){ animation-delay:80ms; }
.popup-opening .timeline-entry:nth-child(2){ animation-delay:130ms; }
.popup-opening .timeline-entry:nth-child(3){ animation-delay:180ms; }
.popup-opening .timeline-entry:nth-child(4){ animation-delay:230ms; }
.popup-opening .timeline-entry:nth-child(5){ animation-delay:280ms; }
.popup-opening .timeline-entry:nth-child(6){ animation-delay:330ms; }

.popup-opening .contribute-btn{
  opacity:0;
  transform:translateY(8px);
  animation:popupButtonIn 320ms ease-out 220ms forwards;
}

@keyframes popupZoomIn{
  0%{
    opacity:0;
    transform:translateY(18px) scale(0.88);
    filter:blur(2px);
  }
  60%{
    opacity:1;
    transform:translateY(-2px) scale(1.02);
    filter:blur(0);
  }
  100%{
    opacity:1;
    transform:translateY(0) scale(1);
    filter:blur(0);
  }
}

@keyframes popupTipIn{
  0%{
    opacity:0;
    transform:translateY(8px) scale(0.7) rotate(45deg);
  }
  100%{
    opacity:1;
    transform:translateY(0) scale(1) rotate(45deg);
  }
}

@keyframes popupContentFade{
  0%{
    opacity:0;
  }
  100%{
    opacity:1;
  }
}

@keyframes popupHeaderSlide{
  0%{
    opacity:0;
    transform:translateY(10px);
  }
  100%{
    opacity:1;
    transform:translateY(0);
  }
}

@keyframes timelineCardIn{
  0%{
    opacity:0;
    transform:translateY(12px) scale(0.96);
  }
  100%{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}

@keyframes popupButtonIn{
  0%{
    opacity:0;
    transform:translateY(8px);
  }
  100%{
    opacity:1;
    transform:translateY(0);
  }
}

/* optional: make horizontal scrolling feel nicer */
.timeline-scroll{
  scroll-behavior:smooth;
}

/* reduced motion fallback */
@media (prefers-reduced-motion: reduce){
  .popup-opening .leaflet-popup-content-wrapper,
  .popup-opening .leaflet-popup-tip,
  .popup-opening .popup-content,
  .popup-opening .popup-header-row,
  .popup-opening .timeline-entry,
  .popup-opening .contribute-btn{
    animation:none !important;
    opacity:1 !important;
    transform:none !important;
    filter:none !important;
  }
}
/* ========================= */
/* TRACE POPUP ANIMATIONS */
/* ========================= */

.trace-popup .leaflet-popup-content-wrapper{
  border-radius:20px;
  padding:0;
  overflow:hidden;
  background:#2e2b37;
  box-shadow:0 20px 48px rgba(0,0,0,0.45);
  transform-origin:bottom center;
  backface-visibility:hidden;
  will-change:transform, opacity;
}

.trace-popup .leaflet-popup-content{
  margin:0;
  width:auto !important;
}

.trace-popup .leaflet-popup-tip{
  background:#2e2b37;
  box-shadow:none;
  transform-origin:center;
  will-change:transform, opacity;
}

/* MAIN POPUP ANIMATION */
.popup-opening .leaflet-popup-content-wrapper{
  animation:popupZoomIn 520ms cubic-bezier(0.22, 1, 0.36, 1);
}

.popup-opening .leaflet-popup-tip{
  animation:popupTipIn 520ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* CONTENT FADE */
.popup-opening .popup-content{
  animation:popupContentFade 560ms ease-out;
}

/* HEADER */
.popup-opening .popup-header-row{
  animation:popupHeaderSlide 560ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* TIMELINE CARDS (STAGGERED) */
.popup-opening .timeline-entry{
  opacity:0;
  transform:translateY(12px) scale(0.96);
  animation:timelineCardIn 560ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.popup-opening .timeline-entry:nth-child(1){ animation-delay:80ms; }
.popup-opening .timeline-entry:nth-child(2){ animation-delay:180ms; }
.popup-opening .timeline-entry:nth-child(3){ animation-delay:280ms; }
.popup-opening .timeline-entry:nth-child(4){ animation-delay:380; }
.popup-opening .timeline-entry:nth-child(5){ animation-delay:480; }
.popup-opening .timeline-entry:nth-child(6){ animation-delay:580; }

/* BUTTON */
.popup-opening .contribute-btn{
  opacity:0;
  transform:translateY(8px);
  animation:popupButtonIn 320ms ease-out 220ms forwards;
}

/* ========================= */
/* KEYFRAMES */
/* ========================= */

@keyframes popupZoomIn{
  0%{
    opacity:0;
    transform:translateY(18px) scale(0.88);
    filter:blur(2px);
  }
  60%{
    opacity:1;
    transform:translateY(-2px) scale(1.02);
    filter:blur(0);
  }
  100%{
    opacity:1;
    transform:translateY(0) scale(1);
    filter:blur(0);
  }
}

@keyframes popupTipIn{
  0%{
    opacity:0;
    transform:translateY(8px) scale(0.7) rotate(45deg);
  }
  100%{
    opacity:1;
    transform:translateY(0) scale(1) rotate(45deg);
  }
}

@keyframes popupContentFade{
  0%{ opacity:0; }
  100%{ opacity:1; }
}

@keyframes popupHeaderSlide{
  0%{
    opacity:0;
    transform:translateY(10px);
  }
  100%{
    opacity:1;
    transform:translateY(0);
  }
}

@keyframes timelineCardIn{
  0%{
    opacity:0;
    transform:translateY(12px) scale(0.96);
  }
  100%{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}

@keyframes popupButtonIn{
  0%{
    opacity:0;
    transform:translateY(8px);
  }
  100%{
    opacity:1;
    transform:translateY(0);
  }
}

/* SCROLL SMOOTHNESS */
.timeline-scroll{
  scroll-behavior:smooth;
}

/* ACCESSIBILITY */
@media (prefers-reduced-motion: reduce){
  .popup-opening *{
    animation:none !important;
    transform:none !important;
    opacity:1 !important;
    filter:none !important;
  }
}

/* create pin modal animation */
.modal.modal-opening{
  animation:modalBackdropFade 260ms ease-out;
}

.modal.modal-opening .modal-card{
  animation:modalZoomIn 380ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes modalBackdropFade{
  from{
    opacity:0;
  }
  to{
    opacity:1;
  }
}

@keyframes modalZoomIn{
  0%{
    opacity:0;
    transform:translateY(18px) scale(0.9);
    filter:blur(2px);
  }
  60%{
    opacity:1;
    transform:translateY(-2px) scale(1.02);
    filter:blur(0);
  }
  100%{
    opacity:1;
    transform:translateY(0) scale(1);
    filter:blur(0);
  }
}

/* newly created pin celebration */
.leaflet-interactive.pin-drop-wobble{
  transform-origin:center;
  animation:pinDropWobble 1100ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes pinDropWobble{
  0%{
    transform:translateY(-28px) scale(0.75);
    opacity:0.2;
  }
  25%{
    transform:translateY(0) scale(1.18);
    opacity:1;
  }
  38%{
    transform:translateY(0) scale(0.94);
  }
  52%{
    transform:translateY(0) scale(1.05);
  }
  66%{
    transform:translateY(0) scale(0.98);
  }
  78%{
    transform:translateX(-2px) translateY(0) scale(1.02);
  }
  88%{
    transform:translateX(2px) translateY(0) scale(0.99);
  }
  100%{
    transform:translateX(0) translateY(0) scale(1);
    opacity:1;
  }
}

/* ========================= */
/* GLOBAL BUTTON HOVER FX */
/* ========================= */

.btn,
.floating-btn,
.filter-bar button,
.nav-dropdown-item,
.pin-back,
.delete-pin-btn,
.nav-auth-btn,
.nav-logout{
  position:relative;
  overflow:hidden;
  transition:
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 220ms cubic-bezier(0.22, 1, 0.36, 1),
    background-color 220ms ease,
    color 220ms ease,
    border-color 220ms ease;
}

/* floating-btn must stay fixed — override position:relative above */
.floating-btn{
  position:fixed;
}

/* keyboard focus */
.btn:focus-visible,
.floating-btn:focus-visible,
.filter-bar button:focus-visible,
.nav-dropdown-item:focus-visible,
.pin-back:focus-visible,
.delete-pin-btn:focus-visible,
.nav-auth-btn:focus-visible,
.nav-logout:focus-visible{
  outline:2px solid #9e8be3;
  outline-offset:3px;
}

/* ========================= */
/* PRIMARY BUTTONS */
/* sweeping highlight stroke */
/* ========================= */

.btn::before,
.floating-btn::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:inherit;
  background:
    linear-gradient(
      120deg,
      transparent 20%,
      rgba(255,255,255,0.08) 35%,
      rgba(255,255,255,0.45) 50%,
      rgba(255,255,255,0.08) 65%,
      transparent 80%
    );
  transform:translateX(-140%);
  opacity:0;
  pointer-events:none;
}

.btn:hover,
.floating-btn:hover{
  transform:translateY(-3px) scale(1.015);
  box-shadow:0 14px 28px rgba(90,75,208,0.28);
}

.btn:hover::before,
.floating-btn:hover::before{
  animation:buttonSheen 700ms cubic-bezier(0.22, 1, 0.36, 1);
  opacity:1;
}

.btn:active,
.floating-btn:active{
  transform:translateY(-1px) scale(0.99);
}

/* floating add pin gets stronger drama */
.floating-btn:hover{
  box-shadow:
    0 16px 34px rgba(90,75,208,0.34),
    0 0 0 6px rgba(90,75,208,0.10);
}

/* ========================= */
/* FILTER BUTTONS */
/* fill wipe effect */
/* ========================= */

.filter-bar button{
  isolation:isolate;
}

.filter-bar button::before{
  content:"";
  position:absolute;
  inset:0;
  background:#5a4bd0;
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
  z-index:-1;
  border-radius:inherit;
}

.filter-bar button:hover{
  color:#F9F7F7;
  transform:translateY(-2px);
  border-color:#5a4bd0;
  box-shadow:0 8px 18px rgba(90,75,208,0.3);
}

.filter-bar button:hover::before{
  transform:scaleX(1);
}

.filter-bar button.active:hover{
  transform:translateY(-2px) scale(1.02);
}

/* ========================= */
/* NAV DROPDOWN + TEXT BUTTONS */
/* underline sweep */
/* ========================= */

.nav-dropdown-item,
.pin-back{
  position:relative;
}

.nav-dropdown-item::after,
.pin-back::after{
  content:"";
  position:absolute;
  left:12px;
  right:12px;
  bottom:8px;
  height:2px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
  opacity:0.7;
}

.pin-back::after{
  left:0;
  right:0;
  bottom:-3px;
}

.nav-dropdown-item:hover,
.pin-back:hover{
  transform:translateX(2px);
}

.nav-dropdown-item:hover::after,
.pin-back:hover::after{
  transform:scaleX(1);
}

/* ========================= */
/* DESTRUCTIVE ACTIONS */
/* restrained red emphasis */
/* ========================= */

.delete-pin-btn:hover,
.nav-logout:hover,
.nav-dropdown-logout:hover{
  color:#fff !important;
  background:#c0392b !important;
  border-color:#c0392b !important;
  box-shadow:0 10px 22px rgba(192,57,43,0.22);
  transform:translateY(-2px);
}

/* if delete button is text-only */
.delete-pin-btn{
  border-radius:8px;
  padding:6px 10px;
}

/* ========================= */
/* AUTH / TAB STYLE BUTTONS */
/* little press + glow */
/* ========================= */

.auth-tab,
.nav-link{
  transition:
    transform 180ms cubic-bezier(0.22, 1, 0.36, 1),
    color 180ms ease,
    background-color 180ms ease,
    box-shadow 180ms ease;
}

.auth-tab:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 18px rgba(0,0,0,0.10);
}

.nav-link{
  position:relative;
}

.nav-link::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-6px;
  width:100%;
  height:2px;
  background:#b2a1e9;
  transform:scaleX(0);
  transform-origin:center;
  transition:transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.nav-link:hover::after{
  transform:scaleX(1);
}

/* ========================= */
/* KEYFRAMES */
/* ========================= */

@keyframes buttonSheen{
  0%{
    transform:translateX(-140%);
  }
  100%{
    transform:translateX(140%);
  }
}

/* ========================= */
/* REDUCED MOTION */
/* ========================= */

@media (prefers-reduced-motion: reduce){
  .btn,
  .floating-btn,
  .filter-bar button,
  .nav-dropdown-item,
  .pin-back,
  .delete-pin-btn,
  .nav-auth-btn,
  .nav-logout,
  .auth-tab,
  .nav-link{
    transition:none !important;
  }

  .btn::before,
  .floating-btn::before,
  .filter-bar button::before,
  .nav-dropdown-item::after,
  .pin-back::after,
  .nav-link::after{
    display:none !important;
  }

  .btn:hover,
  .floating-btn:hover,
  .filter-bar button:hover,
  .nav-dropdown-item:hover,
  .pin-back:hover,
  .delete-pin-btn:hover,
  .nav-logout:hover,
  .nav-dropdown-logout:hover,
  .auth-tab:hover{
    transform:none !important;
    box-shadow:none !important;
  }
}

/* ========================= */
/* STAR PINS */
/* ========================= */

.trace-star-wrapper{
  background:transparent;
  border:none;
}

/* star shape */
.trace-star{
  width:26px;
  height:26px;
  background:linear-gradient(145deg,#9e8be3,#5a4bd0);
  clip-path:polygon(
    50% 0%,
    61% 35%,
    98% 35%,
    68% 57%,
    79% 91%,
    50% 70%,
    21% 91%,
    32% 57%,
    2% 35%,
    39% 35%
  );
  box-shadow:
    0 6px 14px rgba(90,75,208,0.4),
    0 0 6px rgba(158,139,227,0.6);
  transition:
    transform 200ms cubic-bezier(0.22,1,0.36,1),
    box-shadow 200ms ease;
  position:relative;
}

/* glow core */
.trace-star::after{
  content:"";
  position:absolute;
  inset:4px;
  border-radius:50%;
  background:radial-gradient(circle,#ffffff 0%, transparent 70%);
  opacity:0.6;
}
/* ========================= */
/* STAR PINS (CLEAN + OPAQUE) */
/* ========================= */

.trace-star-wrapper{
  background:transparent;
  border:none;
}

/* base star (NO animation, NO glow spam) */
.trace-star{
  width:26px;
  height:26px;
  background:#5a4bd0; /* solid color */
  clip-path:polygon(
    50% 0%,
    61% 35%,
    98% 35%,
    68% 57%,
    79% 91%,
    50% 70%,
    21% 91%,
    32% 57%,
    2% 35%,
    39% 35%
  );

  /* subtle depth only */
  box-shadow:0 4px 10px rgba(90,75,208,0.25);

  transition:
    transform 200ms cubic-bezier(0.22,1,0.36,1),
    box-shadow 200ms ease;

  position:relative;
}

/* remove idle glow core (keep it clean) */
.trace-star::after{
  display:none;
}

/* ========================= */
/* TWINKLE ON HOVER */
/* ========================= */

.trace-star-wrapper:hover .trace-star{
  animation:starTwinkle 600ms cubic-bezier(0.22,1,0.36,1);
  transform:scale(1.25);
  box-shadow:
    0 10px 22px rgba(90,75,208,0.5),
    0 0 12px rgba(158,139,227,0.6);
}

/* sparkle burst */
.trace-star-wrapper:hover .trace-star::before{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius:50%;
  background:
    radial-gradient(circle at 20% 30%, white 0%, transparent 30%),
    radial-gradient(circle at 80% 40%, white 0%, transparent 30%),
    radial-gradient(circle at 50% 80%, white 0%, transparent 30%);
  opacity:0;
  animation:starSparkle 600ms ease-out forwards;
}

/* ========================= */
/* KEYFRAMES */
/* ========================= */

@keyframes starTwinkle{
  0%{
    transform:scale(1);
  }
  40%{
    transform:scale(1.35);
  }
  70%{
    transform:scale(1.15);
  }
  100%{
    transform:scale(1.25);
  }
}

@keyframes starSparkle{
  0%{
    opacity:0;
    transform:scale(0.6);
  }
  40%{
    opacity:1;
  }
  100%{
    opacity:0;
    transform:scale(1.4);
  }
}