/* =====================================================================
   Polish: legibilidade, menu fixo, botões maiores e animações de entrada.
   Carregado por último; sobrescreve tamanhos pequenos dos outros arquivos.
   ===================================================================== */

/* ---------- Topo: menu fixo, maior e mais legível ---------- */
.site-header{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.94);box-shadow:0 0 0 100vmax rgba(255,255,255,.94);clip-path:inset(0 -100vmax);-webkit-backdrop-filter:saturate(1.4) blur(10px);backdrop-filter:saturate(1.4) blur(10px);transition:height .35s cubic-bezier(.2,.8,.2,1)}
.site-header .brand,.site-header .brand-star,.site-header .brand-caption{transition:font-size .35s cubic-bezier(.2,.8,.2,1)}
.site-header.is-stuck{height:78px}
.site-header.is-stuck .brand{font-size:44px}
.site-header.is-stuck .brand-star{font-size:40px}
.site-header.is-stuck .brand-caption{font-size:10px}
.desktop-nav{gap:6px;font-size:18px;font-weight:600}
.desktop-nav a{padding:12px 18px;border-radius:999px;color:var(--ink);transition:background .2s,color .2s}
.desktop-nav a:hover{background:#f1f1f1}
.desktop-nav a::after{left:18px;right:18px;width:auto;bottom:5px;height:3px;background:var(--lime);transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.desktop-nav a:hover::after,.desktop-nav a.active::after{width:auto;transform:scaleX(1)}
.desktop-nav sup{font-size:11px;color:var(--lime);margin-left:4px}
.index-link{gap:12px;padding:14px 24px;border-radius:999px;background:var(--lime);color:#fff;font:600 16px/1 var(--body);letter-spacing:0;transition:background .2s,transform .2s,box-shadow .2s}
.index-link span{font-size:20px;line-height:1;transition:transform .25s}
.index-link:hover{background:#a90f17;transform:translateY(-2px);box-shadow:0 8px 20px #e31c2440}
.index-link:hover span{transform:translate(3px,-3px)}
@media(max-width:1050px){.desktop-nav{font-size:16px;gap:2px}.desktop-nav a{padding:10px 12px}.index-link{font-size:14px;padding:12px 18px}}
@media(max-width:760px){
  .site-header.is-stuck{height:64px}
  .site-header.is-stuck .brand{font-size:34px}
  .site-header.is-stuck .brand-star{font-size:30px}
  .mobile-menu summary{font:600 16px var(--body);padding:12px 4px}
  .mobile-menu summary>span{font-size:24px}
  .mobile-menu nav{width:220px;top:52px;padding:10px}
  .mobile-menu nav a{font-size:19px;font-weight:600;padding:14px 12px}
}
/* Os pontinhos laterais de navegação ficaram redundantes com o menu fixo e cobriam a borda dos cards */
.chapter-dock{display:none}

/* ---------- Textos pequenos mais legíveis ---------- */
.camera-hud{font-size:10px}
.section-register{font-size:12px;letter-spacing:.08em}
.eyebrow,.hero-copy>.eyebrow,.about-copy>.eyebrow{font-size:12px}
.hero-description h2{font-size:clamp(24px,2vw,30px)}
.hero-description p{font-size:16px;line-height:1.65}
.hero-motion-hint{font-size:11px}
.section-aside p,.process-header>p{font-size:15px;line-height:1.55}
.process-grid article>.mono{font-size:12px}
.process-grid h3{font-size:28px}
.process-grid p{font-size:16px;line-height:1.6;max-width:300px}
.about-tags span{font-size:13px;padding:9px 14px}
.flipbook-stage svg text{font-size:12px}
.flipbook-note{font-size:12px}
.flipbook-side-label{font-size:10px}
.flipbook-play{font-size:13px}
.featured-section .demo-note,.demo-note{font-size:15px}
@media(max-width:760px){
  .section-register{font-size:10px}
  .eyebrow,.hero-copy>.eyebrow{font-size:11px}
  .hero-description p{font-size:15px}
  .process-grid p{font-size:15px}
}

/* ---------- Botões maiores ---------- */
.button,.hero-actions .button{min-height:58px;padding:16px 26px;gap:22px;font-size:16px;font-weight:600;border-radius:4px}
.button span{font-size:24px;transition:transform .25s}
.button:hover span{transform:translate(3px,-3px)}
.text-link,.hero-actions .text-link{font-size:16px;gap:12px}
.text-link span{transition:transform .25s}
.text-link:hover span{transform:translateX(5px)}
.contact-button i{transition:transform .25s}
.contact-button:hover i{transform:translate(4px,-4px)}
@media(max-width:760px){.button,.hero-actions .button{font-size:15px;padding:14px 20px;min-height:54px}.text-link,.hero-actions .text-link{font-size:15px}}

/* ---------- Rodapé arrumado ---------- */
.site-footer{flex-wrap:wrap;row-gap:18px}
.site-footer>.mono{font-size:11px}
.footer-brand .brand-caption{font-size:10px}
.footer-controls button,.footer-controls a{font-size:11px;white-space:nowrap}
.footer-rights{order:9;font-size:13px}
.intro-replay{font-size:11px}

/* ---------- Animações: cards do Works entram em sequência ---------- */
.work-card.pre-reveal{opacity:0;transform:translateY(46px) scale(.97)}
.work-card.is-in{opacity:1;transform:none;transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1);transition-delay:var(--reveal-delay,0ms)}
.work-card-button{transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s,border-color .2s}
.work-card-button:hover,.work-card-button:focus-visible{transform:translateY(-6px);box-shadow:0 22px 44px -18px rgba(0,0,0,.55);border-color:var(--lime)}
.work-card-info strong{transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.work-card-button:hover .work-card-info strong{transform:translateY(-4px)}
/* Logos de "Worked with" e cards do carrossel: entrada suave */
.clients-heading.reveal,.section-heading.reveal{transition-duration:.9s}
body.reduce-motion .work-card.pre-reveal{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.work-card.pre-reveal{opacity:1;transform:none}.site-header{transition:none}}

/* ajustes finos */
.site-header{background:#fff;box-shadow:0 0 0 100vmax #fff}
.work-card-badge{top:20px;right:20px;padding:8px 14px;font-size:12px}
.about-copy .copy-email{display:inline-flex;align-items:center;gap:10px;margin-top:22px;padding:12px 18px;border:1.5px solid var(--ink);border-radius:999px;font-size:13px;letter-spacing:.08em;transition:background .2s,color .2s}
.about-copy .copy-email:hover{background:var(--ink);color:var(--paper)}
.about-copy .copy-email>span{margin-left:0;font-size:16px}
.reel-card .project-number{max-width:calc(100% - 200px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Contato: foto maior, ocupando melhor a coluna */
.about-section{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6%;align-items:center}
.about-art{max-width:600px;padding:24px 18px}
.mascot-sticker{width:clamp(110px,11vw,150px);right:-26px;bottom:44px}
.about-photo figcaption{font-size:13px;padding:14px 4px 16px}
@media(max-width:900px){.about-art{max-width:420px;width:88%}.mascot-sticker{width:96px;right:-16px;bottom:64px}}
@media(max-width:900px){.about-section{grid-template-columns:1fr;gap:44px}.about-art{justify-self:center;margin:0 auto}}

/* Naipe de espadas (♠) no lugar do asterisco: girar ficava estranho, então ele só pulsa */
.brand-star,.art-star,.section-asterisk,.opening-star,.mascot-spark,.client-sep{font-family:'Segoe UI Symbol','Noto Sans Symbols 2','Apple Symbols',sans-serif}
.section-asterisk,.art-star,.opening-star{animation:spade-pulse 3.2s ease-in-out infinite!important}
@keyframes spade-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
.brand-star{display:inline-block;transform:translateY(-2px) scale(.82)}
.ticker span{font-size:34px;line-height:1;transform:translateY(-1px)}

/* Botões de trocar animação: maiores e mais chamativos */
.clip-picker:not(.is-tiered){gap:12px;padding:18px 26px;flex-wrap:wrap}
.clip-option{display:inline-flex;align-items:center;gap:10px;padding:14px 22px;border:2px solid var(--ink);border-radius:999px;background:var(--paper);color:var(--ink);font:700 15px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;cursor:pointer;box-shadow:3px 3px 0 var(--ink);transition:transform .15s,box-shadow .15s,background .15s,color .15s}
.clip-option-icon{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--ink);color:var(--paper);font-size:9px;padding-left:2px;transition:background .15s}
.clip-option:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--lime)}
.clip-option.active{background:var(--lime);border-color:var(--lime);color:#fff;box-shadow:3px 3px 0 var(--ink)}
.clip-option.active .clip-option-icon{background:#fff;color:var(--lime)}
.clip-option:active{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--ink)}
@media(max-width:760px){.clip-picker:not(.is-tiered){padding:14px;gap:8px}.clip-option{font-size:13px;padding:12px 16px}}