/* AbstractRealmss Personalisation Hub */
.personalisation-hub-page{
  background:
    radial-gradient(circle at 84% 10%,rgba(70,162,231,.1),transparent 28%),
    radial-gradient(circle at 18% 42%,rgba(42,104,189,.08),transparent 34%),
    #030916;
}

.personalise-universe{padding:34px 0 90px}
.personalise-section-heading{margin-bottom:20px}
.personalise-section-heading h2{
  margin:10px 0 0;
  font:clamp(2rem,4vw,3.4rem)/1.08 Georgia,serif;
}

/*
 * The homepage Orbital Realm component is reused here without allowing app.js
 * to replace its seven personalisable product links.
 */
.personalisation-hub-page[data-option="1"] .personalise-category-stage{
  min-height:620px;
  max-width:1100px;
  margin:0 auto -24px;
  transform:translateY(-24px);
}
.personalisation-hub-page[data-option="1"] .personalise-category-stage .category-item{
  width:156px;
  min-height:70px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  padding:11px 12px;
  transform:
    rotate(calc(-90deg + var(--angle)))
    translateX(270px)
    rotate(calc(90deg - var(--angle)));
}
.personalisation-hub-page[data-option="1"] .personalise-category-stage .category-item .num{
  color:#93adc6;
  font-weight:600;
}
.personalisation-hub-page[data-option="1"] .personalise-category-stage .category-item .name{
  font-size:15px;
  line-height:1.15;
  white-space:nowrap;
}
.personalisation-hub-page[data-option="1"] .personalise-category-stage .category-item:hover,
.personalisation-hub-page[data-option="1"] .personalise-category-stage .category-item:focus-visible{
  transform:
    rotate(calc(-90deg + var(--angle)))
    translateX(278px)
    rotate(calc(90deg - var(--angle)))
    scale(1.035);
}
.personalisation-hub-page[data-option="1"] .personalise-category-stage .category-item:after{
  display:none;
}
.personalisation-hub-page[data-option="1"] .personalise-category-stage .category-core{
  width:220px;
  height:220px;
  padding:24px;
  text-align:center;
  font:clamp(1.65rem,2.4vw,2rem)/1.08 Georgia,serif;
}

@media(max-width:760px){
  .personalise-universe{padding:28px 0 70px}
  .personalise-section-heading{margin-bottom:12px}
  .personalisation-hub-page[data-option="1"] .personalise-category-stage{
    display:flex;
    flex-direction:column;
    min-height:0;
    margin:0;
    gap:10px;
    transform:none;
  }
  .personalisation-hub-page[data-option="1"] .personalise-category-stage:before,
  .personalisation-hub-page[data-option="1"] .personalise-category-stage:after,
  .personalisation-hub-page[data-option="1"] .personalise-category-stage .category-core{
    display:none;
  }
  .personalisation-hub-page[data-option="1"] .personalise-category-stage .category-item,
  .personalisation-hub-page[data-option="1"] .personalise-category-stage .category-item:hover,
  .personalisation-hub-page[data-option="1"] .personalise-category-stage .category-item:focus-visible{
    position:relative;
    inset:auto;
    width:100%;
    min-height:78px;
    transform:none;
  }
}

@media(prefers-reduced-motion:reduce){
  .personalisation-hub-page .category-item{transition:none}
}

/* ── Smooth Loading Screen for Canvas Editor Transition ── */
.personalise-page-loader {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 50% 40%, rgba(10, 26, 52, 0.94), rgba(3, 9, 22, 0.98));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.personalise-page-loader.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.personalise-page-loader-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 380px;
  width: 90%;
  padding: 36px 28px 30px;
  background: linear-gradient(145deg, rgba(16, 38, 70, 0.85), rgba(4, 14, 30, 0.95));
  border: 1px solid rgba(120, 190, 247, 0.3);
  border-radius: 24px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 40px rgba(118, 227, 255, 0.12);
  transform: scale(0.94);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.personalise-page-loader.is-active .personalise-page-loader-card {
  transform: scale(1);
}

.personalise-loader-orb {
  position: relative;
  width: 72px;
  height: 72px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.personalise-loader-glow {
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(118, 227, 255, 0.45), transparent 70%);
  animation: pulseGlow 2s ease-in-out infinite alternate;
}

.personalise-loader-spinner {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3px solid rgba(120, 190, 247, 0.15);
  border-top-color: #76e3ff;
  border-right-color: #90b1ff;
  animation: spinLoader 0.9s linear infinite;
}

.personalise-loader-icon {
  position: relative;
  z-index: 2;
  color: #76e3ff;
  animation: floatIcon 2.5s ease-in-out infinite;
}

.personalise-loader-title {
  margin: 0 0 8px;
  font-family: 'Georgia', serif;
  font-size: 22px;
  font-weight: 700;
  color: #f4f8fc;
  letter-spacing: -0.01em;
}

.personalise-loader-sub {
  margin: 0 0 22px;
  font-size: 13px;
  color: #8ca1b6;
  line-height: 1.4;
}

.personalise-loader-slider-container {
  width: 100%;
  margin-bottom: 4px;
}

.personalise-loader-slider-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 700;
}

.personalise-loader-phase {
  color: #76e3ff;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 11px;
}

.personalise-loader-percent {
  color: #f4f8fc;
  font-family: monospace;
  font-size: 13.5px;
  background: rgba(118, 227, 255, 0.12);
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(118, 227, 255, 0.25);
}

.personalise-loader-slider-track {
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: rgba(120, 190, 247, 0.16);
  overflow: hidden;
  position: relative;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}

.personalise-loader-slider-fill {
  width: 0%;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #2e8b85, #76e3ff, #90b1ff);
  box-shadow: 0 0 12px rgba(118, 227, 255, 0.7);
  transition: width 0.15s ease;
}

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

@keyframes pulseGlow {
  0% { transform: scale(0.9); opacity: 0.5; }
  100% { transform: scale(1.15); opacity: 0.9; }
}

@keyframes floatIcon {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}