.relogio-embed{
    position:relative;
    width:100%;
    max-width:990px;
    z-index:2;
    contain:layout style;
  }
  @media (min-width: 1550px){
    .relogio-embed{
      transform: translate(90px,-20px);
    }
  }
  #relogioSvg{
    width:100%;
    height:auto;
    display:block;
    overflow:visible;
    filter: drop-shadow(0 20px 40px rgba(0,0,0,0.55));
  }

  #starOrbitPath.orbita-tracado {
    fill: none;
    stroke: rgba(34, 211, 238, 0.10);
    stroke-width: 900;
    pointer-events: none;
  }

  #starOrbit {
    transform-box: view-box;
    transform-origin: 258385.95px 421307.87px;
    animation: orbitaEstrela 9s linear infinite;
  }
  .relogio-embed.is-offscreen #starOrbit,
  .relogio-embed.is-offscreen #star.estrela-brilho,
  .relogio-embed.is-offscreen .pulse-circulo,
  .relogio-embed.is-offscreen .pulse-bolinha{
    animation-play-state: paused;
  }
  @keyframes orbitaEstrela {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
  }
  #star.estrela-brilho {
    transform-box: fill-box;
    transform-origin: center;
    animation: brilhoEstrela 1.6s ease-in-out infinite;
  }
  @keyframes brilhoEstrela {
    0%, 100% {
      transform: scale(1);
      filter: drop-shadow(0 0 0 rgba(255,255,255,0));
      opacity: 0.85;
    }
    50% {
      transform: scale(1.45);
      filter: drop-shadow(0 0 25px rgba(255,255,255,0.95)) drop-shadow(0 0 45px rgba(120,220,255,0.6));
      opacity: 1;
    }
  }

  .pulse-circulo, .pulse-bolinha {
    transform-box: fill-box;
    transform-origin: center;
    animation-name: pulsarAlternado;
    animation-duration: 4s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
  }
  .pulse-circulo { animation-delay: 0s; }
  .pulse-bolinha { animation-delay: 2s; }
  @keyframes pulsarAlternado {
    0%   { transform: scale(1);    opacity: 1; }
    18%  { transform: scale(1.3);  opacity: 0.75; }
    36%  { transform: scale(1);    opacity: 1; }
    100% { transform: scale(1);    opacity: 1; }
  }

  .fade-target {
    opacity: 0;
    animation-name: fadeInLogo;
    animation-duration: 1s;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
  }
  @keyframes fadeInLogo {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
  .fade-letra { transform-box: fill-box; }
  @keyframes entradaEsquerda {
    from { opacity: 0; transform: translateX(-70%); }
    to   { opacity: 1; transform: translateX(0); }
  }
  @keyframes entradaDireita {
    from { opacity: 0; transform: translateX(70%); }
    to   { opacity: 1; transform: translateX(0); }
  }
  .fade-a          { animation: entradaEsquerda 0.7s cubic-bezier(.21,.8,.32,1) 0.10s both; }
  .fade-n          { animation: entradaDireita  0.7s cubic-bezier(.21,.8,.32,1) 0.22s both; }
  .fade-y          { animation: entradaEsquerda 0.7s cubic-bezier(.21,.8,.32,1) 0.34s both; }
  .fade-t          { animation: entradaDireita  0.7s cubic-bezier(.21,.8,.32,1) 0.46s both; }
  .fade-i          { animation: entradaEsquerda 0.7s cubic-bezier(.21,.8,.32,1) 0.58s both; }
  .fade-m          { animation: entradaDireita  0.7s cubic-bezier(.21,.8,.32,1) 0.70s both; }
  .fade-e          { animation: entradaEsquerda 0.7s cubic-bezier(.21,.8,.32,1) 0.82s both; }
  .pulse-circulo   { animation: fadeInLogo 1s ease-out 0.85s forwards, pulsarAlternado 4s ease-in-out 2s infinite; }
  .pulse-bolinha   { animation: fadeInLogo 1s ease-out 0.95s forwards, pulsarAlternado 4s ease-in-out 4s infinite; }

  #NOW {
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
    animation:
      fadeInLogo 1s ease-out 3s forwards,
      explosaoNow 1.1s cubic-bezier(.19,1.3,.32,1.08) 3s both;
  }
  @keyframes explosaoNow {
    0% {
      transform: scale(0.15);
      filter: brightness(3.5) blur(10px);
    }
    55% {
      transform: scale(1.18);
      filter: brightness(1.8) blur(1px);
    }
    75% {
      transform: scale(0.96);
      filter: brightness(1.15) blur(0px);
    }
    100% {
      transform: scale(1);
      filter: brightness(1) blur(0px);
    }
  }

  .no-motion #starOrbitPath,
  .no-motion #starOrbit{
    display:none;
  }
  .no-motion #star.estrela-brilho,
  .no-motion .pulse-circulo,
  .no-motion .pulse-bolinha,
  .no-motion #NOW,
  .no-motion .fade-target,
  .no-motion .fade-letra{
    animation:none !important;
    opacity:1 !important;
    transform:none !important;
    filter:none !important;
  }
  .no-motion #relogioSvg{
    shape-rendering: optimizeSpeed !important;
    filter: drop-shadow(0 8px 14px rgba(0,0,0,0.45));
  }