/* Nova pastel hero — organic word field around the central orb. */
.cinema-orbit-shell{
  position:absolute;
  left:50%;
  top:48%;
  width:clamp(460px,48vw,660px);
  height:clamp(370px,39vw,520px);
  transform:translate(-50%,-50%);
  z-index:7;
  display:grid;
  place-items:center;
  pointer-events:none;
}

/* No geometric ring: only a very soft, irregular atmosphere around Nova. */
.cinema-orbit-shell::before{
  content:"";
  position:absolute;
  width:70%;
  height:72%;
  left:49%;
  top:50%;
  transform:translate(-50%,-50%) rotate(-7deg);
  border-radius:46% 54% 52% 48% / 55% 44% 56% 45%;
  background:
    radial-gradient(circle at 34% 42%,rgba(169,190,239,.12),transparent 48%),
    radial-gradient(circle at 67% 58%,rgba(191,220,203,.10),transparent 50%);
  filter:blur(26px);
}

.cinema-orbit-track{position:absolute;inset:0;}
.cinema-orbit-track>span{
  position:absolute;
  left:var(--x);
  top:var(--y);
  width:auto;
  height:auto;
  opacity:0;
  filter:blur(3px);
  transform:translate(-50%,-50%);
  transition:opacity .65s var(--ease),filter .65s var(--ease);
  animation:novaWordDrift var(--dur,14s) ease-in-out var(--delay,0s) infinite alternate;
  will-change:transform;
  pointer-events:auto;
  cursor:default;
}
.cinema-orbit-track>span em{
  display:block;
  font-style:normal;
  font-size:clamp(7px,.58vw,8.5px);
  line-height:1;
  font-weight:680;
  letter-spacing:.17em;
  color:rgba(17,18,23,.67);
  white-space:nowrap;
  transition:color .3s var(--ease);
}
body.ready .cinema-orbit-track>span{opacity:1;filter:none}

/* Survol : le mot pointé reste net, les autres passent en gris. */
.cinema-orbit-track:hover>span:not(:hover) em{color:rgba(17,18,23,.22)}
.cinema-orbit-track>span:hover em{color:rgba(17,18,23,.85)}

/* Deliberately irregular placement: a loose constellation, not a circle. */
.cinema-orbit-track>span:nth-child(1){--x:47%;--y:8%;--dx:2px;--dy:-2px;--dur:15s;--delay:-3s}
.cinema-orbit-track>span:nth-child(2){--x:66%;--y:18%;--dx:-2px;--dy:1px;--dur:17s;--delay:-8s}
.cinema-orbit-track>span:nth-child(3){--x:84%;--y:31%;--dx:2px;--dy:2px;--dur:14s;--delay:-5s}
.cinema-orbit-track>span:nth-child(4){--x:78%;--y:50%;--dx:-2px;--dy:-1px;--dur:16s;--delay:-10s}
.cinema-orbit-track>span:nth-child(5){--x:87%;--y:69%;--dx:1px;--dy:-2px;--dur:18s;--delay:-7s}
.cinema-orbit-track>span:nth-child(6){--x:63%;--y:82%;--dx:-2px;--dy:2px;--dur:15s;--delay:-11s}
.cinema-orbit-track>span:nth-child(7){--x:43%;--y:91%;--dx:2px;--dy:-1px;--dur:17s;--delay:-4s}
.cinema-orbit-track>span:nth-child(8){--x:26%;--y:78%;--dx:1px;--dy:2px;--dur:14s;--delay:-9s}
.cinema-orbit-track>span:nth-child(9){--x:12%;--y:59%;--dx:-2px;--dy:-1px;--dur:16s;--delay:-6s}
.cinema-orbit-track>span:nth-child(10){--x:20%;--y:40%;--dx:2px;--dy:1px;--dur:18s;--delay:-12s}
.cinema-orbit-track>span:nth-child(11){--x:23%;--y:22%;--dx:-1px;--dy:-2px;--dur:15s;--delay:-2s}
.cinema-orbit-track>span:nth-child(12){--x:41%;--y:29%;--dx:2px;--dy:1px;--dur:17s;--delay:-13s}

.cinema-orbit-core{
  position:relative;
  z-index:3;
  width:74px;
  height:74px;
  animation:novaOrbBreathe 12s ease-in-out infinite;
  will-change:transform;
}
.cinema-orbit-core::after{
  content:"";
  position:absolute;
  inset:-70%;
  border-radius:50%;
  background:radial-gradient(circle,rgba(151,170,234,.16),rgba(151,170,234,0) 68%);
  z-index:-1;
  filter:blur(10px);
}

@keyframes novaWordDrift{
  from{transform:translate(-50%,-50%) translate3d(0,0,0)}
  to{transform:translate(-50%,-50%) translate3d(var(--dx),var(--dy),0)}
}
@keyframes novaOrbBreathe{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  35%{transform:translate3d(2px,-2px,0) scale(1.008)}
  68%{transform:translate3d(-2px,1px,0) scale(.996)}
}

/* Keep the original cinematic copy clear around the organic field. */
.cinema-copy .a{top:20vh}
.cinema-copy .b{top:68vh}

body.calm .cinema-orbit-track>span,
body.calm .cinema-orbit-core{animation-play-state:paused!important}

@media (prefers-reduced-motion:reduce){
  .cinema-orbit-track>span,.cinema-orbit-core{animation:none!important}
}

@media (max-width:768px){
  .cinema-orbit-shell{
    top:47%;
    width:min(92vw,360px);
    height:min(78vw,330px);
  }
  .cinema-orbit-shell::before{width:78%;height:78%;filter:blur(22px)}
  .cinema-orbit-core{width:56px;height:56px}
  .cinema-orbit-track>span em{font-size:6.5px;letter-spacing:.115em}
  html body .cinema .cinema-copy .a{top:13%!important}
  html body .cinema .cinema-copy .b{top:75%!important}
  html body .cinema .cinema-copy p{max-width:42vw!important}

  /* Slightly tighter organic constellation on phones, still asymmetric. */
  .cinema-orbit-track>span:nth-child(1){--x:47%;--y:7%}
  .cinema-orbit-track>span:nth-child(2){--x:67%;--y:18%}
  .cinema-orbit-track>span:nth-child(3){--x:84%;--y:33%}
  .cinema-orbit-track>span:nth-child(4){--x:77%;--y:51%}
  .cinema-orbit-track>span:nth-child(5){--x:84%;--y:70%}
  .cinema-orbit-track>span:nth-child(6){--x:63%;--y:83%}
  .cinema-orbit-track>span:nth-child(7){--x:42%;--y:91%}
  .cinema-orbit-track>span:nth-child(8){--x:25%;--y:77%}
  .cinema-orbit-track>span:nth-child(9){--x:13%;--y:59%}
  .cinema-orbit-track>span:nth-child(10){--x:21%;--y:40%}
  .cinema-orbit-track>span:nth-child(11){--x:24%;--y:22%}
  .cinema-orbit-track>span:nth-child(12){--x:42%;--y:30%}
}

@media (max-width:430px){
  .cinema-orbit-shell{width:min(94vw,340px);height:min(82vw,310px)}
  .cinema-orbit-core{width:52px;height:52px}
  .cinema-orbit-track>span em{font-size:6px;letter-spacing:.1em}
}