/* FONTE LOCAL. Antes vinha de fonts.googleapis.com: pedido a terceiro numa página com
   aviso de cookies, e 0,75s de rede. São os MESMOS arquivos que a animação vertical já
   trazia; hoje as duas apontam para media/ daqui. */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("media/jakarta-cyrillic-ext.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("media/jakarta-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("media/jakarta-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("media/jakarta-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("media/jakarta-cyrillic-ext.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("media/jakarta-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("media/jakarta-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("media/jakarta-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Clipster — animação de cortes. Fundo 100% transparente em todos os níveis. */

html, body { margin: 0; padding: 0; background: transparent; }
*, *::before, *::after { box-sizing: border-box; }

.clip-wrap {
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
}

.clip-stage {
  position: relative;
  width: min(100vw, 177.78vh);
  height: min(56.25vw, 100vh);
  container-type: size;
  overflow: hidden;
  background: transparent;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}

.clip-col {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 4.6cqw;
}

/* A regra da .clip-headline saiu junto com o elemento (ver index.html). */

/* ---------- player principal ---------- */
.clip-player {
  position: relative;
  width: 43cqw;
  height: 24.19cqw;
  border-radius: 1.5cqw;
  overflow: hidden;
  background: #0d1b2e;
  box-shadow: 0 2.4cqw 4.6cqw rgba(36,32,86,.26),
              0 0 0 .42cqw #ffffff,
              0 0 0 .55cqw rgba(91,91,242,.18);
}

.clip-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.clip-scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to top, rgba(6,12,24,.62) 0%, rgba(6,12,24,.12) 30%, rgba(6,12,24,0) 52%);
}
.clip-scrim-sm {
  background: linear-gradient(to top, rgba(6,12,24,.55), rgba(6,12,24,0) 46%);
}

/* selo do YouTube */
.clip-yt {
  position: absolute;
  top: 1cqw;
  right: 1cqw;
  width: 2.6cqw;
  height: 1.85cqw;
  border-radius: .5cqw;
  background: #ff0000;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 .25cqw .6cqw rgba(0,0,0,.35);
}
.clip-yt i {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: .46cqw 0 .46cqw .78cqw;
  border-color: transparent transparent transparent #fff;
  margin-left: .12cqw;
}
.clip-yt-sm {
  top: .5cqw;
  right: .5cqw;
  width: 1.5cqw;
  height: 1.06cqw;
  border-radius: .28cqw;
  box-shadow: none;
}
.clip-yt-sm i {
  border-width: .26cqw 0 .26cqw .44cqw;
  margin-left: .07cqw;
}

/* etiqueta de tempo */
.clip-live {
  position: absolute;
  top: 1cqw;
  left: 1cqw;
  display: flex;
  align-items: center;
  gap: .45cqw;
  padding: .4cqw .8cqw;
  border-radius: 1.4cqw;
  background: rgba(8,14,26,.6);
  backdrop-filter: blur(3px);
  font-weight: 700;
  font-size: .82cqw;
  letter-spacing: .05em;
  color: #fff;
}
.clip-dot {
  width: .5cqw;
  height: .5cqw;
  border-radius: 50%;
  background: #ff2d2d;
  animation: clipRecDot 1.4s ease-in-out infinite;
}
@keyframes clipRecDot { 0%,100% { opacity: 1; } 50% { opacity: .3; } }

/* linha do tempo */
.clip-timeline { position: absolute; left: 1.2cqw; right: 1.2cqw; bottom: 1.2cqw; }
.clip-track {
  position: relative;
  height: .5cqw;
  border-radius: 1cqw;
  background: rgba(255,255,255,.28);
}
.clip-progress {
  position: absolute;
  left: 0; top: 0;
  width: 40%;
  height: 100%;
  border-radius: 1cqw;
  background: #ff0000;
}
.clip-seg {
  position: absolute;
  top: 50%;
  width: .2cqw;
  height: 1.2cqw;
  border-radius: .2cqw;
  translate: -50% -50%;
  /* estado final: marcador aceso */
  opacity: 1;
  transform: scaleY(2.1);
  background: #5b5bf2;
  box-shadow: 0 0 .7cqw #5b5bf2;
}
.clip-seg1 { left: 14%; }
.clip-seg2 { left: 28%; }
.clip-seg3 { left: 42%; }
.clip-seg4 { left: 56%; }
.clip-seg5 { left: 70%; }
.clip-seg6 { left: 84%; }

.clip-playhead {
  position: absolute;
  left: 40%;
  top: 50%;
  width: 1.05cqw;
  height: 1.05cqw;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 .18cqw #ff0000, 0 .2cqw .5cqw rgba(0,0,0,.4);
  translate: -50% -50%;
}

/* ---------- linhas conectoras ---------- */
.clip-links {
  width: 92.2cqw;
  height: 7cqw;
  margin-top: .4cqw;
  margin-bottom: .5cqw;
  overflow: visible;
  display: block;
}
.clip-stem, .clip-branch {
  fill: none;
  stroke: #5b5bf2;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0; /* estado final: desenhada */
}
.clip-stem { stroke-width: 3.4; }
.clip-branch { stroke-width: 3; }
.clip-hub { fill: #5b5bf2; opacity: 1; }

/* ---------- fileira de cortes ---------- */
.clip-row {
  position: relative;
  display: flex;
  gap: 1.4cqw;
  justify-content: center;
}
.clip-card {
  position: relative;
  width: 14.2cqw;
  height: 7.99cqw;
  border-radius: 1cqw;
  overflow: hidden;
  background: #0d1b2e;
  box-shadow: 0 .8cqw 1.8cqw rgba(18,30,60,.24);
}
.clip-dur {
  position: absolute;
  bottom: .55cqw;
  right: .55cqw;
  padding: .22cqw .55cqw;
  border-radius: .45cqw;
  background: rgba(7,12,24,.82);
  font-weight: 700;
  font-size: .82cqw;
  letter-spacing: .02em;
  color: #fff;
}

/* ESPERA — o estado em que a cena NASCE (ver index.html).
   Invisível, sem quadro congelado de vídeo nenhum. animation.js troca para
   data-intro="build" quando as mídias estão decodificadas, e aí a montagem roda
   inteira: player, linhas e os 6 cortes entrando em sequência. Foi decisão do
   dono em 06/08: melhor um espaço vazio por um instante do que uma composição
   parada que parece travada. */
.clip-stage[data-intro="espera"] { opacity: 0; }
.clip-stage[data-intro="espera"] * { animation: none !important; }

/* =========================================================
   Montagem original — só roda com data-intro="build".
   No padrão ("hold") a cena já abre composta e parada.
   ========================================================= */
.clip-stage[data-intro="build"] .clip-player   { opacity: 0; animation: clipPlayerIn 5s ease-out forwards; }
.clip-stage[data-intro="build"] .clip-stem     { animation: clipStem 5s ease-out forwards; }
.clip-stage[data-intro="build"] .clip-hub      { opacity: 0; animation: clipHub 5s ease-out forwards; }
.clip-stage[data-intro="build"] .clip-b1       { animation: clipB1 5s ease-out forwards; }
.clip-stage[data-intro="build"] .clip-b2       { animation: clipB2 5s ease-out forwards; }
.clip-stage[data-intro="build"] .clip-b3       { animation: clipB3 5s ease-out forwards; }
.clip-stage[data-intro="build"] .clip-b4       { animation: clipB4 5s ease-out forwards; }
.clip-stage[data-intro="build"] .clip-b5       { animation: clipB5 5s ease-out forwards; }
.clip-stage[data-intro="build"] .clip-b6       { animation: clipB6 5s ease-out forwards; }
.clip-stage[data-intro="build"] .clip-seg1     { animation: clipSeg1 5s ease-out forwards; }
.clip-stage[data-intro="build"] .clip-seg2     { animation: clipSeg2 5s ease-out forwards; }
.clip-stage[data-intro="build"] .clip-seg3     { animation: clipSeg3 5s ease-out forwards; }
.clip-stage[data-intro="build"] .clip-seg4     { animation: clipSeg4 5s ease-out forwards; }
.clip-stage[data-intro="build"] .clip-seg5     { animation: clipSeg5 5s ease-out forwards; }
.clip-stage[data-intro="build"] .clip-seg6     { animation: clipSeg6 5s ease-out forwards; }
.clip-stage[data-intro="build"] .clip-card1    { opacity: 0; animation: clipCard1 5s ease-out forwards; }
.clip-stage[data-intro="build"] .clip-card2    { opacity: 0; animation: clipCard2 5s ease-out forwards; }
.clip-stage[data-intro="build"] .clip-card3    { opacity: 0; animation: clipCard3 5s ease-out forwards; }
.clip-stage[data-intro="build"] .clip-card4    { opacity: 0; animation: clipCard4 5s ease-out forwards; }
.clip-stage[data-intro="build"] .clip-card5    { opacity: 0; animation: clipCard5 5s ease-out forwards; }
.clip-stage[data-intro="build"] .clip-card6    { opacity: 0; animation: clipCard6 5s ease-out forwards; }

@keyframes clipPlayerIn { 0% { opacity: 0; transform: translateY(1.2cqw) scale(.985); } 8% { opacity: 1; transform: none; } 100% { opacity: 1; transform: none; } }
@keyframes clipFadeUp   { 0% { opacity: 0; transform: translateY(.9cqw); } 8% { opacity: 1; transform: none; } 100% { opacity: 1; transform: none; } }

@keyframes clipStem { 0% { stroke-dashoffset: 1; } 4% { stroke-dashoffset: 1; } 14% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; } }
@keyframes clipHub  { 0%,12% { opacity: 0; } 16% { opacity: 1; } 100% { opacity: 1; } }

@keyframes clipB1 { 0%,10% { stroke-dashoffset: 1; } 22% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; } }
@keyframes clipB2 { 0%,24% { stroke-dashoffset: 1; } 36% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; } }
@keyframes clipB3 { 0%,38% { stroke-dashoffset: 1; } 50% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; } }
@keyframes clipB4 { 0%,52% { stroke-dashoffset: 1; } 64% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; } }
@keyframes clipB5 { 0%,66% { stroke-dashoffset: 1; } 78% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; } }
@keyframes clipB6 { 0%,80% { stroke-dashoffset: 1; } 92% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; } }

@keyframes clipSeg1 { 0%,20% { opacity: .32; transform: scaleY(1); background: rgba(255,255,255,.55); box-shadow: none; } 24% { opacity: 1; transform: scaleY(2.1); background: #5b5bf2; box-shadow: 0 0 .7cqw #5b5bf2; } 100% { opacity: 1; transform: scaleY(2.1); background: #5b5bf2; box-shadow: 0 0 .7cqw #5b5bf2; } }
@keyframes clipSeg2 { 0%,34% { opacity: .32; transform: scaleY(1); background: rgba(255,255,255,.55); box-shadow: none; } 38% { opacity: 1; transform: scaleY(2.1); background: #5b5bf2; box-shadow: 0 0 .7cqw #5b5bf2; } 100% { opacity: 1; transform: scaleY(2.1); background: #5b5bf2; box-shadow: 0 0 .7cqw #5b5bf2; } }
@keyframes clipSeg3 { 0%,48% { opacity: .32; transform: scaleY(1); background: rgba(255,255,255,.55); box-shadow: none; } 52% { opacity: 1; transform: scaleY(2.1); background: #5b5bf2; box-shadow: 0 0 .7cqw #5b5bf2; } 100% { opacity: 1; transform: scaleY(2.1); background: #5b5bf2; box-shadow: 0 0 .7cqw #5b5bf2; } }
@keyframes clipSeg4 { 0%,62% { opacity: .32; transform: scaleY(1); background: rgba(255,255,255,.55); box-shadow: none; } 66% { opacity: 1; transform: scaleY(2.1); background: #5b5bf2; box-shadow: 0 0 .7cqw #5b5bf2; } 100% { opacity: 1; transform: scaleY(2.1); background: #5b5bf2; box-shadow: 0 0 .7cqw #5b5bf2; } }
@keyframes clipSeg5 { 0%,76% { opacity: .32; transform: scaleY(1); background: rgba(255,255,255,.55); box-shadow: none; } 80% { opacity: 1; transform: scaleY(2.1); background: #5b5bf2; box-shadow: 0 0 .7cqw #5b5bf2; } 100% { opacity: 1; transform: scaleY(2.1); background: #5b5bf2; box-shadow: 0 0 .7cqw #5b5bf2; } }
@keyframes clipSeg6 { 0%,90% { opacity: .32; transform: scaleY(1); background: rgba(255,255,255,.55); box-shadow: none; } 94% { opacity: 1; transform: scaleY(2.1); background: #5b5bf2; box-shadow: 0 0 .7cqw #5b5bf2; } 100% { opacity: 1; transform: scaleY(2.1); background: #5b5bf2; box-shadow: 0 0 .7cqw #5b5bf2; } }

@keyframes clipCard1 { 0%,10% { opacity: 0; transform: translateY(1.1cqw) scale(.92); } 24% { opacity: 1; transform: translateY(0) scale(1); } 100% { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes clipCard2 { 0%,24% { opacity: 0; transform: translateY(1.1cqw) scale(.92); } 38% { opacity: 1; transform: translateY(0) scale(1); } 100% { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes clipCard3 { 0%,38% { opacity: 0; transform: translateY(1.1cqw) scale(.92); } 52% { opacity: 1; transform: translateY(0) scale(1); } 100% { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes clipCard4 { 0%,52% { opacity: 0; transform: translateY(1.1cqw) scale(.92); } 66% { opacity: 1; transform: translateY(0) scale(1); } 100% { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes clipCard5 { 0%,66% { opacity: 0; transform: translateY(1.1cqw) scale(.92); } 80% { opacity: 1; transform: translateY(0) scale(1); } 100% { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes clipCard6 { 0%,80% { opacity: 0; transform: translateY(1.1cqw) scale(.92); } 94% { opacity: 1; transform: translateY(0) scale(1); } 100% { opacity: 1; transform: translateY(0) scale(1); } }

@media (prefers-reduced-motion: reduce) {
  .clip-stage[data-intro="build"] * { animation: none !important; opacity: 1 !important; transform: none !important; }
  .clip-stage[data-intro="build"] .clip-stem,
  .clip-stage[data-intro="build"] .clip-branch { stroke-dashoffset: 0 !important; }
}