/* Cena de abertura do horus.tenet.ia.br — só CSS (o site não tem script).
   Um ciclo de 12 s em tempo acelerado: alguém entra e senta no sofá de espera,
   o relógio da espera corre, passa do limite de 5 min, a zona vira cornalina
   e o aviso chega no celular do dono. Com reduced-motion, a cena fica parada
   no quadro final (o que importa: o alerta com o tempo). */

@property --seg { syntax: "<integer>"; inherits: true; initial-value: 372; }

.cena {
  --ciclo: 12s;
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--linha);
  background: #10131a;
  aspect-ratio: 16 / 10;
  max-width: 100%;
  isolation: isolate;
  /* minutos e segundos saem do mesmo número, para nunca descasarem */
  counter-reset: m round(down, calc(var(--seg) / 60), 1) s mod(var(--seg), 60);
}
.cena > svg.sala { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* zona do sofá */
.cena .zona {
  position: absolute; left: 4%; top: 52%; width: 50%; height: 38%;
  border: 1.5px dashed var(--faianca); background: color-mix(in srgb, var(--faianca) 10%, transparent);
  border-radius: 4px;
}
.cena .zona b {
  position: absolute; right: -1.5px; top: -22px; padding: 3px 8px;
  font: 500 .66rem/1 var(--mono); letter-spacing: .06em; color: var(--obsidiana); background: var(--faianca);
}

/* pessoa + caixa de detecção (andam juntas) */
.cena .pessoa { position: absolute; left: 11%; top: 40%; width: 13%; height: 44%; }
.cena .pessoa i { position: absolute; left: 30%; top: 8%; width: 40%; aspect-ratio: 1; border-radius: 50%; background: #5c6472; }
.cena .pessoa u { position: absolute; left: 18%; top: 34%; width: 64%; height: 56%; border-radius: 30% 30% 12% 12%; background: #5c6472; }
.cena .caixa { position: absolute; inset: 0; border: 2px solid var(--cornalina); }
.cena .tempo {
  position: absolute; left: -2px; top: 100%; white-space: nowrap; padding: 4px 8px;
  font: 600 .72rem/1 var(--texto); color: #fff; background: var(--cornalina);
  font-variant-numeric: tabular-nums;
}
.cena .tempo::after { content: "Esperando · " counter(m) ":" counter(s, decimal-leading-zero); }

/* o aviso no celular */
.cena .aviso {
  position: absolute; right: 3.5%; top: 5%; width: min(62%, 300px);
  display: grid; grid-template-columns: 32px 1fr; gap: 10px; align-items: start;
  padding: 10px 12px; border-radius: 18px;
  background: rgba(38, 45, 58, .86); border: 1px solid #39414f;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .4);
}
.cena .aviso svg { width: 32px; height: 32px; display: block; }
.cena .aviso p { margin: 0; font-size: .74rem; line-height: 1.35; color: var(--papiro); }
.cena .aviso p b { display: block; color: #fff; font-weight: 600; font-size: .8rem; }
.cena .aviso small { display: block; font: .62rem/1.2 var(--mono); color: var(--cinza); letter-spacing: .06em; margin-bottom: 2px; }

.cena .relogio {
  position: absolute; left: 3%; bottom: 4%;
  font: .62rem/1 var(--mono); letter-spacing: .06em; color: var(--cinza);
}

@media (prefers-reduced-motion: no-preference) {
  .cena { animation: tempo var(--ciclo) linear infinite; }
  .cena .pessoa { animation: chega var(--ciclo) cubic-bezier(.3, .7, .2, 1) infinite; }
  .cena .caixa, .cena .tempo { animation: detecta var(--ciclo) linear infinite; }
  .cena .zona { animation: zona var(--ciclo) steps(1, end) infinite; }
  .cena .zona b { animation: zona-rotulo var(--ciclo) steps(1, end) infinite; }
  .cena .aviso { animation: aviso var(--ciclo) cubic-bezier(.2, .8, .2, 1) infinite; }
}

/* 0–18%: entra; 18–70%: espera correndo; 62%: passa de 5 min; 64–92%: aviso; 100%: some */
@keyframes chega {
  0% { transform: translateX(260%); opacity: 0; }
  4% { opacity: 1; }
  18%, 94% { transform: translateX(0); opacity: 1; }
  100% { transform: translateX(0); opacity: 0; }
}
@keyframes detecta {
  0%, 16% { opacity: 0; }
  20%, 94% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes tempo {
  0%, 18% { --seg: 0; }
  70%, 100% { --seg: 372; }
}
@keyframes zona {
  0% { border-color: var(--faianca); border-style: dashed; background: color-mix(in srgb, var(--faianca) 10%, transparent); }
  60% { border-color: var(--cornalina); border-style: solid; background: color-mix(in srgb, var(--cornalina) 12%, transparent); }
  96% { border-color: var(--faianca); border-style: dashed; background: color-mix(in srgb, var(--faianca) 10%, transparent); }
}
@keyframes zona-rotulo {
  0% { background: var(--faianca); color: var(--obsidiana); }
  60% { background: var(--cornalina); color: #fff; }
  96% { background: var(--faianca); color: var(--obsidiana); }
}
@keyframes aviso {
  0%, 62% { transform: translateY(-140%); opacity: 0; }
  68%, 92% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(-140%); opacity: 0; }
}

@media (max-width: 520px) {
  .cena { aspect-ratio: 4 / 3.4; }
  .cena .aviso { width: 78%; }
}