/* ==========================================================
   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, 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: hidden;
}

.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 gScaleIn {
  from { opacity: 0; transform: scale(0.6); }
  to   { opacity: 1; transform: scale(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; }
}
@keyframes gShimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes gConfetti {
  0%   { transform: translate(0,0) rotate(0deg); opacity: 1; }
  100% { transform: translate(var(--cx), var(--cy)) rotate(var(--cr)); opacity: 0; }
}

/* 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; }

/* shimmer button sheen */
.sheen { position: relative; overflow: hidden; }
.sheen::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.45) 50%, transparent 70%);
  background-size: 220% 100%;
  background-position: -120% 0;
  pointer-events: none;
}
.sheen:hover::after { animation: gShimmer 0.9s ease; }

/* 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; }

/* confetti piece */
.confetti-piece {
  position: fixed; top: 0; left: 0; z-index: 9999;
  pointer-events: none; will-change: transform, opacity;
  animation: gConfetti var(--cd, 1100ms) cubic-bezier(.15,.6,.4,1) forwards;
}

/* input */
.g-input {
  font-family: inherit; font-size: 16px; color: var(--g-ink);
  border: 0; background: transparent; outline: none; width: 100%;
}
.g-input::placeholder { color: var(--g-ink-3); }

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

/* 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; }
}