/*
  Tema da página da coleção Play Connect: o visual futurista das capas
  (noite azul, neon azul/lilás do logo, grade em perspectiva, arte das capas 1 e 4, o robô SCARPLAY).
  Só vale dentro de <main class="tema-play">; textos e ordem das seções não mudam.
  Títulos na Audiowide (as capas usam New Astro, que é comercial).
  As animações só ligam com .tm-js no <html> (posta no <head> quando o navegador tem
  IntersectionObserver e a pessoa não pediu "menos movimento").
*/
.tema-play{
  --pc-espaco:#060A22;
  --pc-noite:#0B1238;
  --pc-ciano:#3FD8FF;
  --pc-azul:#5088F8;
  --pc-lilas:#A77BEA;
  --pc-texto:#C9D5F5;
  --pc-borda:rgba(63,216,255,.35);
  --pc-titulo:"Audiowide", var(--fonte);
  position:relative;
  background:var(--pc-espaco);
  color:var(--pc-texto);
}
.tema-play .pc-deco{position:absolute;inset:0;overflow:hidden;pointer-events:none}

/* ===== circuito elétrico ligando as seções: trilhas apagadas + energia neon correndo por dentro ===== */
.tema-play .pc-trilhos{position:absolute;inset:0;pointer-events:none;z-index:1}
/* trilhos só na margem, fora do conteúdo (1140px + folga) */
.tema-play .pc-trilho{position:absolute;top:0;bottom:0;width:min(120px,calc((100vw - 1180px) / 2));filter:drop-shadow(0 0 3px rgba(63,216,255,.7))}
.tema-play .pc-trilho-esq{left:0}
.tema-play .pc-trilho-dir{right:0;transform:scaleX(-1)}
.tema-play .pc-trilho::before,
.tema-play .pc-trilho::after{content:"";position:absolute;inset:0}
.tema-play .pc-trilho::before{background:url(../img/play/trilho.svg) center top/100% auto repeat-y;opacity:.22}
.tema-play .pc-trilho::after{opacity:0;
  background:linear-gradient(transparent 38%,#A8F6FF 50%,transparent 62%) 0 0/100% 760px repeat-y;
  -webkit-mask:url(../img/play/trilho.svg) center top/100% auto repeat-y;mask:url(../img/play/trilho.svg) center top/100% auto repeat-y}
/* robô ao lado da tela do livro */
.tema-play .pc-robo{position:relative;flex:0 0 auto;width:clamp(150px,17vw,240px)}

/* ===== topo: arte da capa 1, grade neon e partículas ===== */
.tema-play .colecao-topo{position:relative;overflow:hidden;padding-block:88px 104px;
  background:radial-gradient(70% 120% at 0% 0%,rgba(80,136,248,.26),transparent 60%),var(--pc-espaco)}
/* arte espelhada: a menina fica à direita olhando para o título; o quadro fica entre o título e o logo */
.tema-play .colecao-topo .pc-arte{position:absolute;top:0;bottom:0;left:34%;width:48%;opacity:.85;transform:scaleX(-1);
  background:url(../img/play/arte-topo.webp) center 64%/cover no-repeat;
  -webkit-mask:linear-gradient(90deg,transparent,#000 30%,#000 70%,transparent);mask:linear-gradient(90deg,transparent,#000 30%,#000 70%,transparent)}
.tema-play .pc-grade{position:absolute;left:-50%;right:-50%;bottom:0;height:52%;transform:perspective(420px) rotateX(62deg);transform-origin:50% 100%;
  background:repeating-linear-gradient(90deg,rgba(63,216,255,.5) 0 1px,transparent 1px 64px),
             repeating-linear-gradient(0deg,rgba(63,216,255,.5) 0 1px,transparent 1px 64px);
  -webkit-mask:linear-gradient(transparent,#000 75%);mask:linear-gradient(transparent,#000 75%)}
.tema-play .pc-p{position:absolute;width:4px;height:4px;border-radius:50%;background:var(--pc-ciano);box-shadow:0 0 10px 2px rgba(63,216,255,.8)}
.tema-play .pc-p1{left:8%;bottom:22%}
.tema-play .pc-p2{left:22%;bottom:38%;background:var(--pc-lilas);box-shadow:0 0 10px 2px rgba(167,123,234,.8)}
.tema-play .pc-p3{left:37%;bottom:18%}
.tema-play .pc-p4{left:48%;bottom:52%;width:3px;height:3px}
.tema-play .pc-p5{left:63%;bottom:30%;background:var(--pc-lilas);box-shadow:0 0 10px 2px rgba(167,123,234,.8)}
.tema-play .pc-p6{left:78%;bottom:46%}
.tema-play .pc-p7{left:90%;bottom:20%;width:3px;height:3px}
.tema-play .colecao-topo .container{position:relative;z-index:1}
.tema-play .colecao-topo .rotulo{color:var(--pc-ciano);letter-spacing:.3em}
.tema-play .colecao-topo h1{font-family:var(--pc-titulo);font-weight:400;font-size:clamp(2.4rem,5.6vw,4rem);letter-spacing:.02em;
  background:linear-gradient(90deg,#fff 12%,var(--pc-ciano) 55%,var(--pc-lilas));-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 18px rgba(63,216,255,.35))}
/* logo num painel de vidro com borda neon */
.tema-play .colecao-logo{background:rgba(255,255,255,.06);border:1px solid var(--pc-borda);border-radius:18px;padding:16px 20px;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  box-shadow:0 0 0 1px rgba(63,216,255,.12),0 0 40px -6px rgba(63,216,255,.55);transition:transform .4s ease}
.tema-play .colecao-logo:hover{transform:translateY(-3px)}
/* linha de circuito entre o topo e a página, com um pulso de luz correndo */
.tema-play .pc-linha{position:absolute;left:0;right:0;bottom:0;height:2px;overflow:hidden;z-index:2;
  background:linear-gradient(90deg,transparent,var(--pc-ciano) 20%,var(--pc-lilas) 80%,transparent);box-shadow:0 0 12px rgba(63,216,255,.7)}
.tema-play .pc-linha::after{content:"";position:absolute;top:0;bottom:0;left:-20%;width:18%;
  background:linear-gradient(90deg,transparent,#fff,transparent);opacity:0}

/* ===== descrição: painel de interface (HUD) ===== */
.tema-play .secao-descricao{background:linear-gradient(var(--pc-espaco),var(--pc-noite))}
.tema-play .pc-pagina{position:relative;overflow:hidden;margin-inline:auto;padding:40px 44px 32px;border:1px solid var(--pc-borda);border-radius:6px;
  background:
    linear-gradient(var(--pc-ciano),var(--pc-ciano)) left top/24px 2px no-repeat,
    linear-gradient(var(--pc-ciano),var(--pc-ciano)) left top/2px 24px no-repeat,
    linear-gradient(var(--pc-ciano),var(--pc-ciano)) right top/24px 2px no-repeat,
    linear-gradient(var(--pc-ciano),var(--pc-ciano)) right top/2px 24px no-repeat,
    linear-gradient(var(--pc-lilas),var(--pc-lilas)) left bottom/24px 2px no-repeat,
    linear-gradient(var(--pc-lilas),var(--pc-lilas)) left bottom/2px 24px no-repeat,
    linear-gradient(var(--pc-lilas),var(--pc-lilas)) right bottom/24px 2px no-repeat,
    linear-gradient(var(--pc-lilas),var(--pc-lilas)) right bottom/2px 24px no-repeat,
    rgba(12,20,64,.65);
  box-shadow:inset 0 0 40px rgba(63,216,255,.06),0 20px 50px -30px rgba(0,0,0,.8)}
.tema-play .pc-pagina p{position:relative;color:var(--pc-texto)}
/* luz de "escaneamento" que passa uma vez quando o texto aparece */
.tema-play .pc-pagina::after{content:"";position:absolute;left:0;right:0;top:-40%;height:40%;pointer-events:none;opacity:0;
  background:linear-gradient(transparent,rgba(63,216,255,.14),transparent)}

/* ===== títulos: Audiowide + linha de circuito ===== */
.tema-play .secao-topo h2{font-family:var(--pc-titulo);font-weight:400;color:#fff;letter-spacing:.02em;text-shadow:0 0 18px rgba(63,216,255,.35)}
.tema-play .secao-topo h2::after{content:"";display:block;width:160px;height:16px;margin-top:12px;
  background:url(../img/play/circuito.svg) center/160px 16px no-repeat}
.tema-play .secao-topo.centro h2::after{margin-inline:auto}

/* ===== demonstração: o SCARPLAY e a tela do livro ===== */
.tema-play .secao-demonstracao{background:var(--pc-noite)}
.tema-play .tm-palco{display:flex;flex-direction:row-reverse;align-items:center;gap:16px}  /* robô à direita, olhando para a tela */
.tema-play .tm-personagem{position:relative;z-index:1;display:block;width:100%;height:auto;filter:drop-shadow(0 0 22px rgba(63,216,255,.45))}
.tema-play .tm-palco > :last-child{flex:1;min-width:0}
.tema-play .placeholder-flipbook{min-height:420px;border:1px solid var(--pc-borda);border-radius:10px;color:var(--pc-ciano);
  font-family:var(--pc-titulo);font-size:.95rem;letter-spacing:.04em;line-height:1.9;
  background:repeating-linear-gradient(0deg,rgba(63,216,255,.05) 0 1px,transparent 1px 4px),
             radial-gradient(60% 80% at 50% 50%,rgba(80,136,248,.18),transparent 70%),rgba(8,14,48,.8);
  box-shadow:inset 0 0 50px -10px rgba(63,216,255,.35),0 0 0 1px rgba(63,216,255,.1)}
.tema-play .flipbook-caixa{background:rgba(8,14,48,.8);border:1px solid var(--pc-borda)}
.tema-play .nota-visualizacao{color:#8FA3D9}

/* ===== capas: grade de fundo, brilhos e livros com neon na cor do volume ===== */
.tema-play .secao.fundo{position:relative;overflow:hidden;
  background:linear-gradient(rgba(63,216,255,.06) 1px,transparent 1px) 0 0/40px 40px,
             linear-gradient(90deg,rgba(63,216,255,.06) 1px,transparent 1px) 0 0/40px 40px,var(--pc-espaco)}
.tema-play .secao.fundo .container{position:relative;z-index:1}
.tema-play .pc-brilho{position:absolute;border-radius:50%}
.tema-play .pc-b1{width:560px;height:560px;left:-220px;top:-200px;background:radial-gradient(circle,rgba(167,123,234,.26),transparent 65%)}
.tema-play .grade-capas{gap:34px 26px}
/* (14/10/2026) Play Connect Kids, Infantil 2 a 5: capas deitadas numa fileira própria, quatro lado a lado (duas a duas no
   tablet e no celular), antes das do 1º ao 9º ano; a lombada desenhada fica mais estreita, como a das capas em pé */
.tema-play .grade-capas-deitadas{grid-template-columns:repeat(4,1fr);margin-bottom:40px}
.tema-play .grade-capas-deitadas .capa-ampliar::before{width:4.5%}
@media (max-width:1024px){ .tema-play .grade-capas-deitadas{grid-template-columns:repeat(2,1fr)} }
@media (max-width:767px){ .tema-play .grade-capas-deitadas{gap:18px 14px;margin-bottom:26px} }
.tema-play .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 34px -16px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.06);
  transform:perspective(900px);transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s ease}
.tema-play .capa-ampliar img{display:block;border-radius:3px 8px 8px 3px;box-shadow:none;background:none}
.tema-play .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,.35),rgba(255,255,255,.18) 45%,rgba(0,0,0,.08))}
.tema-play .capa-ampliar:focus-visible{outline:2px solid var(--pc-ciano);outline-offset:4px}
@media (hover:hover){
  .tema-play .capa-ampliar:hover{transform:perspective(900px) rotateY(-10deg) rotate(-1.5deg) translateY(-6px);
    box-shadow:0 18px 34px -16px rgba(0,0,0,.85),0 0 30px -4px var(--cor-ano,var(--pc-ciano))}
}
.tema-play .capa figcaption{color:var(--pc-texto);font-weight:600;letter-spacing:.04em}
.tema-play .capa figcaption::before{content:"";display:inline-block;width:8px;height:8px;margin-right:8px;border-radius:50%;
  background:var(--cor-ano,var(--pc-ciano));box-shadow:0 0 8px var(--cor-ano,var(--pc-ciano))}

/* capa ampliada: janela por cima da página (não sai dela) */
.tema-play .tm-ampliada{border:0;padding:0;background:transparent;max-width:min(92vw,560px);max-height:92vh;overflow:visible}
.tema-play .tm-ampliada::backdrop{background:rgba(3,6,20,.88)}
.tema-play .tm-ampliada img{display:block;max-width:100%;max-height:86vh;width:auto;height:auto;border-radius:4px 10px 10px 4px;
  box-shadow:0 0 0 1px rgba(63,216,255,.25),0 0 60px -10px rgba(63,216,255,.6)}
.tema-play .tm-fechar{position:absolute;top:10px;right:10px;width:40px;height:40px;border-radius:50%;border:0;cursor:pointer;
  background:var(--pc-ciano);color:var(--pc-espaco);font-family:var(--fonte);font-size:1.15rem;font-weight:800;line-height:1;
  box-shadow:0 0 18px -2px rgba(63,216,255,.8)}
.tema-play .tm-fechar:focus-visible{outline:3px solid #fff;outline-offset:2px}

/* ===== botão final: arte da capa 4 e um feixe de luz ===== */
.tema-play .colecao-cta{position:relative;overflow:hidden;background:var(--pc-espaco);padding-block:104px}
.tema-play .colecao-cta .pc-arte-cta{position:absolute;inset:0;opacity:.55;
  background:url(../img/play/arte-cta.webp) center 55%/cover no-repeat;
  -webkit-mask:linear-gradient(90deg,transparent,#000 30%,#000 70%,transparent);mask:linear-gradient(90deg,transparent,#000 30%,#000 70%,transparent)}
.tema-play .pc-feixe{position:absolute;top:-20%;bottom:-20%;left:-30%;width:22%;transform:skewX(-18deg);opacity:0;
  background:linear-gradient(90deg,transparent,rgba(63,216,255,.16),transparent)}
.tema-play .colecao-cta .container{position:relative;z-index:1}
.tema-play .botao-colecao{background:linear-gradient(90deg,#3A6FE0,#8A5BD8);
  box-shadow:0 0 0 1px rgba(255,255,255,.18),0 0 30px -4px rgba(80,136,248,.85)}

/* ===== animações (só com .tm-js) ===== */
@keyframes pc-grade{to{background-position:0 0,0 64px}}
@keyframes pc-subir{0%{translate:0 0;opacity:0}20%{opacity:1}100%{translate:0 -140px;opacity:0}}
@keyframes pc-pulso{0%{left:-20%;opacity:1}60%,100%{left:110%;opacity:1}}
@keyframes pc-scan{from{top:-40%;opacity:1}to{top:110%;opacity:1}}
@keyframes pc-flutuar{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes pc-neon{0%,100%{box-shadow:0 0 0 1px rgba(63,216,255,.12),0 0 40px -6px rgba(63,216,255,.55)}50%{box-shadow:0 0 0 1px rgba(167,123,234,.2),0 0 46px -4px rgba(167,123,234,.6)}}
@keyframes pc-feixe{0%{left:-30%;opacity:1}55%,100%{left:120%;opacity:1}}
@keyframes pc-zoom{from{opacity:0;transform:scale(.92)}}
@keyframes pc-energia{to{background-position:0 760px}}
.tm-js .tema-play .pc-grade{animation:pc-grade 5s linear infinite}
.tm-js .tema-play .pc-p{animation:pc-subir 7s ease-in infinite}
.tm-js .tema-play .pc-p2{animation-delay:-2s;animation-duration:9s}
.tm-js .tema-play .pc-p3{animation-delay:-4s}
.tm-js .tema-play .pc-p4{animation-delay:-1s;animation-duration:8s}
.tm-js .tema-play .pc-p5{animation-delay:-5s;animation-duration:10s}
.tm-js .tema-play .pc-p6{animation-delay:-3s}
.tm-js .tema-play .pc-p7{animation-delay:-6s;animation-duration:8.5s}
.tm-js .tema-play .pc-linha::after{animation:pc-pulso 4.5s ease-in-out 1s infinite}
.tm-js .tema-play .colecao-logo{animation:pc-neon 5s ease-in-out infinite}
.tm-js .tema-play .pc-pagina:has(p.tm-visivel)::after{animation:pc-scan 1.8s ease-out .2s 1 both}
.tm-js .tema-play .pc-feixe{animation:pc-feixe 7s ease-in-out 1.5s infinite}
.tm-js .tema-play .pc-trilho::after{opacity:1;animation:pc-energia 3.2s linear infinite}
.tm-js .tema-play .pc-trilho-dir::after{animation-delay:-1.6s}
.tm-js .tema-play .pc-pagina p,
.tm-js .tema-play .capa{opacity:0;translate:0 18px;transition:opacity .7s ease,translate .7s cubic-bezier(.2,.8,.2,1)}
.tm-js .tema-play .pc-pagina p:nth-of-type(2){transition-delay:.12s}
.tm-js .tema-play .pc-pagina p:nth-of-type(3){transition-delay:.24s}
.tm-js .tema-play .capa:nth-child(3n+2){transition-delay:.08s}
.tm-js .tema-play .capa:nth-child(3n){transition-delay:.16s}
.tm-js .tema-play .pc-pagina p.tm-visivel,
.tm-js .tema-play .capa.tm-visivel{opacity:1;translate:0 0}
.tm-js .tema-play .tm-personagem{opacity:0;translate:0 40px;transition:opacity .8s ease,translate 1s cubic-bezier(.2,.8,.2,1)}
.tm-js .tema-play .tm-personagem.tm-visivel{opacity:1;translate:0 0;animation:pc-flutuar 4.5s ease-in-out 1.2s infinite}
@media (prefers-reduced-motion:no-preference){
  .tema-play .tm-ampliada[open]{animation:pc-zoom .35s cubic-bezier(.2,.8,.2,1)}
}
@media (prefers-reduced-motion:reduce){
  .tema-play .capa-ampliar,.tema-play .colecao-logo{transition:none}
}

/* ===== tablet e celular ===== */
@media (max-width:1299px){
  .tema-play .pc-trilho{width:16px;filter:drop-shadow(0 0 2px rgba(63,216,255,.7))}
  .tema-play .pc-trilho-esq{left:2px}
  .tema-play .pc-trilho-dir{right:2px}
  .tema-play .pc-trilho::before{background-image:url(../img/play/trilho-fino.svg);opacity:.3}
  .tema-play .pc-trilho::after{background-size:100% 520px;-webkit-mask-image:url(../img/play/trilho-fino.svg);mask-image:url(../img/play/trilho-fino.svg)}
  .tm-js .tema-play .pc-trilho::after{animation-name:pc-energia-fina}
}
@keyframes pc-energia-fina{to{background-position:0 520px}}
@media (max-width:1024px){
  .tema-play .colecao-topo .pc-arte{left:0;width:100%;opacity:.4;-webkit-mask:linear-gradient(270deg,transparent,#000 70%);mask:linear-gradient(270deg,transparent,#000 70%)}
}
@media (max-width:767px){
  .tema-play .colecao-topo{padding-block:56px 72px}
  .tema-play .colecao-topo .pc-arte{opacity:.3;-webkit-mask:linear-gradient(transparent,#000 60%);mask:linear-gradient(transparent,#000 60%)}
  .tema-play .pc-grade{height:40%}
  .tema-play .pc-pagina{padding:34px 20px 22px}
  .tema-play .tm-palco{flex-direction:column;align-items:stretch;gap:0}
  .tema-play .pc-robo{align-self:flex-end;width:150px;margin:0 8px -8px 0;z-index:1}
  .tema-play .placeholder-flipbook{min-height:260px;font-size:.85rem}
  .tema-play .colecao-cta{padding-block:80px}
  .tema-play .colecao-cta .pc-arte-cta{-webkit-mask:none;mask:none;opacity:.4}
}

/* rodapé desta coleção: o "espaço" do livro (o resto do rodapé é o mesmo do site) */
.tema-play ~ .site-footer{--cor-rodape:#060A22}