/* ================================
   HEADER STYLING — head.css
   Modular header visuals
   Includes twinkle and stardust support
================================ */

/* Overall site header wrapper */
.site-header {
  position: relative;
  background: var(--header-bg);
  color: white;
  padding: 0rem 0;
  text-align: center;
  overflow: hidden;
  z-index: 1;
}

/* Twinkle star background layer (animated) */
.twinkle-stars {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* Stardust zone wraps the logo and nav content */
.header-container {
  position: relative;
  z-index: 2;
  max-width: 1000px;
  margin: 0 auto;
  padding: 1rem;
  box-sizing: border-box;

  /* If you ever want to re-enable header-bg.png, uncomment below */
  /* background-image: url("/images/header-bg.png");
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat; */
}

/* Mobile padding tweak */
@media screen and (max-width: 768px) {
  .header-container {
    padding: 3rem 1rem;
  }
}

/* ================================
   LOGO WRAPPER AND EFFECTS
================================ */

/* Flex wrapper for logo image and site name */
.logo-title-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
  padding: 1rem 0;
}

/* Logo image with default glow ON */
.site-logo {
  width: 100%;
  max-width: 240px;
  height: auto;
  display: block;
  margin: 0 auto;
  opacity: 0;
  animation: fadeInLogo 1.5s ease-out forwards;
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.35));
  transition: transform 0.4s ease, filter 0.4s ease;
  will-change: transform, opacity;
}

/* On hover: reduce glow, slight zoom */
.site-logo:hover {
  transform: scale(1.03);
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.15));
}

/* Mobile-specific stronger glow for visibility */
@media screen and (max-width: 600px) {
  .site-logo {
    filter: drop-shadow(0 0 14px rgba(255, 255, 255, 0.45));
  }
}

/* Site name below logo */
.site-name {
  font-size: 1.8rem;
  color: white;
  margin: 0;
}

/* Fade-in animation for logo */
@keyframes fadeInLogo {
  0%   { opacity: 0; transform: scale(0.95); }
  100% { opacity: 1; transform: scale(1); }
}