:root{
  --navy: #071433;
  --goldA: #B38728; --goldB: #FBF5B7; --goldC: #AA771C;
  --cream: #f6efe6;
}
body { font-family: 'Roboto', system-ui, sans-serif; background: var(--navy); }
#__rail_spacer { display: none; visibility: hidden; }

/* text gold gradient */
.text-gold-gradient {
  background: linear-gradient(145deg, var(--goldA) 0%, var(--goldB) 50%, var(--goldC) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-size: 200% 100%; animation: gold-shine 5s linear infinite;
}
.text-gold-gradient-bg {
  background: linear-gradient(145deg, var(--goldA) 0%, var(--goldB) 50%, var(--goldC) 100%);
  background-size: 200% 100%; animation: gold-shine 5s linear infinite;
}
@keyframes gold-shine { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* nav */
#siteHeader { background: linear-gradient(180deg, rgba(7,20,51,0.45), rgba(7,20,51,0.25)); }
#siteHeader.solid { background: linear-gradient(180deg, rgba(6,12,28,0.96), rgba(6,12,28,0.96)); box-shadow: 0 8px 30px rgba(2,6,23,0.6); }
.nav-link { color: rgba(255,255,255,0.9); font-weight:600; transition: color .25s; }
.nav-link:hover { color: var(--goldB); }

/* hero */
#home { min-height: 90vh; position: relative; }
#home .btn-primary {
  background: linear-gradient(90deg, var(--goldA), var(--goldC)); color: #071433;
  box-shadow: 0 8px 30px rgba(179,135,40,0.12); transition: transform .25s ease, box-shadow .25s ease;
}
#home .btn-primary:hover { transform: translateY(-3px); box-shadow: 0 12px 35px rgba(179,135,40,0.2); }

/* Hero Title */
#heroTitle { position: relative; }
#heroDragger .dragger-icon { transform: rotate(90deg) scale(0.9); box-shadow: 0 0 20px rgba(0,0,0,0.4); opacity: 0.6; transition: all .3s ease; }
#heroDragger:hover .dragger-icon { opacity: 1; transform: rotate(90deg) scale(1); }
#typeCursor { animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* TIMELINE (Modified Height & Styles) */
#timelineScroller { 
  /* Height is now auto, padding defines size */
  overflow-x: auto; overflow-y: hidden; position:relative; cursor: grab;
  -ms-overflow-style: none; scrollbar-width: none; 
}
#timelineScroller::-webkit-scrollbar { display: none; }
#timelineScroller.active { cursor: grabbing; }

#timelineRail { 
  padding: 24px 24px; /* Reduced padding to reduce gap */
  gap: 24px; 
  display: inline-flex; align-items: center; 
}

.milestone {
  min-width: 280px; max-width:300px; border-radius:12px; padding:18px; 
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.02));
  border: 1px solid rgba(255,255,255,0.04); 
  transform:translateY(20px) scale(.98); opacity:0; 
  transition: all .6s cubic-bezier(.2,.9,.2,1);
  user-select: none;
}
.milestone.in-view { transform:none; opacity:1; }
.milestone .year { color: var(--goldB); font-weight:800; font-size: 1.2rem; }

/* NEW: Timeline Dots */
.timeline-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  cursor: pointer;
  transition: all 0.3s ease;
}
.timeline-dot.active {
  background: var(--goldA);
  transform: scale(1.3);
  box-shadow: 0 0 10px rgba(179, 135, 40, 0.5);
}

/* Signature */
.signature-gold {
  background: linear-gradient(145deg, var(--goldA) 0%, var(--goldB) 50%, var(--goldC) 100%);
  -webkit-mask-image: url(assets/signature.svg); mask-image: url(assets/signature.svg);
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center left; mask-position: center left;
}

/* Filmography */
.film-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.02));
  border: 1px solid rgba(255,255,255,0.04); border-radius: 10px; padding: 8px; transition: transform .3s ease, box-shadow .3s ease;
}
.film-card:hover { transform: translateY(-6px); box-shadow: 0 10px 30px rgba(2,6,23,.4); }
.film-placeholder { background: rgba(0,0,0,0.2); border-radius: 6px; aspect-ratio: 2 / 3; display: flex; align-items: center; justify-content: center; }

/* Reflections */
.refCard { transition: transform .35s ease, box-shadow .35s ease; }
.refCard:hover { transform: translateY(-8px); box-shadow: 0 20px 40px rgba(2,6,23,.5) }

/* Wishes */
.wish-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.02));
  border: 1px solid rgba(179, 135, 40, 0.3); padding:12px; border-radius:10px;
  background-image: radial-gradient(rgba(179, 135, 40, 0.15) 0.5px, transparent 0.5px); background-size: 10px 10px;
  opacity: 0; transform: translateY(15px); animation: fade-in-up 0.5s ease forwards;
}
@keyframes fade-in-up { to { opacity: 1; transform: translateY(0); } }
.wish-meta { font-size: 12px; color: rgba(255,255,255,0.6); }
#wishesGrid { scroll-behavior: smooth; scrollbar-width: thin; scrollbar-color: var(--goldA) rgba(0,0,0,0.2); }
#wishesGrid::-webkit-scrollbar { width: 6px; }
#wishesGrid::-webkit-scrollbar-track { background: rgba(0,0,0,0.2); border-radius: 3px; }
#wishesGrid::-webkit-scrollbar-thumb { background-color: var(--goldA); border-radius: 3px; }

.form-input, .form-textarea, .form-select {
  background: transparent; color: white; border: 1px solid rgba(255,255,255,0.08);
  padding: 10px 12px; border-radius:8px; transition: border-color .18s, box-shadow .18s;
}
.form-input:focus, .form-textarea:focus { outline: none; border-color: rgba(179,135,40,0.85); box-shadow: 0 8px 30px rgba(179,135,40,0.08); }

/* responsive */
@media (max-width: 1024px) { #heroTitle { font-size: 2.5rem; } }