/* ============================================================ camada 2: brincadeira */

/* rabiscos de giz no topo */
.doodles { position: absolute; inset: 0; pointer-events: none; }
.doodle {
  position: absolute; left: var(--x); top: var(--y); width: var(--w); height: auto; overflow: visible;
  transform: translateY(calc(var(--sy, 0) * (var(--d) + 1) * -18px));
}
.doodle path { fill: none; stroke: var(--c); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1.1s var(--ease) forwards, wobble 6s ease-in-out infinite; animation-delay: calc(1s + var(--d) * .14s), calc(2.4s + var(--d) * .4s); transform-box: fill-box; transform-origin: center; opacity: .9; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes wobble { 0%, 100% { transform: rotate(0) translateY(0); } 50% { transform: rotate(6deg) translateY(-6px); } }

/* barra do quebra-cabeça */
.puzzle__bar { position: relative; z-index: 8; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 10px; margin-top: 14px; opacity: 0; transform: translateY(8px); transition: opacity .6s var(--ease) 1.5s, transform .6s var(--spring) 1.5s; }
.puzzle.is-built .puzzle__bar { opacity: 1; transform: none; }
.puzzle__hint { font-size: var(--t-sm); color: var(--ink-3); }
.puzzle__play {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px 8px 10px; border-radius: var(--pill);
  font: 700 var(--t-sm)/1 var(--f-text); color: var(--ink); background: var(--paper);
  box-shadow: inset 0 0 0 2px var(--line); transition: box-shadow .2s, transform .3s var(--spring);
}
.puzzle__play .i { color: var(--pink); transition: transform .6s var(--spring); }
.puzzle__play:hover { box-shadow: inset 0 0 0 2px var(--pink); transform: translateY(-2px) rotate(-2deg); }
.puzzle__play:hover .i { transform: rotate(-200deg) scale(1.15); }
.puzzle__ghost { position: absolute; inset: 0; opacity: 0; transition: opacity .5s; pointer-events: none; }
.puzzle__ghost img { position: absolute; inset: 0; width: 100%; height: 100%; filter: grayscale(1) brightness(1.15); opacity: .22; }
:root[data-theme="dark"] .puzzle__ghost img { filter: grayscale(1) brightness(.6); opacity: .5; }
.puzzle.is-game .puzzle__ghost { opacity: 1; }
.puzzle.is-game .piece { touch-action: none; }
.puzzle.is-game .piece::before { cursor: grab; }
.puzzle.is-game .piece.is-placed { filter: drop-shadow(0 6px 8px rgb(var(--shadow-c) / .14)); }
.puzzle.is-game .piece.is-placed::before { pointer-events: none; }
.puzzle.is-game .piece:not(.is-placed) { z-index: 3; }
.puzzle.is-game .piece__tip { display: none; }
.piece.is-snap { animation: snap .5s var(--spring); }
@keyframes snap { 0% { scale: 1.08; } 40% { scale: .96; } 100% { scale: 1; } }
.puzzle.is-done .puzzle__board { animation: cheer .9s var(--spring); }
@keyframes cheer { 0% { transform: scale(1); } 30% { transform: scale(1.06) rotate(-2deg); } 60% { transform: scale(.98) rotate(1deg); } 100% { transform: none; } }
.puzzle__count { display: inline-flex; gap: 4px; }
.puzzle__count i { width: 12px; height: 12px; border-radius: 4px; background: var(--line); transition: background-color .3s, transform .4s var(--spring); }
.puzzle__count i.on { background: var(--c); transform: scale(1.25) rotate(45deg); }
.confetti { position: fixed; z-index: 96; pointer-events: none; width: 10px; height: 14px; border-radius: 2px; }

/* busca do topo: placeholder digitando */
.ask input.is-typing::placeholder { color: var(--ink-2); }

/* faixa de assuntos */
.ribbon { position: relative; z-index: 3; margin: -6px 0 -30px; transform: rotate(-1.6deg); background: var(--ink); color: var(--paper); overflow: hidden; box-shadow: 0 18px 40px -24px rgb(var(--shadow-c) / .8); }
.ribbon__track { display: flex; width: max-content; animation: marquee 48s linear infinite; }
.ribbon:hover .ribbon__track, .ribbon:focus-within .ribbon__track { animation-play-state: paused; }
.ribbon__run { display: flex; align-items: center; flex: none; }
.ribbon a { font: 800 clamp(1.25rem, 1rem + 1vw, 1.9rem)/1 var(--f-display); padding: 18px 18px 14px; text-decoration: none; white-space: nowrap; transition: color .2s, transform .3s var(--spring); display: inline-block; }
.ribbon a:hover { color: var(--sun); transform: translateY(-3px) rotate(-2deg); }
.ribbon__dot { color: var(--c); display: inline-grid; }
.ribbon__dot .i { width: 26px; height: 26px; animation: spin 8s linear infinite; }
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes spin { to { transform: rotate(360deg); } }
.fase { padding-top: clamp(80px, 10vw, 130px); }

/* régua: cabeçalhos com atalhos */
.fase__top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.fase__top .fase__h { margin: 0; }
.fase__all { font-weight: 700; font-size: var(--t-sm); color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--line); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.fase__all:hover { color: var(--ink); text-decoration-color: var(--pink); }
.ruler__knob::after { content: ""; position: absolute; inset: -8px; border-radius: 20px; border: 2px solid var(--ink); opacity: 0; animation: ping 2.4s var(--ease) 2s infinite; }
@keyframes ping { 0% { opacity: .5; transform: scale(.8); } 70%, 100% { opacity: 0; transform: scale(1.3); } }
.ruler.is-drag .ruler__knob::after, .ruler.was-used .ruler__knob::after { animation: none; }

/* capa que abre e mostra uma página */
.book { position: relative; }
.book__page {
  position: absolute; inset: 0; z-index: 0; overflow: hidden; border-radius: 3px 8px 8px 3px; background: #fff;
  box-shadow: inset 12px 0 18px -12px rgb(0 0 0 / .25), 10px 14px 24px -12px rgb(var(--shadow-c) / .45);
  transform: translateZ(-2px);
}
.book__page img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.book__cover { z-index: 1; transform-origin: 0 50%; transition: transform .75s var(--spring); backface-visibility: hidden; }
@media (pointer: fine) {
  .book-card:hover .book.has-page .book__cover, .book-card:focus-within .book.has-page .book__cover { transform: rotateY(-62deg); }
  .book-card:hover .book__cover::before { opacity: 0; }
}


/* títulos que sobem por máscara */
.mask { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.mask > span { display: block; transform: translateY(105%) rotate(2deg); transform-origin: 0 100%; transition: transform .9s var(--spring); }
.is-seen .mask > span, .mask.is-seen > span { transform: none; }

/* botões magnéticos */
[data-magnet] { transition: transform .35s var(--spring), box-shadow .25s var(--ease), background-color .2s; }

/* voltar ao topo */
.totop {
  position: fixed; right: 22px; bottom: 22px; z-index: 42; width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center; color: var(--ink); background: var(--paper);
  box-shadow: 0 12px 26px -12px rgb(var(--shadow-c) / .6);
  opacity: 0; transform: translateY(20px) scale(.8); pointer-events: none; transition: opacity .3s, transform .45s var(--spring);
}
.totop.is-on { opacity: 1; transform: none; pointer-events: auto; }
.totop:hover { transform: translateY(-3px); }
.totop svg:first-child { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.totop circle { fill: none; stroke-width: 3.5; }
.totop__track { stroke: var(--line); }
.totop__ring { stroke: var(--pink); stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--p, 0)); }
.totop .i { position: relative; width: 22px; height: 22px; }

/* rodapé: marca gigante */
.foot__word {
  width: min(100% - 2 * var(--gut), var(--wrap)); margin: 0 auto 22px; display: flex; flex-wrap: wrap; justify-content: center;
  font: 800 clamp(3rem, 1rem + 10.5vw, 12.5rem)/.9 var(--f-display); letter-spacing: -.03em; user-select: none;
}
.foot__word span { display: inline-block; color: var(--c); transition: transform .5s var(--spring); }
.foot__word .sp { width: .28em; }
.foot__word span:hover { transform: translateY(-.16em) rotate(-8deg) scale(1.08); transition-duration: .2s; }
.foot__word.is-seen span { animation: hop .9s var(--spring) both; animation-delay: calc(var(--i) * 45ms); }
@keyframes hop { 0% { transform: translateY(.6em) scale(.6); opacity: 0; } 100% { transform: none; opacity: 1; } }

/* transições entre páginas */
@view-transition { navigation: auto; }
.topbar { view-transition-name: topbar; }
.tabbar { view-transition-name: tabbar; }
::view-transition-old(root) { animation: vt-out .22s var(--ease) both; }
::view-transition-new(root) { animation: vt-in .42s var(--ease) both; }
::view-transition-group(vt) { animation-duration: .55s; animation-timing-function: cubic-bezier(.2, .9, .2, 1); z-index: 50; }
::view-transition-old(vt), ::view-transition-new(vt) { height: 100%; width: 100%; object-fit: cover; overflow: clip; }
::view-transition-old(vt) { animation: none; opacity: 0; }
::view-transition-new(vt) { animation: none; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-10px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(14px); } }

/* artigo: tempo restante */
.toc__left { display: block; margin-top: 4px; font: 500 var(--t-xs)/1.3 var(--f-text); color: var(--ink-3); }

/* sacola como gaveta inferior no celular */
.drawer__grab { display: none; }
@media (max-width: 860px) {
  .drawer {
    top: auto; left: 0; width: 100%; height: min(86vh, 720px);
    border-radius: var(--r-xl) var(--r-xl) 0 0; transform: translateY(105%);
  }
  .drawer.is-open { transform: translateY(var(--dy, 0px)); }
  .drawer.is-dragging { transition: none; }
  .drawer__grab { display: block; width: 44px; height: 5px; border-radius: 5px; background: var(--line); margin: 10px auto 0; }
  .drawer__head { padding-top: 10px; touch-action: none; }
  .totop { bottom: calc(96px + env(safe-area-inset-bottom)); right: 14px; width: 46px; height: 46px; }
  .is-post .totop, .is-product .totop { display: none; }
  .doodle--m { display: none; }
  .ribbon { margin-bottom: -22px; }
  .foot__word { margin-bottom: 14px; }
  .fase__top { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
}
.chip--pick[aria-pressed="true"][style*="--sun"] { color: #2a1f4a; }
.filters .select { grid-row: 1; grid-column: -2; }
main { overflow-x: clip; }