/* Animação "Identidade Visual" (js/motion-identidade.js)
   Palco com container queries: todas as medidas em cqmin, então o mesmo
   desenho funciona em 16:9 (desktop) e 4:5 (celular). */

.midw { margin: 0 0 24px; }

.mid {
  --base: #0a0d14;
  --e1: #1d4ed8;
  --e2: #3b82f6;
  --gold: #d4af37;
  --w: #fff;
  --mono: ui-monospace, "Cascadia Code", Consolas, monospace;
  position: relative;
  aspect-ratio: 16 / 9;
  container-type: size;
  overflow: hidden;
  isolation: isolate;
  border-radius: 16px;
  border: 1px solid rgba(59, 130, 246, .2);
  background: radial-gradient(120% 90% at 50% 42%, #111a2e 0%, var(--base) 62%);
  color: var(--w);
  font-family: Inter, -apple-system, "Segoe UI", system-ui, sans-serif;
  user-select: none;
  -webkit-user-select: none;
}
@media (max-width: 640px) { .mid { aspect-ratio: 4 / 5; } }

/* vinheta por cima de tudo, menos dos controles */
.mid::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background: radial-gradient(90% 80% at 50% 50%, transparent 55%, rgba(0, 0, 0, .55) 100%);
}

.mid__s {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  visibility: hidden;
}
.mid__s4 { visibility: visible; opacity: 0; pointer-events: none; }
.mid .ch, .mid .wi { display: inline-block; will-change: transform; }

/* ---------- cena 1: gancho ---------- */
.gl { position: absolute; background: rgba(59, 130, 246, .45); }
.gl--v { top: 0; bottom: 0; width: 1px; left: var(--p); transform-origin: 50% var(--o, 0%); }
.gl--h { left: 0; right: 0; height: 1px; top: var(--p); transform-origin: var(--o, 0%) 50%; }
.gl--gold { background: rgba(212, 175, 55, .55); }

.cx {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 2.4cqmin;
  height: 2.4cqmin;
  margin: -1.2cqmin 0 0 -1.2cqmin;
}
.cx::before, .cx::after { content: ""; position: absolute; background: var(--e2); }
.cx::before { left: 50%; top: 0; bottom: 0; width: 1px; }
.cx::after { top: 50%; left: 0; right: 0; height: 1px; }

.lab {
  position: absolute;
  left: var(--x);
  top: var(--y);
  font: 500 1.7cqmin/1 var(--mono);
  letter-spacing: .12em;
  color: rgba(147, 180, 255, .75);
  white-space: nowrap;
}
.lab b { color: var(--gold); font-weight: 600; }

.hk { position: relative; padding: 3cqmin 5cqmin; }
.hk__row { position: relative; }
.hk__ln { display: block; overflow: hidden; line-height: .98; padding: .04em .06em .02em; white-space: nowrap; }
.hk__l1 { font-weight: 200; font-size: 7.4cqmin; letter-spacing: .2em; }
.hk__l2 { font-weight: 900; font-size: 9.6cqmin; letter-spacing: -.01em; }
.hk__l3 {
  font-weight: 900;
  font-size: 21cqmin;
  letter-spacing: -.045em;
  line-height: .9;
  text-shadow: 0 0 calc(var(--g, 0) * 1.2cqmin) var(--e2), 0 0 calc(var(--g, 0) * 5cqmin) rgba(59, 130, 246, .7);
}
.hk__l3 .dot { color: var(--gold); text-shadow: none; }
/* espaço extra para o glow não ser cortado pela máscara da linha */
.hk__l3.hk__ln { padding: 6cqmin 7cqmin 1cqmin; margin: -6cqmin -7cqmin 0; }
.hk__bl {
  position: absolute;
  left: -9cqmin;
  right: -9cqmin;
  bottom: .4cqmin;
  height: 1px;
  background: var(--e2);
  transform-origin: 0 50%;
  opacity: .8;
}
.hk__bl::after {
  /* marcador de linha de base */
  content: "";
  position: absolute;
  right: 0;
  top: -.5cqmin;
  width: 1cqmin;
  height: 1cqmin;
  border-radius: 50%;
  background: var(--e2);
}

/* caixa de seleção estilo editor vetorial */
.hk__box { position: absolute; inset: 0; border: 1px solid var(--e2); visibility: hidden; }
.hk__flash { position: absolute; inset: 0; background: var(--e2); opacity: 0; mix-blend-mode: screen; }
.hd {
  position: absolute;
  width: 1.5cqmin;
  height: 1.5cqmin;
  margin: -.75cqmin 0 0 -.75cqmin;
  left: var(--x);
  top: var(--y);
  background: #fff;
  border: 1px solid var(--e2);
}
.hk__dim {
  position: absolute;
  left: -1px;
  bottom: 100%;
  margin-bottom: 1cqmin;
  padding: .7cqmin 1.2cqmin;
  background: var(--e1);
  font: 600 1.6cqmin/1 var(--mono);
  letter-spacing: .08em;
  white-space: nowrap;
  visibility: hidden;
}

/* ---------- etiqueta de etapa (cenas 2 e 3) ---------- */
.mid__chip {
  position: absolute;
  z-index: 4;
  top: 5cqmin;
  left: 5cqmin;
  display: flex;
  align-items: center;
  gap: 1.4cqmin;
  font: 600 2.1cqmin/1 Inter, system-ui, sans-serif;
  letter-spacing: .22em;
  text-transform: uppercase;
  visibility: hidden;
}
.mid__chip::before {
  content: "";
  width: 1.3cqmin;
  height: 1.3cqmin;
  border-radius: 50%;
  background: var(--e2);
  box-shadow: 0 0 1.6cqmin var(--e2);
}
.mid__chip b { font-weight: 300; color: rgba(255, 255, 255, .6); }
.mid__chip[data-step="1"] i::before { content: "01 — Paleta de cores"; }
.mid__chip[data-step="2"] i::before { content: "02 — Tipografia"; }
.mid__chip[data-step="3"] i::before { content: "03 — Símbolo"; }
.mid__chip[data-step="4"] i::before { content: "04 — Aplicação"; }
.mid__chip i { font-style: normal; }

/* ---------- cena 2: processo ---------- */
.s2__part { position: absolute; display: grid; justify-items: center; visibility: hidden; }

.pal { display: flex; gap: 3cqmin; align-items: flex-start; }
.sw { display: grid; justify-items: center; gap: 1.8cqmin; }
.sw__c {
  position: relative;
  width: 14cqmin;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--c);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 0 6cqmin -1.5cqmin var(--c);
}
.sw__r { position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--c); }
.sw:first-child .sw__r { border-color: rgba(255, 255, 255, .4); }
.sw__hex { font: 500 2.2cqmin/1 var(--mono); letter-spacing: .06em; color: #dbe5ff; }
.sw__n { font: 300 1.7cqmin/1 Inter, sans-serif; letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .55); }

.ty { gap: 1.2cqmin; }
.ty__box { position: relative; padding: 0 4cqmin; }
.ty__g { position: absolute; left: -6cqmin; right: -6cqmin; height: 1px; top: var(--p); background: rgba(59, 130, 246, .4); transform-origin: 0 50%; }
.ty__g--gold { background: rgba(212, 175, 55, .6); }
.ty__aa { font-size: 25cqmin; line-height: 1.05; font-weight: 400; }
.ty__s { font-size: 6.6cqmin; line-height: 1.1; letter-spacing: .01em; }
.ty__u { width: 34cqmin; height: .5cqmin; background: var(--gold); transform-origin: 0 50%; margin-top: 1.4cqmin; }
.ty__lab {
  margin-top: 1cqmin;
  font: 500 2cqmin/1 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--e2);
}
.ty[data-f="0"] .ty__ff { font-family: Arial, Helvetica, sans-serif; font-weight: 400; }
.ty[data-f="1"] .ty__ff { font-family: "Times New Roman", Times, serif; font-weight: 400; }
.ty[data-f="2"] .ty__ff { font-family: "Courier New", Courier, monospace; font-weight: 400; }
.ty[data-f="3"] .ty__ff { font-family: "Comic Sans MS", "Comic Sans", cursive; font-weight: 400; }
.ty[data-f="4"] .ty__ff { font-family: Unbounded, Inter, sans-serif; font-weight: 800; letter-spacing: -.02em; }
.ty[data-f="4"] .ty__aa { text-shadow: 0 0 4cqmin rgba(59, 130, 246, .55); }
.ty[data-f="0"] .ty__lab::before { content: "Arial · genérica"; }
.ty[data-f="1"] .ty__lab::before { content: "Times · genérica"; }
.ty[data-f="2"] .ty__lab::before { content: "Courier · genérica"; }
.ty[data-f="3"] .ty__lab::before { content: "Comic Sans · genérica"; }
.ty[data-f="4"] .ty__lab::before { content: "✓ Fonte da marca"; color: var(--gold); }

.lg { gap: 1.4cqmin; }
.lg__svg {
  width: 30cqmin;
  overflow: visible;
  filter: drop-shadow(0 0 calc(var(--g, 0) * 3cqmin) rgba(59, 130, 246, .75));
}
.lg__gd { fill: none; stroke: var(--gold); stroke-width: .35; stroke-dasharray: 1; opacity: .8; }
.lg__p { fill: none; stroke: #fff; stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1; }
.lg__fill { fill: url(#mid-grad); }
.lg__dot { fill: var(--gold); }
.lg__word { overflow: hidden; font: 300 7cqmin/1 Inter, sans-serif; letter-spacing: .32em; margin-right: -.32em; padding-top: .1em; }
.lg__sub { font: 500 1.8cqmin/1 var(--mono); letter-spacing: .3em; text-transform: uppercase; color: var(--gold); }

/* ---------- cena 3: mockups ---------- */
.mks { position: relative; display: flex; gap: 4cqmin; }
/* .mk só desloca (fusão no centro, via --m); quem gira em 3D é .mk__t */
.mk {
  --dx: 0cqmin;
  position: relative;
  width: 36cqmin;
  height: 54cqmin;
  perspective: 130cqmin;
  translate: calc(var(--m, 0) * var(--dx)) 0;
}
.mk__t { position: absolute; inset: 0; transform-style: preserve-3d; visibility: hidden; }
.mk:nth-child(1) { --dx: 40cqmin; }
.mk:nth-child(3) { --dx: -40cqmin; }
.mk__in {
  position: absolute;
  inset: 0;
  overflow: hidden;
  padding: 2.4cqmin;
  border-radius: 2.6cqmin;
  background: linear-gradient(160deg, #141c30, #0c111d);
  border: 1px solid rgba(255, 255, 255, .09);
  box-shadow: 0 4cqmin 9cqmin rgba(0, 0, 0, .55), 0 0 0 1px rgba(59, 130, 246, .12), 0 0 7cqmin -2cqmin rgba(59, 130, 246, .45);
}
.mk__sh {
  position: absolute;
  inset: -20% -60%;
  background: linear-gradient(100deg, transparent 42%, rgba(255, 255, 255, .13) 50%, transparent 58%);
  pointer-events: none;
}
.mk__lab {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 2.2cqmin);
  text-align: center;
  font: 600 1.8cqmin/1 Inter, sans-serif;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .7);
}
.mk-mark path { fill: url(#mid-grad); }
.mk-mark circle { fill: var(--gold); }
.mk-mark--w path { fill: #fff; }
.mk-mark--d path { fill: var(--base); }
.mk-mark--d circle { fill: var(--base); }

/* feed */
.fd__top { display: flex; align-items: center; gap: 1.4cqmin; margin-bottom: 2cqmin; }
.fd__av {
  display: grid;
  place-items: center;
  width: 6cqmin;
  height: 6cqmin;
  border-radius: 50%;
  background: var(--base);
  box-shadow: 0 0 0 .35cqmin var(--gold);
}
.fd__av svg { width: 60%; }
.fd__top span:last-child { display: grid; gap: .5cqmin; }
.fd__top b { font: 700 1.9cqmin/1 Inter, sans-serif; }
.fd__top i { font: 400 1.5cqmin/1 Inter, sans-serif; font-style: normal; color: rgba(255, 255, 255, .5); }
.fd__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7cqmin; }
.ft { position: relative; aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; border-radius: .6cqmin; }
.ft svg { width: 46%; }
.ft--a { background: linear-gradient(140deg, var(--e1), var(--e2)); }
.ft--b { background: var(--base); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.ft--c { background: var(--gold); }
.ft--d { background: #f2f5fb; }
.ft--b::before, .ft--d::before {
  content: "";
  position: absolute;
  left: 16%;
  bottom: 18%;
  width: 60%;
  height: 9%;
  border-radius: 1cqmin;
  background: currentColor;
  box-shadow: 0 -2.2cqmin 0 currentColor;
}
.ft--b { color: var(--e2); }
.ft--d { color: var(--e1); }
.fd__bar { display: flex; gap: 1.2cqmin; margin-top: 2cqmin; }
.fd__bar i { height: 1.4cqmin; border-radius: 1cqmin; background: rgba(255, 255, 255, .14); flex: 1; }
.fd__bar i:first-child { flex: 0 0 4cqmin; background: var(--e2); }

/* cartão + apresentação */
.bc { position: relative; height: 22cqmin; margin: 1.6cqmin .4cqmin 4cqmin; }
.bc__c { position: absolute; inset: 0; border-radius: 1.2cqmin; }
.bc__back {
  background: linear-gradient(135deg, var(--e1), var(--e2));
  display: grid;
  place-items: center;
}
.bc__back svg { width: 30%; }
.bc__front {
  background: #0d121f;
  border: 1px solid rgba(212, 175, 55, .55);
  padding: 2.2cqmin;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 2cqmin 4cqmin rgba(0, 0, 0, .5);
}
.bc__front svg { width: 6cqmin; }
.bc__front b { font: 300 2.2cqmin/1 Inter, sans-serif; letter-spacing: .3em; }
.bc__front i { display: block; width: 50%; height: .7cqmin; margin-top: 1cqmin; background: rgba(212, 175, 55, .7); border-radius: 1cqmin; }
.sl {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 1.2cqmin;
  overflow: hidden;
  background: radial-gradient(80% 120% at 85% 50%, rgba(59, 130, 246, .5), transparent 60%), #0b101b;
  border: 1px solid rgba(255, 255, 255, .08);
  padding: 2cqmin;
}
.sl b { display: block; font: 900 3cqmin/1 Inter, sans-serif; letter-spacing: -.02em; }
.sl b em { font-style: normal; color: var(--gold); }
.sl i { display: block; height: .8cqmin; width: 55%; margin-top: 1.2cqmin; background: rgba(255, 255, 255, .25); border-radius: 1cqmin; transform-origin: 0 50%; }
.sl i + i { width: 40%; }
.sl svg { position: absolute; right: 2cqmin; bottom: 2cqmin; width: 7cqmin; }

/* celular */
.mk--ph .mk__in { padding: 1.6cqmin; border-radius: 5cqmin; background: #05070c; border: .5cqmin solid #232b3d; }
.ph { position: absolute; inset: 1.4cqmin; overflow: hidden; border-radius: 3.6cqmin; background: #0d1322; padding: 4.2cqmin 2.2cqmin 2.2cqmin; }
.ph::before {
  content: "";
  position: absolute;
  top: 1.2cqmin;
  left: 50%;
  width: 9cqmin;
  height: 1.8cqmin;
  margin-left: -4.5cqmin;
  border-radius: 2cqmin;
  background: #05070c;
}
.ph__nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2.4cqmin; }
.ph__nav svg { width: 4.4cqmin; }
.ph__nav span { display: flex; gap: .8cqmin; }
.ph__nav span i { width: 2.6cqmin; height: .6cqmin; border-radius: 1cqmin; background: rgba(255, 255, 255, .35); }
.ph__h { font: 900 3.4cqmin/1.05 Inter, sans-serif; letter-spacing: -.02em; }
.ph__h em { font-style: normal; color: var(--e2); }
.ph__l { height: .8cqmin; border-radius: 1cqmin; background: rgba(255, 255, 255, .2); margin-top: 1.2cqmin; transform-origin: 0 50%; }
.ph__l--s { width: 70%; }
.ph__btn {
  display: inline-block;
  margin-top: 2cqmin;
  padding: 1.1cqmin 2.4cqmin;
  border-radius: 3cqmin;
  background: var(--e1);
  font: 700 1.6cqmin/1 Inter, sans-serif;
  box-shadow: 0 0 3cqmin rgba(59, 130, 246, .6);
}
.ph__img {
  height: 14cqmin;
  margin-top: 2.4cqmin;
  border-radius: 1.6cqmin;
  display: grid;
  place-items: center;
  background: radial-gradient(70% 90% at 30% 20%, rgba(212, 175, 55, .35), transparent 70%), linear-gradient(150deg, #172344, #0a0f1c);
}
.ph__img svg { width: 9cqmin; }

/* celular: cartões sobrepostos em leque */
@container (max-aspect-ratio: 1 / 1) {
  .mks { gap: 0; }
  .mk { width: 34cqmin; height: 52cqmin; margin: 0 -5cqmin; }
  .mk:nth-child(2) { z-index: 2; }
  .mk:nth-child(1) { --dx: 24cqmin; }
  .mk:nth-child(3) { --dx: -24cqmin; }
  .mk__lab { display: none; }
  .hk__l3 { font-size: 20cqmin; }
  /* textos de apoio: no palco estreito 1cqmin é ~3.6px, então sobem de tamanho */
  .mid__chip { font-size: 3.2cqmin; }
  .lab { font-size: 2.6cqmin; }
  .hk__dim { font-size: 2.4cqmin; }
  .sw__hex { font-size: 2.9cqmin; }
  .sw__n { font-size: 2.5cqmin; }
  .ty__lab, .lg__sub { font-size: 2.8cqmin; }
  .mid .fin__t { font-size: 5.6cqmin; }
  .mid .fin__cta { font-size: 3.8cqmin; padding: 2.6cqmin 4.6cqmin; }
  .mid .fin__logo { width: 62cqmin; }
}

/* ---------- cena 4: fechamento ---------- */
.fx {
  position: absolute;
  left: 50%;
  top: 42%;
  width: 40cqmin;
  height: 40cqmin;
  margin: -20cqmin 0 0 -20cqmin;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .9) 0%, rgba(59, 130, 246, .7) 30%, transparent 68%);
  opacity: 0;
}
.fin { position: relative; display: grid; justify-items: center; text-align: center; gap: 3cqmin; }
.fin__logo { position: relative; width: 52cqmin; }
.fin__clip { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.fin__logo svg {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 0 calc(var(--g, 0) * 2.4cqmin) rgba(59, 130, 246, .9));
}
.fin__sweep {
  position: absolute;
  inset: -10% 0;
  background: linear-gradient(100deg, transparent 38%, rgba(255, 255, 255, .7) 50%, transparent 62%);
  mix-blend-mode: overlay;
  pointer-events: none;
}
.fin__t { margin: 0; font: 300 4.6cqmin/1.15 Inter, sans-serif; letter-spacing: -.01em; }
.fin__t strong { font-weight: 900; }
.fin__t .gold { color: var(--gold); }
.w { display: inline-block; overflow: hidden; vertical-align: bottom; padding: 0 .02em .06em; }
.fin__cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 1.2cqmin;
  padding: 2cqmin 4cqmin;
  border-radius: 99px;
  background: linear-gradient(135deg, var(--e1), var(--e2));
  color: #fff;
  font: 700 2.6cqmin/1 Inter, sans-serif;
  text-decoration: none;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .15) inset, 0 1.4cqmin 5cqmin rgba(29, 78, 216, .6);
  opacity: 0;
  pointer-events: none;
}
.fin__cta:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.fin__ring { position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 .5cqmin var(--e2); opacity: 0; pointer-events: none; }

/* ---------- controles ---------- */
.mid__bar { position: absolute; z-index: 6; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(255, 255, 255, .06); }
.mid__bar i { position: absolute; inset: 0; background: linear-gradient(90deg, var(--e1), var(--e2)); transform-origin: 0 50%; transform: scaleX(0); }
.mid__btn {
  position: absolute;
  z-index: 6;
  right: 12px;
  bottom: 12px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 50%;
  background: rgba(10, 13, 20, .6);
  color: #fff;
  cursor: pointer;
  opacity: .7;
  transition: opacity .2s;
}
.mid__btn:hover, .mid__btn:focus-visible { opacity: 1; }
.mid__btn svg { width: 14px; height: 14px; fill: currentColor; }
.mid__btn .i-play, .mid__btn[data-on="false"] .i-pause { display: none; }
.mid__btn[data-on="false"] .i-play { display: block; }

.midw figcaption { margin-top: 10px; font-size: .8125rem; color: var(--metal, #8f99b3); }
.mid__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }