/* =====================================================================
   04 · cosmic — Cosmic Edition (p14): o conceito que amarra tudo.
   f-astro-run varrido de fundo; parágrafos um por vez; constelações de
   referência (só nomes, formas abstratas) ligadas por raios; fecha com o
   logo num quadro octogonal com raios e a frase-assinatura.
   ===================================================================== */

/* ---- Filme ---- */
#cosmic .cos-media {
  position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s var(--ease-out);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 90%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 90%, transparent 100%);
}
#cosmic.has-media .cos-media { opacity: 1; }
#cosmic .cos-media .veil-l { background: linear-gradient(90deg, rgba(0, 0, 0, .9) 0%, rgba(0, 0, 0, .66) 30%, rgba(0, 0, 0, .18) 52%, transparent 66%); }
#cosmic .cos-dark { position: absolute; inset: 0; background: #03010a; opacity: 0; pointer-events: none; }

/* ---- Coluna de texto (terço esquerdo) com chão próprio ---- */
#cosmic .cos-copy {
  position: absolute; left: 0; top: 0; bottom: 0; width: min(47vw, 660px); z-index: 2;
  display: flex; align-items: center;
  padding: calc(var(--hud-h) + 2vh) 0 4vh var(--gutter);
}
#cosmic .cos-copy::before {
  content: ''; position: absolute; inset: 0 -12% 0 0; z-index: -1; pointer-events: none;
  background: radial-gradient(90% 70% at 22% 52%, rgba(3, 1, 10, .7), rgba(3, 1, 10, .35) 55%, transparent 78%);
}
#cosmic .cos-copy__in { width: 100%; max-width: 560px; }
/* flex: as margens negativas das máscaras do SplitText não colapsam entre linhas (+8% de entrelinha) */
#cosmic .cos-title { font-size: min(7.2vw, 12.4vh); margin-top: 1.2vh; display: flex; flex-direction: column; }
#cosmic .cos-title > span { display: block; }
#cosmic .cos-title .sl-mask { padding-right: .12em; margin-right: -.12em; } /* itálico não raspa na máscara */
/* celular baixo (cos--tight, medido no JS): o céu de referências não cabe acima do título.
   Kicker e título saem de cena quando o céu chega (--cos-head 0→1, varrido pela cena) e o
   degradê de apoio da coluna desce junto, para não escurecer as constelações de baixo. */
#cosmic.cos--tight .cos-head { opacity: calc(1 - var(--cos-head, 0)); transform: translateY(calc(var(--cos-head, 0) * -14px)); }

/* pastilha translúcida só atrás do parágrafo (o astronauta do filme passa por trás),
   com o filete neon vertical dos parágrafos da p14 */
#cosmic .cos-slot { position: relative; isolation: isolate; margin: 2.4vh 0 0 -22px; padding: 14px 22px 16px; }
#cosmic .cos-slot::before { content: ''; position: absolute; left: 0; top: 14px; bottom: 14px; width: 2px; background: var(--neon-v); box-shadow: 0 0 10px rgba(0, 216, 248, .7); }
#cosmic .cos-slot::after {
  content: ''; position: absolute; inset: 0 -80px 0 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgba(5, 1, 15, .7), rgba(5, 1, 15, .5) 60%, rgba(5, 1, 15, 0));
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  -webkit-mask-image: linear-gradient(90deg, #000 62%, transparent), linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, #000 62%, transparent), linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);
  mask-composite: intersect;
}
#cosmic .cos-count { display: flex; align-items: center; gap: .6em; font-family: var(--f-mono); font-size: 12px; letter-spacing: .22em; color: var(--mute); margin-bottom: 1.2vh; }
#cosmic .cos-count::before { content: ''; width: 28px; height: 1px; background: var(--neon); box-shadow: 0 0 8px rgba(240, 0, 240, .6); }
#cosmic .cos-count__win { display: inline-block; height: 1.4em; line-height: 1.4; overflow: hidden; }
#cosmic .cos-count__strip { display: flex; flex-direction: column; }
#cosmic .cos-count__strip b { display: block; height: 1.4em; color: var(--cyan); font-weight: 700; }
#cosmic .cos-paras { display: grid; }
#cosmic .cos-paras > * { grid-area: 1 / 1; }
#cosmic .cos-p { font-size: clamp(16px, .5vw + 10px, 19.5px); line-height: 1.58; color: #d9d3ef; max-width: 36em; }
#cosmic .cos-p b { color: #fff; font-weight: 600; }
#cosmic .cos-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2.6vh; }
#cosmic .cos-chips .chip { font-size: 11px; padding: .5em .85em; }

/* ---- Céu de referências ---- */
#cosmic .cos-sky { position: absolute; inset: 0; pointer-events: none; z-index: 1; transform-origin: 72% 35%; }
#cosmic .cos-links { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; }
#cosmic .cos-link { fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
#cosmic .cos-link--c { stroke: #6ff0ff; filter: drop-shadow(0 0 4px rgba(0, 216, 248, .95)) drop-shadow(0 0 10px rgba(120, 0, 240, .7)); }
#cosmic .cos-link--m { stroke: #ff7cff; filter: drop-shadow(0 0 4px rgba(240, 0, 240, .95)) drop-shadow(0 0 10px rgba(120, 0, 240, .7)); }
#cosmic .cos-cst { position: absolute; left: var(--x); top: var(--y); width: var(--w); margin: 0; }
#cosmic .cos-cst svg { width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 0 3px var(--glow)); }
/* o astronauta do filme corre entre 35% e 60% da largura: o céu de referências fica à direita dele */
#cosmic .cos-cst[data-k="bowie"] { --x: 61%; --y: 11%; --w: 9.5%; --glow: rgba(0, 216, 248, .9); }
#cosmic .cos-cst[data-k="floyd"] { --x: 73.5%; --y: 8.5%; --w: 11%; --glow: rgba(240, 0, 240, .9); }
#cosmic .cos-cst[data-k="elton"] { --x: 87%; --y: 12%; --w: 8%; --glow: rgba(0, 216, 248, .9); }
#cosmic .cos-cst[data-k="starwars"] { --x: 63%; --y: 43%; --w: 11%; --glow: rgba(240, 0, 240, .9); }
#cosmic .cos-cst[data-k="guardioes"] { --x: 79%; --y: 42%; --w: 12%; --glow: rgba(0, 216, 248, .9); }
#cosmic .cos-ln { fill: none; stroke: rgba(190, 240, 255, .78); stroke-width: 1.1; stroke-linecap: round; }
#cosmic .cos-st { fill: #fff; transform-box: fill-box; transform-origin: center; }
#cosmic .cos-st--big { fill: #f4fdff; }
/* rótulo = plaqueta opaca de HUD: o anel de raios corre por baixo dela e nunca risca um nome */
#cosmic .cos-cst figcaption {
  margin: 8px 0 0 -8px; padding: 4px 9px 4px 8px; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  font-family: var(--f-mono); font-size: clamp(11px, .3vw + 6px, 15px); line-height: 1.3; letter-spacing: .2em; text-transform: uppercase; color: #e6f8ff;
  background: rgba(4, 1, 13, .86); box-shadow: inset 0 0 0 1px rgba(190, 240, 255, .1);
  text-shadow: 0 0 2px #000;
}
#cosmic .cos-cst figcaption::before { content: ''; width: 14px; height: 1px; background: var(--glow); box-shadow: 0 0 6px var(--glow); flex: none; }
/* halo dos dois sóis (Star Wars): anel fino, lê como sol e não como mais uma estrela */
#cosmic .cos-halo { fill: none; stroke: rgba(255, 226, 250, .72); stroke-width: 1; }
.is-live#cosmic .cos-st { animation: cos-tw 2.6s ease-in-out infinite alternate; }
#cosmic .cos-st:nth-of-type(3n) { animation-delay: -.9s; }
#cosmic .cos-st:nth-of-type(3n + 1) { animation-delay: -1.7s; animation-duration: 3.3s; }
@keyframes cos-tw { from { opacity: 1; } to { opacity: .45; } }
/* passar o mouse no nome do parágrafo acende a constelação correspondente */
#cosmic .cos-cst svg, #cosmic .cos-cst figcaption { transition: filter .35s var(--ease-out), color .35s; }
#cosmic .cos-cst.is-hot svg { filter: drop-shadow(0 0 3px var(--glow)) drop-shadow(0 0 14px var(--glow)) brightness(1.5); }
#cosmic .cos-cst.is-hot figcaption { color: #fff; }
#cosmic .cos-p b[data-k] { cursor: default; }

/* ---- Logo no quadro octogonal ---- */
#cosmic .cos-logo {
  position: absolute; z-index: 3; right: var(--gutter); top: calc(var(--hud-h) + 2vh); bottom: 4vh;
  width: min(40vw, 57vh * 1.22); display: flex; flex-direction: column; justify-content: center; gap: 2.6vh;
  pointer-events: none;
}
#cosmic .cos-logo__box { position: relative; width: 100%; aspect-ratio: 1.22 / 1; }
#cosmic .cos-logo__frame, #cosmic .cos-logo__metal, #cosmic .cos-logo__screen {
  clip-path: polygon(var(--bv) 0, calc(100% - var(--bv)) 0, 100% var(--bv), 100% calc(100% - var(--bv)), calc(100% - var(--bv)) 100%, var(--bv) 100%, 0 calc(100% - var(--bv)), 0 var(--bv));
}
#cosmic .cos-logo__frame {
  --bv: var(--bv-o, 44px); position: absolute; inset: 0;
  background: linear-gradient(135deg, var(--cyan), var(--violet) 50%, var(--magenta));
}
/* o clip-path corta o filtro: o brilho do quadro mora atrás dele */
#cosmic .cos-logo__box::before {
  content: ''; position: absolute; inset: 3% 2%; border-radius: 12%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(120, 0, 240, .55), rgba(240, 0, 240, .22) 60%, transparent);
  filter: blur(26px);
}
#cosmic .cos-logo__metal {
  --bv: calc(var(--bv-o, 44px) - 1.3px); position: absolute; inset: 3px;
  background:
    radial-gradient(circle at 50% 7px, #e6e9f0 0 1.7px, #3c3f52 2.3px 3.6px, transparent 4.2px),
    radial-gradient(circle at 50% calc(100% - 7px), #e6e9f0 0 1.7px, #3c3f52 2.3px 3.6px, transparent 4.2px),
    radial-gradient(circle at 7px 50%, #e6e9f0 0 1.7px, #3c3f52 2.3px 3.6px, transparent 4.2px),
    radial-gradient(circle at calc(100% - 7px) 50%, #e6e9f0 0 1.7px, #3c3f52 2.3px 3.6px, transparent 4.2px),
    radial-gradient(circle at 22% 7px, #e6e9f0 0 1.7px, #3c3f52 2.3px 3.6px, transparent 4.2px),
    radial-gradient(circle at 78% 7px, #e6e9f0 0 1.7px, #3c3f52 2.3px 3.6px, transparent 4.2px),
    radial-gradient(circle at 22% calc(100% - 7px), #e6e9f0 0 1.7px, #3c3f52 2.3px 3.6px, transparent 4.2px),
    radial-gradient(circle at 78% calc(100% - 7px), #e6e9f0 0 1.7px, #3c3f52 2.3px 3.6px, transparent 4.2px),
    repeating-linear-gradient(115deg, rgba(255, 255, 255, .035) 0 2px, transparent 2px 6px),
    linear-gradient(180deg, rgba(255, 255, 255, .16), transparent 30%, rgba(0, 0, 0, .3) 70%, rgba(255, 255, 255, .08)),
    linear-gradient(160deg, #5b5f72 0%, #22202f 38%, #3d4052 62%, #14121f 100%);
}
#cosmic .cos-logo__screen {
  --bv: calc(var(--bv-o, 44px) - 6px); position: absolute; inset: clamp(12px, 1.1vw, 17px);
  background:
    radial-gradient(1.4px 1.4px at 12% 18%, #fff, transparent), radial-gradient(1.2px 1.2px at 27% 72%, #bff6ff, transparent),
    radial-gradient(1.6px 1.6px at 41% 12%, #fff, transparent), radial-gradient(1.1px 1.1px at 58% 84%, #ffd1ff, transparent),
    radial-gradient(1.5px 1.5px at 73% 22%, #fff, transparent), radial-gradient(1.2px 1.2px at 88% 64%, #bff6ff, transparent),
    radial-gradient(1px 1px at 8% 88%, #fff, transparent), radial-gradient(1.3px 1.3px at 93% 9%, #ffd1ff, transparent),
    radial-gradient(1px 1px at 50% 50%, #fff, transparent), radial-gradient(1.2px 1.2px at 34% 38%, #fff, transparent),
    radial-gradient(1px 1px at 66% 44%, #bff6ff, transparent), radial-gradient(1.4px 1.4px at 19% 52%, #fff, transparent),
    radial-gradient(60% 55% at 28% 70%, rgba(0, 120, 220, .38), transparent 70%),
    radial-gradient(55% 60% at 78% 30%, rgba(240, 0, 240, .3), transparent 70%),
    radial-gradient(80% 80% at 50% 50%, rgba(120, 0, 240, .35), transparent 75%),
    #04010d;
  box-shadow: inset 0 0 0 1px rgba(0, 216, 248, .35);
}
#cosmic .cos-logo__img { position: absolute; left: 11%; top: 7%; width: 78%; height: 86%; object-fit: contain; filter: drop-shadow(0 0 18px rgba(120, 0, 240, .6)); }
#cosmic .cos-logo__glare { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .22) 49%, rgba(120, 240, 255, .12) 53%, transparent 62%); transform: translateX(-160%); }
#cosmic .cos-logo__bolts { position: absolute; left: -26px; top: -26px; width: calc(100% + 52px); height: calc(100% + 52px); overflow: visible; }
#cosmic .cos-bolt { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#cosmic .cos-bolt--c { stroke: #7cf3ff; filter: drop-shadow(0 0 3px rgba(0, 216, 248, 1)) drop-shadow(0 0 9px rgba(0, 216, 248, .6)); }
#cosmic .cos-bolt--m { stroke: #ff86ff; filter: drop-shadow(0 0 3px rgba(240, 0, 240, 1)) drop-shadow(0 0 9px rgba(240, 0, 240, .6)); }
#cosmic .cos-bolt--v { stroke: #c9a2ff; filter: drop-shadow(0 0 3px rgba(120, 0, 240, 1)) drop-shadow(0 0 9px rgba(120, 0, 240, .7)); }
.is-live#cosmic .cos-logo__bolts { animation: cos-flicker 2.8s steps(1, end) infinite; }
@keyframes cos-flicker { 0%, 100% { opacity: 1; } 8% { opacity: .55; } 10% { opacity: 1; } 46% { opacity: .8; } 48% { opacity: .35; } 51% { opacity: 1; } 77% { opacity: .7; } }

#cosmic .cos-phrase { text-align: center; padding: clamp(14px, 1.6vh, 20px) clamp(18px, 2vw, 30px); }
#cosmic .cos-phrase span {
  display: inline-block; /* quebra entre as duas frases, nunca "explorar." sozinho */
  font-family: var(--f-display); font-style: italic; font-weight: 800; font-size: clamp(19px, 1.6vw, 30px); line-height: 1.2; letter-spacing: .01em;
  background: var(--chrome); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .8));
}

/* ---- Celular: céu em cima, texto embaixo ---- */
@media (max-width: 820px) {
  #cosmic .cos-media .veil-l { background: linear-gradient(0deg, rgba(0, 0, 0, .92) 0%, rgba(0, 0, 0, .78) 40%, rgba(0, 0, 0, .2) 62%, transparent 76%); }
  #cosmic .cos-copy { left: 0; right: 0; top: auto; bottom: 0; width: auto; align-items: flex-end; padding: 0 var(--gutter) 3vh; }
  #cosmic .cos-copy::before { inset: -10vh 0 0; background: linear-gradient(0deg, rgba(3, 1, 10, .9) 0 58%, transparent); }
  #cosmic.cos--tight .cos-copy::before { transform: translateY(calc(var(--cos-head, 0) * var(--cos-head-h, 0px))); }
  #cosmic .cos-copy__in { max-width: none; }
  #cosmic .cos-title { font-size: min(12.6vw, 7.4vh); margin-top: .6vh; }
  #cosmic .cos-slot { margin-top: 1.4vh; }
  #cosmic .cos-count { font-size: 10px; margin-bottom: .8vh; }
  #cosmic .cos-p { font-size: 15px; line-height: 1.5; }
  #cosmic .cos-chips { gap: 6px; margin-top: 1.8vh; }
  #cosmic .cos-chips .chip { font-size: 9.5px; letter-spacing: .1em; padding: .45em .7em; }
  #cosmic .cos-sky { transform-origin: 50% 20%; }
  #cosmic .cos-cst figcaption { font-size: 9px; letter-spacing: .12em; gap: 5px; margin: 4px 0 0 -5px; padding: 3px 6px 3px 5px; }
  #cosmic .cos-cst figcaption::before { width: 8px; }
  #cosmic .cos-ln { stroke-width: 1.7; }
  /* fileira de cima: nunca sob o HUD; a de baixo desce o quanto for preciso para não encostar
     nos rótulos de cima (altura da figura = largura × 0,7 → conta em vw) */
  #cosmic .cos-cst[data-k="bowie"] { --x: 5%; --y: max(9%, calc(var(--hud-h) + 8px)); --w: 25%; }
  #cosmic .cos-cst[data-k="floyd"] { --x: 37%; --y: max(8.5%, calc(var(--hud-h) + 6px)); --w: 26%; }
  #cosmic .cos-cst[data-k="elton"] { --x: 72%; --y: max(9.5%, calc(var(--hud-h) + 10px)); --w: 22%; }
  #cosmic .cos-cst[data-k="starwars"] { --x: 9%; --y: max(22.5%, calc(max(9%, var(--hud-h) + 8px) + 14vw + 32px)); --w: 28%; }
  #cosmic .cos-cst[data-k="guardioes"] { --x: 52%; --y: max(23%, calc(max(8.5%, var(--hud-h) + 6px) + 14.5vw + 32px)); --w: 31%; }
  #cosmic .cos-slot { margin-left: -12px; padding: 10px 12px 12px; }
  #cosmic .cos-logo { left: var(--gutter); right: var(--gutter); width: auto; top: calc(var(--hud-h) + 2vh); bottom: 5vh; gap: 2.4vh; align-items: center; }
  #cosmic .cos-logo__box { width: min(100%, 46vh * 1.22); }
  #cosmic .cos-phrase { width: min(100%, 46vh * 1.22); }
  #cosmic .cos-phrase span { display: block; font-size: clamp(17px, 5vw, 22px); }
  #cosmic .cos-logo__bolts { left: -16px; top: -16px; width: calc(100% + 32px); height: calc(100% + 32px); }
}

/* telas baixas (projetor 1280×720): aperta o respiro vertical */
@media (min-width: 821px) and (max-height: 760px) {
  #cosmic .cos-title { font-size: min(7vw, 12vh); }
  #cosmic .cos-slot { margin-top: 1.8vh; }
  #cosmic .cos-p { font-size: 16px; line-height: 1.52; }
  #cosmic .cos-chips { margin-top: 2vh; }
  #cosmic .cos-chips .chip { font-size: 10px; }
  /* a faixa de cima do céu desce para sair do degradê do HUD */
  #cosmic .cos-cst[data-k="bowie"] { --y: max(14%, calc(var(--hud-h) + 12px)); }
  #cosmic .cos-cst[data-k="floyd"] { --y: max(12%, calc(var(--hud-h) + 10px)); }
  #cosmic .cos-cst[data-k="elton"] { --y: max(15%, calc(var(--hud-h) + 14px)); }
  #cosmic .cos-cst[data-k="starwars"] { --y: 46%; }
  #cosmic .cos-cst[data-k="guardioes"] { --y: 45%; }
}

/* desktop estreito (janela de 821–1100 px): os rótulos têm largura fixa e as figuras encolhem
   com a tela — rótulo menor e colunas um pouco mais afastadas, para um nome nunca encostar no outro */
@media (min-width: 821px) and (max-width: 1100px) {
  #cosmic .cos-cst figcaption { font-size: 10px; letter-spacing: .12em; gap: 6px; }
  #cosmic .cos-cst figcaption::before { width: 9px; }
  #cosmic .cos-cst[data-k="bowie"] { --x: 59%; }
  #cosmic .cos-cst[data-k="floyd"] { --x: 73%; }
  #cosmic .cos-cst[data-k="elton"] { --x: 87.5%; }
}

/* celular deitado / janela muito baixa: coluna compacta; os chips repetem palavras do parágrafo 2,
   então saem de cena para o texto caber inteiro entre o HUD e o pé da tela */
@media (min-width: 821px) and (max-height: 500px) {
  #cosmic .cos-copy { padding: calc(var(--hud-h) + 6px) 0 3vh var(--gutter); width: min(52vw, 660px); }
  #cosmic .cos-kicker { font-size: 10px; }
  #cosmic .cos-kicker::before { width: 28px; }
  #cosmic .cos-title { font-size: min(5vw, 10.5vh); margin-top: .4vh; }
  #cosmic .cos-slot { margin-top: 1vh; padding-block: 8px 10px; }
  #cosmic .cos-count { font-size: 10px; margin-bottom: 8px; }
  #cosmic .cos-p { font-size: 14px; line-height: 1.45; }
  #cosmic .cos-chips { display: none; }
  #cosmic .cos-cst figcaption { font-size: 9px; letter-spacing: .1em; gap: 5px; padding: 3px 6px 3px 5px; margin: 5px 0 0 -5px; }
  #cosmic .cos-cst figcaption::before { width: 8px; }
  #cosmic .cos-logo { top: calc(var(--hud-h) + 6px); bottom: 3vh; gap: 2vh; width: min(40vw, 50vh * 1.22); }
  #cosmic .cos-phrase { padding: 10px 16px; }
  #cosmic .cos-phrase span { font-size: 17px; }
}

/* ---- Movimento reduzido: tudo visível, empilhado, sem pin ---- */
#cosmic.cos--static .stage { height: auto; min-height: 100svh; overflow-x: clip; overflow-y: visible; /* x: a pastilha do parágrafo (::after, -80px) e os raios do quadro não alargam o documento */ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "copy logo" "sky sky"; align-items: center; gap: 5vh 4vw; padding: calc(var(--hud-h) + 6vh) var(--gutter) 8vh; }
#cosmic.cos--static .cos-copy { grid-area: copy; position: relative; inset: auto; width: auto; padding: 0; }
#cosmic.cos--static .cos-paras { display: grid; gap: 1em; }
#cosmic.cos--static .cos-paras > * { grid-area: auto; }
#cosmic.cos--static .cos-count { display: none; }
#cosmic.cos--static .cos-logo { grid-area: logo; position: relative; inset: auto; width: 100%; max-width: 560px; justify-self: end; }
#cosmic.cos--static .cos-sky { grid-area: sky; position: relative; inset: auto; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4vh 3vw; }
#cosmic.cos--static .cos-links { display: none; }
#cosmic.cos--static .cos-cst { position: relative; left: auto; top: auto; width: min(17%, 220px); }
#cosmic.cos--static .cos-dark { opacity: .42; }
@media (max-width: 820px) {
  #cosmic.cos--static .stage { grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "sky" "logo"; }
  #cosmic.cos--static .cos-copy::before { display: none; }
  #cosmic.cos--static .cos-dark { opacity: .56; } /* sem o degradê da coluna: o título cromado sobre o traje branco pede mais fundo */
  #cosmic.cos--static .cos-cst { width: 44%; }
  #cosmic.cos--static .cos-logo { justify-self: center; }
}
/* o palco estático é mais alto que a tela: o filme fica só na primeira tela (com o degradê de
   baixo); constelações e logo descem para o céu estrelado em vez de um astronauta ampliado 3× */
#cosmic.cos--static .cos-media { bottom: auto; height: 100vh; height: 100svh; }