/* ============================================================================
   Orealis mark — a single ring wrapped in a slow aurora.
   Canonical source: /Users/StephenCottonAir/LocalDevelopment/mOntology/public/orealis-logo.css
   (this is the animated-mark subset only — the mOntology file also has
   dashboard-specific page-bg/thinking-state rules not needed here).

   Usage (set --size on .orealis-mark to scale the whole thing):

     <span class="orealis-mark" style="--size:34px">
       <span class="orealis-aurora" aria-hidden="true">
         <i class="or1"></i><i class="or2"></i><i class="or3"></i><i class="or4"></i>
         <i class="or5"></i><i class="or6"></i><i class="or7"></i>
       </span>
       <span class="orealis-ring"></span>
     </span>

   NOTE: everywhere functional — filenames, classes, IDs, URLs, copy — the name
   is plain ASCII "Orealis".
   ========================================================================== */

.orealis-mark{
  --size: 34px;
  --au-t: 1;                    /* tempo: lower = faster */
  position:relative; flex:none;
  width:var(--size); height:var(--size);
  display:inline-block; isolation:isolate;
}

/* Aurora band. The donut mask concentrates the light around the ring and
   feathers it to nothing both inward and outward — no hard edge. */
.orealis-aurora{
  position:absolute; inset:-24%;
  -webkit-mask-image:radial-gradient(closest-side,
    transparent 20%, #000 40%, #000 58%, transparent 90%);
  mask-image:radial-gradient(closest-side,
    transparent 20%, #000 40%, #000 58%, transparent 90%);
  animation:or-sweep calc(18s * var(--au-t)) linear infinite;
}

/* Blur lives on each ribbon, never the parent: a filtered + masked parent gets
   promoted to a cached composited layer, which freezes the moving children. */
.orealis-aurora i{
  position:absolute; border-radius:50%; display:block;
  mix-blend-mode:screen;
  filter:blur(max(2.5px, calc(var(--size) * 0.055)));
  will-change:transform, opacity;
}

.orealis-aurora .or1{width:66%;height:66%;left:2%;top:6%;
  background:radial-gradient(circle at 50% 50%, #4ade80 0%, transparent 68%);
  animation:or-drift-a calc(4s * var(--au-t)) ease-in-out infinite;}
.orealis-aurora .or2{width:60%;height:60%;left:38%;top:0%;
  background:radial-gradient(circle at 50% 50%, #22d3ee 0%, transparent 68%);
  animation:or-drift-b calc(5.2s * var(--au-t)) ease-in-out infinite; animation-delay:-2s;}
.orealis-aurora .or3{width:58%;height:58%;left:44%;top:40%;
  background:radial-gradient(circle at 50% 50%, #a855f7 0%, transparent 66%);
  animation:or-drift-c calc(6.5s * var(--au-t)) ease-in-out infinite; animation-delay:-3s;}
.orealis-aurora .or4{width:54%;height:54%;left:6%;top:42%;
  background:radial-gradient(circle at 50% 50%, #2dd4bf 0%, transparent 66%);
  animation:or-drift-b calc(4.6s * var(--au-t)) ease-in-out infinite reverse; animation-delay:-3.5s;}
.orealis-aurora .or5{width:48%;height:48%;left:26%;top:52%;
  background:radial-gradient(circle at 50% 50%, #86efac 0%, transparent 64%);
  animation:or-drift-a calc(5.8s * var(--au-t)) ease-in-out infinite reverse; animation-delay:-2.5s;}
.orealis-aurora .or6{width:44%;height:44%;left:52%;top:16%;
  background:radial-gradient(circle at 50% 50%, #f472b6 0%, transparent 62%);
  animation:or-drift-c calc(7.1s * var(--au-t)) ease-in-out infinite; animation-delay:-4.5s;}
.orealis-aurora .or7{width:52%;height:52%;left:22%;top:16%;
  background:radial-gradient(circle at 50% 50%, #818cf8 0%, transparent 66%);
  animation:or-drift-b calc(4.9s * var(--au-t)) ease-in-out infinite; animation-delay:-1.5s;}

/* The ring — a gradient stroke drawn with the padding + mask-composite trick,
   so it stays crisp at any size without an SVG (no gradient-id collisions). */
.orealis-ring{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:68%; height:68%; border-radius:50%;
  padding:max(1.3px, calc(var(--size) * 0.03));
  background:linear-gradient(135deg,#86efac 0%,#5eead4 35%,#a5b4fc 65%,#c4b5fd 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite:exclude;
}

@keyframes or-drift-a{
  0%  {transform:translate(-10%,-6%) scale(1);    opacity:.72}
  35% {transform:translate(12%,9%)   scale(1.22); opacity:1}
  68% {transform:translate(-4%,14%)  scale(.92);  opacity:.8}
  100%{transform:translate(-10%,-6%) scale(1);    opacity:.72}
}
@keyframes or-drift-b{
  0%  {transform:translate(8%,5%)    scale(1.10); opacity:.9}
  40% {transform:translate(-13%,-9%) scale(.90);  opacity:.68}
  72% {transform:translate(9%,-12%)  scale(1.25); opacity:1}
  100%{transform:translate(8%,5%)    scale(1.10); opacity:.9}
}
@keyframes or-drift-c{
  0%  {transform:translate(-11%,8%)  scale(.95);  opacity:.85}
  44% {transform:translate(10%,-10%) scale(1.28); opacity:1}
  76% {transform:translate(14%,6%)   scale(1.04); opacity:.7}
  100%{transform:translate(-11%,8%)  scale(.95);  opacity:.85}
}
@keyframes or-sweep{ to{ transform:rotate(360deg) } }

@media (prefers-reduced-motion: reduce){
  .orealis-aurora, .orealis-aurora i{ animation:none }
}