/* =========================================================
   Narro · página Cases (layout do print aprovado em 26/09)
   Fundo roxo com o case "em foco" desfocado; cabeçalho em branco; título, texto, "Em foco" e a fileira de trabalhos.
   Usa os tokens de style.css.
   ========================================================= */
body.page-cases{--bg:#1f0a33;--cs-base:#29103f;background:var(--bg);color:#fff}
.page-cases #smooth-content{position:relative}

/* cabeçalho em branco nesta página */
.page-cases .site-header,.page-cases .site-header .brand,.page-cases .brand__tagline,.page-cases .nav-toggle{color:#fff}

/* fundo: a imagem do case em foco, desfocada, com o roxo por cima (forte à esquerda, onde está o texto) */
/* o fundo desce além da primeira dobra e se dissolve no roxo da página: sem linha de divisão até a grade de todos os cases */
.cs-backdrop{position:absolute;left:0;right:0;top:0;height:calc(max(100svh,760px) + 45vh);overflow:hidden;z-index:0;pointer-events:none;background:var(--cs-base);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 58%,rgba(0,0,0,.55) 78%,transparent 100%);mask-image:linear-gradient(180deg,#000 0%,#000 58%,rgba(0,0,0,.55) 78%,transparent 100%)}
.cs-backdrop__img{will-change:opacity,transform;position:absolute;left:-4vw;top:-4vw;width:calc(100% + 8vw);height:calc(100% + 8vw);max-width:none;object-fit:cover;object-position:70% 30%;filter:blur(9px) saturate(.95) brightness(.6);opacity:.8}
/* troca do fundo: duas camadas; a nova entra por cima com desfoque que assenta */
.cs-backdrop__img.is-next{opacity:0}
.cs-backdrop__tint{position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(41,16,63,.96) 0%,rgba(41,16,63,.88) 30%,rgba(41,16,63,.4) 60%,rgba(41,16,63,.25) 100%),
  linear-gradient(180deg,rgba(31,10,51,0) 45%,rgba(31,10,51,.6) 75%,var(--bg) 100%)}

/* dobra 1 */
.cs{position:static}
.cs-feature{position:relative;z-index:1}
.page-cases .site-header{z-index:20}
/* a dobra ocupa a tela inteira; no pé dela, o indicador "Ver mais cases" (.cs-scroll) */
.cs-feature{min-height:calc(max(100svh,760px) - clamp(70px,9vh,110px));display:flex;flex-direction:column;justify-content:space-between;padding-top:clamp(20px,4vh,52px);padding-bottom:calc(clamp(76px,10vh,112px) + clamp(34px,2.5vw,56px))}   /* 09/10/2026: + o que os cards subiram, para "Explore os trabalhos" ficar no mesmo lugar */
.cs-kicker{font-size:clamp(11px,.94vw,17px);font-weight:500;letter-spacing:.3em;text-transform:uppercase;color:var(--green)}
.cs-feature__top{display:flex;justify-content:space-between;align-items:flex-end;gap:40px}
.cs-feature__title{margin-top:clamp(18px,3vh,40px);font-size:clamp(40px,4.2vw,82px);line-height:1.1;letter-spacing:-.02em;font-weight:300;color:#fff}
.cs-feature__title span{display:block;white-space:nowrap}
.cs-feature__title strong{font-weight:700;letter-spacing:-.03em}
.cs-feature__title em{font-style:normal;color:var(--green)}
.cs-feature__text{width:min(780px,44vw);margin-top:clamp(20px,3.5vh,44px);font-size:clamp(15px,1.15vw,22px);font-weight:300;line-height:1.6;color:rgba(255,255,255,.92)}
.cs-focus{flex:none;width:clamp(200px,17vw,330px);margin-right:clamp(0px,7vw,190px);padding-bottom:4px}
.cs-focus .cs-kicker{font-size:clamp(10px,.84vw,16px)}
.cs-focus__name{margin-top:clamp(8px,1.4vh,16px);font-size:clamp(28px,2.7vw,52px);font-weight:700;line-height:1.05;letter-spacing:-.01em;text-transform:uppercase;color:#fff}
.cs-focus__cat{margin-top:clamp(10px,1.6vh,18px);font-size:clamp(13px,1.05vw,20px);font-weight:300;color:rgba(255,255,255,.75)}
/* fato positivo do cliente (fonte pública, ver LEIA-ME) */
.cs-focus__fact{max-width:30ch;margin-top:clamp(12px,1.8vh,20px);font-size:clamp(12px,.86vw,15px);font-weight:300;line-height:1.5;color:rgba(255,255,255,.9)}

/* fileira de trabalhos */
.cs-feature__works{margin-top:clamp(28px,4.5vh,64px)}
.cs-works{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:clamp(12px,1.35vw,26px);margin-top:clamp(22px,1.9vw,40px);align-items:end}   /* 09/10/2026: mais perto de "Explore os trabalhos" (era clamp(56px,4.4vw,96px), espaço para o card crescer sem cobrir o rótulo; agora o card ampliado pode passar por cima do rótulo) */
.cs-work{position:relative}
.cs-work.is-up{z-index:5}
.cs-work .case__btn{display:block;width:100%;aspect-ratio:16/9;overflow:visible;background:none;cursor:pointer}
/* o card cresce a partir da base (os das pontas, a partir do canto), sem distorção: escala uniforme via GSAP (cases.js) */
.cs-work{will-change:transform}
.cs-work .case__media{position:absolute;inset:0;display:block;overflow:hidden;background:#1d0039;transform-origin:50% 100%;will-change:transform;backface-visibility:hidden}
.cs-work.is-up .case__media{box-shadow:0 30px 60px -24px rgba(0,0,0,.6)}
.cs-work .case__img{filter:none}
.cs-work__name{display:block;margin-top:clamp(12px,2.4vh,26px);font-size:clamp(14px,1.25vw,24px);font-weight:300;letter-spacing:-.005em;color:#fff;transition:color .45s ease}
.cs-work.is-on .cs-work__name{color:var(--green);font-weight:500}
/* "Ver mais cases": no pé da primeira tela, só a bolinha verde-limão, centralizada, com a setinha descendo sem parar. Clique rola até #todos (cases.js) */
.cs-scroll{position:absolute;left:0;right:0;bottom:clamp(30px,5vh,56px);   /* 09/10/2026: subiu (era clamp(14px,2.2vh,26px)) */
width:max-content;margin-inline:auto;display:flex;align-items:center;padding:6px;color:#fff;z-index:2}
.cs-scroll__dot{position:relative;flex:none;display:grid;place-items:center;width:clamp(32px,2.3vw,40px);aspect-ratio:1;border-radius:50%;background:var(--green);overflow:hidden;transition:transform .5s var(--ease-out)}
.cs-scroll__dot svg{width:44%;height:44%;fill:none;stroke:var(--purple-deep);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;animation:csArrow 1.9s cubic-bezier(.65,0,.35,1) infinite}
/* a setinha desce, sai por baixo da bolinha e volta por cima, com um respiro parada no centro */
@keyframes csArrow{0%,30%{transform:translateY(0)}48%{transform:translateY(135%)}48.01%{transform:translateY(-135%)}70%{transform:translateY(0)}80%{transform:translateY(12%)}90%,100%{transform:translateY(0)}}
.cs-scroll:is(:hover,:focus-visible) .cs-scroll__dot{transform:scale(1.1)}
@media(prefers-reduced-motion:reduce){.cs-scroll__dot svg{animation:none}}
.cs-all-link{display:flex;align-items:center;gap:14px;width:max-content;margin:clamp(40px,7.5vh,90px) clamp(0px,6.5vw,128px) 0 auto;font-size:clamp(11px,.84vw,16px);font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:#fff}
.cs-all-link i{position:relative;width:34px;height:1px;background:var(--green);transition:width .5s var(--ease-out)}
.cs-all-link i::after{content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;border-right:1px solid var(--green);border-bottom:1px solid var(--green);transform:rotate(-45deg)}
.cs-all-link:hover{color:var(--green)}
.cs-all-link:hover i{width:48px}

@media(max-width:900px){
  .cs-backdrop__img{filter:none}   /* 12/10/2026: a imagem já vem desfocada e escurecida (case-XX-bg.webp) */
  /* celular: tudo mais junto; a fileira vira uma esteira que roda sozinha (cases.js) e o card do centro é o "Em foco" */
  .cs-backdrop{height:calc(100svh + 30vh)}
  .cs-feature{min-height:0;justify-content:flex-start;padding-top:clamp(20px,3.5vh,32px);padding-bottom:clamp(28px,5vh,44px)}
  .cs-feature__top{flex-direction:column;align-items:flex-start;gap:26px}
  .cs-feature__title{margin-top:14px;font-size:clamp(34px,9.6vw,46px);line-height:1.1}
  .cs-feature__title span{white-space:normal}
  .cs-feature__text{width:100%;margin-top:16px;font-size:15px;line-height:1.6;letter-spacing:.005em}
  .cs-focus{width:auto;margin-right:0}
  .cs-focus__name{margin-top:8px;font-size:clamp(26px,7.4vw,34px)}
  .cs-focus__cat{margin-top:6px;font-size:13px}
  .cs-focus__fact{font-size:13px;max-width:34ch}
  .cs-feature__works{width:100%;margin-top:34px;margin-inline:0;overflow:hidden}
  .cs-feature__works > .cs-kicker{padding-inline:var(--gutter)}
  .cs-scroll{display:none}   /* no celular a rolagem é natural e a esteira já mostra que há mais */
  .cs-works{display:flex;width:max-content;gap:12px;margin-top:16px;padding:14px var(--gutter) 4px;touch-action:pan-y;user-select:none;-webkit-user-select:none}
  /* 12/10/2026: rolagem nativa (encaixe no centro, até o último card) */
  .cs-works.is-native{width:auto;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;touch-action:auto;scrollbar-width:none;
    padding-left:var(--gutter);padding-right:calc(100vw - min(62vw,340px) - var(--gutter));scroll-padding-left:var(--gutter);transform:none!important}   /* 1º card colado na margem, como o resto da página */
  .cs-works.is-native::-webkit-scrollbar{display:none}
  .cs-works.is-native .cs-work{scroll-snap-align:start;scroll-snap-stop:normal}
  .cs-work{flex:0 0 62vw;max-width:340px}
  .cs-work .case__media{transform-origin:50% 50%;transition:transform .7s var(--ease-out)}
  .cs-work.is-on .case__media{transform:scale(1.06)}
  .cs-work__name{margin-top:12px;font-size:15px}
  .cs-work img{-webkit-user-drag:none;pointer-events:none}
  .cs-todos{padding-top:8px}
}


/* DOBRA 2 · todos os cases: a grade grande da home, de ponta a ponta */
.cs-todos{position:relative;z-index:1;background:transparent;padding-top:clamp(40px,7vh,90px);padding-bottom:0}
.cs-todos__head{margin-bottom:clamp(22px,4vh,40px)}

/* entrada: nada aparece pronto antes da animação */
html.cs-wait .cs-feature,html.cs-wait .page-cases .site-header .container,html.cs-wait .cs-backdrop{visibility:hidden}
.cs-ch{display:inline-block;will-change:transform}
.cs-focus__name{white-space:nowrap}