/*

Core styles for the GalacticBonk site.  Colours and spacing are defined
  with CSS variables for consistency.  The layout uses scroll snapping so
  each section occupies a full viewport height, creating a sense of
  travelling through space as the user scrolls.  Additional classes
  style the starfield, rocket, comets and supernova.
*/

/* Root variables */
:root {
  --color-bg: #0a0a23;
  --color-primary: #00c2cb;
  --color-secondary: #ff3860;
  --color-accent: #ffd700;
  --color-text: #f5f5f5;
  /* Muted text colour used for paragraphs and secondary labels.  Lightened
     from the previous value to improve contrast against the dark
     starfield.  A subtle lavender hue keeps with the galactic theme. */
  /* Muted text colour for secondary copy.  Lightened for better contrast. */
  /* Lighten the muted text colour for improved contrast against
     darker panels. */
  --color-muted: #e4e4ff;
  --font-heading: 'Bangers', cursive;
  --font-body: 'Inter', sans-serif;
  --section-height: 100vh;
}

/* Global resets */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  color: var(--color-text);
  background-color: var(--color-bg);
  overflow-x: hidden;
  scroll-snap-type: y mandatory;
}

h1, h2, h3 {
  font-family: var(--font-heading);
  line-height: 1.2;
  color: var(--color-primary);
  letter-spacing: 1px;
}

p, li {
  line-height: 1.6;
  color: var(--color-muted);
  font-size: 1rem;
}

ul {
  list-style: none;
}

a {
  color: var(--color-primary);
  text-decoration: none;
}

a:hover {
  color: var(--color-secondary);
}

/* Skip link for screen readers */
.skip-link {
  position: absolute;
  top: -40px;
  left: 10px;
  padding: 8px 12px;
  background: var(--color-secondary);
  color: #fff;
  z-index: 1000;
  transition: top 0.3s;
  border-radius: 4px;
}
.skip-link:focus {
  top: 10px;
}

/* Header */
.site-header {
  position: fixed;
  top: 0;
  width: 100%;
  background: rgba(10, 10, 35, 0.8);
  backdrop-filter: blur(6px);
  z-index: 100;
}
.nav-flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  padding: 12px 20px;
}
.logo-link {
  display: flex;
  align-items: center;
  gap: 8px;
}
.logo {
  width: 40px;
  height: 40px;
}
.logo-text {
  font-size: 1.6rem;
  color: var(--color-accent);
  line-height: 1;
}

/* Navigation menu */
.nav-menu {
  position: relative;
}
.menu-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 1.5rem;
  color: var(--color-accent);
  cursor: pointer;
}
.menu-list {
  display: flex;
  gap: 20px;
}
.menu-list a {
  font-weight: 600;
  color: var(--color-muted);
  transition: color 0.2s;
}
.menu-list a:hover, .menu-list a:focus {
  color: var(--color-secondary);
}

/* Responsive menu toggle */
@media (max-width: 768px) {
  .menu-toggle {
    display: block;
  }
  .menu-list {
    position: absolute;
    top: 50px;
    right: 0;
    background: rgba(10, 10, 35, 0.9);
    flex-direction: column;
    align-items: flex-start;
    padding: 10px 20px;
    border-radius: 6px;
    display: none;
  }
  .menu-list.open {
    display: flex;
  }
}

/* Starfield and cosmic effects */
/* Universe canvas.  Draws the animated stars, comets and supernovae.
   Positioned behind everything else, it covers the entire viewport. */
#universe {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -3;
  pointer-events: none;
}
/* Individual star styling.  Slightly larger and brighter than before
   so that the twinkling effect is visible even on high‑res screens. */
.star {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  box-shadow:
    0 0 4px rgba(255,255,255,0.8),
    0 0 8px rgba(255,255,255,0.6);
  opacity: 0;
  animation: twinkle 8s ease-in-out infinite;
}
@keyframes twinkle {
  0%, 100% { opacity: 0; transform: scale(0.6); }
  50% { opacity: 1; transform: scale(1); }
}
/* Comets streaking across the sky.  Increased size and trailing glow to
   enhance visibility. */
.comet {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255,255,255,0.9);
  box-shadow:
    0 0 6px rgba(255,255,255,0.8),
    0 0 15px rgba(255,255,255,0.6),
    -10px 0 25px rgba(255,255,255,0.4);
  opacity: 0;
  animation: fly 15s linear infinite;
}
@keyframes fly {
  0% {
    transform: translate(0, 0) scale(0.5);
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  100% {
    transform: translate(-120vw, 120vh) scale(1.8);
    opacity: 0;
  }
}

.supernova {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 60%);
  animation: explode 8s ease-out infinite;
  pointer-events: none;
  z-index: -1;
}
@keyframes explode {
  0% { transform: translate(-50%, -50%) scale(0.1); opacity: 1; }
  70% { opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(20); opacity: 0; }
}

/* Rocket animation */
.rocket-container {
  position: absolute;
  bottom: -100px;
  left: 10%;
  width: 120px;
  height: 240px;
  /* Disable the default CSS animation.  The hero rocket will instead
     follow a scroll‑driven path defined in JavaScript.  The landing
     rocket still uses its own animation on `.landing-container`. */
  animation: none;
}
@keyframes launch {
  0% {
    transform: translate(0,0) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  100% {
    transform: translate(500px, -800px) rotate(-15deg);
    opacity: 0;
  }
}
.rocket-svg {
  width: 100%;
  height: 100%;
}

/* Mascot dog styling.  The dog is positioned off‑screen to the left
   initially and moves across the viewport as the user scrolls.  A
   perspective is set to enable 3D rotation along the Y‑axis.  The
   container ignores pointer events so it doesn’t interfere with
   interactions. */
.dog-container {
  /* The dog container is no longer visible because the mascot is drawn
     directly onto the canvas in JavaScript.  Keeping this rule
     ensures the element remains out of the document flow without
     removing it entirely (in case future fallbacks are needed). */
  display: none;
}

.dog-img {
  width: 100%;
  height: auto;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  /* Increase the depth effect on the mascot by intensifying the drop
     shadow and brightening the sprite slightly.  This helps the dog
     stand out against the dark background and gives the impression
     of a light source shining from above. */
  /* Increase brightness and contrast to make the 3D mascot stand out.
     A stronger drop shadow coupled with a slight saturation boost gives
     the sprite more depth against the dark starfield. */
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.7)) brightness(1.15) saturate(1.1);
}

/* 3D dog container.  This fixed‑position element hosts a Three.js
   WebGL renderer that draws the G‑Bonk mascot as a three‑dimensional
   model.  Pointer events are disabled so the user can interact
   normally with links and buttons beneath it.  We set a z‑index
   slightly above the canvas but below most text so the model sits
   between the starfield and the foreground content. */
#dog3d-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}

/* Animate the rocket flame.  The flame polygon scales and stretches
   slightly to give the impression of flickering heat.  Opacity also
   oscillates subtly so the flame never appears static. */
.rocket-svg .flame {
  transform-origin: 50% 0%;
  animation: flameFlicker 0.8s infinite ease-in-out;
}

@keyframes flameFlicker {
  0% {
    transform: scaleY(1) scaleX(1);
    opacity: 1;
  }
  50% {
    transform: scaleY(0.6) scaleX(1.2);
    opacity: 0.7;
  }
  100% {
    transform: scaleY(1) scaleX(1);
    opacity: 1;
  }
}

/* Sections */
.section {
  position: relative;
  min-height: var(--section-height);
  padding: 80px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  scroll-snap-align: start;
  overflow: hidden;
}
.section-inner {
  max-width: 900px;
  width: 100%;
  text-align: center;
  /* Give each section a semi‑transparent panel with a backdrop blur to
     dramatically improve readability against the animated starfield. */
  background: rgba(10, 10, 35, 0.85);
  backdrop-filter: blur(8px);
  padding: 40px 30px;
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.section-inner.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Section variations */
.hero {
  background: radial-gradient(circle at center, rgba(255,255,255,0.05), transparent 70%);
}

/* Override generic panel styles for the hero section.  The hero's
   content appears directly on the starfield without a backdrop so the
   rocket and title remain the focal point. */
.hero .section-inner {
  background: none;
  backdrop-filter: none;
  box-shadow: none;
  padding: 0;
}
.about {
  /* Increase background opacity for better contrast */
  /* Increase opacity slightly for better readability against the animated
     backdrop.  Each section uses a different tint to help separate
     content while still letting the starfield show through. */
  /* Increase opacity slightly for better readability */
  background: rgba(0, 0, 50, 0.9);
}
.buy {
  background: rgba(0, 10, 60, 0.9);
}
.tokenomics {
  background: rgba(0, 20, 70, 0.9);
}
.roadmap {
  background: rgba(20, 0, 60, 0.9);
}
.how {
  background: rgba(30, 0, 50, 0.9);
}
.community {
  background: rgba(40, 0, 40, 0.9);
}
.faq {
  background: rgba(50, 0, 30, 0.9);
}

/* Landing section styles.  The closing scene features a planet horizon and a
   rocket descending to symbolise the end of the journey. */
.landing {
  background: rgba(60, 0, 80, 0.9);
}
.planet {
  position: absolute;
  bottom: -80px;
  left: 50%;
  transform: translateX(-50%);
  width: 480px;
  height: 240px;
  border-radius: 50% 50% 0 0;
  background: radial-gradient(circle at 50% 30%, #3e3479, #1a093f);
  box-shadow: 0 -10px 30px rgba(0,0,0,0.4);
  pointer-events: none;
  z-index: -1;
}
.landing-container {
  position: absolute;
  top: -220px;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 240px;
  animation: land 15s linear infinite;
}
@keyframes land {
  0% {
    transform: translateX(-50%) translateY(-220px) rotate(0deg);
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  100% {
    transform: translateX(-50%) translateY(700px) rotate(15deg);
    opacity: 0;
  }
}

/* Buttons and cards */
.cta-button, .wallet-button, .copy-button {
  display: inline-block;
  margin-top: 20px;
  padding: 12px 24px;
  border: none;
  border-radius: 4px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  background: var(--color-secondary);
  color: #fff;
  transition: background 0.3s;
}
.cta-button:hover, .wallet-button:hover, .copy-button:hover {
  background: var(--color-accent);
}
.wallet-status {
  margin-top: 8px;
  font-size: 0.9rem;
  color: var(--color-primary);
}
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin-top: 20px;
}
.info-card {
  padding: 16px;
  background: rgba(255,255,255,0.05);
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.1);
  transition: transform 0.3s, background 0.3s;
  color: var(--color-text);
}
.info-card:hover {
  transform: translateY(-4px);
  background: rgba(255,255,255,0.1);
}

/* Chart container */
.chart-container {
  width: 100%;
  max-width: 300px;
  height: 300px;
  margin: 20px auto;
  /* Add a subtle backdrop for contrast */
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  padding: 10px;
}
.token-list {
  text-align: left;
  margin-top: 20px;
  color: var(--color-muted);
}
.token-list li {
  margin-bottom: 6px;
}

/* Roadmap timeline */
.timeline {
  display: grid;
  gap: 20px;
  margin-top: 20px;
}
.timeline-item {
  padding: 12px;
  background: rgba(255,255,255,0.05);
  border-radius: 6px;
  border-left: 3px solid var(--color-primary);
  text-align: left;
}
.timeline-item h3 {
  margin-bottom: 4px;
  font-size: 1.4rem;
  color: var(--color-secondary);
}
.timeline-item p {
  font-size: 1rem;
  color: var(--color-muted);
}

/* Steps */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-top: 20px;
  text-align: left;
}
.step h3 {
  font-size: 1.3rem;
  color: var(--color-secondary);
  margin-bottom: 4px;
}
.step p {
  font-size: 0.95rem;
  color: var(--color-muted);
}
.contract-address {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: center;
}
.contract-address code {
  background: rgba(255,255,255,0.1);
  padding: 6px 10px;
  border-radius: 4px;
  font-family: monospace;
  color: var(--color-accent);
}
.copy-status {
  font-size: 0.9rem;
  color: var(--color-primary);
}

/* Social links */
.social-links {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 20px;
}
.social-links img {
  width: 32px;
  height: 32px;
  filter: brightness(1.2);
  transition: transform 0.3s;
}
.social-links img:hover {
  transform: scale(1.1);
}
.whitepaper-link {
  align-self: center;
  padding: 8px 16px;
  background: rgba(255,255,255,0.05);
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--color-primary);
  font-weight: 600;
  transition: background 0.3s;
}
.whitepaper-link:hover {
  background: rgba(255,255,255,0.15);
}

/* Tweet feed */
.tweet-feed {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}
.tweet-feed li {
  background: rgba(255,255,255,0.05);
  padding: 10px 14px;
  border-radius: 6px;
  border-left: 3px solid var(--color-secondary);
  text-align: left;
  color: var(--color-text);
}
.tweet-feed li span {
  color: var(--color-accent);
  font-size: 0.85rem;
}

/* FAQ */
.faq-item {
  margin-top: 15px;
  text-align: left;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 6px;
  overflow: hidden;
}
.faq-question {
  width: 100%;
  padding: 12px;
  background: rgba(255,255,255,0.05);
  font-family: var(--font-heading);
  font-size: 1.2rem;
  color: var(--color-primary);
  border: none;
  text-align: left;
  cursor: pointer;
  outline: none;
  position: relative;
}
.faq-question::after {
  content: '+';
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem;
  color: var(--color-accent);
}
.faq-item.open .faq-question::after {
  content: '–';
}
.faq-answer {
  max-height: 0;
  overflow: hidden;
  background: rgba(255,255,255,0.03);
  padding: 0 12px;
  transition: max-height 0.5s ease;
}

/* When a FAQ item is open, allow the answer to expand fully.  This
   prevents the need for inline JS to set explicit heights. */
.faq-item.open .faq-answer {
  max-height: 800px;
}
.faq-answer p {
  padding: 12px 0;
  font-size: 0.95rem;
  color: var(--color-muted);
}

/* Footer */
.footer {
  padding: 20px 0;
  text-align: center;
  font-size: 0.85rem;
  background: rgba(10, 10, 35, 0.9);
  backdrop-filter: blur(4px);
  position: relative;
  z-index: 10;
}

/* Scroll progress indicator.  A slim vertical bar on the right edge of
   the screen shows how far down the page the visitor has scrolled.
   It uses a gradient to tie in with the site’s primary and secondary
   colours. */
.progress-container {
  position: fixed;
  top: 0;
  right: 20px;
  width: 4px;
  height: 100%;
  background: rgba(255, 255, 255, 0.1);
  z-index: 150;
  border-radius: 2px;
}
.progress-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0%;
  background: linear-gradient(to top, var(--color-secondary), var(--color-primary));
  border-radius: 2px;
  transition: height 0.2s ease-out;
}

/* Utilities */
.hidden {
  display: none;
}

/* Hide 3D mascot container */
#dog3d-container {
  display: none !important;
}







/* Uniform background across sections */
.about, .buy, .tokenomics, .roadmap, .how, .community, .faq, .landing {
  background: rgba(10, 10, 35, 0.9);
  backdrop-filter: blur(5px);
}

/* Make logo text white */
.logo-text {
  color: #fff !important;
}

/* Override section backgrounds to show the full starfield */
.about,
.buy,
.tokenomics,
.roadmap,
.how,
.community,
.faq,
.landing,
.footer {
  background: none !important;
  backdrop-filter: none !important;
}

/* Soften the section panels for readability while letting the stars shine */
.section-inner {
  background: rgba(10, 10, 35, 0.6) !important;
  backdrop-filter: blur(4px);
}

/* Remove the backdrop square behind the tokenomics donut chart */
.chart-container {
  /* Remove any background and shadow so the starfield shines through */
  background: none !important;
  box-shadow: none !important;
  /* Remove padding and rounding so there's no visible panel */
  padding: 0 !important;
  border-radius: 0 !important;
  /* Disable backdrop blur to avoid a tinted square around the chart */
  backdrop-filter: none !important;
}


/* Ensure the site logo text matches the navigation */
.site-header .logo-text {
  color: var(--color-text) !important;
}

/* Hide hero and landing rockets */
.rocket-container,
.landing-container {
  display: none !important;
}

/* Secondary call-to-action button
   The secondary CTA is styled as an outlined button so it doesn’t compete
   visually with the primary “Buy $GBONK” button.  It retains the same
   padding and typography for consistency but uses a transparent
   background and coloured border. */
.secondary-cta {
  margin-left: 12px;
  background: transparent !important;
  border: 2px solid var(--color-secondary);
  color: var(--color-secondary) !important;
}
.secondary-cta:hover {
  background: var(--color-secondary) !important;
  color: #fff !important;
}

/* Hide scroll progress indicator */
.progress-container {
  display: none !important;
}