/* ══════════════════════════════════════════════════════════════════════
   O relógio de pêndulo da seção de motion (/novo). Palco fixo 480×600 em px que
   escala inteiro (igual ao filme do topo). Cada passada do peso é um tique do
   ponteiro dos segundos e troca a frase, letra por letra, por onde o peso passa.
   Quem mexe é o novo-relogio.js (nvRelogioQuadro(t) desenha o instante t).
   ══════════════════════════════════════════════════════════════════════ */
.rl-wrap{position:relative;margin:calc(-1 * clamp(26px,3vw,38px)) calc(-1 * clamp(26px,3vw,38px)) 26px;border-radius:24px 24px 0 0;overflow:hidden}
.rl{position:absolute;left:0;top:0;width:480px;height:600px;transform-origin:0 0;overflow:hidden;font-family:var(--display);
  background:
    radial-gradient(ellipse 60% 38% at 50% 0%,rgba(190,176,255,.20),transparent 70%),
    radial-gradient(ellipse 80% 50% at 50% 100%,rgba(108,92,231,.22),transparent 70%),
    radial-gradient(rgba(255,255,255,.05) 1px,transparent 1.3px) 0 0/10px 10px,
    linear-gradient(180deg,#121320,#0B0D12)}
.rl::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 45%,transparent 50%,rgba(4,5,9,.65) 100%);pointer-events:none;z-index:9}
.rl *{box-sizing:border-box}

/* luz que o peso joga na parede, e a sombra do pêndulo */
.rl-luz{position:absolute;left:0;top:0;width:340px;height:340px;margin:-170px 0 0 -170px;border-radius:50%;background:radial-gradient(circle,rgba(157,139,255,.38),rgba(157,139,255,.08) 45%,transparent 70%);will-change:transform}
.rl-sombra{position:absolute;left:240px;top:118px;width:0;height:330px;transform-origin:0 0;filter:blur(7px);opacity:.55;will-change:transform}
.rl-sombra i{position:absolute;left:-3px;top:0;width:6px;height:100%;background:#000;border-radius:3px}
.rl-sombra b{position:absolute;left:-40px;bottom:-40px;width:80px;height:80px;border-radius:50%;background:#000}

/* o braço: haste + peso. O peso gira ao contrário pra luz continuar vindo do mesmo lado */
.rl-braco{position:absolute;left:240px;top:118px;width:0;height:330px;transform-origin:0 0;z-index:3;will-change:transform}
.rl-haste{position:absolute;left:-3px;top:0;width:6px;height:100%;border-radius:3px;background:linear-gradient(90deg,#5d5880,#f1edff 45%,#a9a3c9 60%,#5d5880)}
.rl-peso{position:absolute;left:-40px;bottom:-40px;width:80px;height:80px;border-radius:50%;will-change:transform;
  background:radial-gradient(circle at 34% 28%,#fff 0 5%,#ece6ff 10%,#a99aff 30%,#6c5ce7 58%,#2d2478 88%,#1b1650 100%);
  box-shadow:0 0 0 2px rgba(255,255,255,.12),0 0 46px rgba(157,139,255,.55),inset -6px -10px 18px rgba(10,6,40,.55)}
.rl-peso::after{content:"";position:absolute;left:18%;top:12%;width:34%;height:20%;border-radius:50%;background:rgba(255,255,255,.55);filter:blur(3px);transform:rotate(-30deg)}
.rl-rastro{position:absolute;left:240px;top:118px;width:0;height:330px;transform-origin:0 0;z-index:2;pointer-events:none}
.rl-rastro b{position:absolute;left:-40px;bottom:-40px;width:80px;height:80px;border-radius:50%;background:radial-gradient(circle,rgba(157,139,255,.5),rgba(108,92,231,.15) 60%,transparent 72%)}

/* o mostrador */
.rl-face{position:absolute;left:178px;top:56px;width:124px;height:124px;border-radius:50%;z-index:4;
  background:conic-gradient(from 210deg,#f4f1ff,#8f82e8 18%,#3b3285 34%,#cfc7ff 52%,#5b4fc4 70%,#2a2468 84%,#f4f1ff);
  box-shadow:0 18px 40px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.15)}
.rl-mostrador{position:absolute;inset:8px;border-radius:50%;background:radial-gradient(circle at 40% 32%,#262836,#0e0f15 72%);box-shadow:inset 0 3px 8px rgba(0,0,0,.8)}
.rl-min{position:absolute;inset:4px;border-radius:50%;background:repeating-conic-gradient(rgba(255,255,255,.35) 0 .6deg,transparent .6deg 6deg);-webkit-mask:radial-gradient(circle,transparent 0 46px,#000 46.5px);mask:radial-gradient(circle,transparent 0 46px,#000 46.5px)}
.rl-hora{position:absolute;inset:4px;border-radius:50%;background:repeating-conic-gradient(from -1.2deg,#fff 0 2.4deg,transparent 2.4deg 30deg);-webkit-mask:radial-gradient(circle,transparent 0 42px,#000 42.5px);mask:radial-gradient(circle,transparent 0 42px,#000 42.5px)}
.rl-marca{position:absolute;left:0;right:0;top:30px;text-align:center;font:700 10px var(--display);letter-spacing:.04em;color:rgba(255,255,255,.55)}
.rl-marca b{color:#9D8BFF}
.rl-face i{position:absolute;left:50%;bottom:50%;transform-origin:50% 100%;border-radius:3px;z-index:2}
.rl-h{width:5px;height:27px;margin-left:-2.5px;background:#f2f0ff}
.rl-m{width:3.5px;height:40px;margin-left:-1.75px;background:#f2f0ff}
.rl-s{width:1.6px;height:46px;margin-left:-.8px;background:#9D8BFF;box-shadow:0 0 6px rgba(157,139,255,.8)}
.rl-s::after{content:"";position:absolute;left:50%;bottom:-12px;width:1.6px;height:12px;margin-left:-.8px;background:#9D8BFF}
.rl-centro{position:absolute;left:50%;top:50%;width:9px;height:9px;margin:-4.5px;border-radius:50%;background:#9D8BFF;box-shadow:0 0 0 2px #0e0f15;z-index:3}
.rl-vidro{position:absolute;inset:8px;border-radius:50%;background:linear-gradient(140deg,rgba(255,255,255,.16),rgba(255,255,255,0) 42%,rgba(255,255,255,0) 70%,rgba(255,255,255,.06));z-index:4;pointer-events:none}

/* a frase: cada letra é uma peça */
.rl-frase{position:absolute;left:90px;top:448px;width:300px;transform:translateY(-50%);z-index:1;display:grid}
.rl-frase p{grid-area:1/1;margin:0;align-self:center;text-align:center;font:700 40px/1.06 var(--display);letter-spacing:-.03em;color:#fff;text-wrap:balance}
.rl-frase p.acento{color:#B4A6FF}
.rl-frase span{display:inline-block;will-change:transform,opacity,filter}
.rl-pe{position:absolute;left:0;right:0;bottom:26px;z-index:10;text-align:center;font:600 12px var(--sans);letter-spacing:.24em;text-transform:uppercase;color:rgba(214,208,255,.45)}