/* ==========================================================================
   Header base component
   Sets the header background (gradient + droplets) and how things inside behave.
   Usage:  <link rel="stylesheet" href="header-base.css">
           <header class="hdr"> ...other components go in here, no setup needed... </header>
   ========================================================================== */

.hdr{
  /* settings */
  --hdr-h: clamp(360px, 40.8vw, 626px);   /* ~626px tall at 1536px wide, like the target (the wave sits inside this) */
  --drop-opacity: .9;                      /* droplet strength */
  --glow: .15;                             /* centre blue glow */
  --s1: 64%; --s2: 30%;                    /* droplet layer sizes (% of header height) */
  --hue: 10deg; --sat: 1.4; --bright: .55; --contrast: 2;   /* colour grade: grey-cyan -> royal blue */

  /* behaviour */
  position: relative;
  isolation: isolate;                      /* droplet blending stays inside the header */
  width: 100%;
  height: var(--hdr-h);
  overflow: hidden;

  /* Base: dark top -> deeper blue lower down, blue glow in the centre, darker left/right edges */
  background:
    linear-gradient(to right, rgba(0,6,20,.55) 0%, rgba(0,6,20,0) 32%, rgba(0,6,20,0) 66%, rgba(0,6,20,.42) 100%),
    radial-gradient(ellipse 42% 53% at 50% 46.5%, rgba(2,40,98,var(--glow)), rgba(2,40,98,0) 100%),
    linear-gradient(to bottom, #00081a 0%, #000a1e 6.8%, #011029 12.8%, #01122f 19.5%, #011a3b 32.3%, #011a40 100%);
}

/* Droplets: graded to royal blue, blended in, faded out towards the top. Sits behind everything,
   so nothing placed inside the header needs any special setup. */
.hdr::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;                             /* behind everything inside the header */
  pointer-events: none;
  background:
    url("../Background_Droplets/Droplets.png") 0 100% / auto var(--s1) repeat,    /* main droplets, sized to the header height */
    url("../Background_Droplets/Droplets.png") 41% 100% / auto var(--s2) repeat;  /* smaller copy, offset: adds the fine speckle */
  filter: hue-rotate(var(--hue)) saturate(var(--sat)) brightness(var(--bright)) contrast(var(--contrast));
  mix-blend-mode: screen;
  opacity: var(--drop-opacity);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, transparent 6%, #000 31.5%);
          mask-image: linear-gradient(to bottom, transparent 0%, transparent 6%, #000 31.5%);
}