/* 🌌 NOVAREALM (2026-09-28). Two levels: the universe, then a world. Site theme (--nr-*), phone first, 2D motion only. */
.rh{max-width:1180px;margin:0 auto;padding:10px 16px 90px;overflow-x:clip;color:var(--nr-ink);font-family:var(--nr-body)}
.rh-kicker{display:block;font-size:12px;letter-spacing:.2em;font-weight:700;color:var(--nr-gold)}
.rh h1,.rh h2,.rh h3{font-family:var(--nr-title);letter-spacing:.02em;line-height:1.08}
.rh h1{font-size:clamp(40px,6vw,66px);margin:8px 0 12px}
.rh p{font-size:17px;line-height:1.55;color:var(--nr-muted);margin:0 0 20px;max-width:36em}
.rh-go{display:inline-flex;align-items:center;gap:10px;background:var(--nr-gold);color:#17242c;border:0;border-radius:10px;padding:15px 24px;font:800 17px var(--nr-body);cursor:pointer;animation:rhPulse 2.4s ease-out infinite}
.rh-go span,.rh-cta{transition:translate .2s}
.rh-go:hover span{translate:4px 0}
@keyframes rhPulse{0%{box-shadow:0 0 0 0 #d9bf8366}70%{box-shadow:0 0 0 16px #d9bf8300}100%{box-shadow:0 0 0 0 #d9bf8300}}
.rh-cta{display:inline-block;font:800 16px var(--nr-body);color:var(--nr-gold)}
.rh-view.rh-in{animation:rhIn .6s cubic-bezier(.2,.8,.2,1) both}
@keyframes rhIn{from{opacity:0;scale:.94;filter:blur(6px)}}

/* ── level 1 · the universe ───────────────────────────────────────────── */
.rh-galaxy{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:20px;align-items:center;min-height:560px;padding:20px 0}
.rh-map{position:relative;aspect-ratio:1;max-width:560px;width:100%;justify-self:center}
.rh-orbit{position:absolute;left:50%;top:50%;border:1px solid #d9bf8326;border-radius:50%;translate:-50% -50%;animation:rhTurn linear infinite}
.rh-orbit.o1{width:66%;height:66%;animation-duration:70s}
.rh-orbit.o2{width:86%;height:86%;animation-duration:110s;animation-direction:reverse;border-style:dashed}
.rh-orbit.o3{width:100%;height:100%;animation-duration:160s}
@keyframes rhTurn{to{rotate:360deg}}
/* a locked world: a spoke from the ring's centre to its edge, turned to its angle; the world sits at the spoke's tip
   and turns back as fast as its ring turns, so the padlock stays upright */
.rh-locked{position:absolute;left:50%;top:0;width:0;height:50%;transform-origin:50% 100%;rotate:var(--at)}
.rh-locked i{position:absolute;left:0;top:0;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#3a4b5c,#141c26);border:1px solid #d9bf8340;box-shadow:0 0 18px #7aa7ff22;
  transform:rotate(calc(-1 * var(--at)));animation:rhTurn linear infinite reverse}
.rh-orbit.o1 .rh-locked i{animation-duration:70s}
.rh-orbit.o2 .rh-locked i{animation-duration:110s;animation-direction:normal}
.rh-orbit.o3 .rh-locked i{animation-duration:160s}
.rh-locked i::after{content:"";position:absolute;inset:8px;background:url(/ff3/icons/site/padlock.png) center/contain no-repeat;opacity:.65}
.rh-comet{position:absolute;width:120px;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,#fff8);opacity:0;animation:rhComet 9s linear infinite}
.rh-comet.c1{top:12%;left:-10%;rotate:18deg}
.rh-comet.c2{top:78%;left:50%;rotate:-12deg;animation-delay:4.5s}
@keyframes rhComet{0%{opacity:0;translate:0 0}4%{opacity:1}14%{opacity:0;translate:300px 90px}100%{opacity:0}}
.rh-planet{position:absolute;left:50%;top:50%;translate:-50% -54%;display:flex;flex-direction:column;align-items:center;gap:8px;background:none;border:0;cursor:pointer;color:inherit;z-index:2;animation:rhDrift 6s ease-in-out infinite}
@keyframes rhDrift{50%{translate:-50% -50%}}
.rh-planet-art{display:block;width:250px;height:250px;border-radius:50%;overflow:hidden;background:#397c73;
  box-shadow:inset -25px -22px 0 #173f4980,inset 12px 7px 0 #7eb39535,0 15px 40px #05071670,0 0 90px -10px #8fe0b066;transition:scale .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.rh-planet-art svg{width:100%;height:100%;display:block}
.rh-planet:hover .rh-planet-art,.rh-planet:focus-visible .rh-planet-art{scale:1.06;box-shadow:inset -25px -22px 0 #173f4980,inset 12px 7px 0 #7eb39535,0 22px 50px #05071680,0 0 140px -4px #8fe0b0aa}
.rh-planet-label{font:700 26px var(--nr-title);color:#f1e3bd}
.rh-planet-open{font:800 13px var(--nr-body);letter-spacing:.06em;text-transform:uppercase;color:#10321f;background:#8fe07a;border-radius:99px;padding:4px 12px}
.rh-map-note{position:absolute;left:0;right:0;bottom:-6px;margin:0 auto!important;text-align:center;font-size:14px!important;color:var(--nr-muted)}
.rh-zoom .rh-planet-art{animation:rhZoom .55s cubic-bezier(.5,0,.2,1) both}
.rh-zoom .rh-galaxy-text,.rh-zoom .rh-you,.rh-zoom .rh-orbit{transition:opacity .4s;opacity:0}
@keyframes rhZoom{to{scale:4.5;opacity:0}}
.rh-you{display:flex;align-items:center;gap:24px;margin-top:26px;padding:20px 24px;border-radius:16px;background:linear-gradient(120deg,#1a302b,#172725);border:1px solid var(--nr-line);color:inherit;text-decoration:none;transition:translate .25s,border-color .25s,box-shadow .25s}
.rh-you:hover,.rh-you:focus-visible{translate:0 -4px;border-color:var(--nr-gold);box-shadow:0 18px 34px #0009}
.rh-you h2{font-size:28px;margin:4px 0 6px}
.rh-you p{margin:0;font-size:16px}
.rh-you .rh-cta{margin-left:auto;white-space:nowrap}
.rh-you:hover .rh-cta{translate:4px 0}
.rh-people{display:flex;align-items:flex-end;flex:none}
.rh-people img{width:84px;height:84px;object-fit:contain;image-rendering:auto;margin-left:-16px;transition:translate .3s}
.rh-people img:first-child{margin-left:0}
.rh-you:hover .rh-people img:nth-child(2){translate:0 -8px}
.rh-you:hover .rh-people img:nth-child(1),.rh-you:hover .rh-people img:nth-child(3){translate:0 -4px}

/* ── level 2 · a world ────────────────────────────────────────────────── */
.rh-crumbs{display:flex;gap:8px;align-items:center;font-size:12px;letter-spacing:.18em;font-weight:700;color:var(--nr-gold);padding-top:18px}
.rh-crumbs a{color:var(--nr-muted);text-decoration:none}
.rh-crumbs a:hover{color:var(--nr-ink)}
.rh-world-head{display:flex;align-items:flex-end;gap:20px;justify-content:space-between;margin:10px 0 18px}
.rh-world-head p{margin:0}
.rh-back{flex:none;background:none;border:1px solid var(--nr-line);color:var(--nr-ink);border-radius:10px;padding:12px 16px;font:700 15px var(--nr-body);cursor:pointer}
.rh-back:hover{border-color:var(--nr-gold)}
.rh-scene{position:relative;border-radius:18px;overflow:hidden;border:1px solid var(--nr-line);box-shadow:0 30px 60px #0008;isolation:isolate}
.rh-scene-art{display:block;width:100%;height:auto;animation:rhKen 40s ease-in-out infinite alternate}
@keyframes rhKen{from{scale:1.02;translate:0 0}to{scale:1.08;translate:-1.5% -1%}}
.rh-fire{position:absolute;left:var(--x);top:var(--y);width:14%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,#ffb34a55,#ff7a1a22 40%,transparent 70%);mix-blend-mode:screen;animation:rhFlicker 1.3s ease-in-out infinite alternate}
@keyframes rhFlicker{0%{opacity:.6;scale:.95}40%{opacity:1}100%{opacity:.75;scale:1.08}}
.rh-flies{position:absolute;inset:0;pointer-events:none}
.rh-fly{position:absolute;width:5px;height:5px;border-radius:50%;background:#fff3a8;box-shadow:0 0 8px 3px #ffe56a88;animation:rhFly var(--t) ease-in-out infinite alternate;opacity:.8}
@keyframes rhFly{0%{translate:0 0;opacity:.2}50%{opacity:1}100%{translate:var(--dx) var(--dy);opacity:.3}}
.rh-spot{position:absolute;left:var(--x);top:var(--y);translate:-12px -50%;display:flex;align-items:center;gap:10px;color:var(--nr-ink);text-decoration:none;z-index:2}
.rh-dot{position:relative;width:24px;height:24px;border-radius:50%;background:var(--nr-gold);box-shadow:0 0 0 4px #0b141b99,0 0 18px 4px #d9bf83aa;flex:none}
.rh-dot::before,.rh-dot::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid #d9bf83;animation:rhRing 2.2s ease-out infinite}
.rh-dot::after{animation-delay:1.1s}
@keyframes rhRing{from{scale:.8;opacity:.9}to{scale:2.6;opacity:0}}
.rh-spot-label{background:#0b141be6;border:1px solid #d9bf8366;border-radius:99px;padding:8px 16px;font:800 16px var(--nr-body);white-space:nowrap;box-shadow:0 6px 18px #0008;transition:background .2s,color .2s}
.rh-spot-label em{font-style:normal;color:var(--nr-gold);margin-left:6px}
.rh-spot:hover .rh-spot-label{background:var(--nr-gold);color:#17242c}
.rh-spot:hover .rh-spot-label em{color:#17242c}
.rh-sub{font-size:24px;margin:34px 0 14px}
.rh-acts{display:grid;gap:16px}
.rh-water{position:relative;display:block;min-height:230px;padding:24px 330px 24px 26px;border-radius:16px;background:linear-gradient(120deg,#16302a,#172725 60%);
  border:1px solid var(--nr-line);color:inherit;text-decoration:none;isolation:isolate;transition:translate .25s,border-color .25s,box-shadow .25s}
.rh-water:hover,.rh-water:focus-visible{translate:0 -5px;border-color:var(--nr-gold);box-shadow:0 18px 34px #0009}
.rh-water h3{font-size:30px;margin:6px 0 8px}
.rh-water p{font-size:16px;margin:0 0 14px}
.rh-water:hover .rh-cta{translate:4px 0}
.rh-bar{max-width:440px;margin-bottom:16px}
.rh-bar-top{display:flex;align-items:baseline;gap:6px;font-size:15px;color:var(--nr-muted);margin-bottom:8px}
.rh-bar-top b{font-size:24px;color:var(--nr-ink)}
.rh-bar-top span{margin-left:auto;font-weight:700;color:var(--nr-gold)}
.rh-bar>i{display:block;height:8px;border-radius:4px;background:#ffffff1f;overflow:hidden}
.rh-bar>i>i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,#3f9b39,#8fe07a)}
.rh-hand{position:absolute;right:40px;top:50%;margin-top:-100px;width:240px;height:190px;z-index:-1}
.rh-hand .card{position:absolute;left:50%;bottom:0;width:112px;height:157px;margin-left:-56px;transform-origin:50% 120%;rotate:calc(var(--o) * 12deg);transition:rotate .35s cubic-bezier(.2,.9,.3,1.3),translate .35s;filter:drop-shadow(0 8px 12px #0009)}
.rh-hand .card>.cc,.rh-hand .card>.cc-back{position:absolute;top:0;left:0;transform-origin:top left;transform:scale(calc(112 / 452))}
.rh-hand .card>.cc-back{visibility:inherit}
.rh-water:hover .rh-hand .card{rotate:calc(var(--o) * 20deg);translate:0 -8px}

@media (max-width:760px){
  .rh-galaxy{grid-template-columns:1fr;min-height:0;gap:0;padding-top:6px}
  .rh-map{order:-1;max-width:380px}
  .rh-planet-art{width:170px;height:170px}
  .rh-planet-label{font-size:21px}
  .rh-locked i{width:26px;height:26px;margin:-13px 0 0 -13px}
  .rh-locked i::after{inset:6px}
  .rh-go{width:100%;justify-content:center}
  .rh-you{flex-direction:column;align-items:flex-start;gap:12px}
  .rh-you .rh-cta{margin-left:0}
  .rh-people img{width:70px;height:70px}
  .rh-world-head{flex-direction:column;align-items:flex-start}
  .rh-back{order:-1}
  .rh-spot-label{font-size:14px;padding:6px 12px}
  .rh-water{padding:190px 18px 20px}
  .rh-water h3{font-size:24px}
  .rh-hand{left:50%;right:auto;top:16px;margin:0 0 0 -120px;height:165px}
  .rh-hand .card{width:96px;height:134px;margin-left:-48px}
  .rh-hand .card>.cc,.rh-hand .card>.cc-back{transform:scale(calc(96 / 452))}
}
@media (prefers-reduced-motion:reduce){
  .rh *{animation:none!important}
}