/* ==========================================================================
   Make-Her Hack — hero
   ========================================================================== */

.hero {
  --mx: 0;
  --my: 0;
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: max(100svh, 700px);
  padding-top: calc(var(--nav-h) + 1rem);
  overflow: hidden;
  background:
    radial-gradient(ellipse 70% 45% at 50% 100%, rgba(250, 92, 148, .28) 0%, transparent 70%),
    radial-gradient(ellipse 90% 70% at 50% 30%, #211032 0%, var(--ink) 72%);
}

.hero__stars {
  position: absolute;
  inset: 0;
  z-index: -3;
  width: 100%;
  height: 100%;
}

/* Title-card starburst, slowly turning behind the logo */
.hero__rays {
  position: absolute;
  top: 30%;
  left: 50%;
  z-index: -2;
  width: 220vmax;
  aspect-ratio: 1;
  background: repeating-conic-gradient(rgba(255, 255, 255, .075) 0deg 5deg, transparent 5deg 15deg);
  -webkit-mask-image: radial-gradient(circle, #000 0%, transparent 42%);
  mask-image: radial-gradient(circle, #000 0%, transparent 42%);
  translate: -50% -50%;
  animation: rays-spin 140s linear infinite;
}

.hero__glow {
  position: absolute;
  left: 50%;
  bottom: -12%;
  z-index: -1;
  width: min(1100px, 130vw);
  height: 60vmin;
  background: radial-gradient(ellipse at 50% 100%, var(--accent) 0%, transparent 68%);
  opacity: .5;
  filter: blur(40px);
  translate: -50% 0;
  transition: background .6s;
}

.hero__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(960px, 100% - 2rem);
  text-align: center;
  transform: translate3d(calc(var(--mx) * 10px), calc(var(--my) * 8px), 0);
  transition: transform .4s var(--ease-out);
}

.hero__kicker {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin: 0 0 .4rem;
  font-size: clamp(.72rem, 1.4vw, .88rem);
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--yellow);
  animation: rise .8s var(--ease-out) .15s both;
}
.hero__kicker-star {
  display: inline-block;
  animation: twinkle 2.4s ease-in-out infinite;
}
.hero__kicker-star:last-child { animation-delay: 1.2s; }

.hero__title {
  /* 74vh wide keeps the logo about a quarter of the screen tall on short laptops */
  width: min(740px, 90vw, 74vh);
  margin: 0 auto;
}

.hero__logo {
  width: 100%;
  filter:
    drop-shadow(0 0 32px rgba(250, 92, 148, .45))
    drop-shadow(0 14px 0 rgba(0, 0, 0, .5));
  transform-origin: 50% 60%;
  animation:
    logo-in 1.1s var(--ease-pop) both,
    float 6s ease-in-out 1.2s infinite;
  cursor: pointer;
}

.hero__tagline {
  max-width: 54rem;
  margin: 1rem 0 1.1rem;
  font-size: clamp(1.08rem, 2.1vw, 1.38rem);
  font-weight: 500;
  line-height: 1.5;
  animation: rise .8s var(--ease-out) .5s both;
}
.hero__tagline mark {
  padding: 0 .35em;
  font-weight: 600;
  color: #000;
  background: var(--accent);
  border-radius: 8px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-color .35s;
}
.hero__tagline strong {
  color: var(--yellow);
  font-weight: 700;
}

.hero__chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .6rem;
  margin: 0 0 1.6rem;
  padding: 0;
  list-style: none;
  animation: rise .8s var(--ease-out) .65s both;
}
.hero__chips li {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .4rem .9rem;
  font-size: .92rem;
  font-weight: 600;
  background: rgba(255, 255, 255, .07);
  border: 2px solid rgba(255, 255, 255, .2);
  border-radius: 999px;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.hero__chips svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1rem 1.25rem;
  scroll-margin-top: 40vh;
  animation: rise .8s var(--ease-out) .8s both;
}

.countdown {
  display: flex;
  gap: .6rem;
  margin-top: 1.6rem;
  animation: rise .8s var(--ease-out) .95s both;
}
.countdown[hidden] { display: none; }
.countdown__cell {
  min-width: 4.3rem;
  padding: .55rem .4rem .45rem;
  color: #000;
  text-align: center;
  background: var(--white);
  border: 3px solid #000;
  border-radius: 14px;
  box-shadow: 4px 4px 0 var(--accent);
}
.countdown__cell b {
  display: block;
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 400;
  line-height: 1;
}
.countdown__cell span {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* The girls fly up out of their light beams, which converge at the fold */
.hero__girls {
  position: relative;
  z-index: 1;
  width: min(820px, 94vw, 78vh);
  margin-top: clamp(.75rem, 3vh, 2rem);
  margin-bottom: -1px;
  pointer-events: none;
  transform: translate3d(calc(var(--mx) * -22px), calc(var(--my) * -10px), 0);
  transition: transform .5s var(--ease-out);
}
.hero__girls img {
  width: 100%;
  animation:
    girls-in 1.3s var(--ease-out) .3s both,
    hover 4.5s ease-in-out 1.6s infinite;
}

@keyframes rise {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: none; }
}
@keyframes logo-in {
  0% { opacity: 0; transform: scale(.35) rotate(-10deg); }
  60% { opacity: 1; transform: scale(1.07) rotate(2deg); }
  100% { opacity: 1; transform: none; }
}
@keyframes float {
  0%, 100% { transform: none; }
  50% { transform: translateY(-10px) rotate(-1deg); }
}
@keyframes girls-in {
  from { opacity: 0; transform: translateY(140px) scale(.88); }
  to { opacity: 1; transform: none; }
}
@keyframes hover {
  0%, 100% { transform: none; }
  50% { transform: translateY(-12px); }
}
@keyframes twinkle {
  0%, 100% { opacity: 1; transform: scale(1) rotate(0); }
  50% { opacity: .45; transform: scale(.7) rotate(40deg); }
}
@keyframes rays-spin { to { rotate: 360deg; } }

/* Logo tap easter egg — on the wrapper, so the logo's own animations don't restart */
.hero__title.is-zapped {
  animation: zap .6s var(--ease-pop);
}
@keyframes zap {
  0% { transform: none; }
  30% { transform: scale(1.12) rotate(-3deg); }
  60% { transform: scale(.96) rotate(2deg); }
  100% { transform: none; }
}

@media (max-width: 600px) {
  .hero { padding-top: calc(var(--nav-h) + .75rem); }
  .hero__chips li { font-size: .84rem; padding: .35rem .75rem; }
  .hero__actions .btn--ghost { padding: .8rem 1.2rem; }
  .countdown__cell { min-width: 3.7rem; }
  .countdown__cell b { font-size: 1.4rem; }
}