:root{
  --bg1:#0b1238;
  --bg2:#1a2b6f;
  --txt: rgba(255,255,255,.93);
  --muted: rgba(255,255,255,.72);
  --shadow: 0 22px 70px rgba(0,0,0,.55);
  --r: 22px;
  --stroke: rgba(255,255,255,.16);
}

/* base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--txt);
  font: 16px/1.35 system-ui, -apple-system, Segoe UI, Roboto, Arial;
  background:
    radial-gradient(900px 520px at 18% 18%, rgba(140,190,255,.16), transparent 58%),
    radial-gradient(820px 520px at 82% 30%, rgba(255,170,220,.14), transparent 60%),
    radial-gradient(780px 520px at 55% 78%, rgba(170,255,225,.10), transparent 60%),
    linear-gradient(180deg, var(--bg1), var(--bg2));
  overflow-x:hidden;
}

/* Pixi background layer */
#bg-canvas{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
}

/* Foreground UI */
.wrap{
  position:relative;
  z-index:1;
  min-height:100%;
  display:flex;
  flex-direction:column;
  gap:18px;
  padding:22px;
  max-width:980px;
  margin:0 auto;
}

.hero{
  padding:18px 16px;
  border:1px solid var(--stroke);
  border-radius:var(--r);
  background: linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.05));
  box-shadow: var(--shadow);
  backdrop-filter: blur(12px);
}

.hero h1{margin:0 0 6px; font-size:34px; letter-spacing:.2px}
.sub{margin:0; color:var(--muted)}

.bubbles{
  display:grid;
  gap:14px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 860px){ .bubbles{grid-template-columns:1fr} }

.bubble{
  border:1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  padding:18px 18px;
  text-align:left;
  cursor:pointer;
  color:var(--txt);
  background:
    radial-gradient(120% 170% at 24% 18%, rgba(255,255,255,.22), rgba(255,255,255,.06));
  box-shadow: 0 16px 44px rgba(0,0,0,.44);
  transition: transform .12s ease, border-color .12s ease, filter .12s ease;
  position:relative;
  overflow:hidden;
  user-select:none;
  -webkit-tap-highlight-color: transparent;
}

.bubble:hover{transform: translateY(-2px); border-color: rgba(255,255,255,.34)}
.bubble:active{transform: translateY(0px) scale(.99)}
.bubble__title{display:block; font-weight:950; font-size:22px}
.bubble__hint{display:block; margin-top:3px; color:var(--muted); font-size:13px}

.bubble::before{
  content:"";
  position:absolute;
  inset:-40%;
  background:
    radial-gradient(circle at 26% 30%, rgba(170,220,255,.42), transparent 54%),
    radial-gradient(circle at 74% 64%, rgba(255,170,230,.30), transparent 58%),
    radial-gradient(circle at 46% 70%, rgba(170,255,230,.22), transparent 58%);
  filter: blur(3px);
  opacity:.80;
}

/* Footer */
.foot{ margin-top:auto; opacity:.65; font-size:12px; padding:10px 2px; }

/* Bottom sheet */
.sheet{ position:fixed; inset:0; display:none; z-index:50; }
.sheet.is-open{display:block}
.sheet__backdrop{ position:absolute; inset:0; background: rgba(0,0,0,.55); backdrop-filter: blur(7px); }
.sheet__panel{
  position:absolute; left:50%; transform:translateX(-50%);
  bottom:14px; width:min(680px, calc(100% - 22px));
  border:1px solid rgba(255,255,255,.16);
  border-radius: 24px;
  background: rgba(18,24,52,.82);
  box-shadow: var(--shadow);
  overflow:hidden;
  backdrop-filter: blur(14px);
}
.sheet__top{ display:flex; align-items:center; justify-content:space-between; padding:14px 14px 10px; border-bottom:1px solid rgba(255,255,255,.10); }
.sheet__top h2{margin:0; font-size:16px}
.iconbtn{
  border:1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  color:var(--txt);
  width:34px; height:34px;
  border-radius: 12px;
  cursor:pointer;
}
.iconbtn:hover{background: rgba(255,255,255,.12)}
.sheet__links{padding:12px; display:grid; gap:10px}
.linkbtn{
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:12px 12px;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color:var(--txt);
  text-decoration:none;
}
.linkbtn:hover{border-color: rgba(255,255,255,.28); background: rgba(255,255,255,.09)}
.linkbtn small{color:var(--muted)}
.sheet__foot{margin:0; padding:0 14px 14px; color:var(--muted); font-size:12px}


/* --- Centered layout overrides --- */
.wrap--center{
  justify-content:center;
  padding-top:28px;
  padding-bottom:28px;
}

.hero--compact{
  max-width: 980px;
}

.bubbles--center{
  max-width: 980px;
  margin: 0 auto;
  align-items:center;
}

@media (min-width: 861px){
  .bubbles--center{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Make bubbles feel more like "orbs" */
.bubble{
  text-align:center;
  padding:26px 18px;
}

.bubble__title{
  font-size:24px;
  letter-spacing:.2px;
}

/* Slightly larger and more orb-like on desktop */
@media (min-width: 861px){
  .bubble{
    padding:30px 18px;
  }
}


/* --- Only orbs layout --- */
.wrap--only-orbs{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
}

.bubbles--orbs{
  display:flex;
  gap:48px;
  align-items:center;
  justify-content:center;
}

@media (max-width: 860px){
  .bubbles--orbs{
    flex-direction:column;
    gap:28px;
  }
}

/* --- Orb (planet / soap bubble) --- */
.orb{
  width:180px;
  height:180px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.22);
  background:
    radial-gradient(circle at 30% 28%, rgba(255,255,255,.45), rgba(255,255,255,.12) 40%, rgba(255,255,255,.04) 60%),
    radial-gradient(circle at 70% 72%, rgba(140,190,255,.35), transparent 55%);
  box-shadow:
    inset 0 0 18px rgba(255,255,255,.25),
    0 28px 70px rgba(0,0,0,.55);
  color: var(--txt);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  position:relative;
  overflow:hidden;
  transition: transform .25s ease, box-shadow .25s ease;
  backdrop-filter: blur(6px);
}

.orb::before{
  content:"";
  position:absolute;
  inset:-20%;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.35), transparent 40%),
    radial-gradient(circle at 70% 70%, rgba(255,170,230,.35), transparent 45%);
  filter: blur(6px);
  opacity:.8;
}

.orb:hover{
  transform: translateY(-6px) scale(1.05);
  box-shadow:
    inset 0 0 24px rgba(255,255,255,.35),
    0 36px 90px rgba(0,0,0,.65);
}

.orb:active{
  transform: scale(.97);
}

.orb__title{
  font-size:26px;
  font-weight:900;
  letter-spacing:.3px;
  text-shadow: 0 2px 12px rgba(0,0,0,.6);
}

/* subtle floating animation */
@media (prefers-reduced-motion: no-preference){
  .orb{
    animation: orbFloat 6s ease-in-out infinite;
  }
  .orb:nth-child(2){ animation-delay: -2s }
  .orb:nth-child(3){ animation-delay: -4s }
}

@keyframes orbFloat{
  0%,100%{ transform: translateY(0) }
  50%{ transform: translateY(-10px) }
}

/* --- Extra fairy shimmer on orbs --- */
.orb::after{
  content:"";
  position:absolute;
  inset:-12%;
  border-radius:50%;
  border: 1px solid rgba(255,255,255,.14);
  filter: blur(.2px);
  opacity:.55;
}

@media (prefers-reduced-motion: no-preference){
  .orb::after{
    animation: orbRingShimmer 5.5s ease-in-out infinite;
  }
}

@keyframes orbRingShimmer{
  0%,100%{ opacity:.38; transform: rotate(0deg) }
  50%{ opacity:.70; transform: rotate(12deg) }
}


/* --- Global lightness boost --- */
body{
  background:
    radial-gradient(900px 520px at 20% 20%, rgba(180,220,255,.28), transparent 60%),
    radial-gradient(820px 520px at 80% 30%, rgba(255,200,235,.26), transparent 62%),
    radial-gradient(780px 520px at 50% 80%, rgba(200,255,235,.22), transparent 60%),
    linear-gradient(180deg, var(--bg1), var(--bg2));
}
.orb{
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.68), rgba(255,255,255,.24) 42%, rgba(255,255,255,.10) 62%),
    radial-gradient(circle at 70% 75%, rgba(170,210,255,.45), transparent 60%);
  box-shadow:
    inset 0 0 24px rgba(255,255,255,.36),
    0 34px 90px rgba(0,0,0,.45);
}


/* --- Triskel orbit layout (3 orbs rotating around center) --- */
.triskel{
  position:relative;
  width:min(560px, 92vw);
  height:min(560px, 92vw);
  display:grid;
  place-items:center;
}
.triskel::before{
  content:"";
  position:absolute;
  inset:-10%;
  border-radius:50%;
  background:
    radial-gradient(circle at 30% 30%, rgba(180,220,255,.20), transparent 55%),
    radial-gradient(circle at 70% 35%, rgba(255,200,235,.18), transparent 58%),
    radial-gradient(circle at 55% 78%, rgba(200,255,235,.16), transparent 60%);
  filter: blur(12px);
  opacity:.95;
  pointer-events:none;
}
.triskel__ring{
  position:absolute;
  inset:12%;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:
    inset 0 0 30px rgba(255,255,255,.10),
    0 0 90px rgba(180,220,255,.08);
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.06), transparent 65%),
    conic-gradient(from 0deg,
      rgba(255,255,255,.00) 0deg,
      rgba(255,255,255,.08) 35deg,
      rgba(255,255,255,.00) 70deg,
      rgba(255,255,255,.07) 110deg,
      rgba(255,255,255,.00) 160deg,
      rgba(255,255,255,.06) 210deg,
      rgba(255,255,255,.00) 260deg,
      rgba(255,255,255,.07) 320deg,
      rgba(255,255,255,.00) 360deg
    );
  opacity:.9;
}
.triskel__rotor{
  position:absolute;
  inset:0;
  animation: triskelSpin 14s linear infinite;
  transform-origin:center;
}
@keyframes triskelSpin{
  from{ transform: rotate(0deg); }
  to{ transform: rotate(360deg); }
}
:root{ --orbitR: 185px; }
@media (max-width: 520px){ :root{ --orbitR: 155px; } }
@media (max-width: 380px){ :root{ --orbitR: 132px; } }
.triskel__orb{
  position:absolute;
  left:50%;
  top:50%;
}
.triskel__orb--1{ transform: translate(-50%, -50%) translate(var(--orbitR), 0); }
.triskel__orb--2{ transform: translate(-50%, -50%) rotate(120deg) translate(var(--orbitR), 0) rotate(-120deg); }
.triskel__orb--3{ transform: translate(-50%, -50%) rotate(240deg) translate(var(--orbitR), 0) rotate(-240deg); }
.triskel__orb .orb__inner{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
  animation: triskelCounter 14s linear infinite;
}
@keyframes triskelCounter{
  from{ transform: rotate(0deg); }
  to{ transform: rotate(-360deg); }
}
.orb{ width:190px; height:190px; }
@media (max-width: 520px){ .orb{ width:170px; height:170px; } }
@media (max-width: 380px){ .orb{ width:150px; height:150px; } }
@media (prefers-reduced-motion: reduce){
  .triskel__rotor{ animation:none; }
  .triskel__orb .orb__inner{ animation:none; }
}


/* --- Triskel FIX: positions on wrapper so orb transforms/hover don't break layout --- */
.triskel__pos{
  position:absolute;
  left:50%;
  top:50%;
}

:root{ --orbitR: 185px; }
@media (max-width: 520px){ :root{ --orbitR: 150px; } }
@media (max-width: 380px){ :root{ --orbitR: 128px; } }

.triskel__pos--1{ transform: translate(-50%, -50%) translate(var(--orbitR), 0); }
.triskel__pos--2{ transform: translate(-50%, -50%) rotate(120deg) translate(var(--orbitR), 0); }
.triskel__pos--3{ transform: translate(-50%, -50%) rotate(240deg) translate(var(--orbitR), 0); }

/* Counter-rotate the content so text stays upright */
.triskel__pos .orb__inner{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
  animation: triskelCounter 14s linear infinite;
}
@keyframes triskelCounter{
  from{ transform: rotate(0deg); }
  to{ transform: rotate(-360deg); }
}

/* IMPORTANT: inside the triskel, do not use transform-based hover/float on the orb itself */
.triskel .orb{
  animation:none !important;
  transform:none !important;
}
.triskel .orb:hover{
  transform:none !important;
  filter: brightness(1.04);
}
.triskel .orb:active{
  transform:none !important;
  filter: brightness(0.98);
}

@media (prefers-reduced-motion: reduce){
  .triskel__rotor{ animation:none !important; }
  .triskel__pos .orb__inner{ animation:none !important; }
}