/* A cinematic, image-led bridge between the four EMOLiA universes. */
html[data-universe="leaders"] { --universe-colour: #704495; --universe-pale: #f3eaf8; }
html[data-universe="corporate"] { --universe-colour: #147bc0; --universe-pale: #eaf5fc; }
html[data-universe="schools"] { --universe-colour: #5b984b; --universe-pale: #ebf5e8; }
html[data-universe="families"] { --universe-colour: #d99b23; --universe-pale: #fff4d5; }
html[data-universe="home"] { --universe-colour: #fffdf9; --universe-pale: #fffdf9; }

html[data-enter="true"]::before {
  content: ""; position: fixed; inset: 0; z-index: 2147483647; pointer-events: none;
  background: var(--universe-colour, #fffdf9);
  animation: universe-reveal 620ms cubic-bezier(.2,.7,.15,1) both;
}
@keyframes universe-reveal {
  0%, 14% { opacity: 1; clip-path: circle(150% at 50% 50%); }
  100% { opacity: 0; clip-path: circle(0 at 50% 50%); }
}

.universe-portal {
  position: fixed; z-index: 2147483647; overflow: hidden; isolation: isolate;
  pointer-events: none; margin: 0; color: white;
  background: var(--portal-colour, #14253a);
  box-shadow: 0 32px 90px #071b3459;
  will-change: left, top, width, height, border-radius;
}
.universe-portal__photo {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: var(--portal-position, center);
  filter: saturate(.86) contrast(1.04); transform: scale(1.025);
}
.universe-portal__veil {
  position: absolute; z-index: 1; inset: 0;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--portal-colour) 91%, #061323) 0%, color-mix(in srgb, var(--portal-colour) 75%, transparent) 52%, color-mix(in srgb, #061323 52%, transparent) 100%),
    linear-gradient(180deg, transparent 35%, #061323a6 100%);
}
.universe-portal__veil::after {
  content: ""; position: absolute; inset: 0; opacity: .22;
  background-image: radial-gradient(circle at 1px 1px, white 1px, transparent 1.2px);
  background-size: 29px 29px; mask-image: linear-gradient(90deg, black, transparent 75%);
}
.universe-portal__content {
  position: absolute; z-index: 2; inset: 0; display: grid;
  grid-template-columns: minmax(0, 1fr) auto; align-items: end;
  gap: clamp(28px, 6vw, 100px); padding: clamp(32px, 7vw, 104px); opacity: 0;
}
.universe-portal__copy { max-width: 820px; }
.universe-portal__brand {
  margin: 0 0 clamp(42px, 8vh, 90px);
  font: 800 clamp(20px, 2.5vw, 34px)/1 Manrope, Arial, sans-serif; letter-spacing: -.05em;
}
.universe-portal__eyebrow {
  margin: 0 0 12px; font: 800 clamp(11px, 1.15vw, 15px)/1.3 Manrope, Arial, sans-serif;
  letter-spacing: .17em; text-transform: uppercase; opacity: .78;
}
.universe-portal__title {
  margin: 0; font: 800 clamp(52px, 10vw, 148px)/.88 Manrope, Arial, sans-serif;
  letter-spacing: -.075em; text-wrap: balance;
}
.universe-portal__value {
  max-width: 760px; margin: clamp(18px, 3vh, 34px) 0 0;
  font: 700 clamp(20px, 3vw, 44px)/1.15 Manrope, Arial, sans-serif;
  letter-spacing: -.035em; text-wrap: balance;
}
.universe-portal__slogan {
  margin: 24px 0 0; font: 500 clamp(15px, 1.5vw, 20px)/1.5 Inter, Arial, sans-serif; opacity: .82;
}
.universe-portal__meter {
  display: grid; justify-items: center; gap: 14px; min-width: 150px; padding-bottom: 8px;
}
.universe-portal__ring-wrap { position: relative; width: clamp(104px, 10vw, 142px); aspect-ratio: 1; }
.universe-portal__ring { display: block; width: 100%; height: 100%; transform: rotate(-90deg); }
.universe-portal__ring circle { fill: none; stroke-width: 4; }
.universe-portal__ring-track { stroke: #ffffff40; }
.universe-portal__ring-progress {
  stroke: white; stroke-linecap: round; stroke-dasharray: 308; stroke-dashoffset: 308;
}
.universe-portal__ring-segment {
  stroke: var(--segment-colour); stroke-dasharray: 72 236;
  transform: rotate(var(--segment-turn)); transform-origin: 56px 56px;
}
.universe-portal__percentage {
  position: absolute; inset: 0; display: grid; place-items: center;
  font: 800 clamp(18px, 2vw, 25px)/1 Manrope, Arial, sans-serif;
}
.universe-portal__loading {
  font: 700 11px/1.3 Manrope, Arial, sans-serif; letter-spacing: .12em;
  text-align: center; text-transform: uppercase; opacity: .75;
}

/* Returning home: the four branch universes reunite around the EMOLiA wordmark. */
.universe-portal[data-destination="home"] {
  background:
    radial-gradient(circle at 50% 48%, #25415e 0%, #10263e 46%, #071725 100%);
}
.universe-portal[data-destination="home"] .universe-portal__veil {
  background: radial-gradient(circle at 50% 48%, transparent 0 28%, #0717254f 72%, #04101bd9 100%);
}
.universe-portal[data-destination="home"] .universe-portal__veil::after {
  opacity: .16; mask-image: radial-gradient(circle, black, transparent 76%);
}
.universe-portal__home-orbits { position: absolute; z-index: 0; inset: 0; overflow: hidden; }
.universe-portal__home-orbit {
  position: absolute; width: min(60vw, 760px); aspect-ratio: 1; border-radius: 50%;
  opacity: .62; filter: blur(3px); mix-blend-mode: screen;
  animation: universe-home-gather 1.45s cubic-bezier(.2,.76,.2,1) both;
}
.universe-portal__home-orbit::before,
.universe-portal__home-orbit::after {
  content: ""; position: absolute; inset: 7%; border: 2px solid currentColor; border-radius: 50%; opacity: .48;
}
.universe-portal__home-orbit::after { inset: 22%; opacity: .26; }
.universe-portal__home-orbit--leaders {
  left: -18%; top: -34%; color: #b98add;
  background: radial-gradient(circle, #7044958c 0 25%, transparent 66%);
  --gather-x: 29vw; --gather-y: 22vh;
}
.universe-portal__home-orbit--corporate {
  right: -18%; top: -34%; color: #55b9f4;
  background: radial-gradient(circle, #147bc08c 0 25%, transparent 66%);
  --gather-x: -29vw; --gather-y: 22vh;
}
.universe-portal__home-orbit--schools {
  right: -18%; bottom: -36%; color: #8fd27e;
  background: radial-gradient(circle, #5b984b8c 0 25%, transparent 66%);
  --gather-x: -29vw; --gather-y: -22vh;
}
.universe-portal__home-orbit--families {
  left: -18%; bottom: -36%; color: #f4c35d;
  background: radial-gradient(circle, #d99b238c 0 25%, transparent 66%);
  --gather-x: 29vw; --gather-y: -22vh;
}
@keyframes universe-home-gather {
  0% { transform: translate(0, 0) scale(.72); opacity: 0; }
  42% { opacity: .66; }
  78% { transform: translate(var(--gather-x), var(--gather-y)) scale(.82); opacity: .74; }
  100% { transform: translate(var(--gather-x), var(--gather-y)) scale(.95); opacity: .48; }
}
.universe-portal[data-destination="home"] .universe-portal__content {
  grid-template-columns: 1fr; align-content: center; justify-items: center;
  gap: clamp(30px, 5vh, 58px); text-align: center;
}
.universe-portal[data-destination="home"] .universe-portal__copy { max-width: 980px; }
.universe-portal[data-destination="home"] .universe-portal__brand {
  margin: 0 0 clamp(42px, 8vh, 82px);
}
.universe-portal__brand--multicolour {
  display: flex; justify-content: center; gap: .01em;
  font-size: clamp(42px, 7vw, 96px); letter-spacing: -.08em;
}
.universe-portal__brand--multicolour span { display: inline-block; animation: universe-letter-gather 780ms cubic-bezier(.18,.75,.2,1) both; animation-delay: calc(170ms + var(--letter-index) * 55ms); }
.universe-portal__brand--multicolour span:nth-child(1) { color: #f5b322; }
.universe-portal__brand--multicolour span:nth-child(2) { color: #2389c5; }
.universe-portal__brand--multicolour span:nth-child(3) { color: #c42d64; }
.universe-portal__brand--multicolour span:nth-child(4) { color: #8e3da0; }
.universe-portal__brand--multicolour span:nth-child(5) { color: #e57912; }
.universe-portal__brand--multicolour span:nth-child(6) { color: #3e9147; }
@keyframes universe-letter-gather {
  0% { opacity: 0; transform: translateY(24px) scale(.72) rotate(-4deg); }
  100% { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
}
.universe-portal[data-destination="home"] .universe-portal__title {
  font-size: clamp(38px, 6vw, 88px); line-height: .98; letter-spacing: -.065em;
}
.universe-portal[data-destination="home"] .universe-portal__value {
  margin-top: clamp(18px, 3vh, 28px); color: #ffffffc9;
  font: 500 clamp(17px, 1.8vw, 23px)/1.4 Inter, Arial, sans-serif; letter-spacing: 0;
}
.universe-portal[data-destination="home"] .universe-portal__meter { padding: 0; }
.universe-portal[data-destination="home"] .universe-portal__loading { color: #ffffffd1; }

@media (max-width: 720px) {
  .universe-portal__veil {
    background: linear-gradient(180deg, color-mix(in srgb, var(--portal-colour) 64%, transparent) 0%, color-mix(in srgb, var(--portal-colour) 94%, #061323) 70%, #061323 100%);
  }
  .universe-portal__content {
    grid-template-columns: 1fr; align-content: end; justify-items: start; gap: 28px;
    padding: 32px 25px max(32px, env(safe-area-inset-bottom));
  }
  .universe-portal__brand { margin-bottom: 30px; }
  .universe-portal__title { font-size: clamp(48px, 18vw, 78px); }
  .universe-portal__value { max-width: 95%; font-size: clamp(20px, 6.6vw, 30px); }
  .universe-portal__slogan { margin-top: 16px; }
  .universe-portal__meter {
    position: absolute; right: 24px; top: max(25px, env(safe-area-inset-top)); min-width: 92px;
  }
  .universe-portal__ring-wrap { width: 84px; }
  .universe-portal__loading { max-width: 100px; font-size: 9px; }
  .universe-portal[data-destination="home"] .universe-portal__content {
    align-content: center; justify-items: center; gap: 28px; padding: 34px 24px;
  }
  .universe-portal[data-destination="home"] .universe-portal__brand { margin-bottom: 46px; }
  .universe-portal[data-destination="home"] .universe-portal__eyebrow { font-size: 10px; }
  .universe-portal[data-destination="home"] .universe-portal__title { font-size: clamp(36px, 11vw, 56px); }
  .universe-portal[data-destination="home"] .universe-portal__value { font-size: 17px; }
  .universe-portal[data-destination="home"] .universe-portal__meter {
    position: static; min-width: 112px;
  }
  .universe-portal[data-destination="home"] .universe-portal__ring-wrap { width: 92px; }
  .universe-portal__home-orbit { width: 105vw; }
}

@media (prefers-reduced-motion: reduce) {
  html[data-enter="true"]::before { animation: none; display: none; }
  .universe-portal { display: none; }
}