.apod-hero{
  --bg-deep:      #0a0b14;
  --bg-panel:     #12141f;
  --star-gold:    #e8c468;
  --nebula-violet:#8a6fbf;
  --nebula-rose:  #c9587a;
  --text-main:    #f2efe9;
  --text-muted:   #9b96a8;

  position:relative;
  min-height:100vh;
  margin:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:2rem 1.5rem;
  isolation:isolate;
  overflow:hidden;
  background:var(--bg-deep);
  background-size:cover;
  background-position:center;
  transition:background-image 0.6s ease;
  color:var(--text-main);
  font-family:'Jost', sans-serif;
}

/* Dark gradient over the real APOD image, so the text stays readable */
.apod-hero .scrim{
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    linear-gradient(180deg, rgba(10,11,20,0.55) 0%, rgba(10,11,20,0.80) 55%, rgba(10,11,20,0.95) 100%);
}

/* Nebula glow: two soft, blurred color patches, slowly drifting
   (only visible while no photo has loaded yet) */
.apod-hero .nebula{
  position:absolute;
  inset:0;
  z-index:-2;
  background:
    radial-gradient(ellipse 55% 40% at 22% 28%, rgba(138,111,191,0.30), transparent 60%),
    radial-gradient(ellipse 45% 35% at 78% 68%, rgba(201,88,122,0.22), transparent 60%),
    radial-gradient(ellipse 80% 60% at 50% 100%, rgba(232,196,104,0.06), transparent 70%);
  animation: apod-drift 22s ease-in-out infinite alternate;
}
@keyframes apod-drift{
  from{ transform:translate(0,0) scale(1); }
  to{ transform:translate(-2%,2%) scale(1.06); }
}

/* Starfield: procedurally generated via box-shadow, two layers for depth */
.apod-hero .stars, .apod-hero .stars::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:transparent;
}

.apod-hero .eyebrow{
  font-family:'JetBrains Mono', monospace;
  font-size:0.72rem;
  letter-spacing:0.35em;
  text-transform:uppercase;
  color:var(--star-gold);
  margin-bottom:1.25rem;
  opacity:0.85;
}

.apod-hero h1.brand{
  font-family:'Cormorant Garamond', serif;
  font-weight:600;
  font-size:clamp(2.75rem, 8vw, 5.5rem);
  letter-spacing:0.04em;
  margin:0 0 1rem 0;
  background:linear-gradient(180deg, #ffffff 0%, var(--text-main) 55%, var(--star-gold) 130%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}

.apod-hero .construction{
  font-size:1rem;
  font-weight:300;
  color:var(--text-muted);
  max-width:32rem;
  line-height:1.6;
  margin-bottom:3rem;
}

.apod-hero .placeholder-note{
  font-family:'JetBrains Mono', monospace;
  font-size:0.68rem;
  letter-spacing:0.03em;
  color:rgba(155,150,168,0.75);
  max-width:28rem;
  line-height:1.5;
  margin:-1.5rem 0 3rem 0;
}

.apod-hero .divider{
  width:1px;
  height:2.5rem;
  background:linear-gradient(180deg, transparent, var(--text-muted), transparent);
  margin-bottom:2rem;
  opacity:0.5;
}

/* ---------- Date search ---------- */
.apod-hero .date-search{
  display:flex;
  align-items:center;
  gap:0.6rem;
  margin-bottom:1.5rem;
  flex-wrap:wrap;
  justify-content:center;
}

.apod-hero .date-search input[type="date"]{
  background:rgba(18,20,31,0.6);
  border:1px solid rgba(242,239,233,0.15);
  color:var(--text-main);
  font-family:'JetBrains Mono', monospace;
  font-size:0.8rem;
  padding:0.5rem 0.75rem;
  border-radius:0.35rem;
  color-scheme:dark;
}

.apod-hero .date-search button{
  background:transparent;
  border:1px solid var(--star-gold);
  color:var(--star-gold);
  font-family:'JetBrains Mono', monospace;
  font-size:0.7rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  padding:0.5rem 0.9rem;
  border-radius:0.35rem;
  cursor:pointer;
  transition:background 0.2s ease, color 0.2s ease;
}
.apod-hero .date-search button:hover{
  background:var(--star-gold);
  color:var(--bg-deep);
}

.apod-hero .date-search .reset{
  border-color:rgba(242,239,233,0.2);
  color:var(--text-muted);
}
.apod-hero .date-search .reset:hover{
  background:rgba(242,239,233,0.1);
  color:var(--text-main);
}

/* ---------- Caption card ---------- */
.apod-hero .apod-card{
  width:100%;
  max-width:34rem;
  background:rgba(18,20,31,0.55);
  border:1px solid rgba(242,239,233,0.08);
  backdrop-filter:blur(14px);
  border-radius:0.5rem;
  padding:1.5rem 1.75rem;
  text-align:left;
}

.apod-hero .apod-kicker{
  display:flex;
  align-items:center;
  gap:0.6rem;
  font-family:'JetBrains Mono', monospace;
  font-size:0.75rem;
  font-weight:500;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--star-gold);
  margin-bottom:0.85rem;
}
.apod-hero .apod-kicker .dot{
  width:6px; height:6px; border-radius:50%;
  background:var(--star-gold);
  box-shadow:0 0 8px var(--star-gold);
}

.apod-hero .apod-title{
  font-family:'Cormorant Garamond', serif;
  font-style:italic;
  font-size:1.5rem;
  font-weight:500;
  margin-bottom:0.5rem;
  color:var(--text-main);
}

.apod-hero .apod-desc{
  font-size:0.85rem;
  line-height:1.65;
  color:var(--text-muted);
  font-weight:300;
}

.apod-hero .open-media{
  display:none;
  margin-top:0.9rem;
  font-family:'JetBrains Mono', monospace;
  font-size:0.7rem;
  letter-spacing:0.05em;
  color:var(--star-gold);
  text-decoration:none;
  border-bottom:1px solid rgba(232,196,104,0.4);
  padding-bottom:1px;
}
.apod-hero .open-media:hover{
  color:var(--text-main);
  border-color:var(--text-main);
}

.apod-hero .fallback-note{
  display:none;
  margin-top:0.9rem;
  padding:0.6rem 0.75rem;
  background:rgba(232,196,104,0.08);
  border:1px solid rgba(232,196,104,0.25);
  border-radius:0.35rem;
  font-size:0.75rem;
  color:var(--star-gold);
}

.apod-hero .video-embed{
  display:none;
  position:relative;
  width:100%;
  max-width:34rem;
  aspect-ratio:16/9;
  margin-bottom:1.5rem;
  border-radius:0.5rem;
  overflow:hidden;
  border:1px solid rgba(242,239,233,0.08);
}
.apod-hero .video-embed iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}

@media (max-width:480px){
  .apod-hero .apod-card{ padding:1.15rem 1.25rem; }
  .apod-hero{ padding:1.5rem 1.25rem; }
  .apod-hero .date-search{ flex-direction:column; align-items:stretch; }
  .apod-hero .date-search input[type="date"],
  .apod-hero .date-search button{ width:100%; }
  .apod-hero .placeholder-note{ margin-top:-1rem; margin-bottom:2rem; }
}