:root {
  --rose:#c0143c; --rose-mid:#e0365a; --rose-light:#f48fb1;
  --gold:#d4a853; --white:#ffffff;
  --font-display:'Cinzel',serif; --font-serif:'Cormorant Garamond',serif;
  --font-sans:'Lato',sans-serif; --ease-expo:cubic-bezier(0.16,1,0.3,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html,body{width:100%;height:100%;background:#02000a;overflow:hidden;color:#fff;}

#hub-canvas{position:fixed;inset:0;width:100%;height:100%;z-index:0;}

#hub-content{
  position:fixed;inset:0;z-index:10;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:0;
  animation:fadeUp 1.4s var(--ease-expo) 0.3s both;
}
.hub-eyebrow{
  font-family:var(--font-sans);font-size:.56rem;font-weight:300;
  letter-spacing:.45em;text-transform:uppercase;color:var(--gold);margin-bottom:.5rem;
}
.hub-title{
  font-family:var(--font-display);font-size:clamp(2rem,5vw,3.8rem);
  font-weight:300;letter-spacing:.1em;color:var(--white);
  text-shadow:0 0 60px rgba(212,168,83,.4);margin-bottom:.6rem;
}
.hub-subtitle{
  font-family:var(--font-serif);font-size:1.05rem;font-style:italic;
  color:rgba(255,255,255,.35);margin-bottom:3rem;
}

/* Portals row */
.portals{
  display:flex;gap:2.5rem;align-items:center;justify-content:center;
  flex-wrap:wrap;
}

.portal{
  display:flex;flex-direction:column;align-items:center;gap:1rem;
  text-decoration:none;cursor:pointer;
  transition:transform .4s var(--ease-expo);
}
.portal:hover{transform:translateY(-8px) scale(1.04);}

.portal-canvas{
  border-radius:50%;
  box-shadow:0 0 30px rgba(212,168,83,.2);
  transition:box-shadow .4s;
}
.portal:hover .portal-canvas{box-shadow:0 0 60px rgba(212,168,83,.55),0 0 20px var(--rose);}

.portal-label{display:flex;flex-direction:column;align-items:center;gap:.25rem;}
.portal-icon{font-size:1.4rem;}
.portal-name{
  font-family:var(--font-display);font-size:.9rem;font-weight:300;
  letter-spacing:.08em;color:var(--white);
}
.portal-hint{
  font-family:var(--font-serif);font-size:.8rem;font-style:italic;
  color:rgba(255,255,255,.3);
}

.back-link{
  position:fixed;bottom:1.6rem;left:50%;transform:translateX(-50%);
  z-index:20;font-family:var(--font-sans);font-size:.58rem;
  letter-spacing:.28em;text-transform:uppercase;color:rgba(255,255,255,.2);
  text-decoration:none;transition:color .3s;
}
.back-link:hover{color:rgba(255,255,255,.6);}

@keyframes fadeUp{from{opacity:0;transform:translateY(24px);}to{opacity:1;transform:translateY(0);}}

@media(max-width:700px){
  .portals{gap:1.5rem;}
  .portal-canvas{width:130px!important;height:130px!important;}
  .hub-subtitle{margin-bottom:2rem;}
}