/* 06-aulas · carrossel das 8 funções do Chip Editor. Prefixo cur- */

/* ---------- seção ---------- */
.cur{position:relative;isolation:isolate;overflow:hidden;padding:105px 0 96px;background:radial-gradient(ellipse 70% 60% at 50% 78%,rgba(255,106,43,.11),transparent 70%),var(--bg)}
.cur::before{content:'';position:absolute;left:50%;top:0;width:min(900px,90%);height:1px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,rgba(255,176,136,.28),transparent)}
.cur .sec-head{margin-bottom:20px}
.cur .pill{background:linear-gradient(135deg,rgba(255,106,43,.14),rgba(255,106,43,.03));box-shadow:0 0 30px rgba(255,106,43,.12);letter-spacing:.14em;font-size:12px}
.cur .live-dot{filter:drop-shadow(0 0 6px var(--v1))}
.cur h2{font-size:clamp(38px,4.6vw,64px);letter-spacing:-.055em;margin-bottom:20px}
.cur h2 em{display:block}
.cur .sub{font-size:17px;line-height:1.65;max-width:560px;text-wrap:pretty}
.cur .sub b{display:block}

/* ---------- faixa ----------
   .cur-rail: foco, cursor e touch-action (sem máscara, pra o anel de foco não ser cortado).
   .cur-clip: recorte + máscara nas pontas; vira o scroller nativo no modo estático. */
.cur-rail{--w:clamp(214px,18.2vw,262px);--gap:clamp(14px,1.5vw,22px);--fade:8%;position:relative;cursor:grab;touch-action:pan-y}
.cur-rail:focus-visible{outline:3px solid var(--v1);outline-offset:-3px;border-radius:0}
.cur-rail.is-dragging{cursor:grabbing}
.cur-rail.is-dragging .cc,.cur-rail.is-dragging .cc::before{transition:none}
.cur-clip{overflow:hidden;padding:48px 0 76px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--fade),#000 calc(100% - var(--fade)),transparent);mask-image:linear-gradient(90deg,transparent,#000 var(--fade),#000 calc(100% - var(--fade)),transparent)}
.cur-track{display:flex;align-items:stretch;gap:var(--gap);width:max-content;margin:0;padding:0;list-style:none;will-change:transform}

/* fileira rolável nativa: sem JS ou com movimento reduzido (o dedo precisa rolar na horizontal) */
.cur-rail.is-static{cursor:auto;touch-action:pan-x pan-y}
.cur-rail.is-static .cur-clip{overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;-webkit-mask:none;mask:none;scrollbar-width:thin;scrollbar-color:rgba(255,106,43,.45) transparent;
  padding-inline:max(calc(var(--gutter)/2),calc((100% - 1200px)/2));scroll-padding-inline:max(calc(var(--gutter)/2),calc((100% - 1200px)/2))}
.cur-rail.is-static .cur-track{will-change:auto}
.cur-rail.is-static .cc{scroll-snap-align:start}
.cur-rail.is-static .cur-track::after{content:'';flex:none;width:1px}

/* ---------- card ----------
   Só transform anima no card; a sombra do estado em foco vive num pseudo que só troca opacity. */
.cc{flex:none;width:var(--w);aspect-ratio:2/3;height:auto;position:relative;isolation:isolate;border-radius:18px;border:0;margin:0;padding:0;background:#1a0f0c;container-type:inline-size;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;
  box-shadow:0 22px 50px rgba(5,2,1,.6),0 0 0 1px rgba(255,176,136,.14);
  transition:transform .45s var(--e-out)}
.cc::before{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .45s var(--e-out);
  box-shadow:0 26px 56px rgba(5,2,1,.65),0 0 0 1px rgba(255,176,136,.4),0 0 40px rgba(255,106,43,.2)}
.cc::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:3;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.12) 48%,transparent 60%) no-repeat;background-size:260% 100%;background-position:120% 0;transition:background-position .9s var(--e-out)}
.cc.is-center{transform:scale(1.02)}
.cc.is-center::before,.cc.is-playing::before{opacity:1}
/* troca de card na volta da faixa (clone pelo equivalente): o estado passa sem refazer a transição */
.cc.cur-notr,.cc.cur-notr::before,.cc.cur-notr .cc-play{transition:none}

/* capa: quadro do vídeo editado (9:16) recortado na parte que mostra a função; --cur-pos escolhe a altura do recorte */
.cc-art{position:absolute;inset:0 0 auto;height:60%;overflow:hidden;background:#150b09;border-top-left-radius:inherit;border-top-right-radius:inherit}
.cc-art img,.cc-art .cc-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--cur-pos,50% 50%);pointer-events:none;user-select:none;-webkit-user-drag:none;transform:translate3d(calc(var(--cur-dx,0) * -6px),0,0) scale(var(--cur-zoom,1.06))}
.cc-art .cc-vid{z-index:1;opacity:0;transition:opacity .35s var(--e-out)}
.cc-art .cc-vid.is-on{opacity:1}
.cc-art::after{content:'';position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,transparent 58%,rgba(26,15,12,.66) 84%,#1a0f0c 100%)}

/* linha do número: número grande à esquerda, selo à direita */
.cc-num{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:10px 0 6px}

/* selo de "tem vídeo"; some enquanto o vídeo toca */
.cc-play{position:relative;flex:none;width:34px;height:34px;border-radius:50%;pointer-events:none;background:rgba(255,106,43,.12);box-shadow:inset 0 0 0 1px rgba(255,176,136,.42);transition:opacity var(--d-ui) var(--e-out),transform var(--d-ui) var(--e-out)}
.cc-play::before{content:'';position:absolute;left:50%;top:50%;width:0;height:0;border-style:solid;border-width:6px 0 6px 10px;border-color:transparent transparent transparent #ffe2d2;transform:translate(-36%,-50%)}
.cc.is-playing .cc-play{opacity:0;transform:scale(.7)}
.cur-rail.is-static .cc-play{display:none} /* fileira parada não toca vídeo */

/* trilha e efeitos: barras de volume no lugar do selo (o som não aparece em vídeo mudo) */
.cc-eq{flex:none;display:flex;align-items:flex-end;gap:3px;width:34px;height:34px;padding:9px 8px;border-radius:50%;pointer-events:none;background:rgba(255,106,43,.12);box-shadow:inset 0 0 0 1px rgba(255,176,136,.42)}
.cc-eq i{flex:1;height:100%;border-radius:2px;background:linear-gradient(180deg,#ffe2d2,var(--v2));transform-origin:50% 100%;transform:scaleY(var(--cur-h,.5));animation:cur-eq 1.1s var(--e-inout) infinite alternate;animation-play-state:paused}
.cc-eq i:nth-child(1){--cur-h:.45;animation-duration:.9s}
.cc-eq i:nth-child(2){--cur-h:.85;animation-duration:1.25s;animation-delay:-.4s}
.cc-eq i:nth-child(3){--cur-h:.6;animation-duration:.8s;animation-delay:-.2s}
.cc-eq i:nth-child(4){--cur-h:1;animation-duration:1.4s;animation-delay:-.7s}
.cc-eq i:nth-child(5){--cur-h:.5;animation-duration:1s;animation-delay:-.5s}
.cur-rail.is-live .cc.is-center .cc-eq i{animation-play-state:running}
.cur-rail.is-paused.is-live .cc.is-center .cc-eq i,.cur-rail.is-paused.is-live .cc:hover .cc-eq i{animation-play-state:paused} /* o botão de pausa para as barras também (vence o centro e o hover) */
@keyframes cur-eq{from{transform:scaleY(.22)}to{transform:scaleY(var(--cur-h,.5))}}

.cc-meta{position:absolute;left:8%;right:8%;bottom:7.5%;z-index:2}
.cc-meta small{display:flex;align-items:center;gap:8px;font:700 11px/1 var(--fb);letter-spacing:.28em;color:#ffe2d2}
.cc-meta small svg{width:14px;height:14px;flex:none}
.cc-meta small::after{content:'';width:28px;height:1px;background:linear-gradient(90deg,var(--v1),transparent)}
.cc-meta b{display:block;margin:0;font:800 clamp(46px,22cqw,60px)/.92 var(--fh);letter-spacing:-.04em;background:linear-gradient(180deg,#fff 15%,#ffb088 90%);-webkit-background-clip:text;background-clip:text;color:transparent}
.cc-meta strong{display:block;font:600 clamp(16px,7.8cqw,20px)/1.16 var(--fb);letter-spacing:-.02em;color:#fff;text-wrap:balance;min-height:2.32em} /* sempre 2 linhas: rótulo e número na mesma altura nos 8 cards */

/* ---------- controle ---------- */
.cur-ctl{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:-34px}
.cur-toggle{display:inline-grid;place-items:center;width:46px;height:46px;border-radius:50%;border:1px solid var(--line2);background:rgba(255,255,255,.03);color:#ffe2d2;cursor:pointer;transition:background .2s var(--e-out),border-color .2s var(--e-out),transform .2s var(--e-out)}
.cur-toggle:hover{background:rgba(255,106,43,.18);border-color:rgba(255,176,136,.5)}
.cur-toggle:active{transform:scale(.94)}
.cur-toggle:focus-visible{outline:3px solid var(--v1);outline-offset:4px}
.cur-toggle svg{width:18px;height:18px}
.cur-toggle .i-play,.cur-toggle[aria-pressed=true] .i-pause{display:none}
.cur-toggle[aria-pressed=true] .i-play{display:block}
.cur-toggle[hidden],.cur-pos[hidden],.cur-hint[hidden]{display:none}
.cur-pos{font:700 10px/1 var(--fb);letter-spacing:.2em;color:var(--mut2);font-variant-numeric:tabular-nums}
.cur-pos.is-swap{animation:cur-swap .2s var(--e-out)}
.cur-hint{margin:6px 0 0;padding:0 18px;font:500 13px/1.5 var(--fb);color:var(--mut);text-align:center;text-wrap:balance}
/* a dica troca pelo tipo de ponteiro (mouse ou dedo), não pela largura da tela */
.cur-hint-mouse{display:none}
.cur-hint-ic{display:inline-block;position:relative;width:18px;height:18px;margin:0 2px;vertical-align:-4px;border-radius:50%;background:rgba(255,106,43,.12);box-shadow:inset 0 0 0 1px rgba(255,176,136,.42)}
.cur-hint-ic::before{content:'';position:absolute;left:50%;top:50%;width:0;height:0;border-style:solid;border-width:3.5px 0 3.5px 6px;border-color:transparent transparent transparent #ffe2d2;transform:translate(-36%,-50%)}
.cur-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
@keyframes cur-swap{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* ---------- media queries (todas no fim) ---------- */
/* hover (só mouse) */
@media (hover:hover) and (pointer:fine){
  .cc:hover,.cc.is-center:hover{transform:translateY(-10px) scale(1.035)}
  .cc:hover::before{opacity:1}
  .cc:hover::after{background-position:-40% 0}
  .cur-rail.is-live .cc:hover .cc-eq i{animation-play-state:running}
  .cur-hint-mouse{display:inline}
  .cur-hint-toque{display:none}
}

/* fileira parada alinhada ao .wrap largo */
@media (min-width:1600px){
  .cur-rail.is-static .cur-clip{padding-inline:max(calc(var(--gutter)/2),calc((100% - 1260px)/2));scroll-padding-inline:max(calc(var(--gutter)/2),calc((100% - 1260px)/2))}
}

/* breakpoints únicos */
@media (max-width:1050px){
  .cur{padding:84px 0 80px}
}
@media (max-width:760px){
  .cur{padding:64px 0 70px}
  .cur .sec-head{margin-bottom:4px}
  .cur h2{font-size:clamp(33px,9.4vw,42px);line-height:1.08}
  .cur h2 em{display:inline}
  .cur .sub{font-size:15px;max-width:440px}
  .cur-rail{--w:min(58vw,236px);--gap:12px}
  .cur-clip{padding:38px 0 62px}
  .cc{border-radius:16px}
  .cur-ctl{margin-top:-30px}
  .cur-toggle{width:44px;height:44px}
  /* modo curto: as 8 funções ficam, só aperta o respiro */
  html.mobile-curto .cur{padding:54px 0 58px}
  html.mobile-curto .cur-clip{padding:30px 0 58px}
}
@media (max-width:380px){
  .cur-rail{--w:min(62vw,236px)}
}

/* movimento reduzido: fileira rolável parada, com os cards inteiros (fica por último pra vencer o hover) */
@media (prefers-reduced-motion:reduce){
  .cc,.cc::before,.cc::after,.cc-art .cc-vid,.cc-play{transition:none}
  .cc:hover,.cc.is-center{transform:none}
  .cc-eq i,.cur-pos.is-swap{animation:none}
  .cc-art img{transform:scale(var(--cur-zoom,1.06))}
}