/*
  Tema da página da coleção Traços e Tranças: o visual do próprio livro
  (laranja, marrom e creme, sóis em traço, manchas escorrendo, faixa de triângulos e a Jana).
  Só vale dentro de <main class="tema-tracos">; textos e ordem das seções não mudam.
  As animações só ligam com a classe .tt-js no <html> (posta no <head> quando o
  navegador tem IntersectionObserver e a pessoa não pediu "menos movimento").
*/
.tema-tracos{
  --tt-laranja:#F6911B;
  --tt-marrom:#5B1F03;
  --tt-creme:#FEF1DF;
  --tt-creme-forte:#FCD8A8;
  --tt-papel:#FFFBF4;
}

/* Desenhos em máscara: a cor vem do background (um SVG serve para várias cores) */
.tema-tracos .tt-sol{position:absolute;display:block;aspect-ratio:1;pointer-events:none;background:currentColor;
  -webkit-mask:url(../img/tracos/sol.svg) center/contain no-repeat;mask:url(../img/tracos/sol.svg) center/contain no-repeat}
.tema-tracos .tt-escorrido{position:absolute;left:0;right:0;height:120px;pointer-events:none;
  -webkit-mask:url(../img/tracos/escorrido.svg) left top/auto 100% repeat-x;mask:url(../img/tracos/escorrido.svg) left top/auto 100% repeat-x}

/* ===== topo: laranja do livro escorrendo para a página ===== */
.tema-tracos .colecao-topo{position:relative;background:var(--tt-laranja);padding-block:64px 40px}
.tema-tracos .colecao-topo .tt-deco{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.tema-tracos .colecao-topo .container{position:relative;z-index:1}
.tema-tracos .colecao-topo .rotulo,
.tema-tracos .colecao-topo h1,
.tema-tracos .colecao-tagline{color:var(--tt-marrom)}
.tema-tracos .tt-sol-topo{color:#fff;opacity:.85;width:340px;right:-70px;top:50%;margin-top:-170px}
.tema-tracos .colecao-topo .tt-escorrido{top:100%;background:var(--tt-laranja);z-index:2}
.tema-tracos .colecao-logo{transform:rotate(-3deg);transition:transform .4s ease}
.tema-tracos .colecao-logo:hover{transform:rotate(0) scale(1.03)}

/* ===== descrição: uma "página do livro" ===== */
.tema-tracos .secao-descricao{position:relative;overflow:hidden;padding-top:150px}
.tema-tracos .tt-pagina{position:relative;margin-inline:auto;background:var(--tt-papel);border:2px solid var(--tt-creme-forte);
  border-radius:18px;padding:38px 40px 30px 72px;box-shadow:0 18px 40px -26px rgba(91,31,3,.35)}
.tema-tracos .tt-pagina::before{content:"";position:absolute;left:24px;top:28px;bottom:28px;width:26px;
  background:url(../img/tracos/triangulos.svg) center top/26px auto no-repeat round}
.tema-tracos .tt-pagina::after{content:"";position:absolute;top:-9px;left:50%;width:150px;height:16px;margin-left:-75px;
  background:var(--tt-papel) url(../img/tracos/ornamento.svg) center/132px 16px no-repeat}
.tema-tracos .tt-sol-lado{color:var(--tt-laranja);opacity:.3;width:260px;left:-130px;top:190px}

/* ===== títulos: Baloo Bhaijaan 2, a mesma fonte do livro, com o enfeite do livro ===== */
.tema-tracos .colecao-topo h1,
.tema-tracos .secao-topo h2{font-family:"Baloo Bhaijaan 2",var(--fonte);font-weight:800;line-height:1.1}
.tema-tracos .secao-topo h2{color:var(--tt-marrom)}
.tema-tracos .secao-topo h2::after{content:"";display:block;width:132px;height:16px;margin-top:12px;
  background:url(../img/tracos/ornamento.svg) center/132px 16px no-repeat}
.tema-tracos .secao-topo.centro h2::after{margin-inline:auto}

/* ===== demonstração: a Jana apresenta o livro ===== */
.tema-tracos .tt-palco{display:flex;align-items:flex-end;gap:8px}
.tema-tracos .tt-jana{flex:0 0 auto;width:clamp(130px,14vw,190px);height:auto;margin-bottom:-4px;transform-origin:50% 100%}
.tema-tracos .tt-palco .flipbook-caixa{flex:1;min-width:0}
.tema-tracos .flipbook-caixa{background:var(--tt-creme);border:2px solid var(--tt-creme-forte)}
.tema-tracos .nota-visualizacao{color:#7A4A2A}

/* ===== capas: faixa de padrão, mancha no canto e livros em pé ===== */
.tema-tracos .secao.fundo{position:relative;overflow:hidden;background:var(--tt-creme);padding-top:110px}
.tema-tracos .secao.fundo::before{content:"";position:absolute;left:0;right:0;top:0;height:16px;
  background:url(../img/tracos/faixa.svg) left top/auto 16px repeat-x}
.tema-tracos .secao.fundo .container{position:relative;z-index:1}
.tema-tracos .tt-mancha{position:absolute;top:16px;right:0;width:clamp(170px,26vw,380px);aspect-ratio:400/260;pointer-events:none;
  background:var(--tt-laranja);
  -webkit-mask:url(../img/tracos/mancha-canto.svg) right top/contain no-repeat;mask:url(../img/tracos/mancha-canto.svg) right top/contain no-repeat}
.tema-tracos .tt-sol-mancha{color:#fff;opacity:.9;width:clamp(70px,8vw,120px);right:clamp(12px,2vw,34px);top:24px}
.tema-tracos .tt-sol-mancha2{color:var(--tt-laranja);opacity:.55;width:clamp(56px,6vw,90px);right:clamp(150px,22vw,330px);top:28px}
.tema-tracos .grade-capas{gap:30px 26px}
.tema-tracos .capa-ampliar{position:relative;display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;
  border-radius:3px 8px 8px 3px;box-shadow:0 18px 30px -18px rgba(91,31,3,.55);
  transform:perspective(900px);transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s ease}
.tema-tracos .capa-ampliar img{display:block;border-radius:3px 8px 8px 3px;box-shadow:none}
.tema-tracos .capa-ampliar::before{content:"";position:absolute;inset:0 auto 0 0;width:7%;border-radius:3px 0 0 3px;pointer-events:none;
  background:linear-gradient(90deg,rgba(0,0,0,.28),rgba(255,255,255,.22) 45%,rgba(0,0,0,.08))}
.tema-tracos .capa-ampliar:focus-visible{outline:3px solid var(--tt-marrom);outline-offset:4px}
@media (hover:hover){
  .tema-tracos .capa-ampliar:hover{transform:perspective(900px) rotateY(-10deg) rotate(-1.5deg) translateY(-6px);
    box-shadow:14px 26px 34px -18px rgba(91,31,3,.6)}
}
.tema-tracos .capa figcaption{color:var(--tt-marrom);font-weight:700}
.tema-tracos .capa figcaption::before{content:"";display:inline-block;width:8px;height:8px;margin-right:8px;
  background:var(--cor-ano,var(--tt-laranja));transform:translateY(-1px) rotate(45deg)}

/* capa ampliada: janela por cima da página (não sai dela) */
.tt-ampliada{border:0;padding:0;background:transparent;max-width:min(92vw,560px);max-height:92vh;overflow:visible}
.tt-ampliada::backdrop{background:rgba(58,20,2,.82)}
.tt-ampliada img{display:block;max-width:100%;max-height:86vh;width:auto;height:auto;border-radius:4px 10px 10px 4px;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.7)}
.tt-fechar{position:absolute;top:10px;right:10px;width:40px;height:40px;border-radius:50%;border:0;cursor:pointer;
  background:var(--tt-laranja);color:var(--tt-marrom);font-family:var(--fonte);font-size:1.2rem;font-weight:800;line-height:1;
  box-shadow:0 6px 16px -6px rgba(0,0,0,.5)}
.tt-fechar:focus-visible{outline:3px solid #fff;outline-offset:2px}

/* ===== botão final: o creme escorre no laranja ===== */
.tema-tracos .colecao-cta{position:relative;overflow:hidden;background:var(--tt-laranja);padding-block:150px 84px}
.tema-tracos .colecao-cta .tt-escorrido{top:0;height:110px;background:var(--tt-creme)}
.tema-tracos .colecao-cta .container{position:relative;z-index:1}
.tema-tracos .botao-colecao{background:var(--tt-marrom)}
.tema-tracos .tt-sol-cta1{color:#fff;opacity:.5;width:240px;left:-90px;bottom:-100px}
.tema-tracos .tt-sol-cta2{color:#fff;opacity:.5;width:170px;right:-50px;top:90px}

/* ===== animações (só com .tt-js) ===== */
@keyframes tt-girar{to{rotate:360deg}}
@keyframes tt-balanco{0%,100%{transform:rotate(0)}50%{transform:rotate(-2.5deg)}}
@keyframes tt-zoom{from{opacity:0;transform:scale(.92)}}
.tt-js .tema-tracos .tt-sol{animation:tt-girar 90s linear infinite}
.tt-js .tema-tracos .tt-escorrido{clip-path:inset(0 0 80% 0);transition:clip-path 1.6s cubic-bezier(.3,.6,.2,1) .15s}
.tt-js .tema-tracos .tt-escorrido.tt-visivel{clip-path:inset(0)}
.tt-js .tema-tracos .tt-pagina p,
.tt-js .tema-tracos .capa{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.tt-js .tema-tracos .tt-pagina p:nth-child(2){transition-delay:.12s}
.tt-js .tema-tracos .tt-pagina p:nth-child(3){transition-delay:.24s}
.tt-js .tema-tracos .capa:nth-child(2){transition-delay:.08s}
.tt-js .tema-tracos .capa:nth-child(3){transition-delay:.16s}
.tt-js .tema-tracos .capa:nth-child(4){transition-delay:.24s}
.tt-js .tema-tracos .capa:nth-child(5){transition-delay:.32s}
.tt-js .tema-tracos .tt-pagina p.tt-visivel,
.tt-js .tema-tracos .capa.tt-visivel{opacity:1;transform:none}
.tt-js .tema-tracos .tt-jana{opacity:0;transform:translateY(30px);transition:opacity .7s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
.tt-js .tema-tracos .tt-jana.tt-visivel{opacity:1;transform:none;animation:tt-balanco 4s ease-in-out 1.2s infinite}
@media (prefers-reduced-motion:no-preference){
  .tt-ampliada[open]{animation:tt-zoom .35s cubic-bezier(.2,.8,.2,1)}
}
@media (prefers-reduced-motion:reduce){
  .tema-tracos .capa-ampliar,.tema-tracos .colecao-logo{transition:none}
}

/* ===== tablet e celular ===== */
@media (max-width:1024px){
  .tema-tracos .tt-sol-topo{width:230px;right:-70px;top:auto;bottom:-60px;margin-top:0}
}
@media (max-width:767px){
  .tema-tracos .colecao-topo{padding-block:44px 30px}
  .tema-tracos .tt-escorrido{height:84px}
  .tema-tracos .colecao-topo .tt-escorrido{height:84px}
  .tema-tracos .secao-descricao{padding-top:104px}
  .tema-tracos .tt-pagina{padding:32px 18px 20px 48px;border-radius:14px}
  .tema-tracos .tt-pagina::before{left:14px;top:24px;bottom:24px;width:20px;background-size:20px auto}
  .tema-tracos .tt-sol-lado{display:none}
  .tema-tracos .tt-palco{flex-direction:column;align-items:stretch;gap:0}
  .tema-tracos .tt-jana{align-self:center;width:108px;margin-bottom:-14px;position:relative;z-index:1}
  .tema-tracos .secao.fundo{padding-top:118px}
  .tema-tracos .grade-capas{gap:22px 16px}
  .tema-tracos .colecao-cta{padding-block:108px 60px}
  .tema-tracos .colecao-cta .tt-escorrido{height:80px}
  .tema-tracos .tt-sol-cta1{width:170px;left:-80px;bottom:-80px}
  .tema-tracos .tt-sol-cta2{width:120px;right:-44px;top:70px}
}

/* rodapé desta coleção: o marrom do livro (o resto do rodapé é o mesmo do site) */
.tema-tracos ~ .site-footer{--cor-rodape:#5B1F03}