/* ===========================================================
   fábrica de cartinhas — ee.cards
   A CARTA é a do umbigo, copiada exata (tamanho, ratio, raio,
   cor, sombra). Nada aqui encosta nela.
   =========================================================== */

@font-face { font-family: Neulis; src: url(/fonts/neulis/Neulis-Light.otf) format("opentype"); font-weight: 300; font-display: swap; }
@font-face { font-family: Neulis; src: url(/fonts/neulis/Neulis-Regular.otf) format("opentype"); font-weight: 400; font-display: swap; }
@font-face { font-family: Neulis; src: url(/fonts/neulis/Neulis-Medium.otf) format("opentype"); font-weight: 500; font-display: swap; }
@font-face { font-family: Neulis; src: url(/fonts/neulis/Neulis-SemiBold.otf) format("opentype"); font-weight: 600; font-display: swap; }

:root {
  --font-sans: "Neulis", ui-sans-serif, system-ui, sans-serif;

  --background: oklch(0.952 0.012 85);
  --foreground: oklch(0.42 0.0264 85);
  --card: oklch(0.972 0.0102 85);
  --border: oklch(0.90 0.0132 85);
  --muted-foreground: oklch(0.62 0.0168 85);

  /* ===== A CARTA ÚNICA — valores do umbigo, NÃO MEXER ===== */
  --card-w: calc(100vw - 12px);
  --card-ratio: 400 / 710;
  --card-radius: 50px;

  --gaveta-w: 300px;

  /* o mesmo ar em cima e embaixo da carta — nada fora de esquadro */
  --respiro: max(8px, env(safe-area-inset-top), env(safe-area-inset-bottom));
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-sans);
  /* transparente: quem dá o fundo é o site — assim não fica um retângulo
     atrás da carta, só a carta */
  background: transparent;
  color: var(--foreground);
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
}
button { font-family: inherit; color: inherit; background: none; border: none; padding: 0; cursor: pointer; }

/* ---------- a mesa ---------- */
.mesa {
  position: fixed;
  inset: 0;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  /* sem data: a carta no MEIO da mesa, com o mesmo respiro em cima e embaixo */
  padding: var(--respiro) 0;
}

/* a data — a única coisa que não é carta.
   Escrita IGUAL à da linha do tempo do umbigo (DayColumn.jsx). */
.data {
  position: absolute;
  top: calc(10px + env(safe-area-inset-top));
  left: 0; right: 0;
  z-index: 40;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  color: var(--foreground);
  pointer-events: none;
  animation: sobe .7s cubic-bezier(.2,.8,.2,1) both;
}
.data__linha { display: flex; align-items: center; justify-content: center; gap: 24px; width: 100%; padding: 0 20px; }
.data__mes, .data__ano {
  flex: 1; font-size: 11px; font-weight: 400; opacity: .5;
  text-transform: uppercase; letter-spacing: .32em;
}
.data__mes { text-align: right; }
.data__ano { text-align: left; }
.data__dia {
  font-size: 1.875rem; line-height: 1; font-weight: 300;
  letter-spacing: .06em; font-variant-numeric: tabular-nums;
}
.data__semana {
  font-size: 10px; font-weight: 400; opacity: .6;
  text-transform: uppercase; letter-spacing: .32em;
}

.palco { display: flex; align-items: center; justify-content: center; }

/* ---------- A CARTA (cópia exata) ---------- */
.bento {
  box-sizing: border-box;
  perspective: 1200px;
  flex: none;
  width: var(--card-w);
  height: calc(100dvh - 2 * var(--respiro));   /* a carta enche a tela */
  max-width: none;
  position: relative;
  animation: entra .55s cubic-bezier(.2,.8,.2,1) both;
}
.bento-flip {
  aspect-ratio: auto;
  height: 100%;
  width: 100%;
  min-height: 0;
  transform-style: preserve-3d;
  transition: transform .7s cubic-bezier(.2,.8,.2,1);
  position: relative;
}
.bento.is-flipped .bento-flip { transform: rotateY(180deg); }

.bento-face {
  background: var(--card);
  border-radius: 50px;
  position: absolute;
  inset: 0;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  box-shadow: 0 1px 2px oklch(0% 0 0 / .04), 0 24px 60px -28px oklch(0% 0 0 / .22);
}
.face-verso { transform: rotateY(180deg); }

/* camada da mídia: a mídia É a cartinha (preenche 100%, sem moldura) */
.midia { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; }
.midia img, .midia video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
  border-radius: inherit;
}
/* a música dentro da carta: um disquinho que gira */
.disco {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(120% 90% at 50% 30%, oklch(0.93 0.02 85), oklch(0.86 0.026 85));
}
.disco__bolacha {
  width: 46%; aspect-ratio: 1; border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, var(--card) 0 12%, transparent 12.5%),
    repeating-radial-gradient(circle at 50% 50%, oklch(0.28 0.01 85) 0 2px, oklch(0.34 0.012 85) 2px 4px);
  box-shadow: 0 10px 30px -12px oklch(0% 0 0 / .5);
  animation: gira 4.5s linear infinite paused;
}
.disco.is-tocando .disco__bolacha { animation-play-state: running; }
.disco__onda { position: absolute; bottom: 12%; display: flex; gap: 5px; align-items: flex-end; height: 26px; }
.disco__onda i {
  display: block; width: 4px; border-radius: 999px;
  background: color-mix(in oklab, var(--foreground) 55%, transparent);
  height: 8px;
}
.disco.is-tocando .disco__onda i { animation: pulsa 1s ease-in-out infinite; }
.disco__onda i:nth-child(2){ animation-delay: .12s } .disco__onda i:nth-child(3){ animation-delay: .24s }
.disco__onda i:nth-child(4){ animation-delay: .36s } .disco__onda i:nth-child(5){ animation-delay: .48s }

/* o desenho por cima de tudo */
.tela {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border-radius: inherit;
  touch-action: none;
  cursor: crosshair;
}


/* ---------- o estojo que abre o material ----------
   ele NÃO aparece mais embaixo da carta: quem abre o material agora é o
   ícone do estojo lá na lateral. o botão continua aqui (escondido) só pra
   lateral poder apertar. */
.pontinho {
  display: none !important;
  position: fixed;
  left: 50%; bottom: calc(16px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 120;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 999px;
}
.estojo {
  width: 30px; height: 30px; color: var(--foreground);
  transition: transform .34s cubic-bezier(.2,.9,.25,1.25), opacity .25s;
}
.estojo svg { width: 100%; height: 100%; display: block; }
.pontinho:hover .estojo { transform: translateY(-2px) scale(1.06); }
.pontinho:active .estojo { transform: scale(.9); }
.pontinho.is-aberto .estojo { transform: scale(.88) rotate(-6deg); opacity: .55; }

/* ---------- A CARTA DO MATERIAL — a MESMA carta, aberta por cima ---------- */
.bento--material { /* nunca por cima da data */
  position: absolute;
  left: 50%; top: 50%;
  margin: 0;
  z-index: 90;
  transform: translate(-50%, -50%);
  animation: none;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
}
.bento--material .material__face {
  position: relative;
  inset: auto;
  width: 100%;
  height: 100%;
  transform: translateY(26px) scale(.9) rotate(-2deg);
  filter: blur(10px);
  opacity: 0;
  transition: transform .46s cubic-bezier(.2,.9,.25,1.08), opacity .3s ease, filter .34s ease;
}
.bento--material.is-aberta { opacity: 1; visibility: visible; pointer-events: auto; }
.bento--material.is-aberta .material__face { transform: none; filter: blur(0); opacity: 1; }

.material__rolo {
  position: absolute; inset: 0;
  overflow-y: auto; overscroll-behavior: contain;
  padding: 30px 28px 78px;   /* chão: a última fileira ('a carta') precisa alcançar inteira */
  -ms-overflow-style: none; scrollbar-width: none;
}
.material__rolo::-webkit-scrollbar { display: none; }
/* tem mais material embaixo: o fim desmancha em vez de cortar */
.bento--material .material__face::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 74px;
  border-radius: 0 0 50px 50px; pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--card));
  opacity: 0; transition: opacity .3s ease;
}
.bento--material.tem-mais .material__face::after { opacity: 1; }
.material__titulo {
  margin: 20px 0 11px;
  font-size: 11px; font-weight: 500;
  letter-spacing: .28em; text-transform: lowercase;
  color: var(--muted-foreground);
}
.material__titulo:first-child { margin-top: 0; }


/* ---- o material DENTRO da carta ---- */
.pote { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.ferramenta {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  padding: 11px 4px 9px;
  border-radius: 20px;
  background: color-mix(in oklab, var(--background) 62%, transparent);
  transition: transform .18s cubic-bezier(.2,.8,.2,1), background .18s, box-shadow .18s;
  min-width: 0;
}
.ferramenta:hover { transform: translateY(-3px); background: var(--background); }
.ferramenta:active { transform: scale(.93); }
.ferramenta.is-ativa {
  background: var(--background);
  box-shadow: inset 0 0 0 2px color-mix(in oklab, var(--foreground) 32%, transparent);
}
.ferramenta__ico { width: 28px; height: 28px; flex: none; color: var(--foreground); }
.ferramenta__ico svg { width: 100%; height: 100%; display: block; }
.ferramenta__nome {
  font-size: 10px; font-weight: 500; line-height: 1.15; text-align: center;
  color: var(--muted-foreground);
  hyphens: none; word-break: normal; overflow-wrap: break-word;   /* nada de 'fotográfi-ca' */
}
.ferramenta.is-ativa .ferramenta__nome { color: var(--foreground); }
.pote--acoes { grid-template-columns: repeat(3, 1fr); }

/* cores */
.cores { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.cor {
  aspect-ratio: 1; border-radius: 999px; min-width: 0;
  box-shadow: inset 0 0 0 1px oklch(0% 0 0 / .12);
  transition: transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .18s;
}
.cor:hover { transform: scale(1.15); }
.cor.is-ativa { transform: scale(1.16); box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--foreground); }

/* grossura */
.grossura { display: flex; align-items: center; gap: 14px; padding: 2px 2px 0; }
.grossura__slider {
  flex: 1; -webkit-appearance: none; appearance: none; height: 4px; border-radius: 999px;
  background: color-mix(in oklab, var(--foreground) 22%, transparent); outline: none;
}
.grossura__slider::-webkit-slider-thumb {
  -webkit-appearance: none; width: 22px; height: 22px; border-radius: 999px;
  background: var(--foreground); cursor: pointer; box-shadow: 0 2px 8px -2px oklch(0% 0 0 / .4);
}
.grossura__slider::-moz-range-thumb { width: 22px; height: 22px; border: none; border-radius: 999px; background: var(--foreground); }
.grossura__bolha { width: 30px; height: 30px; display: grid; place-items: center; flex: none; }
.grossura__bolha::after {
  content: ""; width: var(--bolha, 10px); height: var(--bolha, 10px);
  border-radius: 999px; background: var(--tinta, var(--foreground));
  transition: width .16s, height .16s, background .16s;
}

/* ---------- aviso (SEMPRE fora da carta) ---------- */
.aviso {
  position: fixed;
  left: 0; right: 0; bottom: calc(18px + env(safe-area-inset-bottom));
  z-index: 150;
  margin: 0 auto;
  width: fit-content;
  max-width: min(560px, 88vw);
  padding: 11px 20px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--foreground) 92%, transparent);
  color: var(--card);
  font-size: 13px; font-weight: 500; text-align: center;
  box-shadow: 0 12px 34px -18px oklch(0% 0 0 / .7);
  animation: sobe .3s cubic-bezier(.2,.8,.2,1) both;
}
.aviso[hidden] { display: none; }

/* ---------- desktop: a MESMA carta, agora DEITADA ---------- */
@media (min-width: 768px) {
  :root {
    /* a carta é a única: enche a tela inteira, de borda a borda */
    --desk-pad: 6px;
    --respiro: 0px;
    --card-ratio: 1.85;
    --card-w: calc(100vw - 2 * var(--desk-pad));
  }
  /* nada de proporção travada no desktop: a carta ocupa toda a altura também */
  .bento { height: calc(100svh - 2 * var(--desk-pad)); }
  .bento-flip { aspect-ratio: auto; height: 100%; }
  .bento--material .material__face { aspect-ratio: auto; height: 100%; }
  .data { top: 18px; }
  .material__rolo { padding: 34px 44px 38px; }
  .pote { grid-template-columns: repeat(5, 1fr); gap: 10px; }
  .pote--acoes { grid-template-columns: repeat(3, 1fr); max-width: 460px; }
  .cores { grid-template-columns: repeat(14, 1fr); }
  .ferramenta__ico { width: 30px; height: 30px; }
  .ferramenta__nome { font-size: 11px; }
  .material__titulo { font-size: 12px; }
  
    .ferramenta__nome { font-size: 11px; }
}

/* ---------- animações ---------- */
@keyframes entra {
  from { opacity: 0; transform: translateY(26px) scale(.94) rotate(-1.2deg); filter: blur(6px); }
  60%  { opacity: 1; transform: translateY(-6px) scale(1.012) rotate(.3deg); filter: blur(0); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes sobe { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: none } }
@keyframes aparece { from { opacity: 0 } to { opacity: 1 } }
@keyframes gira { to { transform: rotate(360deg) } }
@keyframes pulsa { 0%,100% { height: 8px } 50% { height: 24px } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}