:root { color-scheme: dark; background: #000; }
* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
body { overflow: hidden; background: #000; }

.stage {
  display: grid;
  width: 100%;
  min-height: 100svh;
  place-items: center;
  overflow: hidden;
  background: #000;
}

.brand {
  position: relative;
  display: grid;
  width: min(56vw, 760px);
  min-width: 320px;
  place-items: center;
}
.brand::before {
  position: absolute;
  z-index: -1;
  width: 62%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 112, 0, .2), rgba(255, 112, 0, .06) 42%, transparent 72%);
  content: '';
  filter: blur(30px);
  opacity: .72;
  animation: breathe 8s ease-in-out infinite;
}
.brand::after {
  position: absolute;
  inset: -18%;
  z-index: -1;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg 245deg,
    rgba(255, 106, 0, .02) 260deg,
    rgba(255, 123, 17, .24) 276deg,
    rgba(255, 157, 68, .04) 292deg,
    transparent 310deg 360deg
  );
  content: '';
  filter: blur(13px);
  opacity: .58;
  -webkit-mask: radial-gradient(ellipse, transparent 0 57%, #000 63%, #000 67%, transparent 74%);
  mask: radial-gradient(ellipse, transparent 0 57%, #000 63%, #000 67%, transparent 74%);
  animation: orbit 22s linear infinite;
}
.brand__logo {
  display: block;
  width: 100%;
  height: auto;
  opacity: 0;
  mix-blend-mode: screen;
}
.brand--ready .brand__logo { animation: reveal 1.6s cubic-bezier(.16,1,.3,1) both; }

@keyframes reveal {
  from {
    opacity: 0;
    transform: scale(.84);
    filter: blur(2px) drop-shadow(0 0 0 rgba(255, 112, 0, 0));
  }
  62% {
    opacity: 1;
    filter: blur(.4px) drop-shadow(0 0 28px rgba(255, 112, 0, .18));
  }
  to {
    opacity: 1;
    transform: scale(1);
    filter: blur(0) drop-shadow(0 0 18px rgba(255, 112, 0, .11));
  }
}

@keyframes breathe {
  0%, 100% { transform: scale(.92); opacity: .54; }
  50% { transform: scale(1.08); opacity: .8; }
}

@keyframes orbit {
  to { transform: rotate(360deg); }
}

@media (max-width: 600px) {
  .brand { width: min(88vw, 500px); min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .brand--ready .brand__logo { animation: none; opacity: 1; }
  .brand::before,
  .brand::after { animation: none; }
}