/******************************************************************************************************************************************************
 *
 *    imports
 *
 ******************************************************************************************************************************************************/
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');

/******************************************************************************************************************************************************
 *
 *    variables & theme
 *
 ******************************************************************************************************************************************************/
:root
{
  --font-family           : "UI Sans", Lato, Helvetica, Arial, sans-serif;
  --transition-fast       : 200ms;
  --transition-slow       : 420ms;
}

:root{
  --color-background  : #fafafa;
  --color-primary     : #4682b4;
  --color-text        : #333;
  --color-text-button : #fff;
  --color-resume      : #fff;
  --color-resume-left : #dae7f1;
  --color-muted       : #777;

  /* background */
  --dust-steel-1      : rgba(180,196,210,0.72);
  --dust-steel-2      : rgba(120,140,160,0.60);
  --dust-steel-3      : rgba(150,170,190,0.66);
  --ocean-1-core      : rgba( 36,149,214,0.70);
  --ocean-1-halo      : rgba( 36,149,214,0.20);
  --ocean-2-core      : rgba(  0,139,190,0.64);
  --ocean-2-halo      : rgba(  0,139,190,0.18);
  --ocean-deep        : rgba(  0,115,230,0.62);
  --cyan-core         : rgba( 72,173,210,0.56);
  --cyan-halo         : rgba( 72,173,210,0.18);
  --blue-core         : rgba( 70,130,180,0.44);
  --blue-halo         : rgba( 70,130,180,0.14);
  --far-op            : 0.50;
  --mid-op            : 0.58;
  --near-op           : 0.64;
}

/* ------------------------- Dark theme overrides ------------------------- */
body.dark
{
  --color-background  : #070a10;
  --color-primary     : #8ec1ff;
  --color-text        : #e8edf3;
  --color-text-button : #0b1220;
  --color-resume      : #0f141a;
  --color-resume-left : #0d1b26;
  --color-muted       : #a7b4c3;

  /* background */
  --dust-steel-1     : rgba(192,206,220,0.82);
  --dust-steel-2     : rgba(142,160,178,0.72);
  --dust-steel-3     : rgba(160,180,198,0.78);
  --ocean-1-core     : rgba( 46,169,234,0.86);
  --ocean-1-halo     : rgba( 46,169,234,0.26);
  --ocean-2-core     : rgba(  0,159,214,0.80);
  --ocean-2-halo     : rgba(  0,159,214,0.24);
  --ocean-deep       : rgba(  0,135,255,0.86);
  --cyan-core        : rgba( 82,193,230,0.86);
  --cyan-halo        : rgba( 82,193,230,0.26);
  --blue-core        : rgba( 90,150,200,0.80);
  --blue-halo        : rgba( 90,150,200,0.22);
  --far-op           : 0.64;
  --mid-op           : 0.70;
  --near-op          : 0.78;
}

/******************************************************************************************************************************************************
 *
 *    common attributes
 *
 ******************************************************************************************************************************************************/
html
{
  font-family         : var(--font-family);
  font-size           : 12px;
  margin              : 0;
  overscroll-behavior : none; /* eliminates bouncing of the main content when attempting to scroll past the ends of the main content */
  padding             : 0;
}

a
{
  color           : var(--color-primary); /* hyperlinks are not blue       by default */
  text-decoration : none;                 /* hyperlinks are not underlined by default */
}

body
{
  background-color : var(--color-background);
  color            : var(--color-text);
  margin           : 0;
  position         : relative;
  transition       : background-color var(--transition-slow) ease,
                     color            var(--transition-slow) ease;
}

h1,
h2,
h3,
h4,
h5,
h6
{
  margin : 0;
}

/******************************************************************************************************************************************************
 *
 *    banner
 *
 ******************************************************************************************************************************************************/
#banner
{
  width : 100%;
}
    #banner h1
    {
      text-align : center;
    }

/****************************************************************************************************
 *
 *    buttons
 *
 ****************************************************************************************************/
.buttons /* div tag */
{
  display   : flex;
  flex-wrap : wrap;
  gap       : 0.5rem;   /* provides space between buttons */
  height    : 28px;     /* button height */
  position  : absolute; /* buttons are superposed with other content */
  right     : 12px;     /* right margin with respect to superposed content */
  top       : 12px;     /* top   margin with respect to superposed content */
  z-index   : 3;        /* buttons are superposed with other content */
}
/* @media (max-width : 768px) { .buttons {
  margin-top : 1rem;
  position   : static;
  right      : auto;
  top        : auto;
}} */

.button /* anchor tags */
{
  align-items     : center;                         /* centers text vertically (1/2) */
  background      : var(--color-primary);           /* button color */
  border          : 1px solid var(--color-primary); /* button border */
  border-radius   : 6px;                            /* softens corners */
  box-shadow      : none;
  color           : var(--color-text-button);       /* button (anchor) text color */
  cursor          : pointer;
  display         : inline-flex;                    /* centers text vertically (2/2) */
  font-weight     : 600;                            /* bolder font */
  justify-content : center;
  line-height     : 1;                              /* shifts button text up a little */
  padding         : 0 10px 0 10px;                  /* gives buttons horizontal padding */
  /* define the speed at which animations occur */
  transition      : background   var(--transition-slow) ease,
                    border-color var(--transition-slow) ease,
                    color        var(--transition-slow) ease,
                    transform    var(--transition-slow) ease;
}
    .button:hover
    {
      background   : #1f7fb8;
      border-color : #1f7fb8;
      transform    : translateY(-2px);
    }
    .button:hover:active
    {
      background   : red; /* #18648f; */
      border-color : red; /* #18648f; */
      transform    : translateY(0);
    }
/* @media (max-width : 768px) { .button {
  border      : none;
  font-weight : 600;
  height      : auto;
  padding     : 0.6rem 1.2rem;
  width       : 100%;
}} */

#theme-toggle /* overrides specific to the dark mode button */
{
  padding : 0;
  width   : 28px; /* to make square with 28px height */
}
    #theme-toggle .icon-sun,
    #theme-toggle .icon-moon
    {
      display     : none;
      font-size   : 14px;
      line-height : 1;
    }
    body:not(.dark) #theme-toggle .icon-moon,
    body.dark       #theme-toggle .icon-sun
    {
      display : block;
    }

/****************************************************************************************************
 *
 *    contact - print
 *
 ****************************************************************************************************/


/******************************************************************************************************************************************************
 *
 *    resume
 *
 ******************************************************************************************************************************************************/
#resume
{
  background    : var(--color-resume);
  border-radius : 8px;                           /* softens corners of resume */
  box-shadow    : 0 4px 10px rgba(0,0,0,0.25); /* lifts resume off screen */
  margin        : 4rem auto;                     /* centers resume on the screen */
  max-width     : 960px;                         /* fit resume to standard letter size */
  padding       : 1.5rem;                        /* resume border */
  transition    : background-color var(--transition-slow) ease,
                  box-shadow       var(--transition-slow) ease;

  display               : grid; /* the resume will consist of 2 rows and 2 cols */
  gap                   : 0;    /* there is no space between the rows and cols */
  grid-template-columns : 1fr 3fr;
  grid-template-rows    : 1fr auto;

  position : relative; /* necessary in order for the top-right buttons to remain within the resume container, as opposed to moving to the top-right corner of the screen */
  z-index  : 2;
}

section
{
  padding : 0 0 10px 0;
}

/* section titles */
.title
{
  color          : var(--color-primary);
  font-weight    : 600;
  font-size      : 2rem;
  letter-spacing : -0.02em;
  margin         : 0;
  padding        : 0 0 10px 0;
  text-transform : uppercase;
  transform      : scaleY(1.1);
  transition     : color var(--transition-fast) ease;
}

.bot
{
  min-height : fit-content; /* the height of the bottom two quadrants should be as tall as the content they contain */
}

.left
{
  background : var(--color-resume-left);
  transition : background-color var(--transition-slow) ease;
}

.q1
{
  grid-column : 1;     /* column 1 */
  height      : 300px; /* define the height of the top  two quadrants (i.e., the height of the header row) */
  width       : 300px; /* define the width  of the left two quadrants (i.e., the width  of the side column) */
}

.q2
{
  grid-column : 2/5; /* columns 2 through 5 */
  padding     : 10px /* border specific to this quadrant */
}

.q3
{
  grid-column : 1;    /* column 1 */
  padding     : 15px; /* border specific to this quadrant */
}

.q4
{
  border-top  : solid 1px var(--color-border-top);
  grid-column : 2/5;                 /* columns 2 through 5 */
  padding     : 15px;                /* border specific to this quadrant */
  transition  : color var(--transition-slow) ease;
}

/****************************************************************************************************
 *
 *    Q1
 *
 ****************************************************************************************************/
#profile-picture
{
  height : 100%; /* the profile picture takes up the entirety of Q1, which is a square */
  width  : 100%; /* the profile picture takes up the entirety of Q1, which is a square */
}

/****************************************************************************************************
 *
 *    Q2
 *
 ****************************************************************************************************/
.q2 .name
{
  color          : var(--color-primary);
  display        : block;
  text-transform : uppercase;
  transition     : color var(--transition-fast) ease;
}
.q2 .frst
{
  font-size   : clamp(2rem,6vw,3rem);
  font-weight : 400;
}
.q2 .last
{
  font-size   : clamp(2.5rem,8vw,5rem);
  font-weight : 700;
}
.q2 .intro
{
  font-size   : 15px;
  padding     : 0 0 12px 0;
}



.q2 #contact-web
{
  --email    : "davefriedman@pm.me";
  --linkedin : "https://linkedin.com/in/heracliteanflux";
  --github   : "https://github.com/heracliteanflux";

  margin-top : 12px;
}
.q2 .icons-row /* similar to class buttons above, except there are attributes there that are specific to those buttons (i.e., their absolute position) */
{
  display     : flex;
  flex-wrap   : wrap;
  height      : 28px;
  gap         : 0.5rem;
}
.q2 .button-icon
{
  /* padding     : 0;    square - overrides button */
  width       : 28px; /* square */
}
.q2 .button-icon i
{
  font-size : 16px; /* size of the button icon */
}

/* reveal the text underneat the icons */
.q2 #contact-web .contact-reveal
{
  letter-spacing : 0.005em;
  margin-top     : 6px;
  min-height     : 1.25em;
  opacity        : 0;
  pointer-events : none;
  transform      : translateY(-2px);
  transition     : opacity   var(--transition-fast) ease,
                   transform var(--transition-fast) ease;
}

.q2 #contact-web:has(.button-icon:hover) .contact-reveal
{
  opacity   : 1;
  transform : translateY(0);
}

/* swapping content per hovered icon, no js */
/* .q2 #contact-web .contact-reveal::after
{
  content : "";
  display : inline-block;

  background-image : linear-gradient(100deg, currentColor 0%, currentColor 40%, #ffffff 50%, currentColor 60%, currentColor 100%);
  -webkit-background-clip : text;
  background-clip         : text;
  background-position     : 0% 0%;
  background-size         : 200% 100%;
  color                   : transparent;
  font-size               : 12px;
  font-weight             : 600;
  letter-spacing          : 0.01em;
} */

.q2 #contact-web:has(.button-icon.email   :hover) .contact-reveal::after { content : var(--email); }
.q2 #contact-web:has(.button-icon.linkedin:hover) .contact-reveal::after { content : var(--linkedin); }
.q2 #contact-web:has(.button-icon.github  :hover) .contact-reveal::after { content : var(--github); }

@keyframes contact-shine
{
  from { background-position :   0% 0%; }
  to   { background-position : 100% 0%; }
}
.q2 #contact-web:has(.button-icon:hover) .contact-reveal::after
{
  animation : contact-shine .8s ease-out;
}

/* @media (prefers-reduced-motion:reduce)
{
  .q2 .contact-icons .contact-reveal::after { animation : none !important; }
} */

.q2 #contact-print
{
  display : none;
}

/****************************************************************************************************
 *
 *    Q3
 *
 ****************************************************************************************************/
.q3 ul
{
  color           : var(--color-primary);
  font-size       : 1.25rem;
  font-weight     : 375;
  list-style-type : none; /* no bullet points */
  margin-top      : 0;
  padding         : 0;
}

.q3 li
{
  color         : var(--color-primary);
  font-size     : 1rem;
  font-weight   : 400;
  line-height   : 1.5;
}



/****************************************************************************************************
 *
 *    Q4
 *
 ****************************************************************************************************/

.company-block
{
  margin : 0 0 10px 0;
}
.company-intro
{
  display        : flex;
  color          : var(--color-text);
  font-size      : 1.6rem;
  letter-spacing : -0.01rem;
  margin         : 0;
  padding        : 0 0 5px 0;
}
.company-name
{
  font-weight    : 700;
}
.company-location
{
  font-weight    : 400;
  padding        : 0 0 0 10px;
}
.company-subheading
{
  color      : var(--color-muted);
  font-size  : 1.15rem;
  font-style : italic;
  margin     : -0.5rem 0 0;
  padding    : 0 0 5px 0;
}

.role
{
  margin   : 0.2rem 0 0;   /* buffer space above and below */
  padding  : 0 0 0 2.2rem; /* shift blocks right */
  position : relative;     /* necessary for the visibility of the line */
}
    .role::before /* the line */
    {
      background : var(--color-primary);
      bottom     : -1.2rem;
      content    : "";
      left       : 0.8rem;
      position   : absolute;
      top        : 0.6rem;
      width      : 2px;
    }
    .role.first::before
    {
      background : none;
    }
    .dot
    {
      background    : var(--color-primary);              /* dot color */
      border-radius : 50%;                               /* dot circularity */
      box-shadow    : 0 0 0 3px rgba(70,130,180,0.18); /* dot glow */
      height        : 12px;                              /* dot diameter */
      left          : 0.375rem;                          /* dot horizontal placement */
      position      : absolute;
      top           : 2.5px;                             /* dot vertical placement */
      transition    : background var(--transition-fast) ease;
      width         : 12px;                              /* dot diameter */
    }
.role-title
{
  color          : var(--color-primary);
  font-size      : 1.2rem;
  font-weight    : 800;
  letter-spacing : 0.1em;
  margin         : 0;
  padding        : 0 0 2.5px 0; /* buffer space below */
  text-transform : uppercase;
}
.role-dates
{
  color          : var(--color-muted);
  font-size      : 1.1rem;
  font-weight    : 400;
  letter-spacing : 0.1em;
  padding        : 0 0 5px 0; /* buffer space below */
  text-transform : uppercase;
}
.role-points
{
  color       : var(--color-text);
  font-size   : 1.1rem;
  line-height : 1.25;           /* buffer space between points */
  margin      : 0;
  padding     : 0 0 5px 1.2rem; /* buffer space below, and to the left of the block of points */
}

/******************************************************************************************************************************************************
 *
 *    background
 *
 ******************************************************************************************************************************************************/
html::before,
html::after,
body::before,
body::after
{
  background-repeat : repeat;
  content           : "";
  inset             : -30vh -30vw;
  pointer-events    : none;
  position          : fixed;
  transform         : translateZ(0);
  will-change       : transform, opacity;
  z-index           : 1;
}

/* FAR A */
html::before
{
  background-image :
    radial-gradient(circle at 8% 12%,   var(--dust-steel-1)   0 0.7px, transparent 1.2px),
    radial-gradient(circle at 16% 24%,  var(--dust-steel-2)   0 0.7px, transparent 1.2px),
    radial-gradient(circle at 24% 18%,  var(--ocean-1-core)   0 0.8px, transparent 1.3px),
    radial-gradient(circle at 32% 28%,  var(--dust-steel-3)   0 0.8px, transparent 1.3px),
    radial-gradient(circle at 40% 16%,  var(--ocean-2-core)   0 0.9px, transparent 1.5px),
    radial-gradient(circle at 48% 22%,  var(--cyan-core)      0 0.9px, transparent 1.5px),
    radial-gradient(circle at 56% 14%,  var(--blue-core)      0 0.9px, transparent 1.5px),
    radial-gradient(circle at 64% 26%,  var(--dust-steel-2)   0 0.9px, transparent 1.5px),
    radial-gradient(circle at 72% 18%,  var(--ocean-1-core)   0 1.0px, transparent 1.6px),
    radial-gradient(circle at 80% 30%,  var(--dust-steel-1)   0 1.0px, transparent 1.6px),
    radial-gradient(circle at 12% 72%,  var(--ocean-2-core)   0 1.0px, transparent 1.6px),
    radial-gradient(circle at 22% 64%,  var(--dust-steel-3)   0 1.0px, transparent 1.6px),
    radial-gradient(circle at 34% 78%,  var(--ocean-1-core)   0 1.0px, transparent 1.6px),
    radial-gradient(circle at 46% 70%,  var(--cyan-core)      0 1.0px, transparent 1.6px),
    radial-gradient(circle at 58% 82%,  var(--dust-steel-2)   0 1.0px, transparent 1.6px),
    radial-gradient(circle at 70% 74%,  var(--blue-core)      0 1.0px, transparent 1.6px),
    radial-gradient(circle at 84% 86%,  var(--ocean-1-core)   0 1.1px, transparent 1.7px),
    radial-gradient(circle at 92% 68%,  var(--dust-steel-1)   0 1.1px, transparent 1.7px),
    radial-gradient(circle at 28% 50%,  var(--ocean-deep)     0 3.0px, transparent 5.4px),
    radial-gradient(circle at 66% 42%,  var(--ocean-1-halo)   0 6.0px, transparent 12px);

  background-size :
    180px 180px, 180px 180px, 180px 180px, 180px 180px, 180px 180px,
    180px 180px, 180px 180px, 180px 180px, 180px 180px, 180px 180px,
    220px 220px, 220px 220px, 220px 220px, 220px 220px, 220px 220px,
    220px 220px, 260px 260px, 260px 260px, 520px 520px, 520px 520px;

  opacity   : var(--far-op);
  animation : far-layer-drift-a 137s linear infinite alternate;
}

/* FAR B */
html::after
{
  background-image :
    radial-gradient(circle at 10% 10%,  var(--ocean-1-core)   0 0.9px, transparent 1.5px),
    radial-gradient(circle at 22% 18%,  var(--dust-steel-2)   0 1.0px, transparent 1.6px),
    radial-gradient(circle at 36% 12%,  var(--dust-steel-3)   0 1.1px, transparent 1.7px),
    radial-gradient(circle at 48% 20%,  var(--ocean-2-core)   0 1.2px, transparent 1.8px),
    radial-gradient(circle at 60% 14%,  var(--blue-core)      0 1.2px, transparent 1.8px),
    radial-gradient(circle at 74% 22%,  var(--cyan-core)      0 1.2px, transparent 1.8px),
    radial-gradient(circle at 86% 16%,  var(--ocean-1-core)   0 1.3px, transparent 1.9px),
    radial-gradient(circle at 14% 76%,  var(--dust-steel-1)   0 1.2px, transparent 1.8px),
    radial-gradient(circle at 28% 68%,  var(--ocean-2-core)   0 1.2px, transparent 1.8px),
    radial-gradient(circle at 42% 80%,  var(--dust-steel-3)   0 1.2px, transparent 1.8px),
    radial-gradient(circle at 58% 72%,  var(--blue-core)      0 1.2px, transparent 1.8px),
    radial-gradient(circle at 72% 84%,  var(--ocean-1-core)   0 1.3px, transparent 1.9px),
    radial-gradient(circle at 86% 76%,  var(--cyan-core)      0 1.3px, transparent 1.9px),
    radial-gradient(circle at 50% 50%,  var(--ocean-deep)     0 3.6px, transparent 6.4px),
    radial-gradient(circle at 32% 40%,  var(--ocean-2-halo)   0 6.4px, transparent 12.8px);

  background-size :
    200px 200px, 200px 200px, 200px 200px, 200px 200px, 200px 200px,
    200px 200px, 200px 200px, 200px 200px, 200px 200px, 200px 200px,
    200px 200px, 200px 200px, 200px 200px, 540px 540px, 540px 540px;

  opacity   : var(--far-op);
  animation : far-layer-drift-b 127s linear infinite alternate;
}

/* MID */
body::before
{
  background-image :
    radial-gradient(circle at 15% 75%, var(--dust-steel-3)   0 1.0px, transparent 1.7px),
    radial-gradient(circle at 22% 68%, var(--ocean-1-core)   0 1.1px, transparent 1.8px),
    radial-gradient(circle at 30% 62%, var(--dust-steel-2)   0 1.2px, transparent 1.9px),
    radial-gradient(circle at 38% 56%, var(--blue-core)      0 1.2px, transparent 1.9px),
    radial-gradient(circle at 46% 50%, var(--ocean-2-core)   0 1.3px, transparent 2.0px),
    radial-gradient(circle at 54% 44%, var(--cyan-core)      0 1.3px, transparent 2.0px),
    radial-gradient(circle at 62% 38%, var(--dust-steel-1)   0 1.3px, transparent 2.0px),
    radial-gradient(circle at 70% 32%, var(--ocean-1-core)   0 1.4px, transparent 2.2px),
    radial-gradient(circle at 78% 26%, var(--blue-core)      0 1.4px, transparent 2.2px),
    radial-gradient(circle at 86% 20%, var(--ocean-2-core)   0 1.4px, transparent 2.2px),
    radial-gradient(circle at 20% 40%, var(--ocean-deep)     0 3.0px, transparent 5.6px),
    radial-gradient(circle at 60% 60%, var(--ocean-deep)     0 3.6px, transparent 6.2px),
    radial-gradient(circle at 42% 72%, var(--ocean-1-halo)   0 6.0px, transparent 12.0px),
    radial-gradient(circle at 74% 34%, var(--ocean-2-halo)   0 6.6px, transparent 13.2px);

  background-size :
    220px 220px, 220px 220px, 220px 220px, 220px 220px, 220px 220px,
    220px 220px, 220px 220px, 220px 220px, 220px 220px, 220px 220px,
    520px 520px, 520px 520px, 560px 560px, 560px 560px;

  opacity   : var(--mid-op);
  animation : mid-layer-drift 73s linear infinite alternate;
}

/* NEAR */
body::after
{
  background-image :
    radial-gradient(circle at 30% 20%, var(--ocean-2-core) 0 1.6px, transparent 2.6px),
    radial-gradient(circle at 55% 60%, var(--ocean-1-core) 0 1.8px, transparent 2.8px),
    radial-gradient(circle at 70% 40%, var(--ocean-deep)   0 2.4px, transparent 3.4px),
    radial-gradient(circle at 45% 75%, var(--blue-core)    0 1.8px, transparent 2.8px),
    radial-gradient(circle at 25% 55%, var(--cyan-core)    0 1.8px, transparent 2.8px),
    radial-gradient(circle at 60% 20%, var(--ocean-deep)   0 3.2px, transparent 4.6px),
    radial-gradient(circle at 80% 75%, var(--ocean-1-halo) 0 7.2px, transparent 14.4px);

  background-size :
    260px 260px, 260px 260px, 280px 280px, 260px 260px, 260px 260px, 620px 620px, 600px 600px;

  opacity   : var(--near-op);
  animation : near-layer-drift 61s linear infinite alternate;
}

/* Transform drift (no wrap => no jumps) */
@keyframes far-layer-drift-a
{
  0%   { transform : translate(   0px,    0px); }
  100% { transform : translate(-320px, -260px); }
}

@keyframes far-layer-drift-b
{
  0%   { transform : translate(  0px,  0px); }
  100% { transform : translate(300px, 260px); }
}

@keyframes mid-layer-drift
{
  0%   { transform : translate(   0px,    0px); }
  100% { transform : translate(-300px, -240px); }
}

@keyframes near-layer-drift
{
  0%   { transform : translate(  0px,  0px); }
  100% { transform : translate(320px, 300px); }
}

/* Twinkle overlays — denser, independent glow + transform drift */
.twinkle-layer
{
  inset           : -30vh -30vw;
  mix-blend-mode  : normal;
  pointer-events  : none;
  position        : fixed;
  will-change     : transform, opacity;
  z-index         : 1;
}

/* Tiny, very dense */
.twinkle-1
{
  background-image :
    radial-gradient(circle at 10% 12%, rgba( 36,149,214,0.85) 0 0.8px, transparent 1.4px),
    radial-gradient(circle at 18% 26%, rgba(  0,139,190,0.85) 0 0.8px, transparent 1.4px),
    radial-gradient(circle at 26% 18%, rgba( 70,130,180,0.85) 0 0.8px, transparent 1.4px),
    radial-gradient(circle at 34% 30%, rgba( 72,173,210,0.85) 0 0.8px, transparent 1.4px),
    radial-gradient(circle at 42% 22%, rgba(  0,115,230,0.92) 0 1.0px, transparent 1.6px),
    radial-gradient(circle at 50% 34%, rgba( 36,149,214,0.85) 0 0.8px, transparent 1.4px),
    radial-gradient(circle at 58% 26%, rgba(  0,139,190,0.85) 0 0.8px, transparent 1.4px),
    radial-gradient(circle at 66% 38%, rgba( 70,130,180,0.85) 0 0.8px, transparent 1.4px),
    radial-gradient(circle at 74% 30%, rgba( 72,173,210,0.85) 0 0.8px, transparent 1.4px),
    radial-gradient(circle at 82% 42%, rgba(  0,115,230,0.92) 0 1.0px, transparent 1.6px),
    radial-gradient(circle at 14% 72%, rgba( 36,149,214,0.85) 0 0.8px, transparent 1.4px),
    radial-gradient(circle at 22% 64%, rgba(  0,139,190,0.85) 0 0.8px, transparent 1.4px),
    radial-gradient(circle at 30% 76%, rgba( 70,130,180,0.85) 0 0.8px, transparent 1.4px),
    radial-gradient(circle at 38% 68%, rgba( 72,173,210,0.85) 0 0.8px, transparent 1.4px),
    radial-gradient(circle at 46% 80%, rgba(  0,115,230,0.92) 0 1.0px, transparent 1.6px),
    radial-gradient(circle at 54% 72%, rgba( 36,149,214,0.85) 0 0.8px, transparent 1.4px),
    radial-gradient(circle at 62% 84%, rgba(  0,139,190,0.85) 0 0.8px, transparent 1.4px),
    radial-gradient(circle at 70% 76%, rgba( 70,130,180,0.85) 0 0.8px, transparent 1.4px),
    radial-gradient(circle at 78% 88%, rgba( 72,173,210,0.85) 0 0.8px, transparent 1.4px),
    radial-gradient(circle at 86% 80%, rgba(  0,115,230,0.92) 0 1.0px, transparent 1.6px);
  background-size :
    180px 180px, 180px 180px, 180px 180px, 180px 180px, 220px 220px,
    180px 180px, 180px 180px, 180px 180px, 180px 180px, 220px 220px,
    180px 180px, 180px 180px, 180px 180px, 180px 180px, 220px 220px,
    180px 180px, 180px 180px, 180px 180px, 180px 180px, 220px 220px;
  animation :
    twinkle-1-opacity 19s ease-in-out infinite alternate,
    twinkle-1-drift   97s linear      infinite alternate;
  opacity : 0.55;
}

/* Medium density */
.twinkle-2
{
  background-image :
    radial-gradient(circle at 12% 18%, rgba( 36,149,214,0.83) 0 1.0px, transparent 1.6px),
    radial-gradient(circle at 26% 22%, rgba(  0,139,190,0.83) 0 1.0px, transparent 1.6px),
    radial-gradient(circle at 42% 26%, rgba( 70,130,180,0.83) 0 1.0px, transparent 1.6px),
    radial-gradient(circle at 58% 30%, rgba( 72,173,210,0.83) 0 1.0px, transparent 1.6px),
    radial-gradient(circle at 74% 34%, rgba(  0,115,230,0.92) 0 1.4px, transparent 2.0px),
    radial-gradient(circle at 18% 74%, rgba( 36,149,214,0.83) 0 1.0px, transparent 1.6px),
    radial-gradient(circle at 34% 70%, rgba(  0,139,190,0.83) 0 1.0px, transparent 1.6px),
    radial-gradient(circle at 50% 66%, rgba( 70,130,180,0.83) 0 1.0px, transparent 1.6px),
    radial-gradient(circle at 66% 62%, rgba( 72,173,210,0.83) 0 1.0px, transparent 1.6px),
    radial-gradient(circle at 82% 58%, rgba(  0,115,230,0.92) 0 1.4px, transparent 2.0px);
  background-size :
    200px 200px, 200px 200px, 200px 200px, 200px 200px, 240px 240px,
    200px 200px, 200px 200px, 200px 200px, 200px 200px, 240px 240px;
  animation :
    twinkle-2-opacity 23s ease-in-out infinite alternate,
    twinkle-2-drift   105s linear     infinite alternate;
  animation-delay :
    2.2s, 0s;
  opacity : 0.62;
}

/* Larger bright specks (few) */
.twinkle-3
{
  background-image :
    radial-gradient(circle at 22% 20%, rgba( 36,149,214,0.78) 0 1.6px, transparent 2.4px),
    radial-gradient(circle at 64% 72%, rgba(  0,139,190,0.82) 0 1.8px, transparent 2.6px),
    radial-gradient(circle at 44% 36%, rgba(  0,115,230,0.96) 0 2.2px, transparent 3.0px),
    radial-gradient(circle at 72% 46%, rgba( 72,173,210,0.82) 0 1.7px, transparent 2.5px);
  background-size :
    240px 240px, 260px 260px, 300px 300px, 240px 240px;
  animation :
    twinkle-3-opacity 31s ease-in-out infinite alternate,
    twinkle-3-drift   117s linear     infinite alternate;
  animation-delay :
    1.1s, 0s;
  opacity : 0.70;
}

/* per-layer opacity cycles — endpoints equal (no pops) */
@keyframes twinkle-1-opacity
{
  0%   { opacity : 0.44; }
  52%  { opacity : var(--twinkle-max); }
  100% { opacity : 0.44; }
}
@keyframes twinkle-2-opacity
{
  0%   { opacity : 0.40; }
  54%  { opacity : var(--twinkle-max); }
  100% { opacity : 0.40; }
}
@keyframes twinkle-3-opacity
{
  0%   { opacity : 0.36; }
  56%  { opacity : 0.84; }
  100% { opacity : 0.36; }
}

/* scramble overlay — ultra-low-opacity, off-grid specks to break visible rows */
.twinkle-scramble
{
  background-image :
    radial-gradient(circle at 13% 19%, rgba( 36,149,214,0.85) 0 0.8px, transparent 1.3px),
    radial-gradient(circle at 37% 11%, rgba(  0,139,190,0.82) 0 0.9px, transparent 1.4px),
    radial-gradient(circle at 61% 27%, rgba( 70,130,180,0.80) 0 0.9px, transparent 1.5px),
    radial-gradient(circle at 83% 17%, rgba( 72,173,210,0.78) 0 0.8px, transparent 1.4px),
    radial-gradient(circle at 19% 83%, rgba(  0,115,230,0.90) 0 1.0px, transparent 1.7px),
    radial-gradient(circle at 47% 71%, rgba( 36,149,214,0.82) 0 0.9px, transparent 1.5px),
    radial-gradient(circle at 73% 63%, rgba(  0,139,190,0.80) 0 0.9px, transparent 1.5px),
    radial-gradient(circle at 11% 57%, rgba( 70,130,180,0.78) 0 0.8px, transparent 1.4px),
    radial-gradient(circle at 29% 41%, rgba( 72,173,210,0.80) 0 0.9px, transparent 1.5px),
    radial-gradient(circle at 91% 49%, rgba(  0,115,230,0.92) 0 1.0px, transparent 1.7px);
  background-size :
    173px 173px, 191px 191px, 207px 207px, 223px 223px, 251px 251px,
    179px 179px, 197px 197px, 213px 213px, 229px 229px, 247px 247px;

  transform : rotate(0.37deg);
  animation :
    twinkle-scramble-opacity 27s ease-in-out infinite alternate,
    twinkle-scramble-drift   111s linear     infinite alternate;
  opacity : 0.18;
}

@keyframes twinkle-scramble-opacity
{
  0%   { opacity : 0.12; }
  55%  { opacity : 0.22; }
  100% { opacity : 0.12; }
}

@keyframes twinkle-scramble-drift
{
  0%   { transform : translate(   0px,    0px) rotate(0.37deg); }
  100% { transform : translate(-260px, -210px) rotate(0.37deg); }
}

/* dust desync jitter — tiny per-layer offsets */
:root
{
  --dust-off-a :  23.7px  17.9px;
  --dust-off-b : -19.3px  11.4px;
  --dust-off-c :  29.6px -21.2px;
  --dust-off-d : -13.8px -16.5px;
}

body.dark
{
  --dust-off-a :  21.1px  15.3px;
  --dust-off-b : -17.2px  13.7px;
  --dust-off-c :  27.9px -19.6px;
  --dust-off-d : -12.4px -14.8px;
}

html::before { background-position : var(--dust-off-a); }
html::after  { background-position : var(--dust-off-b); }
body::before { background-position : var(--dust-off-c); }
body::after  { background-position : var(--dust-off-d); }

/* per-gradient offsets */
html::before
{
  background-position :
    7px  3px,  29px 11px, -18px  9px, 23px 14px, -31px  6px,
   -9px 17px,  35px 13px, -22px 19px, 17px 21px, -27px 15px,
   14px 33px, -12px 29px,  28px 37px,-16px 41px,  33px 45px,
  -21px 48px,  19px 54px, -25px 59px, 11px 67px, -13px 72px;
}

html::after
{
  background-position :
    9px  6px, -21px 10px,  27px  5px, -15px 14px,  23px  8px,
  -11px 18px,  31px 12px, -27px 20px,  18px 26px, -24px 28px,
   12px 34px, -19px 36px,  26px 42px, -14px 48px,  20px 54px;
}

body::before
{
  background-position :
   13px  9px, -17px 13px,  24px 16px, -12px 19px,  21px 23px,
  -10px 27px,  28px 31px, -22px 35px,  16px 39px, -18px 43px,
    9px 47px, -15px 52px,  23px 56px, -11px 61px;
}

body::after
{
  background-position :
   15px  7px, -19px 11px, 22px 15px, -13px 19px, 17px 24px,
  -11px 28px,  14px 33px;
}

body.dark html::before
{
  background-position :
  -8px  -5px, -31px -12px,  16px -10px, -25px -13px,  29px  -7px,
  11px -18px, -33px -14px,  24px -20px, -19px -22px,  27px -16px,
 -12px -34px,  17px -30px, -26px -38px,  14px -42px, -30px -46px,
  20px -49px, -18px -55px,  23px -60px, -10px -68px,  12px -73px;
}

body.dark html::after
{
  background-position :
  -10px -7px,  20px -11px, -28px  -6px,  14px -15px, -24px  -9px,
   12px -19px, -32px -13px,  26px -21px, -17px -27px,  23px -29px,
  -11px -35px,  18px -37px, -25px -43px,  13px -49px, -19px -55px;
}

body.dark body::before
{
  background-position :
  -14px -10px,  16px -14px, -23px -17px,  13px -20px, -20px -24px,
   11px -28px, -27px -32px,  21px -36px, -15px -40px,  17px -44px,
  -10px -48px,  14px -53px, -22px -57px,  12px -62px;
}

body.dark body::after
{
  background-position :
  -16px  -8px,  18px -12px, -21px -16px,  12px -20px, -15px -25px,
   10px -29px, -13px -34px;
}

#sun
{
  position       : fixed;
  left           : 50%;
  top            : 50%;
  width          : 320px;
  height         : 320px;
  border-radius  : 50%;
  pointer-events : none;
  z-index        : 0;
  box-shadow     : inset      0    0   60px #ffffff,
                   inset     22px  0   90px #ffd54d,
                   inset    -22px  0   90px #ffb300,
                   inset     24px  0  320px rgba(255,213,77,0.85),
                   inset    -24px  0  320px rgba(255,179,0,0.80),
                              0    0   70px rgba(255,240,200,0.95),
                            -12px  0  130px rgba(255,200,80,0.85),
                             12px  0  130px rgba(255,140,0,0.75);
  transform      : translate(-50%, -50%) scale(1);
  filter         : blur(0.6px);
  opacity        : 0.85;
  will-change    : transform, filter, opacity;
  animation      : sun-ellipse-bottom-left 140s linear infinite;
}

@keyframes sun-ellipse-bottom-left
{
  0%   { transform : translate(-50%, -50%) translate(-34vw, 12vh) rotate(-12deg) scale(0.84); filter : blur(1.4px); opacity : 0.74; }
  12.5%{ transform : translate(-50%, -50%) translate(-29vw,  8vh) rotate( -8deg) scale(0.90); filter : blur(1.1px); opacity : 0.80; }
  25%  { transform : translate(-50%, -50%) translate(-24vw,  6vh) rotate( -4deg) scale(0.95); filter : blur(0.9px); opacity : 0.84; }
  37.5%{ transform : translate(-50%, -50%) translate(-18vw, 10vh) rotate(  0deg) scale(1.03); filter : blur(0.7px); opacity : 0.87; }
  50%  { transform : translate(-50%, -50%) translate(-10vw, 28vh) rotate(  6deg) scale(1.16); filter : blur(0.3px); opacity : 0.93; }
  62.5%{ transform : translate(-50%, -50%) translate(-16vw, 34vh) rotate(  3deg) scale(1.08); filter : blur(0.5px); opacity : 0.89; }
  75%  { transform : translate(-50%, -50%) translate(-28vw, 36vh) rotate( -2deg) scale(1.00); filter : blur(0.7px); opacity : 0.86; }
  87.5%{ transform : translate(-50%, -50%) translate(-33vw, 26vh) rotate( -8deg) scale(0.91); filter : blur(1.0px); opacity : 0.80; }
  100% { transform : translate(-50%, -50%) translate(-34vw, 12vh) rotate(-12deg) scale(0.84); filter : blur(1.4px); opacity : 0.74; }
}