/*
 * style.css
 * Responsibility: page-level layout, typography base, and dark-mode overrides.
 * Imports tokens from tokens.css (via HTML load order — do not re-import here).
 * No component styles — those live in components.css.
 */

/* ── Base ── */

html {
  font-family: var(--font-family);
  font-size: var(--font-size-body-md);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-default);
  letter-spacing: var(--letter-spacing-default);
  color: var(--color-content-default);
  background-color: var(--color-bg);
}

body {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  max-width: var(--layout-max-width);
  margin: 0 auto;
}


/* ── Layout areas (app shell) ── */

.l-header {
  background-color: var(--color-bg);
  display: flex;
  flex-direction: column;
}


.l-scroll {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* space so the last card can scroll above the sticky footer — must match .l-bottom height */
  padding-bottom: 260px;
}

.l-scroll.is-empty {
  padding-bottom: var(--space-7);
}

.l-bottom {
  /* sticky keeps mascot + banner pinned to the bottom of the viewport as the page scrolls,
     regardless of whether body or .l-scroll is the scroll container */
  position: sticky;
  bottom: 0;
  z-index: 10;
  background-color: var(--color-bg);
  /* 4px above the divider line */
  padding-top: calc(var(--space-2) + var(--line-weight-default)); /* 4px gap + 2px line */
}

.l-bottom::before {
  content: '';
  display: block;
  position: absolute;
  top: var(--space-2);
  left: 0;
  right: 0;
  height: var(--line-weight-default);
  background-color: var(--color-stroke-subtle);
}

.l-mascot-area {
  position: relative;
  height: 120px;
  overflow: hidden;
  background-color: var(--color-bg);
  /* 16px below the divider, before the counter */
  margin-top: var(--space-5);
}

.l-mascot-counter {
  position: absolute;
  top: var(--space-3);
  right: var(--layout-outer-padding);
  font-family: var(--font-family);
  font-size: var(--font-size-title-md);
  line-height: var(--line-height-default);
  color: var(--color-content-default);
  z-index: 3;
}

.l-mascot-img {
  position: absolute;
  left: var(--layout-outer-padding);
  bottom: 0;
  height: 100px;
  width: auto;
  z-index: 2;
}

.l-mascot-ground {
  position: absolute;
  bottom: 8px;
  left: 0;
  right: 0;
  height: 30px;
  z-index: 1;
  background-image: url(../assets/chicken/ground.png);
  background-repeat: repeat-x;
  background-size: auto 100%;
  animation: ground-scroll 19s linear infinite;
}

@keyframes ground-scroll {
  from { background-position-x: 0; }
  to   { background-position-x: -1528px; }
}

.l-mascot-cloud {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  z-index: 0;
  background-repeat: repeat-x;
  background-size: auto 100%;
}

.l-mascot-cloud--1 {
  background-image: url(../assets/chicken/cloud1.png);
  animation: cloud-scroll 60s linear infinite;
}

.l-mascot-cloud--2 {
  background-image: url(../assets/chicken/cloud2.png);
  animation: cloud-scroll 35s linear infinite;
  animation-delay: -7s;
}

@keyframes cloud-scroll {
  from { background-position-x: 0; }
  to   { background-position-x: -1528px; }
}

.l-mascot-area.is-eating .l-mascot-ground {
  animation-play-state: paused;
}

.l-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3) 0 var(--space-7);
}

.l-banner-placeholder {
  width: 320px;
  height: 50px;
  max-width: 100%;
  flex-shrink: 0;
  padding-inline: var(--space-7);
  background-color: var(--color-surface-subtle);
  border-radius: var(--radius-2x);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-family);
  font-size: var(--font-size-body-md);
  color: var(--color-content-subtle);
}

@media (min-width: 520px) {
  .l-banner-placeholder {
    width: 468px;
    height: 60px;
  }
}

/* ── Screen template (overlay screens built with createScreen()) ── */

.l-screen {
  position: fixed;
  inset: 0;
  z-index: 100;
  background-color: var(--color-bg);
  display: flex;
  flex-direction: column;
  max-width: var(--layout-max-width);
  margin: 0 auto;
  /* Prevent body scroll while screen is open */
  overflow: hidden;
}

.l-screen-content {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: var(--space-4);
}

/* ── Utility ── */

.u-hidden {
  display: none;
}


/* ── Empty state ── */

.c-empty-state {
  border: var(--line-weight-default) dashed var(--color-stroke-default);
  border-radius: var(--radius-3x);
  margin: var(--space-7) var(--layout-outer-padding);
  padding: var(--space-7);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-7);
}

.c-empty-state-image {
  display: block;
  width: 160px;
  height: auto;
}

.c-empty-state-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  text-align: center;
}

.c-empty-state-heading {
  font-family: var(--font-family);
  font-size: var(--font-size-label-lg);
  line-height: var(--line-height-default);
  color: var(--color-content-default);
}

.c-empty-state-body {
  font-family: var(--font-family);
  font-size: var(--font-size-body-md);
  line-height: var(--line-height-body);
  color: var(--color-content-subtle);
}


/* ── Home — contribution (aporte) view ──
   Vertical rhythm from Figma node 45:457. Horizontal padding is owned by the
   content components (c-input-wrapper, c-section-title, c-card-wrapper). */

.l-aporte {
  display: flex;
  flex-direction: column;
  padding-top: var(--space-7);
  padding-bottom: var(--space-4);
}

.l-aporte .c-section-title {
  margin-top: var(--space-11);   /* 40px gap below the input — Figma node 45:457 */
}

.l-aporte-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);           /* 8px between cards */
  margin-top: var(--space-3);    /* 8px below the section title — Figma node 45:464 */
}

.l-aporte-message {
  padding: 0 var(--layout-outer-padding);
  font-family: var(--font-family);
  font-size: var(--font-size-body-md);
  line-height: var(--line-height-body);
  color: var(--color-content-subtle);
}

.l-aporte-message--error {
  color: var(--color-content-error);
}

.l-aporte-message--warning {
  color: var(--color-content-error);
}


/* ── Screen slide animation (opt-in via l-screen--animated + is-open) ── */

.l-screen--animated {
  transform: translateX(100%);
  transition: transform var(--duration-base) var(--easing-standard);
}

.l-screen--animated.is-open {
  transform: translateX(0);
}


/* ── Celebration screen layout ── */

.l-celebration {
  position: absolute;
  inset: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  image-rendering: pixelated;
}

.l-celebration * {
  box-sizing: border-box;
}

.cele-flash {
  position: absolute;
  inset: 0;
  background: var(--color-content-default);
  pointer-events: none;
  opacity: 0;
  z-index: 20;
  animation: cele-flash var(--duration-cele-flash) steps(1) 1 both;
}

.cele-fireworks-layer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  overflow: hidden;
  z-index: 1;
  pointer-events: none;
}

.cele-fw {
  position: absolute;
  animation: cele-firework 1.1s steps(9) var(--delay, 0s) infinite;
  pointer-events: none;
}

.cele-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 var(--space-7);
  position: relative;
  z-index: 6;
}

.cele-slam {
  animation: cele-slam var(--duration-long) steps(8) both;
  margin-bottom: var(--space-6);
}

.cele-stage-clear {
  font-size: var(--font-size-cele-stage);
  letter-spacing: var(--space-2);
  color: var(--color-surface-accent);
  margin-bottom: var(--space-4);
  animation: cele-blink .8s steps(1) infinite;
}

.cele-chicken {
  width: var(--size-cele-chicken);
  height: var(--size-cele-chicken);
  margin-top: var(--space-2);
  animation: cele-pop var(--duration-cele-pop) steps(7) both, cele-hop var(--duration-long) steps(4) var(--duration-cele-pop) infinite;
  image-rendering: pixelated;
}

.cele-counter {
  animation: cele-up var(--duration-medium) steps(6) var(--duration-cele-pop) both;
}

.cele-counter-value {
  font-size: var(--font-size-label-xl);
  color: var(--color-content-default);
  line-height: var(--line-height-default);
}

.cele-counter-desc {
  font-size: var(--font-size-body-md);
  color: var(--color-content-subtle);
  margin-top: var(--space-3);
}

/* ── Celebration @keyframes (extraídos do HTML de referência) ── */

@keyframes cele-flash {
  0%   { opacity: 0 }
  4%   { opacity: .92 }
  9%   { opacity: 0 }
  16%  { opacity: .7 }
  22%  { opacity: 0 }
}

@keyframes cele-slam {
  0%   { transform: translateY(-180%) scale(1) }
  55%  { transform: translateY(8%)    scale(1) }
  70%  { transform: translateY(-6%)   scale(1.04) }
  82%  { transform: translateY(3%)    scale(1) }
  100% { transform: translateY(0)     scale(1) }
}

@keyframes cele-pop {
  0%   { transform: scale(0);    opacity: 0 }
  60%  { transform: scale(1.18); opacity: 1 }
  78%  { transform: scale(.92) }
  100% { transform: scale(1);    opacity: 1 }
}

@keyframes cele-hop {
  0%, 100% { transform: translateY(0) }
  50%       { transform: translateY(var(--offset-cele-hop)) }
}

@keyframes cele-blink {
  0%, 55%   { opacity: 1 }
  56%, 100% { opacity: .15 }
}

@keyframes cele-up {
  0%   { transform: translateY(18px); opacity: 0 }
  100% { transform: translateY(0);    opacity: 1 }
}

@keyframes pxl-blink {
  0%, 50%   { opacity: 1 }
  51%, 100% { opacity: .15 }
}

@keyframes cele-firework {
  0%   { transform: scale(.15); opacity: 0 }
  18%  { opacity: 1 }
  100% { transform: scale(1.7); opacity: 0 }
}


/* ── prefers-reduced-motion overrides ── */

@media (prefers-reduced-motion: reduce) {
  .l-screen--animated {
    transform: translateX(0);
    transition: none;
  }

  .l-mascot-ground,
  .l-mascot-cloud {
    animation: none;
  }

  .cele-slam, .cele-pop, .cele-up {
    animation-duration: .01ms;
    animation-iteration-count: 1;
  }
  .cele-hop, .cele-blink, .cele-flash, .cele-fw {
    animation: none;
  }
}