/* Hero showcase: a glowing title and countdown, layered over the 3D ocean. */

/* Deep-sea gradient letters with a mint offset shadow. */
.hero-hack,
.hero-social {
  display: inline-block;
  padding-right: .04em;
  background: linear-gradient(175deg, #145a6e, #0d2f3d 55%, #061c26);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  filter: drop-shadow(3px 3px 0 #00cb8c) drop-shadow(0 10px 22px rgba(13, 47, 61, .28));
}

/* Glowing "4" with a twinkling star. */
.hero h1 .four {
  position: relative;
  display: inline-block;
  background: linear-gradient(170deg, #7dffd6, #00e09b 45%, #00a874);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 16px rgba(0, 224, 155, .6));
}
.hero-sparkle {
  position: absolute; top: 0; right: -.38em;
  width: .3em; height: .3em;
  fill: #ffe38a;
  filter: drop-shadow(0 0 8px rgba(255, 214, 102, .95));
  animation: hero-twinkle 2.6s ease-in-out infinite;
}
@keyframes hero-twinkle {
  0%, 100% { transform: scale(.7) rotate(0deg); opacity: .65; }
  50%      { transform: scale(1.15) rotate(45deg); opacity: 1; }
}

/* Light sweeping through the hollow "Good". */
.hero .hero-good {
  display: inline-block;
  padding-right: .08em;
  background: linear-gradient(105deg, transparent 30%, rgba(0, 224, 155, .9) 45%, rgba(125, 230, 255, .95) 52%, transparent 66%) 0 0 / 300% 100% no-repeat;
  -webkit-background-clip: text; background-clip: text;
  animation: hero-sweep 4.5s ease-in-out infinite;
}
@keyframes hero-sweep {
  0%        { background-position: 100% 0; }
  60%, 100% { background-position: 0 0; }
}

/* Countdown: glowing digits and a label pill. */
.hero .countdown .n {
  font-weight: 800;
  text-shadow: 0 0 12px rgba(125, 255, 214, .85), 0 0 28px rgba(0, 224, 155, .5), 0 2px 4px rgba(4, 48, 61, .45);
}
.hero .cd-label {
  display: inline-block;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(6, 28, 38, .78);
  color: #7dffd6;
}

@media (prefers-reduced-motion: reduce) {
  .hero-sparkle, .hero .hero-good { animation: none; }
}