/* 14/11 (noite) · serviços como enxame de quadros de luz (swarm.js).
   a cena ocupa a tela inteira e fica presa; o texto é uma legenda por cima. */
.swarm, .reel-count { display: none; }
.svc-copy .sc { margin: 0 0 28px; text-align: left; }
.sc h3 { margin: 6px 0 10px; font-size: clamp(34px, 5.2vw, 96px) !important; line-height: .96; }
.sc p { margin: 0; max-width: 24em; font-size: clamp(15px, 1.25vw, 20px); line-height: 1.5; color: rgba(240,240,240,.84); }
.sc-n { opacity: .6; letter-spacing: .12em; }

html.scrolly .svc-sec { padding-bottom: 0; padding-inline: 0; }
html.scrolly .svc-head { padding-inline: max(24px, 5vw); }
html.scrolly .svc-pin { height: 720svh; }
html.scrolly .swarm-stage { position: sticky; top: 0; height: 100svh; overflow: clip; }
html.scrolly .swarm { display: block; position: absolute; inset: 0; }
html.scrolly .swarm canvas { display: block; width: 100%; height: 100%; }
html.scrolly .svc-copy { position: absolute; left: max(24px, 5vw); bottom: clamp(56px, 12vh, 130px); width: min(44vw, 640px); height: 13em; z-index: 2; }
html.scrolly .svc-copy .sc { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; pointer-events: none; }
html.scrolly .sc .sc-n, html.scrolly .sc p { display: block; opacity: 0; transform: translateY(14px); transition: opacity .45s ease, transform .9s var(--ease-out, ease); }
html.scrolly .sc.on .sc-n { opacity: .6; transform: none; transition-delay: .15s; }
html.scrolly .sc.on p { opacity: 1; transform: none; transition-delay: .55s; }
html.scrolly .sc h3, html.scrolly .sc p { text-shadow: 0 2px 26px rgba(3,4,14,.9), 0 0 60px rgba(3,4,14,.7); }
html.mo.scrolly .sc:not(.on) [data-rise] .mw > i { transition-duration: .45s; transition-timing-function: var(--ease-io); transition-delay: 0ms; }
html.mo.scrolly .sc.past [data-rise] .mw > i { transform: translateY(-140%) rotate(-3deg); }
html.mo.scrolly .sc.on [data-rise] .mw > i { transition-delay: calc(.22s + var(--ln, 0) * 90ms + var(--wi, 0) * 14ms); }
html.scrolly .reel-count { display: block; position: absolute; right: max(24px, 5vw); bottom: clamp(20px, 4vh, 40px); margin: 0; opacity: .6; letter-spacing: .12em; z-index: 2; }
html.scrolly .reel-count b { font-weight: 400; color: var(--paper); }
@media (max-width: 760px) {
  html.scrolly .svc-pin { height: 560svh; }
  html.scrolly .svc-copy { width: auto; right: 22px; left: 22px; bottom: 9svh; }
  .sc h3 { font-size: clamp(32px, 9.4vw, 46px) !important; }
}
/* a legenda fica sobre a cena: um escuro suave no canto de baixo à esquerda segura a leitura */
html.scrolly .swarm-stage::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse 62% 58% at 0% 100%, rgba(3,4,14,.94) 0, rgba(3,4,14,.78) 38%, rgba(3,4,14,0) 72%); }
@media (max-width: 760px) { html.scrolly .swarm-stage::after { background: linear-gradient(to top, rgba(3,4,14,.95) 0, rgba(3,4,14,.8) 24%, rgba(3,4,14,0) 50%); } }

/* ══ cabeçalho dos serviços centralizado, com os cinco à vista antes da cena ══ */
.svc-head.svc-head-c { display: block; text-align: center; max-width: 1240px; margin: 0 auto; padding-bottom: clamp(48px, 9vh, 110px); }
.svc-head-c .h2 { text-align: center; margin: 0 auto; font-size: clamp(42px, 6vw, 108px) !important; }
.svc-head-c .lead { text-align: center; margin: clamp(18px, 3vh, 30px) auto 0; max-width: 32em; opacity: .78; }
.svc-index { list-style: none; margin: clamp(44px, 8vh, 90px) auto 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: clamp(14px, 2vw, 32px); text-align: left; }
.svc-index li { min-width: 0; }
.svc-index a { position: relative; display: block; padding-top: 18px; color: var(--paper); text-decoration: none; font: 400 clamp(19px, 1.7vw, 30px)/1.08 var(--serif, Georgia, serif); font-variation-settings: "SOFT" 100, "WONK" 0; letter-spacing: -.02em; }
.svc-index a::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: rgba(240,240,240,.22); }
.svc-index a::after { content: ""; position: absolute; left: 0; top: 0; height: 1px; width: 0; background: var(--paper); transition: width .7s var(--ease-out, ease); }
.svc-index a:hover::after, .svc-index a:focus-visible::after { width: 100%; }
.svc-index .px { display: block; margin-bottom: 10px; font-size: 11px; letter-spacing: .14em; opacity: .55; }
html.mo .svc-index li { opacity: 0; transform: translateY(20px); transition: opacity .8s ease, transform 1.1s var(--ease-out, ease); transition-delay: calc(var(--k, 0) * 90ms + 350ms); }
html.mo .svc-index.in li { opacity: 1; transform: none; }
@media (max-width: 900px) {
  .svc-index { grid-template-columns: minmax(0, 1fr); max-width: 420px; row-gap: 0; text-align: left; }
  .svc-index a { display: grid; grid-template-columns: 2.6em 1fr; align-items: baseline; padding: 14px 0; }
  .svc-index .px { margin: 0; }
}

/* na abertura da cena (o buraco negro) ainda não há serviço: o contador espera */
.svc-pin .reel-count { transition: opacity .5s ease; }
.svc-pin.pre .reel-count { opacity: 0 !important; }
/* legenda dos serviços mais legível (pedido dele): o escuro do canto cresce e fica mais denso atrás do nome e da linha */
html.scrolly .swarm-stage::after { background:
  radial-gradient(ellipse 74% 80% at 0% 100%, rgba(3,4,14,.97) 0, rgba(3,4,14,.94) 48%, rgba(3,4,14,.74) 66%, rgba(3,4,14,0) 90%),
  linear-gradient(to top, rgba(3,4,14,.55) 0, rgba(3,4,14,0) 38%); }
@media (max-width: 760px) { html.scrolly .swarm-stage::after { background: linear-gradient(to top, rgba(3,4,14,.97) 0, rgba(3,4,14,.9) 30%, rgba(3,4,14,0) 56%); } }

/* na saída da cena presa, o escuro do canto e o contador apagam antes da borda subir (sem faixa escura cortando a tela) */
html.scrolly .swarm-stage::after { opacity: var(--capo, 1); }
html.scrolly .svc-pin .reel-count { opacity: calc(var(--capo, 1) * .6); }

/* no paredão de abertura ainda não há legenda: sem o escuro do canto (no celular ele apagava os blocos de baixo) */
.svc-pin.pre .swarm-stage::after { opacity: 0 !important; }

/* 15/11 (celular): com a barra do Safari recolhida a tela fica maior que 100svh e aparecia uma faixa do céu embaixo da cena.
   a cena passa a ter a altura da tela grande (lvh); a legenda e o contador sobem o que a barra pode cobrir */
@media (max-width: 760px) {
  html.scrolly .swarm-stage { height: 100lvh; }
  html.scrolly .svc-copy { bottom: calc(8svh + 100lvh - 100svh); }
  html.scrolly .reel-count { bottom: calc(14px + 100lvh - 100svh); }
}

/* 15/11 (escolha dele: o letreiro de cinema): a plaquinha "now showing" em cima das seis caixas de luz, só no letreiro */
.now-showing { display: none; }
html.scrolly .now-showing { display: block; position: absolute; left: 50%; top: max(84px, 7.5svh); z-index: 2; margin: 0; padding: 9px 18px 8px;
  transform: translateX(-50%); white-space: nowrap; font-size: 12px; letter-spacing: .32em; text-transform: uppercase; color: #fdf6e2;
  background: #141418; border: 1px solid rgba(226, 196, 134, .55); border-radius: 3px;
  box-shadow: 0 0 0 4px rgba(20, 20, 24, .6), 0 0 26px rgba(255, 210, 130, .28); opacity: 0; transition: opacity .5s ease; pointer-events: none; }
html.scrolly .now-showing i { font-style: normal; color: #e2c486; }
html.scrolly .svc-pin.pre .now-showing { opacity: 1; }
@media (max-width: 760px) { html.scrolly .now-showing { top: calc(2.4svh); font-size: 10px; padding: 7px 13px 6px; } }