/* ==========================================================
   Gramigo — landing page styles
   ========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@500;600;700&family=Fredoka+One&family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@500;600&display=swap');

:root {
  --g-primary:  #8B6EF5;
  --g-protein:  #8065F1;
  --g-carb:     #F04F9E;
  --g-fat:      #20C06C;
  --g-fiber:    #4A98F9;
  --g-nouki:    #FADE4D;

  --g-ink:      #1B1735;
  --g-ink-2:    #5A5677;
  --g-ink-3:    #9794AE;
  --g-card:     #FFFFFF;
  --g-stroke:   rgba(60, 50, 100, 0.08);

  --accent:     #8B6EF5;
  --accent-2:   #A691FF;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 84px; /* keep section headings clear of the sticky nav */
}

html, body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  color: var(--g-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip; /* clip (not hidden) so it doesn't create a scroll container that breaks the sticky nav */
}

.g-wordmark { font-family: 'Fredoka One', cursive; letter-spacing: 0.3px; }
.g-display  { font-family: 'Fredoka One', cursive; }
.g-mono     { font-family: 'JetBrains Mono', ui-monospace, monospace; }
.g-hand     { font-family: 'Caveat', 'Segoe Script', cursive; }

button { font-family: inherit; }
.g-btn { border: 0; background: none; cursor: pointer; font: inherit; color: inherit; padding: 0; -webkit-tap-highlight-color: transparent; }

/* ---------- delight keyframes ---------- */

@keyframes gBob {
  0%, 100% { transform: translateY(0) rotate(var(--rot, 0deg)); }
  50%      { transform: translateY(-12px) rotate(var(--rot, 0deg)); }
}
@keyframes gBobSmall {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}
@keyframes gFloat {
  0%, 100% { transform: translateY(0) rotate(var(--rot, 0deg)); }
  50%      { transform: translateY(-18px) rotate(calc(var(--rot, 0deg) + 6deg)); }
}
@keyframes gWiggle {
  0%, 100% { transform: rotate(0deg); }
  25%      { transform: rotate(-9deg); }
  75%      { transform: rotate(9deg); }
}
@keyframes gPop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.18) translateY(-10px); }
  100% { transform: scale(1) translateY(0); }
}
@keyframes gPulseRing {
  0%   { transform: scale(0.85); opacity: 0.5; }
  100% { transform: scale(1.7); opacity: 0; }
}
@keyframes gFadeUp {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes gFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes gSpinSlow { to { transform: rotate(360deg); } }
@keyframes gDots {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
  40%           { transform: scale(1);   opacity: 1; }
}
/* reveal-on-scroll — opacity flips instantly when "in" is added (no transition,
   so it never depends on a running animation clock); only the slide transitions.
   Above-fold content ships with "in" already in the markup → static & visible. */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: transform 0.7s cubic-bezier(.2,.8,.2,1);
  will-change: transform;
}
.reveal.in { opacity: 1; transform: none; }

/* floaty decorations */
.floaty { animation: gFloat var(--dur, 6s) ease-in-out infinite; will-change: transform; }
.bobby  { animation: gBob var(--dur, 4.5s) ease-in-out infinite; will-change: transform; }

/* mascot crew avatar interactions */
.crew-avatar { cursor: pointer; transition: transform 0.25s cubic-bezier(.2,.8,.2,1); will-change: transform; }
.crew-avatar:hover { animation: gPop 0.5s ease; }
.crew-avatar:active { transform: scale(0.94); }

/* spinner */
.g-spin { animation: gSpinSlow 0.8s linear infinite; }

/* typing dots */
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; }
.dot:nth-child(1) { animation: gDots 1.3s ease-in-out infinite 0s; }
.dot:nth-child(2) { animation: gDots 1.3s ease-in-out infinite 0.18s; }
.dot:nth-child(3) { animation: gDots 1.3s ease-in-out infinite 0.36s; }

::selection { background: rgba(139,110,245,0.22); }

/* ---------- top navigation ---------- */
.nav-link { position: relative; }
.nav-link::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: -2px;
  height: 2px; border-radius: 2px;
  background: var(--accent);
  transform: scaleX(0); transform-origin: center;
  transition: transform 0.24s cubic-bezier(.2,.8,.2,1);
}
.nav-link:hover { color: var(--g-ink); }
.nav-link:hover::after { transform: scaleX(1); }
.nav-link:focus-visible,
.nav-contact:focus-visible,
.nav-cta:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px;
}
.nav-contact:hover { color: var(--g-ink); }
.nav-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--accent) 46%, transparent);
}
.nav-cta:active { transform: translateY(0); }

@media (max-width: 860px) {
  .nav-links { display: none !important; }
}
@media (max-width: 560px) {
  .nav-contact { display: none !important; }
}

/* faq accordion */
.g-faq summary::-webkit-details-marker { display: none; }
.g-faq[open] .g-faq-plus { transform: rotate(45deg); }
.g-faq summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }

/* responsive */
@media (max-width: 860px) {
  .peek-grid { grid-template-columns: 1fr !important; }
}

@media (prefers-reduced-motion: reduce) {
  .floaty, .bobby, .g-spin, .crew-avatar:hover { animation: none !important; }
  .reveal { opacity: 1 !important; }
  .reveal.in { animation: none; }
}