// === Escena IN04 — "El servicio, doblado y tras una red mundial" ===
// Duración real del mp3: 34.4s. SlideCanvas variant="light-soft".
// Motivo gemelo: el programa corre en DOS servidores gemelos (dos datacenters).
// Si A cae, B sigue (relevo en GRIS, no rojo). Encima, una red edge mundial
// (Cloudflare) enruta al más cercano y sano, y hace de ESCUDO: frena ataques
// (rojo dosificado). La puerta no es una máquina que se pueda tirar (IP única
// tachada = así NO); es una red del tamaño del planeta.
// LOCUCIÓN (audio/escena-04.mp3):
// "El programa también está doblado. Corre en dos centros de datos distintos.
// Si uno cae, el otro sigue, sin que tú lo notes. ¿Y quién decide a cuál te
// conecta? Una red repartida por todo el mundo. Te lleva siempre al más
// cercano, y al que está sano. Esa red es también un escudo. Frena los ataques
// antes de que lleguen a tus servidores. La puerta de entrada no es una máquina
// que se pueda tirar. Es una red del tamaño del planeta. Datos y servicio,
// doblados. Queda lo mejor: tus archivos."
function EscenaIN04({ t }){
const T = {
gemelos: 0.35, // "El programa también está doblado" → 2 servidores gemelos (A / B)
dc: 3.04, // "dos centros de datos" → etiquetas Datacenter 1 / Datacenter 2
cae: 5.08, // "Si uno cae" → A se ATENÚA a gris; tráfico se desvía a B (verde)
mundo: 11.63, // "red repartida por todo el mundo" → banda de nodos edge + píldora Cloudflare
ruta: 15.68, // "al que está sano" → enrutado usuario → edge más cercano → Servidor B
escudo: 18.17, // "también un escudo" → escudo se superpone a la capa edge
ataque: 20.28, // "Frena los ataques" → flechas rojas golpean el escudo y se paran
ipunica:25.58, // "una máquina que se pueda tirar" → apunte contraste: nodo "IP única" tachado (esto NO)
glow: 27.99, // "del tamaño del planeta" → la banda edge mundial hace glow (protagonista)
salida: 32.35, // "Queda lo mejor" → píldora salida "TUS ARCHIVOS →"
};
const C = { blue:'#0085FF', green:'#10B981', green2:'#56E16A', orange:'#FB8C00',
red:'#EF4444', ink:'#0F172A', gray:'#64748B', grayL:'#94A3B8', border:'#E2E8F0' };
// ---- Geometría (1920×1080) ----
const EDGE_Y = 322;
const edgeX = [388, 615, 842, 1069, 1296, 1523];
const SA = { x:470, y:600, w:300, h:206, cx:620 }; // Servidor A (izq)
const SB = { x:1150, y:600, w:300, h:206, cx:1300 }; // Servidor B (der)
const Scy = 703;
const USER = { x:150, y:648 };
const SHX = 960, SHY = 300;
// ---- Servidores gemelos (A calmado, B = "el gemelo" con overshoot) ----
const saP = clamp((t-T.gemelos)/0.6, 0, 1), saE = Easing.easeOutCubic(saP);
const sbP = clamp((t-(T.gemelos+0.25))/0.6, 0, 1), sbE = Easing.easeOutBack(sbP);
const dimA = Easing.easeOutCubic(clamp((t-T.cae)/0.7, 0, 1)); // A → gris (relevo, NO rojo)
const bPulse = Math.sin(clamp((t-(T.cae+0.25))/1.1, 0, 1) * Math.PI); // B confirma UNA vez
// ---- Etiquetas datacenter ----
const dc1P = clamp((t-T.dc)/0.5, 0, 1), dc1E = Easing.easeOutCubic(dc1P);
const dc2P = clamp((t-(T.dc+0.25))/0.5, 0, 1), dc2E = Easing.easeOutCubic(dc2P);
// ---- Línea de sincronía viva entre gemelos (fade-in + flujo dotted) ----
const syncP = clamp((t-(T.gemelos+0.45))/0.7, 0, 1);
const syncCol = dimA > 0.45 ? C.grayL : C.green;
// pulso que viaja A→B UNA vez ("en tiempo real")
const pt0 = T.gemelos + 1.35;
const pulseP = clamp((t-pt0)/0.9, 0, 1);
const pulseX = lerp(SA.x+SA.w, SB.x, Easing.easeInOutCubic(pulseP));
const showPulse = pulseP > 0 && pulseP < 1 && dimA < 0.4;
// ---- Desvío de tráfico A→B (relevo, GRIS) ----
const divE = Easing.easeInOutCubic(clamp((t-T.cae)/0.8, 0, 1));
const divHead = clamp((divE-0.72)/0.28, 0, 1);
// ---- Red edge mundial ----
const bandP = clamp((t-T.mundo)/0.7, 0, 1);
const arcE = Easing.easeInOutCubic(clamp((t-(T.mundo+0.2))/0.8, 0, 1));
const cfP = clamp((t-(T.mundo+0.45))/0.5, 0, 1), cfE = Easing.easeOutBack(cfP);
// ---- Enrutado usuario → edge más cercano → Servidor B ----
const userP = clamp((t-T.ruta)/0.4, 0, 1), userE = Easing.easeOutBack(userP);
const routeE = Easing.easeInOutCubic(clamp((t-(T.ruta+0.15))/1.1, 0, 1));
const routeHead = clamp((routeE-0.8)/0.2, 0, 1);
const nearPulse = Math.sin(clamp((t-T.ruta)/1.2, 0, 1) * Math.PI); // el edge elegido late UNA vez
// ---- Escudo sobre la capa edge ----
const shP = clamp((t-T.escudo)/0.6, 0, 1), shE = Easing.easeOutBack(shP);
// ---- Ataques frenados (rojo dosificado, breve) ----
const ATT = [0,1,2].map(i=>{
const ax = [820, 960, 1100][i];
const t0 = T.ataque + i*0.34;
const ap = clamp((t-t0)/0.55, 0, 1);
const ae = Easing.easeOutCubic(clamp(ap/0.8, 0, 1));
const tipY = lerp(162, 262, ae);
const op = clamp(ap*4, 0, 1) * (1 - clamp((ap-0.85)/0.15, 0, 1));
const hit = ap >= 0.72 ? Math.sin(clamp((ap-0.72)/0.28, 0, 1) * Math.PI) : 0;
return { ax, ap, tipY, op, hit, live: ap > 0 && ap < 1 };
});
const shieldFlash = Math.max(0, ...ATT.map(a=>a.hit));
// ---- Apunte de contraste: IP única tachada (esto NO) ----
const ipP = clamp((t-T.ipunica)/0.55, 0, 1), ipE = Easing.easeOutCubic(ipP);
const ipStrike = Easing.easeOutCubic(clamp((t-(T.ipunica+0.35))/0.4, 0, 1));
// ---- Glow de la banda mundial (protagonista, UN pulse + hold) ----
const glowHold = clamp((t-T.glow)/0.6, 0, 1);
const glowPulse = Math.sin(clamp((t-T.glow)/1.1, 0, 1) * Math.PI);
const glowK = clamp(glowHold*0.6 + glowPulse*0.55, 0, 1);
// ---- Píldora de salida ----
const salP = clamp((t-T.salida)/0.5, 0, 1), salE = Easing.easeOutBack(salP);
// ===== Tarjeta de servidor (gemelo) =====
const ServerCard = ({ rect, name, appearP, appearE, isA })=>{
if (appearP <= 0) return null;
const dim = isA ? dimA : 0;
const healthy = !(isA && dimA >= 0.4);
const led = healthy ? C.green : C.grayL;
const glowB = (!isA) ? (0.10 + 0.22*bPulse) : 0;
return (
{name}
{healthy ? 'EN MARCHA' : 'EN ESPERA'}
{/* rack: 3 unidades */}
{[0,1,2].map(u=>(
))}
);
};
return (
Doblado, y tras una red mundial}/>
{/* Glow radial detrás de la banda mundial */}
{glowK > 0 && (
)}
{/* Banda-escudo (cobertura de la capa edge) */}
{shP > 0 && (
)}
{/* ===== CAPA VECTORIAL (arcos, sync, desvío, enrutado, escudo, ataques) ===== */}
{/* Píldora Cloudflare (atrezzo de la red edge) */}
{cfP > 0 && (
Cloudflare
)}
{/* Eyebrow "red global" bajo la banda */}
{bandP > 0 && (
0 ? C.blue : C.grayL,
opacity: clamp(bandP*1.3,0,1)}}>
RED EDGE · TODO EL PLANETA