ARSFLAMMAE

<body>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Velocity’s Flame Grid</title>
<style>
:root {
--bg-main: #0b0014;
--bg-gradient: radial-gradient(circle at 50% 0%, #1b0028 0%, #0b0014 70%);
--accent: #ff3c8f;
--accent-light: #ff6eb0;
--white: #fdfdfd;
--shadow: rgba(255, 60, 143, 0.45);
--shadow-hover: rgba(255, 60, 143, 0.75);
}

* {
box-sizing: border-box;
margin: 0;
padding: 0;
}

body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
background: var(--bg-gradient);
color: var(--white);
min-height: 100vh;
overflow-x: hidden;
padding-bottom: 120px;
}

header {
padding: 80px 20px 20px;
text-align: center;
}

.gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 60px;
width: 90%;
max-width: 1400px;
margin: 0 auto;
padding-bottom: 100px;
}

.tile {
position: relative;
overflow: hidden;
border-radius: 16px;
cursor: pointer;
transform: translateY(50px) scale(0.9);
opacity: 0;
transition: transform 0.7s ease, opacity 0.7s ease;
}

.tile.visible {
transform: translateY(0) scale(1);
opacity: 1;
}

.tile img {
width: 100%;
height: auto;
object-fit: cover;
display: block;
filter: brightness(0.9) saturate(1.1);
transition: transform 0.5s ease, filter 0.5s ease;
border-radius: 12px;
}

.tile:hover img {
transform: scale(1.08) rotate(0.5deg);
filter: brightness(1) saturate(1.3);
}

.tile::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
box-shadow: 0 0 30px var(--shadow);
transition: box-shadow 0.5s ease;
pointer-events: none;
}

.tile:hover::after {
box-shadow: 0 0 60px var(--shadow-hover);
}

.caption {
margin-top: 12px;
font-size: 1rem;
font-weight: 600;
letter-spacing: 0.05em;
color: var(--accent);
text-align: center;
backdrop-filter: blur(4px);
}

.modal {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.85);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
display: none;
}

.modal img {
max-width: 90%;
max-height: 90%;
border-radius: 12px;
}

.modal.active {
display: flex;
}

@media (prefers-reduced-motion: reduce) {
.tile,
.tile img,
.tile::after {
transition: none;
}
}

.contact-form {
max-width: 600px;
margin: 60px auto;
background: #1b0028;
padding: 40px 30px;
border-radius: 20px;
box-shadow: 0 0 30px var(--shadow);
text-align: center;
}

.contact-form p {
margin-bottom: 20px;
font-size: 1rem;
}

.contact-form a {
display: inline-block;
padding: 12px 20px;
font-size: 1rem;
color: #fff;
background-color: var(--accent);
border-radius: 8px;
text-decoration: none;
box-shadow: 0 0 20px var(--shadow);
}

.contact-form a:hover {
background-color: var(--accent-light);
}
</style>

<section class="contact-form">
<p>Ready to ignite something? Tap below to join the flame list and reach out directly.</p>
<a href="mailto:x@xvelocityyiz.com?subject=I'm%20interested">Send Flame Signal</a>
<iframe src="https://www.xvelocityyiz.com/pages/contact"></iframe>
</section>

const gallery = document.getElementById("gallery");
const modal = document.getElementById("modal");
const modalImg = document.getElementById("modal-img");

paintings.forEach(p => {
const tile = document.createElement("div");
tile.className = "tile";
tile.innerHTML = `
<img src="${p.url}" alt="${p.title}" />
<div class="caption">${p.title}</div>
`;
tile.onclick = () => {
modal.classList.add("active");
modalImg.src = p.url;
modalImg.alt = p.title;
};
gallery.appendChild(tile);
});

const observer = new IntersectionObserver(
entries => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add("visible");
}
});
},
{ threshold: 0.15 }
);

document.querySelectorAll(".tile").forEach(tile => observer.observe(tile));

modal.onclick = () => {
modal.classList.remove("active");
modalImg.src = "";
};
</script>
</body>

ARSFLAMMAE

Contact form

The Flame is Listening