/* Crewfox — a home: a hero (a raposa em pé no holofote), a janela da demo e a faixa dos cabos. Aprovada pelo Lucas em
   07/11/2026 (docs/brand/hero/v5, ARA-057); a base comum está em base.css. */
:root {
  /* O palco: a largura comum da hero, da janela e da faixa dos cabos, e onde cai a luz (fração dessa largura). */
  --stage-w: calc(100vw - 2 * var(--gutter));
  --spot: .5;
  --fox-h: min(64vw, 300px);
}

/* ——— Fundo: o violeta atrás do título e as bordas escuras (o calor vem do holofote) ——— */
.backdrop { position: relative; isolation: isolate; overflow: clip; }
.backdrop::before {
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(55% 32% at 14% 14%, rgb(75 63 209 / .24), transparent 70%),
    radial-gradient(120% 60% at 50% 30%, transparent 55%, rgb(8 6 22 / .6));
}

/* ——— A primeira dobra: menu e hero, com o holofote caindo onde a raposa está ——— */
.fold { position: relative; display: grid; grid-template-rows: auto 1fr; min-height: var(--fold, auto); }
/* O x da luz, da raposa e da poça na janela sai da mesma conta: o centro da página mais o desvio no palco. */
.fold { --spot-x: calc(50% + (var(--spot) - .5) * var(--stage-w)); }
.beam {
  position: absolute; z-index: -1; top: 0; bottom: 0; left: var(--spot-x); width: calc(var(--fox-h) * 1.7);
  translate: -50% 0; pointer-events: none;
  /* Um cone de luz de bordas macias (gradiente cônico a partir de um ponto acima da página), mais forte perto da fonte
     e na poça do chão; a poeira são alguns pontos fixos. */
  background:
    radial-gradient(1.5px 1.5px at 38% 34%, rgb(255 226 170 / .9), transparent),
    radial-gradient(1px 1px at 61% 22%, rgb(255 226 170 / .8), transparent),
    radial-gradient(1.5px 1.5px at 55% 58%, rgb(255 226 170 / .7), transparent),
    radial-gradient(1px 1px at 33% 71%, rgb(255 226 170 / .7), transparent),
    radial-gradient(1px 1px at 68% 80%, rgb(255 226 170 / .6), transparent),
    radial-gradient(32% 8% at 50% 100%, rgb(255 190 95 / .55), transparent),
    conic-gradient(from 164deg at 50% -4%, transparent 0deg, rgb(255 181 71 / .3) 9deg, rgb(255 205 130 / .5) 16deg,
      rgb(255 181 71 / .3) 23deg, transparent 32deg);
  -webkit-mask-image: linear-gradient(180deg, #000, rgb(0 0 0 / .7) 50%, #000);
  mask-image: linear-gradient(180deg, #000, rgb(0 0 0 / .7) 50%, #000);
}

/* ——— Hero: o texto e, embaixo (celular) ou ao lado (telas deitadas), a raposa na luz ——— */
.hero {
  display: grid; align-content: center; width: var(--stage-w); margin: 0 auto;
  padding: 8px 0 calc(var(--fox-h) + 20px);
}
.copy { max-width: var(--copy-w, 40rem); }
h1 {
  margin: 0; font-family: var(--font-title); font-weight: 800; letter-spacing: -.04em; line-height: .95;
  font-size: var(--h1, clamp(2.7rem, 12.4vw, 4.6rem));
}
h1 .shine { display: block; color: var(--amber); text-wrap: balance; }
.lede {
  margin: var(--lede-gap, 18px) 0 0; max-width: var(--lede-w, 34ch); font-size: var(--lede-font, clamp(1.05rem, 4vw, 1.3rem));
  line-height: 1.45; color: rgb(255 248 236 / .8); text-wrap: pretty;
}
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px var(--actions-gap, 24px); margin-top: var(--actions-top, 26px); }
.actions .btn-amber { height: var(--cta-h, 54px); padding: 0 var(--cta-pad, 28px); font-size: var(--cta-font, 17px); }
.link-more {
  display: none; align-items: center; min-height: 44px; font-weight: 600; font-size: var(--more-font, 16px); color: var(--ivory);
  text-decoration: underline; text-decoration-color: rgb(255 248 236 / .35); text-underline-offset: 6px;
  transition: text-decoration-color .2s;
}
.link-more:hover { text-decoration-color: var(--ivory); }
/* A raposa em pé, com os pés na borda da janela e a luz por cima. */
.fox {
  position: absolute; z-index: 2; bottom: -3px; left: var(--spot-x); height: var(--fox-h); width: auto;
  translate: -50% 0; pointer-events: none; filter: drop-shadow(0 0 18px rgb(255 181 71 / .25));
}

/* Entrada da hero: o texto sobe e a raposa aparece na luz. */
.js .rise { opacity: 0; translate: 0 18px; }
.js .fold.is-ready .rise { opacity: 1; translate: 0 0; transition: opacity .7s ease var(--rd, 0s), translate .9s var(--ease-out) var(--rd, 0s); }
.js .fox { opacity: 0; translate: -50% 6%; }
.js .fold.is-ready .fox { opacity: 1; translate: -50% 0; transition: opacity .6s ease .3s, translate .9s var(--ease-spring) .3s; }

/* ——— A janela: a demo do produto (tudo em cqw, então ela se mede pela própria largura) ——— */
.demo { width: var(--stage-w); margin: 0 auto; scroll-margin-top: 24px; }
.window {
  container-type: inline-size; position: relative; border-radius: max(18px, 2.2cqw);
  background: linear-gradient(180deg, #1F1948, var(--surface) 30%);
  box-shadow: 0 0 0 1.5px rgb(255 181 71 / .28), 0 -10px 60px -24px rgb(255 181 71 / .55), 0 40px 90px -30px rgb(0 0 0 / .8);
}
/* Border beam: uma luz âmbar que corre sem parar pela borda da janela (um gradiente cônico girando, recortado só na
   linha da borda). Com "reduzir movimento", fica parada. */
@property --beam-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.window::after {
  content: ""; position: absolute; z-index: 1; inset: -1px; border-radius: inherit; padding: 3px; pointer-events: none;
  background: conic-gradient(from var(--beam-angle), transparent 0 70%, rgb(255 181 71 / .55) 80%, var(--amber) 86%, #FFF6E4 89%, var(--amber) 91%, transparent 95%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  filter: drop-shadow(0 0 8px var(--amber)) drop-shadow(0 0 2px #FFE2B0);
  animation: border-beam 7s linear infinite;
}
@keyframes border-beam { to { --beam-angle: 1turn; } }
/* A poça do holofote na borda de cima, onde estão os pés da raposa: o mesmo anel da borda (segue os cantos
   arredondados), aceso por uma luz que nasce no ponto da raposa e se apaga para os lados. */
.window::before {
  content: ""; position: absolute; z-index: 1; inset: -1px; border-radius: inherit; padding: 3px; pointer-events: none;
  background: radial-gradient(45% 60% at calc(var(--spot) * 100%) 0, #FFE9C4, rgb(255 181 71 / .7) 35%, transparent 75%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  filter: drop-shadow(0 0 10px var(--amber));
}
.window-bar {
  display: flex; align-items: center; gap: max(14px, 1.6cqw); height: max(36px, 3.4cqw); padding: 0 max(16px, 2cqw);
  border-bottom: 1px solid var(--line);
}
.dots { display: flex; gap: max(6px, .6cqw); }
.dots i { width: max(9px, .85cqw); aspect-ratio: 1; border-radius: 50%; background: #FF5F57; }
.dots i:nth-child(2) { background: #FEBC2E; }
.dots i:nth-child(3) { background: #28C840; }
.address { padding-left: max(14px, 1.6cqw); border-left: 1px solid var(--line); font: max(11px, 1.05cqw) / 1 var(--font-mono); color: rgb(255 248 236 / .7); }
.window-body { display: grid; }
.sidebar { display: none; }
.view { padding: max(18px, 2.6cqw) max(16px, 2.8cqw) max(22px, 3.2cqw); }
.view-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: max(14px, 1.8cqw); }
.view-title { margin: 0; font: 800 max(26px, 3.4cqw) / 1 var(--font-title); letter-spacing: -.03em; }
.view-new {
  display: none; align-items: center; gap: .5em; padding: .55em 1.1em; border-radius: 999px; border: 1.5px solid rgb(255 248 236 / .3);
  font: 600 max(13px, 1.15cqw) / 1 var(--font-title);
}
.view-new svg { width: 1em; height: 1em; }
/* O pedido do creator. */
.ask {
  position: relative; display: flex; align-items: center; gap: max(10px, 1.2cqw); margin: 0 0 max(14px, 1.6cqw);
}
.ask-avatar { flex: none; width: max(34px, 3.4cqw); aspect-ratio: 1; border-radius: 50%; background: var(--ivory) url(favicon.svg) center / 66% no-repeat; }
.ask-text {
  position: relative; margin: 0; padding: max(10px, 1.1cqw) max(14px, 1.6cqw); border-radius: max(16px, 1.8cqw);
  background: var(--ivory); color: var(--night); font: 600 max(14px, 1.5cqw) / 1.3 var(--font-title);
}
.ask-text::before {
  content: ""; position: absolute; left: -6px; top: 50%; width: 12px; height: 12px; translate: 0 -50%;
  background: var(--ivory); clip-path: polygon(100% 0, 0 50%, 100% 100%);
}
/* Os ingressos: canhoto colorido (o estado), picote e o corpo. */
.tickets { display: grid; gap: max(8px, .9cqw); margin: 0; padding: 0; list-style: none; }
.ticket {
  --stub: var(--cyan); --stub-w: max(52px, 6.4cqw);
  position: relative; display: grid; grid-template-columns: var(--stub-w) 1fr auto; align-items: center;
  min-height: max(52px, 4.6cqw); border-radius: max(10px, 1.1cqw); background: var(--ivory); color: var(--night); overflow: hidden;
}
.ticket.ok { --stub: var(--ok); }
.ticket.turn { --stub: var(--amber); }
.ticket-stub { align-self: stretch; display: grid; place-items: center; background: var(--stub); border-right: 2px dashed rgb(23 18 58 / .55); }
.ticket-stub svg { width: max(20px, 2cqw); height: max(20px, 2cqw); color: var(--night); }
.ticket-text { padding: max(10px, 1cqw) max(12px, 1.8cqw); font: 600 max(14px, 1.55cqw) / 1.25 var(--font-title); }
.ticket-end { display: flex; align-items: center; margin-right: max(12px, 1.6cqw); }
.ticket-mark { width: max(22px, 2.2cqw); height: max(22px, 2.2cqw); }
.ticket-approve {
  padding: .5em 1.1em; border-radius: 999px; background: var(--night); color: var(--amber); font: 700 max(13px, 1.3cqw) / 1 var(--font-title);
}
.ticket::before, .ticket::after {
  content: ""; position: absolute; left: calc(var(--stub-w) - 6px); width: 12px; aspect-ratio: 1; border-radius: 50%; background: var(--surface);
}
.ticket::before { top: -6px; }
.ticket::after { bottom: -6px; }

/* O agente trabalhando: com JS, quando a janela aparece, cada ingresso entra "fazendo…" e termina ticado; o seu
   (o da aprovação) chega por último e acende. */
.ticket .doing, .ticket .spin { display: none; }
.ticket.is-doing .doing { display: inline; }
.ticket.is-doing .spin { display: block; }
.ticket.is-doing .done, .ticket.is-doing .ticket-mark:not(.spin) { display: none; }
.spin { animation: spin .8s linear infinite; }
@keyframes spin { to { rotate: 1turn; } }
.js .ticket, .js .ask { transition: opacity .4s ease, translate .55s var(--ease-spring); }
.js .is-waiting { opacity: 0; translate: 0 12px; }
.ticket.just-done .ticket-mark { animation: pop .45s var(--ease-spring); }
@keyframes pop { from { scale: .4; } to { scale: 1; } }
.ticket.turn.just-done { animation: your-turn 1.4s ease-out; }
@keyframes your-turn { 30% { box-shadow: 0 0 0 3px var(--amber), 0 0 30px 2px rgb(255 181 71 / .55); } }

/* Barra do lado (quando a janela tem largura para ela). */
@container (min-width: 640px) {
  .window-body { grid-template-columns: max(170px, 17cqw) 1fr; }
  .sidebar { display: block; padding: max(18px, 2.4cqw) max(12px, 1.4cqw); border-right: 1px solid var(--line); }
  .view-new { display: inline-flex; }
}
.sidebar-logo { display: block; height: max(22px, 2.2cqw); width: auto; margin: 0 0 max(16px, 2cqw) max(8px, .9cqw); }
.sidebar ul { display: grid; gap: max(4px, .5cqw); margin: 0; padding: 0; list-style: none; }
.sidebar li {
  display: flex; align-items: center; gap: max(10px, 1cqw); padding: max(8px, .8cqw) max(10px, 1cqw); border-radius: max(10px, 1cqw);
  font: 500 max(14px, 1.35cqw) / 1 var(--font-ui); color: rgb(255 248 236 / .85);
}
.sidebar li svg { width: max(18px, 1.8cqw); height: max(18px, 1.8cqw); flex: none; }
.sidebar li[aria-current] { background: var(--amber); color: var(--night); font-weight: 700; }

/* ——— A faixa dos cabos: a sua IA pede (ciano, sobe para a janela), a Crewfox publica (âmbar, desce para as redes) ——— */
.works { --cycle: 4.2s; --bend: .5; position: relative; width: var(--stage-w); margin: 0 auto; padding: var(--cable-h, 64px) 0 12px; }
.cables { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.cable { fill: none; stroke-width: 2; stroke: rgb(255 181 71 / .5); }
.cable.in { stroke: rgb(54 226 242 / .5); }
/* As tomadas: onde cada cabo encosta na borda de baixo da janela. */
.port { fill: #FFE2B0; filter: drop-shadow(0 0 6px var(--amber)); }
.port.in { fill: #B5F7FC; filter: drop-shadow(0 0 6px var(--cyan)); }
.pulse { fill: none; stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: .1 1.2; stroke-dashoffset: .1; opacity: 0; }
.pulse.out { stroke: #FFD9A0; filter: drop-shadow(0 0 5px var(--amber)); }
.pulse.in { stroke: #B5F7FC; filter: drop-shadow(0 0 5px var(--cyan)); }
/* Celular: a IA na primeira fileira, à esquerda (o cabo âmbar desce pelo lado livre); as redes na segunda. */
.works-row { display: grid; row-gap: 64px; }
.ai-group { justify-self: start; }
.group { display: grid; justify-items: center; gap: 14px; }
.nodes { display: flex; justify-content: center; gap: var(--nodes-gap, 22px); margin: 0; padding: 0; list-style: none; }
.nets-group .nodes { justify-content: space-between; width: 100%; gap: 0; }
.nets-group { justify-items: stretch; }
.node {
  --ring: rgb(255 181 71 / .45); --halo: rgb(255 181 71 / .35);
  display: grid; justify-items: center; gap: 8px; font: 600 var(--node-font, 12px) / 1.2 var(--font-title); color: rgb(255 248 236 / .88);
}
.node-dot {
  display: grid; place-items: center; width: var(--node, 46px); aspect-ratio: 1; border-radius: 50%; background: var(--ivory); color: var(--night);
  --glow: 0 0 0 1.5px var(--ring), 0 0 22px -4px var(--halo);
  box-shadow: var(--glow);
}
.node-dot svg, .node-dot img { width: 46%; height: 46%; }
.node.ai { --ring: var(--cyan); --halo: rgb(54 226 242 / .5); }
.group-label {
  margin: 0; text-align: center; font: 700 var(--caption-font, 11px) / 1.4 var(--font-title); letter-spacing: .28em;
  text-transform: uppercase; color: rgb(255 248 236 / .62);
}
.ai-group .group-label { color: rgb(54 226 242 / .85); }
.nets-group .group-label { color: rgb(255 181 71 / .9); }
/* Os pulsos tocam três ciclos quando a faixa aparece e param (nada pisca para sempre). */
.works.is-live .pulse.in { animation: pulse-in var(--cycle) var(--ease-out) 3; }
.works.is-live .pulse.out { animation: pulse-out var(--cycle) ease-in-out calc(var(--i) * 70ms) 3; }
.works.is-live .node.ai .node-dot { animation: node-send var(--cycle) ease-out 3; }
.works.is-live [data-out] .node-dot { animation: node-hit var(--cycle) ease-out calc(var(--i) * 70ms) 3; }
@keyframes pulse-in { 0% { stroke-dashoffset: .1; opacity: 1; } 30% { stroke-dashoffset: -1; opacity: 1; } 31%, 100% { opacity: 0; } }
@keyframes pulse-out { 0%, 33% { stroke-dashoffset: .1; opacity: 0; } 34% { opacity: 1; } 70% { stroke-dashoffset: -1; opacity: 1; } 71%, 100% { opacity: 0; } }
@keyframes node-send { 0%, 100% { box-shadow: var(--glow); } 6% { box-shadow: 0 0 0 3px var(--cyan), 0 0 30px 4px rgb(54 226 242 / .6); } }
@keyframes node-hit { 0%, 68%, 100% { box-shadow: var(--glow); } 74% { box-shadow: 0 0 0 3px var(--amber), 0 0 34px 6px rgb(255 181 71 / .7); } }

/* Espaço até a próxima seção (ainda por fazer). */
.next-section-gap { height: 18vh; }

/* ——— Celular largo: nós maiores na faixa dos cabos ——— */
@media (min-width: 440px) {
  :root { --node: 52px; --node-font: 13px; }
}
/* ——— Do tablet para cima ——— */
@media (min-width: 700px) {
  .link-more { display: inline-flex; }
  :root { --node: 60px; --node-font: 14px; --caption-font: 12px; }
  .nets-group .nodes { justify-content: center; gap: 44px; }
}
/* ——— Tablet em pé: a mesma pilha, centralizada ——— */
@media (min-width: 700px) and (orientation: portrait) {
  :root { --logo-h: 32px; --h1: clamp(4.4rem, 9vw, 6rem); --fox-h: 340px; }
  .copy { text-align: center; margin: 0 auto; }
  .lede { margin-inline: auto; }
  .actions { justify-content: center; }
}

/* ——— Telas deitadas (celular deitado, notebook, monitor): UMA composição que escala inteira ———
   Mesma régua da v4: --u acompanha a largura e a altura (o que for mais apertado); texto pequeno com piso de
   legibilidade. A primeira dobra ocupa ~70% da altura: o texto e a raposa na mesma faixa, e a janela aparecendo embaixo
   com o pedido já à vista. */
@media (orientation: landscape) and (min-width: 600px) {
  :root {
    --u: min(calc(100vw / 140), calc((100svh - 80px) / 78));
    --gutter: max(20px, calc(var(--u) * 4));
    --stage-w: min(calc(var(--u) * 124), calc(100vw - 2 * var(--gutter)));
    --spot: .8;
    --fold: 70svh;
    --fox-h: calc(var(--u) * 44);
    --logo-h: max(24px, calc(var(--u) * 3.4));
    --nav-font: max(14px, calc(var(--u) * 1.7));
    --links-gap: calc(var(--u) * 4.4);
    --nav-btn-h: max(38px, calc(var(--u) * 4.4));
    --nav-btn-pad: max(14px, calc(var(--u) * 2));
    --nav-btn-font: max(14px, calc(var(--u) * 1.6));
    --copy-w: calc(var(--u) * 64);
    --h1: calc(var(--u) * 6.6);
    --lede-gap: calc(var(--u) * 2.2);
    --lede-font: max(14px, calc(var(--u) * 1.9));
    --lede-w: calc(var(--u) * 46);
    --actions-top: calc(var(--u) * 3.4);
    --actions-gap: calc(var(--u) * 2.6);
    --cta-h: max(44px, calc(var(--u) * 5.4));
    --cta-pad: max(20px, calc(var(--u) * 3));
    --cta-font: max(15px, calc(var(--u) * 1.8));
    --more-font: max(14px, calc(var(--u) * 1.7));
    --cable-h: calc(var(--u) * 11);
    --node: max(48px, calc(var(--u) * 6.2));
    --node-font: max(13px, calc(var(--u) * 1.5));
    --caption-font: max(11px, calc(var(--u) * 1.15));
    --nodes-gap: calc(var(--u) * 4);
  }
  .nav {
    display: grid; grid-template-columns: 1fr auto 1fr; gap: 24px;
    padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right));
    padding-block: max(calc(var(--u) * 2), env(safe-area-inset-top)) calc(var(--u) * 2);
  }
  .nav-logo { margin-right: 0; justify-self: start; }
  .nav-links { display: flex; }
  .nav-right { grid-column: 3; justify-self: end; }
  .nav .btn-amber { display: inline-flex; }
  /* O texto centrado na altura da raposa (não na faixa toda): desce o bloco e fecha o vão acima da janela. */
  .hero { padding: calc(var(--u) * 8) 0 0; }
  /* Uma fileira: a IA à esquerda (entrada), as redes à direita (saída). */
  .works-row { grid-template-columns: 2fr 5fr; align-items: start; }
  .ai-group { justify-self: center; }
  .nets-group .nodes { justify-content: center; gap: calc(var(--u) * 5.5); }
  .group { gap: calc(var(--u) * 2); }
}
/* Celular deitado: sem espaço para o menu do meio nem para o segundo link (o botão basta), e sem o respiro extra. */
@media (orientation: landscape) and (max-height: 520px) {
  .nav-links, .link-more { display: none; }
  .hero { padding: calc(var(--u) * 3) 0 calc(var(--u) * 5); }
}