/* Portada: escena de la isla Redblok en vídeo */
.hero { --sx: 70%; --sy: 40%; position: relative; }
.hero::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(760px 520px at 76% 42%, color-mix(in srgb, var(--forge) 20%, transparent), transparent 66%), radial-gradient(520px 380px at 8% 0%, color-mix(in srgb, #5865f2 12%, transparent), transparent 70%); }
.hero::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(460px circle at var(--sx) var(--sy), color-mix(in srgb, var(--forge) 10%, transparent), transparent 62%); }
.hero-in { position: relative; z-index: 1; }
.scene { position: relative; }
.scene.is-3d { min-height: 540px; }
.scene.is-3d .scene-svg { display: none; }
.s3d { position: absolute; inset: -12% -12% -6%; pointer-events: none; }
/* el borde del vídeo se funde con la página: nunca se ve un corte */
/* sin máscara: el vídeo ya trae el borde desvanecido y la máscara cuesta mucha GPU */
.rb-media { position: absolute; inset: 0; display: grid; place-items: center; }
.rb-video, .rb-poster { display: block; width: 100%; height: 100%; object-fit: contain; background: transparent; }
.rb-play { position: absolute; right: 6px; bottom: 6px; z-index: 4; padding: 7px 12px; border: 1px solid var(--line-2, rgba(255, 255, 255, .2)); border-radius: 999px; background: color-mix(in srgb, var(--card, #12141e) 85%, transparent); color: var(--ink-2, #aaa); font: 600 12px/1 var(--f-ui, system-ui); cursor: pointer; opacity: .75; transition: opacity .15s, color .15s; }
.rb-play:hover, .rb-play:focus-visible { opacity: 1; color: var(--ink, #fff); }

/* etiquetas de categoría */
.scene.is-3d .scene-tag { z-index: 2; }
.scene.is-3d a.scene-tag:nth-of-type(1) { left: 6%; top: 14%; right: auto; bottom: auto; }
.scene.is-3d a.scene-tag:nth-of-type(2) { right: 0; top: 24%; left: auto; bottom: auto; }
.scene.is-3d a.scene-tag:nth-of-type(3) { left: 0; bottom: 20%; right: auto; top: auto; }

@media (max-width: 760px) { .scene.is-3d { min-height: 380px; } .s3d { inset: 0; } .scene.is-3d .scene-tag { display: none; } }
@media (prefers-reduced-motion: reduce) { .rb-media { transition: none; } }