/* ==========================================================================
   HOME — hero and Meme Vault teaser
   Loaded by index.html only. Depends on: tokens.css, components.css
   ========================================================================== */


/* ==========================================================================
   1. Hero
   ========================================================================== */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100svh;
  padding: 124px 0 var(--space-9);
  overflow: hidden;
}

/* Coin left, everything else right. Collapses to a single centred column at
   the same breakpoint the nav does — see section 3. */
.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
  align-items: center;
  gap: clamp(var(--space-6), 4vw, var(--space-9));
}

.hero__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

/* The coin. The wrapper carries the scroll reveal so the sway animation below
   isn't fighting the reveal's transform, and holds the pool of coloured light
   the artwork always puts behind the mascot. It is sized to the coin rather
   than to the column, so that pool can be a percentage of the coin itself. */
.hero__coin {
  position: relative;
  display: grid;
  place-items: center;
  width: min(100%, 440px);
  margin-inline: auto;
}

.hero__coin img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  border-radius: 50%;
  box-shadow: var(--glow-gold-lg);
  animation: coin-sway 6s ease-in-out infinite;
}

/* Spotlight pooled behind it */
.hero__coin::before {
  content: "";
  position: absolute;
  width: 128%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle,
              rgba(92, 227, 242, .26) 0%,
              rgba(155, 77, 224, .20) 44%,
              transparent 70%);
  animation: coin-pulse 6s ease-in-out infinite;
}

@keyframes coin-sway {
  0%, 100% { transform: translateY(0)     rotate(-4deg); }
  50%      { transform: translateY(-14px) rotate(4deg); }
}

@keyframes coin-pulse {
  0%, 100% { opacity: .75; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.06); }
}

.hero__eyebrow {
  margin-top: var(--space-6);
  font-family: var(--font-marker);
  font-size: clamp(1.05rem, 2.4vw, 1.4rem);
  color: var(--c-gold-soft);
  transform: rotate(-2deg);
}

.hero__title {
  margin-top: var(--space-3);
  font-family: var(--font-display);
  line-height: .92;
}

.hero__word {
  display: block;
  font-size: var(--text-hero);
  color: var(--c-gold);
  text-shadow: var(--glow-gold-lg);
}

/* Each letter bobs on its own beat — --i staggers, --r sets the tilt */
.hero__letter {
  display: inline-block;
  transform-origin: bottom center;
  animation: letter-bob 2.9s ease-in-out infinite;
  animation-delay: calc(var(--i) * .1s);
}

@keyframes letter-bob {
  0%, 100% { transform: translateY(0)     rotate(var(--r, 0deg)); }
  50%      { transform: translateY(-15px) rotate(calc(var(--r, 0deg) * -1)); }
}

.hero__word--outline {
  display: block;
  margin-top: var(--space-2);
  padding-left: .4em;
  font-size: var(--text-hero-sub);
  letter-spacing: .4em;
  color: transparent;
  -webkit-text-stroke: 2.5px var(--c-pink);
  text-shadow: 0 0 28px rgba(255, 79, 224, .4);
  transform: rotate(-2deg);
}

.hero__lede {
  max-width: 640px;
  margin-top: var(--space-6);
  font-size: clamp(1rem, 2.2vw, 1.14rem);
  color: var(--c-muted);
}

.hero__lede strong {
  color: var(--c-ink);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-7);
}

.hero .contract {
  margin-top: var(--space-6);
}

.hero__scroll-cue {
  margin-top: var(--space-8);
  font-family: var(--font-marker);
  font-size: var(--text-base);
  color: var(--c-muted);
  animation: cue-bounce 2s ease-in-out infinite;
}

@keyframes cue-bounce {
  0%, 100% { transform: translateY(0)   rotate(-1deg); }
  50%      { transform: translateY(7px) rotate(-1deg); }
}

/* --------------------------------------------------------------------------
   1b. Hero decorations — floating emojis + neon sign
   -------------------------------------------------------------------------- */
.floaty {
  position: absolute;
  z-index: 0;
  font-size: clamp(1.7rem, 3.4vw, 2.8rem);
  opacity: .9;
  pointer-events: none;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .45));
  animation: floaty 6.5s ease-in-out infinite;
}

@keyframes floaty {
  0%, 100% { transform: translateY(0)     rotate(-6deg); }
  50%      { transform: translateY(-22px) rotate(8deg); }
}

/* Three a side. The left three have the whole coin column to play in; the
   right three stay in the outer margin, clear of the copy and of the neon
   sign in the top corner. */
.floaty--1 { top: 21%;    left: 6%;   }
.floaty--3 { bottom: 14%; left: 11%;  animation-delay: -2.8s; }
.floaty--6 { top: 54%;    left: 2%;   animation-delay: -5.2s; }

.floaty--2 { top: 41%;    right: 3%;  animation-delay: -1.4s; }
.floaty--4 { bottom: 29%; right: 8%;  animation-delay: -3.6s; }
.floaty--5 { bottom: 8%;  right: 4%;  animation-delay: -4.4s; }

/* An actual neon sign, so it gets the actual neon-tube face and the cyan the
   signs in the artwork are lit with. */
.neon-sign {
  position: absolute;
  top: 120px;
  right: 5%;
  z-index: 2;
  padding: var(--space-4) var(--space-6);
  border: 3px solid var(--c-cyan);
  border-radius: var(--radius-md);
  font-family: var(--font-neon);
  font-size: 2rem;                            /* Monoton's tube only reads big */
  line-height: 1.4;
  text-align: center;
  color: var(--c-cyan);
  text-shadow: var(--glow-cyan);
  box-shadow: 0 0 24px rgba(92, 227, 242, .35), inset 0 0 22px rgba(92, 227, 242, .18);
  transform: rotate(6deg);
  animation: neon-flicker 4.5s linear infinite;
}

@keyframes neon-flicker {
  0%, 18%, 22%, 64%, 68%, 100% { opacity: 1; }
  19%, 21%                     { opacity: .35; }
  65%, 67%                     { opacity: .5; }
}


/* ==========================================================================
   1c. Meme Vault teaser strip
   Six thumbnails plus a "+n more" tile, the whole row is one link.
   ========================================================================== */
/* minmax(0, 1fr) — plain `1fr` floors each column at the image's intrinsic
   width and the row blows out sideways. */
.vault-strip {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--space-3);
}

.vault-strip img,
.vault-strip__more {
  aspect-ratio: 1 / 1;
  width: 100%;
  /* The width/height attributes on the img are presentational hints; without
     this the 560px height hint wins over aspect-ratio and the tiles stretch. */
  height: auto;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-md);
  object-fit: cover;
  transition: transform var(--dur-base) var(--ease-out),
              border-color var(--dur-base);
}

.vault-strip__more {
  display: grid;
  place-content: center;
  background: var(--c-surface);
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1.1;
  text-align: center;
  color: var(--c-gold);
}

.vault-strip__more i {
  font-style: normal;
  font-size: .5em;
  letter-spacing: .12em;
  color: var(--c-muted);
}

/* Everything lifts a little; the tile under the cursor lifts more */
.vault-strip:hover img,
.vault-strip:hover .vault-strip__more {
  border-color: var(--c-line-accent);
}

.vault-strip img:hover,
.vault-strip__more:hover {
  transform: translateY(-8px) rotate(-1.5deg);
}


/* ==========================================================================
   2. Responsive
   ========================================================================== */
/* The coin has to give room back before the wordmark starts breaking */
@media (max-width: 1180px) {
  .hero__coin { width: min(100%, 360px); }
}

@media (max-width: 1000px) {
  .neon-sign { display: none; }

  /* Drop the last two tiles so the strip stays 5 across and never squints */
  .vault-strip { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .vault-strip img:nth-child(n + 5) { display: none; }
}

/* Below the nav's own breakpoint the two columns are too narrow to hold the
   wordmark — stack them and go back to the centred arrangement. */
@media (max-width: 880px) {
  .hero {
    padding-top: 116px;
    text-align: center;
  }

  .hero__inner {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: var(--space-5);
  }

  .hero__copy {
    align-items: center;
    text-align: center;
  }

  .hero__coin { width: min(58vw, 260px); }

  .hero__lede,
  .hero__actions { justify-content: center; }

  /* Stacked, the copy runs down the middle — keep one a side, drop the rest */
  .floaty--3,
  .floaty--4,
  .floaty--5,
  .floaty--6 { display: none; }
}

@media (max-width: 700px) {
  .vault-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vault-strip img:nth-child(n + 3) { display: none; }
}

/* --------------------------------------------------------------------------
   Phone. The stacked hero above is still a desktop layout poured into a
   narrow column: it runs well past the bottom of the screen before reaching
   the Buy button. This rebuilds it thumb-first — smaller coin, tighter
   rhythm, and the two actions as full-width targets instead of a wrapped row.
   -------------------------------------------------------------------------- */
@media (max-width: 620px) {
  .hero {
    /* content height, not a forced screenful — no dead space to scroll past */
    min-height: 0;
    padding: 104px 0 var(--space-8);
  }

  .hero__inner { gap: var(--space-4); }

  .hero__coin { width: min(44vw, 172px); }

  .hero__eyebrow {
    margin-top: var(--space-4);
    font-size: 1.02rem;
  }

  .hero__title { margin-top: var(--space-2); }

  .hero__lede {
    margin-top: var(--space-4);
    font-size: .98rem;
  }

  .hero__actions {
    flex-direction: column;
    align-self: stretch;
    gap: var(--space-3);
    margin-top: var(--space-6);
  }

  .hero__actions .btn {
    justify-content: center;
    width: 100%;
  }

  .hero .contract {
    align-self: stretch;
    margin-top: var(--space-4);
  }

  /* Scrolling is self-evident on a phone, and the cue costs a button's height */
  .hero__scroll-cue { display: none; }
}

@media (max-width: 620px) {
  /* no margin left to hide in at this width */
  .floaty--1,
  .floaty--2 { display: none; }
}