/* Seção "Gostou de um lettering?" em estilo game: 3 animações diferentes
   - Cinético  = ARCADE   (letras caem e pulam em blocos)
   - Editorial = DIÁLOGO  (digitação de RPG, letra por letra)
   - Digital   = GLITCH   (CRT com falha RGB e varredura) */

.lettering-section .reference-heading h2{
  font-family:"Press Start 2P","Courier New",monospace;font-weight:400;letter-spacing:0;line-height:1.5;
  font-size:clamp(18px,2.6vw,32px);text-shadow:4px 4px 0 #6b2f10;
}
.lettering-section .reference-heading .eyebrow{
  display:inline-block;padding:7px 10px;background:#0d0b12;color:#f2a65a;
  font-family:"Press Start 2P","Courier New",monospace;font-size:9px;letter-spacing:0;line-height:1.4;box-shadow:3px 3px 0 #dd7136;
}
.lettering-section .reference-heading p{font-family:"VT323","Courier New",monospace;font-size:23px;line-height:1.1;color:#cdbfe6}

/* moldura do estúdio */
.lettering-section .reference-studio{
  background-color:#1b1626;border:4px solid #0d0b12;border-radius:0;
  box-shadow:inset 4px 4px 0 #4b3f66,inset -4px -4px 0 #120f1b,8px 8px 0 #0d0b12,8px 8px 0 2px #dd7136;
  background-image:linear-gradient(transparent,transparent);
  image-rendering:pixelated;
}
.lettering-section .studio-bar{border-bottom:4px dashed #4b3f66}
.lettering-section .studio-bar>.mini-label,.lettering-section .card-label span,.lettering-section .result-tag{
  font-family:"Press Start 2P","Courier New",monospace;font-size:8px;letter-spacing:0;line-height:1.6;color:#f2a65a;
}
.lettering-section .style-selector{gap:10px}
.lettering-section .style-selector button{
  background:#262034;color:#fff;border:3px solid #0d0b12;border-radius:0;
  box-shadow:inset 3px 3px 0 #4b3f66,inset -3px -3px 0 #120f1b,4px 4px 0 #0d0b12;
  font-family:"Press Start 2P","Courier New",monospace;font-size:8px;letter-spacing:0;line-height:1.5;
  transition:transform .06s steps(2,end);
}
.lettering-section .style-selector button span{font-family:inherit;font-size:8px}
.lettering-section .style-selector button:hover{transform:translate(-2px,-2px)}
.lettering-section .style-selector button:active{transform:translate(3px,3px)}
.lettering-section .style-selector button[aria-pressed="true"]{background:#4a2b18;box-shadow:inset 3px 3px 0 #f2a65a,inset -3px -3px 0 #8a3d14,4px 4px 0 #0d0b12}
.lettering-section .style-selector button[aria-pressed="true"]::before{content:"▶ ";color:#f2a65a}

/* cartões: referência e resultado */
.lettering-section .reference-card{
  border:4px solid #0d0b12;border-radius:0;
  box-shadow:inset 3px 3px 0 rgba(255,255,255,.12),6px 6px 0 #0d0b12;
}
.lettering-section .reference-card::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:7;
  background:linear-gradient(transparent,transparent);
}
.lettering-section .card-note{font-family:"VT323","Courier New",monospace;font-size:19px}
.lettering-section .card-note *{font-family:inherit}
.lettering-section .frame-counter,.lettering-section .art-number{font-family:"Press Start 2P","Courier New",monospace;font-size:7px;letter-spacing:0}
.lettering-section .reference-card *{border-radius:0}
.lettering-section .transfer-bridge img{image-rendering:pixelated}
.lettering-section .bridge-orbit{border-radius:0;animation-timing-function:steps(12)}
.lettering-section .render-mask span{font-family:"Press Start 2P","Courier New",monospace;font-size:9px;letter-spacing:0}

.lettering-section .studio-progress{font-family:"Press Start 2P","Courier New",monospace;font-size:8px;letter-spacing:0;border-top:4px dashed #4b3f66}
.lettering-section .studio-progress>i{height:8px;background:repeating-linear-gradient(to right,#dd7136 0 10px,#f6a26f 10px 12px);animation-timing-function:steps(30)}
.lettering-section .studio-caption{background:transparent}
.lettering-section .studio-caption p{font-family:"VT323","Courier New",monospace;font-size:19px;line-height:1.1;color:#cdbfe6}
.lettering-section .studio-caption .text-link{font-family:"Press Start 2P","Courier New",monospace;font-size:8px;letter-spacing:0;color:#f2a65a}

/* aviso After Effects */
.lettering-section .ae-update{background:#1b1626;border:4px solid #0d0b12;border-radius:0;box-shadow:inset 3px 3px 0 #4b3f66,inset -3px -3px 0 #120f1b,6px 6px 0 #0d0b12}
.lettering-section .ae-icon{border-radius:0;border:3px solid #0d0b12;box-shadow:3px 3px 0 #0d0b12;font-family:"Press Start 2P","Courier New",monospace;font-size:13px}
.lettering-section .coming-badge{border-radius:0;border:2px solid #f2a65a;font-family:"Press Start 2P","Courier New",monospace;font-size:7px;letter-spacing:0;line-height:1.5}
.lettering-section .ae-mini-heading h3{font-family:"Press Start 2P","Courier New",monospace;font-weight:400;font-size:11px;line-height:1.6;letter-spacing:0}
.lettering-section .ae-update p{font-family:"VT323","Courier New",monospace;font-size:20px;line-height:1.1}

/* ===== base comum das artes ===== */
.lettering-section .reference-studio .art-orbit{border-radius:0;animation-timing-function:steps(24)}
.lettering-section .reference-studio .art-orbit:before,.lettering-section .reference-studio .art-orbit:after{border-radius:0}
.lettering-section .reference-studio .art-orbit>b{border-radius:0}
.lettering-section .reference-studio .art-grid{background-size:20px 20px}
.lettering-section .reference-studio .art-words,
.lettering-section .reference-studio .art-echo{transform:none!important;letter-spacing:0;font-weight:400;-webkit-text-stroke:0}
.lettering-section .reference-studio .art-echo{display:none}
.lettering-section .reference-studio .art-line>span{will-change:transform}
.lettering-section .reference-studio .art-spark{font-family:"Press Start 2P","Courier New",monospace;animation:px-blink 1s steps(2,start) infinite}
.lettering-section .reference-studio .art-cross{animation-timing-function:steps(8)}

/* ===== 1) CINÉTICO — ARCADE: queda em blocos + pulinhos ===== */
.lettering-section .reference-studio[data-style="kinetic"]{--art:#f48a47;--art-paper:#fff3df;--art-bg:#2b1a14}
.lettering-section .reference-studio[data-style="kinetic"] .art-words{
  font-family:"Press Start 2P","Courier New",monospace;font-size:8.4cqw;line-height:1.5;inset:24% 8% 18%;
}
.lettering-section .reference-studio[data-style="kinetic"] .art-line{text-shadow:.07em .07em 0 #0d0b12,.14em .14em 0 #6b2f10}
.lettering-section .reference-studio[data-style="kinetic"] .art-line:nth-child(2){font-size:.55em;margin-left:.2em}
.lettering-section .reference-studio[data-style="kinetic"] .art-line:last-child{font-size:.9em}
.lettering-section .reference-studio[data-style="kinetic"] .source-art .art-line>span{
  animation:px-drop 10s steps(2,end) infinite;animation-delay:calc(var(--i)*90ms);transform-origin:50% 100%;
}
.lettering-section .reference-studio[data-style="kinetic"] .source-art .art-line:nth-child(2)>span{animation-delay:calc(.7s + var(--i)*90ms)}
.lettering-section .reference-studio[data-style="kinetic"] .source-art .art-line:last-child>span{animation-delay:calc(1.3s + var(--i)*90ms)}
.lettering-section .reference-studio[data-style="kinetic"] .result-art .art-line>span{
  animation:px-hop 1.8s steps(2,end) infinite;animation-delay:calc(var(--i)*140ms)!important;
}
@keyframes px-drop{
  0%{transform:translateY(-320%);opacity:0}
  3%{transform:translateY(-120%);opacity:1}
  6%{transform:translateY(0)}
  8%{transform:translateY(-26%)}
  10%{transform:translateY(0)}
  12%{transform:translateY(-8%)}
  14%,56%{transform:translateY(0)}
  58%{transform:translateY(-22%)}
  62%{transform:translateY(0)}
  64%,88%{transform:translateY(0);opacity:1}
  92%{transform:translateY(60%);opacity:.6}
  96%,100%{transform:translateY(160%);opacity:0}
}
@keyframes px-hop{0%,60%,100%{transform:translateY(0)}20%{transform:translateY(-18%)}40%{transform:translateY(0)}}

/* ===== 2) EDITORIAL — DIÁLOGO RPG: digitação letra por letra ===== */
.lettering-section .reference-studio[data-style="editorial"]{--art:#d9b8ff;--art-paper:#fff;--art-bg:#1f1a2b}
.lettering-section .reference-studio[data-style="editorial"] .art-words{
  font-family:"VT323","Courier New",monospace;font-size:17cqw;line-height:.95;inset:22% 8% 18%;
  background:#0d0b12;border:3px solid #f4f3f1;box-shadow:0 0 0 3px #0d0b12;padding:3cqw 4cqw;
}
.lettering-section .reference-studio[data-style="editorial"] .art-line:nth-child(2){font-size:.7em;margin-left:0}
.lettering-section .reference-studio[data-style="editorial"] .art-line:last-child{font-size:1em;color:#f2a65a}
.lettering-section .reference-studio[data-style="editorial"] .art-line:last-child::after{
  content:"";display:inline-block;width:.45em;height:.8em;margin-left:.12em;background:#f2a65a;vertical-align:-.05em;animation:px-blink .7s steps(2,start) infinite;
}
.lettering-section .reference-studio[data-style="editorial"] .source-art .art-line>span{
  animation:px-type 10s steps(1,end) infinite;animation-delay:calc(var(--i)*110ms);opacity:0;
}
.lettering-section .reference-studio[data-style="editorial"] .source-art .art-line:nth-child(2)>span{animation-delay:calc(.9s + var(--i)*110ms)}
.lettering-section .reference-studio[data-style="editorial"] .source-art .art-line:last-child>span{animation-delay:calc(1.5s + var(--i)*110ms)}
.lettering-section .reference-studio[data-style="editorial"] .art-words::before{content:"▼";position:absolute;right:3cqw;bottom:1.6cqw;font-size:.3em;color:#f2a65a;animation:px-blink 1s steps(2,start) infinite}
.lettering-section .reference-studio[data-style="editorial"] .art-orbit,.lettering-section .reference-studio[data-style="editorial"] .art-stripe{display:none}
@keyframes px-type{0%{opacity:0}1%,86%{opacity:1}92%,100%{opacity:0}}

/* ===== 3) DIGITAL — GLITCH CRT: falha RGB + varredura ===== */
.lettering-section .reference-studio[data-style="digital"]{--art:#8df5a6;--art-paper:#e4f7dc;--art-bg:#0f1c17}
.lettering-section .reference-studio[data-style="digital"] .art-words{
  font-family:"Press Start 2P","Courier New",monospace;font-size:7.4cqw;line-height:1.6;inset:24% 8% 18%;
}
.lettering-section .reference-studio[data-style="digital"] .art-line:nth-child(2){font-size:.6em}
.lettering-section .reference-studio[data-style="digital"] .art-line:last-child{font-size:.95em;color:var(--art);-webkit-text-stroke:0}
.lettering-section .reference-studio[data-style="digital"] .source-art .art-line>span{
  animation:px-glitch 10s steps(1,end) infinite;animation-delay:calc(var(--i)*70ms);opacity:0;
}
.lettering-section .reference-studio[data-style="digital"] .source-art .art-line:nth-child(2)>span{animation-delay:calc(.6s + var(--i)*70ms)}
.lettering-section .reference-studio[data-style="digital"] .source-art .art-line:last-child>span{animation-delay:calc(1.1s + var(--i)*70ms)}
.lettering-section .reference-studio[data-style="digital"] .result-art .art-line>span{animation:px-jit 2.4s steps(1,end) infinite;animation-delay:calc(var(--i)*190ms)!important}
.lettering-section .reference-studio[data-style="digital"] .motion-art::before{
  content:"";position:absolute;left:0;right:0;top:0;height:10%;z-index:5;pointer-events:none;
  background:linear-gradient(to bottom,transparent,rgba(141,245,166,.22),transparent);
  animation:px-sweep 3.2s steps(24) infinite;
}
@keyframes px-sweep{from{transform:translateY(-110%)}to{transform:translateY(1000%)}}
@keyframes px-glitch{
  0%,2%{opacity:0}
  3%{opacity:1;transform:translateX(-.12em);text-shadow:-.06em 0 #ff3b6b,.06em 0 #00e5ff}
  5%{transform:translateX(.1em) skewX(10deg);text-shadow:.06em 0 #ff3b6b,-.06em 0 #00e5ff}
  7%,29%{transform:none;text-shadow:none}
  30%{transform:translateX(.08em);text-shadow:-.05em 0 #ff3b6b,.05em 0 #00e5ff}
  31%,57%{transform:none;text-shadow:none}
  58%{transform:translate(-.1em,.05em) skewX(-8deg);text-shadow:.06em 0 #ff3b6b,-.06em 0 #00e5ff}
  60%,86%{transform:none;text-shadow:none;opacity:1}
  88%{opacity:0}
  89%{opacity:1;transform:translateX(.12em);text-shadow:-.06em 0 #ff3b6b,.06em 0 #00e5ff}
  91%,100%{opacity:0}
}
@keyframes px-jit{0%,90%,100%{transform:none;text-shadow:none}92%{transform:translateX(.08em);text-shadow:-.05em 0 #ff3b6b,.05em 0 #00e5ff}95%{transform:translateX(-.06em);text-shadow:.05em 0 #ff3b6b,-.05em 0 #00e5ff}}

@media (prefers-reduced-motion:reduce){
  .lettering-section .reference-studio .art-line>span{animation:none!important;opacity:1!important}
}
.lettering-section .reference-studio[data-style="editorial"] .art-words,.lettering-section .reference-studio[data-style="editorial"] .art-line{font-style:normal!important}
.lettering-section .reference-studio[data-style="editorial"] .art-words{font-size:14.5cqw;inset:20% 8% 20%}
.lettering-section .reference-studio[data-style="editorial"] .art-line:last-child::after{height:.62em;width:.38em}
.lettering-section .studio-bar>.mini-label{font-size:16px!important;line-height:1.5}
.lettering-section .studio-bar{flex-wrap:wrap}

/* legendas dos cartões: a da referência fica em cima do painel de animação, a do resultado embaixo */
.lettering-section .ref-col{min-width:0;display:flex;flex-direction:column;gap:12px}
.lettering-section .ref-col .card-note{
  position:static;inset:auto;display:flex;align-items:center;justify-content:flex-start;gap:8px;
  padding:6px 10px;background:#0d0b12;border:2px solid #4b3f66;box-shadow:3px 3px 0 #dd7136;width:fit-content;max-width:100%;
  font-family:"VT323","Courier New",monospace;font-size:20px;line-height:1.1;letter-spacing:0;font-weight:400;color:#f2a65a;
}
.lettering-section .ref-col .card-note span{color:inherit}
.lettering-section .ref-col-result .card-note{align-self:flex-end}
.lettering-section .ref-col .reference-card{width:100%}
.lettering-section .ref-col .card-note{height:34px;box-sizing:border-box}
.lettering-section .ref-col-result::before{content:"";flex:none;height:34px}
@media (max-width:900px){.lettering-section .ref-col-result::before{display:none}}
/* alinha os dois painéis: a legenda do resultado fica solta embaixo do cartão */
.lettering-section .ref-col-result{position:relative}
.lettering-section .ref-col-result .card-note{position:absolute;left:auto;right:0;bottom:-46px}
.lettering-section .reference-stage{padding-bottom:78px}
@media (max-width:900px){
  .lettering-section .ref-col-result .card-note{position:static;align-self:flex-end}
  .lettering-section .reference-stage{padding-bottom:18px}
}