/* ============================================================
   COBRA — SCROLL REVEAL + RESPONSIVE
   ============================================================ */

/* --- IO scroll-reveal base state (JS adds ctg-visible) ---- */
.ctg-section {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .65s ease, transform .65s ease;
}

.ctg-section.ctg-visible {
  opacity: 1;
  transform: none;
}

/* Stagger child intro elements when section becomes visible */
.ctg-section.ctg-visible .ctg-hero__badge         { transition-delay: .10s; }
.ctg-section.ctg-visible .ctg-hero__heading        { transition-delay: .18s; }
.ctg-section.ctg-visible .ctg-hero__ctas           { transition-delay: .28s; }
.ctg-section.ctg-visible .ctg-hero__stats          { transition-delay: .40s; }
.ctg-section.ctg-visible .ctg-hero__right          { transition-delay: .14s; }

/* --- Nav shrink after 80 px scroll ------------------------- */
#ctg-nav .ctg-nav__logo img {
  transition: transform .3s ease;
}

#ctg-nav.is-shrunk .ctg-nav__inner {
  padding-top:    8px;
  padding-bottom: 8px;
}

#ctg-nav.is-shrunk .ctg-nav__logo img {
  transform: scale(.82);
}

/* ============================================================
   BREAKPOINT — 900 px (tablet landscape / small desktop)
   ============================================================ */
@media (max-width: 900px) {

  /* Hero */
  .ctg-hero__inner {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .ctg-hero__right {
    order: -1;
    justify-self: center;
    max-width: 340px;
  }

  .ctg-hero__ctas {
    justify-content: center;
  }

  .ctg-hero__stats {
    justify-content: center;
  }

  /* Watch */
  .ctg-watch__grid {
    grid-template-columns: 1fr;
  }

  .ctg-watch__sidebar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: start;
  }

  .ctg-watch__twitch-btn {
    grid-column: 1 / -1;
  }

  /* Merch */
  .ctg-merch__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* About */
  .ctg-about__inner {
    grid-template-columns: 1fr;
  }

  .ctg-about__photo-col {
    justify-self: center;
    max-width: 280px;
  }

  /* Footer */
  .ctg-footer__grid {
    grid-template-columns: 1fr 1fr;
  }

  .ctg-footer__brand {
    grid-column: 1 / -1;
  }
}

/* ============================================================
   BREAKPOINT — 580 px (mobile portrait)
   ============================================================ */
@media (max-width: 580px) {

  /* Nav */
  .ctg-nav__hamburger-label {
    display: none;
  }

  /* Hero */
  .ctg-hero__heading-display {
    font-size: clamp(2.4rem, 12vw, 4rem);
  }

  .ctg-hero__heading-sub {
    font-size: clamp(1rem, 5vw, 1.6rem);
  }

  .ctg-hero__ctas {
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }

  .ctg-hero__ctas .ctg-btn {
    width: 100%;
    max-width: 320px;
    text-align: center;
  }

  .ctg-hero__stats {
    gap: 16px;
  }

  /* Merch: single column */
  .ctg-merch__grid {
    grid-template-columns: 1fr;
  }

  /* Cart drawer: full-width on mobile */
  #ctg-cart-drawer {
    width: 100%;
    max-width: 100%;
    border-radius: 0;
  }

  /* Join */
  .ctg-join__form {
    flex-direction: column;
    gap: 10px;
  }

  .ctg-join__input,
  .ctg-join__submit {
    width: 100%;
  }

  .ctg-join__socials {
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
  }

  /* Footer */
  .ctg-footer__grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .ctg-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  /* Watch sidebar: single col */
  .ctg-watch__sidebar {
    grid-template-columns: 1fr;
  }
}