#sunContainer {
  display: inline-flex;
  justify-content: center;
  
}

.happy-sun-svg { 
  width: 100%; 
  height: auto; 
  display: inline-flex;
  transform-origin: left center;
  max-width: 400px; /* Prevent it from getting too large */
  overflow: visible !important;
  filter: drop-shadow(0px 10px 24px rgba(13,20,28,0.34));
  transform: translateZ(0);
  transition: filter 220ms ease, transform 220ms ease;
}

@property --black-gradient-stop-1 {
  syntax: '<color>';
  inherits: false;
  initial-value: #2c2828;
}
@property --black-gradient-stop-2 {
  syntax: '<color>';
  inherits: false;
  initial-value: #161010;
}
@property --black-gradient-stop-3 {
  syntax: '<color>';
  inherits: false;
  initial-value: #000000;
}


.happy-sun-svg .sun-stroke {
  stroke: url(#blackGradient);
}

/* apply the gradient stroke to the elements when hovered */
.happy-sun-svg:hover .sun-stroke {
  stroke: url(#sunGradient);
}


/* convenient helpers: add one of these classes to choose size */
.happy-sun-svg { width: 75%; }

/* Remove the initial translation */
.happy-sun-svg .sun-wrapper {
  overflow: visible;
  transform: translateX(0) scale(0.98); /* Removed the 40vw translation */
  opacity: 0;
  transition: opacity 320ms ease, transform 420ms cubic-bezier(.16,.88,.36,1);
}

#happy-sunbeam {
  overflow: visible;
}

/* set CSS timing from JS via inline style var (JS sets --burst-duration) */
.happy-sun-svg { --burst-duration: 900ms; }

.happy-sun-svg.sun--visible .sun-wrapper,
.happy-sun-svg.sun--blink .sun-wrapper {
  transform: translateX(0) scale(1);
  opacity: 1;
  transition: transform 280ms cubic-bezier(.16,.88,.36,1), opacity 220ms ease;
}

/* slide in from right when burst class applied */
@keyframes slide-right {
  0% {
    transform: translateX(40vw) scale(0.98);
    opacity: 0;
  }
  65% {
    transform: translateX(-1.5%) scale(1.02);
    opacity: 1;
  }
  100% {
    transform: translateX(0) scale(1);
    opacity: 1;
  }
}

.happy-sun-svg.sun--burst .sun-wrapper {
  animation: slide-right var(--burst-duration) cubic-bezier(.16,.88,.36,1) forwards;
}


.happy-sun-svg.sun--visible .sun-wrapper,
.happy-sun-svg.sun--blink .sun-wrapper {
  transform: translateX(0) scale(1);
  opacity: 1;
  transition: transform 280ms cubic-bezier(.16,.88,.36,1), opacity 220ms ease;
}

/* Enhanced eye blink animation */
/* ------------------------
   eyes opening during burst
   ------------------------ */

/* default: we've set inline styles in Pug so blink is visible at start; this block governs animated swaps */
@keyframes eye-open-blink-to-hidden {
  0%   { opacity: 1; }
  15%  { opacity: 0; }  /* Blink disappears early */
  100% { opacity: 0; }
}

@keyframes eye-open-half-to-hidden {
  0%   { opacity: 0; }
  15%  { opacity: 1; }  /* Half appears after blink */
  40%  { opacity: 0; }  /* Half disappears before open */
  100% { opacity: 0; }
}

@keyframes eye-open-show {
  0%   { opacity: 0; transform: translateY(3px) scaleY(0.98); }
  40%  { opacity: 0; transform: translateY(3px) scaleY(0.98); }
  65%  { opacity: 1; transform: translateY(0) scaleY(1); }
  100% { opacity: 1; transform: translateY(0) scaleY(1); }
}

/* apply these only during the burst entrance */
.happy-sun-svg.sun--burst .eye-left--blink,
.happy-sun-svg.sun--burst .eye-right--blink {
  animation: eye-open-blink-to-hidden var(--burst-duration) cubic-bezier(.16,.88,.36,1) forwards;
}

.happy-sun-svg.sun--burst .eye-left--half,
.happy-sun-svg.sun--burst .eye-right--half {
  animation: eye-open-half-to-hidden var(--burst-duration) cubic-bezier(.16,.88,.36,1) forwards;
}

.happy-sun-svg.sun--burst .eye-left--open,
.happy-sun-svg.sun--burst .eye-right--open {
  animation: eye-open-show var(--burst-duration) cubic-bezier(.16,.88,.36,1) forwards;
  transform-origin: center center;
}

/* ------------------------
   Enhanced eye blinking after burst - SEQUENTIAL blink -> half -> open -> half -> blink
   ------------------------ */

@keyframes eye-left-open-cycle {
  0%, 90%, 100% { opacity: 1; }   /* Mostly open */
  91%, 96% { opacity: 0; }        /* Fully closed */
}

@keyframes eye-left-half-cycle {
  0%, 90%, 100% { opacity: 0; }
  91%, 97% { opacity: 1; }        /* Half-open during transition */
}

@keyframes eye-left-blink-cycle {
  0%, 89%, 100% { opacity: 0; }
  90%, 96% { opacity: 1; }        /* Lid visible only during blink */
}

@keyframes eye-right-open-cycle {
  0%, 90%, 100% { opacity: 1; }
  91%, 97% { opacity: 0; }
}

@keyframes eye-right-half-cycle {
  0%, 90%, 100% { opacity: 0; }
  91%, 98% { opacity: 1; }
}

@keyframes eye-right-blink-cycle {
  0%, 89%, 100% { opacity: 0; }
  90%, 97% { opacity: 1; }
}

.happy-sun-svg.sun--blink .eye-left--blink {
  animation: 
    eye-left-blink-cycle 3s infinite cubic-bezier(0.4, 0, 0.2, 1),
    eye-bounce 4s infinite ease-in-out;
}

.happy-sun-svg.sun--blink .eye-left--half {
  animation: 
    eye-left-half-cycle 3s infinite cubic-bezier(0.4, 0, 0.2, 1),
    eye-bounce 4s infinite ease-in-out;
}

.happy-sun-svg.sun--blink .eye-left--open {
  animation: 
    eye-left-open-cycle 3s infinite cubic-bezier(0.4, 0, 0.2, 1),
    eye-bounce 4s infinite ease-in-out;
}

/* Apply animations to right eye elements with slight delay */
.happy-sun-svg.sun--blink .eye-right--blink {
  animation: 
    eye-right-blink-cycle 3s infinite cubic-bezier(0.4, 0, 0.2, 1) 0.01s,
    eye-bounce 4s infinite ease-in-out 0.01s;
}

.happy-sun-svg.sun--blink .eye-right--half {
  animation: 
    eye-right-half-cycle 3s infinite cubic-bezier(0.4, 0, 0.2, 1) 0.01s,
    eye-bounce 4s infinite ease-in-out 0.01s;
}

.happy-sun-svg.sun--blink .eye-right--open {
  animation: 
    eye-right-open-cycle 3s infinite cubic-bezier(0.4, 0, 0.2, 1) 0.01s,
    eye-bounce 4s infinite ease-in-out 0.01s;
}

/* ------------------------
   beams: burst + looping variants
   ------------------------ */

/* basic beam transition */
.happy-sun-svg .beam-variant {
  transform-origin: center;
  transform-box: fill-box;
  transition: transform 160ms cubic-bezier(.16,.88,.36,1);
}

/* Makes sun beams hide until they're animated in*/
.happy-sun-svg .beam-variant .path-beam,
.happy-sun-svg .beam-variant .line-beam {
  opacity: 0;
  transform-origin: center;
  transform-box: fill-box;
  transition:  transform 160ms cubic-bezier(.16,.88,.36,1);
}

@keyframes beam-appear {
  0% { opacity: 0; transform: scale(0.3); }
  70% { opacity: 1; transform: scale(1.05); }
  100% { opacity: 1; transform: scale(1); }
}

.happy-sun-svg .beam-variant.beam--active,
.happy-sun-svg .beam-variant.beam--active .path-beam,
.happy-sun-svg .beam-variant.beam--active .line-beam {
  opacity: 1 !important;
}


.happy-sun-svg.sun--burst .beam-1--straight .path-beam,
.happy-sun-svg.sun--burst .beam-1--straight .line-beam {
  animation: beam-appear calc(var(--burst-duration) * 0.7) cubic-bezier(.16,.88,.36,1) both;
  animation-delay: calc(var(--burst-duration) * 0.1);
}

.happy-sun-svg.sun--burst .beam-2--straight .path-beam,
.happy-sun-svg.sun--burst .beam-2--straight .line-beam {
  animation: beam-appear calc(var(--burst-duration) * 0.7) cubic-bezier(.16,.88,.36,1) both;
  animation-delay: calc(var(--burst-duration) * 0.2);
}

.happy-sun-svg.sun--burst .beam-3--straight .path-beam,
.happy-sun-svg.sun--burst .beam-3--straight .line-beam {
  animation: beam-appear calc(var(--burst-duration) * 0.7) cubic-bezier(.16,.88,.36,1) both;
  animation-delay: calc(var(--burst-duration) * 0.3);
}

.happy-sun-svg.sun--burst .beam-4--straight .path-beam,
.happy-sun-svg.sun--burst .beam-4--straight .line-beam {
  animation: beam-appear calc(var(--burst-duration) * 0.7) cubic-bezier(.16,.88,.36,1) both;
  animation-delay: calc(var(--burst-duration) * 0.4);
}

.happy-sun-svg.sun--burst .beam-5--straight .path-beam,
.happy-sun-svg.sun--burst .beam-5--straight .line-beam {
  animation: beam-appear calc(var(--burst-duration) * 0.7) cubic-bezier(.16,.88,.36,1) both;
  animation-delay: calc(var(--burst-duration) * 0.5);
}

.happy-sun-svg.sun--burst .beam-6--straight .path-beam,
.happy-sun-svg.sun--burst .beam-6--straight .line-beam {
  animation: beam-appear calc(var(--burst-duration) * 0.7) cubic-bezier(.16,.88,.36,1) both;
  animation-delay: calc(var(--burst-duration) * 0.6);
}

.happy-sun-svg.sun--burst .beam-7--straight .path-beam,
.happy-sun-svg.sun--burst .beam-7--straight .line-beam {
  animation: beam-appear calc(var(--burst-duration) * 0.7) cubic-bezier(.16,.88,.36,1) both;
  animation-delay: calc(var(--burst-duration) * 0.7);
}

.happy-sun-svg.sun--burst .beam-8--straight .path-beam,
.happy-sun-svg.sun--burst .beam-8--straight .line-beam {
  animation: beam-appear calc(var(--burst-duration) * 0.7) cubic-bezier(.16,.88,.36,1) both;
  animation-delay: calc(var(--burst-duration) * 0.8);
}

/* after burst, ensure at least the straight variant shows by default */
/* .happy-sun-svg .beam-variant.beam--active { opacity: 1; } */

/* Accessibility: reduce motion */
@media (prefers-reduced-motion: reduce) {
  .happy-sun-svg .beam-variant,
  .happy-sun-svg .eye-left--open,
  .happy-sun-svg .eye-right--open,
  .happy-sun-svg .sun-wrapper {
    animation: none !important;
    transition: none !important;
  }
}