/* styles/site.css — page layout + feed-the-beaver animations */

html, body { margin: 0; padding: 0; }
body { background: var(--bg); color: var(--fg1); font-family: var(--font-sans); overflow-x: hidden; }

/* Fully-eaten: dim the page behind the modal without dimming the modal itself.
   The fixed overlay already has rgba backdrop — we just need everything UNDER
   the modal (non-modal children of #root) to be visibly darker. */
body.fully-eaten #root > *:not(.fb-root) { filter: brightness(0.22) saturate(0.6); transition: filter 1.4s ease-out; }
body.fully-eaten .fb-root > *:not(.fb-full-black) { filter: brightness(0.22) saturate(0.6); transition: filter 1.4s ease-out; }

/* Overflow: beaver is eating the page — hide all chrome so bites cover everything */
body.fb-overflowing nav,
body.fb-overflowing footer,
body.fb-overflowing .site-nav,
body.fb-overflowing .site-footer { display: none !important; }
body.fb-overflowing { overflow: hidden !important; }

/* Feed-the-beaver animations ------------------------------------- */
.fb-beaver {
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
.fb-beaver:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 6px;
  border-radius: 14px;
}
.fb-beaver.fb-chomp img {
  animation: fb-squish 260ms cubic-bezier(0.22,1,0.36,1);
}
@keyframes fb-squish {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.08, 0.92); }
  100% { transform: scale(1); }
}
.fb-beaver.fb-vibrate img {
  animation: fb-vibrate 0.35s infinite alternate;
}
@keyframes fb-vibrate {
  from { transform: rotate(-1.2deg); }
  to   { transform: rotate(1.2deg); }
}

/* Corner hint pulsing */
.fb-hint { animation: fb-hint-pulse 2.4s ease-in-out infinite; }
@keyframes fb-hint-pulse {
  0%, 100% { opacity: 0.92; }
  50%      { opacity: 1; }
}
.fb-hint .fb-arrow { animation: fb-arrow-wiggle 1.2s ease-in-out infinite; }
@keyframes fb-arrow-wiggle {
  0%, 100% { transform: translate(0,0); }
  50%      { transform: translate(-3px,-3px); }
}

/* Warning banner */
.fb-warn { animation: fb-warn-pulse 0.55s alternate infinite; }
@keyframes fb-warn-pulse {
  from { transform: translateX(-50%) scale(1); }
  to   { transform: translateX(-50%) scale(1.08); }
}

/* Decorations */
.fb-deco { animation: fb-deco-in 0.5s var(--ease-spring) both; }
@keyframes fb-deco-in {
  from { opacity: 0; transform: translate(-50%,-50%) scale(0.4) rotate(var(--rot,0)); }
  to   { opacity: 1; }
}
.fb-deco-float { animation: fb-deco-in 0.5s var(--ease-spring) both, fb-float 3.2s ease-in-out infinite 0.6s; }
@keyframes fb-float {
  0%, 100% { margin-top: 0; }
  50%      { margin-top: -10px; }
}
.fb-deco-hover:hover { transform: translate(-50%,-50%) scale(1.2) !important; transition: transform 200ms; }

/* Eat message line-flash */
.fb-eat-msg { animation: fb-flash 0.4s cubic-bezier(0.22,1,0.36,1); }
@keyframes fb-flash {
  0%   { transform: translateX(-50%) scale(1); }
  40%  { transform: translateX(-50%) scale(1.14); }
  100% { transform: translateX(-50%) scale(1); }
}

/* Bite-mark fade in */
.fb-bite { animation: fb-bite-in 160ms ease-out both; }
@keyframes fb-bite-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Full-black overlay */
.fb-full-black { animation: fb-fade-to-black 1s ease-out both; }
@keyframes fb-fade-to-black {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Refresh button pulse after chomp — loud, hard to miss */
.fb-refresh-pulse {
  animation: fb-refresh-pulse 1.4s ease-out infinite;
}
@keyframes fb-refresh-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(184,92,32,0.75), 0 0 0 0 rgba(184,92,32,0.45); transform: translateY(0); }
  60%  { box-shadow: 0 0 0 18px rgba(184,92,32,0), 0 0 0 36px rgba(184,92,32,0); transform: translateY(-1px); }
  100% { box-shadow: 0 0 0 0 rgba(184,92,32,0), 0 0 0 0 rgba(184,92,32,0); transform: translateY(0); }
}
.fb-refresh-pulse::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 16px;
  border: 2px solid rgba(184,92,32,0.55);
  animation: fb-refresh-ring 1.6s ease-out infinite;
  pointer-events: none;
}
@keyframes fb-refresh-ring {
  0%   { transform: scale(0.96); opacity: 0.9; }
  70%  { transform: scale(1.12); opacity: 0; }
  100% { transform: scale(1.12); opacity: 0; }
}

/* Gentle nudge arrow above the refresh button */
.fb-refresh-nudge {
  animation: fb-refresh-nudge 1.6s ease-in-out infinite;
}
@keyframes fb-refresh-nudge {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50%      { transform: translateY(6px) rotate(-3deg); }
}

/* Code blocks with copy button */
.code-well {
  position: relative;
  background: var(--code-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-inset);
  padding: 20px 22px;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--code-fg);
  margin: 0;
}
.code-well .kw  { color: var(--code-keyword); }
.code-well .str { color: var(--code-string); }
.code-well .cmt { color: var(--code-comment); font-style: italic; }
.code-well .fn  { color: var(--code-fn); }
.code-well .num { color: var(--code-number); }
.code-well .ty  { color: var(--code-type); }

/* Tabs */
.code-tabs { display: flex; gap: 4px; background: var(--bg-inset); border: 1px solid var(--border); border-radius: 10px; padding: 4px; margin-bottom: 12px; width: fit-content; }
.code-tabs button {
  background: transparent; border: 0; padding: 7px 14px; font-family: var(--font-sans); font-size: 13px; font-weight: 600;
  color: var(--fg3); cursor: pointer; border-radius: 7px; transition: all 200ms;
}
.code-tabs button.active { background: #fff; color: var(--fg1); box-shadow: var(--shadow-xs); }

/* Prose */
.prose { max-width: 720px; margin: 0 auto; }
.prose p { font-family: var(--font-sans); font-size: 18px; line-height: 1.75; color: var(--fg1); margin: 0 0 22px; text-wrap: pretty; }
.prose h2 { font-family: var(--font-serif); font-weight: 600; font-size: 36px; line-height: 1.15; letter-spacing: -0.02em; color: var(--fg1); margin: 64px 0 18px; }
.prose h3 { font-family: var(--font-serif); font-weight: 600; font-size: 24px; line-height: 1.25; color: var(--fg1); margin: 40px 0 12px; }
.prose blockquote { margin: 28px 0; padding: 4px 0 4px 24px; border-left: 3px solid var(--accent); font-family: var(--font-serif); font-style: italic; font-size: 20px; color: var(--fg2); line-height: 1.55; }
.prose blockquote p { font-family: inherit; font-size: inherit; color: inherit; line-height: inherit; margin: 0 0 14px; font-style: italic; }
.prose strong { font-weight: 700; color: var(--fg1); }
.prose code { font-family: var(--font-mono); font-size: 0.9em; background: var(--bg-inset); padding: 0.12em 0.4em; border-radius: 4px; border: 1px solid var(--border-inset); }

/* Callouts */
.callout {
  border-radius: 14px; padding: 18px 22px; margin: 28px 0;
  border: 1px solid var(--border);
  display: grid; grid-template-columns: 28px 1fr; gap: 14px; align-items: start;
}
.callout.tip  { background: var(--beava-success-wash); border-color: #c7d7a8; }
.callout.warn { background: var(--beava-warn-wash);    border-color: #e9cf85; }
.callout.note { background: var(--beava-info-wash);    border-color: #b8cada; }
.callout .callout-icon { font-size: 18px; line-height: 1.4; }
.callout .callout-title { font-family: var(--font-sans); font-weight: 700; font-size: 15px; color: var(--fg1); margin-bottom: 6px; }
.callout p { margin: 0; font-size: 16px; line-height: 1.6; }

/* Live pipeline animation — new cells flash with accent-wash overlay.
   Uses box-shadow inset so the cell's natural background color is
   preserved (we don't clobber the --bg-card or --beava-cream-deep base). */
.anim-row td {
  animation: anim-row-in 900ms cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes anim-row-in {
  0%   { box-shadow: inset 0 0 0 999px var(--beava-orange-wash); }
  25%  { box-shadow: inset 0 0 0 999px var(--beava-orange-wash); }
  100% { box-shadow: inset 0 0 0 999px transparent; }
}

/* Responsive */
@media (max-width: 1100px) {
  .recipe-grid { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 700px) {
  .anim-grid { grid-template-columns: 1fr !important; }
  .pandas-compare { grid-template-columns: 1fr !important; }
  .pandas-compare > div:nth-child(2) { display: none !important; }
}
@media (max-width: 880px) {
  .two-col { grid-template-columns: 1fr !important; }
  .hero-grid { grid-template-columns: 1fr !important; }
  .stats-grid { grid-template-columns: 1fr 1fr !important; }
  .pillars-grid { grid-template-columns: 1fr !important; }
  .recipe-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .prose h2 { font-size: 28px; }
  .footer-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
}
@media (max-width: 480px) {
  .recipe-grid { grid-template-columns: 1fr !important; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}