big brayni simulator/title> <style> :root { --bg: #0f172a; /* fondo oscuro */ --text: #e2e8f0; /* texto claro */ --accent: #38bdf8; /* acento celeste */ } * { box-sizing: border-box; } body { margin: 0; min-height: 100vh; display: grid; place-items: center; background: radial-gradient(1200px 800px at 50% 20%, #1e293b, var(--bg)); color: var(--text); font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; } .container { width: 100%; max-width: 900px; padding: 2rem; text-align: center; } h1 { margin: 0 0 1rem; font-size: clamp(1.8rem, 3vw, 3rem); letter-spacing: 0.5px; } .subtitle { margin: 0 0 2rem; opacity: 0.85; } .scene { position: relative; width: min(90vw, 520px); height: min(70vh, 520px); margin: 0 auto; border-radius: 24px; background: linear-gradient(180deg, rgba(56,189,248,0.15), rgba(56,189,248,0.05)); box-shadow: 0 30px 80px rgba(0,0,0,0.35), inset 0 0 40px rgba(56,189,248,0.15); overflow: hidden; } /* Nubes suaves para dar sensación de altura */ .cloud { position: absolute; background: rgba(226,232,240,0.25); filter: blur(8px); border-radius: 50px; animation: drift 18s linear infinite; } .cloud.c1 { width: 180px; height: 60px; top: 12%; left: -20%; animation-delay: 0s; } .cloud.c2 { width: 240px; height: 70px; top: 38%; left: 110%; animation-delay: 4s; } .cloud.c3 { width: 140px; height: 50px; top: 68%; left: -25%; animation-delay: 8s; } @keyframes drift { 0% { transform: translateX(0); } 100% { transform: translateX(-130%); } } /* Imagen del perro con efecto de flotación */ .dog { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(70%, 360px); aspect-ratio: 1 / 1; object-fit: contain; filter: drop-shadow(0 18px 24px rgba(0,0,0,0.35)); animation: float 4.5s ease-in-out infinite, sway 6s ease-in-out infinite; } @keyframes float { 0% { transform: translate(-50%, calc(-50% - 6px)); } 50% { transform: translate(-50%, calc(-50% + 10px)); } 100% { transform: translate(-50%, calc(-50% - 6px)); } } @keyframes sway { 0% { rotate: -1.2deg; } 50% { rotate: 1.2deg; } 100% { rotate: -1.2deg; } } /* Indicador sutil de “flotando” */ .halo { position: absolute; left: 50%; top: 66%; transform: translateX(-50%); width: 55%; height: 18px; border-radius: 50%; background: radial-gradient(closest-side, rgba(56,189,248,0.35), rgba(56,189,248,0.05) 70%, transparent 100%); filter: blur(6px); animation: pulse 3.8s ease-in-out infinite; } @keyframes pulse { 0% { opacity: 0.55; transform: translateX(-50%) scale(0.95); } 50% { opacity: 0.85; transform: translateX(-50%) scale(1.05); } 100% { opacity: 0.55; transform: translateX(-50%) scale(0.95); } } .credit { margin-top: 1rem; font-size: 0.9rem; opacity: 0.7; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } </style> </head> <body> <main class="container"> <section class="scene" aria-label="Escena de un perro flotando">  <div class="cloud c1"></div> <div class="cloud c2"></div> <div class="cloud c3"></div>  <img class="dog" src="https://images.unsplash.com/photo-1517849845537-4d257902454a?q=80&w=800&auto=format&fit=max" alt="Perro flotando en el aire" />  <div class="halo" aria-hidden="true"></div> </section> <p class="credit"> <code>src="dawg.jpg"</code>. </p> </main> </body> </html>