/* OreyX Loading Page Studio v1
   Isolated first-paint loading experience. Does not change sections, navigation, footer, checkout or product runtime. */

:root {
  --oreyx-loading-bg: color-mix(in srgb, var(--bg, #f7f7ff) 88%, #ffffff);
  --oreyx-loading-card: rgba(255,255,255,.72);
  --oreyx-loading-line: rgba(16,18,35,.10);
  --oreyx-loading-ink: var(--text, #101223);
  --oreyx-loading-muted: var(--muted, #667085);
  --oreyx-loading-primary: var(--primary, #6658ff);
  --oreyx-loading-secondary: var(--secondary, #17b8ef);
  --oreyx-loading-accent: var(--accent, #ff4fc4);
}

.oreyx-loading-page {
  position: fixed;
  inset: 0;
  z-index: 2147482500;
  display: grid;
  place-items: center;
  min-height: 100dvh;
  padding: max(22px, env(safe-area-inset-top)) max(22px, env(safe-area-inset-right)) max(22px, env(safe-area-inset-bottom)) max(22px, env(safe-area-inset-left));
  background:
    radial-gradient(circle at 18% 18%, color-mix(in srgb, var(--oreyx-loading-primary) 17%, transparent), transparent 28rem),
    radial-gradient(circle at 86% 18%, color-mix(in srgb, var(--oreyx-loading-secondary) 18%, transparent), transparent 30rem),
    linear-gradient(135deg, var(--oreyx-loading-bg), color-mix(in srgb, var(--oreyx-loading-bg) 86%, #eef4ff));
  color: var(--oreyx-loading-ink);
  pointer-events: auto;
  opacity: 1;
  visibility: visible;
  transform: translateZ(0);
  transition: opacity .42s var(--ease, cubic-bezier(.22,1,.36,1)), visibility .42s var(--ease, cubic-bezier(.22,1,.36,1));
}

body[data-app-state="ready"] .oreyx-loading-page,
body[data-loading-page-timeout="1"] .oreyx-loading-page,
body[data-loading-page-disabled="1"] .oreyx-loading-page {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

body[data-app-state="loading"]:not([data-loading-page-timeout="1"]):not([data-loading-page-disabled="1"]) .page-fallback {
  visibility: hidden;
}

body[data-app-state="loading"]:not([data-loading-page-timeout="1"]):not([data-loading-page-disabled="1"]) .site-header,
body[data-app-state="loading"]:not([data-loading-page-timeout="1"]):not([data-loading-page-disabled="1"]) .site-footer {
  opacity: 0;
  pointer-events: none;
}

.oreyx-loading-page__stage {
  position: relative;
  display: grid;
  place-items: center;
  width: min(360px, 88vw);
  aspect-ratio: 1;
}

.oreyx-loading-page__stage::before,
.oreyx-loading-page__stage::after {
  content: "";
  position: absolute;
  inset: 18%;
  border-radius: 999px;
  pointer-events: none;
}

.oreyx-loading-page__stage::before {
  border: 1px solid color-mix(in srgb, var(--oreyx-loading-primary) 32%, transparent);
  box-shadow:
    0 0 0 20px color-mix(in srgb, var(--oreyx-loading-primary) 4%, transparent),
    0 28px 80px color-mix(in srgb, var(--oreyx-loading-primary) 18%, transparent);
  animation: oreyx-loading-breathe 1.9s ease-in-out infinite;
}

.oreyx-loading-page__stage::after {
  inset: 29%;
  border-top: 2px solid color-mix(in srgb, var(--oreyx-loading-primary) 76%, transparent);
  border-inline-end: 2px solid color-mix(in srgb, var(--oreyx-loading-secondary) 58%, transparent);
  border-bottom: 2px solid transparent;
  border-inline-start: 2px solid transparent;
  animation: oreyx-loading-spin 1.08s linear infinite;
}

.oreyx-loading-page__logo-wrap {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 104px;
  height: 104px;
  border-radius: 32px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.78), rgba(255,255,255,.46)),
    radial-gradient(circle at 25% 20%, color-mix(in srgb, var(--oreyx-loading-primary) 22%, transparent), transparent 60%);
  border: 1px solid rgba(255,255,255,.72);
  box-shadow:
    0 28px 70px rgba(16,18,35,.13),
    inset 0 1px 0 rgba(255,255,255,.68);
  overflow: hidden;
  backdrop-filter: blur(22px);
  animation: oreyx-loading-float 2.2s ease-in-out infinite;
}

.oreyx-loading-page__logo-wrap::before {
  content: "";
  position: absolute;
  inset: -45%;
  background: conic-gradient(from 120deg, transparent, color-mix(in srgb, var(--oreyx-loading-primary) 18%, transparent), transparent, color-mix(in srgb, var(--oreyx-loading-secondary) 18%, transparent), transparent);
  animation: oreyx-loading-spin 3.6s linear infinite;
}

.oreyx-loading-page__logo,
.oreyx-loading-page__fallback-mark {
  position: relative;
  z-index: 1;
  width: 68px;
  height: 68px;
  border-radius: 24px;
}

.oreyx-loading-page__logo {
  object-fit: contain;
  padding: 8px;
  background: rgba(255,255,255,.86);
  box-shadow: inset 0 0 0 1px rgba(16,18,35,.06);
}

.oreyx-loading-page__fallback-mark {
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--oreyx-loading-primary), var(--oreyx-loading-secondary));
  color: #fff;
  font-weight: 950;
  font-size: 30px;
  letter-spacing: -.08em;
}

.oreyx-loading-page__fallback-mark::before {
  content: "O";
}

.oreyx-loading-page__copy {
  position: absolute;
  top: calc(50% + 84px);
  inset-inline: 0;
  display: none;
  text-align: center;
  padding-inline: 12px;
}

.oreyx-loading-page[data-show-text="1"] .oreyx-loading-page__copy {
  display: block;
}

.oreyx-loading-page__title {
  margin: 0;
  font: 900 16px/1.2 var(--font-body, Inter, system-ui, sans-serif);
  letter-spacing: -.02em;
}

.oreyx-loading-page__subtitle {
  margin: 7px 0 0;
  color: var(--oreyx-loading-muted);
  font-size: 13px;
  line-height: 1.35;
}

/* Skin: clean logo motion - default */
.oreyx-loading-page[data-loading-skin="logo_motion"] .oreyx-loading-page__stage::before {
  inset: 20%;
}

/* Skin: aurora orb */
.oreyx-loading-page[data-loading-skin="aurora_orb"] {
  background:
    radial-gradient(circle at 18% 22%, color-mix(in srgb, #6c4dff 28%, transparent), transparent 26rem),
    radial-gradient(circle at 78% 18%, color-mix(in srgb, #10d3ff 26%, transparent), transparent 30rem),
    radial-gradient(circle at 50% 86%, color-mix(in srgb, #ff4fc4 18%, transparent), transparent 28rem),
    linear-gradient(135deg, #f8fbff, #edf4ff 52%, #fff6fc);
}
.oreyx-loading-page[data-loading-skin="aurora_orb"] .oreyx-loading-page__stage::before {
  inset: 14%;
  border: 0;
  background: radial-gradient(circle, rgba(255,255,255,.72), rgba(255,255,255,.08) 62%, transparent 63%);
  filter: blur(.2px);
}

/* Skin: premium glass pulse */
.oreyx-loading-page[data-loading-skin="glass_pulse"] .oreyx-loading-page__stage {
  border-radius: 54px;
  background: rgba(255,255,255,.32);
  border: 1px solid rgba(255,255,255,.62);
  box-shadow: 0 32px 90px rgba(16,18,35,.11);
  backdrop-filter: blur(28px);
}
.oreyx-loading-page[data-loading-skin="glass_pulse"] .oreyx-loading-page__stage::after {
  inset: 17%;
  border: 1px solid rgba(255,255,255,.55);
  animation: oreyx-loading-breathe 1.55s ease-in-out infinite;
}

/* Skin: luxury ring */
.oreyx-loading-page[data-loading-skin="luxury_ring"] {
  --oreyx-loading-primary: #b9864f;
  --oreyx-loading-secondary: #e9c46a;
  --oreyx-loading-bg: #fbf7ef;
  background:
    radial-gradient(circle at 22% 20%, rgba(233,196,106,.22), transparent 26rem),
    linear-gradient(135deg, #fffaf2, #f2e7d2);
}
.oreyx-loading-page[data-loading-skin="luxury_ring"] .oreyx-loading-page__logo-wrap {
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255,255,255,.76), rgba(255,249,238,.56));
}
.oreyx-loading-page[data-loading-skin="luxury_ring"] .oreyx-loading-page__logo,
.oreyx-loading-page[data-loading-skin="luxury_ring"] .oreyx-loading-page__fallback-mark {
  border-radius: 999px;
}

/* Skin: minimal dots */
.oreyx-loading-page[data-loading-skin="minimal_dots"] {
  background: #fff;
}
.oreyx-loading-page[data-loading-skin="minimal_dots"] .oreyx-loading-page__stage::before,
.oreyx-loading-page[data-loading-skin="minimal_dots"] .oreyx-loading-page__stage::after {
  display: none;
}
.oreyx-loading-page[data-loading-skin="minimal_dots"] .oreyx-loading-page__logo-wrap {
  box-shadow: 0 20px 48px rgba(16,18,35,.08);
}
.oreyx-loading-page[data-loading-skin="minimal_dots"] .oreyx-loading-page__stage {
  background-image:
    radial-gradient(circle, color-mix(in srgb, var(--oreyx-loading-primary) 52%, transparent) 2px, transparent 3px),
    radial-gradient(circle, color-mix(in srgb, var(--oreyx-loading-secondary) 52%, transparent) 2px, transparent 3px),
    radial-gradient(circle, color-mix(in srgb, var(--oreyx-loading-accent) 44%, transparent) 2px, transparent 3px);
  background-position: 42% 72%, 50% 72%, 58% 72%;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  animation: oreyx-loading-dots 1.18s ease-in-out infinite;
}

/* Skin: dark studio */
.oreyx-loading-page[data-loading-skin="dark_studio"] {
  --oreyx-loading-bg: #080b14;
  --oreyx-loading-ink: #fff;
  --oreyx-loading-muted: rgba(255,255,255,.68);
  --oreyx-loading-line: rgba(255,255,255,.14);
  background:
    radial-gradient(circle at 12% 18%, rgba(124,58,237,.26), transparent 30rem),
    radial-gradient(circle at 86% 22%, rgba(6,182,212,.22), transparent 34rem),
    linear-gradient(135deg, #070914, #111827);
}
.oreyx-loading-page[data-loading-skin="dark_studio"] .oreyx-loading-page__logo-wrap {
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.16);
  box-shadow: 0 34px 100px rgba(0,0,0,.34);
}

/* Skin: commerce scan */
.oreyx-loading-page[data-loading-skin="commerce_scan"] .oreyx-loading-page__stage::before {
  inset: 12%;
  border-radius: 42px;
  background:
    linear-gradient(90deg, transparent 0 38%, color-mix(in srgb, var(--oreyx-loading-secondary) 24%, transparent) 48%, transparent 58% 100%),
    linear-gradient(rgba(16,18,35,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16,18,35,.045) 1px, transparent 1px);
  background-size: 180% 100%, 28px 28px, 28px 28px;
  border: 1px solid var(--oreyx-loading-line);
  animation: oreyx-loading-scan 1.55s ease-in-out infinite;
}
.oreyx-loading-page[data-loading-skin="commerce_scan"] .oreyx-loading-page__stage::after {
  border-radius: 42px;
  inset: 18%;
}

/* Skin: soft wave */
.oreyx-loading-page[data-loading-skin="soft_wave"] {
  background:
    radial-gradient(circle at 20% 16%, rgba(20,184,166,.18), transparent 26rem),
    linear-gradient(140deg, #f7fffb, #eef8ff 48%, #fff7fb);
}
.oreyx-loading-page[data-loading-skin="soft_wave"] .oreyx-loading-page__stage::before {
  border: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.68), rgba(255,255,255,.20));
  transform: rotate(-8deg);
  animation: oreyx-loading-wave 2.4s ease-in-out infinite;
}

@keyframes oreyx-loading-spin { to { transform: rotate(1turn); } }
@keyframes oreyx-loading-breathe { 0%, 100% { transform: scale(.96); opacity: .62; } 50% { transform: scale(1.06); opacity: 1; } }
@keyframes oreyx-loading-float { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-6px) scale(1.015); } }
@keyframes oreyx-loading-dots { 0%, 100% { filter: saturate(1); transform: translateY(0); } 50% { filter: saturate(1.35); transform: translateY(-4px); } }
@keyframes oreyx-loading-scan { 0% { background-position: -80% 0, 0 0, 0 0; } 100% { background-position: 180% 0, 0 0, 0 0; } }
@keyframes oreyx-loading-wave { 0%, 100% { border-radius: 44% 56% 52% 48%; transform: rotate(-8deg) scale(.98); } 50% { border-radius: 56% 44% 45% 55%; transform: rotate(8deg) scale(1.04); } }

@media (prefers-reduced-motion: reduce) {
  .oreyx-loading-page,
  .oreyx-loading-page *,
  .oreyx-loading-page *::before,
  .oreyx-loading-page *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

@media (max-width: 640px) {
  .oreyx-loading-page__stage { width: min(300px, 88vw); }
  .oreyx-loading-page__logo-wrap { width: 92px; height: 92px; border-radius: 30px; }
  .oreyx-loading-page__logo,
  .oreyx-loading-page__fallback-mark { width: 60px; height: 60px; border-radius: 21px; }
}

.oreyx-loading-page__logo-wrap[data-logo="store"] .oreyx-loading-page__fallback-mark { display: none; }
.oreyx-loading-page__logo-wrap[data-logo="fallback"] .oreyx-loading-page__logo { display: none; }


/* Loading Page Studio v2 — diversified professional skin library.
   Additive overrides only: preserves the published settings, logo runtime and no-flash boot path. */
.oreyx-loading-page__stage,
.oreyx-loading-page__logo-wrap,
.oreyx-loading-page__stage::before,
.oreyx-loading-page__stage::after {
  will-change: transform, opacity;
}

/* Default logo motion: keep it logo-only, but make it feel more premium and less like every other skin. */
.oreyx-loading-page[data-loading-skin="logo_motion"] .oreyx-loading-page__stage {
  width: min(330px, 86vw);
}
.oreyx-loading-page[data-loading-skin="logo_motion"] .oreyx-loading-page__stage::before {
  inset: 19%;
  border-radius: 42%;
  border: 1px solid color-mix(in srgb, var(--oreyx-loading-primary) 28%, transparent);
  box-shadow:
    0 0 0 12px color-mix(in srgb, var(--oreyx-loading-primary) 4%, transparent),
    0 0 0 32px color-mix(in srgb, var(--oreyx-loading-secondary) 3%, transparent),
    0 28px 90px color-mix(in srgb, var(--oreyx-loading-primary) 20%, transparent);
  animation: oreyx-loading-premium-breathe 2.2s ease-in-out infinite;
}
.oreyx-loading-page[data-loading-skin="logo_motion"] .oreyx-loading-page__stage::after {
  inset: 31%;
  border-radius: 999px;
  border: 0;
  background: conic-gradient(from 0deg, transparent 0 52%, color-mix(in srgb, var(--oreyx-loading-primary) 72%, transparent), color-mix(in srgb, var(--oreyx-loading-secondary) 64%, transparent), transparent 86% 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  animation: oreyx-loading-spin 1.2s linear infinite;
}

/* Aurora Orb: large color field and an organic glowing orb. */
.oreyx-loading-page[data-loading-skin="aurora_orb"] {
  --oreyx-loading-primary: #7c3aed;
  --oreyx-loading-secondary: #06b6d4;
  --oreyx-loading-accent: #f472b6;
  background:
    radial-gradient(circle at 16% 22%, rgba(124,58,237,.36), transparent 27rem),
    radial-gradient(circle at 78% 18%, rgba(6,182,212,.30), transparent 31rem),
    radial-gradient(circle at 52% 86%, rgba(244,114,182,.23), transparent 29rem),
    linear-gradient(135deg, #fbfdff, #edf4ff 52%, #fff6fc);
}
.oreyx-loading-page[data-loading-skin="aurora_orb"] .oreyx-loading-page__stage {
  width: min(390px, 90vw);
  filter: saturate(1.12);
}
.oreyx-loading-page[data-loading-skin="aurora_orb"] .oreyx-loading-page__stage::before {
  inset: 5%;
  border: 0;
  background:
    radial-gradient(circle at 40% 36%, rgba(255,255,255,.88), rgba(255,255,255,.18) 42%, transparent 62%),
    conic-gradient(from 90deg, rgba(124,58,237,.28), rgba(6,182,212,.23), rgba(244,114,182,.24), rgba(124,58,237,.28));
  border-radius: 44% 56% 50% 50%;
  filter: blur(.2px);
  animation: oreyx-loading-aurora-morph 4.2s ease-in-out infinite;
}
.oreyx-loading-page[data-loading-skin="aurora_orb"] .oreyx-loading-page__stage::after {
  inset: 24%;
  border: 0;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255,255,255,.62), transparent 62%);
  animation: oreyx-loading-breathe 2.1s ease-in-out infinite;
}

/* Glass Pulse: enterprise glass card with a real progress rail. */
.oreyx-loading-page[data-loading-skin="glass_pulse"] {
  background:
    radial-gradient(circle at 18% 18%, rgba(102,88,255,.17), transparent 25rem),
    linear-gradient(135deg, #f8fbff, #f4f7fb);
}
.oreyx-loading-page[data-loading-skin="glass_pulse"] .oreyx-loading-page__stage {
  width: min(410px, 90vw);
  aspect-ratio: 1.42;
  border-radius: 36px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.82), rgba(255,255,255,.42)),
    linear-gradient(115deg, rgba(102,88,255,.09), rgba(23,184,239,.09));
  border: 1px solid rgba(255,255,255,.72);
  box-shadow: 0 38px 110px rgba(16,18,35,.13), inset 0 1px 0 rgba(255,255,255,.84);
  backdrop-filter: blur(28px);
}
.oreyx-loading-page[data-loading-skin="glass_pulse"] .oreyx-loading-page__stage::before {
  inset: auto 42px 48px 42px;
  height: 8px;
  border: 0;
  border-radius: 999px;
  background: rgba(16,18,35,.08);
  box-shadow: inset 0 0 0 1px rgba(16,18,35,.04);
  animation: none;
}
.oreyx-loading-page[data-loading-skin="glass_pulse"] .oreyx-loading-page__stage::after {
  inset: auto 42px 48px 42px;
  height: 8px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--oreyx-loading-primary), var(--oreyx-loading-secondary));
  transform-origin: left center;
  animation: oreyx-loading-progress 1.85s cubic-bezier(.65,0,.35,1) infinite;
}

/* Luxury Ring: editorial gold ring; deliberately warm and boutique. */
.oreyx-loading-page[data-loading-skin="luxury_ring"] .oreyx-loading-page__stage {
  width: min(340px, 86vw);
}
.oreyx-loading-page[data-loading-skin="luxury_ring"] .oreyx-loading-page__stage::before {
  inset: 13%;
  border-radius: 999px;
  border: 1px solid rgba(185,134,79,.30);
  background: radial-gradient(circle, transparent 57%, rgba(255,255,255,.38) 58% 62%, transparent 63%);
  box-shadow: 0 32px 110px rgba(185,134,79,.20);
  animation: oreyx-loading-luxury-turn 3.8s linear infinite;
}
.oreyx-loading-page[data-loading-skin="luxury_ring"] .oreyx-loading-page__stage::after {
  inset: 18%;
  border-radius: 999px;
  border: 0;
  background: conic-gradient(from 90deg, transparent 0 22%, #b9864f, #f3d28a, transparent 48% 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
  animation: oreyx-loading-spin 1.7s linear infinite;
}

/* Minimal Dots: logo-free and ultra quiet. */
.oreyx-loading-page[data-loading-skin="minimal_dots"] .oreyx-loading-page__stage {
  width: min(180px, 70vw);
  aspect-ratio: 2.4;
}
.oreyx-loading-page[data-loading-skin="minimal_dots"] .oreyx-loading-page__logo-wrap { display: none; }
.oreyx-loading-page[data-loading-skin="minimal_dots"] .oreyx-loading-page__stage::before,
.oreyx-loading-page[data-loading-skin="minimal_dots"] .oreyx-loading-page__stage::after { display: block; }
.oreyx-loading-page[data-loading-skin="minimal_dots"] .oreyx-loading-page__stage::before {
  inset: auto;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 12px;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--oreyx-loading-primary) 80%, transparent);
  box-shadow:
    -34px 0 0 0 color-mix(in srgb, var(--oreyx-loading-primary) 80%, transparent),
    34px 0 0 0 color-mix(in srgb, var(--oreyx-loading-secondary) 74%, transparent),
    68px 0 0 0 color-mix(in srgb, var(--oreyx-loading-accent) 64%, transparent);
  transform: translate(-50%, -50%);
  animation: oreyx-loading-minimal-dots 1.1s ease-in-out infinite;
}
.oreyx-loading-page[data-loading-skin="minimal_dots"] .oreyx-loading-page__stage::after { display: none; }

/* Dark Studio: terminal-like command grid, not a soft orb. */
.oreyx-loading-page[data-loading-skin="dark_studio"] .oreyx-loading-page__stage {
  width: min(420px, 90vw);
  aspect-ratio: 1.62;
  border-radius: 34px;
  background:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  background-size: 24px 24px, 24px 24px, 100% 100%;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 45px 130px rgba(0,0,0,.45);
  overflow: hidden;
}
.oreyx-loading-page[data-loading-skin="dark_studio"] .oreyx-loading-page__logo-wrap {
  width: 74px;
  height: 74px;
  border-radius: 24px;
}
.oreyx-loading-page[data-loading-skin="dark_studio"] .oreyx-loading-page__stage::before {
  inset: 18px;
  border-radius: 26px;
  border: 1px solid rgba(6,182,212,.25);
  background: linear-gradient(90deg, transparent, rgba(6,182,212,.16), transparent);
  animation: oreyx-loading-terminal-scan 1.55s ease-in-out infinite;
}
.oreyx-loading-page[data-loading-skin="dark_studio"] .oreyx-loading-page__stage::after {
  inset: auto 34px 28px 34px;
  height: 3px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, #06b6d4, #8b5cf6, transparent);
  animation: oreyx-loading-slide 1.6s ease-in-out infinite;
}

/* Commerce Scan: product-card scan, practical for AI/product stores. */
.oreyx-loading-page[data-loading-skin="commerce_scan"] {
  background:
    radial-gradient(circle at 18% 18%, rgba(23,184,239,.13), transparent 24rem),
    linear-gradient(135deg, #f8fbff, #eef5ff);
}
.oreyx-loading-page[data-loading-skin="commerce_scan"] .oreyx-loading-page__stage {
  width: min(360px, 88vw);
  aspect-ratio: 1.18;
  border-radius: 34px;
  background: #fff;
  border: 1px solid rgba(16,18,35,.08);
  box-shadow: 0 34px 100px rgba(16,18,35,.12);
  overflow: hidden;
}
.oreyx-loading-page[data-loading-skin="commerce_scan"] .oreyx-loading-page__logo-wrap {
  width: 92px;
  height: 92px;
  border-radius: 26px;
  transform: translateY(-8px);
  animation: none;
}
.oreyx-loading-page[data-loading-skin="commerce_scan"] .oreyx-loading-page__stage::before {
  inset: 24px 34px auto 34px;
  height: 20px;
  border: 0;
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(16,18,35,.09) 18%, transparent 18% 25%, rgba(16,18,35,.07) 25% 58%, transparent 58% 66%, rgba(16,18,35,.06) 66% 100%);
  animation: none;
}
.oreyx-loading-page[data-loading-skin="commerce_scan"] .oreyx-loading-page__stage::after {
  inset: 0;
  border: 0;
  border-radius: 0;
  background: linear-gradient(180deg, transparent 0 34%, rgba(23,184,239,.30) 48%, transparent 62% 100%);
  animation: oreyx-loading-vertical-scan 1.42s ease-in-out infinite;
}

/* Soft Wave: logo floats above a liquid wave field. */
.oreyx-loading-page[data-loading-skin="soft_wave"] .oreyx-loading-page__stage {
  width: min(380px, 90vw);
}
.oreyx-loading-page[data-loading-skin="soft_wave"] .oreyx-loading-page__stage::before {
  inset: 18%;
  border-radius: 36% 64% 58% 42%;
  border: 0;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.78), transparent 42%),
    linear-gradient(135deg, rgba(20,184,166,.22), rgba(14,165,233,.18), rgba(244,114,182,.14));
  animation: oreyx-loading-wave 3.1s ease-in-out infinite;
}
.oreyx-loading-page[data-loading-skin="soft_wave"] .oreyx-loading-page__stage::after {
  inset: 68% 18% auto 18%;
  height: 8px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(20,184,166,.34), rgba(14,165,233,.34), transparent);
  animation: oreyx-loading-slide 1.8s ease-in-out infinite;
}

/* New: Progress Bar - most common enterprise loader with logo optional. */
.oreyx-loading-page[data-loading-skin="progress_bar"] {
  background: linear-gradient(135deg, #f8fafc, #eef4ff);
}
.oreyx-loading-page[data-loading-skin="progress_bar"] .oreyx-loading-page__stage {
  width: min(430px, 90vw);
  aspect-ratio: 2.25;
  border-radius: 30px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(16,18,35,.08);
  box-shadow: 0 34px 95px rgba(16,18,35,.11);
}
.oreyx-loading-page[data-loading-skin="progress_bar"] .oreyx-loading-page__logo-wrap {
  width: 68px;
  height: 68px;
  border-radius: 22px;
  transform: translateY(-22px);
}
.oreyx-loading-page[data-loading-skin="progress_bar"] .oreyx-loading-page__stage::before {
  inset: auto 42px 42px 42px;
  height: 10px;
  border: 0;
  border-radius: 999px;
  background: rgba(16,18,35,.08);
  animation: none;
}
.oreyx-loading-page[data-loading-skin="progress_bar"] .oreyx-loading-page__stage::after {
  inset: auto 42px 42px 42px;
  height: 10px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--oreyx-loading-primary), var(--oreyx-loading-secondary));
  transform-origin: left center;
  animation: oreyx-loading-progress 1.65s ease-in-out infinite;
}

/* New: Skeleton Shimmer - no logo, app-like placeholder. */
.oreyx-loading-page[data-loading-skin="skeleton_shimmer"] {
  background: linear-gradient(135deg, #ffffff, #f6f8fb);
}
.oreyx-loading-page[data-loading-skin="skeleton_shimmer"] .oreyx-loading-page__stage {
  width: min(430px, 90vw);
  aspect-ratio: 1.55;
  border-radius: 34px;
  background:
    linear-gradient(90deg, rgba(16,18,35,.07) 0 21%, transparent 21% 100%),
    linear-gradient(90deg, rgba(16,18,35,.07) 0 76%, transparent 76% 100%),
    linear-gradient(90deg, rgba(16,18,35,.055) 0 58%, transparent 58% 100%),
    linear-gradient(90deg, rgba(16,18,35,.05) 0 88%, transparent 88% 100%),
    #fff;
  background-size: 78% 44px, 72% 14px, 84% 14px, 64% 14px, 100% 100%;
  background-position: 32px 34px, 32px 104px, 32px 132px, 32px 160px, 0 0;
  background-repeat: no-repeat;
  border: 1px solid rgba(16,18,35,.07);
  box-shadow: 0 32px 88px rgba(16,18,35,.10);
  overflow: hidden;
}
.oreyx-loading-page[data-loading-skin="skeleton_shimmer"] .oreyx-loading-page__logo-wrap { display: none; }
.oreyx-loading-page[data-loading-skin="skeleton_shimmer"] .oreyx-loading-page__stage::before {
  inset: 0;
  border: 0;
  border-radius: 0;
  background: linear-gradient(105deg, transparent 32%, rgba(255,255,255,.82) 48%, transparent 64%);
  animation: oreyx-loading-shimmer 1.3s linear infinite;
}
.oreyx-loading-page[data-loading-skin="skeleton_shimmer"] .oreyx-loading-page__stage::after { display: none; }

/* New: Checkout Steps - practical purchase flow indicator, logo-free. */
.oreyx-loading-page[data-loading-skin="checkout_steps"] {
  background: linear-gradient(135deg, #f8fbff, #f7fff9);
}
.oreyx-loading-page[data-loading-skin="checkout_steps"] .oreyx-loading-page__stage {
  width: min(390px, 90vw);
  aspect-ratio: 2.6;
  border-radius: 32px;
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(16,18,35,.08);
  box-shadow: 0 32px 92px rgba(16,18,35,.10);
}
.oreyx-loading-page[data-loading-skin="checkout_steps"] .oreyx-loading-page__logo-wrap { display: none; }
.oreyx-loading-page[data-loading-skin="checkout_steps"] .oreyx-loading-page__stage::before {
  inset: 50% 56px auto 56px;
  height: 3px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--oreyx-loading-primary), var(--oreyx-loading-secondary));
  animation: oreyx-loading-slide 1.65s ease-in-out infinite;
}
.oreyx-loading-page[data-loading-skin="checkout_steps"] .oreyx-loading-page__stage::after {
  inset: 0;
  width: 18px;
  height: 18px;
  margin: auto;
  border: 0;
  border-radius: 999px;
  background: var(--oreyx-loading-primary);
  box-shadow:
    -96px 0 0 0 color-mix(in srgb, var(--oreyx-loading-primary) 72%, #fff),
    96px 0 0 0 color-mix(in srgb, var(--oreyx-loading-secondary) 78%, #fff);
  animation: oreyx-loading-step-pop 1.25s ease-in-out infinite;
}

/* New: Product Orbit - brand logo with orbiting product tiles. */
.oreyx-loading-page[data-loading-skin="product_orbit"] {
  background:
    radial-gradient(circle at 50% 34%, rgba(102,88,255,.16), transparent 24rem),
    linear-gradient(135deg, #fbfdff, #f4f7ff);
}
.oreyx-loading-page[data-loading-skin="product_orbit"] .oreyx-loading-page__stage {
  width: min(350px, 88vw);
}
.oreyx-loading-page[data-loading-skin="product_orbit"] .oreyx-loading-page__stage::before {
  inset: 13%;
  border-radius: 999px;
  border: 1px dashed color-mix(in srgb, var(--oreyx-loading-primary) 35%, transparent);
  background: transparent;
  animation: oreyx-loading-spin 9s linear infinite;
}
.oreyx-loading-page[data-loading-skin="product_orbit"] .oreyx-loading-page__stage::after {
  inset: 0;
  width: 26px;
  height: 26px;
  margin: auto;
  border: 0;
  border-radius: 9px;
  background: #fff;
  box-shadow:
    0 -120px 0 0 rgba(102,88,255,.88),
    104px 60px 0 0 rgba(23,184,239,.86),
    -104px 60px 0 0 rgba(255,79,196,.80);
  animation: oreyx-loading-orbit 2.3s linear infinite;
}

/* New: Typing Bubbles - logo-free support/chat style. */
.oreyx-loading-page[data-loading-skin="typing_bubbles"] {
  background: linear-gradient(135deg, #f9fbff, #eff7ff);
}
.oreyx-loading-page[data-loading-skin="typing_bubbles"] .oreyx-loading-page__stage {
  width: min(370px, 90vw);
  aspect-ratio: 1.9;
}
.oreyx-loading-page[data-loading-skin="typing_bubbles"] .oreyx-loading-page__logo-wrap { display: none; }
.oreyx-loading-page[data-loading-skin="typing_bubbles"] .oreyx-loading-page__stage::before {
  inset: 40px 92px 70px 40px;
  border: 0;
  border-radius: 30px 30px 30px 8px;
  background: #fff;
  box-shadow: 0 22px 70px rgba(16,18,35,.10);
  animation: oreyx-loading-bubble-one 1.7s ease-in-out infinite;
}
.oreyx-loading-page[data-loading-skin="typing_bubbles"] .oreyx-loading-page__stage::after {
  inset: 88px 42px 30px 112px;
  border: 0;
  border-radius: 30px 30px 8px 30px;
  background: linear-gradient(135deg, var(--oreyx-loading-primary), var(--oreyx-loading-secondary));
  box-shadow: 0 20px 65px color-mix(in srgb, var(--oreyx-loading-primary) 22%, transparent);
  animation: oreyx-loading-bubble-two 1.7s ease-in-out infinite;
}

/* New: Flip Tiles - tiled catalog motion, logo-free. */
.oreyx-loading-page[data-loading-skin="flip_tiles"] {
  background: linear-gradient(135deg, #f8fbff, #fff8fb);
}
.oreyx-loading-page[data-loading-skin="flip_tiles"] .oreyx-loading-page__stage {
  width: min(260px, 82vw);
  aspect-ratio: 1;
}
.oreyx-loading-page[data-loading-skin="flip_tiles"] .oreyx-loading-page__logo-wrap { display: none; }
.oreyx-loading-page[data-loading-skin="flip_tiles"] .oreyx-loading-page__stage::before {
  inset: auto;
  top: 50%;
  left: 50%;
  width: 52px;
  height: 52px;
  border: 0;
  border-radius: 18px;
  background: var(--oreyx-loading-primary);
  box-shadow:
    68px 0 0 0 var(--oreyx-loading-secondary),
    0 68px 0 0 var(--oreyx-loading-accent),
    68px 68px 0 0 rgba(16,18,35,.82);
  transform: translate(-60px, -60px);
  animation: oreyx-loading-flip-tiles 1.45s ease-in-out infinite;
}
.oreyx-loading-page[data-loading-skin="flip_tiles"] .oreyx-loading-page__stage::after { display: none; }

/* New: Barcode Sweep - logo-free retail scan. */
.oreyx-loading-page[data-loading-skin="barcode_sweep"] {
  background: linear-gradient(135deg, #fff, #f5f7fb);
}
.oreyx-loading-page[data-loading-skin="barcode_sweep"] .oreyx-loading-page__stage {
  width: min(360px, 88vw);
  aspect-ratio: 2.35;
  border-radius: 30px;
  background:
    linear-gradient(90deg,
      #111827 0 3%, transparent 3% 7%, #111827 7% 9%, transparent 9% 14%, #111827 14% 21%, transparent 21% 28%, #111827 28% 31%, transparent 31% 39%, #111827 39% 45%, transparent 45% 50%, #111827 50% 52%, transparent 52% 62%, #111827 62% 69%, transparent 69% 77%, #111827 77% 80%, transparent 80% 88%, #111827 88% 93%, transparent 93% 100%),
    #fff;
  background-size: calc(100% - 72px) 78px, 100% 100%;
  background-position: 36px 50%, 0 0;
  background-repeat: no-repeat;
  border: 1px solid rgba(16,18,35,.08);
  box-shadow: 0 30px 86px rgba(16,18,35,.10);
  overflow: hidden;
}
.oreyx-loading-page[data-loading-skin="barcode_sweep"] .oreyx-loading-page__logo-wrap { display: none; }
.oreyx-loading-page[data-loading-skin="barcode_sweep"] .oreyx-loading-page__stage::before {
  inset: 20px 28px;
  border-radius: 20px;
  border: 1px solid rgba(16,18,35,.08);
  background: transparent;
  animation: none;
}
.oreyx-loading-page[data-loading-skin="barcode_sweep"] .oreyx-loading-page__stage::after {
  inset: 20px auto 20px 0;
  width: 42px;
  border: 0;
  border-radius: 0;
  background: linear-gradient(90deg, transparent, rgba(23,184,239,.38), transparent);
  animation: oreyx-loading-barcode 1.42s ease-in-out infinite;
}

/* New: Neon Grid - high-tech, clearly different from dark studio. */
.oreyx-loading-page[data-loading-skin="neon_grid"] {
  --oreyx-loading-primary: #22d3ee;
  --oreyx-loading-secondary: #a78bfa;
  --oreyx-loading-accent: #fb7185;
  --oreyx-loading-ink: #fff;
  background:
    radial-gradient(circle at 50% 20%, rgba(34,211,238,.20), transparent 30rem),
    linear-gradient(135deg, #050816, #101827);
}
.oreyx-loading-page[data-loading-skin="neon_grid"] .oreyx-loading-page__stage {
  width: min(360px, 88vw);
  aspect-ratio: 1;
  border-radius: 40px;
  background:
    linear-gradient(rgba(34,211,238,.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(167,139,250,.10) 1px, transparent 1px),
    radial-gradient(circle at 50% 50%, rgba(34,211,238,.10), transparent 55%);
  background-size: 26px 26px, 26px 26px, 100% 100%;
  border: 1px solid rgba(34,211,238,.16);
  box-shadow: 0 45px 130px rgba(0,0,0,.44), inset 0 0 48px rgba(34,211,238,.08);
}
.oreyx-loading-page[data-loading-skin="neon_grid"] .oreyx-loading-page__logo-wrap {
  background: rgba(5,8,22,.68);
  border-color: rgba(34,211,238,.25);
  box-shadow: 0 0 60px rgba(34,211,238,.20);
}
.oreyx-loading-page[data-loading-skin="neon_grid"] .oreyx-loading-page__stage::before {
  inset: 14%;
  border-radius: 34px;
  border: 1px solid rgba(34,211,238,.24);
  background: transparent;
  animation: oreyx-loading-neon-frame 1.8s ease-in-out infinite;
}
.oreyx-loading-page[data-loading-skin="neon_grid"] .oreyx-loading-page__stage::after {
  inset: 30%;
  border: 0;
  border-radius: 999px;
  background: conic-gradient(from 0deg, transparent, rgba(34,211,238,.90), rgba(167,139,250,.80), transparent 72%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  animation: oreyx-loading-spin .95s linear infinite;
}

@keyframes oreyx-loading-premium-breathe { 0%,100% { transform: scale(.96) rotate(-2deg); opacity: .66; } 50% { transform: scale(1.06) rotate(2deg); opacity: 1; } }
@keyframes oreyx-loading-aurora-morph { 0%,100% { border-radius: 44% 56% 50% 50%; transform: rotate(-8deg) scale(.96); } 50% { border-radius: 58% 42% 44% 56%; transform: rotate(8deg) scale(1.05); } }
@keyframes oreyx-loading-progress { 0% { transform: scaleX(.08); opacity: .78; } 45% { transform: scaleX(.72); opacity: 1; } 100% { transform: scaleX(1); opacity: .82; } }
@keyframes oreyx-loading-luxury-turn { to { transform: rotate(1turn); } }
@keyframes oreyx-loading-minimal-dots { 0%,100% { transform: translate(-50%, -50%); opacity: .52; } 35% { transform: translate(-50%, calc(-50% - 9px)); opacity: 1; } 70% { transform: translate(-50%, calc(-50% + 5px)); opacity: .72; } }
@keyframes oreyx-loading-terminal-scan { 0% { transform: translateX(-58%); opacity: .52; } 50% { opacity: 1; } 100% { transform: translateX(58%); opacity: .52; } }
@keyframes oreyx-loading-slide { 0%,100% { transform: translateX(-18%) scaleX(.56); opacity: .55; } 50% { transform: translateX(18%) scaleX(1); opacity: 1; } }
@keyframes oreyx-loading-vertical-scan { 0% { transform: translateY(-70%); opacity: .48; } 50% { opacity: 1; } 100% { transform: translateY(70%); opacity: .48; } }
@keyframes oreyx-loading-shimmer { 0% { transform: translateX(-110%); } 100% { transform: translateX(110%); } }
@keyframes oreyx-loading-step-pop { 0%,100% { transform: scale(.82); } 33% { transform: scale(1.12); } 66% { transform: scale(.94); } }
@keyframes oreyx-loading-orbit { to { transform: rotate(1turn); } }
@keyframes oreyx-loading-bubble-one { 0%,100% { transform: translateY(0); opacity: .78; } 50% { transform: translateY(-6px); opacity: 1; } }
@keyframes oreyx-loading-bubble-two { 0%,100% { transform: translateY(4px); opacity: .86; } 50% { transform: translateY(-3px); opacity: 1; } }
@keyframes oreyx-loading-flip-tiles { 0%,100% { transform: translate(-60px, -60px) rotateX(0deg) rotateY(0deg); filter: saturate(1); } 50% { transform: translate(-60px, -60px) rotateX(180deg) rotateY(18deg); filter: saturate(1.28); } }
@keyframes oreyx-loading-barcode { 0% { transform: translateX(20px); opacity: .35; } 50% { opacity: 1; } 100% { transform: translateX(298px); opacity: .35; } }
@keyframes oreyx-loading-neon-frame { 0%,100% { transform: scale(.94); opacity: .52; box-shadow: 0 0 18px rgba(34,211,238,.10); } 50% { transform: scale(1.03); opacity: 1; box-shadow: 0 0 38px rgba(34,211,238,.25); } }

/* Loading Page Studio v2 mobile bounds */
@media (max-width: 640px) {
  .oreyx-loading-page[data-loading-skin="glass_pulse"] .oreyx-loading-page__stage,
  .oreyx-loading-page[data-loading-skin="progress_bar"] .oreyx-loading-page__stage,
  .oreyx-loading-page[data-loading-skin="skeleton_shimmer"] .oreyx-loading-page__stage,
  .oreyx-loading-page[data-loading-skin="commerce_scan"] .oreyx-loading-page__stage,
  .oreyx-loading-page[data-loading-skin="checkout_steps"] .oreyx-loading-page__stage,
  .oreyx-loading-page[data-loading-skin="typing_bubbles"] .oreyx-loading-page__stage,
  .oreyx-loading-page[data-loading-skin="barcode_sweep"] .oreyx-loading-page__stage {
    width: min(320px, 90vw);
  }

  .oreyx-loading-page[data-loading-skin="aurora_orb"] .oreyx-loading-page__stage,
  .oreyx-loading-page[data-loading-skin="product_orbit"] .oreyx-loading-page__stage,
  .oreyx-loading-page[data-loading-skin="neon_grid"] .oreyx-loading-page__stage,
  .oreyx-loading-page[data-loading-skin="soft_wave"] .oreyx-loading-page__stage {
    width: min(300px, 88vw);
  }
}