/* Tela de carregamento do Super Ciclo App (docs/24): entre o login e o app, enquanto baixa o rebanho para usar sem
   internet. Frases do curral, o anel do ciclo enchendo com o progresso, a vaca na trilha e dicas de uso.
   Classes com prefixo cg- para não colidir com a tela de entrada, que fica por baixo. Desenho aprovado em
   docs/prototipo-carregamento.html. */
@property --c1 { syntax: '<color>'; inherits: true; initial-value: #040a1c; }
@property --c2 { syntax: '<color>'; inherits: true; initial-value: #0a1a40; }
@property --c3 { syntax: '<color>'; inherits: true; initial-value: #13306a; }
@property --c4 { syntax: '<color>'; inherits: true; initial-value: #1c3f7e; }
@property --m1 { syntax: '<color>'; inherits: true; initial-value: #1a3263; }
@property --m2 { syntax: '<color>'; inherits: true; initial-value: #071733; }
:root {
  --indigo: #0A2550; --blueprint: #1240A0; --bright: #2060D0; --sky: #4090E0; --drafting: #DDEEFA;
  --titulo: 'Bricolage Grotesque', 'Poppins', Arial, sans-serif; --texto-f: 'Poppins', Arial, sans-serif;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --simbolo: url('/img/super-ciclo/simbolo.png');
}
.cg-tela { position: fixed; z-index: 30; color: #fff; font-family: var(--texto-f); }
.cg-tela .mask { -webkit-mask: var(--simbolo) center / contain no-repeat; mask: var(--simbolo) center / contain no-repeat; background: currentColor; display: block; }

/* ===== Cena (o mesmo pasto do login, mais calmo) ===== */
.cg-tela { inset: 0; display: flex; flex-direction: column; gap: 16px; padding: 24px 28px 24px; overflow-y: auto; overflow-x: hidden; transition: --c1 1.4s, --c2 1.4s, --c3 1.4s, --c4 1.4s, --m1 1.4s, --m2 1.4s; animation: cg-abre .9s ease-out; }
@keyframes cg-abre { from { filter: brightness(1.8); } to { filter: none; } }
.cg-ceu { position: absolute; inset: 0; background: linear-gradient(180deg, var(--c1) 0%, var(--c2) 40%, var(--c3) 75%, var(--c4) 100%); }
.cg-estrelas { position: absolute; inset: 0 0 40% 0; }
.cg-estrelas i { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #fff; animation: cg-pisca 3s ease-in-out infinite alternate; }
.cg-tela:not(.cg-noite) .cg-estrelas { opacity: 0; }
@keyframes cg-pisca { from { opacity: .2; } to { opacity: 1; } }
.cg-morros { position: absolute; left: -4%; right: -4%; bottom: 0; height: 26%; }
.cg-morros svg { display: block; width: 100%; height: 100%; }
.cg-morros path { animation: cg-ondula 14s ease-in-out infinite alternate; }
@keyframes cg-ondula { to { transform: translateX(-2%); } }
.cg-vinheta { position: absolute; inset: 0; background: radial-gradient(70% 60% at 50% 45%, transparent 40%, rgba(2, 8, 24, .45) 100%); pointer-events: none; }

/* ===== Topo: marca e fazenda ===== */
.cg-topo { position: relative; flex: none; display: flex; gap: 12px; justify-content: space-between; align-items: center; z-index: 2; opacity: 0; animation: cg-surge .8s .2s var(--ease) forwards; }
.cg-marca { display: inline-flex; align-items: center; gap: 10px; }
.cg-marca .cg-simb { width: 38px; height: 28px; }
.cg-marca b { font: 800 18px var(--titulo); }
.cg-marca em { font: 700 10px var(--texto-f); font-style: normal; padding: 3px 7px; border-radius: 99px; letter-spacing: .06em; text-transform: uppercase; background: #fff; color: var(--indigo); }
.cg-fazenda { font-size: 13px; color: rgba(255,255,255,.8); text-align: right; }
.cg-fazenda b { display: block; color: #fff; font-weight: 600; }
@keyframes cg-surge { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* ===== Centro ===== */
.cg-centro { position: relative; flex: 1 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(12px, 2.4vh, 24px); z-index: 2; }
/* O anel do ciclo: enche com o progresso; cada etapa acende quando ele passa */
.cg-anel { position: relative; width: clamp(140px, 26vh, 250px); height: clamp(140px, 26vh, 250px); flex: none; margin: 30px 0 30px; opacity: 0; animation: cg-chega 1s .1s var(--ease) forwards; }
@keyframes cg-chega { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }
.cg-anel > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } /* só o desenho do anel, não os ícones das etapas */
.cg-anel .cg-trilho { fill: none; stroke: rgba(255,255,255,.14); stroke-width: 3; }
.cg-anel .cg-giro { fill: none; stroke: rgba(255,255,255,.22); stroke-width: 1.2; stroke-dasharray: 2 9; transform-origin: 125px 125px; animation: cg-gira 18s linear infinite; }
.cg-anel .cg-progresso { fill: none; stroke: url(#g-anel); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 628.3; stroke-dashoffset: 628.3; transform: rotate(-90deg); transform-origin: 125px 125px;
  transition: stroke-dashoffset .6s var(--ease); filter: drop-shadow(0 0 6px rgba(120, 190, 255, .7)); }
.cg-anel .cg-cometa { transform-origin: 125px 125px; transition: transform .6s var(--ease); }
.cg-anel .cg-cometa circle { fill: #fff; filter: drop-shadow(0 0 6px #9fd0ff) drop-shadow(0 0 12px #4090E0); }
@keyframes cg-gira { to { transform: rotate(360deg); } }
.cg-etapa { position: absolute; transform: translate(-50%, -50%); display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: rgba(10, 37, 80, .85); border: 2px solid rgba(255,255,255,.25); transition: background .4s, border-color .4s, box-shadow .4s, transform .4s var(--ease); }
.cg-etapa svg { width: 16px; height: 16px; color: rgba(255,255,255,.55); transition: color .4s; }
.cg-etapa b { position: absolute; white-space: nowrap; font: 600 10px var(--texto-f); letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.5); transition: color .4s; }
.cg-etapa.cg-on { background: #fff; border-color: #fff; box-shadow: 0 0 0 6px rgba(64,144,224,.3), 0 0 22px rgba(120,190,255,.8); transform: translate(-50%, -50%) scale(1.08); }
.cg-etapa.cg-on svg { color: var(--indigo); }
.cg-etapa.cg-on b { color: #fff; }
.cg-e1 { left: 50%; top: 10%; } .cg-e1 b { bottom: 40px; }
.cg-e2 { left: 90%; top: 50%; } .cg-e2 b { left: 42px; }
.cg-e3 { left: 50%; top: 90%; } .cg-e3 b { top: 40px; }
.cg-e4 { left: 10%; top: 50%; } .cg-e4 b { right: 42px; }
.cg-miolo { position: absolute; inset: 21%; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle, rgba(64,144,224,.35), rgba(10,37,80,0) 70%); animation: cg-pulsa 2.4s ease-in-out infinite; }
.cg-miolo .mask { width: 66%; height: 52%; animation: cg-respira 2.4s ease-in-out infinite; transform-origin: bottom; }
@keyframes cg-pulsa { 50% { box-shadow: 0 0 0 10px rgba(64,144,224,.08); } }
@keyframes cg-respira { 50% { transform: scale(1.04, 1.06); } }
.cg-anel.cg-pronto .cg-miolo { animation: cg-estoura .9s var(--ease); }
@keyframes cg-estoura { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,.6); } 100% { box-shadow: 0 0 0 60px rgba(255,255,255,0); } }

/* A frase do curral: a velha sobe e some, a nova vem de baixo */
.cg-frase { position: relative; height: 36px; width: min(640px, 100%); text-align: center; }
.cg-frase span { position: absolute; inset: 0; font: 700 clamp(19px, 2.4vw, 26px)/36px var(--titulo); letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-shadow: 0 2px 14px rgba(0,0,0,.25); transition: opacity .5s, transform .5s var(--ease), filter .5s; }
.cg-frase span.cg-vem { opacity: 0; transform: translateY(18px); filter: blur(6px); }
.cg-frase span.cg-vai { opacity: 0; transform: translateY(-18px); filter: blur(6px); }

/* A trilha: a vaca anda até o ponto do progresso, levantando poeira */
.cg-trilha { position: relative; width: min(440px, 100%); height: 38px; flex: none; }
.cg-trilha .cg-chao { position: absolute; left: 0; right: 0; bottom: 2px; height: 3px; border-radius: 3px; background: rgba(255,255,255,.18); overflow: hidden; }
.cg-trilha .cg-chao i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #9fd0ff, #fff); transition: width .6s var(--ease); }
.cg-trilha .cg-postes { position: absolute; left: 0; right: 0; bottom: 2px; height: 14px; background: repeating-linear-gradient(90deg, rgba(255,255,255,.28) 0 2px, transparent 2px 44px); }
.cg-vaquinha { position: absolute; bottom: 4px; left: 0; width: 46px; height: 34px; margin-left: -23px; transition: left .6s var(--ease); color: #fff; }
.cg-vaquinha .mask { width: 100%; height: 100%; animation: cg-trota .36s ease-in-out infinite alternate; }
.cg-vaquinha.cg-parada .mask { animation: none; }
@keyframes cg-trota { from { transform: translateY(0) rotate(-1deg); } to { transform: translateY(-3px) rotate(1deg); } }
.cg-poeira { position: absolute; bottom: 2px; width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.5); animation: cg-poeira .9s ease-out forwards; pointer-events: none; }
@keyframes cg-poeira { to { opacity: 0; transform: translate(-18px, -10px) scale(2.4); } }
.cg-passo { display: flex; justify-content: space-between; gap: 12px; width: min(440px, 100%); margin-top: -6px; flex: none; font-size: 13px; color: rgba(255,255,255,.82); }
.cg-passo b { font: 700 13px var(--texto-f); color: #fff; font-variant-numeric: tabular-nums; }

/* Dica do curral */
.cg-dica { position: relative; flex: none; margin: 0 auto; width: min(560px, 100%); z-index: 2; display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 18px; border-radius: 16px; background: rgba(8, 24, 56, .42); border: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  opacity: 0; animation: cg-surgeDica .8s .9s var(--ease) forwards; }
@keyframes cg-surgeDica { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.cg-dica .cg-ic { flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: rgba(255,255,255,.14); }
.cg-dica .cg-ic svg { width: 17px; height: 17px; }
.cg-dica p { font-size: 13.5px; line-height: 1.5; transition: opacity .4s; }
.cg-dica p small { display: block; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: #9fd0ff; margin-bottom: 2px; }

/* Fim: tudo pronto, a cena clareia e o app aparece */
.cg-saida { position: absolute; inset: 0; z-index: 8; background: #eef3f9; opacity: 0; pointer-events: none; }
.cg-saida.cg-on { animation: cg-saida 1.1s .6s ease-in forwards; }
@keyframes cg-saida { to { opacity: 1; } }

@media (max-width: 760px) {
  .cg-tela { padding: 18px 18px 24px; gap: 12px; }
  .cg-fazenda { font-size: 11.5px; }
  .cg-fazenda span { display: none; }
  .cg-marca b { white-space: nowrap; font-size: 16px; }
  /* Rótulos dos lados vão para baixo do ponto, para não sair da tela */
  .cg-e2 b, .cg-e4 b { left: 50%; right: auto; top: 32px; transform: translateX(-50%); }
  .cg-anel { width: clamp(140px, 28vh, 200px); height: clamp(140px, 28vh, 200px); margin: 26px 0 40px; }
  .cg-etapa { width: 28px; height: 28px; }
  .cg-etapa b { font-size: 9px; }
  .cg-frase { height: 54px; }
  .cg-frase span { white-space: normal; line-height: 27px; font-size: 19px; }
  .cg-dica { padding: 12px 14px; }
  .cg-dica p { font-size: 13px; }
}
/* Tela muito baixa: a dica sai, para nada ficar por cima de nada nem precisar rolar */
@media (max-height: 600px) {
  .cg-dica { display: none; }
  .cg-tela { padding-bottom: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .01ms !important; }
}