/* ===========================================================
   Bringory — Under Construction (standalone placeholder)
   =========================================================== */
:root {
  --ink: #15273f;
  --muted: #5f6f88;
  --brand: #0fa3b1;
  --font-head: "Poppins", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; margin: 0; }
picture { display: contents; }
html, body { height: 100%; }

body {
  font-family: var(--font-body);
  color: var(--ink);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 24px;
  overflow: hidden;
  position: relative;
  background: #0d1b2c;
}

/* animated rainbow aurora background */
.bg, .bg::before, .bg::after { position: fixed; inset: 0; z-index: -2; }
.bg {
  background: linear-gradient(125deg, #ff4d3d, #ff8a2b, #ffc53d, #3dc76a, #16b6c9, #2e86ff, #6a5bff);
  background-size: 320% 320%;
  animation: drift 18s ease infinite;
  opacity: .92;
}
.bg::after {
  content: "";
  background: radial-gradient(60% 60% at 50% 35%, rgba(13, 27, 44, 0) 0%, rgba(13, 27, 44, .55) 100%);
  z-index: -1;
}
@keyframes drift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* soft floating orbs */
.orb { position: fixed; border-radius: 50%; filter: blur(40px); opacity: .35; z-index: -1; }
.orb.a { width: 320px; height: 320px; background: #fff; top: -80px; left: -60px; animation: floaty 9s ease-in-out infinite; }
.orb.b { width: 260px; height: 260px; background: #ffe7a8; bottom: -70px; right: -50px; animation: floaty 11s ease-in-out infinite .8s; }
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-26px); } }

.stage { max-width: 640px; width: 100%; color: #fff; }

.art-wrap { position: relative; display: inline-block; margin-bottom: 8px; animation: rise 1s cubic-bezier(.2,.8,.2,1) both; }
.art-glow {
  position: absolute; inset: -6% 6% 14% 6%; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.55), rgba(255,255,255,0) 70%);
  filter: blur(18px); z-index: 0; animation: pulse 4s ease-in-out infinite;
}
.art { position: relative; z-index: 1; width: min(420px, 78vw); filter: drop-shadow(0 30px 40px rgba(8, 25, 45, .45)); animation: floaty 6s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: .5; transform: scale(.96); } 50% { opacity: .9; transform: scale(1.04); } }

.wordmark { width: min(330px, 70vw); margin: 14px auto 4px; display: block; filter: drop-shadow(0 6px 16px rgba(8, 25, 45, .3)); animation: rise 1s cubic-bezier(.2,.8,.2,1) .12s both; }

.pill {
  display: inline-block; font-family: var(--font-head); font-weight: 600; font-size: .8rem;
  letter-spacing: .16em; text-transform: uppercase; color: #fff;
  background: rgba(255, 255, 255, .18); border: 1px solid rgba(255, 255, 255, .3);
  padding: 8px 18px; border-radius: 999px; backdrop-filter: blur(6px);
  animation: rise 1s cubic-bezier(.2,.8,.2,1) .2s both;
}

h1 { font-family: var(--font-head); font-weight: 700; font-size: clamp(2rem, 6vw, 3.2rem); line-height: 1.1; margin: 20px 0 12px; text-shadow: 0 4px 24px rgba(8, 25, 45, .35); animation: rise 1s cubic-bezier(.2,.8,.2,1) .28s both; }
.lead { font-size: clamp(1.02rem, 2.4vw, 1.22rem); color: rgba(255, 255, 255, .94); max-width: 520px; margin: 0 auto; animation: rise 1s cubic-bezier(.2,.8,.2,1) .36s both; }

/* shimmering progress bar */
.progress { width: min(360px, 80vw); height: 10px; border-radius: 999px; margin: 32px auto 0; background: rgba(255, 255, 255, .25); overflow: hidden; animation: rise 1s cubic-bezier(.2,.8,.2,1) .44s both; }
.progress i { display: block; height: 100%; width: 40%; border-radius: 999px; background: linear-gradient(90deg, rgba(255,255,255,.6), #fff, rgba(255,255,255,.6)); animation: load 2.6s ease-in-out infinite; }
@keyframes load { 0% { transform: translateX(-110%); width: 35%; } 50% { width: 60%; } 100% { transform: translateX(360%); width: 35%; } }

.note { margin-top: 18px; font-size: .98rem; color: rgba(255, 255, 255, .9); animation: rise 1s cubic-bezier(.2,.8,.2,1) .52s both; }

@keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

.foot { position: fixed; bottom: 18px; left: 0; right: 0; color: rgba(255, 255, 255, .85); font-size: .82rem; padding: 0 16px; }
.foot a { color: #fff; text-decoration: underline; text-underline-offset: 2px; transition: color .2s ease; }
.foot a:hover { color: #0fa3b1; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; }
  .bg { background-position: 50% 50%; }
}