/* ==========================================================================
   Ayzelify page loader: Nether & Gold "Ignition" (resting state)
   Shared by the pre-boot loader in index.html and <AyzelifyPageLoader />.
   Brushed charcoal canvas with film grain, a warm gold light and slow rays
   behind the emblem, and the emblem itself built as four extruded 3D parts
   (left facet, two right facets, the raised A). It opens straight into the
   lit idle: a slow 3D tilt, the parts breathing apart and back, light
   shifting across each facet, a gold sweep, rising gold dust and a hairline
   loading track. Static when the viewer prefers reduced motion.
   ========================================================================== */

.ayz-ld {
  --ayz-ld-brush: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><filter id='b' color-interpolation-filters='sRGB'><feTurbulence type='fractalNoise' baseFrequency='0.75 0.012' numOctaves='3' seed='11' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0.33 0.33 0.33 0 0 0.33 0.33 0.33 0 0 0.33 0.33 0.33 0 0 0 0 0 0 1'/><feComponentTransfer><feFuncR type='linear' slope='0.3' intercept='0.35'/><feFuncG type='linear' slope='0.3' intercept='0.35'/><feFuncB type='linear' slope='0.3' intercept='0.35'/></feComponentTransfer></filter><rect width='100%' height='100%' filter='url(%23b)'/></svg>");
  --ayz-ld-film: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1.4 -.45'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  color-scheme: dark;
  background:
    var(--ayz-ld-brush) 0 0 / 320px 320px,
    radial-gradient(120% 95% at 50% 46%, #292929 0%, #222222 46%, #191919 100%);
  background-blend-mode: soft-light, normal;
}
.ayz-ld::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background:
    radial-gradient(70% 55% at 10% 0%, rgba(243, 197, 116, .07), transparent 70%),
    radial-gradient(120% 95% at 50% 50%, transparent 52%, rgba(0, 0, 0, .5) 100%);
}
.ayz-ld__film {
  position: absolute;
  inset: -50%;
  z-index: 6;
  pointer-events: none;
  background: var(--ayz-ld-film) 0 0 / 220px 220px;
  opacity: .06;
  mix-blend-mode: overlay;
}

.ayz-ld__rig { position: relative; z-index: 3; display: grid; justify-items: center; }
.ayz-ld__stage { position: relative; width: clamp(150px, 21vmin, 250px); aspect-ratio: 540 / 550; }

/* Gold light */
.ayz-ld__halo, .ayz-ld__light, .ayz-ld__rays {
  position: absolute; left: 50%; top: 50%; aspect-ratio: 1; border-radius: 50%;
  translate: -50% -50%; pointer-events: none;
}
.ayz-ld__halo { width: 520%; background: radial-gradient(closest-side, rgba(255, 196, 90, .16), rgba(255, 180, 70, .05) 45%, transparent 70%); }
.ayz-ld__light {
  width: 340%;
  mix-blend-mode: screen;
  background: radial-gradient(closest-side,
    rgba(255, 236, 170, .98) 0%, rgba(255, 214, 110, .72) 9%, rgba(255, 196, 80, .38) 24%,
    rgba(236, 170, 64, .14) 44%, rgba(230, 170, 70, .04) 60%, rgba(230, 170, 70, 0) 72%);
}
.ayz-ld__rays {
  width: 420%;
  opacity: .85;
  mix-blend-mode: screen;
  background:
    repeating-conic-gradient(from 3deg, rgba(255, 226, 150, .13) 0deg 1.2deg, rgba(255, 226, 150, 0) 1.2deg 9deg),
    repeating-conic-gradient(from 0deg, rgba(255, 214, 120, .07) 0deg 3deg, rgba(255, 214, 120, 0) 3deg 23deg);
  -webkit-mask-image: radial-gradient(closest-side, #000 12%, rgba(0, 0, 0, .5) 34%, transparent 64%);
          mask-image: radial-gradient(closest-side, #000 12%, rgba(0, 0, 0, .5) 34%, transparent 64%);
}
.ayz-ld__floor {
  position: absolute; left: 50%; top: 104%; width: 82%; height: 11%; translate: -50% 0;
  border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .6), transparent);
  filter: blur(5px); opacity: .9;
}

/* Extruded emblem */
.ayz-ld__emb { position: absolute; inset: 0; z-index: 3; transform-style: preserve-3d; perspective: 1000px; }
.ayz-ld__part { position: absolute; inset: 0; transform-style: preserve-3d; }
.ayz-ld__slice { position: absolute; inset: 0; }
.ayz-ld__slice svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; backface-visibility: hidden; }
.ayz-ld__spec { mix-blend-mode: screen; opacity: .2; }
.ayz-ld__shine {
  position: absolute; inset: 0; pointer-events: none; mix-blend-mode: overlay; translate: 0 0 26px;
  background: linear-gradient(112deg, transparent 38%, rgba(255, 240, 200, 0) 43%, rgba(255, 244, 214, .9) 50%, rgba(255, 240, 200, 0) 57%, transparent 62%);
  background-size: 320% 100%; background-position: 130% 0;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='40 96 540 550' preserveAspectRatio='none'><polygon points='310,104 571,300 310,638 48,300'/></svg>") center / 100% 100% no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='40 96 540 550' preserveAspectRatio='none'><polygon points='310,104 571,300 310,638 48,300'/></svg>") center / 100% 100% no-repeat;
}

/* Gold dust */
.ayz-ld__dust { position: absolute; inset: -60% -90%; pointer-events: none; }
.ayz-ld__dust i {
  position: absolute; width: 3px; height: 3px; border-radius: 50%;
  background: #ffd98f; box-shadow: 0 0 8px 2px rgba(255, 204, 110, .5); opacity: 0;
}
.ayz-ld__dust i:nth-child(1) { left: 30%; top: 70%; }
.ayz-ld__dust i:nth-child(2) { left: 40%; top: 78%; width: 2px; height: 2px; }
.ayz-ld__dust i:nth-child(3) { left: 61%; top: 74%; }
.ayz-ld__dust i:nth-child(4) { left: 70%; top: 64%; width: 2px; height: 2px; }
.ayz-ld__dust i:nth-child(5) { left: 50%; top: 84%; }
.ayz-ld__dust i:nth-child(6) { left: 35%; top: 58%; width: 2px; height: 2px; }
.ayz-ld__dust i:nth-child(7) { left: 66%; top: 86%; width: 2px; height: 2px; }
.ayz-ld__dust i:nth-child(8) { left: 45%; top: 66%; }

/* Loading hairline */
.ayz-ld__status { margin-top: clamp(64px, 11vmin, 104px); display: grid; justify-items: center; gap: 12px; }
.ayz-ld__track { width: clamp(90px, 13vmin, 140px); height: 1px; background: rgba(255, 255, 255, .1); position: relative; overflow: hidden; border-radius: 1px; }
.ayz-ld__track i { position: absolute; inset: 0; width: 40%; background: linear-gradient(90deg, transparent, #ffd27a, transparent); box-shadow: 0 0 8px #ffd27a; translate: -110% 0; }
.ayz-ld__status span { font: 500 10.5px/1 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .32em; text-transform: uppercase; color: rgba(232, 201, 138, .7); padding-left: .32em; }

.ayz-ld__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* --------------------------------------------------------------------------
   Motion: straight into the lit idle
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .ayz-ld__rig    { animation: ayzLdFadeIn .5s ease-out both; }
  .ayz-ld__film   { animation: ayzLdFilm .5s steps(4) infinite; }
  .ayz-ld__light  { animation: ayzLdBreath 5s ease-in-out infinite; }
  .ayz-ld__rays   { animation: ayzLdSpin 40s linear infinite; }
  .ayz-ld__floor  { animation: ayzLdFloor 5s ease-in-out infinite; }
  .ayz-ld__emb    { animation: ayzLdTilt 5s ease-in-out infinite alternate; }
  .ayz-ld__part--l  { animation: ayzLdPartL 5s ease-in-out infinite; }
  .ayz-ld__part--tr { animation: ayzLdPartTR 5s ease-in-out infinite; }
  .ayz-ld__part--br { animation: ayzLdPartBR 5s ease-in-out infinite; }
  .ayz-ld__part--a  { animation: ayzLdPartA 5s ease-in-out infinite; }
  .ayz-ld__part--l .ayz-ld__spec { animation: ayzLdSpecL 5s ease-in-out infinite alternate; }
  .ayz-ld__part--tr .ayz-ld__spec,
  .ayz-ld__part--br .ayz-ld__spec { animation: ayzLdSpecR 5s ease-in-out infinite alternate; }
  .ayz-ld__shine  { animation: ayzLdSweep 5s .4s cubic-bezier(.45, 0, .2, 1) infinite; }
  .ayz-ld__track i { animation: ayzLdTrack 1.6s cubic-bezier(.65, 0, .35, 1) infinite; }
  .ayz-ld__dust i { animation: ayzLdDust 4.2s ease-out infinite; }
  .ayz-ld__dust i:nth-child(2) { animation-delay: .5s; }
  .ayz-ld__dust i:nth-child(3) { animation-delay: 1.1s; }
  .ayz-ld__dust i:nth-child(4) { animation-delay: 1.6s; }
  .ayz-ld__dust i:nth-child(5) { animation-delay: 2.2s; }
  .ayz-ld__dust i:nth-child(6) { animation-delay: 2.7s; }
  .ayz-ld__dust i:nth-child(7) { animation-delay: 3.2s; }
  .ayz-ld__dust i:nth-child(8) { animation-delay: 3.7s; }
}

@keyframes ayzLdFadeIn { from { opacity: 0; scale: .97; } to { opacity: 1; scale: 1; } }
@keyframes ayzLdFilm { 0% { translate: 0 0; } 25% { translate: -6% 4%; } 50% { translate: 5% -7%; } 75% { translate: -3% -2%; } 100% { translate: 0 0; } }
@keyframes ayzLdBreath { 0%, 100% { opacity: 1; scale: 1; } 50% { opacity: .82; scale: .94; } }
@keyframes ayzLdSpin { to { rotate: 360deg; } }
@keyframes ayzLdFloor { 0%, 100% { scale: 1 1; opacity: .9; } 50% { scale: .9 1; opacity: .7; } }
@keyframes ayzLdTilt {
  from { transform: perspective(1000px) rotateY(-16deg) rotateX(6deg) translateY(1.5%); }
  to   { transform: perspective(1000px) rotateY(16deg) rotateX(-4deg) translateY(-1.5%); }
}
@keyframes ayzLdPartL  { 0%, 15%, 100% { translate: 0 0 0; } 50% { translate: -4.5% 0 -26px; } }
@keyframes ayzLdPartTR { 0%, 15%, 100% { translate: 0 0 0; } 50% { translate: 4% -3% 10px; } }
@keyframes ayzLdPartBR { 0%, 15%, 100% { translate: 0 0 0; } 50% { translate: 4% 3% -8px; } }
@keyframes ayzLdPartA  { 0%, 15%, 100% { translate: 0 0 0; } 50% { translate: 0 -1.5% 40px; } }
@keyframes ayzLdSpecL { from { opacity: .34; } to { opacity: 0; } }
@keyframes ayzLdSpecR { from { opacity: 0; } to { opacity: .3; } }
@keyframes ayzLdSweep { 0% { background-position: 130% 0; } 30%, 100% { background-position: -30% 0; } }
@keyframes ayzLdTrack { from { translate: -110% 0; } to { translate: 260% 0; } }
@keyframes ayzLdDust {
  0%   { opacity: 0; transform: translateY(0) scale(.6); }
  20%  { opacity: .9; }
  100% { opacity: 0; transform: translateY(-160px) scale(1.1); }
}