/* ==========================================================================
   Good Boy Labs — stylesheet
   Design tokens -> base -> layout -> components -> keyframes -> motion prefs
   ========================================================================== */

:root {
  /* Palette */
  --color-bg: #EFE9DC;      /* page background, cream */
  --color-panel: #E6DFD0;   /* footer bar / scene background, darker cream */
  --color-ink: #14130F;     /* near-black, text & outlines */
  --color-red: #FF3B21;     /* accent, brand red */
  --color-acid: #C9F227;    /* accent, acid green (swap this to re-theme) */
  --color-yellow: #FFC700;  /* potion / explosion yellow */
  --color-fur: #C8863C;     /* dog fur */
  --color-ear: #6E4322;     /* dog ear (darker fur) */
  --color-muzzle: #F0E2CC;  /* dog muzzle */
  --color-nose: #F0748E;    /* dog tongue */

  /* Type */
  --font-display: 'Archivo Black', Archivo, 'Helvetica Neue', Helvetica, sans-serif;
  --font-body: Archivo, 'Helvetica Neue', Helvetica, sans-serif;
  --font-mono: 'Space Mono', monospace;

  /* Motion */
  --gag-duration: 13s; /* length of the dog's full lab-gag cycle */
}

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  min-height: 100svh;
}

a {
  color: var(--color-ink);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
a:hover { color: var(--color-red); }

::selection { background: var(--color-acid); color: var(--color-ink); }

/* ---------- Page shell ---------- */

.page {
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  overflow-x: hidden;
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  flex: 1 1 auto;
  padding: clamp(18px, 3vh, 48px) clamp(16px, 4vw, 48px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(16px, 2.5vw, 48px);
  align-items: center;
}

.hero-copy { min-width: 0; }

.wordmark {
  font-family: var(--font-display);
  font-size: clamp(40px, min(9vw, 13vh), 128px);
  line-height: 0.86;
  letter-spacing: -0.035em;
  margin: 0 0 clamp(12px, 2vh, 22px);
  text-wrap: balance;
}
.wordmark .dot { color: var(--color-red); }

.tagline {
  font-size: clamp(17px, min(2.3vw, 3.2vh), 30px);
  line-height: 1.25;
  max-width: 22ch;
  margin: 0;
  font-weight: 600;
  text-wrap: pretty;
}

/* ---------- Lab scene ---------- */

.scene-wrap { position: relative; min-width: 0; }

.scene-tag {
  position: absolute;
  top: 12px;
  right: -4px;
  z-index: 3;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  background: var(--color-red);
  color: var(--color-bg);
  border: 1.5px solid var(--color-ink);
  padding: 5px 9px;
  transform: rotate(4deg);
  pointer-events: none;
}

.scene {
  appearance: none;
  -webkit-appearance: none;
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  font: inherit;
  text-align: left;
  position: relative;
  border: 2px solid var(--color-ink);
  border-radius: 4px;
  background: var(--color-panel);
  overflow: hidden;
  cursor: pointer;
  animation: gb-shake var(--gag-duration) linear infinite;
}
.scene:focus-visible {
  outline: 3px solid var(--color-ink);
  outline-offset: 3px;
}

.scene-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--color-ink) 1px, transparent 1px),
    linear-gradient(90deg, var(--color-ink) 1px, transparent 1px);
  background-size: 28px 28px;
  opacity: 0.07;
  pointer-events: none;
}

.scene svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: min(48svh, 380px);
}

.goodboy-badge {
  position: absolute;
  left: 24%;
  bottom: 16px;
  z-index: 5;
  transform: translateX(-50%);
  animation: gb-goodboy var(--gag-duration) ease-out infinite;
  pointer-events: none;
  font-family: var(--font-display);
  font-size: clamp(18px, 2.6vw, 32px);
  white-space: nowrap;
  background: var(--color-ink);
  color: var(--color-acid);
  padding: 8px 18px;
  border-radius: 2px;
  letter-spacing: -0.01em;
}

.bark-bubble {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 4;
  max-width: min(34%, 230px);
  background: var(--color-bg);
  border: 2px solid var(--color-ink);
  border-radius: 4px;
  padding: 8px 11px;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.4;
  box-shadow: 4px 4px 0 var(--color-ink);
  animation: gb-bub 1.6s ease-in-out infinite;
}
.bark-bubble[hidden] { display: none; }

/* ---------- Control bar ---------- */

.control-bar {
  flex: 0 0 auto;
  padding: clamp(14px, 2.4vh, 30px) clamp(16px, 4vw, 48px);
  border-top: 2px solid var(--color-ink);
  background: var(--color-panel);
  display: flex;
  flex-wrap: wrap;
  gap: clamp(12px, 3vw, 36px);
  align-items: center;
  justify-content: center;
}

.btn {
  font-family: var(--font-display);
  font-size: clamp(13px, 1.4vw, 16px);
  letter-spacing: 0.06em;
  color: var(--color-ink);
  background: var(--color-red);
  border: 2px solid var(--color-ink);
  border-radius: 999px;
  padding: clamp(12px, 1.8vh, 18px) clamp(24px, 3vw, 38px);
  cursor: pointer;
  box-shadow: 0 6px 0 var(--color-ink);
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 0 var(--color-ink);
}
.btn:active {
  transform: translateY(6px);
  box-shadow: 0 0 0 var(--color-ink);
}
.btn:focus-visible {
  outline: 3px solid var(--color-ink);
  outline-offset: 3px;
}

.press-msg {
  font-family: var(--font-mono);
  font-size: clamp(12px, 1.2vw, 14px);
  max-width: 44ch;
  min-height: 1em;
  text-wrap: pretty;
}

.email {
  font-family: var(--font-display);
  font-size: clamp(18px, 2.6vw, 34px);
  letter-spacing: -0.03em;
  text-decoration: none;
  border-bottom: 5px solid var(--color-acid);
  word-break: break-word;
  line-height: 1.1;
  margin-left: auto;
}

/* ==========================================================================
   Keyframes — the lab-gag cycle
   Every timed piece below is a percentage of --gag-duration, so they all
   stay in sync off a single shared clock. The gag: tail wags, then around
   62–69% a bottle tips into the potion, which erupts (flash/fire/ring/
   embers/shake), then everything settles back to rest.
   ========================================================================== */

@keyframes gb-wag {
  0%   { transform: rotate(-7deg) }  1.5% { transform: rotate(7deg) }
  3%   { transform: rotate(-7deg) }  4.5% { transform: rotate(7deg) }
  6%   { transform: rotate(-8deg) }  7.5% { transform: rotate(8deg) }
  9%   { transform: rotate(-9deg) }  10.5% { transform: rotate(9deg) }
  12%  { transform: rotate(-10deg) } 13.5% { transform: rotate(10deg) }
  15%  { transform: rotate(-11deg) } 16.5% { transform: rotate(11deg) }
  18%  { transform: rotate(-13deg) } 19.5% { transform: rotate(13deg) }
  21%  { transform: rotate(-14deg) } 22.5% { transform: rotate(14deg) }
  24%  { transform: rotate(-16deg) } 25.5% { transform: rotate(16deg) }
  27%  { transform: rotate(-18deg) } 28.5% { transform: rotate(18deg) }
  30%  { transform: rotate(-20deg) } 31.5% { transform: rotate(20deg) }
  33%  { transform: rotate(-22deg) } 34.5% { transform: rotate(22deg) }
  36%  { transform: rotate(-24deg) } 37.5% { transform: rotate(24deg) }
  39%  { transform: rotate(-26deg) } 40.5% { transform: rotate(26deg) }
  42%  { transform: rotate(-28deg) } 43.5% { transform: rotate(28deg) }
  45%  { transform: rotate(-30deg) } 46.5% { transform: rotate(30deg) }
  48%  { transform: rotate(-33deg) } 49.5% { transform: rotate(33deg) }
  51%  { transform: rotate(-36deg) } 52.5% { transform: rotate(36deg) }
  54%  { transform: rotate(-39deg) } 55.5% { transform: rotate(39deg) }
  57%  { transform: rotate(-42deg) } 58.5% { transform: rotate(42deg) }
  60%  { transform: rotate(-45deg) } 61.5% { transform: rotate(45deg) }
  63%  { transform: rotate(-48deg) } 64.5% { transform: rotate(48deg) }
  66%  { transform: rotate(-52deg) } 67.5% { transform: rotate(52deg) }
  69%  { transform: rotate(-56deg) }
  71%  { transform: rotate(10deg) }  74% { transform: rotate(-5deg) }
  78%  { transform: rotate(4deg) }
  82%  { transform: rotate(-6deg) }  86% { transform: rotate(6deg) }
  90%  { transform: rotate(-6deg) }  95% { transform: rotate(6deg) }
  100% { transform: rotate(-7deg) }
}

@keyframes gb-bottleA {
  0%, 40% { transform: translate(0, 0) rotate(0deg) }
  46% { transform: translate(0, 0) rotate(-4deg) }
  52% { transform: translate(0, 0) rotate(3deg) }
  58% { transform: translate(0, 0) rotate(-6deg) }
  62% { transform: translate(0, 0) rotate(-16deg) }
  66% { transform: translate(-16px, 48px) rotate(-92deg) }
  68% { transform: translate(-20px, 52px) rotate(-99deg) }
  92% { transform: translate(-20px, 52px) rotate(-99deg) }
  95% { transform: translate(0, -6px) rotate(0deg) scale(1.12) }
  97% { transform: translate(0, 0) rotate(0deg) scale(1) }
  100% { transform: translate(0, 0) rotate(0deg) }
}

@keyframes gb-bottleB {
  0%, 40% { transform: translate(0, 0) rotate(0deg) }
  46% { transform: translate(0, 0) rotate(4deg) }
  52% { transform: translate(0, 0) rotate(-3deg) }
  58% { transform: translate(0, 0) rotate(7deg) }
  62% { transform: translate(0, 0) rotate(18deg) }
  66% { transform: translate(22px, 48px) rotate(94deg) }
  68% { transform: translate(26px, 52px) rotate(103deg) }
  92% { transform: translate(26px, 52px) rotate(103deg) }
  95% { transform: translate(0, -7px) rotate(0deg) scale(1.12) }
  97% { transform: translate(0, 0) rotate(0deg) scale(1) }
  100% { transform: translate(0, 0) rotate(0deg) }
}

@keyframes gb-bottleC {
  0%, 40% { transform: translate(0, 0) rotate(0deg) }
  46% { transform: translate(0, 0) rotate(-5deg) }
  52% { transform: translate(0, 0) rotate(4deg) }
  58% { transform: translate(0, 0) rotate(-7deg) }
  62% { transform: translate(0, 0) rotate(-20deg) }
  66% { transform: translate(-12px, 48px) rotate(-100deg) }
  68% { transform: translate(-16px, 52px) rotate(-108deg) }
  92% { transform: translate(-16px, 52px) rotate(-108deg) }
  95% { transform: translate(0, -8px) rotate(0deg) scale(1.12) }
  97% { transform: translate(0, 0) rotate(0deg) scale(1) }
  100% { transform: translate(0, 0) rotate(0deg) }
}

@keyframes gb-flash {
  0%, 66.6% { opacity: 0 }
  67.4% { opacity: 0.95 }
  68.4% { opacity: 0.4 }
  69.2% { opacity: 0.8 }
  74% { opacity: 0 }
  100% { opacity: 0 }
}

@keyframes gb-fire {
  0%, 66.6% { opacity: 0; transform: translateY(0) scale(0.15) }
  67.6% { opacity: 1; transform: translateY(-4px) scale(1.15) }
  69.5% { opacity: 1; transform: translateY(-16px) scale(1.4) }
  73% { opacity: 0.75; transform: translateY(-34px) scale(1.15) }
  77% { opacity: 0; transform: translateY(-52px) scale(0.8) }
  100% { opacity: 0; transform: translateY(0) scale(0.15) }
}

@keyframes gb-stem {
  0%, 67% { opacity: 0; transform: scaleY(0.05) }
  69% { opacity: 1; transform: scaleY(0.5) }
  73% { opacity: 1; transform: scaleY(1) }
  84% { opacity: 0.85; transform: scaleY(1) }
  90% { opacity: 0; transform: scaleY(1) }
  100% { opacity: 0; transform: scaleY(0.05) }
}

@keyframes gb-cap {
  0%, 67.5% { opacity: 0; transform: translateY(46px) scale(0.2) }
  70% { opacity: 1; transform: translateY(24px) scale(0.7) }
  75% { opacity: 1; transform: translateY(0) scale(1.05) }
  84% { opacity: 0.8; transform: translateY(-10px) scale(1.2) }
  90% { opacity: 0; transform: translateY(-18px) scale(1.3) }
  100% { opacity: 0; transform: translateY(46px) scale(0.2) }
}

@keyframes gb-ring {
  0%, 66.8% { opacity: 0; transform: scale(0.1) }
  67.6% { opacity: 0.9; transform: scale(0.4) }
  71% { opacity: 0; transform: scale(2.6) }
  100% { opacity: 0; transform: scale(0.1) }
}

@keyframes gb-ember {
  0%, 67% { opacity: 0; transform: translate(0, 0) scale(0.4) }
  68% { opacity: 1 }
  76% { opacity: 0; transform: translate(var(--ex, 30px), var(--ey, -60px)) scale(1) }
  100% { opacity: 0 }
}

@keyframes gb-shake {
  0%, 66.8% { transform: translate(0, 0) }
  67.4% { transform: translate(-11px, 5px) }
  68% { transform: translate(10px, -6px) }
  68.7% { transform: translate(-8px, -4px) }
  69.4% { transform: translate(7px, 5px) }
  70.2% { transform: translate(-5px, 3px) }
  71% { transform: translate(3px, -2px) }
  72%, 100% { transform: translate(0, 0) }
}

@keyframes gb-goodboy {
  0%, 78% { opacity: 0; transform: translateX(-50%) translateY(8px) rotate(-3deg) }
  82% { opacity: 1; transform: translateX(-50%) translateY(0) rotate(-3deg) }
  94% { opacity: 1; transform: translateX(-50%) translateY(0) rotate(-3deg) }
  97%, 100% { opacity: 0; transform: translateX(-50%) translateY(-6px) rotate(-3deg) }
}

@keyframes gb-puddle {
  0%, 68% { opacity: 0; transform: scaleX(0.2) }
  74% { opacity: 1; transform: scaleX(1) }
  90% { opacity: 1; transform: scaleX(1) }
  95%, 100% { opacity: 0; transform: scaleX(1) }
}

@keyframes gb-blink {
  0%, 5% { transform: scaleY(0) }
  5.6%, 6.4% { transform: scaleY(1) }
  7% { transform: scaleY(0) }
  41.8% { transform: scaleY(0) }
  42.4%, 43.2% { transform: scaleY(1) }
  43.8% { transform: scaleY(0) }
  78.8% { transform: scaleY(0) }
  79.4%, 80.2% { transform: scaleY(1) }
  80.8% { transform: scaleY(0) }
  100% { transform: scaleY(0) }
}

@keyframes gb-breathe {
  0%, 100% { transform: scale(1) }
  50% { transform: scale(1.012, 1.03) }
}

@keyframes gb-ear {
  0%, 60% { transform: rotate(0deg) }
  69% { transform: rotate(0deg) }
  70% { transform: rotate(-16deg) }
  73% { transform: rotate(9deg) }
  77% { transform: rotate(-4deg) }
  82%, 100% { transform: rotate(0deg) }
}

@keyframes gb-bub {
  0%, 100% { transform: translateY(0) }
  50% { transform: translateY(-5px) }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  html { scroll-behavior: auto; }
}